agent-orcha 0.0.2 → 0.0.4

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

@@ -0,0 +1,76 @@
+
+import { Component } from '../utils/Component.js';
+import { store } from '../store.js';
+import './NavBar.js';
+import './AgentsView.js';
+import './WorkflowsView.js';
+import './KnowledgeView.js';
+import './McpView.js';
+import './IdeView.js';
+
+export class AppRoot extends Component {
+    postRender() {
+        store.addEventListener('state-change', (e) => {
+            if (e.detail.key === 'activeTab') {
+                this.switchTab(e.detail.value);
+            }
+        });
+
+        // Handle browser back/forward
+        window.addEventListener('hashchange', () => {
+            const hash = window.location.hash.replace('#', '');
+            if (hash && hash !== store.get('activeTab')) {
+                store.set('activeTab', hash);
+            }
+        });
+
+        // Initial tab from hash or default
+        const initialTab = store.get('activeTab');
+        if (!window.location.hash) {
+            window.location.hash = initialTab;
+        }
+        this.switchTab(initialTab);
+    }
+
+    switchTab(tabId) {
+        const container = this.querySelector('#tabContent');
+        if (!container) return;
+
+        container.innerHTML = '';
+        let el;
+        switch (tabId) {
+            case 'agents': el = document.createElement('agents-view'); break;
+            case 'workflows': el = document.createElement('workflows-view'); break;
+            case 'knowledge': el = document.createElement('knowledge-view'); break;
+            case 'mcp': el = document.createElement('mcp-view'); break;
+            case 'ide': el = document.createElement('ide-view'); break;
+            default: el = document.createElement('agents-view'); break;
+        }
+
+        // Preserve state or re-render? Web Components are cheap to re-create usually,
+        // but for chat history we might want to keep it in store (which we do).
+        // If we wanted to keep DOM alive we'd hide/show, but replacing is cleaner for now.
+        container.appendChild(el);
+    }
+
+    template() {
+        return `
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 h-screen flex flex-col">
+                <div class="mb-4 flex-shrink-0">
+                    <h1 class="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
+                        Agent Orcha
+                    </h1>
+                    <p class="text-gray-400 mt-2">Declare the system. Orcha handles the REST.</p>
+                </div>
+
+                <nav-bar class="flex-shrink-0"></nav-bar>
+
+                <div id="tabContent" class="flex-1 min-h-0 relative">
+                    <!-- Dynamic Content -->
+                </div>
+            </div>
+        `;
+    }
+}
+
+customElements.define('app-root', AppRoot);

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

@@ -0,0 +1,330 @@
+
+import { Component } from '../utils/Component.js';
+import { api } from '../services/ApiService.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' },
+};
+
+const ACE_MODES = {
+    yaml: 'ace/mode/yaml',
+    yml: 'ace/mode/yaml',
+    json: 'ace/mode/json',
+    js: 'ace/mode/javascript',
+    ts: 'ace/mode/typescript',
+    md: 'ace/mode/markdown',
+    default: 'ace/mode/text',
+};
+
+function getExtension(filename) {
+    const parts = filename.split('.');
+    return parts.length > 1 ? parts.pop().toLowerCase() : '';
+}
+
+export class IdeView extends Component {
+    constructor() {
+        super();
+        this.editor = null;
+        this.currentFile = null;
+        this.isDirty = false;
+        this.treeData = [];
+        this.expandedDirs = new Set();
+        this._handleKeyDown = this._handleKeyDown.bind(this);
+    }
+
+    disconnectedCallback() {
+        document.removeEventListener('keydown', this._handleKeyDown);
+        if (this.editor) {
+            this.editor.destroy();
+            this.editor = null;
+        }
+    }
+
+    async postRender() {
+        document.addEventListener('keydown', this._handleKeyDown);
+
+        const saveBtn = this.querySelector('#saveBtn');
+        if (saveBtn) {
+            saveBtn.addEventListener('click', () => this._saveFile());
+        }
+
+        await this._loadTree();
+    }
+
+    _handleKeyDown(e) {
+        if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+            e.preventDefault();
+            this._saveFile();
+        }
+    }
+
+    async _loadTree() {
+        try {
+            const data = await api.getFileTree();
+            this.treeData = data.tree || [];
+            this._renderTree();
+        } catch (err) {
+            console.error('Failed to load file tree:', err);
+        }
+    }
+
+    _renderTree() {
+        const container = this.querySelector('#fileTree');
+        if (!container) return;
+        container.innerHTML = this._buildTreeHTML(this.treeData, 0);
+        this._attachTreeListeners();
+    }
+
+    _buildTreeHTML(nodes, depth) {
+        return nodes.map(node => {
+            if (node.type === 'directory') {
+                const isExpanded = this.expandedDirs.has(node.path);
+                const chevron = isExpanded ? 'fa-chevron-down' : 'fa-chevron-right';
+                const childrenHTML = isExpanded
+                    ? this._buildTreeHTML(node.children || [], depth + 1)
+                    : '';
+
+                return `
+                    <div class="tree-item tree-depth-${Math.min(depth, 5)} flex items-center gap-2 cursor-pointer hover:bg-dark-hover rounded text-sm text-gray-300"
+                         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>
+                        <span>${node.name}</span>
+                    </div>
+                    ${childrenHTML}
+                `;
+            }
+
+            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 tree-depth-${Math.min(depth, 5)} flex items-center gap-2 cursor-pointer hover:bg-dark-hover rounded text-sm text-gray-300 ${activeClass}"
+                     data-path="${node.path}" data-type="file">
+                    <span class="w-3"></span>
+                    <i class="fas ${iconInfo.icon} ${iconInfo.color} text-sm"></i>
+                    <span class="truncate max-w-[160px]">${node.name}</span>
+                </div>
+            `;
+        }).join('');
+    }
+
+    _attachTreeListeners() {
+        this.querySelectorAll('.tree-item').forEach(item => {
+            item.addEventListener('click', () => {
+                const filePath = item.dataset.path;
+                const type = item.dataset.type;
+
+                if (type === 'directory') {
+                    this._toggleDir(filePath);
+                } else {
+                    this._openFile(filePath);
+                }
+            });
+        });
+    }
+
+    _toggleDir(dirPath) {
+        if (this.expandedDirs.has(dirPath)) {
+            this.expandedDirs.delete(dirPath);
+        } else {
+            this.expandedDirs.add(dirPath);
+        }
+        this._renderTree();
+    }
+
+    async _openFile(filePath) {
+        if (this.isDirty) {
+            const confirmed = confirm('You have unsaved changes. Discard and open another file?');
+            if (!confirmed) return;
+        }
+
+        try {
+            const data = await api.readFile(filePath);
+            this.currentFile = { path: data.path, content: data.content };
+            this.isDirty = false;
+            this._renderEditor();
+            this._renderTree();
+        } catch (err) {
+            console.error('Failed to read file:', err);
+        }
+    }
+
+    _renderEditor() {
+        const editorContainer = this.querySelector('#editorContainer');
+        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');
+            return;
+        }
+
+        if (welcomePanel) welcomePanel.classList.add('hidden');
+        if (editorContainer) editorContainer.classList.remove('hidden');
+
+        // Update breadcrumb
+        if (breadcrumb) {
+            const parts = this.currentFile.path.split('/');
+            breadcrumb.textContent = parts.join(' / ');
+        }
+
+        // Update dirty state
+        this._updateDirtyState();
+
+        // Initialize or update Ace
+        const aceEl = this.querySelector('#aceEditor');
+        if (!aceEl) return;
+
+        if (!this.editor) {
+            this.editor = ace.edit(aceEl);
+            this.editor.setTheme('ace/theme/one_dark');
+            this.editor.setOptions({
+                fontSize: '14px',
+                showPrintMargin: false,
+                wrap: true,
+                tabSize: 2,
+                useSoftTabs: true,
+            });
+
+            this.editor.session.on('change', () => {
+                if (!this.isDirty) {
+                    this.isDirty = true;
+                    this._updateDirtyState();
+                }
+            });
+        }
+
+        // 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() {
+        const dirtyIndicator = this.querySelector('#dirtyIndicator');
+        const saveBtn = this.querySelector('#saveBtn');
+        const savedMsg = this.querySelector('#savedMsg');
+
+        if (dirtyIndicator) {
+            dirtyIndicator.classList.toggle('hidden', !this.isDirty);
+        }
+        if (saveBtn) {
+            saveBtn.disabled = !this.isDirty;
+            saveBtn.classList.toggle('opacity-50', !this.isDirty);
+            saveBtn.classList.toggle('cursor-not-allowed', !this.isDirty);
+        }
+        if (savedMsg) {
+            savedMsg.classList.add('hidden');
+        }
+    }
+
+    async _saveFile() {
+        if (!this.currentFile || !this.isDirty || !this.editor) return;
+
+        const content = this.editor.getValue();
+
+        try {
+            const result = await api.writeFile(this.currentFile.path, content);
+            this.currentFile.content = content;
+            this.isDirty = false;
+            this._updateDirtyState();
+
+            // Show saved confirmation with reload info
+            const savedMsg = this.querySelector('#savedMsg');
+            if (savedMsg) {
+                const reloaded = result.reloaded && result.reloaded !== 'none';
+                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');
+                } else if (reloaded) {
+                    savedMsg.textContent = `Saved & reloaded ${result.reloaded}`;
+                    savedMsg.classList.remove('hidden', 'text-yellow-400');
+                    savedMsg.classList.add('text-green-400');
+                } else {
+                    savedMsg.textContent = 'Saved!';
+                    savedMsg.classList.remove('hidden', 'text-yellow-400');
+                    savedMsg.classList.add('text-green-400');
+                }
+                setTimeout(() => savedMsg.classList.add('hidden'), 2500);
+            }
+        } catch (err) {
+            console.error('Failed to save file:', err);
+            alert('Failed to save file.');
+        }
+    }
+
+    template() {
+        return `
+            <div class="flex flex-col h-full">
+                <!-- 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>
+                        <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
+                        </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>
+                            <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">
+                    <!-- 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">
+                            Explorer
+                        </div>
+                        <div id="fileTree" class="py-1">
+                            <div class="px-4 py-8 text-center text-gray-500 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">
+                            <div class="text-center">
+                                <i class="fas fa-code text-4xl mb-4 text-gray-600"></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>
+                            </div>
+                        </div>
+                        <div id="editorContainer" class="hidden h-full">
+                            <div id="aceEditor" class="h-full w-full"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}
+
+customElements.define('ide-view', IdeView);

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

@@ -0,0 +1,133 @@
+
+import { Component } from '../utils/Component.js';
+import { api } from '../services/ApiService.js';
+
+export class KnowledgeView extends Component {
+    async connectedCallback() {
+        super.connectedCallback();
+        this.loadKnowledge();
+    }
+
+    async loadKnowledge() {
+        try {
+            const knowledgeStores = await api.getKnowledgeStores();
+            const select = this.querySelector('#knowledgeSelect');
+            select.innerHTML = '<option value="">-- Select Knowledge Store --</option>' +
+                knowledgeStores.map(k => `<option value="${k.name}">${k.name}</option>`).join('');
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    async onKnowledgeSelected(name) {
+        if (!name) {
+            this.querySelector('#knowledgeInfo').classList.add('hidden');
+            this.querySelector('#searchKnowledge').disabled = true;
+            return;
+        }
+
+        try {
+            const info = await api.getKnowledgeStore(name);
+            this.renderInfo(info);
+            this.querySelector('#searchKnowledge').disabled = false;
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    renderInfo(info) {
+        const el = this.querySelector('#knowledgeInfo');
+        el.classList.remove('hidden');
+        el.innerHTML = `
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+                <div><span class="text-gray-400">Description:</span> <span class="text-gray-200 ml-2">${info.description || 'N/A'}</span></div>
+                <div><span class="text-gray-400">Source:</span> <span class="text-gray-200 ml-2">${info.source?.type || 'N/A'}</span></div>
+                <div><span class="text-gray-400">Store:</span> <span class="text-gray-200 ml-2">${info.store?.type || 'memory'}</span></div>
+            </div>
+        `;
+    }
+
+    async search() {
+        const storeName = this.querySelector('#knowledgeSelect').value;
+        const query = this.querySelector('#knowledgeQuery').value;
+        const k = this.querySelector('#knowledgeK').value;
+
+        if (!storeName || !query) return;
+
+        const resultsEl = this.querySelector('#knowledgeResults');
+        resultsEl.innerHTML = '<div class="text-gray-400 italic text-center py-8">Searching...</div>';
+
+        try {
+            const res = await api.searchKnowledgeStore(storeName, query, k);
+            const results = Array.isArray(res) ? res : res.results || [];
+
+            if (results.length === 0) {
+                resultsEl.innerHTML = '<div class="text-gray-500 italic text-center py-8">No results found</div>';
+                return;
+            }
+
+            resultsEl.innerHTML = results.map((r, i) => `
+                <div class="mb-4 last:mb-0 bg-dark-bg border border-dark-border rounded-lg p-4">
+                    <div class="flex items-center justify-between mb-2 pb-2 border-b border-dark-border">
+                        <span class="font-semibold text-gray-200">Result ${i + 1}</span>
+                        <span class="text-sm font-mono text-gray-400">Score: ${r.score?.toFixed(3)}</span>
+                    </div>
+                    <div class="text-sm text-gray-300 mb-3 whitespace-pre-wrap">${this.escapeHtml(r.content)}</div>
+                    <div class="text-xs text-gray-500">
+                        ${r.metadata ? Object.entries(r.metadata).map(([k, v]) => `<span class="mr-3"><span class="text-gray-600">${k}:</span> ${v}</span>`).join('') : ''}
+                    </div>
+                </div>
+            `).join('');
+
+        } catch (e) {
+            resultsEl.innerHTML = `<div class="text-red-400 text-center">Error: ${e.message}</div>`;
+        }
+    }
+
+    escapeHtml(text) {
+        if (!text) return '';
+        return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    }
+
+    postRender() {
+        this.querySelector('#knowledgeSelect').addEventListener('change', (e) => this.onKnowledgeSelected(e.target.value));
+        this.querySelector('#searchKnowledge').addEventListener('click', () => this.search());
+    }
+
+    template() {
+        return `
+            <div class="space-y-6 h-full overflow-y-auto pb-8 custom-scrollbar">
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-2">Select Knowledge Store</label>
+                    <select id="knowledgeSelect" class="w-full bg-dark-surface border border-dark-border rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500"></select>
+                </div>
+
+                <div id="knowledgeInfo" class="bg-dark-surface/50 border border-dark-border rounded-lg p-4 hidden"></div>
+
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-2">Search Query</label>
+                    <textarea id="knowledgeQuery" rows="3" class="w-full bg-dark-surface border border-dark-border rounded-lg px-4 py-3 text-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500"></textarea>
+                </div>
+
+                <div class="flex items-center gap-4">
+                    <button id="searchKnowledge" disabled class="bg-orange-600 hover:bg-orange-700 disabled:bg-gray-700 disabled:cursor-not-allowed text-white font-medium px-6 py-2.5 rounded-lg transition-colors">
+                        Search
+                    </button>
+                    <div class="flex items-center gap-2">
+                        <label class="text-sm text-gray-400">Results:</label>
+                        <input type="number" id="knowledgeK" value="4" min="1" max="20" class="w-20 bg-dark-surface border border-dark-border rounded-lg px-3 py-2 text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500">
+                    </div>
+                </div>
+
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-2">Results</label>
+                    <div id="knowledgeResults" class="bg-dark-surface border border-dark-border rounded-lg p-4 min-h-[200px]">
+                        <div class="text-gray-500 italic text-center py-8">Select a knowledge store to search</div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}
+
+customElements.define('knowledge-view', KnowledgeView);

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

@@ -0,0 +1,127 @@
+
+import { Component } from '../utils/Component.js';
+import { api } from '../services/ApiService.js';
+
+export class LlmView extends Component {
+    constructor() {
+        super();
+        this.isLoading = false;
+    }
+
+    async connectedCallback() {
+        super.connectedCallback();
+        this.loadLLMs();
+    }
+
+    async loadLLMs() {
+        try {
+            const llms = await api.getLLMs();
+            const select = this.querySelector('#llmSelect');
+            select.innerHTML = '<option value="">-- Select LLM --</option>' +
+                llms.map(l => `<option value="${l.name}">${l.name} (${l.model})</option>`).join('');
+
+            select.addEventListener('change', () => {
+                const info = this.querySelector('#llmInfo');
+                const selected = llms.find(l => l.name === select.value);
+
+                if (selected) {
+                    info.classList.remove('hidden');
+                    info.innerHTML = `
+                         <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+                            <div><span class="text-gray-400">Model:</span> <span class="text-gray-200 ml-2">${selected.model}</span></div>
+                            <div><span class="text-gray-400">Base URL:</span> <span class="text-gray-200 ml-2">${selected.baseUrl || 'Default'}</span></div>
+                        </div>
+                    `;
+                    this.updateButtons(false);
+                } else {
+                    info.classList.add('hidden');
+                    this.updateButtons(true);
+                }
+            });
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    updateButtons(disabled) {
+        this.querySelector('#runLlm').disabled = disabled;
+        this.querySelector('#streamLlm').disabled = disabled;
+    }
+
+    async run(stream) {
+        const name = this.querySelector('#llmSelect').value;
+        const msg = this.querySelector('#llmInput').value;
+        const outputEl = this.querySelector('#llmOutput');
+
+        if (!name || !msg) return;
+
+        this.isLoading = true;
+        this.updateButtons(true);
+        outputEl.textContent = 'Processing...';
+
+        try {
+            if (stream) {
+                const res = await api.streamLLM(name, msg);
+                const reader = res.body.getReader();
+                const decoder = new TextDecoder();
+                outputEl.textContent = '';
+
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+                    outputEl.textContent += decoder.decode(value);
+                    outputEl.scrollTop = outputEl.scrollHeight;
+                }
+            } else {
+                const res = await api.chatLLM(name, msg);
+                outputEl.textContent = res.output || JSON.stringify(res, null, 2);
+            }
+        } catch (e) {
+            outputEl.textContent = 'Error: ' + e.message;
+            outputEl.classList.add('text-red-400');
+        } finally {
+            this.isLoading = false;
+            this.updateButtons(false);
+            outputEl.classList.remove('text-red-400');
+        }
+    }
+
+    postRender() {
+        this.querySelector('#runLlm').addEventListener('click', () => this.run(false));
+        this.querySelector('#streamLlm').addEventListener('click', () => this.run(true));
+    }
+
+    template() {
+        return `
+            <div class="space-y-6 h-full overflow-y-auto pb-8 custom-scrollbar">
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-2">Select LLM</label>
+                    <select id="llmSelect" class="w-full bg-dark-surface border border-dark-border rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500"></select>
+                </div>
+
+                <div id="llmInfo" class="bg-dark-surface/50 border border-dark-border rounded-lg p-4 hidden"></div>
+
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-2">Message</label>
+                    <textarea id="llmInput" rows="5" class="w-full bg-dark-surface border border-dark-border rounded-lg px-4 py-3 text-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500"></textarea>
+                </div>
+
+                <div class="flex gap-3">
+                    <button id="runLlm" disabled class="bg-green-600 hover:bg-green-700 disabled:bg-gray-700 disabled:cursor-not-allowed text-white font-medium px-6 py-2.5 rounded-lg transition-colors">
+                        Send Message
+                    </button>
+                    <button id="streamLlm" disabled class="bg-emerald-600 hover:bg-emerald-700 disabled:bg-gray-700 disabled:cursor-not-allowed text-white font-medium px-6 py-2.5 rounded-lg transition-colors">
+                        Stream
+                    </button>
+                </div>
+
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-2">Output</label>
+                    <div id="llmOutput" class="bg-dark-surface border border-dark-border rounded-lg p-4 min-h-[200px] font-mono text-sm text-gray-300 whitespace-pre-wrap overflow-x-auto"></div>
+                </div>
+            </div>
+        `;
+    }
+}
+
+customElements.define('llm-view', LlmView);