aimeat 1.5.0 → 1.7.0

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

@@ -0,0 +1,242 @@
+/**
+ * @file agents-activity-subtab.js
+ * @description Activity sub-tab for agent detail view.
+ *   Shows stats summary cards (tasks completed, tokens used, success rate),
+ *   daily activity chart with time range selector, scheduled jobs list,
+ *   and recent event log with pagination.
+ * @structure
+ *   - AgentActivitySubtab (default export) -- main component
+ *   - StatsCards -- summary stat cards row
+ *   - ActivityChart -- text-based daily activity display
+ *   - ScheduledJobs -- cron job list with source badges
+ *   - EventLog -- scrollable recent event entries
+ * @version-history
+ *   v1.0.0 -- 2026-05-22 -- Initial creation for Agent Dashboard Phase 2
+ */
+import { h } from 'preact';
+import { useState, useEffect, useRef } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { timeAgo } from '/js/utils.js';
+import { getActivity, getActivityLog } from '/js/services/agent-activity.js';
+
+const RANGE_OPTIONS = [
+  { days: 7, label: '7d' },
+  { days: 30, label: '30d' },
+  { days: 90, label: '90d' },
+];
+
+function StatsCards({ stats }) {
+  const cards = [
+    { key: 'tasksCompleted', value: stats?.tasksCompleted ?? 0 },
+    { key: 'tokensUsed', value: stats?.tokensUsed30d ?? 0 },
+    { key: 'successRate', value: stats?.successRate != null ? `${Math.round(stats.successRate)}%` : '-' },
+  ];
+
+  return html`
+    <div class="agd-stats-grid">
+      ${cards.map(c => html`
+        <div class="agd-stat-card" key=${c.key}>
+          <div class="agd-stat-value">${c.value}</div>
+          <div class="agd-stat-label">${t(`profile.agents.activity.${c.key}`)}</div>
+        </div>
+      `)}
+    </div>
+  `;
+}
+
+function ActivityChart({ history, selectedDays, onRangeChange }) {
+  if (!history || history.length === 0) {
+    return html`
+      <div class="agd-chart-container">
+        <div class="agd-range-bar">
+          ${RANGE_OPTIONS.map(opt => html`
+            <button key=${opt.days}
+                    class="agd-range-btn ${selectedDays === opt.days ? 'active' : ''}"
+                    onClick=${() => onRangeChange(opt.days)}>
+              ${opt.label}
+            </button>
+          `)}
+        </div>
+        <div class="agd-empty">${t('profile.agents.activity.noActivity')}</div>
+      </div>
+    `;
+  }
+
+  // API returns { date, metric, value } rows -- aggregate tasks_completed per date
+  const dailyTotals = {};
+  for (const row of history) {
+    if (row.metric === 'tasks_completed' || row.metric === 'tasks_started') {
+      dailyTotals[row.date] = (dailyTotals[row.date] || 0) + (row.value || 0);
+    }
+  }
+  const dates = Object.keys(dailyTotals).sort();
+  const maxTasks = Math.max(...Object.values(dailyTotals), 1);
+
+  return html`
+    <div class="agd-chart-container">
+      <div class="agd-range-bar">
+        ${RANGE_OPTIONS.map(opt => html`
+          <button key=${opt.days}
+                  class="agd-range-btn ${selectedDays === opt.days ? 'active' : ''}"
+                  onClick=${() => onRangeChange(opt.days)}>
+            ${opt.label}
+          </button>
+        `)}
+      </div>
+      <div class="agd-chart-rows">
+        ${dates.map(date => {
+          const count = dailyTotals[date] || 0;
+          const pct = Math.round((count / maxTasks) * 100);
+          const dateStr = new Date(date + 'T00:00:00').toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+          return html`
+            <div class="agd-chart-row" key=${date}>
+              <span class="agd-chart-date">${dateStr}</span>
+              <div class="agd-chart-bar-track">
+                <div class="agd-chart-bar-fill" style="width:${pct}%"></div>
+              </div>
+              <span class="agd-chart-count">${count}</span>
+            </div>
+          `;
+        })}
+      </div>
+    </div>
+  `;
+}
+
+function ScheduledJobs({ jobs }) {
+  if (!jobs || jobs.length === 0) return null;
+
+  return html`
+    <div>
+      <div class="agd-section-header">
+        <span class="agd-section-title">${t('profile.agents.activity.scheduledJobs')}</span>
+      </div>
+      ${jobs.map((job, i) => html`
+        <div class="agd-log-entry" key=${job.id || i}>
+          <span class="${job.type === 'aimeat' ? 'agd-job-badge-aimeat' : 'agd-job-badge-agent'}">
+            ${job.type === 'aimeat' ? t('profile.agents.activity.aimeatJob') : t('profile.agents.activity.agentJob')}
+          </span>
+          <span class="agd-log-type">${job.name || job.id || '-'}</span>
+          <span class="agd-log-msg">${job.cron || ''}</span>
+          <span class="agd-log-time">
+            ${job.enabled === false ? 'disabled' : ''}
+            ${job.lastRunAt ? timeAgo(job.lastRunAt) : ''}
+          </span>
+        </div>
+      `)}
+    </div>
+  `;
+}
+
+function EventLog({ events, onViewMore }) {
+  if (!events || events.length === 0) return null;
+
+  return html`
+    <div>
+      <div class="agd-section-header">
+        <span class="agd-section-title">${t('profile.agents.activity.recentLog')}</span>
+      </div>
+      <div class="agd-event-log-scroll">
+        ${events.map((ev, i) => html`
+          <div class="agd-log-entry" key=${ev.id || i}>
+            <span class="agd-log-time">${ev.timestamp ? timeAgo(ev.timestamp) : '-'}</span>
+            <span class="agd-log-type">${ev.type || ev.event || '-'}</span>
+            <span class="agd-log-msg">${ev.message || ''}</span>
+          </div>
+        `)}
+      </div>
+      ${onViewMore && html`
+        <button class="btn-ghost btn-sm" onClick=${onViewMore}>
+          ${t('profile.agents.activity.viewFullLog')}
+        </button>
+      `}
+    </div>
+  `;
+}
+
+export default function AgentActivitySubtab({ agentName, session, showToast }) {
+  const [loading, setLoading] = useState(true);
+  const [stats, setStats] = useState(null);
+  const [history, setHistory] = useState([]);
+  const [jobs, setJobs] = useState([]);
+  const [events, setEvents] = useState([]);
+  const [selectedDays, setSelectedDays] = useState(30);
+  const [logPage, setLogPage] = useState(1);
+  const [hasMoreLog, setHasMoreLog] = useState(false);
+
+  async function loadData(days) {
+    const daysToUse = days ?? selectedDays;
+    try {
+      const [actResp, logResp] = await Promise.all([
+        getActivity(agentName, daysToUse),
+        getActivityLog(agentName, 1, 20),
+      ]);
+      setStats(actResp?.data?.activity_stats || null);
+      setHistory(actResp?.data?.history || []);
+      setJobs(actResp?.data?.scheduled_jobs || []);
+      setEvents(logResp?.data?.events || []);
+      setHasMoreLog((logResp?.data?.events || []).length >= 20);
+      setLogPage(1);
+    } catch {
+      setStats(null);
+      setHistory([]);
+      setJobs([]);
+      setEvents([]);
+    }
+    setLoading(false);
+  }
+
+  useEffect(() => {
+    setLoading(true);
+    loadData();
+  }, [agentName]);
+
+  // Live update listener
+  const loadRef = useRef(loadData);
+  loadRef.current = loadData;
+  useEffect(() => {
+    const handler = () => loadRef.current();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, []);
+
+  function handleRangeChange(days) {
+    setSelectedDays(days);
+    setLoading(true);
+    loadData(days);
+  }
+
+  async function handleViewMore() {
+    const nextPage = logPage + 1;
+    try {
+      const resp = await getActivityLog(agentName, nextPage, 20);
+      const newEvents = resp?.data?.events || [];
+      setEvents(prev => [...prev, ...newEvents]);
+      setLogPage(nextPage);
+      setHasMoreLog(newEvents.length >= 20);
+    } catch {
+      // silent
+    }
+  }
+
+  if (loading) {
+    return html`<div class="agd-empty">${t('profile.loading')}</div>`;
+  }
+
+  const hasAnyData = stats || history.length > 0 || jobs.length > 0 || events.length > 0;
+
+  if (!hasAnyData) {
+    return html`<div class="agd-empty">${t('profile.agents.activity.noActivity')}</div>`;
+  }
+
+  return html`
+    <div>
+      <${StatsCards} stats=${stats} />
+      <${ActivityChart} history=${history} selectedDays=${selectedDays} onRangeChange=${handleRangeChange} />
+      <${ScheduledJobs} jobs=${jobs} />
+      <${EventLog} events=${events} onViewMore=${hasMoreLog ? handleViewMore : null} />
+    </div>
+  `;
+}

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

@@ -0,0 +1,165 @@
+/**
+ * @file agents-capabilities-subtab.js
+ * @description Capabilities sub-tab for agent detail view.
+ *   Shows technical skills with type/verification badges,
+ *   domain knowledge with language tags, and action queue support
+ *   derived from the agent's scopes.
+ * @structure
+ *   - AgentCapabilitiesSubtab (default export) -- main component
+ *   - TechnicalSkills -- badge list of technical capabilities
+ *   - DomainKnowledge -- domain expertise + language tags
+ *   - ActionQueueSupport -- scope-derived work accept/deliver indicators
+ * @version-history
+ *   v1.0.0 -- 2026-05-22 -- Initial creation for Agent Dashboard Phase 2
+ */
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { getCapabilities } from '/js/services/agent-capabilities.js';
+
+function tFallback(key, fallback) {
+  const val = t(key);
+  return val !== key ? val : fallback;
+}
+
+function TechnicalSkills({ capabilities }) {
+  if (!capabilities || capabilities.length === 0) return null;
+
+  return html`
+    <div class="agd-directive-section">
+      <h4>${tFallback('profile.agents.capabilities.technical', 'Technical Skills')}</h4>
+      <div class="agd-cap-list">
+        ${capabilities.map(cap => html`
+          <span class="agd-cap-badge">
+            <span class="agd-cap-name">${cap.name}</span>
+            <span class="agd-cap-type agd-cap-type-${cap.type}">${cap.type}</span>
+            ${cap.verified
+              ? html`<span class="agd-cap-verified">${tFallback('profile.agents.capabilities.verified', 'verified')}</span>`
+              : html`<span class="agd-cap-unverified">${tFallback('profile.agents.capabilities.selfReported', 'self-reported')}</span>`
+            }
+          </span>
+        `)}
+      </div>
+    </div>
+  `;
+}
+
+function DomainKnowledge({ domains }) {
+  if (!domains || domains.length === 0) return null;
+
+  const languages = domains.filter(d => d.startsWith('Language: '));
+  const otherDomains = domains.filter(d => !d.startsWith('Language: '));
+
+  return html`
+    <div class="agd-directive-section">
+      <h4>${tFallback('profile.agents.capabilities.domain', 'Domain Knowledge')}</h4>
+      ${otherDomains.length > 0 && html`
+        <div class="agd-cap-list">
+          ${otherDomains.map(d => html`
+            <span class="agd-cap-badge agd-cap-domain">${d}</span>
+          `)}
+        </div>
+      `}
+      ${languages.length > 0 && html`
+        <div class="agd-cap-langs">
+          <span class="agd-cap-lang-label">${tFallback('profile.agents.capabilities.languages', 'Languages')}:</span>
+          ${languages.map(l => html`
+            <span class="agd-cap-badge agd-cap-lang">${l.replace('Language: ', '')}</span>
+          `)}
+        </div>
+      `}
+    </div>
+  `;
+}
+
+function ActionQueueSupport({ scopes }) {
+  const scopeList = scopes ?? [];
+  const hasAll = scopeList.includes('*');
+  const canAccept = hasAll || scopeList.includes('work:accept');
+  const canDeliver = hasAll || scopeList.includes('work:deliver');
+
+  if (!canAccept && !canDeliver) return null;
+
+  return html`
+    <div class="agd-directive-section">
+      <h4>${tFallback('profile.agents.capabilities.actionQueue', 'Action Queue Support')}</h4>
+      <div class="agd-cap-queue-list">
+        ${canAccept && html`
+          <div class="agd-cap-queue-item">
+            <span class="agd-cap-check">✓</span>
+            <span>${tFallback('profile.agents.capabilities.canAccept', 'Can accept work')}</span>
+          </div>
+        `}
+        ${canDeliver && html`
+          <div class="agd-cap-queue-item">
+            <span class="agd-cap-check">✓</span>
+            <span>${tFallback('profile.agents.capabilities.canDeliver', 'Can deliver work')}</span>
+          </div>
+        `}
+      </div>
+    </div>
+  `;
+}
+
+export default function AgentCapabilitiesSubtab({ agentName, session, showToast, agent }) {
+  const [techCaps, setTechCaps] = useState(null);
+  const [domainCaps, setDomainCaps] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      setLoading(true);
+      try {
+        const resp = await getCapabilities(agentName);
+        if (cancelled) return;
+        setTechCaps(resp?.data?.technical_capabilities ?? []);
+        setDomainCaps(resp?.data?.domain_capabilities ?? []);
+      } catch {
+        if (!cancelled) {
+          setTechCaps([]);
+          setDomainCaps([]);
+        }
+      }
+      if (!cancelled) setLoading(false);
+    }
+    load();
+    return () => { cancelled = true; };
+  }, [agentName]);
+
+  // Listen for live updates
+  useEffect(() => {
+    const handler = async () => {
+      try {
+        const resp = await getCapabilities(agentName);
+        setTechCaps(resp?.data?.technical_capabilities ?? []);
+        setDomainCaps(resp?.data?.domain_capabilities ?? []);
+      } catch { /* ignore */ }
+    };
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, [agentName]);
+
+  if (loading) {
+    return html`<div class="agd-empty">⏳</div>`;
+  }
+
+  const scopes = agent?.default_scopes ?? [];
+  const hasTech = techCaps && techCaps.length > 0;
+  const hasDomain = domainCaps && domainCaps.length > 0;
+  const hasQueue = scopes.includes('*') || scopes.includes('work:accept') || scopes.includes('work:deliver');
+
+  if (!hasTech && !hasDomain && !hasQueue) {
+    return html`<div class="agd-empty">${tFallback('profile.agents.capabilities.empty', 'No capabilities reported yet')}</div>`;
+  }
+
+  return html`
+    <div>
+      <${TechnicalSkills} capabilities=${techCaps} />
+      <${DomainKnowledge} domains=${domainCaps} />
+      <${ActionQueueSupport} scopes=${scopes} />
+    </div>
+  `;
+}

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

@@ -0,0 +1,292 @@
+/**
+ * @file agents-directives-subtab.js
+ * @description Directives sub-tab for agent detail view.
+ *   Shows merged directives with source badges (system/owner/agent),
+ *   editable agent-level rules, and read-only memory areas and resources.
+ * @structure
+ *   - AgentDirectivesSubtab (default export) -- main component
+ *   - RulesList -- displays rules with source badges
+ *   - EditableRules -- editable agent-level rules in edit mode
+ * @version-history
+ *   v1.0.0 -- 2026-05-21 -- Initial creation for Agent Dashboard Phase 1
+ */
+import { h } from 'preact';
+import { useState, useEffect, useRef } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { getDirectives, upsertDirectives, deleteDirectives } from '/js/services/agent-directives.js';
+
+function tFallback(key, fallback) {
+  const val = t(key);
+  return val !== key ? val : fallback;
+}
+
+function sourceLabel(source) {
+  return tFallback(`profile.agents.directives.source.${source}`, source.charAt(0).toUpperCase() + source.slice(1));
+}
+
+function sourceClass(source) {
+  if (source === 'system') return 'agd-source-system';
+  if (source === 'owner') return 'agd-source-owner';
+  if (source === 'agent') return 'agd-source-agent';
+  return 'agd-source-system';
+}
+
+function RulesList({ rules }) {
+  if (!rules || rules.length === 0) {
+    return html`<div class="agd-empty">${tFallback('profile.agents.directives.noRules', 'No rules defined')}</div>`;
+  }
+  return html`
+    <div>
+      ${rules.map((rule, i) => html`
+        <div class="agd-rule-item" key=${i}>
+          <span class="agd-rule-source ${sourceClass(rule.source || 'system')}">${sourceLabel(rule.source || 'system')}</span>
+          <span class="agd-rule-text">${rule.text || rule.rule || rule}</span>
+        </div>
+      `)}
+    </div>
+  `;
+}
+
+function EditableRules({ rules, onChange }) {
+  function handleChange(index, value) {
+    const updated = [...rules];
+    updated[index] = value;
+    onChange(updated);
+  }
+
+  function handleRemove(index) {
+    const updated = rules.filter((_, i) => i !== index);
+    onChange(updated);
+  }
+
+  function handleAdd() {
+    onChange([...rules, '']);
+  }
+
+  return html`
+    <div>
+      ${rules.map((rule, i) => html`
+        <div class="agd-rule-edit-row" key=${i}>
+          <input type="text" value=${rule} onInput=${(e) => handleChange(i, e.target.value)}
+                 placeholder=${tFallback('profile.agents.directives.rulePlaceholder', 'Enter a rule or guideline...')} />
+          <button class="agd-remove-btn" onClick=${() => handleRemove(i)} title=${tFallback('profile.agents.directives.removeRule', 'Remove')}>
+            ×
+          </button>
+        </div>
+      `)}
+      <button class="agd-add-btn" onClick=${handleAdd}>
+        + ${tFallback('profile.agents.directives.addRule', 'Add rule')}
+      </button>
+    </div>
+  `;
+}
+
+export default function AgentDirectivesSubtab({ agentName, session, showToast }) {
+  const [directives, setDirectives] = useState(null);
+  const [editing, setEditing] = useState(false);
+  const [editPurpose, setEditPurpose] = useState('');
+  const [editRules, setEditRules] = useState([]);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+
+  async function loadDirectives() {
+    try {
+      const resp = await getDirectives(agentName);
+      setDirectives(resp?.data || null);
+      setError(null);
+    } catch (err) {
+      // 404 means no directives set yet -- that is fine
+      if (err.status === 404) {
+        setDirectives({ purpose: '', rules: [], memory_areas: [], resources: [] });
+        setError(null);
+      } else {
+        setError(err.message);
+        setDirectives(null);
+      }
+    }
+  }
+
+  useEffect(() => {
+    loadDirectives();
+  }, [agentName]);
+
+  // Live update listener
+  const loadRef = useRef(loadDirectives);
+  loadRef.current = loadDirectives;
+  useEffect(() => {
+    const handler = () => loadRef.current();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, []);
+
+  function startEditing() {
+    // Extract agent-level rules for editing
+    const agentRules = (directives?.rules || [])
+      .filter(r => (r.source || 'agent') === 'agent')
+      .map(r => r.text || r.rule || r);
+    setEditPurpose(directives?.agent_purpose || directives?.purpose || '');
+    setEditRules(agentRules.length > 0 ? agentRules : ['']);
+    setEditing(true);
+  }
+
+  function cancelEditing() {
+    setEditing(false);
+    setEditPurpose('');
+    setEditRules([]);
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      const cleanRules = editRules.filter(r => r.trim());
+      await upsertDirectives(agentName, {
+        purpose: editPurpose.trim() || undefined,
+        rules: cleanRules.length > 0 ? cleanRules : undefined,
+      });
+      showToast(tFallback('profile.agents.directives.saved', 'Directives saved'));
+      setEditing(false);
+      await loadDirectives();
+    } catch (err) {
+      showToast(err.message || tFallback('profile.agents.directives.saveError', 'Failed to save'), true);
+    }
+    setSaving(false);
+  }
+
+  async function handleReset() {
+    setSaving(true);
+    try {
+      await deleteDirectives(agentName);
+      showToast(tFallback('profile.agents.directives.reset', 'Directives reset to defaults'));
+      setEditing(false);
+      await loadDirectives();
+    } catch (err) {
+      showToast(err.message || tFallback('profile.agents.directives.resetError', 'Failed to reset'), true);
+    }
+    setSaving(false);
+  }
+
+  if (directives === null && !error) {
+    return html`<div class="agd-empty">${t('profile.loading')}</div>`;
+  }
+
+  if (error) {
+    return html`<div class="agd-empty">${error}</div>`;
+  }
+
+  const purpose = directives?.purpose || '';
+  const rules = directives?.rules || [];
+  const memoryAreas = directives?.memory_areas || [];
+  const resources = directives?.resources || [];
+
+  // Separate rules by source for display
+  const systemRules = rules.filter(r => r.source === 'system');
+  const ownerRules = rules.filter(r => r.source === 'owner');
+  const agentRules = rules.filter(r => r.source === 'agent' || (!r.source && typeof r === 'string'));
+
+  return html`
+    <div>
+      ${!editing ? html`
+        <!-- View mode -->
+        <div class="agd-section-header">
+          <span class="agd-section-title">${tFallback('profile.agents.directives.title', 'Directives')}</span>
+          <div>
+            <button class="btn-outline btn-sm" onClick=${(e) => { e.stopPropagation(); startEditing(); }}>
+              ${tFallback('profile.agents.directives.edit', 'Edit')}
+            </button>
+          </div>
+        </div>
+
+        ${purpose && html`
+          <div class="agd-directive-section">
+            <h4>${tFallback('profile.agents.directives.purpose', 'Purpose')}</h4>
+            <div class="agd-purpose-text">${purpose}</div>
+          </div>
+        `}
+
+        <div class="agd-directive-section">
+          <h4>${tFallback('profile.agents.directives.rules', 'Rules')}</h4>
+          ${rules.length > 0 ? html`<${RulesList} rules=${rules} />` : html`
+            <div class="agd-empty">${tFallback('profile.agents.directives.noRules', 'No rules defined')}</div>
+          `}
+        </div>
+
+        ${memoryAreas.length > 0 && html`
+          <div class="agd-directive-section">
+            <h4>${tFallback('profile.agents.directives.memoryAreas', 'Memory Areas')}</h4>
+            ${memoryAreas.map(area => html`
+              <div class="agd-list-item" key=${area.key || area}>
+                <code>${area.key || area}</code>
+                ${area.access && html` -- ${area.access}`}
+                ${area.description && html` -- ${area.description}`}
+              </div>
+            `)}
+          </div>
+        `}
+
+        ${resources.length > 0 && html`
+          <div class="agd-directive-section">
+            <h4>${tFallback('profile.agents.directives.resources', 'Resources')}</h4>
+            ${resources.map(res => html`
+              <div class="agd-list-item" key=${res.url || res}>
+                <code>${res.url || res}</code>
+                ${res.description && html` -- ${res.description}`}
+              </div>
+            `)}
+          </div>
+        `}
+
+        ${!purpose && rules.length === 0 && memoryAreas.length === 0 && resources.length === 0 && html`
+          <div class="agd-empty">
+            ${tFallback('profile.agents.directives.empty', 'No directives configured for this agent. Click Edit to add rules and purpose.')}
+          </div>
+        `}
+      ` : html`
+        <!-- Edit mode -->
+        <div class="agd-section-header">
+          <span class="agd-section-title">${tFallback('profile.agents.directives.editing', 'Editing Directives')}</span>
+        </div>
+
+        <div class="agd-directive-section">
+          <h4>${tFallback('profile.agents.directives.purpose', 'Purpose')}</h4>
+          <div class="agd-form-field">
+            <textarea value=${editPurpose} onInput=${(e) => setEditPurpose(e.target.value)}
+                      placeholder=${tFallback('profile.agents.directives.purposePlaceholder', 'What is this agent for?')}></textarea>
+          </div>
+        </div>
+
+        ${systemRules.length > 0 && html`
+          <div class="agd-directive-section">
+            <h4>${tFallback('profile.agents.directives.systemRules', 'System Rules')} (${tFallback('profile.agents.directives.readOnly', 'read-only')})</h4>
+            <${RulesList} rules=${systemRules} />
+          </div>
+        `}
+
+        ${ownerRules.length > 0 && html`
+          <div class="agd-directive-section">
+            <h4>${tFallback('profile.agents.directives.ownerRules', 'Owner Rules')} (${tFallback('profile.agents.directives.readOnly', 'read-only')})</h4>
+            <${RulesList} rules=${ownerRules} />
+          </div>
+        `}
+
+        <div class="agd-directive-section">
+          <h4>${tFallback('profile.agents.directives.agentRules', 'Agent Rules')}</h4>
+          <${EditableRules} rules=${editRules} onChange=${setEditRules} />
+        </div>
+
+        <div class="agd-form-actions">
+          <button class="btn-primary btn-sm" onClick=${(e) => { e.stopPropagation(); handleSave(); }} disabled=${saving}>
+            ${saving ? tFallback('profile.agents.directives.saving', 'Saving...') : tFallback('profile.agents.directives.save', 'Save')}
+          </button>
+          <button class="btn-outline btn-sm" onClick=${(e) => { e.stopPropagation(); cancelEditing(); }}>
+            ${t('profile.agents.scopeUi.cancel')}
+          </button>
+          <button class="btn-danger btn-sm" onClick=${(e) => { e.stopPropagation(); handleReset(); }} disabled=${saving}>
+            ${tFallback('profile.agents.directives.resetDefaults', 'Reset to Defaults')}
+          </button>
+        </div>
+      `}
+    </div>
+  `;
+}