npm - @symerian/symi - Versions diffs - 2.2.8 → 2.3.1 - Mend

@symerian/symi 2.2.8 → 2.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (361) hide show

package/dist/control-ui/index.html CHANGED Viewed

@@ -1,740 +1,1000 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Symi</title>
-  <link rel="stylesheet" href="css/style.css" />
-  <link rel="stylesheet" href="/vendor/highlight.css" />
-</head>
-<body>
-  <!-- Animated background -->
-  <div class="bg-orbs">
-    <div class="orb orb-1"></div>
-    <div class="orb orb-2"></div>
-    <div class="orb orb-3"></div>
-  </div>
-  <div class="bg-grid"></div>
-  <!-- Metrics — Left column -->
-  <aside class="metrics-col metrics-left">
-    <!-- Brand Panel -->
-    <div class="glass-panel brand-panel">
-      <div class="brand-mark">◈</div>
-      <div class="brand-text">
-        <div class="brand-name">SYMI</div>
-        <div class="brand-sub">AI Assistant</div>
-      </div>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Symi</title>
+    <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="/vendor/highlight.css" />
+  </head>
+  <body>
+    <!-- Animated background -->
+    <div class="bg-orbs">
+      <div class="orb orb-1"></div>
+      <div class="orb orb-2"></div>
+      <div class="orb orb-3"></div>
     </div>
-    <!-- Agent Status Panel — position #1 -->
-    <div class="glass-panel agent-status-panel" id="agent-status-panel" data-state="idle">
-      <div class="panel-label">AGENT STATUS</div>
-      <div class="aso-orb-wrap">
-        <svg class="aso-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-          <!-- Orbit guide tracks -->
-          <circle class="aso-track" cx="50" cy="50" r="43"/>
-          <circle class="aso-track" cx="50" cy="50" r="31"/>
-          <circle class="aso-track" cx="50" cy="50" r="19"/>
-          <!-- Rotating arc groups -->
-          <g class="aso-rot aso-rot1">
-            <circle class="aso-arc" cx="50" cy="50" r="43" stroke-dasharray="55 215"/>
-          </g>
-          <g class="aso-rot aso-rot2">
-            <circle class="aso-arc aso-arc-dim" cx="50" cy="50" r="43" stroke-dasharray="22 248"/>
-          </g>
-          <g class="aso-rot aso-rot3">
-            <circle class="aso-arc" cx="50" cy="50" r="31" stroke-dasharray="40 155"/>
-          </g>
-          <g class="aso-rot aso-rot4">
-            <circle class="aso-arc aso-arc-dim" cx="50" cy="50" r="31" stroke-dasharray="15 180"/>
-          </g>
-          <g class="aso-rot aso-rot5">
-            <circle class="aso-arc" cx="50" cy="50" r="19" stroke-dasharray="20 99"/>
-          </g>
-          <!-- Core glow halo -->
-          <circle class="aso-core-halo" cx="50" cy="50" r="10"/>
-          <!-- Core dot -->
-          <circle class="aso-core" cx="50" cy="50" r="5.5"/>
-        </svg>
-      </div>
-      <div class="aso-label" id="aso-label">STANDBY</div>
-      <div class="aso-sub"   id="aso-sub">Awaiting your prompt</div>
-      <div class="aso-working" id="aso-working">
-        <span class="aso-working-asterisk">✳</span>
-        <span class="aso-working-text">Working</span>
+    <div class="bg-grid"></div>
+    <!-- Metrics — Left column -->
+    <aside class="metrics-col metrics-left">
+      <!-- Brand Panel -->
+      <div class="glass-panel brand-panel">
+        <div class="brand-mark">◈</div>
+        <div class="brand-text">
+          <div class="brand-name">SYMI</div>
+          <div class="brand-sub">AI Assistant</div>
+        </div>
       </div>
-    </div>
-    <!-- Subagents Panel -->
-    <div class="glass-panel subagents-panel" id="subagents-panel">
-      <div class="panel-label">
-        SUBAGENTS
-        <span class="subagents-count" id="subagents-count"></span>
+      <!-- Agent Status Panel — position #1 -->
+      <div class="glass-panel agent-status-panel" id="agent-status-panel" data-state="idle">
+        <div class="panel-label">AGENT STATUS</div>
+        <div class="aso-orb-wrap">
+          <svg class="aso-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+            <!-- Orbit guide tracks -->
+            <circle class="aso-track" cx="50" cy="50" r="43" />
+            <circle class="aso-track" cx="50" cy="50" r="31" />
+            <circle class="aso-track" cx="50" cy="50" r="19" />
+            <!-- Rotating arc groups -->
+            <g class="aso-rot aso-rot1">
+              <circle class="aso-arc" cx="50" cy="50" r="43" stroke-dasharray="55 215" />
+            </g>
+            <g class="aso-rot aso-rot2">
+              <circle
+                class="aso-arc aso-arc-dim"
+                cx="50"
+                cy="50"
+                r="43"
+                stroke-dasharray="22 248"
+              />
+            </g>
+            <g class="aso-rot aso-rot3">
+              <circle class="aso-arc" cx="50" cy="50" r="31" stroke-dasharray="40 155" />
+            </g>
+            <g class="aso-rot aso-rot4">
+              <circle
+                class="aso-arc aso-arc-dim"
+                cx="50"
+                cy="50"
+                r="31"
+                stroke-dasharray="15 180"
+              />
+            </g>
+            <g class="aso-rot aso-rot5">
+              <circle class="aso-arc" cx="50" cy="50" r="19" stroke-dasharray="20 99" />
+            </g>
+            <!-- Core glow halo -->
+            <circle class="aso-core-halo" cx="50" cy="50" r="10" />
+            <!-- Core dot -->
+            <circle class="aso-core" cx="50" cy="50" r="5.5" />
+          </svg>
+        </div>
+        <div class="aso-label" id="aso-label">STANDBY</div>
+        <div class="aso-sub" id="aso-sub">Awaiting your prompt</div>
+        <div class="aso-working" id="aso-working">
+          <span class="aso-working-asterisk">✳</span>
+          <span class="aso-working-text">Working</span>
+        </div>
+        <div class="aso-model-info">
+          <span class="aso-model-label" id="active-model-label"></span>
+          <span class="aso-model-badge" id="model-badge"></span>
+        </div>
       </div>
-      <!-- Quick Deploy Section -->
-      <div class="quick-deploy-section">
-        <div class="quick-deploy-label">QUICK DEPLOY</div>
-        <div class="quick-deploy-grid">
-          <button class="quick-deploy-btn" data-agent="research" title="Research Agent">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
-            </svg>
-            <span>Research</span>
-          </button>
-          <button class="quick-deploy-btn" data-agent="review" title="Code Review Agent">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
-            </svg>
-            <span>Review</span>
-          </button>
-          <button class="quick-deploy-btn" data-agent="writer" title="Writer Agent">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/>
-            </svg>
-            <span>Writer</span>
-          </button>
-          <button class="quick-deploy-btn" data-agent="analyst" title="Analyst Agent">
+      <!-- Subagents Panel -->
+      <div class="glass-panel subagents-panel" id="subagents-panel">
+        <div class="panel-label">
+          SUBAGENTS
+          <span class="subagents-count" id="subagents-count"></span>
+        </div>
+        <!-- Quick Deploy Section -->
+        <div class="quick-deploy-section">
+          <div class="quick-deploy-label">QUICK DEPLOY</div>
+          <div class="quick-deploy-grid">
+            <button class="quick-deploy-btn" data-agent="research" title="Research Agent">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="11" cy="11" r="8" />
+                <path d="M21 21l-4.35-4.35" />
+              </svg>
+              <span>Research</span>
+            </button>
+            <button class="quick-deploy-btn" data-agent="review" title="Code Review Agent">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="16 18 22 12 16 6" />
+                <polyline points="8 6 2 12 8 18" />
+              </svg>
+              <span>Review</span>
+            </button>
+            <button class="quick-deploy-btn" data-agent="writer" title="Writer Agent">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 19l7-7 3 3-7 7-3-3z" />
+                <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" />
+              </svg>
+              <span>Writer</span>
+            </button>
+            <button class="quick-deploy-btn" data-agent="analyst" title="Analyst Agent">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="18" y1="20" x2="18" y2="10" />
+                <line x1="12" y1="20" x2="12" y2="4" />
+                <line x1="6" y1="20" x2="6" y2="14" />
+              </svg>
+              <span>Analyst</span>
+            </button>
+          </div>
+        </div>
+        <!-- Staging Prompt Box -->
+        <div class="staging-box" id="staging-box">
+          <div class="staging-chips" id="staging-chips">
+            <span class="staging-empty">Select agents above</span>
+          </div>
+          <button class="staging-deploy-btn" id="staging-deploy-btn" disabled>
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
+              <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
             </svg>
-            <span>Analyst</span>
+            Deploy
           </button>
         </div>
-      </div>
-      <!-- Staging Prompt Box -->
-      <div class="staging-box" id="staging-box">
-        <div class="staging-chips" id="staging-chips">
-          <span class="staging-empty">Select agents above</span>
+        <!-- Active Subagents list -->
+        <div class="subagents-active-label">ACTIVE</div>
+        <div class="subagents-list" id="subagents-list">
+          <div class="subagents-empty" id="subagents-empty">
+            <div class="subagents-empty-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <circle cx="12" cy="12" r="3" />
+                <path
+                  d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"
+                />
+              </svg>
+            </div>
+            <div class="subagents-empty-text">No active subagents</div>
+          </div>
         </div>
-        <button class="staging-deploy-btn" id="staging-deploy-btn" disabled>
+        <!-- Custom Spawn button -->
+        <button class="subagent-spawn-btn" id="subagent-spawn-btn" title="Spawn a custom subagent">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 8v8M8 12h8" />
           </svg>
-          Deploy
+          <span>Custom Subagent</span>
         </button>
       </div>
-      <!-- Active Subagents list -->
-      <div class="subagents-active-label">ACTIVE</div>
-      <div class="subagents-list" id="subagents-list">
-        <div class="subagents-empty" id="subagents-empty">
-          <div class="subagents-empty-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-              <circle cx="12" cy="12" r="3"/>
-              <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
-            </svg>
+      <!-- Reasoning Panel -->
+      <div class="glass-panel reasoning-panel" id="reasoning-panel">
+        <div class="panel-label">
+          REASONING
+          <span class="reasoning-live-dot" id="reasoning-live-dot"></span>
+        </div>
+        <div class="reasoning-feed" id="reasoning-feed">
+          <div class="reasoning-empty" id="reasoning-empty">
+            <div class="reasoning-empty-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <circle cx="12" cy="12" r="3" />
+                <path
+                  d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"
+                />
+              </svg>
+            </div>
+            <div class="reasoning-empty-text">No reasoning yet</div>
           </div>
-          <div class="subagents-empty-text">No active subagents</div>
         </div>
       </div>
-      <!-- Custom Spawn button -->
-      <button class="subagent-spawn-btn" id="subagent-spawn-btn" title="Spawn a custom subagent">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/>
-        </svg>
-        <span>Custom Subagent</span>
-      </button>
-    </div>
-    <!-- Reasoning Panel -->
-    <div class="glass-panel reasoning-panel" id="reasoning-panel">
-      <div class="panel-label">
-        REASONING
-        <span class="reasoning-live-dot" id="reasoning-live-dot"></span>
-      </div>
-      <div class="reasoning-feed" id="reasoning-feed">
-        <div class="reasoning-empty" id="reasoning-empty">
-          <div class="reasoning-empty-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-              <circle cx="12" cy="12" r="3"/>
-              <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
+    </aside>
+    <!-- Metrics — Right column -->
+    <aside class="metrics-col metrics-right">
+      <!-- Connections Panel -->
+      <div class="glass-panel connections-panel" id="connections-panel">
+        <div class="panel-label">CONNECTIONS</div>
+        <button class="conn-btn" id="conn-slack" data-channel="slack">
+          <div class="conn-icon conn-icon-slack">
+            <svg viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.124 2.521a2.528 2.528 0 0 1 2.52-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.52V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.166 0a2.528 2.528 0 0 1 2.521 2.522v6.312zm-2.521 10.124a2.528 2.528 0 0 1 2.521 2.52A2.528 2.528 0 0 1 15.166 24a2.528 2.528 0 0 1-2.521-2.522v-2.52h2.521zm0-1.271a2.528 2.528 0 0 1-2.521-2.521 2.528 2.528 0 0 1 2.521-2.521h6.312A2.528 2.528 0 0 1 24 15.166a2.528 2.528 0 0 1-2.522 2.521h-6.312z"
+              />
             </svg>
           </div>
-          <div class="reasoning-empty-text">No reasoning yet</div>
-        </div>
+          <div class="conn-info">
+            <span class="conn-name">Slack</span>
+            <span class="conn-btn-status" id="conn-slack-status">Checking...</span>
+          </div>
+          <div class="conn-state" id="conn-slack-state"><div class="conn-dot"></div></div>
+          <span class="conn-notif" id="conn-slack-notif"></span>
+        </button>
+        <button class="conn-btn" id="conn-email" data-channel="email">
+          <div class="conn-icon conn-icon-email">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="2" y="4" width="20" height="16" rx="2" />
+              <path d="M22 6l-10 7L2 6" />
+            </svg>
+          </div>
+          <div class="conn-info">
+            <span class="conn-name">Email</span>
+            <span class="conn-btn-status" id="conn-email-status">Checking...</span>
+          </div>
+          <div class="conn-state" id="conn-email-state"><div class="conn-dot"></div></div>
+          <span class="conn-notif" id="conn-email-notif"></span>
+        </button>
+        <button class="conn-btn" id="conn-teams" data-channel="msteams">
+          <div class="conn-icon conn-icon-teams">
+            <svg viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M19.19 8.77c-.73 0-1.39.29-1.88.76V8.5a2.5 2.5 0 0 0-2.5-2.5h-1.62c.18-.46.28-.96.28-1.48a4.04 4.04 0 0 0-4.04-4.04c-2.23 0-4.04 1.81-4.04 4.04 0 .52.1 1.02.28 1.48H4.5A2.5 2.5 0 0 0 2 8.5v9a2.5 2.5 0 0 0 2.5 2.5h9a2.5 2.5 0 0 0 2.5-2.5v-.97c.49.47 1.15.76 1.88.76a2.69 2.69 0 0 0 2.69-2.69v-3.14a2.69 2.69 0 0 0-2.69-2.69h.31zM9.43 2.98a2.04 2.04 0 1 1 0 4.08 2.04 2.04 0 0 1 0-4.08zm4.57 14.52a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v9zm5.88-4.17a.69.69 0 0 1-.69.69.69.69 0 0 1-.69-.69v-3.14c0-.38.31-.69.69-.69.38 0 .69.31.69.69v3.14z"
+              />
+              <circle cx="17.5" cy="5.5" r="2.5" />
+            </svg>
+          </div>
+          <div class="conn-info">
+            <span class="conn-name">Teams</span>
+            <span class="conn-btn-status" id="conn-teams-status">Checking...</span>
+          </div>
+          <div class="conn-state" id="conn-teams-state"><div class="conn-dot"></div></div>
+          <span class="conn-notif" id="conn-teams-notif"></span>
+        </button>
       </div>
-    </div>
-  </aside>
-  <!-- Metrics — Right column -->
-  <aside class="metrics-col metrics-right">
-    <!-- Connections Panel -->
-    <div class="glass-panel connections-panel" id="connections-panel">
-      <div class="panel-label">CONNECTIONS</div>
-      <button class="conn-btn" id="conn-slack" data-channel="slack">
-        <div class="conn-icon conn-icon-slack">
-          <svg viewBox="0 0 24 24" fill="currentColor">
-            <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.124 2.521a2.528 2.528 0 0 1 2.52-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.52V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.166 0a2.528 2.528 0 0 1 2.521 2.522v6.312zm-2.521 10.124a2.528 2.528 0 0 1 2.521 2.52A2.528 2.528 0 0 1 15.166 24a2.528 2.528 0 0 1-2.521-2.522v-2.52h2.521zm0-1.271a2.528 2.528 0 0 1-2.521-2.521 2.528 2.528 0 0 1 2.521-2.521h6.312A2.528 2.528 0 0 1 24 15.166a2.528 2.528 0 0 1-2.522 2.521h-6.312z"/>
-          </svg>
+      <div class="glass-panel">
+        <div class="panel-label">SYMI GATEWAY</div>
+        <div class="net-row">
+          <div class="status-dot dot-green pulse"></div>
+          <span class="net-name">Gateway</span>
+          <span class="badge badge-green">ONLINE</span>
         </div>
-        <div class="conn-info">
-          <span class="conn-name">Slack</span>
-          <span class="conn-btn-status" id="conn-slack-status">Checking...</span>
+        <div class="net-row">
+          <span class="net-name muted">Port</span>
+          <span class="net-ip">18789</span>
         </div>
-        <div class="conn-state" id="conn-slack-state"><div class="conn-dot"></div></div>
-        <span class="conn-notif" id="conn-slack-notif"></span>
-      </button>
-      <button class="conn-btn" id="conn-email" data-channel="email">
-        <div class="conn-icon conn-icon-email">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 6l-10 7L2 6"/>
-          </svg>
+        <div class="net-row">
+          <span class="net-name muted">Auth</span>
+          <span class="badge badge-blue">TOKEN</span>
         </div>
-        <div class="conn-info">
-          <span class="conn-name">Email</span>
-          <span class="conn-btn-status" id="conn-email-status">Checking...</span>
-        </div>
-        <div class="conn-state" id="conn-email-state"><div class="conn-dot"></div></div>
-        <span class="conn-notif" id="conn-email-notif"></span>
-      </button>
-      <button class="conn-btn" id="conn-teams" data-channel="msteams">
-        <div class="conn-icon conn-icon-teams">
-          <svg viewBox="0 0 24 24" fill="currentColor">
-            <path d="M19.19 8.77c-.73 0-1.39.29-1.88.76V8.5a2.5 2.5 0 0 0-2.5-2.5h-1.62c.18-.46.28-.96.28-1.48a4.04 4.04 0 0 0-4.04-4.04c-2.23 0-4.04 1.81-4.04 4.04 0 .52.1 1.02.28 1.48H4.5A2.5 2.5 0 0 0 2 8.5v9a2.5 2.5 0 0 0 2.5 2.5h9a2.5 2.5 0 0 0 2.5-2.5v-.97c.49.47 1.15.76 1.88.76a2.69 2.69 0 0 0 2.69-2.69v-3.14a2.69 2.69 0 0 0-2.69-2.69h.31zM9.43 2.98a2.04 2.04 0 1 1 0 4.08 2.04 2.04 0 0 1 0-4.08zm4.57 14.52a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v9zm5.88-4.17a.69.69 0 0 1-.69.69.69.69 0 0 1-.69-.69v-3.14c0-.38.31-.69.69-.69.38 0 .69.31.69.69v3.14z"/>
-            <circle cx="17.5" cy="5.5" r="2.5"/>
-          </svg>
-        </div>
-        <div class="conn-info">
-          <span class="conn-name">Teams</span>
-          <span class="conn-btn-status" id="conn-teams-status">Checking...</span>
+        <div class="net-row">
+          <span class="net-name muted">Browser CDP</span>
+          <span class="net-ip">18800</span>
         </div>
-        <div class="conn-state" id="conn-teams-state"><div class="conn-dot"></div></div>
-        <span class="conn-notif" id="conn-teams-notif"></span>
-      </button>
-    </div>
-    <div class="glass-panel">
-      <div class="panel-label">SYMI GATEWAY</div>
-      <div class="net-row">
-        <div class="status-dot dot-green pulse"></div>
-        <span class="net-name">Gateway</span>
-        <span class="badge badge-green">ONLINE</span>
-      </div>
-      <div class="net-row">
-        <span class="net-name muted">Port</span>
-        <span class="net-ip">18789</span>
-      </div>
-      <div class="net-row">
-        <span class="net-name muted">Auth</span>
-        <span class="badge badge-blue">TOKEN</span>
-      </div>
-      <div class="net-row">
-        <span class="net-name muted">Browser CDP</span>
-        <span class="net-ip">18800</span>
       </div>
-    </div>
-    <div class="glass-panel" id="model-routing-panel">
-      <div class="panel-label">MODEL ROUTING</div>
-      <div class="model-toggle" id="model-toggle">
-        <button class="model-toggle-btn" data-model="local">Local</button>
-        <button class="model-toggle-btn" data-model="redsand">CoreWeave</button>
-        <button class="model-toggle-btn" data-model="api">API</button>
-      </div>
-      <div class="model-status" id="model-status">loading…</div>
-    </div>
-    <!-- Scheduling Panel -->
-    <div class="glass-panel scheduling-panel" id="scheduling-panel">
-      <div class="panel-label">
-        SCHEDULING
-        <span class="schedule-count" id="schedule-count"></span>
-      </div>
-      <div class="schedule-list" id="schedule-list">
-        <div class="schedule-empty" id="schedule-empty">
-          <div class="schedule-empty-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-              <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
-            </svg>
-          </div>
-          <div class="schedule-empty-text">No scheduled tasks</div>
+      <div class="glass-panel" id="model-routing-panel">
+        <div class="panel-label">MODEL ROUTING</div>
+        <div class="model-toggle" id="model-toggle">
+          <button class="model-toggle-btn" data-model="local">Local</button>
+          <button class="model-toggle-btn" data-model="redsand">CoreWeave</button>
+          <button class="model-toggle-btn" data-model="api">API</button>
         </div>
+        <div class="model-status" id="model-status">loading…</div>
       </div>
-      <button class="schedule-add-btn" id="schedule-add-btn" title="Add a scheduled task">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/>
-        </svg>
-        <span>Add Schedule</span>
-      </button>
-    </div>
-    <!-- Symipulse Panel -->
-    <div class="glass-panel symipulse-panel" id="symipulse-panel">
-      <div class="panel-label">
-        SYMIPULSE
-        <span class="symipulse-live-dot" id="symipulse-live-dot"></span>
-      </div>
-      <div class="symipulse-feed" id="symipulse-feed">
-        <div class="symipulse-empty" id="symipulse-empty">
-          <div class="symipulse-empty-text">No heartbeats yet</div>
+      <!-- Scheduling Panel -->
+      <div class="glass-panel scheduling-panel" id="scheduling-panel">
+        <div class="panel-label">
+          SCHEDULING
+          <span class="schedule-count" id="schedule-count"></span>
         </div>
-      </div>
-    </div>
-  </aside>
-  <!-- Response waterfall area -->
-  <main class="response-area" id="response-area"></main>
-  <!-- Floating prompt bar -->
-  <footer class="prompt-wrap">
-    <div class="prompt-bar" id="prompt-bar">
-      <!-- Row 1: icon + input + send -->
-      <div class="prompt-row-main">
-        <div class="prompt-icon">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
-            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
+        <div class="schedule-list" id="schedule-list">
+          <div class="schedule-empty" id="schedule-empty">
+            <div class="schedule-empty-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <circle cx="12" cy="12" r="10" />
+                <polyline points="12 6 12 12 16 14" />
+              </svg>
+            </div>
+            <div class="schedule-empty-text">No scheduled tasks</div>
+          </div>
         </div>
-        <textarea
-          id="prompt-input"
-          placeholder="Ask Symi anything…"
-          autocomplete="off"
-          spellcheck="false"
-          rows="1"
-        ></textarea>
-        <button class="send-btn" id="send-btn" title="Send">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-            <path d="M22 2L11 13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            <path d="M22 2L15 22 11 13 2 9l20-7z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <button class="schedule-add-btn" id="schedule-add-btn" title="Add a scheduled task">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 8v8M8 12h8" />
           </svg>
+          <span>Add Schedule</span>
         </button>
       </div>
-      <!-- Row 2: action buttons (right-aligned) -->
-      <div class="prompt-row-actions">
-        <button class="history-btn" id="history-btn" title="Browse previous sessions">
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
-            <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
-            <path d="M12 7v5l3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-          </svg>
-          <span class="history-btn-label">History</span>
-        </button>
-        <!-- Stop button — shown while AI is responding, hidden otherwise -->
-        <button class="stop-btn" id="stop-btn" title="Stop the current response">
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
-            <rect x="4" y="4" width="16" height="16" rx="2" fill="currentColor" opacity="0.85"/>
-          </svg>
-          <span class="stop-btn-label">Stop</span>
-        </button>
-        <!-- Queue button — replaces New Session while AI is responding -->
-        <button class="queue-btn" id="queue-btn" title="Queue this message — sends automatically once Symi finishes">
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
-            <path d="M3 6h18M3 12h12M3 18h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-          </svg>
-          <span class="queue-btn-label">Queue ↵</span>
-          <span class="queue-cancel-x" id="queue-cancel-x" title="Cancel queued message">✕</span>
-        </button>
-        <button class="new-session-btn" id="new-session-btn" title="New session — clears conversation and starts fresh">
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
-            <path d="M11 4H7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4"
-                  stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L13 14l-4 1 1-4 8.5-8.5z"
-                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-          <span class="new-session-label">New Session</span>
-        </button>
+      <!-- Debug Panel (hidden by default, toggle with Shift+D) -->
+      <div class="glass-panel debug-panel collapsed" id="debug-panel">
+        <div class="panel-label" onclick="this.parentElement.classList.toggle('collapsed')">
+          DEBUG EVENTS <span class="debug-toggle-arrow">&#x25B6;</span>
+        </div>
+        <div class="debug-entries" id="debug-panel-entries"></div>
       </div>
-    </div>
-  </footer>
-  <!-- ── Menu Trigger ──────────────────────────────────────────────── -->
-  <button class="menu-trigger" id="menu-trigger" aria-label="Command menu" title="Command Menu (M)">
-    <svg class="menu-icon-grid" width="17" height="17" viewBox="0 0 18 18" fill="none">
-      <circle cx="3"  cy="3"  r="1.6" fill="currentColor"/>
-      <circle cx="9"  cy="3"  r="1.6" fill="currentColor"/>
-      <circle cx="15" cy="3"  r="1.6" fill="currentColor"/>
-      <circle cx="3"  cy="9"  r="1.6" fill="currentColor"/>
-      <circle cx="9"  cy="9"  r="1.6" fill="currentColor"/>
-      <circle cx="15" cy="9"  r="1.6" fill="currentColor"/>
-      <circle cx="3"  cy="15" r="1.6" fill="currentColor"/>
-      <circle cx="9"  cy="15" r="1.6" fill="currentColor"/>
-      <circle cx="15" cy="15" r="1.6" fill="currentColor"/>
-    </svg>
-    <svg class="menu-icon-close" width="17" height="17" viewBox="0 0 18 18" fill="none">
-      <path d="M2 2l14 14M16 2 2 16" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>
-    </svg>
-  </button>
-  <!-- ── Command Overlay ────────────────────────────────────────────── -->
-  <div class="cmd-overlay" id="cmd-overlay" aria-hidden="true">
-    <div class="cmd-backdrop" id="cmd-backdrop"></div>
-    <div class="cmd-shell">
-      <!-- Header bar -->
-      <div class="cmd-header">
-        <div class="cmd-brand">
-          <span class="cmd-brand-glyph">◈</span>
-          <span class="cmd-brand-name">SYMI</span>
-          <span class="cmd-brand-sep">/</span>
-          <span class="cmd-brand-sub">COMMAND CENTER</span>
-        </div>
-        <div class="cmd-esc-hint">Press <kbd class="cmd-kbd">ESC</kbd> to close</div>
+      <!-- Symipulse Panel -->
+      <div class="glass-panel symipulse-panel" id="symipulse-panel">
+        <div class="panel-label">
+          SYMIPULSE
+          <span class="symipulse-live-dot" id="symipulse-live-dot"></span>
+        </div>
+        <div class="symipulse-feed" id="symipulse-feed">
+          <div class="symipulse-empty" id="symipulse-empty">
+            <div class="symipulse-empty-text">No heartbeats yet</div>
+          </div>
+        </div>
       </div>
-      <!-- 5-group command grid -->
-      <div class="cmd-grid">
-        <!-- ── CHAT ──────────────────────────────────────────────── -->
-        <div class="cmd-group cmd-group--chat">
-          <div class="cmd-group-hd">
-            <svg class="cmd-group-svg" viewBox="0 0 24 24" fill="none">
-              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </aside>
+    <!-- Response waterfall area -->
+    <main class="response-area" id="response-area"></main>
+    <!-- Floating prompt bar -->
+    <footer class="prompt-wrap">
+      <div class="prompt-bar" id="prompt-bar">
+        <!-- Row 1: icon + input + send -->
+        <div class="prompt-row-main">
+          <div class="prompt-icon">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
             </svg>
-            <span class="cmd-group-label">CHAT</span>
-          </div>
-          <div class="cmd-items">
-            <a class="cmd-item" href="#" data-href="#chat">
-              <span class="cmd-item-icon">◈</span>
-              <div class="cmd-item-body">
-                <span class="cmd-item-name">Chat</span>
-                <span class="cmd-item-desc">Main conversation</span>
-              </div>
-              <span class="cmd-item-badge">ACTIVE</span>
-            </a>
           </div>
+          <textarea
+            id="prompt-input"
+            placeholder="Ask Symi anything…"
+            autocomplete="off"
+            spellcheck="false"
+            rows="1"
+          ></textarea>
+          <button class="send-btn" id="send-btn" title="Send">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+              <path d="M22 2L11 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+              <path
+                d="M22 2L15 22 11 13 2 9l20-7z"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
         </div>
-        <!-- ── CONTROL ───────────────────────────────────────────── -->
-        <div class="cmd-group cmd-group--control">
-          <div class="cmd-group-hd">
-            <svg class="cmd-group-svg" viewBox="0 0 24 24" fill="none">
-              <rect x="3" y="3" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
-              <rect x="14" y="3" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
-              <rect x="3" y="14" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
-              <rect x="14" y="14" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
+        <!-- Row 2: action buttons (right-aligned) -->
+        <div class="prompt-row-actions">
+          <button class="history-btn" id="history-btn" title="Browse previous sessions">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
+              <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" />
+              <path d="M12 7v5l3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
             </svg>
-            <span class="cmd-group-label">CONTROL</span>
-          </div>
-          <div class="cmd-items cmd-items--grid">
-            <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/overview">
-              <span class="cmd-item-icon">⊙</span>
-              <div class="cmd-item-body"><span class="cmd-item-name">Overview</span><span class="cmd-item-desc">System overview</span></div>
-            </a>
-            <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/channels">
-              <span class="cmd-item-icon">⊞</span>
-              <div class="cmd-item-body"><span class="cmd-item-name">Channels</span><span class="cmd-item-desc">Messaging channels</span></div>
-            </a>
-            <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/instances">
-              <span class="cmd-item-icon">⊟</span>
-              <div class="cmd-item-body"><span class="cmd-item-name">Instances</span><span class="cmd-item-desc">AI instances</span></div>
-            </a>
-            <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/sessions">
-              <span class="cmd-item-icon">≋</span>
-              <div class="cmd-item-body"><span class="cmd-item-name">Sessions</span><span class="cmd-item-desc">Active sessions</span></div>
-            </a>
-            <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/usage">
-              <span class="cmd-item-icon">▲</span>
-              <div class="cmd-item-body"><span class="cmd-item-name">Usage</span><span class="cmd-item-desc">Tokens &amp; costs</span></div>
-            </a>
-            <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/cron">
-              <span class="cmd-item-icon">◷</span>
-              <div class="cmd-item-body"><span class="cmd-item-name">Cron Jobs</span><span class="cmd-item-desc">Scheduled tasks</span></div>
-            </a>
-          </div>
-        </div>
+            <span class="history-btn-label">History</span>
+          </button>
-        <!-- ── AGENT ─────────────────────────────────────────────── -->
-        <div class="cmd-group cmd-group--agent">
-          <div class="cmd-group-hd">
-            <svg class="cmd-group-svg" viewBox="0 0 24 24" fill="none">
-              <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.5"/>
-              <path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          <!-- Stop button — shown while AI is responding, hidden otherwise -->
+          <button class="stop-btn" id="stop-btn" title="Stop the current response">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
+              <rect x="4" y="4" width="16" height="16" rx="2" fill="currentColor" opacity="0.85" />
             </svg>
-            <span class="cmd-group-label">AGENT</span>
-          </div>
-          <div class="cmd-items">
-            <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/agents">
-              <span class="cmd-item-icon">◈</span>
-              <div class="cmd-item-body"><span class="cmd-item-name">Agents</span><span class="cmd-item-desc">Agent management</span></div>
-            </a>
-            <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/skills">
-              <span class="cmd-item-icon">⚡</span>
-              <div class="cmd-item-body"><span class="cmd-item-name">Skills</span><span class="cmd-item-desc">Agent capabilities</span></div>
-            </a>
-            <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/nodes">
-              <span class="cmd-item-icon">⬡</span>
-              <div class="cmd-item-body"><span class="cmd-item-name">Nodes</span><span class="cmd-item-desc">Connected devices</span></div>
-            </a>
+            <span class="stop-btn-label">Stop</span>
+          </button>
+          <!-- Queue button — replaces New Session while AI is responding -->
+          <button
+            class="queue-btn"
+            id="queue-btn"
+            title="Queue this message — sends automatically once Symi finishes"
+          >
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M3 6h18M3 12h12M3 18h8"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+            </svg>
+            <span class="queue-btn-label">Queue ↵</span>
+            <span class="queue-cancel-x" id="queue-cancel-x" title="Cancel queued message">✕</span>
+          </button>
+          <button
+            class="new-session-btn"
+            id="new-session-btn"
+            title="New session — clears conversation and starts fresh"
+          >
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M11 4H7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+              <path
+                d="M18.5 2.5a2.121 2.121 0 0 1 3 3L13 14l-4 1 1-4 8.5-8.5z"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            <span class="new-session-label">New Session</span>
+          </button>
+        </div>
+      </div>
+    </footer>
+    <!-- ── Menu Trigger ──────────────────────────────────────────────── -->
+    <button
+      class="menu-trigger"
+      id="menu-trigger"
+      aria-label="Command menu"
+      title="Command Menu (M)"
+    >
+      <svg class="menu-icon-grid" width="17" height="17" viewBox="0 0 18 18" fill="none">
+        <circle cx="3" cy="3" r="1.6" fill="currentColor" />
+        <circle cx="9" cy="3" r="1.6" fill="currentColor" />
+        <circle cx="15" cy="3" r="1.6" fill="currentColor" />
+        <circle cx="3" cy="9" r="1.6" fill="currentColor" />
+        <circle cx="9" cy="9" r="1.6" fill="currentColor" />
+        <circle cx="15" cy="9" r="1.6" fill="currentColor" />
+        <circle cx="3" cy="15" r="1.6" fill="currentColor" />
+        <circle cx="9" cy="15" r="1.6" fill="currentColor" />
+        <circle cx="15" cy="15" r="1.6" fill="currentColor" />
+      </svg>
+      <svg class="menu-icon-close" width="17" height="17" viewBox="0 0 18 18" fill="none">
+        <path
+          d="M2 2l14 14M16 2 2 16"
+          stroke="currentColor"
+          stroke-width="2.2"
+          stroke-linecap="round"
+        />
+      </svg>
+    </button>
+    <!-- ── Command Overlay ────────────────────────────────────────────── -->
+    <div class="cmd-overlay" id="cmd-overlay" aria-hidden="true">
+      <div class="cmd-backdrop" id="cmd-backdrop"></div>
+      <div class="cmd-shell">
+        <!-- Header bar -->
+        <div class="cmd-header">
+          <div class="cmd-brand">
+            <span class="cmd-brand-glyph">◈</span>
+            <span class="cmd-brand-name">SYMI</span>
+            <span class="cmd-brand-sep">/</span>
+            <span class="cmd-brand-sub">COMMAND CENTER</span>
           </div>
+          <div class="cmd-esc-hint">Press <kbd class="cmd-kbd">ESC</kbd> to close</div>
         </div>
-        <!-- ── SETTINGS ──────────────────────────────────────────── -->
-        <div class="cmd-group cmd-group--settings">
-          <div class="cmd-group-hd">
-            <svg class="cmd-group-svg" viewBox="0 0 24 24" fill="none">
-              <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.5"/>
-              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" stroke="currentColor" stroke-width="1.5"/>
-            </svg>
-            <span class="cmd-group-label">SETTINGS</span>
+        <!-- 5-group command grid -->
+        <div class="cmd-grid">
+          <!-- ── CHAT ──────────────────────────────────────────────── -->
+          <div class="cmd-group cmd-group--chat">
+            <div class="cmd-group-hd">
+              <svg class="cmd-group-svg" viewBox="0 0 24 24" fill="none">
+                <path
+                  d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              <span class="cmd-group-label">CHAT</span>
+            </div>
+            <div class="cmd-items">
+              <a class="cmd-item" href="#" data-href="#chat">
+                <span class="cmd-item-icon">◈</span>
+                <div class="cmd-item-body">
+                  <span class="cmd-item-name">Chat</span>
+                  <span class="cmd-item-desc">Main conversation</span>
+                </div>
+                <span class="cmd-item-badge">ACTIVE</span>
+              </a>
+            </div>
           </div>
-          <div class="cmd-items">
-            <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/config">
-              <span class="cmd-item-icon">⚙</span>
-              <div class="cmd-item-body"><span class="cmd-item-name">Config</span><span class="cmd-item-desc">System configuration</span></div>
-            </a>
-            <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/debug">
-              <span class="cmd-item-icon">⬢</span>
-              <div class="cmd-item-body"><span class="cmd-item-name">Debug</span><span class="cmd-item-desc">Debug console</span></div>
-            </a>
-            <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/logs">
-              <span class="cmd-item-icon">≡</span>
-              <div class="cmd-item-body"><span class="cmd-item-name">Logs</span><span class="cmd-item-desc">System logs</span></div>
-            </a>
+          <!-- ── CONTROL ───────────────────────────────────────────── -->
+          <div class="cmd-group cmd-group--control">
+            <div class="cmd-group-hd">
+              <svg class="cmd-group-svg" viewBox="0 0 24 24" fill="none">
+                <rect
+                  x="3"
+                  y="3"
+                  width="7"
+                  height="7"
+                  rx="1.5"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                />
+                <rect
+                  x="14"
+                  y="3"
+                  width="7"
+                  height="7"
+                  rx="1.5"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                />
+                <rect
+                  x="3"
+                  y="14"
+                  width="7"
+                  height="7"
+                  rx="1.5"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                />
+                <rect
+                  x="14"
+                  y="14"
+                  width="7"
+                  height="7"
+                  rx="1.5"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                />
+              </svg>
+              <span class="cmd-group-label">CONTROL</span>
+            </div>
+            <div class="cmd-items cmd-items--grid">
+              <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/overview">
+                <span class="cmd-item-icon">⊙</span>
+                <div class="cmd-item-body">
+                  <span class="cmd-item-name">Overview</span
+                  ><span class="cmd-item-desc">System overview</span>
+                </div>
+              </a>
+              <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/channels">
+                <span class="cmd-item-icon">⊞</span>
+                <div class="cmd-item-body">
+                  <span class="cmd-item-name">Channels</span
+                  ><span class="cmd-item-desc">Messaging channels</span>
+                </div>
+              </a>
+              <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/instances">
+                <span class="cmd-item-icon">⊟</span>
+                <div class="cmd-item-body">
+                  <span class="cmd-item-name">Instances</span
+                  ><span class="cmd-item-desc">AI instances</span>
+                </div>
+              </a>
+              <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/sessions">
+                <span class="cmd-item-icon">≋</span>
+                <div class="cmd-item-body">
+                  <span class="cmd-item-name">Sessions</span
+                  ><span class="cmd-item-desc">Active sessions</span>
+                </div>
+              </a>
+              <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/usage">
+                <span class="cmd-item-icon">▲</span>
+                <div class="cmd-item-body">
+                  <span class="cmd-item-name">Usage</span
+                  ><span class="cmd-item-desc">Tokens &amp; costs</span>
+                </div>
+              </a>
+              <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/cron">
+                <span class="cmd-item-icon">◷</span>
+                <div class="cmd-item-body">
+                  <span class="cmd-item-name">Cron Jobs</span
+                  ><span class="cmd-item-desc">Scheduled tasks</span>
+                </div>
+              </a>
+            </div>
           </div>
-        </div>
-        <!-- ── RESOURCES ─────────────────────────────────────────── -->
-        <div class="cmd-group cmd-group--resources">
-          <div class="cmd-group-hd">
-            <svg class="cmd-group-svg" viewBox="0 0 24 24" fill="none">
-              <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-              <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-            </svg>
-            <span class="cmd-group-label">RESOURCES</span>
+          <!-- ── AGENT ─────────────────────────────────────────────── -->
+          <div class="cmd-group cmd-group--agent">
+            <div class="cmd-group-hd">
+              <svg class="cmd-group-svg" viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.5" />
+                <path
+                  d="M12 2v2M12 20v2M2 12h2M20 12h2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                />
+              </svg>
+              <span class="cmd-group-label">AGENT</span>
+            </div>
+            <div class="cmd-items">
+              <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/agents">
+                <span class="cmd-item-icon">◈</span>
+                <div class="cmd-item-body">
+                  <span class="cmd-item-name">Agents</span
+                  ><span class="cmd-item-desc">Agent management</span>
+                </div>
+              </a>
+              <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/skills">
+                <span class="cmd-item-icon">⚡</span>
+                <div class="cmd-item-body">
+                  <span class="cmd-item-name">Skills</span
+                  ><span class="cmd-item-desc">Agent capabilities</span>
+                </div>
+              </a>
+              <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/nodes">
+                <span class="cmd-item-icon">⬡</span>
+                <div class="cmd-item-body">
+                  <span class="cmd-item-name">Nodes</span
+                  ><span class="cmd-item-desc">Connected devices</span>
+                </div>
+              </a>
+            </div>
           </div>
-          <div class="cmd-items">
-            <a class="cmd-item" href="#" data-href="https://docs.symi.ai/">
-              <span class="cmd-item-icon">◻</span>
-              <div class="cmd-item-body"><span class="cmd-item-name">Docs</span><span class="cmd-item-desc">Official documentation</span></div>
-            </a>
+          <!-- ── SETTINGS ──────────────────────────────────────────── -->
+          <div class="cmd-group cmd-group--settings">
+            <div class="cmd-group-hd">
+              <svg class="cmd-group-svg" viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.5" />
+                <path
+                  d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                />
+              </svg>
+              <span class="cmd-group-label">SETTINGS</span>
+            </div>
+            <div class="cmd-items">
+              <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/config">
+                <span class="cmd-item-icon">⚙</span>
+                <div class="cmd-item-body">
+                  <span class="cmd-item-name">Config</span
+                  ><span class="cmd-item-desc">System configuration</span>
+                </div>
+              </a>
+              <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/debug">
+                <span class="cmd-item-icon">⬢</span>
+                <div class="cmd-item-body">
+                  <span class="cmd-item-name">Debug</span
+                  ><span class="cmd-item-desc">Debug console</span>
+                </div>
+              </a>
+              <a class="cmd-item" href="#" data-href="http://127.0.0.1:18789/logs">
+                <span class="cmd-item-icon">≡</span>
+                <div class="cmd-item-body">
+                  <span class="cmd-item-name">Logs</span
+                  ><span class="cmd-item-desc">System logs</span>
+                </div>
+              </a>
+            </div>
           </div>
-        </div>
-      </div><!-- /cmd-grid -->
-    </div><!-- /cmd-shell -->
-  </div><!-- /cmd-overlay -->
-  <!-- Standard UI toggle removed — glass UI is served directly from gateway -->
-  <!-- ── Page Navigation Overlay ──────────────────────────────────── -->
-  <div class="page-overlay" id="page-overlay" aria-hidden="true">
-    <div class="page-overlay-header">
-      <button class="page-back-btn" id="page-back-btn" title="Back to chat">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
-          <path d="M19 12H5M5 12l7-7M5 12l7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-        <span>Chat</span>
-      </button>
-      <span class="page-overlay-title" id="page-overlay-title"></span>
-      <a class="page-popout-btn" id="page-popout-btn" href="#" target="_blank" title="Open in new tab" rel="noopener">
-        <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
-          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-          <path d="M15 3h6v6M10 14L21 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-        Pop out
-      </a>
-    </div>
-    <iframe class="page-overlay-frame" id="page-overlay-frame" src="" title="Page view" allowfullscreen></iframe>
-  </div>
-  <!-- ── History Drawer ───────────────────────────────────────────── -->
-  <div class="history-overlay" id="history-overlay"></div>
-  <div class="history-drawer" id="history-drawer" aria-hidden="true">
-    <div class="history-drawer-header">
-      <div class="history-drawer-title">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
-          <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
-          <path d="M12 7v5l3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-        </svg>
-        CHAT HISTORY
+          <!-- ── RESOURCES ─────────────────────────────────────────── -->
+          <div class="cmd-group cmd-group--resources">
+            <div class="cmd-group-hd">
+              <svg class="cmd-group-svg" viewBox="0 0 24 24" fill="none">
+                <path
+                  d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                />
+                <path
+                  d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                />
+              </svg>
+              <span class="cmd-group-label">RESOURCES</span>
+            </div>
+            <div class="cmd-items">
+              <a class="cmd-item" href="#" data-href="https://docs.symi.ai/">
+                <span class="cmd-item-icon">◻</span>
+                <div class="cmd-item-body">
+                  <span class="cmd-item-name">Docs</span
+                  ><span class="cmd-item-desc">Official documentation</span>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+        <!-- /cmd-grid -->
       </div>
-      <button class="history-close-btn" id="history-close-btn" title="Close (Esc)">✕</button>
-    </div>
-    <div class="history-drawer-body" id="history-drawer-body">
-      <div class="history-loading">Loading sessions…</div>
+      <!-- /cmd-shell -->
     </div>
-  </div>
-  <!-- ── Session archive toast ─────────────────────────────────────── -->
-  <div class="session-archive-toast" id="session-archive-toast">
-    <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
-      <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
-      <path d="M12 7v5l3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-    </svg>
-    Session archived — <span id="session-archive-link">View history ↗</span>
-  </div>
-  <!-- ── Connection Modal ──────────────────────────────────────────────── -->
-  <div class="conn-modal-overlay" id="conn-modal-overlay" aria-hidden="true">
-    <div class="conn-modal" id="conn-modal">
-      <div class="conn-modal-header">
-        <div class="conn-modal-icon" id="conn-modal-icon"></div>
-        <div class="conn-modal-title" id="conn-modal-title">Channel</div>
-        <button class="conn-modal-close" id="conn-modal-close" title="Close">
+    <!-- /cmd-overlay -->
+    <!-- Standard UI toggle removed — glass UI is served directly from gateway -->
+    <!-- ── Page Navigation Overlay ──────────────────────────────────── -->
+    <div class="page-overlay" id="page-overlay" aria-hidden="true">
+      <div class="page-overlay-header">
+        <button class="page-back-btn" id="page-back-btn" title="Back to chat">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
-            <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            <path
+              d="M19 12H5M5 12l7-7M5 12l7 7"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
+          <span>Chat</span>
         </button>
-      </div>
-      <div class="conn-modal-body" id="conn-modal-body"></div>
-      <div class="conn-modal-footer" id="conn-modal-footer">
-        <a class="conn-modal-docs" id="conn-modal-docs" href="#" target="_blank" rel="noopener">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
-            <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="currentColor" stroke-width="2"/>
-            <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" stroke="currentColor" stroke-width="2"/>
+        <span class="page-overlay-title" id="page-overlay-title"></span>
+        <a
+          class="page-popout-btn"
+          id="page-popout-btn"
+          href="#"
+          target="_blank"
+          title="Open in new tab"
+          rel="noopener"
+        >
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
+            <path
+              d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+            />
+            <path
+              d="M15 3h6v6M10 14L21 3"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
-          View Documentation
+          Pop out
         </a>
       </div>
+      <iframe
+        class="page-overlay-frame"
+        id="page-overlay-frame"
+        src=""
+        title="Page view"
+        allowfullscreen
+      ></iframe>
     </div>
-  </div>
-  <!-- ── Subagent Spawn Modal ──────────────────────────────────────────── -->
-  <div class="subagent-modal-overlay" id="subagent-modal-overlay" aria-hidden="true">
-    <div class="subagent-modal" id="subagent-modal">
-      <div class="subagent-modal-header">
-        <div class="subagent-modal-icon">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-            <circle cx="12" cy="12" r="3"/>
-            <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
-          </svg>
-        </div>
-        <div class="subagent-modal-title">Spawn Subagent</div>
-        <button class="subagent-modal-close" id="subagent-modal-close" title="Close">
+    <!-- ── History Drawer ───────────────────────────────────────────── -->
+    <div class="history-overlay" id="history-overlay"></div>
+    <div class="history-drawer" id="history-drawer" aria-hidden="true">
+      <div class="history-drawer-header">
+        <div class="history-drawer-title">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
-            <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+            <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" />
+            <path d="M12 7v5l3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
           </svg>
-        </button>
+          CHAT HISTORY
+        </div>
+        <button class="history-close-btn" id="history-close-btn" title="Close (Esc)">✕</button>
+      </div>
+      <div class="history-drawer-body" id="history-drawer-body">
+        <div class="history-loading">Loading sessions…</div>
       </div>
-      <div class="subagent-modal-body">
-        <div class="subagent-form-group">
-          <label class="subagent-form-label" for="subagent-task">Task</label>
-          <textarea class="subagent-form-textarea" id="subagent-task" placeholder="Describe the task for the subagent..." rows="3"></textarea>
+    </div>
+    <!-- ── Session archive toast ─────────────────────────────────────── -->
+    <div class="session-archive-toast" id="session-archive-toast">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
+        <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" />
+        <path d="M12 7v5l3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+      </svg>
+      Session archived — <span id="session-archive-link">View history ↗</span>
+    </div>
+    <!-- ── Connection Modal ──────────────────────────────────────────────── -->
+    <div class="conn-modal-overlay" id="conn-modal-overlay" aria-hidden="true">
+      <div class="conn-modal" id="conn-modal">
+        <div class="conn-modal-header">
+          <div class="conn-modal-icon" id="conn-modal-icon"></div>
+          <div class="conn-modal-title" id="conn-modal-title">Channel</div>
+          <button class="conn-modal-close" id="conn-modal-close" title="Close">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M18 6L6 18M6 6l12 12"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+            </svg>
+          </button>
         </div>
-        <div class="subagent-form-group">
-          <label class="subagent-form-label" for="subagent-label">Label (optional)</label>
-          <input type="text" class="subagent-form-input" id="subagent-label" placeholder="e.g. Research Agent, Code Review...">
+        <div class="conn-modal-body" id="conn-modal-body"></div>
+        <div class="conn-modal-footer" id="conn-modal-footer">
+          <a class="conn-modal-docs" id="conn-modal-docs" href="#" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
+              <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="currentColor" stroke-width="2" />
+              <path
+                d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"
+                stroke="currentColor"
+                stroke-width="2"
+              />
+            </svg>
+            View Documentation
+          </a>
+        </div>
+      </div>
+    </div>
+    <!-- ── Subagent Spawn Modal ──────────────────────────────────────────── -->
+    <div class="subagent-modal-overlay" id="subagent-modal-overlay" aria-hidden="true">
+      <div class="subagent-modal" id="subagent-modal">
+        <div class="subagent-modal-header">
+          <div class="subagent-modal-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <circle cx="12" cy="12" r="3" />
+              <path
+                d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"
+              />
+            </svg>
+          </div>
+          <div class="subagent-modal-title">Spawn Subagent</div>
+          <button class="subagent-modal-close" id="subagent-modal-close" title="Close">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M18 6L6 18M6 6l12 12"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+            </svg>
+          </button>
         </div>
-        <div class="subagent-form-row">
+        <div class="subagent-modal-body">
           <div class="subagent-form-group">
-            <label class="subagent-form-label" for="subagent-model">Model</label>
-            <select class="subagent-form-select" id="subagent-model">
-              <option value="">Default</option>
-              <option value="anthropic/claude-sonnet-4-6">Claude Sonnet 4.6</option>
-              <option value="ollama/gemma4:31b-128k">Gemma 4 31B 128K</option>
-              <option value="ollama/qwen2.5:32b">Qwen 2.5 32B</option>
-            </select>
+            <label class="subagent-form-label" for="subagent-task">Task</label>
+            <textarea
+              class="subagent-form-textarea"
+              id="subagent-task"
+              placeholder="Describe the task for the subagent..."
+              rows="3"
+            ></textarea>
           </div>
           <div class="subagent-form-group">
-            <label class="subagent-form-label" for="subagent-thinking">Thinking</label>
-            <select class="subagent-form-select" id="subagent-thinking">
-              <option value="">Default</option>
-              <option value="off">Off</option>
-              <option value="low">Low</option>
-              <option value="medium">Medium</option>
-              <option value="high">High</option>
-            </select>
+            <label class="subagent-form-label" for="subagent-label">Label (optional)</label>
+            <input
+              type="text"
+              class="subagent-form-input"
+              id="subagent-label"
+              placeholder="e.g. Research Agent, Code Review..."
+            />
+          </div>
+          <div class="subagent-form-row">
+            <div class="subagent-form-group">
+              <label class="subagent-form-label" for="subagent-model">Model</label>
+              <select class="subagent-form-select" id="subagent-model">
+                <option value="">Default</option>
+                <option value="anthropic/claude-sonnet-4-6">Claude Sonnet 4.6</option>
+                <option value="ollama/gemma4:31b-128k">Gemma 4 31B 128K</option>
+                <option value="ollama/qwen2.5:32b">Qwen 2.5 32B</option>
+              </select>
+            </div>
+            <div class="subagent-form-group">
+              <label class="subagent-form-label" for="subagent-thinking">Thinking</label>
+              <select class="subagent-form-select" id="subagent-thinking">
+                <option value="">Default</option>
+                <option value="off">Off</option>
+                <option value="low">Low</option>
+                <option value="medium">Medium</option>
+                <option value="high">High</option>
+              </select>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="subagent-modal-footer">
-        <button class="subagent-modal-cancel" id="subagent-modal-cancel">Cancel</button>
-        <button class="subagent-modal-submit" id="subagent-modal-submit">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
-          </svg>
-          Spawn
-        </button>
-      </div>
-    </div>
-  </div>
-  <!-- ── Schedule Modal ──────────────────────────────────────────────── -->
-  <div class="schedule-modal-overlay" id="schedule-modal-overlay" aria-hidden="true">
-    <div class="schedule-modal" id="schedule-modal">
-      <div class="schedule-modal-header">
-        <div class="schedule-modal-icon">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-            <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
-          </svg>
+        <div class="subagent-modal-footer">
+          <button class="subagent-modal-cancel" id="subagent-modal-cancel">Cancel</button>
+          <button class="subagent-modal-submit" id="subagent-modal-submit">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
+            </svg>
+            Spawn
+          </button>
         </div>
-        <div class="schedule-modal-title">Add Schedule</div>
-        <button class="schedule-modal-close" id="schedule-modal-close" title="Close">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
-            <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-          </svg>
-        </button>
       </div>
-      <div class="schedule-modal-body">
-        <div class="schedule-form-group">
-          <label class="schedule-form-label" for="schedule-name">Name</label>
-          <input type="text" class="schedule-form-input" id="schedule-name" placeholder="e.g. Daily Report, Weekly Backup...">
-        </div>
-        <div class="schedule-form-group">
-          <label class="schedule-form-label" for="schedule-task">Task</label>
-          <textarea class="schedule-form-textarea" id="schedule-task" placeholder="Describe what should happen on this schedule..." rows="3"></textarea>
-        </div>
-        <div class="schedule-form-group">
-          <label class="schedule-form-label">Run Every</label>
-          <div class="schedule-interval-grid">
-            <button type="button" class="schedule-interval-btn" data-interval="hourly">
-              <span class="schedule-interval-value">1</span><span class="schedule-interval-unit">Hour</span>
-            </button>
-            <button type="button" class="schedule-interval-btn" data-interval="daily">
-              <span class="schedule-interval-value">1</span><span class="schedule-interval-unit">Day</span>
-            </button>
-            <button type="button" class="schedule-interval-btn" data-interval="weekly">
-              <span class="schedule-interval-value">1</span><span class="schedule-interval-unit">Week</span>
-            </button>
-            <button type="button" class="schedule-interval-btn" data-interval="custom">
-              <span class="schedule-interval-value">...</span><span class="schedule-interval-unit">Custom</span>
-            </button>
+    </div>
+    <!-- ── Schedule Modal ──────────────────────────────────────────────── -->
+    <div class="schedule-modal-overlay" id="schedule-modal-overlay" aria-hidden="true">
+      <div class="schedule-modal" id="schedule-modal">
+        <div class="schedule-modal-header">
+          <div class="schedule-modal-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <circle cx="12" cy="12" r="10" />
+              <polyline points="12 6 12 12 16 14" />
+            </svg>
           </div>
+          <div class="schedule-modal-title">Add Schedule</div>
+          <button class="schedule-modal-close" id="schedule-modal-close" title="Close">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M18 6L6 18M6 6l12 12"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+            </svg>
+          </button>
         </div>
-        <div class="schedule-custom-options" id="schedule-custom-options" style="display: none;">
-          <div class="schedule-form-row">
-            <div class="schedule-form-group">
-              <label class="schedule-form-label" for="schedule-interval-value">Every</label>
-              <input type="number" class="schedule-form-input" id="schedule-interval-value" min="1" value="1">
+        <div class="schedule-modal-body">
+          <div class="schedule-form-group">
+            <label class="schedule-form-label" for="schedule-name">Name</label>
+            <input
+              type="text"
+              class="schedule-form-input"
+              id="schedule-name"
+              placeholder="e.g. Daily Report, Weekly Backup..."
+            />
+          </div>
+          <div class="schedule-form-group">
+            <label class="schedule-form-label" for="schedule-task">Task</label>
+            <textarea
+              class="schedule-form-textarea"
+              id="schedule-task"
+              placeholder="Describe what should happen on this schedule..."
+              rows="3"
+            ></textarea>
+          </div>
+          <div class="schedule-form-group">
+            <label class="schedule-form-label">Run Every</label>
+            <div class="schedule-interval-grid">
+              <button type="button" class="schedule-interval-btn" data-interval="hourly">
+                <span class="schedule-interval-value">1</span
+                ><span class="schedule-interval-unit">Hour</span>
+              </button>
+              <button type="button" class="schedule-interval-btn" data-interval="daily">
+                <span class="schedule-interval-value">1</span
+                ><span class="schedule-interval-unit">Day</span>
+              </button>
+              <button type="button" class="schedule-interval-btn" data-interval="weekly">
+                <span class="schedule-interval-value">1</span
+                ><span class="schedule-interval-unit">Week</span>
+              </button>
+              <button type="button" class="schedule-interval-btn" data-interval="custom">
+                <span class="schedule-interval-value">...</span
+                ><span class="schedule-interval-unit">Custom</span>
+              </button>
             </div>
-            <div class="schedule-form-group">
-              <label class="schedule-form-label" for="schedule-interval-unit">Period</label>
-              <select class="schedule-form-select" id="schedule-interval-unit">
-                <option value="minutes">Minutes</option>
-                <option value="hours">Hours</option>
-                <option value="days" selected>Days</option>
-                <option value="weeks">Weeks</option>
-              </select>
+          </div>
+          <div class="schedule-custom-options" id="schedule-custom-options" style="display: none">
+            <div class="schedule-form-row">
+              <div class="schedule-form-group">
+                <label class="schedule-form-label" for="schedule-interval-value">Every</label>
+                <input
+                  type="number"
+                  class="schedule-form-input"
+                  id="schedule-interval-value"
+                  min="1"
+                  value="1"
+                />
+              </div>
+              <div class="schedule-form-group">
+                <label class="schedule-form-label" for="schedule-interval-unit">Period</label>
+                <select class="schedule-form-select" id="schedule-interval-unit">
+                  <option value="minutes">Minutes</option>
+                  <option value="hours">Hours</option>
+                  <option value="days" selected>Days</option>
+                  <option value="weeks">Weeks</option>
+                </select>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="schedule-modal-footer">
-        <button class="schedule-modal-cancel" id="schedule-modal-cancel">Cancel</button>
-        <button class="schedule-modal-submit" id="schedule-modal-submit">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
-          </svg>
-          Schedule
-        </button>
+        <div class="schedule-modal-footer">
+          <button class="schedule-modal-cancel" id="schedule-modal-cancel">Cancel</button>
+          <button class="schedule-modal-submit" id="schedule-modal-submit">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10" />
+              <polyline points="12 6 12 12 16 14" />
+            </svg>
+            Schedule
+          </button>
+        </div>
       </div>
     </div>
-  </div>
-  <script src="/vendor/marked.min.js"></script>
-  <script src="/vendor/highlight.min.js"></script>
-  <script src="js/metrics.js"></script>
-  <script src="js/gateway.js"></script>
-  <script src="js/render.js"></script>
-  <script src="js/symipulse.js"></script>
-  <script src="js/app.js"></script>
-  <script src="js/menu.js"></script>
-  <script src="js/history.js"></script>
-  <script src="js/connections.js"></script>
-  <script src="js/subagents.js"></script>
-  <script src="js/scheduling.js"></script>
-  <script src="js/models.js"></script>
-</body>
+    <script src="/vendor/marked.min.js"></script>
+    <script src="/vendor/highlight.min.js"></script>
+    <script src="js/metrics.js"></script>
+    <script src="js/gateway.js"></script>
+    <script src="js/render.js"></script>
+    <script src="js/symipulse.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/menu.js"></script>
+    <script src="js/history.js"></script>
+    <script src="js/connections.js"></script>
+    <script src="js/subagents.js"></script>
+    <script src="js/scheduling.js"></script>
+    <script src="js/models.js"></script>
+    <script src="js/debug.js"></script>
+  </body>
 </html>