@jungjaehoon/mama-os 0.18.2 → 0.19.0

package/public/viewer/js/modules/chat.js

@@ -314,10 +314,16 @@ export class ChatModule {
         }
         this.addUserMessage(message);
         this.enableSend(false);
+        // Include current viewer tab context (SmartStore ChatPanel pattern)
+        const tabIndicator = document.getElementById('chat-tab-indicator');
+        const viewerContext = {
+            currentTab: tabIndicator?.textContent?.toLowerCase() || 'unknown',
+        };
         this.ws.send(JSON.stringify({
             type: 'send',
             sessionId: this.sessionId,
             content: message,
+            viewerContext,
         }));
         // Search for related MAMA decisions
         if (this.memoryModule) {
@@ -829,25 +835,20 @@ export class ChatModule {
             logger.warn('Status element not found');
             return;
         }
-        const indicator = statusEl.querySelector('.status-indicator');
-        const text = statusEl.querySelector('span:not(.status-indicator)');
-        if (!indicator || !text) {
-            logger.warn('Status indicator or text not found');
-            return;
-        }
-        indicator.className = 'status-indicator ' + status;
+        // #chat-status IS the indicator element (not a wrapper with children)
+        statusEl.className = 'status-indicator w-1.5 h-1.5 rounded-full flex-shrink-0 ' + status;
         switch (status) {
             case 'connected':
-                text.textContent = 'Connected';
+                statusEl.title = 'Connected';
                 break;
             case 'disconnected':
-                text.textContent = 'Disconnected';
+                statusEl.title = 'Disconnected';
                 break;
             case 'connecting':
-                text.textContent = 'Connecting...';
+                statusEl.title = 'Connecting...';
                 break;
             default:
-                text.textContent = status;
+                statusEl.title = status;
         }
     }
     /**
@@ -1645,12 +1646,20 @@ export class ChatModule {
         const resizeHandle = getElementByIdOrNull('chat-resize-handle');
         const panel = getElementByIdOrNull('chat-panel');
         const header = getElementByIdOrNull('chat-header');
+        // Right panel mode: no bubble, auto-init session
+        const isRightPanel = !bubble && !!document.getElementById('chat-panel-wrapper');
+        if (isRightPanel && !this.ws) {
+            this.initSession();
+        }
         if (bubble) {
             bubble.addEventListener('click', () => this.togglePanel());
         }
         if (closeBtn) {
             closeBtn.addEventListener('click', () => this.togglePanel(false));
         }
+        // Right panel mode: skip drag/resize handlers (handled by viewer.html inline JS)
+        if (isRightPanel)
+            return;
         if (panel && header) {
             let dragging = false;
             let startX = 0;

package/public/viewer/js/modules/connector-feed.js

@@ -1,6 +1,7 @@
 import { API } from '../utils/api.js';
 import { DebugLogger } from '../utils/debug-logger.js';
 import { createCollapsible, createResizeHandle } from '../utils/dom.js';
+import { reportPageContext } from '../utils/ui-commands.js';
 const logger = new DebugLogger('ConnectorFeed');
 // ── Mobile helpers ──────────────────────────────────────────────────────────
 const MOBILE_BREAKPOINT = 768;
@@ -91,6 +92,17 @@ export class ConnectorFeedModule {
     renderConnectorList(connectors) {
         if (!this.container)
             return;
+        reportPageContext('feed', {
+            pageType: 'connector-list',
+            selectedConnector: this.selectedConnector,
+            connectorCount: connectors.length,
+            connectors: connectors.slice(0, 10).map((c) => ({
+                connector: c.connector,
+                status: c.status,
+                channel: c.channel,
+                timestamp: c.timestamp,
+            })),
+        });
         if (connectors.length === 0) {
             this.container.innerHTML =
                 '<div style="padding:40px;text-align:center;color:#9E9891;font-size:14px">' +
@@ -211,12 +223,26 @@ export class ConnectorFeedModule {
     }
     showMobileList() {
         this.mobileShowingDetail = false;
+        this.selectedConnector = null;
         const list = document.getElementById('connector-list');
         const detail = document.getElementById('connector-detail');
         if (list)
             list.style.display = '';
         if (detail)
             detail.style.display = 'none';
+        reportPageContext('feed', {
+            pageType: 'connector-list',
+            selectedConnector: null,
+            connectorCount: this.cachedConnectors.length,
+            channelCount: 0,
+            channels: [],
+            connectors: this.cachedConnectors.slice(0, 10).map((c) => ({
+                connector: c.connector,
+                status: c.status,
+                channel: c.channel,
+                timestamp: c.timestamp,
+            })),
+        });
     }
     handleResize() {
         const list = document.getElementById('connector-list');
@@ -254,6 +280,15 @@ export class ConnectorFeedModule {
         }
     }
     renderFeedDetail(container, name, feed) {
+        reportPageContext('feed', {
+            pageType: 'connector-detail',
+            selectedConnector: name,
+            channelCount: feed.length,
+            channels: feed.slice(0, 10).map((channel) => ({
+                channel: channel.channel,
+                itemCount: channel.items.length,
+            })),
+        });
         const icon = CONNECTOR_ICON[name] || '\u{1F517}';
         // Clear and build header
         container.innerHTML = '';

package/public/viewer/js/modules/dashboard.js

@@ -1,6 +1,7 @@
 import { API, } from '../utils/api.js';
 import { DebugLogger } from '../utils/debug-logger.js';
 import { createCollapsible } from '../utils/dom.js';
+import { reportPageContext } from '../utils/ui-commands.js';
 const logger = new DebugLogger('Dashboard');
 // ── Style constants ─────────────────────────────────────────────────────────
 const COLOR = {
@@ -64,6 +65,17 @@ export class DashboardModule {
     container = null;
     eventSource = null;
     refreshTimer = null;
+    selectedProject = null;
+    selectedConnector = null;
+    getCurrentPageType() {
+        if (this.selectedConnector) {
+            return 'dashboard-connector';
+        }
+        if (this.selectedProject) {
+            return 'dashboard-project';
+        }
+        return 'dashboard-overview';
+    }
     init() {
         this.container = document.getElementById('dashboard-slots');
         if (!this.container)
@@ -136,6 +148,17 @@ export class DashboardModule {
     render(data) {
         if (!this.container)
             return;
+        reportPageContext('dashboard', {
+            pageType: this.getCurrentPageType(),
+            selectedProject: this.selectedProject,
+            selectedConnector: this.selectedConnector,
+            noticeCount: data.notices.length,
+            pipelineCount: data.pipeline.length,
+            connectorCount: data.connectors.length,
+            totalDecisions: data.totalDecisions,
+            agentCount: data.agentCount,
+            summary: data.summary.text?.slice(0, 300) ?? '',
+        });
         const emptyEl = document.getElementById('slots-empty');
         const hasData = data.summary.text ||
             data.notices.length > 0 ||
@@ -239,6 +262,12 @@ export class DashboardModule {
                     if (isOpen) {
                         detail.style.display = 'none';
                         arrow.textContent = '\u25B6';
+                        this.selectedProject = null;
+                        reportPageContext('dashboard', {
+                            pageType: this.getCurrentPageType(),
+                            selectedProject: null,
+                            selectedConnector: this.selectedConnector,
+                        });
                     }
                     else {
                         detail.style.display = '';
@@ -247,6 +276,13 @@ export class DashboardModule {
                         if (projectName && detail.textContent === 'Loading...') {
                             this.loadPipelineDetail(detail, projectName);
                         }
+                        this.selectedProject = projectName ?? null;
+                        this.selectedConnector = null;
+                        reportPageContext('dashboard', {
+                            pageType: 'dashboard-project',
+                            selectedProject: this.selectedProject,
+                            selectedConnector: this.selectedConnector,
+                        });
                     }
                 });
             });
@@ -310,6 +346,12 @@ export class DashboardModule {
                     if (isOpen) {
                         detail.style.display = 'none';
                         arrow.textContent = '\u25B6';
+                        this.selectedConnector = null;
+                        reportPageContext('dashboard', {
+                            pageType: this.getCurrentPageType(),
+                            selectedProject: this.selectedProject,
+                            selectedConnector: null,
+                        });
                     }
                     else {
                         detail.style.display = '';
@@ -318,6 +360,13 @@ export class DashboardModule {
                         if (connName && detail.textContent === 'Loading...') {
                             this.loadConnectorDetail(detail, connName);
                         }
+                        this.selectedConnector = connName ?? null;
+                        this.selectedProject = null;
+                        reportPageContext('dashboard', {
+                            pageType: 'dashboard-connector',
+                            selectedProject: this.selectedProject,
+                            selectedConnector: this.selectedConnector,
+                        });
                     }
                 });
             });

package/public/viewer/js/modules/memory.js

@@ -14,6 +14,7 @@ import { escapeHtml, debounce, showToast, getElementByIdOrNull } from '../utils/
 import { formatRelativeTime, truncateText } from '../utils/format.js';
 import { API } from '../utils/api.js';
 import { DebugLogger } from '../utils/debug-logger.js';
+import { reportPageContext } from '../utils/ui-commands.js';
 const logger = new DebugLogger('Memory');
 /**
  * Memory Module Class
@@ -106,6 +107,17 @@ export class MemoryModule {
             this.searchData = data.results || [];
             this.renderResults(this.searchData, query);
             this.setStatus(`Found ${this.searchData.length} decision(s)`, '');
+            reportPageContext('memory', {
+                pageType: 'memory-search',
+                query,
+                resultCount: this.searchData.length,
+                results: this.searchData.slice(0, 10).map((item) => ({
+                    id: item.id ?? null,
+                    topic: item.topic ?? null,
+                    outcome: item.outcome ?? null,
+                    similarity: item.similarity ?? null,
+                })),
+            });
         }
         catch (error) {
             const message = error instanceof Error ? error.message : String(error);
@@ -138,6 +150,17 @@ export class MemoryModule {
      */
     async showRelatedForMessage(message) {
         const results = await this.searchRelated(message);
+        reportPageContext('memory', {
+            pageType: 'memory-related',
+            query: message,
+            resultCount: results.length,
+            results: results.slice(0, 10).map((item) => ({
+                id: item.id ?? null,
+                topic: item.topic ?? null,
+                outcome: item.outcome ?? null,
+                similarity: item.similarity ?? null,
+            })),
+        });
         if (results.length > 0) {
             this.searchData = results;
             // Update search input with the query (if element exists)
@@ -151,6 +174,9 @@ export class MemoryModule {
             // Show notification
             showToast(`🧠 ${results.length} related MAMA decision(s) found`);
         }
+        else {
+            this.setStatus('No related decisions found', '');
+        }
     }
     /**
      * Render search results
@@ -227,6 +253,12 @@ export class MemoryModule {
       </div>
     `;
         this.setStatus('', '');
+        reportPageContext('memory', {
+            pageType: 'memory-search',
+            query: '',
+            resultCount: 0,
+            results: [],
+        });
         // Reinitialize Lucide icons for dynamic content
         if (typeof lucide !== 'undefined' && typeof window.lucideConfig !== 'undefined') {
             lucide.createIcons(window.lucideConfig);

package/public/viewer/js/modules/settings.js

@@ -13,6 +13,7 @@
 import { showToast, escapeHtml, escapeAttr, getElementByIdOrNull } from '../utils/dom.js';
 import { formatModelName } from '../utils/format.js';
 import { DebugLogger } from '../utils/debug-logger.js';
+import { reportPageContext } from '../utils/ui-commands.js';
 import { API, } from '../utils/api.js';
 const logger = new DebugLogger('Settings');
 // Model options by backend (single source of truth)
@@ -233,6 +234,13 @@ export class SettingsModule {
                 }
                 return;
             }
+            const goAgentsButton = target.closest('[data-action="go-agents-tab"]');
+            if (goAgentsButton) {
+                e.preventDefault();
+                if (typeof window.switchTab === 'function') {
+                    window.switchTab('agents');
+                }
+            }
         });
     }
     /**
@@ -319,6 +327,23 @@ export class SettingsModule {
         this.populateSkillsSection();
         this.populateTokenSection();
         this.populateCronSection();
+        reportPageContext('settings', {
+            pageType: 'settings-overview',
+            gateways: {
+                discord: this.config.discord?.enabled ?? false,
+                slack: this.config.slack?.enabled ?? false,
+                telegram: this.config.telegram?.enabled ?? false,
+                chatwork: this.config.chatwork?.enabled ?? false,
+            },
+            agent: {
+                backend: this.config.agent?.backend ?? 'claude',
+                model: this.config.agent?.model ?? null,
+                max_turns: this.config.agent?.max_turns ?? null,
+                timeout: this.config.agent?.timeout ?? null,
+            },
+            multiAgentCount: this.multiAgentData.agents.length,
+            mcpServerCount: this.mcpServersData.servers.length,
+        });
     }
     /**
      * Populate timeouts section from config
@@ -901,91 +926,21 @@ export class SettingsModule {
     }
     /**
      * Populate Multi-Agent Team section (F3)
+     * Agent editing has moved to the Agents tab — show redirect notice.
      */
     populateMultiAgentSection() {
         const container = getElementByIdOrNull('settings-multi-agent-container');
         if (!container) {
             return;
         }
-        const agents = this.multiAgentData?.agents || [];
-        if (agents.length === 0) {
-            container.innerHTML = `
-        <div class="bg-white border border-gray-200 rounded-lg p-3 text-xs text-gray-500">
-          No agents configured. Add agents in <code class="bg-gray-100 px-1 rounded">config.yaml</code>
-        </div>
-      `;
-            return;
-        }
-        // Tier badge colors
-        const tierColors = {
-            1: 'bg-indigo-100 text-indigo-700',
-            2: 'bg-green-100 text-green-700',
-            3: 'bg-yellow-100 text-yellow-700',
-        };
-        const agentCards = agents
-            .map((agent) => {
-            const tierValue = Number(agent.tier) || 1;
-            const tierColor = tierColors[tierValue] || tierColors[1];
-            const backend = (agent.backend || this.config?.agent?.backend || 'claude');
-            const normalizedModel = this.getNormalizedModelForBackend(backend, agent.model || '');
-            const agentId = agent.id || '';
-            const backendOptions = ['codex-mcp', 'claude']
-                .map((b) => `<option value="${escapeAttr(b)}" ${backend === b ? 'selected' : ''}>${escapeHtml(b)}</option>`)
-                .join('');
-            const modelOptions = MODEL_OPTIONS[backend] || MODEL_OPTIONS.claude;
-            const modelOptionHtml = modelOptions
-                .map((m) => `<option value="${escapeAttr(m)}" ${m === normalizedModel ? 'selected' : ''}>${escapeHtml(formatModelName(m))}</option>`)
-                .join('');
-            // Effort level (Claude 4.6 models only, max on Opus).
-            const supportsAgentEffort = this.supportsEffortModel(normalizedModel);
-            const selectedAgentEffort = this.normalizeEffortForModel(normalizedModel, (agent.effort || 'medium'));
-            const effortOptions = this.buildEffortOptions(normalizedModel, selectedAgentEffort);
-            // Permission flags — only check explicit tool_permissions, not tier
-            const canDelegate = agent.can_delegate ?? false;
-            const hasAllTools = agent.tool_permissions?.allowed?.includes('*') ?? false;
-            return `
-          <div class="bg-white border border-gray-200 rounded-lg p-3 hover:shadow-md transition-shadow">
-            <!-- Header: Tier + Name + Toggle -->
-            <div class="flex items-center justify-between mb-2">
-              <div class="flex items-center gap-1.5">
-                <span class="${tierColor} text-[10px] font-bold px-1.5 py-0.5 rounded">T${escapeHtml(String(tierValue))}</span>
-                <span class="font-medium text-gray-900 text-xs" title="${escapeAttr(agent.display_name || agent.name)}">${escapeHtml(agent.display_name || agent.name)}</span>
-              </div>
-              <label class="relative inline-flex items-center cursor-pointer">
-                <input type="checkbox" class="sr-only peer" data-action="agent-toggle" data-agent-id="${escapeAttr(agentId)}" ${agent.enabled ? 'checked' : ''}>
-                <div class="w-7 h-4 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-green-500"></div>
-              </label>
-            </div>
-
-            <!-- Backend -->
-            <select id="agent-backend-${escapeAttr(agentId)}" data-action="agent-backend" data-agent-id="${escapeAttr(agentId)}" class="w-full text-[11px] rounded border border-gray-200 px-1.5 py-1 bg-gray-50 mb-1">${backendOptions}</select>
-            <!-- Model -->
-            <select id="agent-model-${escapeAttr(agentId)}" data-action="agent-model" data-agent-id="${escapeAttr(agentId)}" class="w-full text-[11px] rounded border border-gray-200 px-1.5 py-1 bg-gray-50 mb-1">${modelOptionHtml}</select>
-            <!-- Effort (Claude 4.6 only) -->
-            <div id="agent-effort-container-${escapeAttr(agentId)}" class="mb-1" style="display: ${supportsAgentEffort ? 'block' : 'none'}">
-              <select id="agent-effort-${escapeAttr(agentId)}" class="w-full text-[11px] rounded border border-gray-200 px-1.5 py-1 bg-gray-50">${effortOptions}</select>
-            </div>
-
-            <!-- Permissions + Save -->
-            <div class="flex items-center justify-between mt-2">
-              <div class="flex items-center gap-2 text-[10px] text-gray-600">
-                <label class="flex items-center gap-0.5 cursor-pointer">
-                  <input type="checkbox" id="agent-delegate-${escapeAttr(agentId)}" class="w-3 h-3 rounded border-gray-300 text-yellow-500 focus:ring-yellow-400" ${canDelegate ? 'checked' : ''}>
-                  <span>Delegate</span>
-                </label>
-                <label class="flex items-center gap-0.5 cursor-pointer">
-                  <input type="checkbox" id="agent-alltools-${escapeAttr(agentId)}" class="w-3 h-3 rounded border-gray-300 text-yellow-500 focus:ring-yellow-400" ${hasAllTools ? 'checked' : ''}>
-                  <span>All Tools</span>
-                </label>
-              </div>
-              <button type="button" data-action="agent-save" data-agent-id="${escapeAttr(agentId)}" class="text-[10px] px-3 py-1 rounded bg-mama-yellow text-mama-black hover:bg-mama-yellow-hover font-medium">Save</button>
-            </div>
-          </div>
-        `;
-        })
-            .join('');
-        // Grid layout: 2 cols on mobile, 3 cols on md+
-        container.innerHTML = `<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">${agentCards}</div>`;
+        container.innerHTML = `
+      <div class="bg-white border border-gray-200 rounded-lg p-4 text-center">
+        <p class="text-sm text-gray-600 mb-2">Agent management has moved to the Agents tab.</p>
+        <button data-action="go-agents-tab"
+          class="text-sm px-4 py-1.5 rounded-md bg-mama-yellow text-mama-black hover:bg-mama-yellow-hover font-medium">
+          Go to Agents
+        </button>
+      </div>`;
     }
     /**
      * Toggle agent enabled status (F3)

package/public/viewer/js/modules/wiki.js

@@ -1,6 +1,7 @@
 import { API } from '../utils/api.js';
 import { DebugLogger } from '../utils/debug-logger.js';
 import { createResizeHandle } from '../utils/dom.js';
+import { reportPageContext } from '../utils/ui-commands.js';
 const logger = new DebugLogger('Wiki');
 // ── Mobile helpers ──────────────────────────────────────────────────────────
 const MOBILE_BREAKPOINT = 768;
@@ -51,7 +52,12 @@ function renderTreeNode(node, depth = 0) {
         `${escapeHtml(node.name.replace(/\.md$/, ''))}</div>`);
 }
 function escapeHtml(s) {
-    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+    return s
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
 }
 export class WikiModule {
     container = null;
@@ -59,6 +65,7 @@ export class WikiModule {
     resizeHandler = null;
     mobileShowingPage = false;
     initialized = false;
+    treeLoadPromise = null;
     init() {
         if (this.initialized) {
             return;
@@ -70,7 +77,26 @@ export class WikiModule {
         this.initialized = true;
         this.resizeHandler = () => this.handleResize();
         window.addEventListener('resize', this.resizeHandler);
-        this.loadTree();
+        this.treeLoadPromise = this.loadTree();
+    }
+    publishListContext() {
+        reportPageContext('wiki', {
+            pageType: 'wiki-list',
+            path: null,
+            activePath: this.currentPath,
+        });
+    }
+    publishPageContext(page) {
+        const title = String(page.frontmatter.title ?? '').trim() ||
+            page.path.split('/').pop()?.replace(/\.md$/, '') ||
+            page.path;
+        reportPageContext('wiki', {
+            pageType: 'wiki-page',
+            path: page.path,
+            title,
+            frontmatter: page.frontmatter,
+            content_preview: page.raw.slice(0, 400),
+        }, { type: 'wiki-page', id: page.path });
     }
     async loadTree() {
         if (!this.container)
@@ -149,11 +175,14 @@ export class WikiModule {
         });
         document.getElementById('wiki-new-btn')?.addEventListener('click', () => this.promptNewPage());
         // Auto-open index page only on initial load (no page selected yet)
-        if (!mobile && !this.currentPath) {
+        if (!this.currentPath) {
             const indexNode = tree.find((n) => n.name === 'index.md');
-            if (indexNode) {
+            if (!mobile && indexNode) {
                 this.openPage(indexNode.path);
             }
+            else {
+                this.publishListContext();
+            }
         }
     }
     async openPage(path) {
@@ -173,6 +202,7 @@ export class WikiModule {
         try {
             const page = await API.getWikiPage(path);
             this.renderPageView(pageEl, page);
+            this.publishPageContext(page);
         }
         catch {
             pageEl.innerHTML = `<div style="color:#D94F4F;padding:20px">Failed to load ${path}</div>`;
@@ -190,12 +220,14 @@ export class WikiModule {
     }
     showMobileTree() {
         this.mobileShowingPage = false;
+        this.currentPath = null;
         const treeEl = document.getElementById('wiki-tree');
         const pageEl = document.getElementById('wiki-page');
         if (treeEl)
             treeEl.style.display = '';
         if (pageEl)
             pageEl.style.display = 'none';
+        this.publishListContext();
     }
     handleResize() {
         const treeEl = document.getElementById('wiki-tree');
@@ -367,4 +399,27 @@ export class WikiModule {
             this.resizeHandler = null;
         }
     }
+    async navigateTo(path) {
+        if (!this.initialized) {
+            this.init();
+        }
+        if (this.treeLoadPromise) {
+            await this.treeLoadPromise;
+        }
+        if (path) {
+            await this.openPage(path);
+            return;
+        }
+        if (this.currentPath) {
+            try {
+                const page = await API.getWikiPage(this.currentPath);
+                this.publishPageContext(page);
+                return;
+            }
+            catch {
+                /* fall through to list context */
+            }
+        }
+        this.publishListContext();
+    }
 }

package/public/viewer/js/utils/api.js

@@ -285,6 +285,76 @@ export class API {
         return this.post(`/api/multi-agent/agents/${encodeURIComponent(agentId)}/stop`, {});
     }
     // =============================================
+    // Agent Management API (Managed Agents pattern)
+    // =============================================
+    static async getAgents() {
+        return this.get('/api/agents');
+    }
+    static async getAgent(agentId) {
+        return this.get(`/api/agents/${encodeURIComponent(agentId)}`);
+    }
+    static async createAgent(body) {
+        return this.post('/api/agents', body);
+    }
+    static async updateAgent(agentId, body) {
+        return this.post(`/api/agents/${encodeURIComponent(agentId)}`, body);
+    }
+    static async archiveAgent(agentId) {
+        return this.post(`/api/agents/${encodeURIComponent(agentId)}/archive`, {});
+    }
+    static async getAgentVersions(agentId) {
+        return this.get(`/api/agents/${encodeURIComponent(agentId)}/versions`);
+    }
+    static async compareAgentVersions(agentId, v1, v2) {
+        return this.get(`/api/agents/${encodeURIComponent(agentId)}/versions/${v1}/compare/${v2}`);
+    }
+    static async getAgentMetrics(agentId, from, to) {
+        return this.get(`/api/agents/${encodeURIComponent(agentId)}/metrics`, { from, to });
+    }
+    static async getAgentActivity(agentId, limit = 20) {
+        return this.get(`/api/agents/${encodeURIComponent(agentId)}/activity?limit=${limit}`);
+    }
+    static async getActivitySummary(since) {
+        return this.get(`/api/agents/activity-summary?since=${encodeURIComponent(since)}`);
+    }
+    // =============================================
+    // Validation API
+    // =============================================
+    static async getValidationSummary(agentId, triggerType = 'agent_test') {
+        return this.get(`/api/agents/${encodeURIComponent(agentId)}/validation/summary?trigger_type=${encodeURIComponent(triggerType)}`);
+    }
+    static async getValidationHistory(agentId, limit = 50, triggerType = 'agent_test') {
+        return this.get(`/api/agents/${encodeURIComponent(agentId)}/validation/history?limit=${limit}&trigger_type=${encodeURIComponent(triggerType)}`);
+    }
+    static async getValidationSessionDetail(sessionId) {
+        return this.get(`/api/validation-sessions/${encodeURIComponent(sessionId)}`);
+    }
+    static async approveValidationSession(agentId, sessionId) {
+        return this.post(`/api/agents/${encodeURIComponent(agentId)}/validation/approve?session_id=${encodeURIComponent(sessionId)}`, {});
+    }
+    static async getValidationCompare(agentId, sessionId, baseline = 'approved') {
+        return this.get(`/api/agents/${encodeURIComponent(agentId)}/validation/compare?session=${encodeURIComponent(sessionId)}&baseline=${encodeURIComponent(baseline)}`);
+    }
+    // =============================================
+    // UI Command API (SmartStore pattern)
+    // =============================================
+    static async getUICommands() {
+        return this.get('/api/ui/commands');
+    }
+    static async ackUICommands(commandIds) {
+        return this.post('/api/ui/commands/ack', {
+            command_ids: commandIds,
+        });
+    }
+    static async pushPageContext(route, data, selectedItem, channelId) {
+        return this.post('/api/ui/page-context', {
+            currentRoute: route,
+            pageData: data,
+            ...(selectedItem ? { selectedItem } : {}),
+            ...(channelId ? { channelId } : {}),
+        });
+    }
+    // =============================================
     // Metrics / Health API
     // =============================================
     static async getHealthReport() {

package/public/viewer/js/utils/dom.js

@@ -109,6 +109,9 @@ export function scrollToBottom(container) {
  * @param {number} maxRows - Maximum number of rows (default: 5)
  */
 export function autoResizeTextarea(textarea, maxRows = 5) {
+    // Skip for non-textarea elements (e.g. input[type=text] in SmartStore-style panel)
+    if (!textarea || textarea.tagName !== 'TEXTAREA')
+        return;
     // Use requestAnimationFrame to defer resize to the next frame, avoiding layout thrash from rapid input events
     requestAnimationFrame(() => {
         textarea.style.height = 'auto'; // Reset height before measuring