aimeat 1.7.0 → 1.9.0

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

@@ -0,0 +1,278 @@
+/**
+ * @file tab-messages.js
+ * @description Messages tab with command palette, "/" autocomplete, and chat area.
+ *   Wraps the existing messages subtab and adds command discovery.
+ * @version-history
+ *   v1.2.0 -- 2026-05-24 -- Add command-reply visual pairing for slash commands
+ *   v1.1.0 -- 2026-05-24 -- M7: visual distinction for command messages (slash prefix)
+ *   v1.0.0 -- 2026-05-24 -- Initial creation for Agent Detail Tab-View
+ */
+
+import { h } from 'preact';
+import { useState, useEffect, useRef, useMemo } from 'preact/hooks';
+import htm from 'htm';
+import { t } from '/js/i18n.js';
+import { timeAgo } from '/js/utils.js';
+import { sendMessage, listMessages, listThreads } from '/js/services/agent-messages.js';
+import { getAgentCommands } from '/js/services/agent-integration.js';
+
+const html = htm.bind(h);
+
+function CommandPalette({ commands, onSend }) {
+  const [expanded, setExpanded] = useState(false);
+
+  if (!commands || commands.length === 0) {
+    return html`
+      <div class="pf-agd-commands">
+        <div class="pf-agd-commands-header" onClick=${() => setExpanded(!expanded)}>
+          <span>${t('profile.agents.detail.messages.commands.title')} (0)</span>
+          <span>${expanded ? '▼' : '▶'}</span>
+        </div>
+        ${expanded && html`
+          <div class="pf-agd-commands-body">
+            <div class="pf-agd-empty">${t('profile.agents.detail.messages.commands.noCommands')}</div>
+            <div class="pf-agd-empty-hint">${t('profile.agents.detail.messages.commands.noCommandsHint')}</div>
+          </div>
+        `}
+      </div>
+    `;
+  }
+
+  const categories = useMemo(() => {
+    const cats = {};
+    for (const cmd of commands) {
+      const cat = cmd.category || t('profile.agents.detail.messages.commands.defaultCategory');
+      if (!cats[cat]) cats[cat] = [];
+      cats[cat].push(cmd);
+    }
+    return cats;
+  }, [commands]);
+
+  return html`
+    <div class="pf-agd-commands">
+      <div class="pf-agd-commands-header" onClick=${() => setExpanded(!expanded)}>
+        <span>${t('profile.agents.detail.messages.commands.title')} (${commands.length} ${t('profile.agents.detail.messages.commands.available')})</span>
+        <span>${expanded ? '▼' : '▶'}</span>
+      </div>
+      ${expanded && html`
+        <div class="pf-agd-commands-body">
+          ${Object.entries(categories).map(([cat, cmds]) => html`
+            <div key=${cat}>
+              <div class="pf-agd-commands-category">${cat}</div>
+              ${cmds.map(cmd => html`
+                <div key=${cmd.name} class="pf-agd-command-row">
+                  <span class="pf-agd-command-name">${cmd.name}</span>
+                  <span class="pf-agd-command-desc">${cmd.description || ''}</span>
+                  <button class="btn-outline btn-sm" onClick=${() => onSend(cmd.name)}>
+                    ${t('profile.agents.detail.messages.commands.send')}
+                  </button>
+                </div>
+              `)}
+            </div>
+          `)}
+        </div>
+      `}
+    </div>
+  `;
+}
+
+export default function TabMessages({ agent, agentName, session, showToast }) {
+  const [commands, setCommands] = useState([]);
+  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 [showAutocomplete, setShowAutocomplete] = useState(false);
+  const historyRef = useRef(null);
+
+  async function loadCommands() {
+    try {
+      const resp = await getAgentCommands(agentName, agent.gaii);
+      const data = resp?.data?.value;
+      if (Array.isArray(data)) setCommands(data);
+      else if (typeof data === 'string') {
+        try { setCommands(JSON.parse(data)); } catch { setCommands([]); }
+      } else {
+        setCommands([]);
+      }
+    } catch { setCommands([]); }
+  }
+
+  async function loadMessages() {
+    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(() => {
+    loadCommands();
+    loadThreads();
+    loadMessages();
+  }, [agentName]);
+
+  useEffect(() => { loadMessages(); }, [activeThread]);
+
+  useEffect(() => {
+    const handler = () => { loadMessages(); loadThreads(); loadCommands(); };
+    window.addEventListener('aimeat-live-update', handler);
+    const poller = setInterval(handler, 10000);
+    return () => { window.removeEventListener('aimeat-live-update', handler); clearInterval(poller); };
+  }, [agentName, activeThread]);
+
+  useEffect(() => {
+    if (historyRef.current) {
+      historyRef.current.scrollTop = historyRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  async function handleSend(text) {
+    const msg = text || draft.trim();
+    if (!msg) return;
+    setSending(true);
+    try {
+      await sendMessage(agentName, msg, activeThread);
+      setDraft('');
+      setShowAutocomplete(false);
+      await loadMessages();
+    } catch (err) {
+      showToast(err.message || t('profile.agents.detail.messages.sendError'), true);
+    }
+    setSending(false);
+  }
+
+  function handleKeyDown(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  }
+
+  function handleInput(e) {
+    const val = e.target.value;
+    setDraft(val);
+    setShowAutocomplete(val.startsWith('/') && commands.length > 0);
+  }
+
+  const filteredCommands = useMemo(() => {
+    if (!draft.startsWith('/')) return [];
+    const search = draft.toLowerCase();
+    return commands.filter(c => c.name.toLowerCase().startsWith(search));
+  }, [draft, commands]);
+
+  function selectCommand(cmdName) {
+    setDraft(cmdName);
+    setShowAutocomplete(false);
+  }
+
+  function renderMessage(msg, isCommand, isReply) {
+    return html`
+      <div key=${msg.id || msg.createdAt}>
+        <div class="pf-agd-msg-bubble ${msg.direction === 'inbound' ? 'pf-agd-msg-inbound' : 'pf-agd-msg-outbound'} ${isCommand ? 'pf-agd-msg-command' : ''} ${isReply ? 'pf-agd-msg-reply' : ''}">
+          ${isCommand && html`<span class="pf-agd-command-badge">${t('profile.agents.detail.messages.command')}</span>`}
+          ${msg.content}
+        </div>
+        <div class="pf-agd-msg-meta ${msg.direction === 'inbound' ? 'pf-agd-msg-meta-right' : ''}">
+          ${msg.createdAt ? html`<span class="pf-agd-msg-time">${new Date(msg.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span> ${timeAgo(msg.createdAt)}` : ''}
+        </div>
+      </div>
+    `;
+  }
+
+  if (loading && messages.length === 0) {
+    return html`<div class="pf-agd-empty">${t('profile.loading')}</div>`;
+  }
+
+  return html`
+    <div>
+      <${CommandPalette} commands=${commands} onSend=${(cmd) => handleSend(cmd)} />
+
+      ${threads.length > 0 && html`
+        <div class="pf-agd-msg-threads">
+          <button class="pf-agd-msg-thread-btn ${!activeThread ? 'pf-agd-msg-thread-btn-active' : ''}"
+                  onClick=${() => setActiveThread(null)}>
+            ${t('profile.agents.messages.threads')}
+          </button>
+          ${threads.map(thread => html`
+            <button key=${thread.id}
+                    class="pf-agd-msg-thread-btn ${activeThread === thread.id ? 'pf-agd-msg-thread-btn-active' : ''}"
+                    onClick=${() => setActiveThread(thread.id)}>
+              ${thread.title || thread.id?.slice(0, 8) || '...'}
+            </button>
+          `)}
+        </div>
+      `}
+
+      ${messages.length === 0 && !loading && html`
+        <div class="pf-agd-empty">${t('profile.agents.detail.empty.messages')}</div>
+      `}
+
+      ${messages.length > 0 && html`
+        <div class="pf-agd-msg-history" ref=${historyRef}>
+          ${(() => {
+            const sorted = [...messages].sort((a, b) => new Date(a.createdAt || 0) - new Date(b.createdAt || 0));
+            const rendered = [];
+            for (let i = 0; i < sorted.length; i++) {
+              const msg = sorted[i];
+              const isCommand = msg.content?.startsWith('/') && msg.direction === 'inbound';
+              const nextMsg = sorted[i + 1];
+              const hasReply = isCommand && nextMsg && nextMsg.direction === 'outbound';
+
+              if (hasReply) {
+                rendered.push(html`
+                  <div class="pf-agd-msg-pair" key=${msg.id || msg.createdAt}>
+                    ${renderMessage(msg, true, false)}
+                    <div class="pf-agd-msg-reply-indicator">↳</div>
+                    ${renderMessage(nextMsg, false, true)}
+                  </div>
+                `);
+                i++;
+              } else {
+                rendered.push(renderMessage(msg, isCommand, false));
+              }
+            }
+            return rendered;
+          })()}
+        </div>
+      `}
+
+      <div class="pf-agd-msg-input">
+        <div class="pf-agd-input-wrap">
+          ${showAutocomplete && filteredCommands.length > 0 && html`
+            <div class="pf-agd-autocomplete">
+              ${filteredCommands.map(cmd => html`
+                <div key=${cmd.name} class="pf-agd-autocomplete-item" onClick=${() => selectCommand(cmd.name)}>
+                  <span class="pf-agd-command-name">${cmd.name}</span>
+                  <span class="pf-agd-command-desc">${cmd.description || ''}</span>
+                </div>
+              `)}
+            </div>
+          `}
+          <textarea
+            value=${draft}
+            onInput=${handleInput}
+            onKeyDown=${handleKeyDown}
+            placeholder=${t('profile.agents.detail.messages.placeholder')}
+            rows="1"
+          />
+        </div>
+        <button class="btn-primary btn-sm" onClick=${() => handleSend()} disabled=${sending || !draft.trim()}>
+          ${t('profile.agents.messages.send')}
+        </button>
+      </div>
+      <div class="pf-agd-msg-meta">${t('profile.agents.detail.messages.hint')}</div>
+    </div>
+  `;
+}

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

@@ -0,0 +1,17 @@
+/**
+ * @file tab-services.js
+ * @description Services tab -- declared services list with active/inactive status.
+ *   Wraps the existing services subtab component.
+ * @version-history
+ *   v1.0.0 -- 2026-05-24 -- Initial creation for Agent Detail Tab-View
+ */
+
+import { h } from 'preact';
+import htm from 'htm';
+import AgentServicesSubtab from '../agents-services-subtab.js';
+
+const html = htm.bind(h);
+
+export default function TabServices({ agentName, session, showToast }) {
+  return html`<${AgentServicesSubtab} agentName=${agentName} session=${session} showToast=${showToast} />`;
+}

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

@@ -0,0 +1,17 @@
+/**
+ * @file tab-tasks.js
+ * @description Tasks tab wrapper for agent detail tab-view.
+ *   Delegates to the existing AgentTasksSubtab component.
+ * @version-history
+ *   v1.0.0 -- 2026-05-24 -- Initial creation for Agent Detail Tab-View
+ */
+
+import { h } from 'preact';
+import htm from 'htm';
+import AgentTasksSubtab from '../agents-tasks-subtab.js';
+
+const html = htm.bind(h);
+
+export default function TabTasks({ agentName, session, showToast }) {
+  return html`<${AgentTasksSubtab} agentName=${agentName} session=${session} showToast=${showToast} />`;
+}

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

@@ -9,6 +9,8 @@
  *   - ProposedTask -- task proposal from agent with create/adjust buttons
  *   - ThreadList -- horizontal thread selector
  * @version-history
+ *   v1.2.0 -- 2026-05-22 -- Fix: use camelCase field names from API (createdAt, metadata.tokensUsed)
+ *   v1.1.0 -- 2026-05-22 -- Show timestamp on messages, sort oldest-first (chat-style)
  *   v1.0.0 -- 2026-05-22 -- Initial creation for Agent Dashboard Phase 3
  */
 import { h } from 'preact';
@@ -27,13 +29,13 @@ function ProposedTask({ task, agentName, showToast }) {
     setCreating(true);
     try {
       await createTask(agentName, {
-        title: task.title || task.summary || 'Agent proposed task',
+        title: task.title || task.summary || t('profile.agents.messages.proposedTaskDefault'),
         description: task.description || '',
         status: 'queued',
       });
       showToast(t('profile.agents.tasks.createTask'));
     } catch (err) {
-      showToast(err.message || 'Failed to create task', true);
+      showToast(err.message || t('profile.agents.messages.createTaskError'), true);
     }
     setCreating(false);
   }
@@ -66,8 +68,8 @@ function MessageBubble({ msg, agentName, showToast }) {
         ${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')}` : ''}
+        ${msg.createdAt ? html`<span class="agd-msg-time">${new Date(msg.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span> ${timeAgo(msg.createdAt)}` : ''}
+        ${msg.metadata?.tokensUsed ? html` · ${msg.metadata.tokensUsed} ${t('profile.agents.messages.tokensUsed')}` : ''}
       </div>
       ${proposedTask && html`
         <${ProposedTask} task=${proposedTask} agentName=${agentName} showToast=${showToast} />
@@ -157,7 +159,7 @@ export default function AgentMessagesSubtab({ agentName, session, showToast }) {
       setDraft('');
       await loadMessages();
     } catch (err) {
-      showToast(err.message || 'Failed to send message', true);
+      showToast(err.message || t('profile.agents.messages.sendError'), true);
     }
     setSending(false);
   }
@@ -185,9 +187,9 @@ export default function AgentMessagesSubtab({ agentName, session, showToast }) {
           <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>`}
+          <span class="badge badge-muted">${t('profile.agents.messages.inboxLabel')}: ${pendingCount}</span>
+          <span class="badge badge-muted">${t('profile.agents.messages.deliveredLabel')}: ${deliveredCount}</span>
+          ${errorCount > 0 && html`<span class="badge badge-danger">${t('profile.agents.messages.errorsLabel')}: ${errorCount}</span>`}
         </div>
       </div>
 
@@ -199,8 +201,8 @@ export default function AgentMessagesSubtab({ agentName, session, showToast }) {
 
       ${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} />
+          ${[...messages].sort((a, b) => new Date(a.createdAt || 0) - new Date(b.createdAt || 0)).map(msg => html`
+            <${MessageBubble} key=${msg.id || msg.createdAt} msg=${msg} agentName=${agentName} showToast=${showToast} />
           `)}
         </div>
       `}

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

@@ -7,6 +7,7 @@
  *   - AgentServicesSubtab (default export) -- main component
  *   - ServiceCard -- individual service display card
  * @version-history
+ *   v1.1.0 -- 2026-05-24 -- Fix locale keys; add status dots and active/inactive labels
  *   v1.0.0 -- 2026-05-22 -- Initial creation for Agent Dashboard Phase 3
  */
 import { h } from 'preact';
@@ -17,24 +18,29 @@ 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 name = service.display_name || service.name || service.action_id || t('profile.agents.services.unnamed');
   const desc = service.description || '';
-  const cost = service.cost != null ? `${service.cost} morsels` : 'Free';
-  const visibility = service.visibility || 'public';
+  const cost = service.cost != null ? `${service.cost} ${t('profile.agents.services.morsels')}` : t('profile.agents.services.free');
+  const visibility = t('profile.agents.services.visibility.' + (service.visibility || 'public'));
+  const isActive = service.active !== false && service.status !== 'inactive';
   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>
+      <div class="agd-service-name">
+        <span class="pf-agd-status-dot ${isActive ? 'pf-agd-status-dot--active' : 'pf-agd-status-dot--inactive'}"></span>
+        ${name}
+      </div>
       ${desc && html`<div class="agd-service-desc">${desc}</div>`}
       <div class="agd-service-meta">
         <span>${cost}</span>
         <span>${visibility}</span>
+        <span class="pf-agd-badge ${isActive ? 'pf-agd-badge--active' : 'pf-agd-badge--inactive'}">${isActive ? t('profile.agents.detail.services.active') : t('profile.agents.detail.services.inactive')}</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>`}
+        ${avgResponse && html`<span>${avgResponse} ${t('profile.agents.services.avg')}</span>`}
       </div>
       <div class="agd-service-actions">
         <button class="btn-ghost btn-sm" onClick=${() => onUnpublish(service)}>
@@ -55,7 +61,7 @@ export default function AgentServicesSubtab({ agentName, session, showToast }) {
       const res = await getAgentServices(agentName);
       setServices(res.actions || []);
     } catch (err) {
-      showToast(err.message || 'Failed to load services', true);
+      showToast(err.message || t('profile.agents.services.loadError'), true);
     }
     setLoading(false);
   }
@@ -68,14 +74,14 @@ export default function AgentServicesSubtab({ agentName, session, showToast }) {
         headers: { 'Authorization': `Bearer ${session?.token}` },
       });
       if (resp.ok) {
-        showToast(t('profile.agents.services.unpublish') + ': OK');
+        showToast(t('profile.agents.services.unpublished'));
         loadServices();
       } else {
         const body = await resp.json().catch(() => ({}));
-        showToast(body.error?.message || 'Failed to unpublish', true);
+        showToast(body.error?.message || t('profile.agents.services.unpublishError'), true);
       }
     } catch (err) {
-      showToast(err.message || 'Failed to unpublish', true);
+      showToast(err.message || t('profile.agents.services.unpublishError'), true);
     }
   }
 
@@ -94,11 +100,11 @@ export default function AgentServicesSubtab({ agentName, session, showToast }) {
   return html`
     <div>
       <div class="agd-services-info">
-        ${t('profile.agents.services.info')}
+        ${t('profile.agents.detail.services.info')}
       </div>
 
       ${services.length === 0 && html`
-        <div class="agd-empty">${t('profile.agents.services.empty')}</div>
+        <div class="agd-empty">${t('profile.agents.detail.empty.services')}</div>
       `}
 
       ${services.length > 0 && html`