agent-orcha 0.0.5 → 0.0.8

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

@@ -1,16 +1,17 @@
 
 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' },
-    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 = {
@@ -27,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',
     },
@@ -66,15 +67,21 @@ 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();
         this.editor = null;
         this.currentFile = null;
         this.isDirty = false;
+        this._loading = false;
         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 +93,7 @@ export class IdeView extends Component {
             this.editor.destroy();
             this.editor = null;
         }
+        this._viewMode = 'source';
     }
 
     async postRender() {
@@ -105,6 +113,7 @@ export class IdeView extends Component {
             });
         }
 
+        this._attachModeToggle();
         await this._loadTree();
     }
 
@@ -150,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>
         `;
@@ -171,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>
@@ -197,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>
@@ -322,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>
         `;
@@ -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();
@@ -425,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;
@@ -462,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>
         `;
@@ -604,8 +609,19 @@ export class IdeView extends Component {
             const data = await api.readFile(filePath);
             this.currentFile = { path: data.path, content: data.content };
             this.isDirty = false;
+            // 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) {
             console.error('Failed to read file:', err);
         }
@@ -613,19 +629,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,7 +651,49 @@ export class IdeView extends Component {
         // Update dirty state
         this._updateDirtyState();
 
-        // Initialize or update Ace
+        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;
+        }
+
+        // Source mode
+        if (composerContainer) composerContainer.classList.add('hidden');
+        if (editorContainer) editorContainer.classList.remove('hidden');
+
+        this._syncAceContent();
+        this._updateDirtyState();
+        if (this.editor) this.editor.focus();
+    }
+
+    _syncAceContent() {
+        if (!this.currentFile) return;
         const aceEl = this.querySelector('#aceEditor');
         if (!aceEl) return;
 
@@ -650,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();
@@ -659,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() {
@@ -690,9 +741,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);
@@ -707,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);
             }
@@ -726,55 +786,186 @@ 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 => {
+            btn.classList.toggle('active', btn.dataset.mode === this._viewMode);
+        });
+    }
+
+    _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;
+        }
+
+        const wasDirty = this.isDirty;
+        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.addEventListener('composer:change', () => {
+                if (this._loading) return;
+                if (!this.isDirty) {
+                    this.isDirty = true;
+                    this._updateDirtyState();
+                }
+            });
+        }
+
+        this._loading = true;
+        composer.data = parsed;
+        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 });
+
+            this._loading = true;
+            if (this.editor) {
+                this.editor.setValue(yaml, -1);
+            }
+            this._loading = false;
+            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');
+
+        this.isDirty = wasDirty;
+        this._updateDirtyState();
+
+        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';
+        toast.className = `ide-toast ${type === 'error' ? 'error' : ''}`;
+        toast.textContent = message;
+        document.body.appendChild(toast);
+        setTimeout(() => toast.remove(), 4000);
+    }
+
     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">
-                        <span id="dirtyIndicator" class="hidden text-yellow-400 text-xs flex items-center gap-1">
-                            <i class="fas fa-circle text-[6px]"></i> Unsaved
+                        <!-- Mode toggle (only for .agent.yaml files) -->
+                        <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" data-mode="visual">
+                                <i class="fas fa-palette mr-1"></i>Visual
+                            </button>
+                        </div>
+                        <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 / Welcome -->
-                    <div class="flex-1 min-w-0 relative">
-                        <div id="welcomePanel" class="flex items-center justify-center h-full text-gray-500">
+                    <!-- Editor / Composer / Welcome -->
+                    <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">
                             <div id="aceEditor" class="h-full w-full"></div>
                         </div>
+                        <div id="composerContainer" class="hidden h-full overflow-hidden"></div>
                     </div>
                 </div>
             </div>