@jungjaehoon/mama-os 0.18.2 → 0.19.0

package/public/viewer/src/modules/agents.ts

@@ -0,0 +1,1299 @@
+/**
+ * Agents Module - Interactive Agent Management
+ * @module modules/agents
+ *
+ * Managed Agents pattern: card grid list → detail view with 6 tabs
+ * (Config, Persona, Tools, Activity, Validation, History).
+ * SmartStore pattern: reportPageContext for agent awareness.
+ */
+
+/* eslint-env browser */
+
+import { API, type MultiAgentAgent } from '../utils/api.js';
+import { DebugLogger } from '../utils/debug-logger.js';
+import { showToast, escapeAttr, escapeHtml } from '../utils/dom.js';
+import { reportPageContext } from '../utils/ui-commands.js';
+
+const logger = new DebugLogger('Agents');
+const DEFAULT_VALIDATION_TRIGGER = 'agent_test' as const;
+
+const C = {
+  pri: '#1A1A1A',
+  sec: '#6B6560',
+  ter: '#9E9891',
+  bdr: '#EDE9E1',
+  bg: '#FAFAF8',
+  agent: '#8b5cf6',
+  green: '#3A9E7E',
+  red: '#D94F4F',
+  yellow: '#FFCE00',
+} as const;
+
+type AgentWithVersion = MultiAgentAgent & { system?: string; version?: number };
+type DetailTab = 'config' | 'persona' | 'tools' | 'activity' | 'validation' | 'history';
+
+const LEGACY_SWARM_AGENT_IDS = new Set(['developer', 'reviewer', 'architect', 'pm']);
+const SYSTEM_AGENT_IDS = new Set([
+  'os-agent',
+  'conductor',
+  'memory',
+  'dashboard-agent',
+  'wiki-agent',
+]);
+
+const CLAUDE_MODEL_OPTIONS = ['claude-sonnet-4-6', 'claude-opus-4-6', 'claude-haiku-4-5-20251001'];
+const CODEX_MODEL_OPTIONS = ['gpt-5.3-codex', 'gpt-5.4-mini'];
+const GEMINI_MODEL_OPTIONS = ['gemini-2.5-pro', 'gemini-2.5-flash'];
+
+function getModelsForBackend(backend: string): string[] {
+  if (backend === 'codex-mcp' || backend === 'codex') {
+    return CODEX_MODEL_OPTIONS;
+  }
+  if (backend === 'gemini') {
+    return GEMINI_MODEL_OPTIONS;
+  }
+  return CLAUDE_MODEL_OPTIONS;
+}
+
+export class AgentsModule {
+  private container: HTMLElement | null = null;
+  private initialized = false;
+  private agents: AgentWithVersion[] = [];
+  private selectedAgent: AgentWithVersion | null = null;
+  private activeTab: DetailTab = 'config';
+  private detailRequestId = 0;
+  private listRequestId = 0;
+  private currentDetailContext: Record<string, unknown> | null = null;
+
+  init(): void {
+    if (this.initialized) {
+      return;
+    }
+    this.initialized = true;
+    this.container = document.getElementById('agents-content');
+    if (!this.container) {
+      return;
+    }
+  }
+
+  // ── List View ───────────────────────────────────────────────────────────
+
+  private alerts: string[] = [];
+
+  private validationStates: Map<string, string> = new Map();
+
+  private buildListPageContext(): Record<string, unknown> {
+    return {
+      pageType: 'agent-list',
+      total: this.agents.length,
+      agents: this.agents.map((a) => ({
+        id: a.id,
+        name: a.display_name || a.name,
+        enabled: a.enabled !== false,
+        tier: a.tier,
+        model: a.model,
+        validation: this.validationStates.get(a.id ?? '') ?? null,
+        system: SYSTEM_AGENT_IDS.has(a.id ?? ''),
+      })),
+      alerts: this.alerts,
+      summary: `${this.agents.length} agents: ${this.agents.map((a) => `${a.display_name || a.id}(${this.validationStates.get(a.id ?? '') ?? 'no-data'})`).join(', ')}`,
+    };
+  }
+
+  private buildDetailValidationContext(
+    validationSummary: Record<string, unknown> | null
+  ): Record<string, unknown> | null {
+    if (!validationSummary) {
+      return null;
+    }
+    return {
+      outcome: validationSummary.validation_outcome,
+      execution: validationSummary.execution_status,
+      baseline_version: validationSummary.baseline_version,
+      trigger_type: validationSummary.trigger_type,
+      ended_at: validationSummary.ended_at,
+    };
+  }
+
+  private buildDetailPageContext(
+    agent: AgentWithVersion,
+    validationSummary: Record<string, unknown> | null
+  ): Record<string, unknown> {
+    const validation = this.buildDetailValidationContext(validationSummary);
+    const validationOutcome = typeof validation?.outcome === 'string' ? validation.outcome : 'none';
+    return {
+      pageType: 'agent-detail',
+      selectedAgent: agent.id,
+      activeTab: this.activeTab,
+      agent: {
+        id: agent.id,
+        name: agent.display_name || agent.name,
+        model: agent.model,
+        tier: agent.tier,
+        enabled: agent.enabled !== false,
+        version: agent.version,
+        backend: agent.backend,
+      },
+      validation,
+      summary: `${agent.display_name || agent.name} v${agent.version ?? 0} | validation: ${validationOutcome} | tab: ${this.activeTab}`,
+    };
+  }
+
+  private updateDetailPageContext(
+    agent: AgentWithVersion,
+    patch: Record<string, unknown> = {}
+  ): void {
+    const existingContext = this.currentDetailContext ?? this.buildDetailPageContext(agent, null);
+    const nextContext: Record<string, unknown> = {
+      ...existingContext,
+      ...patch,
+      activeTab: patch.activeTab ?? this.activeTab,
+    };
+    const validation =
+      nextContext.validation &&
+      typeof nextContext.validation === 'object' &&
+      !Array.isArray(nextContext.validation)
+        ? (nextContext.validation as Record<string, unknown>)
+        : null;
+    const validationOutcome = typeof validation?.outcome === 'string' ? validation.outcome : 'none';
+    nextContext.summary = `${agent.display_name || agent.name} v${agent.version ?? 0} | validation: ${validationOutcome} | tab: ${String(nextContext.activeTab ?? this.activeTab)}`;
+    this.currentDetailContext = nextContext;
+    reportPageContext(
+      'agents',
+      nextContext,
+      agent.id ? { type: 'agent', id: agent.id } : undefined
+    );
+  }
+
+  private async loadAgents(): Promise<void> {
+    if (!this.container) {
+      return;
+    }
+    const requestId = ++this.listRequestId;
+    try {
+      const yesterday = new Date(Date.now() - 86400000).toISOString().slice(0, 10);
+      const [{ agents }, summaryRes] = await Promise.all([
+        API.getAgents(),
+        API.getActivitySummary(yesterday),
+      ]);
+      if (requestId !== this.listRequestId) {
+        return;
+      }
+      this.agents = agents.filter((agent) => {
+        const id = agent.id ?? '';
+        return !(LEGACY_SWARM_AGENT_IDS.has(id) && agent.enabled === false);
+      });
+      this.alerts = summaryRes.alerts;
+      this.validationStates.clear();
+      this.renderList();
+
+      void Promise.all(
+        this.agents.map((a) =>
+          API.getValidationSummary(a.id ?? '', DEFAULT_VALIDATION_TRIGGER).catch(() => ({
+            summary: null,
+          }))
+        )
+      ).then((valResults) => {
+        if (requestId !== this.listRequestId) {
+          return;
+        }
+        this.validationStates.clear();
+        for (let i = 0; i < this.agents.length; i++) {
+          const vs = valResults[i]?.summary as Record<string, unknown> | null;
+          if (vs?.validation_outcome) {
+            this.validationStates.set(this.agents[i].id ?? '', String(vs.validation_outcome));
+          }
+        }
+        this.renderList();
+        reportPageContext('agents', this.buildListPageContext());
+      });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      const wrapped = new Error(`Failed fetching agents or activity summary: ${message}`);
+      logger.error(wrapped.message, err);
+      throw wrapped;
+    }
+  }
+
+  private static relativeTime(dateStr: string): string {
+    const diff = Date.now() - new Date(dateStr).getTime();
+    if (diff < 60000) {
+      return 'just now';
+    }
+    if (diff < 3600000) {
+      return `${Math.floor(diff / 60000)}m ago`;
+    }
+    if (diff < 86400000) {
+      return `${Math.floor(diff / 3600000)}h ago`;
+    }
+    return `${Math.floor(diff / 86400000)}d ago`;
+  }
+
+  private renderList(): void {
+    if (!this.container) {
+      return;
+    }
+    const cards = this.agents
+      .map((a) => {
+        const lastAct = (a as unknown as Record<string, unknown>).last_activity as
+          | Record<string, unknown>
+          | null
+          | undefined;
+        // Status badge: disabled > error > active > idle
+        let badgeColor: string;
+        let badgeText: string;
+        if (a.enabled === false) {
+          badgeColor = C.ter;
+          badgeText = 'Disabled';
+        } else if (lastAct?.type === 'task_error') {
+          badgeColor = C.red;
+          badgeText = 'Error';
+        } else if (
+          lastAct?.created_at &&
+          Date.now() - new Date(String(lastAct.created_at)).getTime() < 300000
+        ) {
+          badgeColor = C.green;
+          badgeText = 'Active';
+        } else {
+          badgeColor = '#EAB308';
+          badgeText = 'Idle';
+        }
+        const lastRunStr = lastAct?.created_at
+          ? AgentsModule.relativeTime(String(lastAct.created_at))
+          : '';
+        return `
+        <div class="agent-card" data-agent-id="${escapeHtml(a.id ?? '')}" tabindex="0" role="button"
+             style="background:#fff;border:1px solid ${C.bdr};border-radius:12px;padding:16px;cursor:pointer;transition:box-shadow 0.15s,transform 0.15s;">
+          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
+            <span style="font-size:15px;font-weight:600;color:${C.pri}">${escapeHtml(a.display_name || a.name || a.id || '')}</span>
+            <div style="display:flex;align-items:center;gap:6px;">
+              <span style="font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;background:${C.agent}15;color:${C.agent}">T${a.tier ?? 1}</span>
+              ${SYSTEM_AGENT_IDS.has(a.id ?? '') ? `<span style="font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;background:${C.bg};color:${C.sec};border:1px solid ${C.bdr};">system</span>` : ''}
+              <label class="agent-toggle-label" style="position:relative;display:inline-flex;align-items:center;cursor:pointer;" title="${a.enabled !== false ? 'Disable' : 'Enable'} agent">
+                <input type="checkbox" data-toggle-id="${escapeHtml(a.id ?? '')}" ${a.enabled !== false ? 'checked' : ''} style="position:absolute;opacity:0;width:0;height:0;" />
+                <div style="width:28px;height:16px;background:${a.enabled !== false ? C.green : '#D1D5DB'};border-radius:8px;position:relative;transition:background 0.2s;">
+                  <div style="position:absolute;top:2px;left:${a.enabled !== false ? '14px' : '2px'};width:12px;height:12px;background:#fff;border-radius:50%;transition:left 0.2s;"></div>
+                </div>
+              </label>
+            </div>
+          </div>
+          <div style="font-size:12px;color:${C.sec};margin-bottom:6px;">${escapeHtml(a.model || 'No model')}</div>
+          <div style="display:flex;justify-content:space-between;align-items:center;">
+            <span style="font-size:11px;color:${badgeColor};font-weight:500;">\u25CF ${badgeText}${lastRunStr ? ` \u00B7 ${lastRunStr}` : ''}</span>
+            ${(() => {
+              const vo = this.validationStates.get(a.id ?? '');
+              if (!vo) {
+                return '';
+              }
+              const vc: Record<string, string> = {
+                healthy: '#22c55e',
+                improved: '#3b82f6',
+                regressed: '#ef4444',
+                inconclusive: '#f59e0b',
+              };
+              return `<span style="font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;background:${vc[vo] ?? C.ter}15;color:${vc[vo] ?? C.ter};">${vo}</span>`;
+            })()}
+          </div>
+        </div>`;
+      })
+      .join('');
+
+    const alertBanner =
+      this.alerts.length > 0
+        ? `<div class="mb-3 px-3 py-2 rounded-lg bg-red-50 border border-red-200 text-[12px] text-red-700">\u26A0 ${this.alerts.length} agent(s) need attention: ${escapeHtml(this.alerts.slice(0, 3).join(', '))}</div>`
+        : '';
+
+    this.container.innerHTML = `
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
+        <h2 style="font-size:18px;font-weight:600;color:${C.pri};margin:0;">Agents</h2>
+        <button id="btn-create-agent"
+                style="font-size:12px;padding:6px 14px;border-radius:6px;border:none;background:${C.agent};color:#fff;cursor:pointer;font-weight:500;">
+          + New Agent
+        </button>
+      </div>
+      ${alertBanner}
+      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;">
+        ${cards}
+      </div>`;
+
+    // Enable toggle — stop propagation so card click doesn't fire
+    this.container.querySelectorAll<HTMLInputElement>('[data-toggle-id]').forEach((toggle) => {
+      toggle.addEventListener('click', (e) => e.stopPropagation());
+      toggle.addEventListener('change', async () => {
+        const agentId = toggle.dataset.toggleId;
+        if (!agentId) {
+          return;
+        }
+        const agent = this.agents.find((item) => item.id === agentId);
+        const version = agent?.version;
+        if (version === null || version === undefined) {
+          showToast('Version unavailable');
+          toggle.checked = !toggle.checked;
+          return;
+        }
+        try {
+          await API.updateAgent(agentId, {
+            version,
+            changes: { enabled: toggle.checked },
+            change_note: toggle.checked ? 'Enabled via Agents tab' : 'Disabled via Agents tab',
+          });
+          showToast(`${agentId} ${toggle.checked ? 'enabled' : 'disabled'}`);
+          void this.loadAgents().catch((error) => {
+            logger.error('Failed to refresh agents after toggle', error);
+            showToast('Failed to refresh agent list');
+          });
+        } catch {
+          showToast('Toggle failed');
+          toggle.checked = !toggle.checked;
+        }
+      });
+    });
+    this.container.querySelectorAll<HTMLElement>('.agent-toggle-label').forEach((label) => {
+      label.addEventListener('click', (event) => event.stopPropagation());
+    });
+
+    this.container.querySelectorAll('.agent-card').forEach((card) => {
+      const openCard = (event?: Event) => {
+        const target = event?.target;
+        if (target instanceof Element && target.closest('.agent-toggle-label')) {
+          return;
+        }
+        const agentId = (card as HTMLElement).dataset.agentId;
+        if (agentId) {
+          this.showDetail(agentId);
+        }
+      };
+      card.addEventListener('click', (event) => openCard(event));
+      card.addEventListener('keydown', (event: KeyboardEvent) => {
+        if (event.target !== card) {
+          return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          openCard(event);
+        }
+      });
+    });
+    this.container
+      .querySelector('#btn-create-agent')
+      ?.addEventListener('click', () => this.showCreateModal());
+  }
+
+  // ── Detail View ─────────────────────────────────────────────────────────
+
+  private async showDetail(agentId: string, desiredTab?: DetailTab): Promise<void> {
+    const requestId = ++this.detailRequestId;
+    try {
+      const agent = await API.getAgent(agentId);
+      if (requestId !== this.detailRequestId) {
+        return;
+      }
+      this.selectedAgent = agent;
+      this.activeTab = desiredTab ?? 'config';
+      this.renderDetail();
+      // Fetch validation to include in page context
+      const valData = await API.getValidationSummary(agentId, DEFAULT_VALIDATION_TRIGGER).catch(
+        () => ({ summary: null })
+      );
+      if (requestId !== this.detailRequestId || this.selectedAgent?.id !== agentId) {
+        return;
+      }
+      const vs = valData.summary as Record<string, unknown> | null;
+      this.currentDetailContext = this.buildDetailPageContext(agent, vs);
+      reportPageContext('agents', this.currentDetailContext, { type: 'agent', id: agentId });
+    } catch (err) {
+      logger.error(`Failed to load agent ${agentId}`, err);
+      showToast('Failed to load agent details');
+    }
+  }
+
+  private renderDetail(): void {
+    if (!this.container || !this.selectedAgent) {
+      return;
+    }
+    const a = this.selectedAgent;
+    const tabs: DetailTab[] = ['config', 'persona', 'tools', 'activity', 'validation', 'history'];
+
+    const tabBar = tabs
+      .map(
+        (t) =>
+          `<button class="detail-tab" data-dtab="${t}" style="padding:6px 14px;border:none;border-bottom:2px solid ${this.activeTab === t ? C.agent : 'transparent'};background:none;cursor:pointer;font-size:12px;font-weight:${this.activeTab === t ? '600' : '400'};color:${this.activeTab === t ? C.agent : C.sec};transition:all 0.15s;">${t.charAt(0).toUpperCase() + t.slice(1)}</button>`
+      )
+      .join('');
+
+    this.container.innerHTML = `
+      <div style="margin-bottom:16px;display:flex;align-items:center;gap:8px;">
+        <button id="btn-back" style="background:none;border:none;cursor:pointer;color:${C.sec};font-size:13px;">\u2190 Agents</button>
+        <span style="font-size:16px;font-weight:600;color:${C.pri}">${escapeHtml(a.display_name || a.name || a.id || '')}</span>
+        <span style="font-size:11px;color:${C.ter};background:${C.bg};padding:2px 8px;border-radius:4px;">v${a.version ?? 0}</span>
+      </div>
+      <div style="border-bottom:1px solid ${C.bdr};margin-bottom:16px;display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;">
+        ${tabBar}
+      </div>
+      <div id="detail-content"></div>`;
+
+    this.container.querySelector('#btn-back')?.addEventListener('click', () => this.showList());
+    this.container.querySelectorAll('.detail-tab').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        this.activeTab = (btn as HTMLElement).dataset.dtab as DetailTab;
+        this.renderDetail();
+        const vo = this.validationStates.get(a.id ?? '');
+        const existingContext = this.currentDetailContext ?? this.buildDetailPageContext(a, null);
+        const existingValidation =
+          existingContext.validation &&
+          typeof existingContext.validation === 'object' &&
+          !Array.isArray(existingContext.validation)
+            ? (existingContext.validation as Record<string, unknown>)
+            : null;
+        const nextValidation =
+          existingValidation || vo
+            ? {
+                ...(existingValidation ?? {}),
+                ...(vo ? { outcome: vo } : {}),
+              }
+            : null;
+        this.updateDetailPageContext(a, {
+          activeTab: this.activeTab,
+          validation: nextValidation,
+        });
+      });
+    });
+
+    const content = this.container.querySelector('#detail-content') as HTMLElement;
+    if (!content) {
+      return;
+    }
+
+    switch (this.activeTab) {
+      case 'config':
+        this.renderConfigTab(content, a);
+        break;
+      case 'persona':
+        this.renderPersonaTab(content, a);
+        break;
+      case 'tools':
+        this.renderToolsTab(content, a);
+        break;
+      case 'activity':
+        void this.renderActivityTab(content, a);
+        break;
+      case 'validation':
+        void this.renderValidationTab(content, a);
+        break;
+      case 'history':
+        this.renderHistoryTab(content, a);
+        break;
+    }
+  }
+
+  private renderConfigTab(el: HTMLElement, a: AgentWithVersion): void {
+    const backend = String(a.backend || 'claude');
+    const modelOptions = getModelsForBackend(backend)
+      .map(
+        (m) =>
+          `<option value="${escapeAttr(m)}" ${a.model === m ? 'selected' : ''}>${escapeHtml(m)}</option>`
+      )
+      .join('');
+
+    const tierOptions = [1, 2, 3]
+      .map((t) => `<option value="${t}" ${(a.tier ?? 1) === t ? 'selected' : ''}>T${t}</option>`)
+      .join('');
+
+    const backendOptions = Array.from(new Set(['claude', 'codex', 'codex-mcp', 'gemini', backend]))
+      .map(
+        (b) =>
+          `<option value="${escapeAttr(b)}" ${backend === b ? 'selected' : ''}>${escapeHtml(b)}</option>`
+      )
+      .join('');
+
+    el.innerHTML = `
+      <div class="space-y-3">
+        <div>
+          <label class="block text-[11px] text-gray-400 mb-1">ID</label>
+          <div class="text-[13px] text-gray-800 px-2.5 py-1.5 border border-gray-200 rounded-md bg-gray-50">${escapeHtml(a.id ?? '')}</div>
+        </div>
+        <div>
+          <label class="block text-[11px] text-gray-400 mb-1">Name</label>
+          <input id="cfg-name" class="agent-input w-full px-2.5 py-1.5 border border-gray-200 rounded-md text-[13px]" value="${escapeAttr(a.display_name || a.name || '')}" />
+        </div>
+        <div>
+          <label class="block text-[11px] text-gray-400 mb-1">Backend</label>
+          <select id="cfg-backend" class="agent-input w-full px-2.5 py-1.5 border border-gray-200 rounded-md text-[13px]">${backendOptions}</select>
+        </div>
+        <div>
+          <label class="block text-[11px] text-gray-400 mb-1">Model</label>
+          <select id="cfg-model" class="agent-input w-full px-2.5 py-1.5 border border-gray-200 rounded-md text-[13px]">${modelOptions}</select>
+        </div>
+        <div>
+          <label class="block text-[11px] text-gray-400 mb-1">Tier</label>
+          <select id="cfg-tier" class="agent-input w-full px-2.5 py-1.5 border border-gray-200 rounded-md text-[13px]">${tierOptions}</select>
+        </div>
+        <div class="flex items-center gap-3">
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input type="checkbox" id="cfg-enabled" ${a.enabled !== false ? 'checked' : ''} class="accent-[#FFCE00] w-4 h-4" />
+            <span class="text-[13px]">Enabled</span>
+          </label>
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input type="checkbox" id="cfg-delegate" ${a.can_delegate ? 'checked' : ''} class="accent-[#8b5cf6] w-4 h-4" />
+            <span class="text-[13px]">Can Delegate</span>
+          </label>
+        </div>
+        <div class="pt-2">
+          <button id="btn-save-config" class="px-4 py-1.5 rounded-md text-[12px] font-medium text-white bg-[#8b5cf6] hover:bg-[#7c3aed] transition-colors">Save</button>
+        </div>
+      </div>`;
+
+    // Backend change → update model options
+    el.querySelector('#cfg-backend')?.addEventListener('change', () => {
+      const newBackend = (el.querySelector('#cfg-backend') as HTMLSelectElement).value;
+      const models = getModelsForBackend(newBackend);
+      const modelSelect = el.querySelector('#cfg-model') as HTMLSelectElement;
+      modelSelect.innerHTML = models
+        .map((m) => `<option value="${escapeAttr(m)}">${escapeHtml(m)}</option>`)
+        .join('');
+    });
+
+    // Save via managed-agent API so config sync + version history happen together
+    el.querySelector('#btn-save-config')?.addEventListener('click', async () => {
+      if (!a.id) {
+        return;
+      }
+      const displayName = (el.querySelector('#cfg-name') as HTMLInputElement).value.trim();
+      if (!displayName) {
+        showToast('Name is required');
+        return;
+      }
+      const changes = {
+        name: displayName,
+        display_name: displayName,
+        model: (el.querySelector('#cfg-model') as HTMLSelectElement).value,
+        backend: (el.querySelector('#cfg-backend') as HTMLSelectElement).value,
+        tier: parseInt((el.querySelector('#cfg-tier') as HTMLSelectElement).value, 10),
+        enabled: (el.querySelector('#cfg-enabled') as HTMLInputElement).checked,
+        can_delegate: (el.querySelector('#cfg-delegate') as HTMLInputElement).checked,
+      };
+      const version = a.version;
+      if (version === null || version === undefined) {
+        showToast('Version unavailable');
+        return;
+      }
+      try {
+        await API.updateAgent(a.id, {
+          version,
+          changes,
+          change_note: 'Config updated via Agents tab',
+        });
+        showToast('Saved — hot reloaded');
+        this.showDetail(a.id);
+      } catch {
+        showToast('Save failed');
+      }
+    });
+  }
+
+  private renderPersonaTab(el: HTMLElement, a: AgentWithVersion): void {
+    const text = (a as { system?: string }).system || '(No persona loaded)';
+    el.innerHTML = `
+      <textarea id="persona-editor" style="width:100%;min-height:300px;font-family:monospace;font-size:12px;padding:10px;border:1px solid ${C.bdr};border-radius:6px;resize:vertical;line-height:1.5;color:${C.pri};background:#fff;">${escapeHtml(text)}</textarea>
+      <div style="margin-top:12px;display:flex;gap:8px;">
+        <button id="btn-save-persona" style="padding:6px 14px;border:none;border-radius:6px;background:${C.agent};color:#fff;cursor:pointer;font-size:12px;font-weight:500;">Save \u2014 creates v${(a.version ?? 0) + 1}</button>
+      </div>`;
+
+    el.querySelector('#btn-save-persona')?.addEventListener('click', async () => {
+      const textarea = el.querySelector('#persona-editor') as HTMLTextAreaElement;
+      if (!textarea || !a.id) {
+        return;
+      }
+      try {
+        const updatePayload: {
+          version?: number;
+          changes: Record<string, unknown>;
+          change_note: string;
+        } = {
+          changes: { system: textarea.value },
+          change_note: 'Persona updated via viewer',
+        };
+        if (a.version !== null && a.version !== undefined) {
+          updatePayload.version = a.version;
+        }
+        const res = await API.updateAgent(a.id, updatePayload);
+        if ((res as { new_version?: number }).new_version) {
+          showToast(`v${(res as { new_version: number }).new_version} saved`);
+          this.showDetail(a.id);
+        }
+      } catch (err) {
+        showToast('Save failed');
+        logger.error('Persona save failed', err);
+      }
+    });
+  }
+
+  private renderToolsTab(el: HTMLElement, a: AgentWithVersion): void {
+    const allTools = [
+      'Bash',
+      'Read',
+      'Edit',
+      'Write',
+      'Glob',
+      'Grep',
+      'WebFetch',
+      'WebSearch',
+      'NotebookEdit',
+    ];
+    const allowed = a.tool_permissions?.allowed ?? [];
+    const isAll = allowed.includes('*');
+
+    const rows = allTools
+      .map((t) => {
+        const checked = isAll || allowed.includes(t);
+        return `<label class="flex items-center gap-2 py-1.5 border-b border-gray-100 text-[13px] cursor-pointer">
+          <input type="checkbox" ${checked ? 'checked' : ''} data-tool="${t}" class="accent-[#8b5cf6] w-4 h-4" /> ${t}
+        </label>`;
+      })
+      .join('');
+
+    el.innerHTML = `
+      <div class="text-[11px] text-gray-400 mb-2">Tier ${a.tier ?? 1} preset. Toggle tools and save.</div>
+      <div>${rows}</div>
+      <div class="pt-3">
+        <button id="btn-save-tools" class="px-4 py-1.5 rounded-md text-[12px] font-medium text-white bg-[#8b5cf6] hover:bg-[#7c3aed] transition-colors">Save Tools</button>
+      </div>`;
+
+    el.querySelector('#btn-save-tools')?.addEventListener('click', async () => {
+      const checked: string[] = [];
+      el.querySelectorAll<HTMLInputElement>('input[data-tool]').forEach((cb) => {
+        if (cb.checked) {
+          checked.push(cb.dataset.tool!);
+        }
+      });
+      if (!a.id) {
+        return;
+      }
+      const preserveWildcard = (isAll || (a.tier ?? 1) === 1) && checked.length === allTools.length;
+      const normalizedAllowed = preserveWildcard ? ['*'] : checked;
+      const existingBlocked = Array.isArray(a.tool_permissions?.blocked)
+        ? a.tool_permissions.blocked
+        : [];
+      const toolPermissions = {
+        allowed: normalizedAllowed,
+        blocked: existingBlocked,
+      };
+      const version = a.version;
+      if (version === null || version === undefined) {
+        showToast('Version unavailable');
+        return;
+      }
+      try {
+        await API.updateAgent(a.id, {
+          version,
+          changes: { tool_permissions: toolPermissions },
+          change_note: preserveWildcard
+            ? 'Tools: full access'
+            : `Tools: ${normalizedAllowed.join(', ')}`,
+        });
+        showToast('Tools saved - hot reloaded');
+        this.showDetail(a.id);
+      } catch {
+        showToast('Save failed');
+      }
+    });
+  }
+
+  private async renderActivityTab(el: HTMLElement, a: AgentWithVersion): Promise<void> {
+    el.innerHTML = '<div class="text-[12px] text-gray-400">Loading...</div>';
+    const requestId = this.detailRequestId;
+    const expectedAgentId = this.selectedAgent?.id ?? a.id ?? '';
+    try {
+      const { activity } = await API.getAgentActivity(a.id ?? '', 20);
+      if (requestId !== this.detailRequestId || this.selectedAgent?.id !== expectedAgentId) {
+        return;
+      }
+      if (!activity.length) {
+        if (requestId !== this.detailRequestId || this.selectedAgent?.id !== expectedAgentId) {
+          return;
+        }
+        this.updateDetailPageContext(a, { activity: [] });
+        el.innerHTML =
+          '<div class="text-[12px] text-gray-400 py-4 text-center">No activity yet. Delegate a task to this agent to see logs here.</div>';
+        return;
+      }
+      const rows = activity
+        .map((ev: Record<string, unknown>) => {
+          const typeIcons: Record<string, string> = {
+            test_run: '&#x1F9EA;',
+            task_error: '&#x274C;',
+            config_change: '&#x2699;&#xFE0F;',
+            task_start: '&#x25B6;&#xFE0F;',
+          };
+          const icon = typeIcons[String(ev.type)] || '&#x2705;';
+          const scoreStr =
+            ev.score !== null && ev.score !== undefined ? ` &mdash; ${ev.score}/100` : '';
+          const summary = escapeHtml(String(ev.output_summary || ev.input_summary || ev.type));
+          const errorHtml = ev.error_message
+            ? `<div class="text-[11px] text-red-500 mt-0.5">${escapeHtml(String(ev.error_message))}</div>`
+            : '';
+          const meta = `<div class="text-[10px] text-gray-400 mt-0.5">v${escapeHtml(String(ev.agent_version ?? ''))} &middot; ${escapeHtml(String(ev.duration_ms ?? 0))}ms &middot; ${escapeHtml(String(ev.created_at ?? ''))}</div>`;
+
+          // Expandable card for test_run with per-item pass/fail
+          if (ev.type === 'test_run' && ev.details) {
+            let details: Record<string, unknown> | null = null;
+            try {
+              details =
+                typeof ev.details === 'string'
+                  ? (JSON.parse(ev.details) as Record<string, unknown>)
+                  : (ev.details as Record<string, unknown>);
+            } catch {
+              /* ignore parse errors */
+            }
+            const items = (details?.items as Array<Record<string, unknown>>) ?? [];
+            const itemsHtml = items
+              .map((item) => {
+                const badge =
+                  item.result === 'pass'
+                    ? '<span class="text-[10px] px-1.5 py-0.5 rounded bg-green-100 text-green-700">PASS</span>'
+                    : '<span class="text-[10px] px-1.5 py-0.5 rounded bg-red-100 text-red-700">FAIL</span>';
+                return `<div class="flex items-center gap-2 py-1 text-[11px]">${badge}<span class="text-gray-600 truncate">${escapeHtml(String(item.input || ''))}</span></div>`;
+              })
+              .join('');
+
+            return `<div class="py-2 border-b border-gray-100">
+              <div role="button" tabindex="0" aria-expanded="false" aria-controls="expand-${Number(ev.id)}" data-expand="${Number(ev.id)}" class="flex items-center gap-2 cursor-pointer">
+                <span class="text-[14px] flex-shrink-0">${icon}</span>
+                <div class="flex-1 min-w-0">
+                  <div class="text-[12px] font-medium text-gray-800">${summary}${scoreStr}</div>
+                  ${meta}
+                </div>
+                <span class="text-[10px] text-gray-400">&#x25BC;</span>
+              </div>
+              <div id="expand-${Number(ev.id)}" class="hidden mt-2 ml-6 pl-2 border-l-2 border-gray-200">${itemsHtml}</div>
+            </div>`;
+          }
+
+          return `<div class="flex items-start gap-2 py-2 border-b border-gray-100">
+            <span class="text-[14px] flex-shrink-0">${icon}</span>
+            <div class="flex-1 min-w-0">
+              <div class="text-[12px] font-medium text-gray-800">${summary}${scoreStr}</div>
+              ${errorHtml}
+              ${meta}
+            </div>
+          </div>`;
+        })
+        .join('');
+      if (requestId !== this.detailRequestId || this.selectedAgent?.id !== expectedAgentId) {
+        return;
+      }
+      el.innerHTML = `<div>${rows}</div>`;
+      const activityContext = activity.slice(0, 20).map((ev: Record<string, unknown>) => ({
+        id: ev.id ?? null,
+        type: ev.type ?? null,
+        input_summary: ev.input_summary ?? null,
+        output_summary: ev.output_summary ?? null,
+        execution_status: ev.execution_status ?? null,
+        duration_ms: ev.duration_ms ?? null,
+        tokens_used: ev.tokens_used ?? null,
+        score: ev.score ?? null,
+        created_at: ev.created_at ?? null,
+        error_message: ev.error_message ?? null,
+      }));
+      if (requestId !== this.detailRequestId || this.selectedAgent?.id !== expectedAgentId) {
+        return;
+      }
+      this.updateDetailPageContext(a, { activity: activityContext });
+
+      // Expand/collapse toggle with ARIA
+      if (requestId !== this.detailRequestId || this.selectedAgent?.id !== expectedAgentId) {
+        return;
+      }
+      el.querySelectorAll<HTMLElement>('[data-expand]').forEach((toggle) => {
+        const toggleExpand = () => {
+          const id = toggle.dataset.expand;
+          const content = el.querySelector(`#expand-${id}`);
+          if (content) {
+            const isHidden = content.classList.toggle('hidden');
+            toggle.setAttribute('aria-expanded', String(!isHidden));
+          }
+        };
+        toggle.addEventListener('click', toggleExpand);
+        toggle.addEventListener('keydown', (event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            toggleExpand();
+          }
+        });
+      });
+    } catch {
+      el.innerHTML = '<div class="text-[12px] text-red-500">Failed to load activity.</div>';
+    }
+  }
+
+  // ── Validation Tab ─────────────────────────────────────────────────────
+
+  private async renderValidationTab(el: HTMLElement, a: AgentWithVersion): Promise<void> {
+    el.innerHTML = `<div style="color:${C.ter};font-size:12px;">Loading validation...</div>`;
+    const agentId = a.id ?? '';
+    const requestId = this.detailRequestId;
+    const expectedAgentId = this.selectedAgent?.id ?? agentId;
+    const OC: Record<string, string> = {
+      healthy: '#22c55e',
+      improved: '#3b82f6',
+      regressed: '#ef4444',
+      inconclusive: '#f59e0b',
+    };
+
+    try {
+      const [summaryRes, historyRes] = await Promise.all([
+        API.getValidationSummary(agentId, DEFAULT_VALIDATION_TRIGGER),
+        API.getValidationHistory(agentId, 30, DEFAULT_VALIDATION_TRIGGER),
+      ]);
+      if (requestId !== this.detailRequestId || this.selectedAgent?.id !== expectedAgentId) {
+        return;
+      }
+
+      const summary = summaryRes.summary as Record<string, unknown> | null;
+      const history = historyRes.history as Array<Record<string, unknown>>;
+
+      if (!summary && history.length === 0) {
+        el.innerHTML = `<div style="color:${C.ter};font-size:13px;padding:32px 0;text-align:center;">
+          No validation sessions yet.<br/>
+          <span style="font-size:12px;">Run <code style="background:${C.bg};padding:2px 6px;border-radius:4px;">agent_test("${escapeHtml(agentId)}")</code> to create the first session.</span>
+        </div>`;
+        return;
+      }
+
+      const latestId = String(summary?.id ?? '');
+      const outcome = String(summary?.validation_outcome ?? 'none');
+      const execStatus = String(summary?.execution_status ?? '—');
+      const outcomeColor = OC[outcome] ?? C.ter;
+      const baselineVer =
+        summary?.baseline_version !== null && summary?.baseline_version !== undefined
+          ? `v${summary.baseline_version}`
+          : 'none';
+      const endedAt = summary?.ended_at ? new Date(Number(summary.ended_at)).toLocaleString() : '—';
+
+      // ── 1. Fetch session detail with metrics + compare against baseline ──
+      let metricsHtml = '';
+      let compareData: {
+        deltas: Array<{
+          name: string;
+          current: number;
+          baseline: number | null;
+          delta: number | null;
+          direction: string;
+        }>;
+      } | null = null;
+      if (latestId) {
+        try {
+          compareData = await API.getValidationCompare(agentId, latestId, 'approved');
+        } catch {
+          /* no compare data available */
+        }
+      }
+
+      if (compareData && compareData.deltas && compareData.deltas.length > 0) {
+        const metricRows = compareData.deltas
+          .map((d) => {
+            const hasBaseline = d.baseline !== null && d.delta !== null;
+            const isGood = d.direction === 'down_good' ? (d.delta ?? 0) < 0 : (d.delta ?? 0) > 0;
+            const deltaColor = !hasBaseline ? C.ter : isGood ? '#22c55e' : '#ef4444';
+            const deltaSign = (d.delta ?? 0) > 0 ? '+' : '';
+            const pct =
+              hasBaseline && d.baseline ? Math.round(((d.delta ?? 0) / d.baseline) * 100) : null;
+            const pctStr = pct !== null ? ` (${pct > 0 ? '+' : ''}${pct}%)` : '';
+
+            const baseStr = hasBaseline ? String(d.baseline) : '—';
+            const arrow = hasBaseline ? ' → ' : '';
+
+            return `<tr style="border-bottom:1px solid ${C.bdr};">
+            <td style="padding:8px;font-size:12px;color:${C.sec};font-weight:500;">${escapeHtml(d.name)}</td>
+            <td style="padding:8px;font-size:13px;font-weight:600;color:${C.pri};">
+              ${hasBaseline ? `<span style="color:${C.ter};">${baseStr}</span>${arrow}` : ''}${d.current}
+            </td>
+            <td style="padding:8px;font-size:12px;font-weight:600;color:${deltaColor};">
+              ${hasBaseline ? `${deltaSign}${d.delta}${pctStr}` : 'no baseline'}
+            </td>
+            <td style="padding:8px;font-size:11px;color:${C.ter};">${d.direction === 'down_good' ? '↓ lower better' : d.direction === 'up_good' ? '↑ higher better' : '—'}</td>
+          </tr>`;
+          })
+          .join('');
+
+        metricsHtml = `
+          <div style="margin-top:20px;">
+            <div style="font-size:13px;font-weight:600;color:${C.pri};margin-bottom:8px;">Metrics vs Baseline</div>
+            <table style="width:100%;border-collapse:collapse;">
+              <thead><tr style="border-bottom:2px solid ${C.bdr};">
+                <th style="text-align:left;padding:6px 8px;font-size:11px;color:${C.ter};">Metric</th>
+                <th style="text-align:left;padding:6px 8px;font-size:11px;color:${C.ter};">Value</th>
+                <th style="text-align:left;padding:6px 8px;font-size:11px;color:${C.ter};">Delta</th>
+                <th style="text-align:left;padding:6px 8px;font-size:11px;color:${C.ter};">Direction</th>
+              </tr></thead>
+              <tbody>${metricRows}</tbody>
+            </table>
+          </div>`;
+      }
+
+      // ── 2. Report from Conductor ──
+      let reportHtml = '';
+      let reportContext: Record<string, unknown> | null = null;
+      if (summary?.report_json) {
+        try {
+          const report = JSON.parse(String(summary.report_json));
+          const reportLines = Array.isArray(report.lines)
+            ? report.lines.map((line: unknown) => String(line))
+            : [];
+          const reportHeadline = String(report.headline ?? report.outcome ?? reportLines[0] ?? '');
+          const reportDetails = String(
+            report.details ?? (reportLines.length > 0 ? reportLines.join('\n') : '')
+          );
+          reportContext = {
+            headline: reportHeadline,
+            details: reportDetails,
+            outcome: String(report.outcome ?? outcome),
+          };
+          reportHtml = `
+            <div style="margin-top:20px;">
+              <div style="font-size:13px;font-weight:600;color:${C.pri};margin-bottom:8px;">Validation Report</div>
+              <div style="background:${C.bg};padding:12px 16px;border-radius:8px;border-left:3px solid ${outcomeColor};">
+                <div style="font-size:13px;font-weight:600;color:${outcomeColor};margin-bottom:6px;">${escapeHtml(reportHeadline)}</div>
+                <div style="font-size:12px;color:${C.sec};white-space:pre-wrap;line-height:1.6;">${escapeHtml(reportDetails)}</div>
+              </div>
+            </div>`;
+        } catch {
+          /* ignore */
+        }
+      }
+
+      // ── 3. History — version-by-version performance table ──
+      let historyHtml = '';
+      if (history.length > 0) {
+        // Fetch metrics for each session to show performance numbers
+        type HistSession = Record<string, unknown> & { _metrics: Array<Record<string, unknown>> };
+        const sessionDetails: HistSession[] = await Promise.all(
+          history.slice(0, 10).map(async (h) => {
+            try {
+              const detail = await API.getValidationSessionDetail(String(h.id));
+              return { ...h, _metrics: detail.metrics } as HistSession;
+            } catch {
+              return { ...h, _metrics: [] } as HistSession;
+            }
+          })
+        );
+
+        const hRows = sessionDetails
+          .map((h) => {
+            const hOutcome = String(h.validation_outcome ?? '—');
+            const hColor = OC[hOutcome] ?? C.ter;
+            const hTime = h.ended_at ? new Date(Number(h.ended_at)).toLocaleString() : 'running...';
+            const metrics = h._metrics as Array<{
+              name: string;
+              value: number;
+              delta_value: number | null;
+              direction: string;
+            }>;
+
+            // Extract key metrics for display
+            const durMetric = metrics.find(
+              (m) => m.name === 'duration_ms' || m.name === 'publish_latency_ms'
+            );
+            const tokenMetric = metrics.find((m) => m.name === 'token_cost');
+            const scoreMetric = metrics.find(
+              (m) => m.name === 'auto_score' || m.name === 'completion_rate'
+            );
+
+            const fmtMetric = (
+              m: { value: number; delta_value: number | null; direction: string } | undefined,
+              unit: string
+            ) => {
+              if (!m) {
+                return `<span style="color:${C.ter};">—</span>`;
+              }
+              const val =
+                unit === 'ms'
+                  ? `${(m.value / 1000).toFixed(1)}s`
+                  : unit === '%'
+                    ? `${Math.round(m.value * 100)}%`
+                    : String(Math.round(m.value));
+              if (m.delta_value === null) {
+                return `<span>${val}</span>`;
+              }
+              const isGood = m.direction === 'down_good' ? m.delta_value < 0 : m.delta_value > 0;
+              const dColor = isGood ? '#22c55e' : '#ef4444';
+              const sign = m.delta_value > 0 ? '+' : '';
+              const dVal =
+                unit === 'ms'
+                  ? `${sign}${(m.delta_value / 1000).toFixed(1)}s`
+                  : `${sign}${Math.round(m.delta_value)}`;
+              return `<span>${val}</span> <span style="color:${dColor};font-size:10px;">${dVal}</span>`;
+            };
+
+            const cmpBase = (compareData as unknown as Record<string, unknown> | null)?.baseline as
+              | { session?: { id?: string } }
+              | null
+              | undefined;
+            const isApproved =
+              String(summary?.baseline_session_id ?? '') === String(h.id) ||
+              cmpBase?.session?.id === String(h.id);
+
+            return `<tr style="border-bottom:1px solid ${C.bdr};${String(h.id) === latestId ? `background:${C.bg};` : ''}">
+            <td style="padding:6px 8px;font-size:12px;color:${C.sec};">v${h.agent_version ?? '?'}${isApproved ? ` <span style="font-size:9px;padding:1px 4px;border-radius:3px;background:${C.agent}20;color:${C.agent};">baseline</span>` : ''}</td>
+            <td style="padding:6px 8px;font-size:12px;"><span style="color:${hColor};font-weight:600;">${escapeHtml(hOutcome)}</span></td>
+            <td style="padding:6px 8px;font-size:12px;color:${C.sec};">${escapeHtml(String(h.trigger_type ?? '—'))}</td>
+            <td style="padding:6px 8px;font-size:12px;">${fmtMetric(durMetric, 'ms')}</td>
+            <td style="padding:6px 8px;font-size:12px;">${fmtMetric(tokenMetric, '')}</td>
+            <td style="padding:6px 8px;font-size:12px;">${fmtMetric(scoreMetric, '%')}</td>
+            <td style="padding:6px 8px;font-size:11px;color:${C.ter};">${escapeHtml(hTime)}</td>
+          </tr>`;
+          })
+          .join('');
+
+        historyHtml = `
+          <div style="margin-top:20px;">
+            <div style="font-size:13px;font-weight:600;color:${C.pri};margin-bottom:8px;">Version Performance History</div>
+            <div style="overflow-x:auto;">
+              <table style="width:100%;border-collapse:collapse;min-width:600px;">
+                <thead><tr style="border-bottom:2px solid ${C.bdr};">
+                  <th style="text-align:left;padding:6px 8px;font-size:11px;color:${C.ter};">Version</th>
+                  <th style="text-align:left;padding:6px 8px;font-size:11px;color:${C.ter};">Outcome</th>
+                  <th style="text-align:left;padding:6px 8px;font-size:11px;color:${C.ter};">Trigger</th>
+                  <th style="text-align:left;padding:6px 8px;font-size:11px;color:${C.ter};">Latency</th>
+                  <th style="text-align:left;padding:6px 8px;font-size:11px;color:${C.ter};">Tokens</th>
+                  <th style="text-align:left;padding:6px 8px;font-size:11px;color:${C.ter};">Score</th>
+                  <th style="text-align:left;padding:6px 8px;font-size:11px;color:${C.ter};">Time</th>
+                </tr></thead>
+                <tbody>${hRows}</tbody>
+              </table>
+            </div>
+            </div>`;
+      }
+
+      const validationContext = {
+        ...this.buildDetailValidationContext(summary),
+        latest_session_id: latestId || null,
+        metrics: compareData?.deltas ?? [],
+        report: reportContext,
+        history: history.slice(0, 10).map((h) => ({
+          id: h.id ?? null,
+          agent_version: h.agent_version ?? null,
+          validation_outcome: h.validation_outcome ?? null,
+          execution_status: h.execution_status ?? null,
+          trigger_type: h.trigger_type ?? null,
+          ended_at: h.ended_at ?? null,
+          baseline_version: h.baseline_version ?? null,
+        })),
+      };
+      if (requestId !== this.detailRequestId || this.selectedAgent?.id !== expectedAgentId) {
+        return;
+      }
+      this.updateDetailPageContext(a, { validation: validationContext });
+
+      // ── 4. Approve button ──
+      const canApprove = outcome === 'improved' || outcome === 'healthy';
+      const sessionVersion = Number(summary?.agent_version ?? a.version ?? 0);
+      const approveBtn = canApprove
+        ? `<button id="btn-approve-validation" style="margin-top:16px;padding:8px 20px;background:${C.agent};color:#131313;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:opacity 0.15s;" onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'">Approve v${sessionVersion} as Baseline</button>`
+        : '';
+
+      el.innerHTML = `
+        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:4px;">
+          <div style="background:${C.bg};padding:14px;border-radius:8px;border-left:3px solid ${outcomeColor};">
+            <div style="font-size:11px;color:${C.ter};margin-bottom:4px;">Validation Outcome</div>
+            <div style="font-size:18px;font-weight:700;color:${outcomeColor};">${escapeHtml(outcome)}</div>
+          </div>
+          <div style="background:${C.bg};padding:14px;border-radius:8px;">
+            <div style="font-size:11px;color:${C.ter};margin-bottom:4px;">Execution</div>
+            <div style="font-size:15px;font-weight:600;color:${execStatus === 'completed' ? '#22c55e' : execStatus === 'failed' ? '#ef4444' : C.pri};">${escapeHtml(execStatus)}</div>
+          </div>
+          <div style="background:${C.bg};padding:14px;border-radius:8px;">
+            <div style="font-size:11px;color:${C.ter};margin-bottom:4px;">Approved Baseline</div>
+            <div style="font-size:15px;font-weight:600;color:${C.pri};">${escapeHtml(baselineVer)}</div>
+          </div>
+          <div style="background:${C.bg};padding:14px;border-radius:8px;">
+            <div style="font-size:11px;color:${C.ter};margin-bottom:4px;">Last Validated</div>
+            <div style="font-size:12px;color:${C.sec};">${escapeHtml(endedAt)}</div>
+          </div>
+        </div>
+
+        ${metricsHtml}
+        ${reportHtml}
+        ${historyHtml}
+        ${approveBtn}
+      `;
+
+      // Approve handler
+      const approveEl = el.querySelector('#btn-approve-validation');
+      if (approveEl && latestId) {
+        approveEl.addEventListener('click', async () => {
+          try {
+            await API.approveValidationSession(agentId, latestId);
+            const refreshedSummary = await API.getValidationSummary(
+              agentId,
+              DEFAULT_VALIDATION_TRIGGER
+            ).catch(() => ({
+              summary: null,
+            }));
+            const refreshedValidation = refreshedSummary.summary as Record<string, unknown> | null;
+            if (requestId !== this.detailRequestId || this.selectedAgent?.id !== expectedAgentId) {
+              return;
+            }
+            this.currentDetailContext = this.buildDetailPageContext(a, refreshedValidation);
+            if (refreshedValidation?.validation_outcome) {
+              this.validationStates.set(agentId, String(refreshedValidation.validation_outcome));
+            }
+            reportPageContext(
+              'agents',
+              this.currentDetailContext,
+              a.id ? { type: 'agent', id: a.id } : undefined
+            );
+            void this.renderValidationTab(el, a);
+            showToast('Approved as baseline');
+          } catch {
+            showToast('Approval failed');
+          }
+        });
+      }
+    } catch (err) {
+      el.innerHTML = `<div style="color:#ef4444;font-size:12px;">Failed to load validation data: ${escapeHtml(String(err))}</div>`;
+    }
+  }
+
+  private async renderHistoryTab(el: HTMLElement, a: AgentWithVersion): Promise<void> {
+    el.innerHTML = `<div style="color:${C.ter};font-size:12px;">Loading versions...</div>`;
+    const requestId = this.detailRequestId;
+    const expectedAgentId = a.id ?? '';
+    try {
+      const { versions } = await API.getAgentVersions(a.id ?? '');
+      if (this.detailRequestId !== requestId || this.selectedAgent?.id !== expectedAgentId) {
+        return;
+      }
+      if (!versions.length) {
+        el.innerHTML = `<div style="color:${C.ter};font-size:12px;">No version history.</div>`;
+        return;
+      }
+      const rows = (versions as Array<Record<string, unknown>>)
+        .map(
+          (v) =>
+            `<div style="display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid ${C.bdr};">
+            <span style="font-size:13px;font-weight:600;color:${C.pri};min-width:32px;">v${v.version}</span>
+            <span style="font-size:11px;color:${C.ter};">${escapeHtml(String(v.created_at ?? ''))}</span>
+            <span style="font-size:12px;color:${C.sec};flex:1;">${escapeHtml(String(v.change_note || ''))}</span>
+            ${v.version === a.version ? `<span style="font-size:10px;padding:2px 6px;border-radius:4px;background:${C.agent}15;color:${C.agent};font-weight:600;">current</span>` : ''}
+          </div>`
+        )
+        .join('');
+      if (this.detailRequestId !== requestId || this.selectedAgent?.id !== expectedAgentId) {
+        return;
+      }
+      el.innerHTML = `<div>${rows}</div>`;
+    } catch {
+      if (this.detailRequestId !== requestId || this.selectedAgent?.id !== expectedAgentId) {
+        return;
+      }
+      el.innerHTML = `<div style="color:${C.red};font-size:12px;">Failed to load versions.</div>`;
+    }
+  }
+
+  // ── Create Modal ────────────────────────────────────────────────────────
+
+  private showCreateModal(): void {
+    if (!this.container) {
+      return;
+    }
+    const overlay = document.createElement('div');
+    overlay.style.cssText =
+      'position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:100;display:flex;align-items:center;justify-content:center;';
+    overlay.setAttribute('role', 'dialog');
+    overlay.setAttribute('aria-modal', 'true');
+    overlay.setAttribute('aria-label', 'Create new agent');
+    overlay.innerHTML = `
+      <div style="background:#fff;border-radius:12px;padding:24px;width:380px;max-width:90vw;box-shadow:0 8px 32px rgba(0,0,0,0.15);">
+        <h3 style="font-size:16px;font-weight:600;color:${C.pri};margin:0 0 16px 0;">New Agent</h3>
+        <div style="margin-bottom:10px;"><label for="new-id" style="font-size:11px;color:${C.ter};display:block;margin-bottom:4px;">ID (slug)</label><input id="new-id" class="agent-input" style="width:100%;padding:8px 10px;border:1px solid ${C.bdr};border-radius:6px;font-size:13px;" placeholder="qa-specialist" /></div>
+        <div style="margin-bottom:10px;"><label for="new-name" style="font-size:11px;color:${C.ter};display:block;margin-bottom:4px;">Name</label><input id="new-name" class="agent-input" style="width:100%;padding:8px 10px;border:1px solid ${C.bdr};border-radius:6px;font-size:13px;" placeholder="QA Specialist" /></div>
+        <div style="margin-bottom:10px;"><label for="new-model" style="font-size:11px;color:${C.ter};display:block;margin-bottom:4px;">Model</label><input id="new-model" class="agent-input" style="width:100%;padding:8px 10px;border:1px solid ${C.bdr};border-radius:6px;font-size:13px;" value="claude-sonnet-4-6" /></div>
+        <div style="margin-bottom:16px;"><label for="new-tier" style="font-size:11px;color:${C.ter};display:block;margin-bottom:4px;">Tier</label><select id="new-tier" class="agent-input" style="width:100%;padding:8px 10px;border:1px solid ${C.bdr};border-radius:6px;font-size:13px;"><option value="1">T1 (Full)</option><option value="2" selected>T2 (Read/Search)</option><option value="3">T3 (Read only)</option></select></div>
+        <div style="display:flex;gap:8px;justify-content:flex-end;">
+          <button id="btn-cancel" style="padding:8px 14px;border:1px solid ${C.bdr};border-radius:6px;background:#fff;cursor:pointer;font-size:12px;">Cancel</button>
+          <button id="btn-create" style="padding:8px 14px;border:none;border-radius:6px;background:${C.agent};color:#fff;cursor:pointer;font-size:12px;font-weight:500;">Create</button>
+        </div>
+      </div>`;
+
+    document.body.appendChild(overlay);
+    overlay.querySelector('#btn-cancel')?.addEventListener('click', () => overlay.remove());
+    overlay.addEventListener('click', (e) => {
+      if (e.target === overlay) {
+        overlay.remove();
+      }
+    });
+
+    overlay.querySelector('#btn-create')?.addEventListener('click', async () => {
+      const id = (overlay.querySelector('#new-id') as HTMLInputElement).value.trim();
+      const name = (overlay.querySelector('#new-name') as HTMLInputElement).value.trim();
+      const model = (overlay.querySelector('#new-model') as HTMLInputElement).value.trim();
+      const tier = parseInt((overlay.querySelector('#new-tier') as HTMLSelectElement).value, 10);
+      if (!id || !name) {
+        showToast('ID and Name are required');
+        return;
+      }
+      try {
+        await API.createAgent({ id, name, model, tier });
+        overlay.remove();
+        showToast(`Agent '${name}' created`);
+        await this.showDetail(id);
+      } catch (err) {
+        showToast('Create failed');
+        logger.error('Create agent failed', err);
+      }
+    });
+  }
+
+  // ── Navigation ──────────────────────────────────────────────────────────
+
+  /**
+   * Deep navigation from viewer_navigate command.
+   * Opens agent detail and optionally switches to a specific tab.
+   */
+  async navigateTo(agentId: string, tab?: string): Promise<void> {
+    const tryNav = async (): Promise<boolean> => {
+      const agent = this.agents.find((a) => a.id === agentId);
+      if (agent) {
+        const desiredTab =
+          tab && ['config', 'persona', 'tools', 'activity', 'validation', 'history'].includes(tab)
+            ? (tab as DetailTab)
+            : undefined;
+        await this.showDetail(agentId, desiredTab);
+        return true;
+      }
+      return false;
+    };
+    let navigated = await tryNav();
+    if (!navigated) {
+      try {
+        await this.loadAgents();
+      } catch (error) {
+        logger.error(`Failed to load agents while navigating to ${agentId}`, error);
+        showToast('Failed to load agents');
+        return;
+      }
+      navigated = await tryNav();
+    }
+    if (!navigated) {
+      logger.warn(`Agent not found during navigation: ${agentId}`);
+      this.showList();
+      showToast('Agent not found');
+    }
+  }
+
+  showList(): void {
+    this.detailRequestId++;
+    this.selectedAgent = null;
+    this.currentDetailContext = null;
+    reportPageContext('agents', {
+      ...this.buildListPageContext(),
+      selectedAgent: null,
+      activeTab: null,
+    });
+    void this.loadAgents().catch((error) => {
+      logger.error('Failed to load agents list', error);
+      showToast('Failed to load agents');
+    });
+  }
+}