agent-orcha 0.0.5 → 0.0.7

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

@@ -1,6 +1,7 @@
 
 import { Component } from '../utils/Component.js';
 import { api } from '../services/ApiService.js';
+import './AgentComposer.js';
 
 const FILE_ICONS = {
     yaml: { icon: 'fa-file-code', color: 'text-orange-400' },
@@ -66,6 +67,10 @@ function getExtension(filename) {
     return parts.length > 1 ? parts.pop().toLowerCase() : '';
 }
 
+function isAgentFile(path) {
+    return path && path.endsWith('.agent.yaml');
+}
+
 export class IdeView extends Component {
     constructor() {
         super();
@@ -75,6 +80,7 @@ export class IdeView extends Component {
         this.treeData = [];
         this.expandedDirs = new Set();
         this._renamingPath = null;
+        this._viewMode = 'source'; // 'source' | 'visual'
         this._handleKeyDown = this._handleKeyDown.bind(this);
         this._handleDocClick = this._handleDocClick.bind(this);
     }
@@ -86,6 +92,7 @@ export class IdeView extends Component {
             this.editor.destroy();
             this.editor = null;
         }
+        this._viewMode = 'source';
     }
 
     async postRender() {
@@ -105,6 +112,7 @@ export class IdeView extends Component {
             });
         }
 
+        this._attachModeToggle();
         await this._loadTree();
     }
 
@@ -395,7 +403,9 @@ export class IdeView extends Component {
             if (this.currentFile && this.currentFile.path === filePath) {
                 this.currentFile = null;
                 this.isDirty = false;
+                this._viewMode = 'source';
                 this._renderEditor();
+                this._updateModeToggle();
             }
 
             await this._loadTree();
@@ -604,8 +614,10 @@ export class IdeView extends Component {
             const data = await api.readFile(filePath);
             this.currentFile = { path: data.path, content: data.content };
             this.isDirty = false;
+            this._viewMode = 'source';
             this._renderEditor();
             this._renderTree();
+            this._updateModeToggle();
         } catch (err) {
             console.error('Failed to read file:', err);
         }
@@ -613,19 +625,18 @@ export class IdeView extends Component {
 
     _renderEditor() {
         const editorContainer = this.querySelector('#editorContainer');
+        const composerContainer = this.querySelector('#composerContainer');
         const welcomePanel = this.querySelector('#welcomePanel');
         const breadcrumb = this.querySelector('#breadcrumb');
-        const saveBtn = this.querySelector('#saveBtn');
-        const dirtyIndicator = this.querySelector('#dirtyIndicator');
 
         if (!this.currentFile) {
             if (welcomePanel) welcomePanel.classList.remove('hidden');
             if (editorContainer) editorContainer.classList.add('hidden');
+            if (composerContainer) composerContainer.classList.add('hidden');
             return;
         }
 
         if (welcomePanel) welcomePanel.classList.add('hidden');
-        if (editorContainer) editorContainer.classList.remove('hidden');
 
         // Update breadcrumb
         if (breadcrumb) {
@@ -636,6 +647,16 @@ export class IdeView extends Component {
         // Update dirty state
         this._updateDirtyState();
 
+        if (this._viewMode === 'visual') {
+            if (editorContainer) editorContainer.classList.add('hidden');
+            if (composerContainer) composerContainer.classList.remove('hidden');
+            return;
+        }
+
+        // Source mode
+        if (composerContainer) composerContainer.classList.add('hidden');
+        if (editorContainer) editorContainer.classList.remove('hidden');
+
         // Initialize or update Ace
         const aceEl = this.querySelector('#aceEditor');
         if (!aceEl) return;
@@ -690,9 +711,18 @@ export class IdeView extends Component {
     }
 
     async _saveFile() {
-        if (!this.currentFile || !this.isDirty || !this.editor) return;
-
-        const content = this.editor.getValue();
+        if (!this.currentFile || !this.isDirty) return;
+
+        let content;
+        if (this._viewMode === 'visual') {
+            const composer = this.querySelector('agent-composer');
+            if (!composer) return;
+            const data = composer.getData();
+            content = jsyaml.dump(data, { indent: 2, lineWidth: -1, noRefs: true, sortKeys: false });
+        } else {
+            if (!this.editor) return;
+            content = this.editor.getValue();
+        }
 
         try {
             const result = await api.writeFile(this.currentFile.path, content);
@@ -726,6 +756,122 @@ export class IdeView extends Component {
         }
     }
 
+    // ── Mode Toggle ──
+
+    _attachModeToggle() {
+        this.querySelectorAll('.mode-toggle-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const mode = btn.dataset.mode;
+                if (mode === this._viewMode) return;
+                if (mode === 'visual') this._switchToVisual();
+                else this._switchToSource();
+            });
+        });
+    }
+
+    _updateModeToggle() {
+        const toggle = this.querySelector('#modeToggle');
+        if (!toggle) return;
+
+        const show = this.currentFile && isAgentFile(this.currentFile.path);
+        toggle.classList.toggle('hidden', !show);
+
+        toggle.querySelectorAll('.mode-toggle-btn').forEach(btn => {
+            const active = btn.dataset.mode === this._viewMode;
+            btn.classList.toggle('bg-dark-hover', active);
+            btn.classList.toggle('text-white', active);
+            btn.classList.toggle('text-gray-500', !active);
+        });
+    }
+
+    _switchToVisual() {
+        if (!this.currentFile) return;
+
+        // Get current Ace content and parse
+        const content = this.editor ? this.editor.getValue() : this.currentFile.content;
+        let parsed;
+        try {
+            parsed = jsyaml.load(content);
+        } catch (err) {
+            this._showToast(`Invalid YAML: ${err.message}`, 'error');
+            return;
+        }
+
+        if (!parsed || typeof parsed !== 'object') {
+            this._showToast('YAML must be an object', 'error');
+            return;
+        }
+
+        this._viewMode = 'visual';
+        this._updateModeToggle();
+
+        // Hide Ace, show composer
+        const editorContainer = this.querySelector('#editorContainer');
+        const composerContainer = this.querySelector('#composerContainer');
+        if (editorContainer) editorContainer.classList.add('hidden');
+        if (composerContainer) composerContainer.classList.remove('hidden');
+
+        // Create or get the composer element
+        let composer = composerContainer.querySelector('agent-composer');
+        if (!composer) {
+            composer = document.createElement('agent-composer');
+            composer.classList.add('block', 'h-full');
+            composerContainer.appendChild(composer);
+        }
+
+        composer.data = parsed;
+
+        // Listen for changes
+        composer.addEventListener('composer:change', () => {
+            if (!this.isDirty) {
+                this.isDirty = true;
+                this._updateDirtyState();
+            }
+        });
+    }
+
+    _switchToSource() {
+        if (!this.currentFile) return;
+
+        const composer = this.querySelector('agent-composer');
+        if (composer && this._viewMode === 'visual') {
+            const data = composer.getData();
+            const yaml = jsyaml.dump(data, { indent: 2, lineWidth: -1, noRefs: true, sortKeys: false });
+
+            // Update Ace content
+            if (this.editor) {
+                this.editor.setValue(yaml, -1);
+            }
+            this.currentFile.content = yaml;
+        }
+
+        this._viewMode = 'source';
+        this._updateModeToggle();
+
+        const editorContainer = this.querySelector('#editorContainer');
+        const composerContainer = this.querySelector('#composerContainer');
+        if (composerContainer) composerContainer.classList.add('hidden');
+        if (editorContainer) editorContainer.classList.remove('hidden');
+
+        if (this.editor) {
+            this.editor.resize();
+            this.editor.focus();
+        }
+    }
+
+    _showToast(message, type = 'info') {
+        const existing = document.querySelector('#ideToast');
+        if (existing) existing.remove();
+
+        const toast = document.createElement('div');
+        toast.id = 'ideToast';
+        const color = type === 'error' ? 'bg-red-600' : 'bg-blue-600';
+        toast.className = `fixed bottom-4 right-4 z-50 ${color} text-white text-sm px-4 py-2 rounded-lg shadow-lg`;
+        toast.textContent = message;
+        document.body.appendChild(toast);
+        setTimeout(() => toast.remove(), 4000);
+    }
+
     template() {
         return `
             <div class="flex flex-col h-full">
@@ -736,6 +882,15 @@ export class IdeView extends Component {
                         <span id="breadcrumb">Select a file to edit</span>
                     </div>
                     <div class="flex items-center gap-3">
+                        <!-- Mode toggle (only for .agent.yaml files) -->
+                        <div id="modeToggle" class="hidden flex items-center bg-dark-bg rounded border border-dark-border overflow-hidden">
+                            <button class="mode-toggle-btn px-2.5 py-1 text-xs transition-colors text-white bg-dark-hover" data-mode="source">
+                                <i class="fas fa-code mr-1"></i>Source
+                            </button>
+                            <button class="mode-toggle-btn px-2.5 py-1 text-xs transition-colors text-gray-500" data-mode="visual">
+                                <i class="fas fa-palette mr-1"></i>Visual
+                            </button>
+                        </div>
                         <span id="dirtyIndicator" class="hidden text-yellow-400 text-xs flex items-center gap-1">
                             <i class="fas fa-circle text-[6px]"></i> Unsaved
                         </span>
@@ -763,7 +918,7 @@ export class IdeView extends Component {
                         </div>
                     </div>
 
-                    <!-- Editor / Welcome -->
+                    <!-- Editor / Composer / Welcome -->
                     <div class="flex-1 min-w-0 relative">
                         <div id="welcomePanel" class="flex items-center justify-center h-full text-gray-500">
                             <div class="text-center">
@@ -775,6 +930,7 @@ export class IdeView extends Component {
                         <div id="editorContainer" class="hidden h-full">
                             <div id="aceEditor" class="h-full w-full"></div>
                         </div>
+                        <div id="composerContainer" class="hidden h-full overflow-hidden"></div>
                     </div>
                 </div>
             </div>

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

@@ -55,6 +55,13 @@ export class MonitorView extends Component {
             if (this.selectedTask) {
                 const updated = tasks.find(t => t.id === this.selectedTask.id);
                 if (updated) {
+                    // Preserve events and metrics from SSE — list API doesn't include them
+                    if (this.selectedTask.events?.length && !updated.events?.length) {
+                        updated.events = this.selectedTask.events;
+                    }
+                    if (this.selectedTask.metrics && !updated.metrics) {
+                        updated.metrics = this.selectedTask.metrics;
+                    }
                     this.selectedTask = updated;
                     this.renderDetailPanel();
                 }
@@ -114,13 +121,19 @@ export class MonitorView extends Component {
         });
     }
 
-    selectTask(taskId) {
+    async selectTask(taskId) {
         const task = this.tasks.find(t => t.id === taskId);
         if (!task) return;
 
         this.selectedTask = task;
         this.renderTaskList();
 
+        // Fetch full task with events
+        try {
+            const full = await api.getTask(taskId);
+            this.selectedTask = full;
+        } catch { /* fall back to list data */ }
+
         const detailArea = this.querySelector('#taskDetailArea');
         detailArea.classList.remove('hidden');
         this.renderDetailPanel();
@@ -170,6 +183,47 @@ export class MonitorView extends Component {
                 </div>
             </div>`;
 
+        // Metrics section (react-loop telemetry)
+        const metricsContainer = this.querySelector('#detailMetrics');
+        if (task.metrics) {
+            const m = task.metrics;
+            metricsContainer.innerHTML = `
+                <div class="bg-dark-surface/50 border border-dark-border rounded-lg p-4">
+                    <div class="flex items-center gap-2 mb-3">
+                        <i class="fas fa-chart-line text-indigo-400 text-sm"></i>
+                        <span class="text-sm font-medium text-gray-400">React-Loop Metrics</span>
+                    </div>
+                    <div class="grid grid-cols-3 md:grid-cols-6 gap-4 text-sm">
+                        <div>
+                            <span class="text-gray-500 block text-xs">Iteration</span>
+                            <span class="text-gray-200 font-mono">${m.iteration}</span>
+                        </div>
+                        <div>
+                            <span class="text-gray-500 block text-xs">Messages</span>
+                            <span class="text-gray-200 font-mono">${m.messageCount}</span>
+                        </div>
+                        <div>
+                            <span class="text-gray-500 block text-xs">Images</span>
+                            <span class="text-gray-200 font-mono">${m.imageCount}</span>
+                        </div>
+                        <div>
+                            <span class="text-gray-500 block text-xs">Context Size</span>
+                            <span class="text-gray-200 font-mono">${formatContextSize(m.contextChars)}</span>
+                        </div>
+                        <div>
+                            <span class="text-gray-500 block text-xs">Input Tokens</span>
+                            <span class="text-gray-200 font-mono">${m.inputTokens ? m.inputTokens.toLocaleString() : '-'}</span>
+                        </div>
+                        <div>
+                            <span class="text-gray-500 block text-xs">Output Tokens</span>
+                            <span class="text-gray-200 font-mono">${m.outputTokens ? m.outputTokens.toLocaleString() : '-'}</span>
+                        </div>
+                    </div>
+                </div>`;
+        } else {
+            metricsContainer.innerHTML = '';
+        }
+
         // Input section
         this.querySelector('#detailInput').innerHTML = `
             <details class="group">
@@ -239,6 +293,73 @@ export class MonitorView extends Component {
         } else {
             actionsContainer.innerHTML = '';
         }
+
+        // Activity feed (events + LLM output)
+        this.renderActivityFeed();
+    }
+
+    renderActivityFeed() {
+        const container = this.querySelector('#detailActivity');
+        const events = this.selectedTask?.events;
+        if (!events?.length) {
+            container.innerHTML = '';
+            return;
+        }
+
+        const rows = events.map(evt => {
+            const time = new Date(evt.timestamp).toLocaleTimeString();
+            if (evt.type === 'tool_start') {
+                const inputStr = typeof evt.input === 'string' ? evt.input : JSON.stringify(evt.input ?? {});
+                const truncInput = inputStr.length > 120 ? inputStr.slice(0, 120) + '...' : inputStr;
+                return `<div class="flex gap-2 py-1.5 border-b border-dark-border/50">
+                    <span class="text-gray-600 text-xs font-mono flex-shrink-0 w-16">${time}</span>
+                    <span class="text-xs"><i class="fas fa-play text-blue-400 mr-1"></i><span class="text-blue-300 font-medium">${escapeHtml(evt.tool)}</span> <span class="text-gray-500">${escapeHtml(truncInput)}</span></span>
+                </div>`;
+            }
+            if (evt.type === 'tool_end') {
+                let outputStr = '';
+                if (Array.isArray(evt.output)) {
+                    outputStr = evt.output.map(p => p.type === 'image' ? `[image ${formatContextSize(p.bytes)}]` : p.text || '').join(' ');
+                } else if (typeof evt.output === 'string') {
+                    outputStr = evt.output;
+                }
+                const truncOutput = outputStr.length > 200 ? outputStr.slice(0, 200) + '...' : outputStr;
+                return `<div class="flex gap-2 py-1.5 border-b border-dark-border/50">
+                    <span class="text-gray-600 text-xs font-mono flex-shrink-0 w-16">${time}</span>
+                    <span class="text-xs"><i class="fas fa-check text-green-400 mr-1"></i><span class="text-green-300 font-medium">${escapeHtml(evt.tool)}</span> <span class="text-gray-400">${escapeHtml(truncOutput)}</span></span>
+                </div>`;
+            }
+            if (evt.type === 'thinking') {
+                const truncContent = (evt.content || '').length > 200 ? evt.content.slice(0, 200) + '...' : evt.content;
+                return `<div class="flex gap-2 py-1.5 border-b border-dark-border/50">
+                    <span class="text-gray-600 text-xs font-mono flex-shrink-0 w-16">${time}</span>
+                    <span class="text-xs"><i class="fas fa-brain text-purple-400 mr-1"></i><span class="text-purple-300">${escapeHtml(truncContent)}</span></span>
+                </div>`;
+            }
+            if (evt.type === 'content') {
+                const truncContent = (evt.content || '').length > 300 ? evt.content.slice(0, 300) + '...' : evt.content;
+                return `<div class="flex gap-2 py-1.5 border-b border-dark-border/50">
+                    <span class="text-gray-600 text-xs font-mono flex-shrink-0 w-16">${time}</span>
+                    <span class="text-xs"><i class="fas fa-comment text-gray-400 mr-1"></i><span class="text-gray-300">${escapeHtml(truncContent)}</span></span>
+                </div>`;
+            }
+            return '';
+        }).join('');
+
+        container.innerHTML = `
+            <details open class="group">
+                <summary class="cursor-pointer text-sm font-medium text-gray-400 hover:text-gray-300 transition-colors">
+                    <i class="fas fa-chevron-right text-xs mr-1 group-open:rotate-90 transition-transform inline-block"></i>
+                    Activity (${events.length} events)
+                </summary>
+                <div class="mt-2 bg-dark-bg border border-dark-border rounded-lg p-3 max-h-96 overflow-y-auto custom-scrollbar">
+                    ${rows}
+                </div>
+            </details>`;
+
+        // Auto-scroll to bottom
+        const feed = container.querySelector('.overflow-y-auto');
+        if (feed) feed.scrollTop = feed.scrollHeight;
     }
 
     async handleCancel() {
@@ -275,6 +396,15 @@ export class MonitorView extends Component {
                 if (data.type === 'status' && this.selectedTask?.id === taskId) {
                     this.loadTasks();
                 }
+                if (data.type === 'metrics' && this.selectedTask?.id === taskId) {
+                    this.selectedTask.metrics = data.metrics;
+                    this.renderDetailPanel();
+                }
+                if (data.type === 'events' && this.selectedTask?.id === taskId) {
+                    if (!this.selectedTask.events) this.selectedTask.events = [];
+                    this.selectedTask.events.push(...data.events);
+                    this.renderActivityFeed();
+                }
                 if (data.type === 'done') {
                     this.closeEventSource();
                 }
@@ -360,9 +490,11 @@ export class MonitorView extends Component {
                     </div>
 
                     <div id="detailMeta" class="bg-dark-surface/50 border border-dark-border rounded-lg p-4"></div>
+                    <div id="detailMetrics"></div>
                     <div id="detailInputRequest"></div>
                     <div id="detailInput"></div>
                     <div id="detailResult"></div>
+                    <div id="detailActivity"></div>
                     <div id="detailActions"></div>
                 </div>
             </div>
@@ -385,4 +517,10 @@ function kindBadgeClass(kind) {
     return map[kind] || 'bg-gray-500/20 text-gray-400';
 }
 
+function formatContextSize(chars) {
+    if (chars >= 1_000_000) return `${(chars / 1_000_000).toFixed(1)}M`;
+    if (chars >= 1_000) return `${(chars / 1_000).toFixed(1)}K`;
+    return `${chars}`;
+}
+
 customElements.define('monitor-view', MonitorView);