agent-orcha 0.0.7 → 0.0.8

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

@@ -4,14 +4,14 @@ import { api } from '../services/ApiService.js';
 import './AgentComposer.js';
 
 const FILE_ICONS = {
-    yaml: { icon: 'fa-file-code', color: 'text-orange-400' },
-    yml: { icon: 'fa-file-code', color: 'text-orange-400' },
-    json: { icon: 'fa-file-code', color: 'text-yellow-400' },
-    js: { icon: 'fa-file-code', color: 'text-yellow-300' },
-    ts: { icon: 'fa-file-code', color: 'text-yellow-300' },
-    txt: { icon: 'fa-file-lines', color: 'text-gray-400' },
-    md: { icon: 'fa-file-lines', color: 'text-blue-400' },
-    default: { icon: 'fa-file', color: 'text-gray-500' },
+    yaml: { icon: 'fa-file-code', color: 'text-orange' },
+    yml: { icon: 'fa-file-code', color: 'text-orange' },
+    json: { icon: 'fa-file-code', color: 'text-yellow' },
+    js: { icon: 'fa-file-code', color: 'text-yellow' },
+    ts: { icon: 'fa-file-code', color: 'text-yellow' },
+    txt: { icon: 'fa-file-lines', color: 'text-secondary' },
+    md: { icon: 'fa-file-lines', color: 'text-blue' },
+    default: { icon: 'fa-file', color: 'text-muted' },
 };
 
 const ACE_MODES = {
@@ -28,35 +28,35 @@ const RESOURCE_TYPES = {
     agent: {
         label: 'Agent',
         icon: 'fa-robot',
-        color: 'text-blue-400',
+        color: 'text-blue',
         folder: 'agents/',
         suffix: '.agent.yaml',
     },
     function: {
         label: 'Function',
         icon: 'fa-bolt',
-        color: 'text-yellow-400',
+        color: 'text-yellow',
         folder: 'functions/',
         suffix: '.function.js',
     },
     knowledge: {
         label: 'Knowledge',
         icon: 'fa-database',
-        color: 'text-purple-400',
+        color: 'text-purple',
         folder: 'knowledge/',
         suffix: '.knowledge.yaml',
     },
     skill: {
         label: 'Skill',
         icon: 'fa-wand-magic-sparkles',
-        color: 'text-green-400',
+        color: 'text-green',
         folder: 'skills/',
         suffix: '/SKILL.md',
     },
     workflow: {
         label: 'Workflow',
         icon: 'fa-diagram-project',
-        color: 'text-orange-400',
+        color: 'text-orange',
         folder: 'workflows/',
         suffix: '.workflow.yaml',
     },
@@ -77,6 +77,7 @@ export class IdeView extends Component {
         this.editor = null;
         this.currentFile = null;
         this.isDirty = false;
+        this._loading = false;
         this.treeData = [];
         this.expandedDirs = new Set();
         this._renamingPath = null;
@@ -158,10 +159,10 @@ export class IdeView extends Component {
         const ext = getExtension(node.name);
         const iconInfo = FILE_ICONS[ext] || FILE_ICONS.default;
         return `
-            <div class="tree-item tree-depth-${Math.min(depth, 5)} flex items-center gap-2 rounded text-sm text-gray-300">
+            <div class="tree-item tree-depth-${Math.min(depth, 5)}">
                 <span class="w-3"></span>
                 <i class="fas ${iconInfo.icon} ${iconInfo.color} text-sm"></i>
-                <input type="text" class="inline-tree-input bg-dark-hover border border-blue-500 text-white text-sm rounded px-1 outline-none flex-1 min-w-0"
+                <input type="text" class="inline-tree-input"
                        data-action="rename" data-path="${node.path}" value="${node.name}" />
             </div>
         `;
@@ -179,17 +180,17 @@ export class IdeView extends Component {
 
                 // Only show menu button for subfolders (depth > 0)
                 const menuBtn = depth > 0 ? `
-                    <button class="tree-menu-btn opacity-0 group-hover:opacity-100 px-1 text-gray-500 hover:text-white transition-opacity"
+                    <button class="tree-menu-btn"
                             data-menu-path="${node.path}" data-menu-type="directory">
                         <i class="fas fa-ellipsis-v text-xs"></i>
                     </button>
                 ` : '';
 
                 return `
-                    <div class="tree-item group tree-depth-${Math.min(depth, 5)} flex items-center gap-2 cursor-pointer hover:bg-dark-hover rounded text-sm text-gray-300"
+                    <div class="tree-item tree-depth-${Math.min(depth, 5)}"
                          data-path="${node.path}" data-type="directory">
-                        <i class="fas ${chevron} text-xs text-gray-500 w-3"></i>
-                        <i class="fas fa-folder${isExpanded ? '-open' : ''} text-yellow-500 text-sm"></i>
+                        <i class="fas ${chevron} text-xs text-muted"></i>
+                        <i class="fas fa-folder${isExpanded ? '-open' : ''} text-yellow text-sm"></i>
                         <span class="flex-1 min-w-0">${node.name}</span>
                         ${menuBtn}
                     </div>
@@ -205,15 +206,14 @@ export class IdeView extends Component {
             const ext = getExtension(node.name);
             const iconInfo = FILE_ICONS[ext] || FILE_ICONS.default;
             const isActive = this.currentFile && this.currentFile.path === node.path;
-            const activeClass = isActive ? 'bg-dark-hover text-white' : '';
 
             return `
-                <div class="tree-item group tree-depth-${Math.min(depth, 5)} flex items-center gap-2 cursor-pointer hover:bg-dark-hover rounded text-sm text-gray-300 ${activeClass}"
+                <div class="tree-item tree-depth-${Math.min(depth, 5)} ${isActive ? 'active-file' : ''}"
                      data-path="${node.path}" data-type="file">
                     <span class="w-3"></span>
                     <i class="fas ${iconInfo.icon} ${iconInfo.color} text-sm"></i>
                     <span class="tree-filename truncate flex-1 min-w-0">${node.name}</span>
-                    <button class="tree-menu-btn opacity-0 group-hover:opacity-100 px-1 text-gray-500 hover:text-white transition-opacity"
+                    <button class="tree-menu-btn"
                             data-menu-path="${node.path}" data-menu-type="file">
                         <i class="fas fa-ellipsis-v text-xs"></i>
                     </button>
@@ -330,19 +330,19 @@ export class IdeView extends Component {
 
         const menu = document.createElement('div');
         menu.id = 'contextMenu';
-        menu.className = 'fixed z-50 bg-dark-surface border border-dark-border rounded shadow-lg py-1 min-w-[100px]';
+        menu.className = 'context-menu';
 
         const isFile = type === 'file';
 
         menu.innerHTML = `
             ${isFile ? `
-                <div class="context-item flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-dark-hover text-sm text-gray-300" data-action="rename">
-                    <i class="fas fa-pen text-xs w-4 text-gray-500"></i>
+                <div class="context-item" data-action="rename">
+                    <i class="fas fa-pen text-xs text-muted"></i>
                     <span>Rename</span>
                 </div>
             ` : ''}
-            <div class="context-item flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-dark-hover text-sm text-red-400" data-action="delete">
-                <i class="fas fa-trash text-xs w-4"></i>
+            <div class="context-item danger" data-action="delete">
+                <i class="fas fa-trash text-xs"></i>
                 <span>Delete</span>
             </div>
         `;
@@ -435,22 +435,22 @@ export class IdeView extends Component {
         if (!btn) return;
 
         const items = Object.entries(RESOURCE_TYPES).map(([key, rt]) => `
-            <div class="new-resource-item flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-dark-hover rounded text-sm text-gray-300"
+            <div class="resource-dropdown-item"
                  data-resource="${key}">
-                <i class="fas ${rt.icon} ${rt.color} text-xs w-4 text-center"></i>
+                <i class="fas ${rt.icon} ${rt.color} text-xs"></i>
                 <span>${rt.label}</span>
             </div>
         `).join('');
 
         const dropdown = document.createElement('div');
         dropdown.id = 'newResourceDropdown';
-        dropdown.className = 'absolute right-0 top-full z-50 bg-dark-surface border border-dark-border rounded-lg shadow-lg py-1 mt-1 min-w-[140px]';
+        dropdown.className = 'resource-dropdown';
         dropdown.innerHTML = items;
 
         btn.parentElement.classList.add('relative');
         btn.parentElement.appendChild(dropdown);
 
-        dropdown.querySelectorAll('.new-resource-item').forEach(item => {
+        dropdown.querySelectorAll('.resource-dropdown-item').forEach(item => {
             item.addEventListener('click', (e) => {
                 e.stopPropagation();
                 const type = item.dataset.resource;
@@ -472,32 +472,27 @@ export class IdeView extends Component {
         const rt = RESOURCE_TYPES[type];
         const modal = document.createElement('div');
         modal.id = 'createResourceModal';
-        modal.className = 'fixed inset-0 z-50 flex items-center justify-center';
+        modal.className = 'auth-overlay';
         modal.innerHTML = `
-            <div class="absolute inset-0 bg-black/50" data-action="cancel"></div>
-            <div class="relative bg-dark-surface border border-dark-border rounded-lg shadow-xl w-full max-w-md mx-4">
-                <div class="flex items-center gap-3 px-4 py-3 border-b border-dark-border">
+            <div class="absolute inset-0 bg-overlay" data-action="cancel"></div>
+            <div class="relative panel shadow-xl w-full mx-4 max-w-md">
+                <div class="flex items-center gap-3 px-4 py-3 border-b">
                     <i class="fas ${rt.icon} ${rt.color}"></i>
                     <span class="text-white font-medium">New ${rt.label}</span>
                 </div>
                 <div class="p-4">
-                    <label class="block text-sm text-gray-400 mb-2">Name</label>
-                    <div class="flex items-center bg-dark-bg border border-dark-border rounded overflow-hidden">
-                        <span class="px-3 py-2 text-gray-500 text-sm bg-dark-hover border-r border-dark-border">${rt.folder}</span>
+                    <label class="block text-sm text-secondary mb-2">Name</label>
+                    <div class="create-modal-input">
+                        <span>${rt.folder}</span>
                         <input type="text" id="resourceNameInput"
-                               class="flex-1 px-3 py-2 bg-transparent text-white text-sm outline-none"
                                placeholder="my-${type}" autocomplete="off" />
-                        <span class="px-3 py-2 text-gray-500 text-sm bg-dark-hover border-l border-dark-border">${rt.suffix}</span>
+                        <span>${rt.suffix}</span>
                     </div>
-                    <p class="text-xs text-gray-500 mt-2">Use lowercase letters, numbers, and hyphens</p>
+                    <p class="text-xs text-muted mt-2">Use lowercase letters, numbers, and hyphens</p>
                 </div>
-                <div class="flex justify-end gap-2 px-4 py-3 border-t border-dark-border">
-                    <button class="px-4 py-1.5 text-sm text-gray-400 hover:text-white transition-colors" data-action="cancel">
-                        Cancel
-                    </button>
-                    <button class="px-4 py-1.5 text-sm bg-green-600 hover:bg-green-700 text-white rounded transition-colors" data-action="create">
-                        Create
-                    </button>
+                <div class="flex justify-end gap-2 px-4 py-3 border-t">
+                    <button class="btn btn-ghost" data-action="cancel">Cancel</button>
+                    <button class="btn btn-accent btn-sm" data-action="create">Create</button>
                 </div>
             </div>
         `;
@@ -614,8 +609,17 @@ 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';
+            // Preserve visual/source choice when switching between agent files
+            if (!isAgentFile(filePath)) {
+                this._viewMode = 'source';
+            } else if (!isAgentFile(this._prevFilePath)) {
+                this._viewMode = 'visual';
+            }
+            this._prevFilePath = filePath;
+            this._loading = true;
             this._renderEditor();
+            this._loading = false;
+            this._updateDirtyState();
             this._renderTree();
             this._updateModeToggle();
         } catch (err) {
@@ -650,6 +654,32 @@ export class IdeView extends Component {
         if (this._viewMode === 'visual') {
             if (editorContainer) editorContainer.classList.add('hidden');
             if (composerContainer) composerContainer.classList.remove('hidden');
+
+            // Parse and load into composer
+            let parsed;
+            try {
+                parsed = jsyaml.load(this.currentFile.content);
+            } catch { parsed = null; }
+
+            if (parsed && typeof parsed === 'object') {
+                let composer = composerContainer.querySelector('agent-composer');
+                if (!composer) {
+                    composer = document.createElement('agent-composer');
+                    composer.classList.add('block', 'h-full');
+                    composerContainer.appendChild(composer);
+                    composer.addEventListener('composer:change', () => {
+                        if (this._loading) return;
+                        if (!this.isDirty) {
+                            this.isDirty = true;
+                            this._updateDirtyState();
+                        }
+                    });
+                }
+                composer.data = parsed;
+            }
+
+            // Also sync Ace so switching to source has current content
+            this._syncAceContent();
             return;
         }
 
@@ -657,7 +687,13 @@ export class IdeView extends Component {
         if (composerContainer) composerContainer.classList.add('hidden');
         if (editorContainer) editorContainer.classList.remove('hidden');
 
-        // Initialize or update Ace
+        this._syncAceContent();
+        this._updateDirtyState();
+        if (this.editor) this.editor.focus();
+    }
+
+    _syncAceContent() {
+        if (!this.currentFile) return;
         const aceEl = this.querySelector('#aceEditor');
         if (!aceEl) return;
 
@@ -671,8 +707,8 @@ export class IdeView extends Component {
                 tabSize: 2,
                 useSoftTabs: true,
             });
-
             this.editor.session.on('change', () => {
+                if (this._loading) return;
                 if (!this.isDirty) {
                     this.isDirty = true;
                     this._updateDirtyState();
@@ -680,16 +716,10 @@ export class IdeView extends Component {
             });
         }
 
-        // Set mode based on file extension
         const ext = getExtension(this.currentFile.path);
         const mode = ACE_MODES[ext] || ACE_MODES.default;
         this.editor.session.setMode(mode);
-
-        // Set content without triggering change event
         this.editor.setValue(this.currentFile.content, -1);
-        this.isDirty = false;
-        this._updateDirtyState();
-        this.editor.focus();
     }
 
     _updateDirtyState() {
@@ -737,16 +767,16 @@ export class IdeView extends Component {
                 const failed = result.reloaded === 'error';
                 if (failed) {
                     savedMsg.textContent = 'Saved (reload failed)';
-                    savedMsg.classList.remove('hidden', 'text-green-400');
-                    savedMsg.classList.add('text-yellow-400');
+                    savedMsg.classList.remove('hidden', 'text-green');
+                    savedMsg.classList.add('text-amber');
                 } else if (reloaded) {
                     savedMsg.textContent = `Saved & reloaded ${result.reloaded}`;
-                    savedMsg.classList.remove('hidden', 'text-yellow-400');
-                    savedMsg.classList.add('text-green-400');
+                    savedMsg.classList.remove('hidden', 'text-amber');
+                    savedMsg.classList.add('text-green');
                 } else {
                     savedMsg.textContent = 'Saved!';
-                    savedMsg.classList.remove('hidden', 'text-yellow-400');
-                    savedMsg.classList.add('text-green-400');
+                    savedMsg.classList.remove('hidden', 'text-amber');
+                    savedMsg.classList.add('text-green');
                 }
                 setTimeout(() => savedMsg.classList.add('hidden'), 2500);
             }
@@ -777,10 +807,7 @@ export class IdeView extends Component {
         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);
+            btn.classList.toggle('active', btn.dataset.mode === this._viewMode);
         });
     }
 
@@ -802,6 +829,7 @@ export class IdeView extends Component {
             return;
         }
 
+        const wasDirty = this.isDirty;
         this._viewMode = 'visual';
         this._updateModeToggle();
 
@@ -817,31 +845,36 @@ export class IdeView extends Component {
             composer = document.createElement('agent-composer');
             composer.classList.add('block', 'h-full');
             composerContainer.appendChild(composer);
+            composer.addEventListener('composer:change', () => {
+                if (this._loading) return;
+                if (!this.isDirty) {
+                    this.isDirty = true;
+                    this._updateDirtyState();
+                }
+            });
         }
 
+        this._loading = true;
         composer.data = parsed;
-
-        // Listen for changes
-        composer.addEventListener('composer:change', () => {
-            if (!this.isDirty) {
-                this.isDirty = true;
-                this._updateDirtyState();
-            }
-        });
+        this._loading = false;
+        this.isDirty = wasDirty;
+        this._updateDirtyState();
     }
 
     _switchToSource() {
         if (!this.currentFile) return;
 
+        const wasDirty = this.isDirty;
         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
+            this._loading = true;
             if (this.editor) {
                 this.editor.setValue(yaml, -1);
             }
+            this._loading = false;
             this.currentFile.content = yaml;
         }
 
@@ -853,6 +886,9 @@ export class IdeView extends Component {
         if (composerContainer) composerContainer.classList.add('hidden');
         if (editorContainer) editorContainer.classList.remove('hidden');
 
+        this.isDirty = wasDirty;
+        this._updateDirtyState();
+
         if (this.editor) {
             this.editor.resize();
             this.editor.focus();
@@ -865,8 +901,7 @@ export class IdeView extends Component {
 
         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.className = `ide-toast ${type === 'error' ? 'error' : ''}`;
         toast.textContent = message;
         document.body.appendChild(toast);
         setTimeout(() => toast.remove(), 4000);
@@ -874,57 +909,57 @@ export class IdeView extends Component {
 
     template() {
         return `
-            <div class="flex flex-col h-full">
+            <div class="ide-shell">
                 <!-- Toolbar -->
-                <div class="flex items-center justify-between bg-dark-surface border border-dark-border rounded-t-lg px-4 py-2 flex-shrink-0">
-                    <div class="flex items-center gap-2 text-sm text-gray-400">
-                        <i class="fas fa-code text-green-400"></i>
+                <div class="ide-toolbar">
+                    <div class="flex items-center gap-2 text-sm text-secondary">
+                        <i class="fas fa-code text-green"></i>
                         <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">
+                        <div id="modeToggle" class="hidden mode-toggle">
+                            <button class="mode-toggle-btn active" 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">
+                            <button class="mode-toggle-btn" 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 id="dirtyIndicator" class="hidden text-amber text-xs flex items-center gap-1">
+                            <i class="fas fa-circle text-2xs"></i> Unsaved
                         </span>
-                        <span id="savedMsg" class="hidden text-green-400 text-xs">Saved!</span>
-                        <button id="saveBtn" class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-sm rounded transition-colors opacity-50 cursor-not-allowed" disabled>
+                        <span id="savedMsg" class="hidden text-green text-xs">Saved!</span>
+                        <button id="saveBtn" class="btn btn-accent btn-sm opacity-50 cursor-not-allowed" disabled>
                             <i class="fas fa-save mr-1"></i> Save
                         </button>
                     </div>
                 </div>
 
                 <!-- Main content -->
-                <div class="flex flex-1 min-h-0 border border-t-0 border-dark-border rounded-b-lg overflow-hidden">
+                <div class="ide-main">
                     <!-- File tree sidebar -->
-                    <div class="w-60 flex-shrink-0 bg-dark-surface border-r border-dark-border overflow-y-auto">
-                        <div class="px-3 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider border-b border-dark-border flex items-center justify-between">
+                    <div class="ide-tree">
+                        <div class="ide-tree-header">
                             <span>Explorer</span>
-                            <button id="newFileBtn" class="text-gray-500 hover:text-green-400 transition-colors" title="New Resource">
+                            <button id="newFileBtn" class="text-muted transition-colors" title="New Resource">
                                 <i class="fas fa-plus text-xs"></i>
                             </button>
                         </div>
                         <div id="fileTree" class="py-1">
-                            <div class="px-4 py-8 text-center text-gray-500 text-sm">
+                            <div class="px-4 py-8 text-center text-muted text-sm">
                                 <i class="fas fa-spinner fa-spin mr-2"></i> Loading...
                             </div>
                         </div>
                     </div>
 
                     <!-- 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="ide-editor">
+                        <div id="welcomePanel" class="flex items-center justify-center h-full text-muted">
                             <div class="text-center">
-                                <i class="fas fa-code text-4xl mb-4 text-gray-600"></i>
+                                <i class="fas fa-code text-4xl mb-4 text-muted"></i>
                                 <p class="text-lg">Select a file from the tree to begin editing</p>
-                                <p class="text-sm mt-2 text-gray-600">Supports YAML, JSON, JavaScript, TypeScript, and more</p>
+                                <p class="text-sm mt-2 text-muted">Supports YAML, JSON, JavaScript, TypeScript, and more</p>
                             </div>
                         </div>
                         <div id="editorContainer" class="hidden h-full">