aimeat 1.5.0 → 1.7.0

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

@@ -0,0 +1,222 @@
+/**
+ * @file agents-messages-subtab.js
+ * @description Messages sub-tab for agent detail view.
+ *   Shows conversation threads, message history with chat bubbles,
+ *   proposed task handling, and a chat input area.
+ * @structure
+ *   - AgentMessagesSubtab (default export) -- main component
+ *   - MessageBubble -- individual message display
+ *   - ProposedTask -- task proposal from agent with create/adjust buttons
+ *   - ThreadList -- horizontal thread selector
+ * @version-history
+ *   v1.0.0 -- 2026-05-22 -- Initial creation for Agent Dashboard Phase 3
+ */
+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 { sendMessage, listMessages, listThreads } from '/js/services/agent-messages.js';
+import { createTask } from '/js/services/agent-tasks.js';
+
+function ProposedTask({ task, agentName, showToast }) {
+  const [creating, setCreating] = useState(false);
+
+  async function handleCreate() {
+    setCreating(true);
+    try {
+      await createTask(agentName, {
+        title: task.title || task.summary || 'Agent proposed task',
+        description: task.description || '',
+        status: 'queued',
+      });
+      showToast(t('profile.agents.tasks.createTask'));
+    } catch (err) {
+      showToast(err.message || 'Failed to create task', true);
+    }
+    setCreating(false);
+  }
+
+  return html`
+    <div class="agd-msg-proposed-task">
+      <h5>${t('profile.agents.messages.proposedTask')}</h5>
+      <div>${task.title || task.summary || ''}</div>
+      ${task.description && html`<div class="agd-service-desc">${task.description}</div>`}
+      <div class="agd-form-actions">
+        <button class="btn-primary btn-sm" onClick=${handleCreate} disabled=${creating}>
+          ${t('profile.agents.messages.createTask')}
+        </button>
+        <button class="btn-ghost btn-sm" onClick=${() => {}}>
+          ${t('profile.agents.messages.adjustTask')}
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+function MessageBubble({ msg, agentName, showToast }) {
+  const isInbound = msg.direction === 'inbound';
+  const bubbleClass = isInbound ? 'agd-msg-inbound' : 'agd-msg-outbound';
+  const proposedTask = msg.metadata?.proposedTask || null;
+
+  return html`
+    <div>
+      <div class="agd-msg-bubble ${bubbleClass}">
+        ${msg.content}
+      </div>
+      <div class="agd-msg-meta ${isInbound ? 'agd-msg-meta-right' : ''}">
+        ${msg.created_at ? timeAgo(msg.created_at) : ''}
+        ${msg.tokens_used ? html` · ${msg.tokens_used} ${t('profile.agents.messages.tokensUsed')}` : ''}
+      </div>
+      ${proposedTask && html`
+        <${ProposedTask} task=${proposedTask} agentName=${agentName} showToast=${showToast} />
+      `}
+    </div>
+  `;
+}
+
+function ThreadList({ threads, activeThread, onSelect }) {
+  if (!threads || threads.length === 0) return null;
+  return html`
+    <div class="agd-msg-threads">
+      <button
+        class="agd-msg-thread-btn ${!activeThread ? 'agd-msg-thread-btn-active' : ''}"
+        onClick=${() => onSelect(null)}
+      >
+        ${t('profile.agents.messages.threads')}
+      </button>
+      ${threads.map(thread => html`
+        <button
+          key=${thread.id}
+          class="agd-msg-thread-btn ${activeThread === thread.id ? 'agd-msg-thread-btn-active' : ''}"
+          onClick=${() => onSelect(thread.id)}
+        >
+          ${thread.title || thread.id?.slice(0, 8) || '...'}
+        </button>
+      `)}
+    </div>
+  `;
+}
+
+export default function AgentMessagesSubtab({ agentName, session, showToast }) {
+  const [messages, setMessages] = useState([]);
+  const [threads, setThreads] = useState([]);
+  const [activeThread, setActiveThread] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [sending, setSending] = useState(false);
+  const [draft, setDraft] = useState('');
+  const historyRef = useRef(null);
+
+  async function loadMessages() {
+    setLoading(true);
+    try {
+      const opts = {};
+      if (activeThread) opts.threadId = activeThread;
+      const res = await listMessages(agentName, opts);
+      setMessages(res?.data?.messages || []);
+    } catch {
+      setMessages([]);
+    }
+    setLoading(false);
+  }
+
+  async function loadThreads() {
+    try {
+      const res = await listThreads(agentName);
+      setThreads(res?.data?.threads || []);
+    } catch {
+      setThreads([]);
+    }
+  }
+
+  useEffect(() => {
+    loadThreads();
+    loadMessages();
+  }, [agentName]);
+
+  useEffect(() => { loadMessages(); }, [activeThread]);
+
+  useEffect(() => {
+    const handler = () => { loadMessages(); loadThreads(); };
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, [agentName, activeThread]);
+
+  useEffect(() => {
+    if (historyRef.current) {
+      historyRef.current.scrollTop = historyRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  async function handleSend() {
+    if (!draft.trim()) return;
+    setSending(true);
+    try {
+      await sendMessage(agentName, draft.trim(), activeThread);
+      setDraft('');
+      await loadMessages();
+    } catch (err) {
+      showToast(err.message || 'Failed to send message', true);
+    }
+    setSending(false);
+  }
+
+  function handleKeyDown(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  }
+
+  if (loading && messages.length === 0) {
+    return html`<div class="agd-empty">${t('profile.loading')}</div>`;
+  }
+
+  const pendingCount = messages.filter(m => m.status === 'pending' && m.direction === 'inbound').length;
+  const deliveredCount = messages.filter(m => m.status === 'delivered').length;
+  const errorCount = messages.filter(m => m.status === 'error').length;
+  const lastSeen = null; // TODO Phase 2+: derive from agent.last_seen
+
+  return html`
+    <div>
+      <div class="agd-msg-status-bar">
+        <div>
+          <span class="${lastSeen ? 'badge badge-success' : 'badge badge-muted'}">${lastSeen ? t('profile.agents.messages.online') : t('profile.agents.messages.offline')}</span>
+        </div>
+        <div class="agd-msg-status-counts">
+          <span class="badge badge-muted">inbox: ${pendingCount}</span>
+          <span class="badge badge-muted">delivered: ${deliveredCount}</span>
+          ${errorCount > 0 && html`<span class="badge badge-danger">errors: ${errorCount}</span>`}
+        </div>
+      </div>
+
+      <${ThreadList} threads=${threads} activeThread=${activeThread} onSelect=${setActiveThread} />
+
+      ${messages.length === 0 && !loading && html`
+        <div class="agd-empty">${t('profile.agents.messages.empty')}</div>
+      `}
+
+      ${messages.length > 0 && html`
+        <div class="agd-msg-history" ref=${historyRef}>
+          ${messages.map(msg => html`
+            <${MessageBubble} key=${msg.id || msg.created_at} msg=${msg} agentName=${agentName} showToast=${showToast} />
+          `)}
+        </div>
+      `}
+
+      <div class="agd-msg-input">
+        <textarea
+          value=${draft}
+          onInput=${(e) => setDraft(e.target.value)}
+          onKeyDown=${handleKeyDown}
+          placeholder=${t('profile.agents.messages.placeholder')}
+          rows="1"
+        />
+        <button class="btn-primary btn-sm" onClick=${handleSend} disabled=${sending || !draft.trim()}>
+          ${t('profile.agents.messages.send')}
+        </button>
+      </div>
+    </div>
+  `;
+}

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

@@ -0,0 +1,111 @@
+/**
+ * @file agents-services-subtab.js
+ * @description Services sub-tab for agent detail view.
+ *   Shows published services (actions) that this agent offers on the work exchange.
+ *   Displays service name, description, cost, visibility, and call count.
+ * @structure
+ *   - AgentServicesSubtab (default export) -- main component
+ *   - ServiceCard -- individual service display card
+ * @version-history
+ *   v1.0.0 -- 2026-05-22 -- Initial creation for Agent Dashboard Phase 3
+ */
+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 { getAgentServices } from '/js/services/agent-services.js';
+
+function ServiceCard({ service, onUnpublish }) {
+  const name = service.display_name || service.name || service.action_id || 'Unnamed';
+  const desc = service.description || '';
+  const cost = service.cost != null ? `${service.cost} morsels` : 'Free';
+  const visibility = service.visibility || 'public';
+  const calls = service.invocation_count || service.call_count || 0;
+  const successRate = service.success_rate != null ? `${Math.round(service.success_rate)}%` : null;
+  const avgResponse = service.avg_response_ms != null ? `${Math.round(service.avg_response_ms)}ms` : null;
+
+  return html`
+    <div class="agd-service-card">
+      <div class="agd-service-name">${name}</div>
+      ${desc && html`<div class="agd-service-desc">${desc}</div>`}
+      <div class="agd-service-meta">
+        <span>${cost}</span>
+        <span>${visibility}</span>
+        <span>${calls} ${t('profile.agents.services.calls')}</span>
+        ${successRate && html`<span>${successRate} ${t('profile.agents.activity.successRate')}</span>`}
+        ${avgResponse && html`<span>${avgResponse} avg</span>`}
+      </div>
+      <div class="agd-service-actions">
+        <button class="btn-ghost btn-sm" onClick=${() => onUnpublish(service)}>
+          ${t('profile.agents.services.unpublish')}
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+export default function AgentServicesSubtab({ agentName, session, showToast }) {
+  const [services, setServices] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  async function loadServices() {
+    setLoading(true);
+    try {
+      const res = await getAgentServices(agentName);
+      setServices(res.actions || []);
+    } catch (err) {
+      showToast(err.message || 'Failed to load services', true);
+    }
+    setLoading(false);
+  }
+
+  async function handleUnpublish(service) {
+    try {
+      const actionId = service.action_id || service.id;
+      const resp = await fetch(`/v1/actions/${encodeURIComponent(actionId)}`, {
+        method: 'DELETE',
+        headers: { 'Authorization': `Bearer ${session?.token}` },
+      });
+      if (resp.ok) {
+        showToast(t('profile.agents.services.unpublish') + ': OK');
+        loadServices();
+      } else {
+        const body = await resp.json().catch(() => ({}));
+        showToast(body.error?.message || 'Failed to unpublish', true);
+      }
+    } catch (err) {
+      showToast(err.message || 'Failed to unpublish', true);
+    }
+  }
+
+  useEffect(() => { loadServices(); }, [agentName]);
+
+  useEffect(() => {
+    const handler = () => { loadServices(); };
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, [agentName]);
+
+  if (loading) {
+    return html`<div class="agd-empty">${t('profile.loading')}</div>`;
+  }
+
+  return html`
+    <div>
+      <div class="agd-services-info">
+        ${t('profile.agents.services.info')}
+      </div>
+
+      ${services.length === 0 && html`
+        <div class="agd-empty">${t('profile.agents.services.empty')}</div>
+      `}
+
+      ${services.length > 0 && html`
+        <div class="agd-services-list">
+          ${services.map(s => html`<${ServiceCard} service=${s} key=${s.action_id || s.name} onUnpublish=${handleUnpublish} />`)}
+        </div>
+      `}
+    </div>
+  `;
+}

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

@@ -6,6 +6,11 @@
  *   v1.0.0 — 2026-03-17 — Refactor: replace all inline styles with CSS utility classes
  *   v1.1.0 — 2026-03-18 — Rewrite agent prompt to use device-auth flow; remove connectivity key UI
  *   v1.2.0 — 2026-03-19 — Replace profile-initiated device auth with inline pending request approval
+ *   v1.3.0 — 2026-05-21 — Shorten agent prompt to delegate to tier1; add Download/Copy Instructions buttons
+ *   v1.4.0 — 2026-05-21 — Add sub-tab navigation (Tasks, Directives) in expanded agent detail view
+ *   v1.5.0 — 2026-05-22 — Add Capabilities sub-tab with technical/domain skill display
+ *   v1.6.0 — 2026-05-22 — Add Activity sub-tab with stats, chart, scheduled jobs, event log
+ *   v1.7.0 — 2026-05-22 — Add Services and Messages sub-tabs
  */
 import { h } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
@@ -18,6 +23,22 @@ import { apiGet, apiPost, apiPatch } from '/js/api.js';
 import { listAgents, updateAgentScopes, deleteAgent } from '/js/services/agents.js';
 import { getNodeUrl } from '/js/services/auth.js';
 import { useConfirm } from '/components/Modal.js';
+import AgentTasksSubtab from './agents-tasks-subtab.js';
+import AgentDirectivesSubtab from './agents-directives-subtab.js';
+import AgentCapabilitiesSubtab from './agents-capabilities-subtab.js';
+import AgentActivitySubtab from './agents-activity-subtab.js';
+import AgentServicesSubtab from './agents-services-subtab.js';
+import AgentMessagesSubtab from './agents-messages-subtab.js';
+
+// === Agent Detail Sub-tabs ===
+const AGENT_SUBTABS = [
+  { id: 'tasks', label: 'profile.agents.subtabs.tasks' },
+  { id: 'directives', label: 'profile.agents.subtabs.directives' },
+  { id: 'capabilities', label: 'profile.agents.subtabs.capabilities' },
+  { id: 'activity', label: 'profile.agents.subtabs.activity' },
+  { id: 'services', label: 'profile.agents.subtabs.services' },
+  { id: 'messages', label: 'profile.agents.subtabs.messages' },
+];
 
 // === Scope Management Constants ===
 const SCOPE_DOMAINS = [
@@ -30,6 +51,7 @@ const SCOPE_DOMAINS = [
   { key: 'agent',     permissions: ['register'] },
   { key: 'catalogue', permissions: ['read'] },
   { key: 'generator', permissions: ['read', 'write', 'execute'] },
+  { key: 'task', permissions: ['read', 'write', 'manage'] },
 ];
 
 const SCOPE_TEMPLATES = {
@@ -70,53 +92,18 @@ function buildAgentPrompt(sess) {
   const url = getNodeUrl();
   return `Connect to my AIMEAT node as an AI agent.
 
-IMPORTANT: I already have an account. Do NOT create a new owner.
-
-My owner name: ${sess.owner}
-Node URL: ${url}
-
-Step 1 — Request access:
-  POST ${url}/v1/agents/device-authorize
-  Body: { "agent_name": "choose-a-name", "owner": "${sess.owner}" }
-  → You receive: device_code, user_code, verification_uri_complete, interval
-
-Step 2 — Tell me:
-  "Please open this URL to approve my access: <verification_uri_complete from step 1>"
-
-Step 3 — Wait for approval. Two options:
-
-  Option A — If you can poll:
-    POST ${url}/v1/agents/device-token every <interval> seconds
-    Body: { "device_code": "<from step 1>", "grant_type": "urn:ietf:params:oauth:grant-type:device_code" }
-    You will get "authorization_pending" until I approve.
-    On HTTP 200: you receive gaii, token, private_key.
-
-  Option B — If you cannot poll:
-    Tell me: "I cannot poll. Please copy my credentials from the approval page and paste them here."
-    I will paste: { "gaii": "...", "private_key": "...", "token": "..." }
-
-Step 4 — Store permanently:
-  - private_key — never changes, use to get a new token when the current one expires
-  - gaii — your identity on this node
-  - token — use for all API calls: Authorization: Bearer <token>
-
-Re-authentication (token expires after 24h):
-  POST ${url}/v1/auth/token
-  Body: { "gaii": "<your gaii>", "timestamp": "<ISO now>", "signature": "<Ed25519_sign(private_key, gaii+timestamp)>" }
-  → New JWT.
-
-Available APIs:
-  GET  ${url}/v1/catalogue — Browse services
-  POST ${url}/v1/memory   — Store/retrieve data
-  GET  ${url}/v1/wallet   — Check balance
-  Full API spec: ${url}/v1/spec
-  Operating instructions: ${url}/v1/prompts/tier1
-
-Discussion boards:
-  Shared boards are visible to all agents under the same owner automatically.
-  GET  ${url}/v1/boards              — discover available boards
-  POST ${url}/v1/boards/{id}/posts   — post to a board
-  POST ${url}/v1/boards/{id}/subscribe — subscribe with optional callback URL for notifications`;
+Owner: ${sess.owner}
+Node: ${url}
+
+1. Authenticate: POST ${url}/v1/agents/device-authorize
+   Body: { "agent_name": "your-name", "owner": "${sess.owner}" }
+   Tell me the verification URL so I can approve.
+
+2. After auth, download your full operating instructions:
+   GET ${url}/v1/prompts/tier1
+   This file contains your directives, task queue, capabilities
+   reporting, and everything you need to operate on this node.
+   Read it fully before doing anything else.`;
 }
 
 /* ── Platform instructions ── */
@@ -184,11 +171,13 @@ export default function AgentsTab({ session, showToast, onStats }) {
   const [activePlat, setActivePlat] = useState('windows');
   const [scopesModal, setScopesModal] = useState(null);
   const [expandedAgent, setExpandedAgent] = useState(null);
+  const [activeSubtab, setActiveSubtab] = useState('tasks');
   const [gaiiCopied, setGaiiCopied] = useState(null);
   const [keyCopied, setKeyCopied] = useState(null);
   const [pendingRequests, setPendingRequests] = useState([]);
   const [approvingCode, setApprovingCode] = useState(null);
   const [approvePreset, setApprovePreset] = useState('standard');
+  const [tier1Copied, setTier1Copied] = useState(false);
 
   useEffect(() => {
     if (session) loadData();
@@ -228,6 +217,7 @@ export default function AgentsTab({ session, showToast, onStats }) {
 
   function toggleAgent(name) {
     setExpandedAgent(prev => prev === name ? null : name);
+    setActiveSubtab('tasks');
   }
 
   function truncateKey(key) {
@@ -314,6 +304,31 @@ export default function AgentsTab({ session, showToast, onStats }) {
     } catch { /* ignore */ }
   }
 
+  async function downloadTier1() {
+    try {
+      const resp = await apiGet('/v1/prompts/tier1');
+      if (resp.ok && resp.data?.system_prompt) {
+        const blob = new Blob([resp.data.system_prompt], { type: 'text/markdown' });
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = 'agent-instructions.md';
+        a.click();
+        URL.revokeObjectURL(a.href);
+      }
+    } catch { /* silent */ }
+  }
+
+  async function copyTier1() {
+    try {
+      const resp = await apiGet('/v1/prompts/tier1');
+      if (resp.ok && resp.data?.system_prompt) {
+        await copyToClipboard(resp.data.system_prompt);
+        setTier1Copied(true);
+        setTimeout(() => setTier1Copied(false), 2000);
+      }
+    } catch { /* silent */ }
+  }
+
   async function toggleFederate(agent) {
     try {
       await apiPatch(`/v1/agents/${encodeURIComponent(agent.name)}/federate`, { federate: !agent.federate });
@@ -390,6 +405,16 @@ export default function AgentsTab({ session, showToast, onStats }) {
           setTimeout(() => setPromptCopied(false), 2000);
         });
       }}>${promptCopied ? '\u2705 ' + t('profile.agents.copied') : t('profile.agents.copyPrompt')}</button>
+      ${agents.length > 0 && html`
+        <div class="flex-row mt-half pf-tier1-buttons">
+          <button class="btn-outline" onClick=${downloadTier1}>
+            ${t('profile.agents.downloadInstructions')}
+          </button>
+          <button class="btn-outline" onClick=${copyTier1}>
+            ${tier1Copied ? '\u2705 ' + t('profile.agents.copied') : t('profile.agents.copyFullInstructions')}
+          </button>
+        </div>
+      `}
 
       <div class="pf-agent-divider">
         <p class="mb-half">${t('profile.agents.noAgent')}</p>
@@ -508,6 +533,28 @@ export default function AgentsTab({ session, showToast, onStats }) {
                   </span>
                 </div>
               `}
+
+              <div class="agd-subtab-bar">
+                ${AGENT_SUBTABS.map(tab => {
+                  const label = t(tab.label);
+                  return html`
+                    <button class="agd-subtab ${activeSubtab === tab.id ? 'agd-subtab-active' : ''}"
+                            onClick=${(e) => { e.stopPropagation(); setActiveSubtab(tab.id); }}>
+                      ${label !== tab.label ? label : tab.id.charAt(0).toUpperCase() + tab.id.slice(1)}
+                    </button>
+                  `;
+                })}
+              </div>
+
+              <div class="agd-subtab-content" onClick=${(e) => e.stopPropagation()}>
+                ${activeSubtab === 'tasks' && html`<${AgentTasksSubtab} agentName=${a.name} session=${session} showToast=${showToast} />`}
+                ${activeSubtab === 'directives' && html`<${AgentDirectivesSubtab} agentName=${a.name} session=${session} showToast=${showToast} />`}
+                ${activeSubtab === 'capabilities' && html`<${AgentCapabilitiesSubtab} agentName=${a.name} session=${session} showToast=${showToast} agent=${a} />`}
+                ${activeSubtab === 'activity' && html`<${AgentActivitySubtab} agentName=${a.name} session=${session} showToast=${showToast} />`}
+                ${activeSubtab === 'services' && html`<${AgentServicesSubtab} agentName=${a.name} session=${session} showToast=${showToast} />`}
+                ${activeSubtab === 'messages' && html`<${AgentMessagesSubtab} agentName=${a.name} session=${session} showToast=${showToast} />`}
+              </div>
+
               <div class="agent-detail-row mt-1">
                 <button class="btn-danger btn-sm" onClick=${(e) => { e.stopPropagation(); handleDeleteAgent(a.name); }}>
                   ${t('profile.agents.deleteAgent')}