npm - neoagent - Versions diffs - 1.0.0 - Mend

neoagent 1.0.0

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 (54) hide show

package/.env.example +28 -0
package/LICENSE +21 -0
package/README.md +42 -0
package/bin/neoagent.js +8 -0
package/com.neoagent.plist +45 -0
package/docs/configuration.md +45 -0
package/docs/skills.md +45 -0
package/lib/manager.js +459 -0
package/package.json +61 -0
package/server/db/database.js +239 -0
package/server/index.js +442 -0
package/server/middleware/auth.js +35 -0
package/server/public/app.html +559 -0
package/server/public/css/app.css +608 -0
package/server/public/css/styles.css +472 -0
package/server/public/favicon.svg +17 -0
package/server/public/js/app.js +3283 -0
package/server/public/login.html +313 -0
package/server/routes/agents.js +125 -0
package/server/routes/auth.js +105 -0
package/server/routes/browser.js +116 -0
package/server/routes/mcp.js +164 -0
package/server/routes/memory.js +193 -0
package/server/routes/messaging.js +153 -0
package/server/routes/protocols.js +87 -0
package/server/routes/scheduler.js +63 -0
package/server/routes/settings.js +98 -0
package/server/routes/skills.js +107 -0
package/server/routes/store.js +1192 -0
package/server/services/ai/compaction.js +82 -0
package/server/services/ai/engine.js +1690 -0
package/server/services/ai/models.js +46 -0
package/server/services/ai/multiStep.js +112 -0
package/server/services/ai/providers/anthropic.js +181 -0
package/server/services/ai/providers/base.js +40 -0
package/server/services/ai/providers/google.js +187 -0
package/server/services/ai/providers/grok.js +121 -0
package/server/services/ai/providers/ollama.js +162 -0
package/server/services/ai/providers/openai.js +167 -0
package/server/services/ai/toolRunner.js +218 -0
package/server/services/browser/controller.js +320 -0
package/server/services/cli/executor.js +204 -0
package/server/services/mcp/client.js +260 -0
package/server/services/memory/embeddings.js +126 -0
package/server/services/memory/manager.js +431 -0
package/server/services/messaging/base.js +23 -0
package/server/services/messaging/discord.js +238 -0
package/server/services/messaging/manager.js +328 -0
package/server/services/messaging/telegram.js +243 -0
package/server/services/messaging/telnyx.js +693 -0
package/server/services/messaging/whatsapp.js +304 -0
package/server/services/scheduler/cron.js +312 -0
package/server/services/websocket.js +191 -0
package/server/utils/security.js +71 -0

package/server/public/app.html ADDED Viewed

@@ -0,0 +1,559 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NeoAgent</title>
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="/css/styles.css">
+  <link rel="stylesheet" href="/css/app.css">
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
+</head>
+<body>
+  <div id="app">
+    <!-- Sidebar -->
+    <aside class="sidebar" id="sidebar">
+      <div class="sidebar-header">
+        <div class="sidebar-logo">
+          <div class="logo-icon-sm">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-linecap="round"
+              stroke-linejoin="round">
+              <polygon points="12,2 2,7 12,12 22,7" fill="white" stroke="none" />
+              <polyline points="2,17 12,22 22,17" fill="none" stroke="white" stroke-width="2" />
+              <polyline points="2,12 12,17 22,12" fill="none" stroke="white" stroke-width="2" />
+            </svg>
+          </div>
+          <span class="logo-text">NeoAgent</span>
+        </div>
+      </div>
+      <!-- main nav -->
+      <nav class="sidebar-nav">
+        <button class="sidebar-btn active" data-page="chat">
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+          </svg>
+          Chat
+        </button>
+        <button class="sidebar-btn" data-page="activity" id="activityNavBtn">
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+          </svg>
+          Activity
+          <span class="activity-badge hidden" id="activityBadge"></span>
+        </button>
+        <div class="sidebar-divider"></div>
+        <button class="sidebar-btn" data-page="messaging">
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+          </svg>
+          Messaging
+        </button>
+        <button class="sidebar-btn" data-page="mcp">
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <rect x="2" y="2" width="20" height="8" rx="2" ry="2" />
+            <rect x="2" y="14" width="20" height="8" rx="2" ry="2" />
+            <line x1="6" y1="6" x2="6.01" y2="6" />
+            <line x1="6" y1="18" x2="6.01" y2="18" />
+          </svg>
+          MCP Servers
+        </button>
+        <button class="sidebar-btn" data-page="scheduler">
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10" />
+            <polyline points="12 6 12 12 16 14" />
+          </svg>
+          Scheduler
+        </button>
+        <button class="sidebar-btn" data-page="memory">
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+          </svg>
+          Memory
+        </button>
+        <button class="sidebar-btn" data-page="skills">
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <polygon
+              points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+          </svg>
+          Skills
+        </button>
+        <button class="sidebar-btn" data-page="protocols">
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+            <polyline points="14 2 14 8 20 8" />
+            <line x1="16" y1="13" x2="8" y2="13" />
+            <line x1="16" y1="17" x2="8" y2="17" />
+            <polyline points="10 9 9 9 8 9" />
+          </svg>
+          Protocols
+        </button>
+        <button class="sidebar-btn" data-page="logs">
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="4 17 10 11 4 5" />
+            <line x1="12" y1="19" x2="20" y2="19" />
+          </svg>
+          Logs
+        </button>
+      </nav>
+      <!-- bottom actions -->
+      <div class="sidebar-footer">
+        <button class="sidebar-btn" id="settingsBtn">
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="3" />
+            <path
+              d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.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-2 2 2 2 0 0 1-2-2v-.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 0 2 2 0 0 1 0-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-2-2 2 2 0 0 1 2-2h.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 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.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 0 2 2 0 0 1 0 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 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+          </svg>
+          Settings
+        </button>
+        <button class="sidebar-btn" id="logoutBtn">
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+            <polyline points="16 17 21 12 16 7" />
+            <line x1="21" y1="12" x2="9" y2="12" />
+          </svg>
+          Logout
+        </button>
+      </div>
+    </aside>
+    <!-- Main Content -->
+    <main class="main-content">
+      <!-- Chat Page (default) -->
+      <div class="page active" id="page-chat">
+        <div class="chat-container">
+          <div class="chat-messages" id="chatMessages">
+            <div class="empty-state" id="chatEmpty" style="height:100%;">
+              <div
+                style="width:52px;height:52px;background:linear-gradient(135deg,var(--accent),#8b5cf6);border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 24px rgba(99,102,241,.4);margin-bottom:4px;">
+                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"
+                  stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M12 2L2 7l10 5 10-5-10-5z" />
+                  <path d="M2 17l10 5 10-5" />
+                  <path d="M2 12l10 5 10-5" />
+                </svg>
+              </div>
+              <p style="font-size:17px;font-weight:600;color:var(--text-primary);">How can I help?</p>
+              <span style="font-size:13px;color:var(--text-muted);max-width:320px;text-align:center;">Commands, web
+                browsing, messaging, memory — just ask.</span>
+            </div>
+          </div>
+          <div class="chat-input-area">
+            <div class="chat-input-wrapper">
+              <textarea id="chatInput" class="chat-input" placeholder="say something..." rows="1"></textarea>
+              <button id="chatSendBtn" class="btn btn-primary chat-send-btn" title="Send">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                  stroke-linecap="round" stroke-linejoin="round">
+                  <line x1="22" y1="2" x2="11" y2="13" />
+                  <polygon points="22 2 15 22 11 13 2 9 22 2" />
+                </svg>
+              </button>
+            </div>
+            <div class="chat-input-info">
+              <span class="text-xs text-muted">Press Enter to send, Shift+Enter for new line</span>
+              <span class="text-xs text-muted" id="modelIndicator">Smart Selector Active</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Activity Page -->
+      <div class="page" id="page-activity">
+        <div class="activity-container">
+          <!-- Left Sidebar: Run History -->
+          <div class="activity-sidebar" id="activitySidebar">
+            <div class="activity-sidebar-header">
+              <h2>Run History</h2>
+              <button class="btn-ghost" id="activityRefreshBtn" title="Refresh">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                  stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M21 2v6h-6"></path>
+                  <path d="M3 12a9 9 0 1 0 2.81-6.73L3 8"></path>
+                  <path d="M3 22v-6h6"></path>
+                  <path d="M21 12a9 9 0 1 0-2.81 6.73L21 16"></path>
+                </svg>
+              </button>
+            </div>
+            <div class="activity-sidebar-list" id="activitySidebarList">
+              <div class="activity-empty-text">Loading runs...</div>
+            </div>
+          </div>
+          <!-- Right Main Area: Timeline -->
+          <div class="activity-main" id="activityMain">
+            <div class="activity-main-header">
+              <h2 id="activityRunTitle">Select a run</h2>
+              <div class="activity-main-actions">
+                <span class="atl-run-timer" id="atlTimer" style="display:none;">0s</span>
+                <span class="atl-run-badge" id="atlRunStatus" style="display:none;"></span>
+              </div>
+            </div>
+            <div class="atl-viewport" id="activityFeedWrap">
+              <div class="atl-feed" id="activityFeed">
+                <div class="atl-empty" id="activityEmpty">
+                  <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+                  </svg>
+                  <p>No run selected</p>
+                  <span>Pick a past run or start a new task in chat.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Messaging Page -->
+      <div class="page" id="page-messaging">
+        <div class="page-header">
+          <h1>Messaging</h1>
+        </div>
+        <div class="page-body">
+          <div id="messagingQR" class="hidden" style="text-align:center;padding:40px;">
+            <p class="mb-4">Scan QR code with WhatsApp</p>
+            <div id="qrContainer"></div>
+            <button class="btn btn-secondary mt-4" id="cancelQR">Cancel</button>
+          </div>
+          <div id="platformList"></div>
+          <!-- Whitelist section rendered by JS -->
+          <div id="whitelistSection" class="mt-4"></div>
+        </div>
+      </div>
+      <!-- MCP Servers Page -->
+      <div class="page" id="page-mcp">
+        <div class="page-header">
+          <h1>MCP Servers</h1>
+          <button class="btn btn-primary" id="addMcpBtn">Add Server</button>
+        </div>
+        <div class="page-body">
+          <div id="mcpServerList"></div>
+        </div>
+      </div>
+      <!-- Scheduler Page -->
+      <div class="page" id="page-scheduler">
+        <div class="page-header">
+          <h1>Scheduler</h1>
+          <button class="btn btn-primary" id="addTaskBtn">Add Task</button>
+        </div>
+        <div class="page-body">
+          <div id="taskList"></div>
+        </div>
+      </div>
+      <!-- Memory Page -->
+      <div class="page" id="page-memory">
+        <div class="page-header">
+          <h1>Memory</h1>
+          <button class="btn btn-primary" id="addMemoryBtn">+ Add Memory</button>
+        </div>
+        <div class="page-body">
+          <div class="tabs">
+            <div class="tab active" data-mem-tab="memories">Memories</div>
+            <div class="tab" data-mem-tab="core">Core</div>
+            <div class="tab" data-mem-tab="soul">Soul</div>
+            <div class="tab" data-mem-tab="daily">Daily Logs</div>
+            <div class="tab" data-mem-tab="apikeys">API Keys</div>
+          </div>
+          <!-- Memories tab -->
+          <div class="mem-panel active" id="mem-memories">
+            <div style="display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;">
+              <input type="text" id="memorySearchInput" class="input" style="flex:1;min-width:200px;"
+                placeholder="Semantic search memories…" />
+              <button class="btn btn-sm btn-secondary" id="memorySearchBtn">Search</button>
+            </div>
+            <div id="memoryCategoryFilter" style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;">
+              <button class="btn btn-sm btn-primary" data-cat="">All</button>
+              <button class="btn btn-sm btn-secondary" data-cat="user_fact">User Facts</button>
+              <button class="btn btn-sm btn-secondary" data-cat="preference">Preferences</button>
+              <button class="btn btn-sm btn-secondary" data-cat="personality">Personality</button>
+              <button class="btn btn-sm btn-secondary" data-cat="episodic">Episodic</button>
+            </div>
+            <div id="memoryList"
+              style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;"></div>
+          </div>
+          <!-- Core memory tab -->
+          <div class="mem-panel" id="mem-core">
+            <div style="margin-bottom:14px;">
+              <p class="text-muted" style="font-size:0.85rem;margin-bottom:14px;">Core memory is injected into
+                <strong>every prompt</strong> — keep entries concise. Ideal for: user's name, standing preferences, how
+                the agent should behave.
+              </p>
+              <div id="coreMemoryList"></div>
+              <div style="display:flex;gap:8px;margin-top:12px;">
+                <select id="coreKeySelect" class="input" style="flex:0 0 auto;width:180px;">
+                  <option value="user_profile">user_profile</option>
+                  <option value="preferences">preferences</option>
+                  <option value="ai_personality">ai_personality</option>
+                  <option value="active_context">active_context</option>
+                </select>
+                <input type="text" id="coreValueInput" class="input" style="flex:1;" placeholder="Value…" />
+                <button class="btn btn-primary btn-sm" id="setCoreBtn">Set</button>
+              </div>
+            </div>
+          </div>
+          <!-- Soul tab -->
+          <div class="mem-panel" id="mem-soul">
+            <div class="flex justify-between items-center mb-4">
+              <span class="text-muted" style="font-size:0.85rem;">Agent personality &amp; identity — the agent can
+                rewrite this anytime using <code>memory_write</code> with target <code>soul</code>.</span>
+              <button class="btn btn-sm btn-secondary" id="saveSoulBtn">Save</button>
+            </div>
+            <textarea id="soulEditor" class="textarea font-mono" rows="20"
+              placeholder="No soul definition yet..."></textarea>
+          </div>
+          <!-- Daily Logs tab -->
+          <div class="mem-panel" id="mem-daily">
+            <div id="dailyLogs"></div>
+          </div>
+          <!-- API Keys tab -->
+          <div class="mem-panel" id="mem-apikeys">
+            <div class="flex justify-between items-center mb-4">
+              <span class="text-muted">Agent-managed API keys</span>
+              <button class="btn btn-sm btn-primary" id="addApiKeyBtn">Add Key</button>
+            </div>
+            <div id="apiKeyList"></div>
+          </div>
+        </div>
+      </div>
+      <!-- Add Memory Modal -->
+      <div class="modal-overlay hidden" id="addMemoryModal">
+        <div class="modal" style="max-width:500px;">
+          <div class="modal-header">
+            <h2>Add Memory</h2>
+            <button class="btn-ghost" id="closeAddMemory">&times;</button>
+          </div>
+          <div class="modal-body">
+            <div class="form-group">
+              <label class="form-label">Content</label>
+              <textarea id="newMemoryContent" class="textarea" rows="4"
+                placeholder="Write a clear, self-contained statement about what to remember…"></textarea>
+            </div>
+            <div class="form-group" style="display:flex;gap:12px;">
+              <div style="flex:1;">
+                <label class="form-label">Category</label>
+                <select id="newMemoryCategory" class="input" style="width:100%;">
+                  <option value="episodic">Episodic</option>
+                  <option value="user_fact">User Fact</option>
+                  <option value="preference">Preference</option>
+                  <option value="personality">Personality</option>
+                </select>
+              </div>
+              <div style="flex:1;">
+                <label class="form-label">Importance (1–10)</label>
+                <input type="number" id="newMemoryImportance" class="input" min="1" max="10" value="5"
+                  style="width:100%;" />
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-secondary" id="cancelAddMemory">Cancel</button>
+            <button class="btn btn-primary" id="confirmAddMemory">Save Memory</button>
+          </div>
+        </div>
+      </div>
+      <!-- Protocols Page -->
+      <div class="page" id="page-protocols">
+        <div class="page-header">
+          <h1>Protocols</h1>
+          <button class="btn btn-primary" id="addProtocolBtn">Add Protocol</button>
+        </div>
+        <div class="page-body">
+          <div class="protocols-list empty-state" id="protocolsList">
+            Loading protocols...
+          </div>
+        </div>
+      </div>
+      <!-- MCP Server Modal -->
+      <div class="modal-overlay hidden" id="mcpModal">
+        <div class="modal" style="max-width:580px;">
+          <div class="modal-header">
+            <h2 id="mcpModalTitle">Add MCP Server</h2>
+            <button class="btn-ghost" id="closeMcpModal">&times;</button>
+          </div>
+          <div class="modal-body">
+            <div class="form-group">
+              <label class="form-label">Name</label>
+              <input type="text" id="mcpName" class="input" placeholder="e.g., Local Weather Server">
+            </div>
+            <div class="form-group">
+              <label class="form-label">SSE URL</label>
+              <input type="text" id="mcpUrl" class="input" placeholder="http://localhost:8000/sse">
+            </div>
+            <div class="form-group">
+              <label class="form-label">Authentication Method</label>
+              <select id="mcpAuthType" class="input">
+                <option value="none">None</option>
+                <option value="bearer">Bearer Token (Static)</option>
+                <option value="oauth">Interactive OAuth</option>
+              </select>
+            </div>
+            <div id="mcpAuthBearerGroup" class="form-group hidden">
+              <label class="form-label">Bearer Token</label>
+              <input type="password" id="mcpAuthToken" class="input" placeholder="Token value (saved securely)">
+            </div>
+            <div id="mcpAuthOauthGroup" class="form-group hidden">
+              <label class="form-label">OAuth Client ID</label>
+              <input type="text" id="mcpAuthClientId" class="input" placeholder="client_id if required">
+              <label class="form-label mt-3">Auth Server URL (Optional)</label>
+              <input type="text" id="mcpAuthServerUrl" class="input" placeholder="Leave empty for auto-discovery">
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn-ghost" id="cancelMcpModal">Cancel</button>
+            <button class="btn-primary" id="saveMcpBtn">Save Server</button>
+          </div>
+        </div>
+      </div>
+      <!-- Protocol Modal -->
+      <div class="modal-overlay hidden" id="protocolModal">
+        <div class="modal" style="max-width:580px;">
+          <div class="modal-header">
+            <h2 id="protocolModalTitle">Add Protocol</h2>
+            <button class="btn-ghost" id="closeProtocolModal">&times;</button>
+          </div>
+          <div class="modal-body">
+            <div class="form-group">
+              <label class="form-label">Name</label>
+              <input type="text" id="protocolName" class="input" placeholder="e.g., Code Review Protocol">
+            </div>
+            <div class="form-group">
+              <label class="form-label">Description (Optional)</label>
+              <input type="text" id="protocolDesc" class="input" placeholder="What does this protocol do?">
+            </div>
+            <div class="form-group">
+              <label class="form-label">Content / Instructions</label>
+              <textarea id="protocolContent" class="textarea" rows="12"
+                placeholder="Write the detailed step-by-step instructions here..."></textarea>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn-ghost" id="cancelProtocolModal">Cancel</button>
+            <button class="btn-primary" id="saveProtocolBtn">Save Protocol</button>
+          </div>
+        </div>
+      </div>
+      <!-- Skills Page -->
+      <div class="page" id="page-skills">
+        <div class="page-header">
+          <h1>Skills</h1>
+          <button class="btn btn-primary" id="addSkillBtn">Add Skill</button>
+        </div>
+        <div class="page-body">
+          <div class="tabs mb-4">
+            <div class="tab active" data-skills-tab="installed">Installed</div>
+            <div class="tab" data-skills-tab="store">Store</div>
+          </div>
+          <div id="skillList" class="skills-panel"></div>
+          <div id="skillStore" class="skills-panel hidden"></div>
+        </div>
+      </div>
+      <!-- Logs Page -->
+      <div class="page" id="page-logs">
+        <div class="page-header" style="justify-content: space-between;">
+          <h1>Server Logs</h1>
+          <div>
+            <button class="btn btn-primary btn-sm" id="copyLogsBtn" style="margin-right: 8px;">Copy Debug Info</button>
+            <button class="btn btn-secondary btn-sm" id="clearLogsBtn">Clear</button>
+          </div>
+        </div>
+        <div class="page-body" style="height: calc(100% - 70px); padding: 0;">
+          <div id="logsContainer" class="logs-container"
+            style="background: #0f172a; height: 100%; overflow-y: auto; padding: 12px; font-family: monospace; font-size: 13px; color: #e2e8f0; border-radius: 8px;">
+            <!-- Logs will be appended here -->
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+  <!-- Settings Modal -->
+  <div class="modal-overlay hidden" id="settingsModal">
+    <div class="modal" style="max-width:550px;">
+      <div class="modal-header">
+        <h2>Settings</h2>
+        <button class="btn-ghost" id="closeSettings">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="form-group">
+          <label class="form-label">Heartbeat</label>
+          <label class="flex items-center gap-2" style="cursor:pointer;">
+            <input type="checkbox" id="settingHeartbeat">
+            <span>Enable scheduled heartbeat checks</span>
+          </label>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Browser</label>
+          <label class="flex items-center gap-2" style="cursor:pointer;">
+            <input type="checkbox" id="settingHeadlessBrowser">
+            <span>Run browser headless (no visible window)</span>
+          </label>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Default Chat Model</label>
+          <select id="settingDefaultChatModel" class="input">
+            <option value="auto">Smart Selector (Auto)</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Default Sub-agent Model</label>
+          <select id="settingDefaultSubagentModel" class="input">
+            <option value="auto">Smart Selector (Auto)</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Smart Selector Allowed Models</label>
+          <div id="modelCheckboxesContainer" style="display:flex; flex-direction:column; gap:8px;">
+            <!-- Rendered dynamically by app.js -->
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer" style="justify-content: space-between;">
+        <button class="btn btn-primary" id="updateAppBtn" style="background-color: var(--color-warning);">Update
+          App</button>
+        <div style="display: flex; gap: 8px;">
+          <button class="btn btn-secondary" id="cancelSettings">Cancel</button>
+          <button class="btn btn-primary" id="saveSettings">Save</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Toast Container -->
+  <div class="toast-container" id="toasts"></div>
+  <script src="/socket.io/socket.io.js"></script>
+  <script src="/js/app.js"></script>
+</body>
+</html>