Designer and editor magic button UI, tasks UI improvements

ui/suite/designer.html

@@ -97,6 +97,146 @@
             transition: all 0.15s;
         }
 
+        .toolbar-btn.magic {
+            background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
+            border-color: var(--accent-purple);
+        }
+
+        .toolbar-btn.magic:hover {
+            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
+            transform: scale(1.05);
+        }
+
+        .magic-panel {
+            position: fixed;
+            right: 20px;
+            bottom: 60px;
+            width: 380px;
+            max-height: 500px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+            z-index: 1000;
+            display: none;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .magic-panel.visible {
+            display: flex;
+        }
+
+        .magic-header {
+            padding: 16px;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            background: linear-gradient(135deg, rgba(203,166,247,0.1), rgba(137,180,250,0.1));
+        }
+
+        .magic-header svg {
+            width: 20px;
+            height: 20px;
+            color: var(--accent-purple);
+        }
+
+        .magic-header h3 {
+            flex: 1;
+            font-size: 14px;
+            font-weight: 600;
+        }
+
+        .magic-close {
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            padding: 4px;
+        }
+
+        .magic-close:hover {
+            color: var(--text-primary);
+        }
+
+        .magic-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 16px;
+        }
+
+        .magic-loading {
+            text-align: center;
+            padding: 40px;
+            color: var(--text-secondary);
+        }
+
+        .magic-loading .spinner {
+            width: 32px;
+            height: 32px;
+            border: 3px solid var(--border-color);
+            border-top-color: var(--accent-purple);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 16px;
+        }
+
+        .magic-suggestion {
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 12px;
+        }
+
+        .magic-suggestion-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 8px;
+        }
+
+        .magic-suggestion-icon {
+            width: 24px;
+            height: 24px;
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .magic-suggestion-icon.ux { background: rgba(166,227,161,0.2); color: var(--accent-green); }
+        .magic-suggestion-icon.perf { background: rgba(249,226,175,0.2); color: var(--accent-yellow); }
+        .magic-suggestion-icon.a11y { background: rgba(137,180,250,0.2); color: var(--accent-blue); }
+        .magic-suggestion-icon.feature { background: rgba(203,166,247,0.2); color: var(--accent-purple); }
+
+        .magic-suggestion-title {
+            font-weight: 600;
+            font-size: 13px;
+        }
+
+        .magic-suggestion-desc {
+            font-size: 12px;
+            color: var(--text-secondary);
+            line-height: 1.5;
+        }
+
+        .magic-suggestion-apply {
+            margin-top: 10px;
+            background: var(--accent-purple);
+            color: white;
+            border: none;
+            padding: 6px 12px;
+            border-radius: 4px;
+            font-size: 12px;
+            cursor: pointer;
+        }
+
+        .magic-suggestion-apply:hover {
+            opacity: 0.9;
+        }
+
         .toolbar-btn:hover {
             background: var(--border-color);
         }
@@ -845,6 +985,17 @@
                     </svg>
                     Export
                 </button>
+
+                <div class="toolbar-separator"></div>
+
+                <button class="toolbar-btn magic" id="btn-magic"
+                        onclick="showMagicPanel()"
+                        title="AI Improvements (Ctrl+M)">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
+                    </svg>
+                    Magic
+                </button>
             </div>
         </header>
 
@@ -1111,6 +1262,28 @@
             </div>
         </div>
 
+        <!-- Magic AI Panel -->
+        <div class="magic-panel" id="magic-panel">
+            <div class="magic-header">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
+                </svg>
+                <h3>AI Improvements</h3>
+                <button class="magic-close" onclick="hideMagicPanel()">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+                        <line x1="18" y1="6" x2="6" y2="18"/>
+                        <line x1="6" y1="6" x2="18" y2="18"/>
+                    </svg>
+                </button>
+            </div>
+            <div class="magic-content" id="magic-content">
+                <div class="magic-loading">
+                    <div class="spinner"></div>
+                    <p>Analyzing your dialog...</p>
+                </div>
+            </div>
+        </div>
+
         <!-- Properties Panel -->
         <aside class="properties-panel" id="properties-panel">
             <div class="properties-header">
@@ -2126,6 +2299,122 @@
                 document.getElementById('selected-file').value = fileItem.dataset.path;
             }
         });
+
+        function showMagicPanel() {
+            const panel = document.getElementById('magic-panel');
+            panel.classList.add('visible');
+            analyzeMagicSuggestions();
+        }
+
+        function hideMagicPanel() {
+            document.getElementById('magic-panel').classList.remove('visible');
+        }
+
+        async function analyzeMagicSuggestions() {
+            const content = document.getElementById('magic-content');
+            content.innerHTML = '<div class="magic-loading"><div class="spinner"></div><p>Analyzing your dialog...</p></div>';
+
+            const nodes = Array.from(state.nodes.values());
+            const dialogData = {
+                nodes: nodes.map(n => ({ type: n.type, fields: n.fields })),
+                connections: state.connections.length,
+                filename: document.getElementById('current-filename').value || 'untitled'
+            };
+
+            try {
+                const response = await fetch('/api/v1/designer/magic', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(dialogData)
+                });
+
+                if (response.ok) {
+                    const suggestions = await response.json();
+                    renderMagicSuggestions(suggestions);
+                } else {
+                    renderFallbackSuggestions(dialogData);
+                }
+            } catch (e) {
+                renderFallbackSuggestions(dialogData);
+            }
+        }
+
+        function renderFallbackSuggestions(dialogData) {
+            const suggestions = [];
+            const nodes = dialogData.nodes;
+
+            if (!nodes.some(n => n.type === 'HEAR')) {
+                suggestions.push({
+                    type: 'ux',
+                    title: 'Add User Input',
+                    description: 'Your dialog has no HEAR nodes. Consider adding user input to make it interactive.'
+                });
+            }
+
+            if (nodes.filter(n => n.type === 'TALK').length > 5) {
+                suggestions.push({
+                    type: 'ux',
+                    title: 'Break Up Long Responses',
+                    description: 'You have many TALK nodes. Consider grouping related messages or using a menu.'
+                });
+            }
+
+            if (!nodes.some(n => n.type === 'IF' || n.type === 'SWITCH')) {
+                suggestions.push({
+                    type: 'feature',
+                    title: 'Add Decision Logic',
+                    description: 'Add IF or SWITCH nodes to handle different user responses dynamically.'
+                });
+            }
+
+            if (dialogData.connections < nodes.length - 1 && nodes.length > 1) {
+                suggestions.push({
+                    type: 'perf',
+                    title: 'Check Connections',
+                    description: 'Some nodes may not be connected. Ensure all nodes flow properly.'
+                });
+            }
+
+            suggestions.push({
+                type: 'a11y',
+                title: 'Use Clear Language',
+                description: 'Keep messages short and clear. Avoid jargon for better accessibility.'
+            });
+
+            renderMagicSuggestions(suggestions);
+        }
+
+        function renderMagicSuggestions(suggestions) {
+            const content = document.getElementById('magic-content');
+            if (!suggestions || suggestions.length === 0) {
+                content.innerHTML = '<p style="text-align:center;color:var(--text-secondary);padding:40px;">Your dialog looks great! No suggestions at this time.</p>';
+                return;
+            }
+
+            const icons = {
+                ux: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
+                perf: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>',
+                a11y: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
+                feature: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>'
+            };
+
+            content.innerHTML = suggestions.map(s => `
+                <div class="magic-suggestion">
+                    <div class="magic-suggestion-header">
+                        <div class="magic-suggestion-icon ${s.type}">${icons[s.type] || icons.feature}</div>
+                        <span class="magic-suggestion-title">${s.title}</span>
+                    </div>
+                    <p class="magic-suggestion-desc">${s.description}</p>
+                </div>
+            `).join('');
+        }
+
+        document.addEventListener('keydown', (e) => {
+            if (e.ctrlKey && e.key === 'm') {
+                e.preventDefault();
+                showMagicPanel();
+            }
+        });
     </script>
 </body>
 </html>

ui/suite/editor.html

@@ -120,6 +120,98 @@
                 background: var(--accent-hover);
             }
 
+            .btn-magic {
+                background: linear-gradient(135deg, #8b5cf6, #3b82f6);
+                color: white;
+                border: none;
+            }
+
+            .btn-magic:hover {
+                background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+                transform: scale(1.02);
+            }
+
+            .magic-panel {
+                position: fixed;
+                right: 20px;
+                bottom: 60px;
+                width: 400px;
+                max-height: 500px;
+                background: var(--bg-secondary);
+                border: 1px solid var(--border-color);
+                border-radius: 12px;
+                box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+                z-index: 1000;
+                display: none;
+                flex-direction: column;
+                overflow: hidden;
+            }
+
+            .magic-panel.visible {
+                display: flex;
+            }
+
+            .magic-header {
+                padding: 16px;
+                border-bottom: 1px solid var(--border-color);
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(59,130,246,0.1));
+            }
+
+            .magic-header h3 {
+                font-size: 14px;
+                font-weight: 600;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+            }
+
+            .magic-close {
+                background: none;
+                border: none;
+                color: var(--text-secondary);
+                cursor: pointer;
+                font-size: 18px;
+            }
+
+            .magic-content {
+                flex: 1;
+                overflow-y: auto;
+                padding: 16px;
+            }
+
+            .magic-loading {
+                text-align: center;
+                padding: 40px;
+                color: var(--text-secondary);
+            }
+
+            .magic-result {
+                background: var(--bg-tertiary);
+                border-radius: 8px;
+                padding: 12px;
+                margin-bottom: 12px;
+            }
+
+            .magic-result pre {
+                font-family: monospace;
+                font-size: 12px;
+                white-space: pre-wrap;
+                overflow-x: auto;
+            }
+
+            .magic-apply-btn {
+                background: var(--success);
+                color: white;
+                border: none;
+                padding: 8px 16px;
+                border-radius: 6px;
+                cursor: pointer;
+                margin-top: 12px;
+            }
+
             .btn-small {
                 padding: 6px 10px;
                 font-size: 12px;
@@ -379,6 +471,12 @@
                         hx-swap="innerHTML">
                         { } Format
                     </button>
+                    <button
+                        class="btn btn-small btn-magic"
+                        onclick="showMagicPanel()"
+                        title="AI Improvements (Ctrl+M)">
+                        ✨ Magic
+                    </button>
                 </div>
 
                 <div class="toolbar-group" id="csv-tools" style="display: none;">
@@ -399,6 +497,17 @@
                 </div>
             </div>
 
+            <!-- Magic AI Panel -->
+            <div class="magic-panel" id="magic-panel">
+                <div class="magic-header">
+                    <h3>✨ AI Improvements</h3>
+                    <button class="magic-close" onclick="hideMagicPanel()">×</button>
+                </div>
+                <div class="magic-content" id="magic-content">
+                    <div class="magic-loading">Analyzing code...</div>
+                </div>
+            </div>
+
             <!-- Editor Content - loaded via HTMX based on file type -->
             <div class="editor-content" id="editor-content">
                 <!-- Text Editor (default) -->
@@ -514,6 +623,87 @@
                     htmx.trigger(document.querySelector('[hx-post="/api/v1/editor/save"]'), 'click');
                 }
             });
+        function showMagicPanel() {
+            document.getElementById('magic-panel').classList.add('visible');
+            runMagicAnalysis();
+        }
+
+        function hideMagicPanel() {
+            document.getElementById('magic-panel').classList.remove('visible');
+        }
+
+        async function runMagicAnalysis() {
+            const content = document.getElementById('magic-content');
+            const code = document.getElementById('text-editor').value;
+
+            if (!code.trim()) {
+                content.innerHTML = '<p style="color:var(--text-secondary);text-align:center;padding:40px;">No code to analyze. Start typing or open a file.</p>';
+                return;
+            }
+
+            content.innerHTML = '<div class="magic-loading">✨ Analyzing your code...</div>';
+
+            try {
+                const response = await fetch('/api/v1/editor/magic', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ code: code })
+                });
+
+                if (response.ok) {
+                    const result = await response.json();
+                    renderMagicResult(result);
+                } else {
+                    content.innerHTML = '<p style="color:var(--error);padding:20px;">Failed to analyze. Try again.</p>';
+                }
+            } catch (e) {
+                content.innerHTML = '<p style="color:var(--error);padding:20px;">Error connecting to AI service.</p>';
+            }
+        }
+
+        function renderMagicResult(result) {
+            const content = document.getElementById('magic-content');
+            if (result.improved_code) {
+                content.innerHTML = `
+                    <div class="magic-result">
+                        <p><strong>Suggested improvements:</strong></p>
+                        <p style="color:var(--text-secondary);margin:8px 0;">${result.explanation || 'Improved code structure and patterns.'}</p>
+                        <pre>${escapeHtml(result.improved_code)}</pre>
+                        <button class="magic-apply-btn" onclick="applyMagicCode()">Apply Changes</button>
+                    </div>
+                `;
+                window.magicImprovedCode = result.improved_code;
+            } else if (result.suggestions) {
+                content.innerHTML = result.suggestions.map(s => `
+                    <div class="magic-result">
+                        <p><strong>${s.title}</strong></p>
+                        <p style="color:var(--text-secondary);">${s.description}</p>
+                    </div>
+                `).join('');
+            } else {
+                content.innerHTML = '<p style="padding:20px;">Your code looks good! No suggestions at this time.</p>';
+            }
+        }
+
+        function applyMagicCode() {
+            if (window.magicImprovedCode) {
+                document.getElementById('text-editor').value = window.magicImprovedCode;
+                hideMagicPanel();
+            }
+        }
+
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        document.addEventListener('keydown', (e) => {
+            if (e.ctrlKey && e.key === 'm') {
+                e.preventDefault();
+                showMagicPanel();
+            }
+        });
         </script>
     </body>
 </html>

ui/suite/tasks/autotask.css

@@ -52,7 +52,7 @@
     font-size: 10px;
     font-weight: 700;
     padding: 4px 8px;
-    background: linear-gradient(135deg, #f59e0b, #d97706);
+    background: #f59e0b;
     color: #000;
     border-radius: 4px;
     letter-spacing: 0.5px;
@@ -107,7 +107,7 @@
    ============================================================================= */
 
 .intent-section {
-    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
+    background: rgba(99, 102, 241, 0.1);
     border: 1px solid rgba(99, 102, 241, 0.2);
     border-radius: 16px;
     padding: 24px;
@@ -201,7 +201,7 @@
     align-items: center;
     gap: 8px;
     padding: 12px 24px;
-    background: linear-gradient(135deg, #6366f1, #8b5cf6);
+    background: #6366f1;
     border: none;
     border-radius: 8px;
     color: #ffffff;
@@ -698,7 +698,7 @@
 }
 
 .btn-primary {
-    background: linear-gradient(135deg, #22c55e, #16a34a);
+    background: #22c55e;
     border: none;
     color: #ffffff;
 }
@@ -1012,7 +1012,7 @@
 
 .progress-fill {
     height: 100%;
-    background: linear-gradient(90deg, #6366f1, #8b5cf6);
+    background: #6366f1;
     border-radius: 3px;
     transition: width 0.3s ease;
 }

ui/suite/tasks/autotask.html

@@ -35,7 +35,7 @@
             <span class="section-icon">💡</span>
             <h2>What would you like to accomplish?</h2>
         </div>
-        <form class="intent-form" id="intent-form" hx-post="/api/autotask/create" hx-target="#compilation-result" hx-indicator="#compile-spinner">
+        <form class="intent-form" id="intent-form" hx-post="/api/autotask/create" hx-ext="json-enc" hx-target="#compilation-result" hx-indicator="#compile-spinner">
             <div class="intent-input-wrapper">
                 <textarea
                     name="intent"

ui/suite/tasks/intents.html

@@ -57,20 +57,7 @@
                 </svg>
                 <span class="notification-count">3</span>
             </div>
-            <button class="btn-new-intent">
+
-                <svg
-                    width="16"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                >
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                </svg>
-                New Intent
-            </button>
             <button class="icon-button" title="Settings">
                 <svg
                     width="18"

ui/suite/tasks/tasks.css

@@ -9,7 +9,7 @@
 
 .intent-input-section {
     padding: 24px;
-    background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
+    background: var(--surface);
     border-bottom: 1px solid var(--border);
 }
 
@@ -392,7 +392,7 @@
 .topbar-avatar {
     width: 28px;
     height: 28px;
-    background: linear-gradient(135deg, var(--primary), #a5d622);
+    background: var(--primary);
     border-radius: 6px;
     display: flex;
     align-items: center;
@@ -1306,7 +1306,7 @@
 
 .goal-progress-fill {
     height: 100%;
-    background: linear-gradient(90deg, var(--primary), var(--success));
+    background: var(--primary);
     border-radius: 6px;
     transition: width 0.5s ease;
 }

ui/suite/tasks/tasks.html

@@ -19,6 +19,7 @@
                     id="quick-intent-btn"
                     class="btn-create-run"
                     hx-post="/api/autotask/create"
+                    hx-ext="json-enc"
                     hx-include="#quick-intent-input"
                     hx-target="#intent-result"
                     hx-swap="innerHTML"
@@ -45,24 +46,6 @@
                         hx-swap="innerHTML"
                         >Loading...</span
                     ></h1>
-                    <button
-                        class="btn-new-intent"
-                        onclick="showNewIntentModal()"
-                        title="Create new intent"
-                    >
-                        <svg
-                            width="16"
-                            height="16"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                        >
-                            <line x1="12" y1="5" x2="12" y2="19" />
-                            <line x1="5" y1="12" x2="19" y2="12" />
-                        </svg>
-                        New Intent
-                    </button>
                 </div>
 
                 <!-- Status Filter Pills -->
@@ -542,137 +525,6 @@
 ></div>
 
 <!-- New Intent Modal -->
-<div class="modal-overlay" id="newIntentModal">
-    <div class="modal">
-        <div class="modal-header">
-            <h3>Create New Intent</h3>
-            <button class="modal-close" onclick="closeNewIntentModal()">
-                <svg
-                    width="20"
-                    height="20"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                >
-                    <line x1="18" y1="6" x2="6" y2="18" />
-                    <line x1="6" y1="6" x2="18" y2="18" />
-                </svg>
-            </button>
-        </div>
-        <div class="modal-body">
-            <form
-                id="newIntentForm"
-                hx-post="/api/tasks"
-                hx-ext="json-enc"
-                hx-target="#task-list"
-                hx-swap="afterbegin"
-                hx-on::after-request="if(event.detail.successful) { closeNewIntentModal(); htmx.trigger(document.body, 'taskCreated'); }"
-            >
-                <div class="form-group">
-                    <label class="form-label" for="intentTitle"
-                        >Intent (Natural Language)</label
-                    >
-                    <input
-                        type="text"
-                        class="form-input"
-                        id="intentTitle"
-                        name="title"
-                        placeholder="e.g., cria app de agendamento, quando IBM mudar avisa, todo dia 9h resumo..."
-                        required
-                    />
-                    <p class="form-hint">
-                        Describe what you want: create apps, schedule tasks, monitor changes, or set goals.
-                    </p>
-                </div>
-                <div class="form-group">
-                    <label class="form-label" for="intentDescription"
-                        >Additional Details (Optional)</label
-                    >
-                    <textarea
-                        class="form-input"
-                        id="intentDescription"
-                        name="description"
-                        rows="3"
-                        placeholder="Add more context: tables needed, fields, triggers, etc."
-                    ></textarea>
-                </div>
-                <div class="form-row">
-                    <div class="form-group">
-                        <label class="form-label" for="intentDueDate"
-                            >Due Date (Optional)</label
-                        >
-                        <input
-                            type="datetime-local"
-                            class="form-input"
-                            id="intentDueDate"
-                            name="due_date"
-                        />
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label" for="intentPriority"
-                            >Priority</label
-                        >
-                        <select
-                            class="form-input"
-                            id="intentPriority"
-                            name="priority"
-                        >
-                            <option value="normal">Normal</option>
-                            <option value="high">High</option>
-                            <option value="urgent">Urgent</option>
-                        </select>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label class="form-label" for="intentType"
-                        >Intent Type (Auto-detected)</label
-                    >
-                    <select
-                        class="form-input"
-                        id="intentType"
-                        name="intent_type"
-                    >
-                        <option value="auto">Auto-detect</option>
-                        <option value="app">📱 App - Create HTMX app</option>
-                        <option value="table">🗃️ Table - Define new table</option>
-                        <option value="todo">✅ Todo - Simple task</option>
-                        <option value="goal">🎯 Goal - Autonomous goal</option>
-                        <option value="schedule">⏰ Schedule - Recurring task</option>
-                        <option value="monitor">👁️ Monitor - Watch for changes</option>
-                        <option value="tool">🔧 Tool - Voice/chat command</option>
-                        <option value="action">⚡ Action - Execute immediately</option>
-                    </select>
-                </div>
-                <div class="form-info-box">
-                    <strong>🗄️ Bot Database Architecture:</strong>
-                    <ul>
-                        <li>All apps share the same database tables</li>
-                        <li>Tables are defined in <code>.gbdialog/tables.bas</code></li>
-                        <li>Schedulers, tools, and monitors are shared resources</li>
-                        <li>Use <code>FIND x IN table</code> to query data</li>
-                    </ul>
-                </div>
-            </form>
-        </div>
-        <div class="modal-footer">
-            <button
-                class="decision-btn decision-btn-secondary</strong>"
-                onclick="closeNewIntentModal()"
-            >
-                Cancel
-            </button>
-            <button
-                class="decision-btn decision-btn-primary"
-                type="submit"
-                form="newIntentForm"
-            >
-                Create Intent
-            </button>
-        </div>
-    </div>
-</div>
-
 <!-- Edit Tables Modal -->
 <div class="modal-overlay" id="editTablesModal">
     <div class="modal modal-large">
@@ -731,17 +583,6 @@
     }
 </script>
 <script>
-    // New Intent Modal functions
-    function showNewIntentModal() {
-        document.getElementById("newIntentModal").classList.add("show");
-        document.getElementById("intentTitle").focus();
-    }
-
-    function closeNewIntentModal() {
-        document.getElementById("newIntentModal").classList.remove("show");
-        document.getElementById("newIntentForm").reset();
-    }
-
     // Edit Tables Modal functions
     function showEditTablesModal() {
         document.getElementById("editTablesModal").classList.add("show");