agent-orcha 0.0.7 → 0.0.8

package/dist/public/src/components/LogViewer.js

@@ -0,0 +1,155 @@
+import { Component } from '../utils/Component.js';
+import { api } from '../services/ApiService.js';
+
+const LEVEL_CLASSES = {
+    trace: 'log-trace',
+    debug: 'log-debug',
+    info: 'log-info',
+    warn: 'log-warn',
+    error: 'log-error',
+    fatal: 'log-fatal',
+};
+
+const MAX_VISIBLE_LINES = 2000;
+
+export class LogViewer extends Component {
+    postRender() {
+        this._eventSource = null;
+        this._open = false;
+        this._autoScroll = true;
+        this._lineCount = 0;
+
+        this.querySelector('#log-toggle').addEventListener('click', () => this._toggle());
+        this.querySelector('#log-clear').addEventListener('click', (e) => { e.stopPropagation(); this._clear(); });
+        this.querySelector('#log-autoscroll').addEventListener('click', (e) => { e.stopPropagation(); this._toggleAutoScroll(); });
+
+        const body = this.querySelector('#log-body');
+        body.addEventListener('scroll', () => {
+            const atBottom = body.scrollHeight - body.scrollTop - body.clientHeight < 40;
+            if (this._autoScroll !== atBottom) {
+                this._autoScroll = atBottom;
+                this._updateAutoScrollBtn();
+            }
+        });
+    }
+
+    disconnectedCallback() {
+        this._disconnect();
+    }
+
+    _toggle() {
+        this._open = !this._open;
+        const panel = this.querySelector('#log-panel');
+        const chevron = this.querySelector('#log-chevron');
+
+        if (this._open) {
+            panel.classList.remove('log-panel-closed');
+            panel.classList.add('log-panel-open');
+            chevron.classList.add('log-chevron-open');
+            this._connect();
+        } else {
+            panel.classList.remove('log-panel-open');
+            panel.classList.add('log-panel-closed');
+            chevron.classList.remove('log-chevron-open');
+            this._disconnect();
+        }
+    }
+
+    _connect() {
+        if (this._eventSource) return;
+        this._eventSource = api.streamLogs();
+        this._eventSource.onmessage = (e) => {
+            try {
+                const entry = JSON.parse(e.data);
+                this._appendLine(entry);
+            } catch { /* ignore malformed */ }
+        };
+        this._eventSource.onerror = () => {
+            // Reconnect is automatic with EventSource
+        };
+    }
+
+    _disconnect() {
+        if (this._eventSource) {
+            this._eventSource.close();
+            this._eventSource = null;
+        }
+    }
+
+    _appendLine(entry) {
+        const body = this.querySelector('#log-body');
+        if (!body) return;
+
+        const line = document.createElement('div');
+        line.className = `log-line ${LEVEL_CLASSES[entry.level] || ''}`;
+
+        const time = entry.timestamp ? new Date(entry.timestamp).toLocaleTimeString('en-GB', { hour12: false }) : '';
+        const lvl = (entry.level || '').toUpperCase().padEnd(5);
+        const comp = entry.component ? `[${entry.component}] ` : '';
+
+        line.textContent = `${time} ${lvl} ${comp}${entry.message}`;
+        body.appendChild(line);
+        this._lineCount++;
+
+        // Prune old lines to prevent memory bloat
+        if (this._lineCount > MAX_VISIBLE_LINES) {
+            const excess = this._lineCount - MAX_VISIBLE_LINES;
+            for (let i = 0; i < excess; i++) {
+                body.firstChild?.remove();
+            }
+            this._lineCount = MAX_VISIBLE_LINES;
+        }
+
+        if (this._autoScroll) {
+            body.scrollTop = body.scrollHeight;
+        }
+
+    }
+
+    _clear() {
+        const body = this.querySelector('#log-body');
+        if (body) body.innerHTML = '';
+        this._lineCount = 0;
+    }
+
+    _toggleAutoScroll() {
+        this._autoScroll = !this._autoScroll;
+        this._updateAutoScrollBtn();
+        if (this._autoScroll) {
+            const body = this.querySelector('#log-body');
+            if (body) body.scrollTop = body.scrollHeight;
+        }
+    }
+
+    _updateAutoScrollBtn() {
+        const btn = this.querySelector('#log-autoscroll');
+        if (btn) {
+            btn.classList.toggle('log-autoscroll-active', this._autoScroll);
+        }
+    }
+
+    template() {
+        return `
+            <div id="log-panel" class="log-panel log-panel-closed">
+                <div id="log-toggle" class="log-header">
+                    <div class="log-header-left">
+                        <i id="log-chevron" class="fas fa-chevron-up log-chevron"></i>
+                        <i class="fas fa-terminal log-terminal-icon"></i>
+                        <span class="log-title">Console</span>
+                    </div>
+                    <div class="log-header-right">
+                        <button id="log-autoscroll" class="log-btn log-autoscroll-active" title="Auto-scroll">
+                            <i class="fas fa-angles-down"></i>
+                        </button>
+                        <button id="log-clear" class="log-btn" title="Clear">
+                            <i class="fas fa-ban"></i>
+                        </button>
+                    </div>
+                </div>
+                <div id="log-body" class="log-body"></div>
+            </div>
+        `;
+    }
+}
+
+customElements.define('log-viewer', LogViewer);

package/dist/public/src/components/McpView.js

@@ -16,7 +16,7 @@ export class McpView extends Component {
 
     async loadContent() {
         const container = this.querySelector('#listContainer');
-        container.innerHTML = '<div class="text-gray-500 text-center py-8">Loading...</div>';
+        container.innerHTML = '<div class="text-muted text-center py-4">Loading...</div>';
 
         try {
             if (this.source === 'mcp') {
@@ -27,14 +27,14 @@ export class McpView extends Component {
                 this.renderFunctions(functions);
             }
         } catch (e) {
-            container.innerHTML = `<div class="text-red-400 text-center">Error: ${e.message}</div>`;
+            container.innerHTML = `<div class="text-red text-center">Error: ${e.message}</div>`;
         }
     }
 
     async renderServers(servers) {
         const container = this.querySelector('#listContainer');
         if (!servers.length) {
-            container.innerHTML = '<div class="text-gray-500 text-center py-8">No servers configured</div>';
+            container.innerHTML = '<div class="text-muted text-center py-4">No servers configured</div>';
             return;
         }
 
@@ -42,19 +42,18 @@ export class McpView extends Component {
 
         for (const server of servers) {
             const section = document.createElement('div');
-            section.className = 'bg-dark-surface/30 border border-dark-border rounded-lg overflow-hidden mb-4';
+            section.className = 'mcp-accordion';
 
-            // Initial render without tools
             section.innerHTML = `
-                <div class="p-4 cursor-pointer hover:bg-dark-surface/50 transition-colors flex items-center justify-between" onclick="this.parentElement.querySelector('.tools-grid').classList.toggle('hidden'); this.querySelector('svg').classList.toggle('rotate-180')">
+                <div class="mcp-accordion-header" onclick="this.parentElement.querySelector('.tools-grid').classList.toggle('hidden'); this.querySelector('svg').classList.toggle('rotate-180')">
                     <div class="flex-1">
-                        <div class="font-medium text-gray-200">${server.name}</div>
-                        <div class="text-xs text-gray-500 mt-0.5">${server.transport}</div>
+                        <div class="font-medium text-primary">${server.name}</div>
+                        <div class="text-xs text-muted mt-1">${server.transport}</div>
                     </div>
-                    <svg class="w-5 h-5 text-gray-400 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+                    <svg class="text-secondary transition-transform" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                 </div>
-                <div class="tools-grid hidden p-4 pt-0 border-t border-dark-border/50">
-                     <div class="text-gray-500 text-sm py-2">Loading tools...</div>
+                <div class="tools-grid hidden p-4 pt-3 border-t">
+                     <div class="text-muted text-sm py-2">Loading tools...</div>
                 </div>
              `;
 
@@ -62,15 +61,15 @@ export class McpView extends Component {
             api.getMCPTools(server.name).then(tools => {
                 const grid = section.querySelector('.tools-grid');
                 if (!tools.length) {
-                    grid.innerHTML = '<div class="text-gray-500 text-sm py-2">No tools available</div>';
+                    grid.innerHTML = '<div class="text-muted text-sm py-2">No tools available</div>';
                     return;
                 }
 
-                grid.innerHTML = `<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-4">
+                grid.innerHTML = `<div class="grid-auto mt-3">
                     ${tools.map(tool => `
-                        <div class="tool-card bg-dark-bg border border-dark-border hover:border-cyan-500 rounded p-3 cursor-pointer transition-colors" data-server="${server.name}" data-tool='${JSON.stringify(tool).replace(/'/g, "&#39;")}'>
-                            <div class="font-medium text-cyan-400 text-sm mb-1">${tool.name}</div>
-                            <div class="text-xs text-gray-500 line-clamp-2">${tool.description || ''}</div>
+                        <div class="tool-card mcp-tool-card" data-server="${server.name}" data-tool='${JSON.stringify(tool).replace(/'/g, "&#39;")}'>
+                            <div class="tool-name">${tool.name}</div>
+                            <div class="text-xs text-muted line-clamp-2">${tool.description || ''}</div>
                         </div>
                     `).join('')}
                  </div>`;
@@ -91,15 +90,15 @@ export class McpView extends Component {
     renderFunctions(functions) {
         const container = this.querySelector('#listContainer');
         if (!functions.length) {
-            container.innerHTML = '<div class="text-gray-500 text-center py-8">No functions available</div>';
+            container.innerHTML = '<div class="text-muted text-center py-4">No functions available</div>';
             return;
         }
 
-        container.innerHTML = `<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+        container.innerHTML = `<div class="grid-auto">
             ${functions.map(func => `
-                <div class="func-card bg-dark-surface border border-dark-border hover:border-cyan-500 rounded-lg p-4 cursor-pointer transition-colors" data-func='${JSON.stringify(func).replace(/'/g, "&#39;")}'>
-                     <div class="font-medium text-cyan-400 mb-1">${func.name}</div>
-                     <div class="text-xs text-gray-500 line-clamp-2">${func.description || ''}</div>
+                <div class="func-card mcp-tool-card" data-func='${JSON.stringify(func).replace(/'/g, "&#39;")}'>
+                     <div class="tool-name">${func.name}</div>
+                     <div class="text-xs text-muted line-clamp-2">${func.description || ''}</div>
                 </div>
             `).join('')}
         </div>`;
@@ -138,8 +137,7 @@ export class McpView extends Component {
 
         // Highlight
         this.querySelectorAll('.tool-card, .func-card').forEach(el => {
-            el.classList.remove('border-cyan-500', 'bg-cyan-500/10');
-            el.classList.add('border-dark-border');
+            el.classList.remove('active');
         });
         // (Visual highlight logic omitted for brevity as it requires complex matching)
     }
@@ -281,20 +279,16 @@ export class McpView extends Component {
 
         mcpBtn.addEventListener('click', () => {
             this.source = 'mcp';
-            mcpBtn.classList.replace('bg-dark-surface', 'bg-cyan-600');
-            mcpBtn.classList.replace('text-gray-400', 'text-white');
-            funcBtn.classList.replace('bg-cyan-600', 'bg-dark-surface');
-            funcBtn.classList.replace('text-white', 'text-gray-400');
+            mcpBtn.classList.add('active');
+            funcBtn.classList.remove('active');
             this.querySelector('#executionArea').classList.add('hidden');
             this.loadContent();
         });
 
         funcBtn.addEventListener('click', () => {
             this.source = 'functions';
-            funcBtn.classList.replace('bg-dark-surface', 'bg-cyan-600');
-            funcBtn.classList.replace('text-gray-400', 'text-white');
-            mcpBtn.classList.replace('bg-cyan-600', 'bg-dark-surface');
-            mcpBtn.classList.replace('text-white', 'text-gray-400');
+            funcBtn.classList.add('active');
+            mcpBtn.classList.remove('active');
             this.querySelector('#executionArea').classList.add('hidden');
             this.loadContent();
         });
@@ -316,7 +310,7 @@ export class McpView extends Component {
         } catch (e) {
             outputArea.classList.remove('hidden');
             outputEl.textContent = 'Error: Invalid JSON arguments';
-            outputEl.classList.add('text-red-400');
+            outputEl.classList.add('text-red');
             return;
         }
 
@@ -324,7 +318,7 @@ export class McpView extends Component {
         btn.textContent = 'Executing...';
         outputArea.classList.remove('hidden');
         outputEl.textContent = 'Running...';
-        outputEl.classList.remove('text-red-400');
+        outputEl.classList.remove('text-red');
 
         try {
             let result;
@@ -342,7 +336,7 @@ export class McpView extends Component {
             outputEl.textContent = content;
         } catch (e) {
             outputEl.textContent = 'Error: ' + e.message;
-            outputEl.classList.add('text-red-400');
+            outputEl.classList.add('text-red');
         } finally {
             btn.disabled = false;
             btn.textContent = 'Execute';
@@ -351,32 +345,30 @@ export class McpView extends Component {
 
     template() {
         return `
-            <div class="space-y-6 h-full overflow-y-auto pb-8 custom-scrollbar">
-                <div class="flex gap-2 border-b border-dark-border pb-4">
-                    <button id="mcpBtn" class="px-4 py-2 rounded-lg font-medium bg-cyan-600 text-white transition-colors">MCP Servers</button>
-                    <button id="funcBtn" class="px-4 py-2 rounded-lg font-medium bg-dark-surface text-gray-400 hover:bg-dark-hover transition-colors">Internal Functions</button>
+            <div class="space-y-6 h-full overflow-y-auto pb-6 view-panel">
+                <div class="mcp-tabs">
+                    <button id="mcpBtn" class="mcp-tab active">MCP Servers</button>
+                    <button id="funcBtn" class="mcp-tab">Internal Functions</button>
                 </div>
 
                 <div id="listContainer"></div>
 
-                <div id="executionArea" class="hidden border-t border-dark-border pt-6">
-                    <div class="bg-dark-surface/50 border border-dark-border rounded-lg p-4 mb-4">
-                         <div class="font-medium text-cyan-400" id="selectedName"></div>
-                         <div class="text-xs text-gray-500 mt-1" id="selectedDesc"></div>
+                <div id="executionArea" class="hidden border-t pt-4">
+                    <div class="panel-dim mb-4">
+                         <div class="font-medium text-accent" id="selectedName"></div>
+                         <div class="text-xs text-muted mt-1" id="selectedDesc"></div>
                     </div>
 
                     <div class="mb-4">
-                        <label class="block text-sm font-medium text-gray-300 mb-2">Arguments (JSON)</label>
-                        <textarea id="argsInput" rows="6" class="w-full bg-dark-surface border border-dark-border rounded-lg px-4 py-3 text-gray-100 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500"></textarea>
+                        <label class="block text-sm font-medium text-primary mb-2">Arguments (JSON)</label>
+                        <textarea id="argsInput" rows="6" class="textarea font-mono text-sm"></textarea>
                     </div>
 
-                    <button id="executeBtn" class="bg-cyan-600 hover:bg-cyan-700 text-white font-medium px-6 py-2.5 rounded-lg transition-colors">
-                        Execute
-                    </button>
+                    <button id="executeBtn" class="btn btn-accent">Execute</button>
 
                     <div id="outputArea" class="mt-4 hidden">
-                        <label class="block text-sm font-medium text-gray-300 mb-2">Output</label>
-                        <div id="mcpOutput" class="bg-dark-surface border border-dark-border rounded-lg p-4 min-h-[100px] font-mono text-sm text-gray-300 whitespace-pre-wrap overflow-x-auto"></div>
+                        <label class="block text-sm font-medium text-primary mb-2">Output</label>
+                        <div id="mcpOutput" class="llm-output"></div>
                     </div>
                 </div>
             </div>