diff --git a/ui/suite/partials/vibe.html b/ui/suite/partials/vibe.html
index a78d3a8..e55d450 100644
--- a/ui/suite/partials/vibe.html
+++ b/ui/suite/partials/vibe.html
@@ -18,23 +18,15 @@
     <!-- Main Content: Canvas + Sidebar -->
     <div class="vibe-body">
         <!-- Agents & Workspaces Sidebar (Fixed to left as in image) -->
-        <aside
-            class="agents-sidebar"
-            id="agentsSidebar"
-            style="background: var(--surface)"
-        >
-            <div
-                class="as-logo-section"
-                style="
+        <aside class="agents-sidebar" id="agentsSidebar" style="background: var(--surface)">
+            <div class="as-logo-section" style="
                     padding: 16px;
                     border-bottom: 1px solid var(--border);
                     display: flex;
                     align-items: center;
                     justify-content: space-between;
-                "
-            >
-                <h2
-                    style="
+                ">
+                <h2 style="
                         margin: 0;
                         font-size: 15px;
                         color: var(--text);
@@ -42,21 +34,16 @@
                         display: flex;
                         align-items: center;
                         gap: 8px;
-                    "
-                >
-                    <span style="font-size: 18px; color: var(--accent)"
-                        >🌱</span
-                    >
+                    ">
+                    <span style="font-size: 18px; color: var(--accent)">🌱</span>
                     mantis farm
                 </h2>
-                <div
-                    style="
+                <div style="
                         display: flex;
                         gap: 12px;
                         color: var(--text-muted);
                         font-size: 14px;
-                    "
-                >
+                    ">
                     <span style="cursor: pointer" title="Home">⌂</span>
                     <span style="cursor: pointer" title="Overview">◱</span>
                 </div>
@@ -65,30 +52,18 @@
             <div class="as-section">
                 <div class="as-section-header">
                     <h3>Agents</h3>
-                    <button
-                        class="as-collapse-btn"
-                        id="agentsSidebarCollapse"
-                        type="button"
-                    >
+                    <button class="as-collapse-btn" id="agentsSidebarCollapse" type="button">
                         ◀
                     </button>
                 </div>
 
                 <div class="as-agent-list" id="asAgentList">
                     <!-- Mantis #1 EVOLVED -->
-                    <div
-                        class="as-agent-card"
-                        data-agent-id="1"
-                        style="border-left: 3px solid var(--accent)"
-                    >
+                    <div class="as-agent-card" data-agent-id="1" style="border-left: 3px solid var(--accent)">
                         <div class="as-agent-header">
                             <span class="as-status-dot green"></span>
                             <span class="as-agent-name">Mantis #1</span>
-                            <span
-                                class="as-drag-handle"
-                                style="margin-left: auto"
-                                >⋮</span
-                            >
+                            <span class="as-drag-handle" style="margin-left: auto">⋮</span>
                         </div>
                         <div class="as-agent-body">
                             <span class="as-agent-icons">👀 ⚙️ ⚡</span>
@@ -101,11 +76,7 @@
                         <div class="as-agent-header">
                             <span class="as-status-dot yellow"></span>
                             <span class="as-agent-name">Mantis #2</span>
-                            <span
-                                class="as-drag-handle"
-                                style="margin-left: auto"
-                                >⋮</span
-                            >
+                            <span class="as-drag-handle" style="margin-left: auto">⋮</span>
                         </div>
                         <div class="as-agent-body">
                             <span class="as-agent-icons">🥚</span>
@@ -114,69 +85,35 @@
                     </div>
 
                     <!-- Mantis #3 & #4 WILD -->
-                    <div
-                        class="as-agent-card"
-                        style="opacity: 0.6"
-                        data-agent-id="3"
-                    >
+                    <div class="as-agent-card" style="opacity: 0.6" data-agent-id="3">
                         <div class="as-agent-header">
                             <span class="as-status-dot gray"></span>
                             <span class="as-agent-name">Mantis #3</span>
-                            <span
-                                class="as-drag-handle"
-                                style="margin-left: auto"
-                                >⋮</span
-                            >
+                            <span class="as-drag-handle" style="margin-left: auto">⋮</span>
                         </div>
                         <div class="as-agent-body">
-                            <span
-                                class="as-agent-icons"
-                                style="filter: grayscale(1)"
-                                >🥚</span
-                            >
-                            <span
-                                class="as-badge badge-wild"
-                                style="background: var(--surface-active, #ccc)"
-                                >WILD</span
-                            >
+                            <span class="as-agent-icons" style="filter: grayscale(1)">🥚</span>
+                            <span class="as-badge badge-wild"
+                                style="background: var(--surface-active, #ccc)">WILD</span>
                         </div>
                     </div>
-                    <div
-                        class="as-agent-card"
-                        style="opacity: 0.6"
-                        data-agent-id="4"
-                    >
+                    <div class="as-agent-card" style="opacity: 0.6" data-agent-id="4">
                         <div class="as-agent-header">
                             <span class="as-status-dot gray"></span>
                             <span class="as-agent-name">Mantis #4</span>
-                            <span
-                                class="as-drag-handle"
-                                style="margin-left: auto"
-                                >⋮</span
-                            >
+                            <span class="as-drag-handle" style="margin-left: auto">⋮</span>
                         </div>
                         <div class="as-agent-body">
-                            <span
-                                class="as-agent-icons"
-                                style="filter: grayscale(1)"
-                                >🥚</span
-                            >
-                            <span
-                                class="as-badge badge-wild"
-                                style="background: var(--surface-active, #ccc)"
-                                >WILD</span
-                            >
+                            <span class="as-agent-icons" style="filter: grayscale(1)">🥚</span>
+                            <span class="as-badge badge-wild"
+                                style="background: var(--surface-active, #ccc)">WILD</span>
                         </div>
                     </div>
                 </div>
 
                 <div style="padding: 0 8px">
-                    <button
-                        class="as-create-btn"
-                        id="createAgentBtn"
-                        type="button"
-                        style="width: calc(100% - 16px); margin: 8px"
-                    >
+                    <button class="as-create-btn" id="createAgentBtn" type="button"
+                        style="width: calc(100% - 16px); margin: 8px">
                         + Create a New Mantis
                     </button>
                 </div>
@@ -189,24 +126,17 @@
 
                 <div class="as-workspace-list" id="asWorkspaceList">
                     <div class="as-workspace-item">
-                        <button
-                            class="as-workspace-toggle"
-                            type="button"
-                            style="
+                        <button class="as-workspace-toggle" type="button" style="
                                 background: var(--bg);
                                 border-left: 3px solid var(--accent);
-                            "
-                        >
+                            ">
                             <span class="as-workspace-arrow">▼</span>
                             <span>E-Commerce App Development</span>
                         </button>
                         <div class="as-workspace-body" style="display: block">
                             <div class="as-workspace-agent">Mantis #1</div>
                             <div class="as-workspace-agent">Mantis #4</div>
-                            <div
-                                class="as-workspace-dropzone"
-                                data-workspace="ecommerce"
-                            >
+                            <div class="as-workspace-dropzone" data-workspace="ecommerce">
                                 Drag a Mantis to Include
                             </div>
                         </div>
@@ -219,10 +149,7 @@
                         </button>
                         <div class="as-workspace-body" style="display: none">
                             <div class="as-workspace-agent">Mantis #4</div>
-                            <div
-                                class="as-workspace-dropzone"
-                                data-workspace="accountability"
-                            >
+                            <div class="as-workspace-dropzone" data-workspace="accountability">
                                 Drag a Mantis to Include
                             </div>
                         </div>
@@ -230,12 +157,8 @@
                 </div>
 
                 <div style="padding: 0 8px">
-                    <button
-                        class="as-create-btn"
-                        id="createWorkspaceBtn"
-                        type="button"
-                        style="width: calc(100% - 16px); margin: 8px"
-                    >
+                    <button class="as-create-btn" id="createWorkspaceBtn" type="button"
+                        style="width: calc(100% - 16px); margin: 8px">
                         + Create a New Project
                     </button>
                 </div>
@@ -243,10 +166,7 @@
         </aside>
 
         <!-- Canvas Area -->
-        <div
-            class="vibe-canvas"
-            id="vibeCanvas"
-            style="
+        <div class="vibe-canvas" id="vibeCanvas" style="
                 background: var(--bg, #fdfdfd);
                 background-image: radial-gradient(
                     var(--border) 1px,
@@ -254,76 +174,59 @@
                 );
                 background-size: 20px 20px;
                 position: relative;
-            "
-        >
-            <div
-                style="
+            ">
+            <div style="
                     padding: 16px 24px;
                     font-size: 11px;
                     color: var(--text-muted);
                     font-weight: 600;
                     letter-spacing: 0.5px;
                     border-bottom: 1px solid var(--border);
-                    background: rgba(255, 255, 255, 0.8);
+                    background: var(--surface);
+                    opacity: 0.95;
                     backdrop-filter: blur(4px);
-                "
-            >
+                ">
                 // DASHBOARD
-                <span style="color: var(--text-secondary); margin: 0 6px"
-                    >&gt;</span
-                >
+                <span style="color: var(--text-secondary); margin: 0 6px">&gt;</span>
                 // E-COMMERCE APP DEVELOPMENT
                 <div style="float: right">
-                    <button
-                        style="
+                    <button style="
                             border: 1px solid var(--border);
                             background: var(--bg);
                             border-radius: 4px;
                             padding: 2px 8px;
                             cursor: pointer;
-                        "
-                    >
+                        ">
                         -
                     </button>
-                    <span
-                        style="
+                    <span style="
                             font-size: 11px;
                             margin: 0 8px;
                             color: var(--text);
-                        "
-                        >100%</span
-                    >
-                    <button
-                        style="
+                        ">100%</span>
+                    <button style="
                             border: 1px solid var(--border);
                             background: var(--bg);
                             border-radius: 4px;
                             padding: 2px 8px;
                             cursor: pointer;
-                        "
-                    >
+                        ">
                         +
                     </button>
                 </div>
             </div>
 
             <!-- Steps Nodes (populated dynamically from chat/API) -->
-            <div
-                class="vibe-steps"
-                id="vibeSteps"
-                style="
+            <div class="vibe-steps" id="vibeSteps" style="
                     padding: 40px;
                     display: none;
                     gap: 60px;
                     align-items: flex-start;
                     overflow-x: auto;
-                "
-            ></div>
+                "></div>
 
             <!-- Empty state -->
-            <div
-                id="vibeCanvasEmpty"
-                style="
+            <div id="vibeCanvasEmpty" style="
                     flex: 1;
                     display: flex;
                     flex-direction: column;
@@ -332,52 +235,41 @@
                     gap: 16px;
                     padding: 60px;
                     text-align: center;
-                "
-            >
-                <div
-                    style="
+                ">
+                <div style="
                         font-size: 56px;
                         animation: float 3s ease-in-out infinite;
-                    "
-                >
+                    ">
                     🌱
                 </div>
-                <h3
-                    style="
+                <h3 style="
                         margin: 0;
                         font-size: 22px;
                         font-weight: 800;
                         color: var(--text);
                         font-family: &quot;Fira Code&quot;, monospace;
-                    "
-                >
+                    ">
                     Vibe — App Builder
                 </h3>
-                <p
-                    style="
+                <p style="
                         margin: 0;
                         font-size: 14px;
                         color: var(--text-muted);
                         max-width: 440px;
                         line-height: 1.6;
-                    "
-                >
+                    ">
                     Describe what you want to build in the chat. Mantis #1 will
                     analyze your request, generate task nodes on this canvas,
                     and build the entire application for you.
                 </p>
-                <div
-                    style="
+                <div style="
                         display: flex;
                         gap: 10px;
                         flex-wrap: wrap;
                         justify-content: center;
                         margin-top: 12px;
-                    "
-                >
-                    <button
-                        class="vibe-quick-btn"
-                        type="button"
+                    ">
+                    <button class="vibe-quick-btn" type="button"
                         onclick="document.getElementById('vibeChatInput').value='Create an e-commerce app for selling handmade crafts with shopping cart and payments'; document.getElementById('vibeChatInput').focus();"
                         style="
                             padding: 8px 16px;
@@ -389,13 +281,10 @@
                             color: var(--text-muted);
                             transition: all 0.15s;
                             font-family: &quot;Fira Code&quot;, monospace;
-                        "
-                    >
+                        ">
                         🛍️ E-Commerce App
                     </button>
-                    <button
-                        class="vibe-quick-btn"
-                        type="button"
+                    <button class="vibe-quick-btn" type="button"
                         onclick="document.getElementById('vibeChatInput').value='Build a CRM system with contacts, leads, and deal pipeline tracking'; document.getElementById('vibeChatInput').focus();"
                         style="
                             padding: 8px 16px;
@@ -407,13 +296,10 @@
                             color: var(--text-muted);
                             transition: all 0.15s;
                             font-family: &quot;Fira Code&quot;, monospace;
-                        "
-                    >
+                        ">
                         📇 CRM System
                     </button>
-                    <button
-                        class="vibe-quick-btn"
-                        type="button"
+                    <button class="vibe-quick-btn" type="button"
                         onclick="document.getElementById('vibeChatInput').value='Create a project management dashboard with tasks, Kanban board, and team assignments'; document.getElementById('vibeChatInput').focus();"
                         style="
                             padding: 8px 16px;
@@ -425,17 +311,14 @@
                             color: var(--text-muted);
                             transition: all 0.15s;
                             font-family: &quot;Fira Code&quot;, monospace;
-                        "
-                    >
+                        ">
                         📊 Project Manager
                     </button>
                 </div>
             </div>
 
             <!-- Vibe Chat Overlay (LIVE) -->
-            <div
-                id="vibeChatOverlay"
-                style="
+            <div id="vibeChatOverlay" style="
                     position: absolute;
                     bottom: 24px;
                     right: 24px;
@@ -447,46 +330,32 @@
                     flex-direction: column;
                     overflow: hidden;
                     border: 1px solid var(--border);
-                    color: var(--bg);
+                    color: var(--text);
                     z-index: 100;
-                "
-            >
-                <div
-                    style="
+                ">
+                <div style="
                         padding: 12px 16px;
                         background: var(--surface-hover);
                         border-bottom: 1px solid var(--border);
                         display: flex;
                         justify-content: space-between;
                         align-items: center;
-                    "
-                >
+                    ">
                     <div style="display: flex; align-items: center; gap: 8px">
-                        <span
-                            class="as-status-dot green"
-                            id="vibeChatStatusDot"
-                            style="box-shadow: 0 0 8px var(--accent)"
-                        ></span>
-                        <span style="font-size: 12px; font-weight: 600"
-                            >Mantis #1</span
-                        >
+                        <span class="as-status-dot green" id="vibeChatStatusDot"
+                            style="box-shadow: 0 0 8px var(--accent)"></span>
+                        <span style="font-size: 12px; font-weight: 600">Mantis #1</span>
                     </div>
-                    <span
-                        id="vibeChatStatusBadge"
-                        style="
+                    <span id="vibeChatStatusBadge" style="
                             font-size: 10px;
                             color: var(--text-muted);
-                            background: #333;
+                            background: var(--surface-hover);
                             padding: 2px 6px;
                             border-radius: 4px;
-                        "
-                        >CONNECTING…</span
-                    >
+                        ">CONNECTING…</span>
                 </div>
 
-                <div
-                    id="vibeChatMessages"
-                    style="
+                <div id="vibeChatMessages" style="
                         padding: 16px;
                         display: flex;
                         flex-direction: column;
@@ -498,11 +367,9 @@
                         overflow-y: auto;
                         font-family:
                             &quot;Segoe UI&quot;, system-ui, sans-serif;
-                    "
-                >
+                    ">
                     <!-- Welcome hint -->
-                    <div
-                        style="
+                    <div style="
                             align-self: center;
                             background: rgba(132, 214, 105, 0.12);
                             color: var(--accent);
@@ -510,60 +377,42 @@
                             border-radius: 8px;
                             font-size: 11px;
                             text-align: center;
-                        "
-                    >
+                        ">
                         💡 TIP: Describe your project. The more detail, the
                         better the plan.
                     </div>
                 </div>
 
-                <div
-                    style="
+                <div style="
                         padding: 12px;
                         border-top: 1px solid var(--border);
                         background: var(--surface);
-                    "
-                >
-                    <form
-                        id="vibeChatForm"
-                        autocomplete="off"
-                        style="
+                    ">
+                    <form id="vibeChatForm" autocomplete="off" style="
                             display: flex;
                             align-items: center;
                             gap: 8px;
                             background: var(--surface-hover);
                             padding: 8px 12px;
                             border-radius: 20px;
-                            border: 1px solid #333;
-                        "
-                    >
-                        <span
-                            style="
+                            border: 1px solid var(--border);
+                        ">
+                        <span style="
                                 color: var(--text-muted);
                                 cursor: pointer;
                                 transform: rotate(-45deg);
-                            "
-                            >📎</span
-                        >
-                        <input
-                            type="text"
-                            id="vibeChatInput"
-                            placeholder="Describe your project…"
-                            style="
+                            ">📎</span>
+                        <input type="text" id="vibeChatInput" placeholder="Describe your project…" style="
                                 flex: 1;
                                 background: transparent;
                                 border: none;
-                                color: var(--bg);
+                                color: var(--text);
                                 font-size: 13px;
                                 outline: none;
                                 font-family:
                                     &quot;Segoe UI&quot;, system-ui, sans-serif;
-                            "
-                        />
-                        <button
-                            type="submit"
-                            id="vibeChatSend"
-                            style="
+                            " />
+                        <button type="submit" id="vibeChatSend" style="
                                 background: var(--accent);
                                 color: var(--surface);
                                 width: 24px;
@@ -576,8 +425,7 @@
                                 font-size: 14px;
                                 font-weight: bold;
                                 border: none;
-                            "
-                        >
+                            ">
                             ↑
                         </button>
                     </form>
@@ -588,30 +436,15 @@
             <div class="vibe-preview" id="vibePreview" style="display: none">
                 <div class="vibe-preview-header">
                     <span>// PREVIEW</span>
-                    <input
-                        type="text"
-                        class="vibe-preview-url"
-                        id="vibePreviewUrl"
-                        value=""
-                        readonly
-                    />
+                    <input type="text" class="vibe-preview-url" id="vibePreviewUrl" value="" readonly />
                 </div>
                 <div class="vibe-preview-content" id="vibePreviewContent"></div>
             </div>
 
             <!-- Deployment Panel (hidden by default) -->
-            <div
-                class="vibe-deployment-modal"
-                id="vibeDeploymentModal"
-                style="display: none"
-            >
-                <div
-                    class="vibe-deployment-overlay"
-                    onclick="closeDeploymentModal()"
-                ></div>
-                <div
-                    class="vibe-deployment-panel"
-                    style="
+            <div class="vibe-deployment-modal" id="vibeDeploymentModal" style="display: none">
+                <div class="vibe-deployment-overlay" onclick="closeDeploymentModal()"></div>
+                <div class="vibe-deployment-panel" style="
                         position: absolute;
                         top: 50%;
                         left: 50%;
@@ -625,98 +458,76 @@
                         overflow-y: auto;
                         border: 1px solid var(--border);
                         z-index: 1000;
-                    "
-                >
-                    <div
-                        style="
+                    ">
+                    <div style="
                             padding: 24px;
                             border-bottom: 1px solid var(--border);
-                        "
-                    >
-                        <h2
-                            style="
+                        ">
+                        <h2 style="
                                 margin: 0;
                                 font-size: 20px;
                                 color: var(--text);
                                 display: flex;
                                 align-items: center;
                                 gap: 12px;
-                            "
-                        >
+                            ">
                             <span style="font-size: 24px">🚀</span>
                             Deploy Your App
                         </h2>
-                        <p
-                            style="
+                        <p style="
                                 margin: 8px 0 0;
                                 font-size: 14px;
                                 color: var(--text-muted);
-                            "
-                        >
+                            ">
                             Choose where to deploy your application
                         </p>
                     </div>
 
                     <div style="padding: 24px">
                         <!-- Deployment Options -->
-                        <div
-                            style="
+                        <div style="
                                 display: grid;
                                 grid-template-columns: 1fr 1fr;
                                 gap: 16px;
                                 margin-bottom: 24px;
-                            "
-                        >
+                            ">
                             <!-- Internal Deployment -->
-                            <div
-                                class="deployment-option"
-                                id="deploymentInternal"
-                                onclick="selectDeploymentTarget('internal')"
-                                style="
+                            <div class="deployment-option" id="deploymentInternal"
+                                onclick="selectDeploymentTarget('internal')" style="
                                     padding: 20px;
                                     border: 2px solid var(--border);
                                     border-radius: 12px;
                                     cursor: pointer;
                                     transition: all 0.2s;
-                                "
-                            >
-                                <div
-                                    style="
+                                ">
+                                <div style="
                                         display: flex;
                                         align-items: center;
                                         gap: 12px;
                                         margin-bottom: 12px;
-                                    "
-                                >
+                                    ">
                                     <span style="font-size: 32px">📱</span>
                                     <div>
-                                        <h3
-                                            style="
+                                        <h3 style="
                                                 margin: 0;
                                                 font-size: 16px;
                                                 color: var(--text);
-                                            "
-                                        >
+                                            ">
                                             GB Platform
                                         </h3>
-                                        <span
-                                            style="
+                                        <span style="
                                                 font-size: 12px;
                                                 color: var(--text-muted);
-                                            "
-                                            >Internal</span
-                                        >
+                                            ">Internal</span>
                                     </div>
                                 </div>
-                                <ul
-                                    style="
+                                <ul style="
                                         margin: 0;
                                         padding-left: 20px;
                                         font-size: 13px;
                                         color: var(--text-muted);
                                         line-height: 1.6;
-                                    "
-                                >
+                                    ">
                                     <li>Serve from /apps/{name}</li>
                                     <li>Use GB API endpoints</li>
                                     <li>Fast iteration cycles</li>
@@ -725,55 +536,42 @@
                             </div>
 
                             <!-- External Deployment -->
-                            <div
-                                class="deployment-option"
-                                id="deploymentExternal"
-                                onclick="selectDeploymentTarget('external')"
-                                style="
+                            <div class="deployment-option" id="deploymentExternal"
+                                onclick="selectDeploymentTarget('external')" style="
                                     padding: 20px;
                                     border: 2px solid var(--border);
                                     border-radius: 12px;
                                     cursor: pointer;
                                     transition: all 0.2s;
-                                "
-                            >
-                                <div
-                                    style="
+                                ">
+                                <div style="
                                         display: flex;
                                         align-items: center;
                                         gap: 12px;
                                         margin-bottom: 12px;
-                                    "
-                                >
+                                    ">
                                     <span style="font-size: 32px">🌐</span>
                                     <div>
-                                        <h3
-                                            style="
+                                        <h3 style="
                                                 margin: 0;
                                                 font-size: 16px;
                                                 color: var(--text);
-                                            "
-                                        >
+                                            ">
                                             Forgejo ALM
                                         </h3>
-                                        <span
-                                            style="
+                                        <span style="
                                                 font-size: 12px;
                                                 color: var(--text-muted);
-                                            "
-                                            >External</span
-                                        >
+                                            ">External</span>
                                     </div>
                                 </div>
-                                <ul
-                                    style="
+                                <ul style="
                                         margin: 0;
                                         padding-left: 20px;
                                         font-size: 13px;
                                         color: var(--text-muted);
                                         line-height: 1.6;
-                                    "
-                                >
+                                    ">
                                     <li>Push to Git repository</li>
                                     <li>CI/CD pipeline automation</li>
                                     <li>Custom domain support</li>
@@ -783,35 +581,23 @@
                         </div>
 
                         <!-- Internal Configuration (shown by default) -->
-                        <div
-                            id="deploymentInternalConfig"
-                            style="margin-bottom: 24px"
-                        >
-                            <h3
-                                style="
+                        <div id="deploymentInternalConfig" style="margin-bottom: 24px">
+                            <h3 style="
                                     margin: 0 0 16px;
                                     font-size: 14px;
                                     color: var(--text);
-                                "
-                            >
+                                ">
                                 Internal Deployment Settings
                             </h3>
                             <form id="internalDeployForm">
                                 <div style="margin-bottom: 16px">
-                                    <label
-                                        style="
+                                    <label style="
                                             display: block;
                                             margin-bottom: 8px;
                                             font-size: 13px;
                                             color: var(--text-muted);
-                                        "
-                                        >App Route</label
-                                    >
-                                    <input
-                                        type="text"
-                                        id="deployRoute"
-                                        placeholder="my-app"
-                                        style="
+                                        ">App Route</label>
+                                    <input type="text" id="deployRoute" placeholder="my-app" style="
                                             width: 100%;
                                             padding: 10px 12px;
                                             border: 1px solid var(--border);
@@ -819,39 +605,26 @@
                                             background: var(--bg);
                                             color: var(--text);
                                             font-size: 14px;
-                                        "
-                                    />
-                                    <span
-                                        style="
+                                        " />
+                                    <span style="
                                             font-size: 12px;
                                             color: var(--text-muted);
                                             margin-top: 4px;
                                             display: block;
-                                        "
-                                    >
-                                        App will be available at: /apps/<span
-                                            id="deployRoutePreview"
-                                            >my-app</span
-                                        >/
+                                        ">
+                                        App will be available at: /apps/<span id="deployRoutePreview">my-app</span>/
                                     </span>
                                 </div>
                                 <div style="margin-bottom: 16px">
-                                    <label
-                                        style="
+                                    <label style="
                                             display: flex;
                                             align-items: center;
                                             gap: 8px;
                                             font-size: 13px;
                                             color: var(--text);
                                             cursor: pointer;
-                                        "
-                                    >
-                                        <input
-                                            type="checkbox"
-                                            id="deploySharedResources"
-                                            checked
-                                            style="margin: 0"
-                                        />
+                                        ">
+                                        <input type="checkbox" id="deploySharedResources" checked style="margin: 0" />
                                         Use shared platform resources (database,
                                         cache, storage)
                                     </label>
@@ -860,35 +633,23 @@
                         </div>
 
                         <!-- External Configuration (hidden by default) -->
-                        <div
-                            id="deploymentExternalConfig"
-                            style="display: none; margin-bottom: 24px"
-                        >
-                            <h3
-                                style="
+                        <div id="deploymentExternalConfig" style="display: none; margin-bottom: 24px">
+                            <h3 style="
                                     margin: 0 0 16px;
                                     font-size: 14px;
                                     color: var(--text);
-                                "
-                            >
+                                ">
                                 Forgejo Repository Settings
                             </h3>
                             <form id="externalDeployForm">
                                 <div style="margin-bottom: 16px">
-                                    <label
-                                        style="
+                                    <label style="
                                             display: block;
                                             margin-bottom: 8px;
                                             font-size: 13px;
                                             color: var(--text-muted);
-                                        "
-                                        >Repository Name</label
-                                    >
-                                    <input
-                                        type="text"
-                                        id="deployRepoName"
-                                        placeholder="my-app"
-                                        style="
+                                        ">Repository Name</label>
+                                    <input type="text" id="deployRepoName" placeholder="my-app" style="
                                             width: 100%;
                                             padding: 10px 12px;
                                             border: 1px solid var(--border);
@@ -896,24 +657,16 @@
                                             background: var(--bg);
                                             color: var(--text);
                                             font-size: 14px;
-                                        "
-                                    />
+                                        " />
                                 </div>
                                 <div style="margin-bottom: 16px">
-                                    <label
-                                        style="
+                                    <label style="
                                             display: block;
                                             margin-bottom: 8px;
                                             font-size: 13px;
                                             color: var(--text-muted);
-                                        "
-                                        >Custom Domain (optional)</label
-                                    >
-                                    <input
-                                        type="text"
-                                        id="deployCustomDomain"
-                                        placeholder="myapp.example.com"
-                                        style="
+                                        ">Custom Domain (optional)</label>
+                                    <input type="text" id="deployCustomDomain" placeholder="myapp.example.com" style="
                                             width: 100%;
                                             padding: 10px 12px;
                                             border: 1px solid var(--border);
@@ -921,43 +674,30 @@
                                             background: var(--bg);
                                             color: var(--text);
                                             font-size: 14px;
-                                        "
-                                    />
+                                        " />
                                 </div>
                                 <div style="margin-bottom: 16px">
-                                    <label
-                                        style="
+                                    <label style="
                                             display: flex;
                                             align-items: center;
                                             gap: 8px;
                                             font-size: 13px;
                                             color: var(--text);
                                             cursor: pointer;
-                                        "
-                                    >
-                                        <input
-                                            type="checkbox"
-                                            id="deployCiCd"
-                                            checked
-                                            style="margin: 0"
-                                        />
+                                        ">
+                                        <input type="checkbox" id="deployCiCd" checked style="margin: 0" />
                                         Enable CI/CD pipeline (automatic builds
                                         and deployments)
                                     </label>
                                 </div>
                                 <div style="margin-bottom: 16px">
-                                    <label
-                                        style="
+                                    <label style="
                                             display: block;
                                             margin-bottom: 8px;
                                             font-size: 13px;
                                             color: var(--text-muted);
-                                        "
-                                        >App Type</label
-                                    >
-                                    <select
-                                        id="deployAppType"
-                                        style="
+                                        ">App Type</label>
+                                    <select id="deployAppType" style="
                                             width: 100%;
                                             padding: 10px 12px;
                                             border: 1px solid var(--border);
@@ -965,8 +705,7 @@
                                             background: var(--bg);
                                             color: var(--text);
                                             font-size: 14px;
-                                        "
-                                    >
+                                        ">
                                         <option value="htmx">
                                             HTMX App (Server-side rendering)
                                         </option>
@@ -982,17 +721,12 @@
                         </div>
 
                         <!-- Action Buttons -->
-                        <div
-                            style="
+                        <div style="
                                 display: flex;
                                 gap: 12px;
                                 justify-content: flex-end;
-                            "
-                        >
-                            <button
-                                type="button"
-                                onclick="closeDeploymentModal()"
-                                style="
+                            ">
+                            <button type="button" onclick="closeDeploymentModal()" style="
                                     padding: 10px 20px;
                                     border: 1px solid var(--border);
                                     border-radius: 8px;
@@ -1000,15 +734,10 @@
                                     color: var(--text);
                                     font-size: 14px;
                                     cursor: pointer;
-                                "
-                            >
+                                ">
                                 Cancel
                             </button>
-                            <button
-                                type="button"
-                                id="deployButton"
-                                onclick="executeDeployment()"
-                                style="
+                            <button type="button" id="deployButton" onclick="executeDeployment()" style="
                                     padding: 10px 20px;
                                     border: none;
                                     border-radius: 8px;
@@ -1017,8 +746,7 @@
                                     font-size: 14px;
                                     font-weight: 600;
                                     cursor: pointer;
-                                "
-                            >
+                                ">
                                 Deploy Now
                             </button>
                         </div>
@@ -1067,7 +795,7 @@
                 div.innerHTML = text;
             } else {
                 div.style.cssText =
-                    "align-self:flex-start;background: var(--border);color:#ececec;padding:10px 14px;border-radius:12px 12px 12px 0;max-width:85%;word-wrap:break-word;";
+                    "align-self:flex-start;background:var(--surface-hover);color:var(--text);padding:10px 14px;border-radius:12px 12px 12px 0;max-width:85%;word-wrap:break-word;";
                 div.className = "vibe-bot-msg";
                 if (typeof marked !== "undefined" && marked.parse) {
                     div.innerHTML = marked.parse(text);
@@ -1137,7 +865,7 @@
                 }
                 if (badge) {
                     badge.textContent = "CONNECTING…";
-                    badge.style.background = "#333";
+                    badge.style.background = "var(--surface-hover)";
                     badge.style.color = "var(--text-muted)";
                 }
             } else {
@@ -1147,7 +875,7 @@
                 }
                 if (badge) {
                     badge.textContent = "OFFLINE";
-                    badge.style.background = "#333";
+                    badge.style.background = "var(--surface-hover)";
                     badge.style.color = "var(--text-muted)";
                 }
             }
@@ -1211,14 +939,14 @@
                 status === "Done"
                     ? "var(--accent)"
                     : status === "Planning"
-                      ? "var(--success-light, #eef8eb)"
-                      : "var(--warning-light, var(--bg)3cd)";
+                        ? "var(--success-light, #eef8eb)"
+                        : "var(--warning-light, var(--bg)3cd)";
             var statusColor =
                 status === "Done"
                     ? "var(--bg)"
                     : status === "Planning"
-                      ? "var(--accent)"
-                      : "var(--warning, #856404)";
+                        ? "var(--accent)"
+                        : "var(--warning, #856404)";
 
             var subTasksHtml = "";
             if (fileList.length > 0) {
@@ -1370,7 +1098,7 @@
                                     addTaskNode(
                                         res.name || res.resource_type,
                                         res.resource_type +
-                                            (res.path ? " → " + res.path : ""),
+                                        (res.path ? " → " + res.path : ""),
                                         { status: "Done" },
                                     );
                                 }, i * 400);
@@ -1392,10 +1120,10 @@
                             vibeAddMsg(
                                 "system",
                                 '✅ App available at <a href="' +
-                                    r.app_url +
-                                    '" target="_blank" style="color: var(--accent);text-decoration:underline;">' +
-                                    esc(r.app_url) +
-                                    "</a>",
+                                r.app_url +
+                                '" target="_blank" style="color: var(--accent);text-decoration:underline;">' +
+                                esc(r.app_url) +
+                                "</a>",
                             );
 
                             var preview =
@@ -1417,20 +1145,20 @@
                             vibeAddMsg(
                                 "bot",
                                 "**Next steps:**\n" +
-                                    r.next_steps
-                                        .map(function (s) {
-                                            return "• " + s;
-                                        })
-                                        .join("\n"),
+                                r.next_steps
+                                    .map(function (s) {
+                                        return "• " + s;
+                                    })
+                                    .join("\n"),
                             );
                         }
                     } else {
                         vibeAddMsg(
                             "bot",
                             "I classified your intent as **" +
-                                (data.intent_type || "UNKNOWN") +
-                                "**. " +
-                                (data.error || "Processing complete."),
+                            (data.intent_type || "UNKNOWN") +
+                            "**. " +
+                            (data.error || "Processing complete."),
                         );
                         addTaskNode("Analysis", intent, { status: "Planning" });
                     }
@@ -1452,7 +1180,7 @@
                             addTaskNode(
                                 "Database Schema",
                                 "Define tables for: " +
-                                    words.slice(0, 3).join(", "),
+                                words.slice(0, 3).join(", "),
                                 { status: "Pending" },
                             );
                         }, 500);
@@ -1460,8 +1188,8 @@
                     vibeAddMsg(
                         "bot",
                         "I've created a preliminary plan with " +
-                            Math.min(words.length + 1, 5) +
-                            " nodes. Once the backend is available, I'll process the full build.",
+                        Math.min(words.length + 1, 5) +
+                        " nodes. Once the backend is available, I'll process the full build.",
                     );
                 });
         }
@@ -1598,7 +1326,7 @@
             if (taskProgressWs) {
                 try {
                     taskProgressWs.close();
-                } catch (ignore) {}
+                } catch (ignore) { }
             }
             taskProgressWs = new WebSocket(url);
 
@@ -1618,9 +1346,9 @@
                         vibeAddMsg(
                             "system",
                             "💭 " +
-                                agentLabel +
-                                ": " +
-                                esc(data.text || data.message || ""),
+                            agentLabel +
+                            ": " +
+                            esc(data.text || data.message || ""),
                         );
                         return;
                     }
@@ -1641,7 +1369,7 @@
                                     info.detail,
                                 );
                             }
-                        } catch (ignore) {}
+                        } catch (ignore) { }
                         return;
                     }
 
@@ -1712,8 +1440,8 @@
                             });
                             var activeTab = document.querySelector(
                                 '.vibe-pipeline-tab[data-stage="' +
-                                    tabStage +
-                                    '"]',
+                                tabStage +
+                                '"]',
                             );
                             if (activeTab) activeTab.classList.add("active");
                         }
@@ -1740,8 +1468,8 @@
                 }
             };
 
-            taskProgressWs.onerror = function () {};
-            taskProgressWs.onclose = function () {};
+            taskProgressWs.onerror = function () { };
+            taskProgressWs.onclose = function () { };
         }
 
         function updateAgentCard(agentId, status, detail) {
@@ -1831,17 +1559,9 @@
 
             vibeAddMsg("user", text);
 
-            // Decide: if the text looks like a "build" request → call autotask API
-            // Otherwise → send via WS for regular chat
-            var buildKeywords =
-                /\b(create|build|make|develop|generate|design|scaffold|i want|i need|app for|website for|system for|platform for|dashboard for)\b/i;
-            if (buildKeywords.test(text)) {
-                callAutotask(text);
-                // Also send via WS so the bot knows
-                vibeSendWs(text);
-            } else {
-                vibeSendWs(text);
-            }
+            // Vibe is an App Builder — always route through the autotask pipeline.
+            // The backend LLM classifier determines the intent type in any language.
+            callAutotask(text);
         }
 
         /* ── init ── */
@@ -2054,6 +1774,7 @@
     }
 
     @keyframes float {
+
         0%,
         100% {
             transform: translateY(0);
@@ -2070,4 +1791,4 @@
         background: rgba(132, 214, 105, 0.06) !important;
         transform: translateY(-2px);
     }
-</style>
+</style>
\ No newline at end of file