npm - opc-agent - Versions diffs - 2.1.0 → 3.0.1 - Mend

opc-agent 2.1.0 → 3.0.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 (144) hide show

package/README.md +603 -545
package/dist/channels/voice.d.ts +59 -0
package/dist/channels/voice.js +351 -1
package/dist/cli.js +172 -1
package/dist/core/agent.d.ts +4 -0
package/dist/core/agent.js +35 -0
package/dist/core/collaboration.d.ts +89 -0
package/dist/core/collaboration.js +201 -0
package/dist/deploy/index.d.ts +40 -0
package/dist/deploy/index.js +261 -0
package/dist/index.d.ts +7 -1
package/dist/index.js +47 -3
package/dist/mcp/servers/calculator-mcp.d.ts +3 -0
package/dist/mcp/servers/calculator-mcp.js +65 -0
package/dist/mcp/servers/crypto-mcp.d.ts +3 -0
package/dist/mcp/servers/crypto-mcp.js +108 -0
package/dist/mcp/servers/database-mcp.d.ts +3 -0
package/dist/mcp/servers/database-mcp.js +73 -0
package/dist/mcp/servers/datetime-mcp.d.ts +3 -0
package/dist/mcp/servers/datetime-mcp.js +71 -0
package/dist/mcp/servers/filesystem.d.ts +3 -0
package/dist/mcp/servers/filesystem.js +101 -0
package/dist/mcp/servers/github-mcp.d.ts +3 -0
package/dist/mcp/servers/github-mcp.js +60 -0
package/dist/mcp/servers/index.d.ts +21 -0
package/dist/mcp/servers/index.js +50 -0
package/dist/mcp/servers/json-mcp.d.ts +3 -0
package/dist/mcp/servers/json-mcp.js +126 -0
package/dist/mcp/servers/memory-mcp.d.ts +3 -0
package/dist/mcp/servers/memory-mcp.js +60 -0
package/dist/mcp/servers/regex-mcp.d.ts +3 -0
package/dist/mcp/servers/regex-mcp.js +56 -0
package/dist/mcp/servers/web-mcp.d.ts +3 -0
package/dist/mcp/servers/web-mcp.js +51 -0
package/dist/schema/oad.d.ts +292 -12
package/dist/schema/oad.js +12 -1
package/dist/security/guardrails.d.ts +50 -0
package/dist/security/guardrails.js +197 -0
package/dist/studio/server.d.ts +31 -1
package/dist/studio/server.js +154 -3
package/dist/studio-ui/index.html +1278 -662
package/dist/tools/integrations/calendar.d.ts +3 -0
package/dist/tools/integrations/calendar.js +73 -0
package/dist/tools/integrations/code-exec.d.ts +3 -0
package/dist/tools/integrations/code-exec.js +42 -0
package/dist/tools/integrations/csv-analyzer.d.ts +3 -0
package/dist/tools/integrations/csv-analyzer.js +142 -0
package/dist/tools/integrations/database.d.ts +3 -0
package/dist/tools/integrations/database.js +44 -0
package/dist/tools/integrations/email-send.d.ts +3 -0
package/dist/tools/integrations/email-send.js +104 -0
package/dist/tools/integrations/git-tool.d.ts +3 -0
package/dist/tools/integrations/git-tool.js +49 -0
package/dist/tools/integrations/github-tool.d.ts +3 -0
package/dist/tools/integrations/github-tool.js +77 -0
package/dist/tools/integrations/image-gen.d.ts +3 -0
package/dist/tools/integrations/image-gen.js +58 -0
package/dist/tools/integrations/index.d.ts +30 -0
package/dist/tools/integrations/index.js +107 -0
package/dist/tools/integrations/jira.d.ts +3 -0
package/dist/tools/integrations/jira.js +85 -0
package/dist/tools/integrations/notion.d.ts +3 -0
package/dist/tools/integrations/notion.js +71 -0
package/dist/tools/integrations/npm-tool.d.ts +3 -0
package/dist/tools/integrations/npm-tool.js +49 -0
package/dist/tools/integrations/pdf-reader.d.ts +3 -0
package/dist/tools/integrations/pdf-reader.js +91 -0
package/dist/tools/integrations/slack.d.ts +3 -0
package/dist/tools/integrations/slack.js +67 -0
package/dist/tools/integrations/summarizer.d.ts +3 -0
package/dist/tools/integrations/summarizer.js +49 -0
package/dist/tools/integrations/translator.d.ts +3 -0
package/dist/tools/integrations/translator.js +48 -0
package/dist/tools/integrations/trello.d.ts +3 -0
package/dist/tools/integrations/trello.js +60 -0
package/dist/tools/integrations/vector-search.d.ts +3 -0
package/dist/tools/integrations/vector-search.js +44 -0
package/dist/tools/integrations/web-scraper.d.ts +3 -0
package/dist/tools/integrations/web-scraper.js +48 -0
package/dist/tools/integrations/web-search.d.ts +3 -0
package/dist/tools/integrations/web-search.js +60 -0
package/dist/tools/integrations/webhook.d.ts +3 -0
package/dist/tools/integrations/webhook.js +39 -0
package/dist/ui/components.d.ts +10 -0
package/dist/ui/components.js +123 -0
package/package.json +3 -3
package/src/channels/voice.ts +365 -0
package/src/cli.ts +176 -2
package/src/core/agent.ts +38 -0
package/src/core/collaboration.ts +275 -0
package/src/deploy/index.ts +255 -0
package/src/index.ts +21 -1
package/src/mcp/servers/calculator-mcp.ts +65 -0
package/src/mcp/servers/crypto-mcp.ts +73 -0
package/src/mcp/servers/database-mcp.ts +72 -0
package/src/mcp/servers/datetime-mcp.ts +69 -0
package/src/mcp/servers/filesystem.ts +66 -0
package/src/mcp/servers/github-mcp.ts +58 -0
package/src/mcp/servers/index.ts +63 -0
package/src/mcp/servers/json-mcp.ts +102 -0
package/src/mcp/servers/memory-mcp.ts +56 -0
package/src/mcp/servers/regex-mcp.ts +53 -0
package/src/mcp/servers/web-mcp.ts +49 -0
package/src/schema/oad.ts +13 -0
package/src/security/guardrails.ts +248 -0
package/src/studio/server.ts +166 -4
package/src/studio-ui/index.html +1278 -662
package/src/tools/integrations/calendar.ts +73 -0
package/src/tools/integrations/code-exec.ts +39 -0
package/src/tools/integrations/csv-analyzer.ts +92 -0
package/src/tools/integrations/database.ts +44 -0
package/src/tools/integrations/email-send.ts +76 -0
package/src/tools/integrations/git-tool.ts +42 -0
package/src/tools/integrations/github-tool.ts +76 -0
package/src/tools/integrations/image-gen.ts +56 -0
package/src/tools/integrations/index.ts +92 -0
package/src/tools/integrations/jira.ts +83 -0
package/src/tools/integrations/notion.ts +71 -0
package/src/tools/integrations/npm-tool.ts +48 -0
package/src/tools/integrations/pdf-reader.ts +58 -0
package/src/tools/integrations/slack.ts +65 -0
package/src/tools/integrations/summarizer.ts +49 -0
package/src/tools/integrations/translator.ts +48 -0
package/src/tools/integrations/trello.ts +60 -0
package/src/tools/integrations/vector-search.ts +42 -0
package/src/tools/integrations/web-scraper.ts +47 -0
package/src/tools/integrations/web-search.ts +58 -0
package/src/tools/integrations/webhook.ts +38 -0
package/src/ui/components.ts +127 -0
package/tests/brain-seed-extended.test.ts +490 -0
package/tests/collaboration.test.ts +319 -0
package/tests/deploy-and-dag.test.ts +196 -0
package/tests/guardrails.test.ts +177 -0
package/tests/integrations.test.ts +249 -0
package/tests/mcp-servers.test.ts +260 -0
package/tests/voice-enhanced.test.ts +169 -0
package/dist/dtv/data.d.ts +0 -18
package/dist/dtv/data.js +0 -25
package/dist/dtv/trust.d.ts +0 -19
package/dist/dtv/trust.js +0 -40
package/dist/dtv/value.d.ts +0 -23
package/dist/dtv/value.js +0 -38
package/dist/marketplace/index.d.ts +0 -34
package/dist/marketplace/index.js +0 -202

package/src/studio-ui/index.html CHANGED Viewed

@@ -1,662 +1,1278 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>OPC Studio</title>
-  <style>
-    /* === Global === */
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    :root {
-      --bg: #0a0a0a;
-      --bg-card: #141414;
-      --bg-hover: #1a1a1a;
-      --border: #262626;
-      --text: #e5e5e5;
-      --text-muted: #737373;
-      --accent: #3b82f6;
-      --accent-hover: #2563eb;
-      --green: #22c55e;
-      --red: #ef4444;
-      --yellow: #eab308;
-      --purple: #a855f7;
-      --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      --mono: 'SF Mono', 'Fira Code', monospace;
-      --radius: 8px;
-    }
-    body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; }
-    /* === Layout === */
-    .app { display: flex; min-height: 100vh; }
-    /* Sidebar */
-    .sidebar {
-      width: 240px; background: var(--bg-card); border-right: 1px solid var(--border);
-      padding: 16px; display: flex; flex-direction: column; position: fixed; height: 100vh;
-    }
-    .sidebar-logo { font-size: 18px; font-weight: 700; padding: 8px 12px; margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
-    .sidebar-logo span { color: var(--accent); }
-    .sidebar-nav { flex: 1; }
-    .nav-item {
-      display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius);
-      cursor: pointer; color: var(--text-muted); transition: all 0.15s; font-size: 14px; margin-bottom: 2px;
-    }
-    .nav-item:hover { background: var(--bg-hover); color: var(--text); }
-    .nav-item.active { background: var(--bg-hover); color: var(--text); font-weight: 500; }
-    .nav-item .icon { width: 18px; text-align: center; }
-    /* Main content */
-    .main { flex: 1; margin-left: 240px; padding: 32px; max-width: 1200px; }
-    /* Header */
-    .page-header { margin-bottom: 32px; }
-    .page-title { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
-    .page-subtitle { color: var(--text-muted); font-size: 14px; }
-    /* Cards */
-    .card {
-      background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
-      padding: 20px; margin-bottom: 16px;
-    }
-    .card-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
-    .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 24px; }
-    /* Stats */
-    .stat { text-align: center; padding: 16px; }
-    .stat-value { font-size: 32px; font-weight: 700; color: var(--accent); }
-    .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
-    /* Status badge */
-    .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
-    .badge-green { background: rgba(34,197,94,0.1); color: var(--green); }
-    .badge-red { background: rgba(239,68,68,0.1); color: var(--red); }
-    .badge-yellow { background: rgba(234,179,8,0.1); color: var(--yellow); }
-    .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
-    /* Table */
-    .table { width: 100%; border-collapse: collapse; }
-    .table th { text-align: left; padding: 10px 12px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
-    .table td { padding: 10px 12px; font-size: 14px; border-bottom: 1px solid var(--border); }
-    .table tr:hover { background: var(--bg-hover); }
-    /* Chat */
-    .chat-container { height: 500px; display: flex; flex-direction: column; }
-    .chat-messages { flex: 1; overflow-y: auto; padding: 16px; }
-    .chat-input-row { display: flex; gap: 8px; padding: 16px; border-top: 1px solid var(--border); }
-    .chat-input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; color: var(--text); font-size: 14px; outline: none; }
-    .chat-input:focus { border-color: var(--accent); }
-    .chat-send { background: var(--accent); color: white; border: none; border-radius: var(--radius); padding: 10px 20px; font-weight: 500; cursor: pointer; }
-    .chat-send:hover { background: var(--accent-hover); }
-    .message { margin-bottom: 16px; }
-    .message-user { text-align: right; }
-    .message-user .bubble { background: var(--accent); color: white; display: inline-block; padding: 10px 14px; border-radius: 14px 14px 4px 14px; max-width: 70%; text-align: left; }
-    .message-agent .bubble { background: var(--bg-hover); display: inline-block; padding: 10px 14px; border-radius: 14px 14px 14px 4px; max-width: 70%; }
-    .message-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
-    /* Config editor */
-    .editor { width: 100%; min-height: 400px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; color: var(--text); font-family: var(--mono); font-size: 13px; line-height: 1.6; resize: vertical; outline: none; }
-    .editor:focus { border-color: var(--accent); }
-    /* Button */
-    .btn { padding: 8px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); transition: all 0.15s; }
-    .btn:hover { background: var(--bg-hover); }
-    .btn-primary { background: var(--accent); border-color: var(--accent); color: white; }
-    .btn-primary:hover { background: var(--accent-hover); }
-    /* Doctor checks */
-    .check-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
-    .check-icon { font-size: 16px; }
-    .check-name { font-weight: 500; min-width: 180px; }
-    .check-detail { color: var(--text-muted); font-size: 13px; }
-    .check-fix { color: var(--yellow); font-size: 12px; font-style: italic; }
-    /* Memory list */
-    .memory-item { padding: 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
-    .memory-item:hover { background: var(--bg-hover); }
-    .memory-slug { font-weight: 500; font-family: var(--mono); font-size: 13px; }
-    .memory-preview { color: var(--text-muted); font-size: 13px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .memory-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
-    /* Search */
-    .search-bar { display: flex; gap: 8px; margin-bottom: 16px; }
-    .search-input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px; color: var(--text); font-size: 14px; outline: none; }
-    /* Page sections (hidden by default) */
-    .page { display: none; }
-    .page.active { display: block; }
-    /* Scrollbar */
-    ::-webkit-scrollbar { width: 6px; }
-    ::-webkit-scrollbar-track { background: transparent; }
-    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-    /* Loading */
-    .loading { color: var(--text-muted); text-align: center; padding: 40px; }
-    .spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
-    @keyframes spin { to { transform: rotate(360deg); } }
-  </style>
-</head>
-<body>
-  <div class="app">
-    <!-- Sidebar -->
-    <nav class="sidebar">
-      <div class="sidebar-logo">⚡ <span>OPC</span> Studio</div>
-      <div class="sidebar-nav">
-        <div class="nav-item active" data-page="dashboard"><span class="icon">📊</span> Dashboard</div>
-        <div class="nav-item" data-page="chat"><span class="icon">💬</span> Chat</div>
-        <div class="nav-item" data-page="config"><span class="icon">⚙️</span> Config</div>
-        <div class="nav-item" data-page="memory"><span class="icon">🧠</span> Memory</div>
-        <div class="nav-item" data-page="skills"><span class="icon">🛠</span> Skills</div>
-        <div class="nav-item" data-page="tools"><span class="icon">🔧</span> Tools</div>
-        <div class="nav-item" data-page="channels"><span class="icon">📡</span> Channels</div>
-        <div class="nav-item" data-page="workflows"><span class="icon">🔀</span> Workflows</div>
-        <div class="nav-item" data-page="jobs"><span class="icon">⏰</span> Jobs</div>
-        <div class="nav-item" data-page="plugins"><span class="icon">🔌</span> Plugins</div>
-        <div class="nav-item" data-page="protocols"><span class="icon">📡</span> Protocols</div>
-        <div class="nav-item" data-page="doctor"><span class="icon">🩺</span> Doctor</div>
-        <div class="nav-item" data-page="evals"><span class="icon">🧪</span> Evals</div>
-        <div class="nav-item" data-page="telemetry"><span class="icon">📈</span> Telemetry</div>
-        <div class="nav-item" data-page="logs"><span class="icon">📜</span> Logs</div>
-        <div style="padding: 8px 12px; margin-top: 16px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;">Modules</div>
-        <div class="nav-item" data-page="modules"><span class="icon">🔌</span> Modules</div>
-        <div class="nav-item" data-page="brain-module"><span class="icon">🧠</span> DeepBrain</div>
-        <div class="nav-item" data-page="kits-module"><span class="icon">📊</span> AgentKits</div>
-        <div class="nav-item" data-page="workstation-module"><span class="icon">👤</span> Workstation</div>
-      </div>
-      <div style="padding: 8px 12px; font-size: 11px; color: var(--text-muted);">OPC Agent v2.1</div>
-    </nav>
-    <!-- Main Content -->
-    <main class="main">
-      <!-- Dashboard -->
-      <div class="page active" id="page-dashboard">
-        <div class="page-header">
-          <div class="page-title">Dashboard</div>
-          <div class="page-subtitle">Agent overview and health status</div>
-        </div>
-        <div class="card-grid">
-          <div class="card stat"><div class="stat-value" id="agent-name">—</div><div class="stat-label">Agent Name</div></div>
-          <div class="card stat"><div class="stat-value" id="agent-model">—</div><div class="stat-label">Model</div></div>
-          <div class="card stat"><div class="stat-value" id="agent-channels">—</div><div class="stat-label">Channels</div></div>
-          <div class="card stat"><div class="stat-value" id="agent-skills">—</div><div class="stat-label">Skills</div></div>
-        </div>
-        <div class="card">
-          <div class="card-title">🟢 Agent Status</div>
-          <div id="agent-status-detail">Loading...</div>
-        </div>
-        <div class="card">
-          <div class="card-title">🧠 Memory Stats</div>
-          <div id="memory-stats">Loading...</div>
-        </div>
-      </div>
-      <!-- Chat -->
-      <div class="page" id="page-chat">
-        <div class="page-header">
-          <div class="page-title">Chat</div>
-          <div class="page-subtitle">Test your agent in real-time</div>
-        </div>
-        <div class="card chat-container">
-          <div class="chat-messages" id="chat-messages">
-            <div class="message message-agent"><div class="message-label">Agent</div><div class="bubble">Hi! I'm ready to chat. Type a message below.</div></div>
-          </div>
-          <div class="chat-input-row">
-            <input class="chat-input" id="chat-input" placeholder="Type a message..." onkeydown="if(event.key==='Enter')sendChat()">
-            <button class="chat-send" onclick="sendChat()">Send</button>
-          </div>
-        </div>
-      </div>
-      <!-- Config -->
-      <div class="page" id="page-config">
-        <div class="page-header">
-          <div class="page-title">Configuration</div>
-          <div class="page-subtitle">Edit agent.yaml</div>
-        </div>
-        <div class="card">
-          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
-            <div class="card-title" style="margin:0">agent.yaml</div>
-            <button class="btn btn-primary" onclick="saveConfig()">Save</button>
-          </div>
-          <textarea class="editor" id="config-editor">Loading...</textarea>
-        </div>
-      </div>
-      <!-- Memory -->
-      <div class="page" id="page-memory">
-        <div class="page-header">
-          <div class="page-title">Memory</div>
-          <div class="page-subtitle">DeepBrain knowledge pages</div>
-        </div>
-        <div class="search-bar">
-          <input class="search-input" id="memory-search" placeholder="Search memories..." onkeydown="if(event.key==='Enter')searchMemory()">
-          <button class="btn" onclick="searchMemory()">Search</button>
-        </div>
-        <div class="card" id="memory-list">Loading...</div>
-      </div>
-      <!-- Skills -->
-      <div class="page" id="page-skills">
-        <div class="page-header">
-          <div class="page-title">Skills</div>
-          <div class="page-subtitle">Agent capabilities</div>
-        </div>
-        <div class="card" id="skills-list">Loading...</div>
-      </div>
-      <!-- Tools -->
-      <div class="page" id="page-tools">
-        <div class="page-header">
-          <div class="page-title">Tools</div>
-          <div class="page-subtitle">Built-in and MCP tools</div>
-        </div>
-        <div class="card" id="tools-list">Loading...</div>
-      </div>
-      <!-- Channels -->
-      <div class="page" id="page-channels">
-        <div class="page-header">
-          <div class="page-title">Channels</div>
-          <div class="page-subtitle">Communication endpoints</div>
-        </div>
-        <div class="card" id="channels-list">Loading...</div>
-      </div>
-      <!-- Workflows -->
-      <div class="page" id="page-workflows">
-        <div class="page-header">
-          <div class="page-title">Workflows</div>
-          <div class="page-subtitle">Agent workflow definitions</div>
-        </div>
-        <div class="card" id="workflows-list">Loading...</div>
-      </div>
-      <!-- Jobs -->
-      <div class="page" id="page-jobs">
-        <div class="page-header">
-          <div class="page-title">Scheduled Jobs</div>
-          <div class="page-subtitle">Cron tasks</div>
-        </div>
-        <div class="card" id="jobs-list">Loading...</div>
-      </div>
-      <!-- Plugins -->
-      <div class="page" id="page-plugins">
-        <div class="page-header">
-          <div class="page-title">Plugins</div>
-          <div class="page-subtitle">Middleware and extensions</div>
-        </div>
-        <div class="card" id="plugins-list">Loading...</div>
-      </div>
-      <!-- Doctor -->
-      <div class="page" id="page-doctor">
-        <div class="page-header">
-          <div class="page-title">Doctor</div>
-          <div class="page-subtitle">Environment health check</div>
-        </div>
-        <div class="card" id="doctor-results">
-          <button class="btn btn-primary" onclick="runDoctor()">Run Diagnostic</button>
-        </div>
-      </div>
-      <!-- Logs -->
-      <div class="page" id="page-evals">
-        <div class="page-header">
-          <div class="page-title">🧪 Evals</div>
-          <div class="page-subtitle">Agent quality evaluation</div>
-        </div>
-        <div class="card" id="eval-panel">
-          <div style="margin-bottom:16px">
-            <label>Suite: </label>
-            <select id="eval-suite-select" style="padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);color:var(--text)">
-              <option value="basic">basic</option>
-              <option value="safety">safety</option>
-              <option value="memory">memory</option>
-            </select>
-            <button class="btn btn-primary" onclick="runEval()" style="margin-left:8px">Run Suite</button>
-          </div>
-          <div id="eval-results"></div>
-        </div>
-      </div>
-      <!-- Telemetry -->
-      <div class="page" id="page-telemetry">
-        <div class="page-header">
-          <div class="page-title">Telemetry</div>
-          <div class="page-subtitle">OTel-compatible tracing & metrics</div>
-        </div>
-        <div class="card-grid" style="grid-template-columns: repeat(4,1fr); margin-bottom:16px">
-          <div class="card" id="tel-total-spans"><div style="font-size:11px;color:var(--text-muted)">Total Spans</div><div style="font-size:24px;font-weight:700" id="tel-stat-spans">—</div></div>
-          <div class="card" id="tel-total-traces"><div style="font-size:11px;color:var(--text-muted)">Total Traces</div><div style="font-size:24px;font-weight:700" id="tel-stat-traces">—</div></div>
-          <div class="card" id="tel-error-rate"><div style="font-size:11px;color:var(--text-muted)">Error Rate</div><div style="font-size:24px;font-weight:700" id="tel-stat-errors">—</div></div>
-          <div class="card" id="tel-p95"><div style="font-size:11px;color:var(--text-muted)">P95 Latency</div><div style="font-size:24px;font-weight:700" id="tel-stat-p95">—</div></div>
-        </div>
-        <div class="card" style="margin-bottom:16px">
-          <h3 style="margin:0 0 12px">Recent Traces</h3>
-          <div id="tel-traces-list" style="font-family:var(--mono);font-size:12px">Loading...</div>
-        </div>
-        <div class="card">
-          <h3 style="margin:0 0 12px">Trace Waterfall</h3>
-          <div id="tel-waterfall" style="font-family:var(--mono);font-size:12px;min-height:100px;color:var(--text-muted)">Click a trace above to view spans</div>
-        </div>
-      </div>
-      <!-- Logs -->
-      <div class="page" id="page-logs">
-        <div class="page-header">
-          <div class="page-title">Logs</div>
-          <div class="page-subtitle">Recent agent activity</div>
-        </div>
-        <div class="card"><pre id="logs-content" style="font-family:var(--mono);font-size:12px;max-height:600px;overflow:auto;color:var(--text-muted)">Loading...</pre></div>
-      </div>
-      <!-- Modules Status -->
-      <div class="page" id="page-modules">
-        <div class="page-header">
-          <div class="page-title">Modules</div>
-          <div class="page-subtitle">Sub-module status and health</div>
-        </div>
-        <div id="modules-grid" class="card-grid">Loading...</div>
-      </div>
-      <!-- DeepBrain Module -->
-      <div class="page" id="page-brain-module">
-        <iframe src="/brain/" style="width:100%;height:calc(100vh - 32px);border:none;border-radius:8px;"></iframe>
-      </div>
-      <!-- AgentKits Module -->
-      <div class="page" id="page-kits-module">
-        <iframe src="/kits/" style="width:100%;height:calc(100vh - 32px);border:none;border-radius:8px;"></iframe>
-      </div>
-      <!-- Workstation Module -->
-      <div class="page" id="page-workstation-module">
-        <iframe src="/workstation/" style="width:100%;height:calc(100vh - 32px);border:none;border-radius:8px;"></iframe>
-      </div>
-    </main>
-  </div>
-  <script>
-    const API = '';  // same origin
-    // Navigation
-    document.querySelectorAll('.nav-item').forEach(item => {
-      item.addEventListener('click', () => {
-        document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
-        document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
-        item.classList.add('active');
-        const page = item.dataset.page;
-        document.getElementById('page-' + page).classList.add('active');
-        loadPage(page);
-      });
-    });
-    // Page loaders
-    async function loadPage(page) {
-      switch (page) {
-        case 'dashboard': loadDashboard(); break;
-        case 'config': loadConfig(); break;
-        case 'memory': loadMemory(); break;
-        case 'skills': loadSkills(); break;
-        case 'tools': loadTools(); break;
-        case 'channels': loadChannels(); break;
-        case 'workflows': loadWorkflows(); break;
-        case 'jobs': loadJobs(); break;
-        case 'plugins': loadPlugins(); break;
-        case 'protocols': loadProtocols(); break;
-        case 'logs': loadLogs(); break;
-        case 'modules': loadModules(); break;
-        case 'telemetry': loadTelemetry(); break;
-        case 'evals': break; // static page, run via button
-      }
-    }
-    async function api(path) {
-      const r = await fetch(API + '/api/' + path);
-      return r.json();
-    }
-    async function apiPost(path, body) {
-      const r = await fetch(API + '/api/' + path, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
-      return r.json();
-    }
-    async function apiPut(path, body) {
-      const r = await fetch(API + '/api/' + path, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
-      return r.json();
-    }
-    // Dashboard
-    async function loadDashboard() {
-      try {
-        const info = await api('agent/info');
-        document.getElementById('agent-name').textContent = info.name || '—';
-        document.getElementById('agent-model').textContent = info.model || '—';
-        document.getElementById('agent-channels').textContent = info.channels?.length || 0;
-        document.getElementById('agent-skills').textContent = info.skills?.length || 0;
-        document.getElementById('agent-status-detail').innerHTML =
-          `<span class="badge badge-green"><span class="badge-dot"></span> ${info.status || 'unknown'}</span>` +
-          ` &nbsp; Provider: ${info.provider || '—'} &nbsp; Version: ${info.version || '—'}`;
-        const stats = await api('memory/stats');
-        document.getElementById('memory-stats').innerHTML =
-          `Pages: <strong>${stats.pages || 0}</strong> &nbsp; Chunks: <strong>${stats.chunks || 0}</strong>`;
-      } catch (e) {
-        document.getElementById('agent-status-detail').textContent = 'Failed to connect to agent';
-      }
-    }
-    // Chat
-    async function sendChat() {
-      const input = document.getElementById('chat-input');
-      const msg = input.value.trim();
-      if (!msg) return;
-      input.value = '';
-      const messages = document.getElementById('chat-messages');
-      messages.innerHTML += `<div class="message message-user"><div class="message-label">You</div><div class="bubble">${escapeHtml(msg)}</div></div>`;
-      messages.innerHTML += `<div class="message message-agent" id="pending"><div class="message-label">Agent</div><div class="bubble"><span class="spinner"></span> Thinking...</div></div>`;
-      messages.scrollTop = messages.scrollHeight;
-      try {
-        const result = await apiPost('agent/chat', { message: msg, sessionId: 'studio' });
-        document.getElementById('pending').innerHTML = `<div class="message-label">Agent</div><div class="bubble">${escapeHtml(result.response || 'No response')}</div>`;
-        document.getElementById('pending').id = '';
-      } catch (e) {
-        document.getElementById('pending').innerHTML = `<div class="message-label">Agent</div><div class="bubble" style="color:var(--red)">Error: ${e.message}</div>`;
-        document.getElementById('pending').id = '';
-      }
-      messages.scrollTop = messages.scrollHeight;
-    }
-    // Config
-    async function loadConfig() {
-      const data = await api('agent/config');
-      document.getElementById('config-editor').value = data.content || '# No config found';
-    }
-    async function saveConfig() {
-      const content = document.getElementById('config-editor').value;
-      await apiPut('agent/config', { content });
-      alert('Config saved!');
-    }
-    // Memory
-    async function loadMemory() {
-      const data = await api('memory/list');
-      const el = document.getElementById('memory-list');
-      if (!data.pages?.length) { el.innerHTML = '<div class="loading">No memories yet</div>'; return; }
-      el.innerHTML = data.pages.map(p => `
-        <div class="memory-item">
-          <div class="memory-slug">${escapeHtml(p.slug || p.title || '—')}</div>
-          <div class="memory-preview">${escapeHtml((p.compiled_truth || p.content || '').slice(0, 100))}</div>
-          <div class="memory-meta">Type: ${p.type || '—'} | Tags: ${(p.tags || []).join(', ') || '—'}</div>
-        </div>
-      `).join('');
-    }
-    async function searchMemory() {
-      const q = document.getElementById('memory-search').value;
-      if (!q) return loadMemory();
-      const data = await api('memory/search?q=' + encodeURIComponent(q));
-      const el = document.getElementById('memory-list');
-      if (!data.results?.length) { el.innerHTML = '<div class="loading">No results</div>'; return; }
-      el.innerHTML = data.results.map(r => `
-        <div class="memory-item">
-          <div class="memory-slug">${escapeHtml(r.slug || r.title || '—')}</div>
-          <div class="memory-preview">${escapeHtml((r.compiled_truth || r.content || '').slice(0, 100))}</div>
-        </div>
-      `).join('');
-    }
-    // Generic list loaders
-    async function loadSkills() {
-      const data = await api('skills/list');
-      renderList('skills-list', data.skills || [], s => `<strong>${s.name}</strong> — ${s.description || '—'} (used ${s.usageCount || 0} times)`);
-    }
-    async function loadTools() {
-      const data = await api('tools/list');
-      renderList('tools-list', data.tools || [], t => `<strong>🔧 ${t.name}</strong> — ${t.description || '—'}`);
-    }
-    async function loadChannels() {
-      const data = await api('channels/list');
-      renderList('channels-list', data.channels || [], c => `<span class="badge badge-green"><span class="badge-dot"></span> ${c.type}</span> ${c.port ? 'Port ' + c.port : ''} ${c.mode || ''}`);
-    }
-    async function loadWorkflows() {
-      const data = await api('workflows/list');
-      renderList('workflows-list', data.workflows || [], w => `<strong>${w.name}</strong> — ${w.steps?.length || 0} steps`);
-    }
-    async function loadJobs() {
-      const data = await api('jobs/list');
-      renderList('jobs-list', data.jobs || [], j => `<strong>⏰ ${j.name}</strong> — <code>${j.schedule}</code> — ${j.task || '—'}`);
-    }
-    async function loadPlugins() {
-      const data = await api('plugins/list');
-      renderList('plugins-list', data.plugins || [], p => `<strong>🔌 ${p.name}</strong> ${p.config ? JSON.stringify(p.config) : ''}`);
-    }
-    async function loadProtocols() {
-      const data = await api('protocols');
-      const list = data.protocols || [];
-      const content = document.getElementById('content');
-      content.innerHTML = `<h2>📡 Protocols</h2><div class="grid">${list.map(p =>
-        `<div class="card stat"><div class="stat-value">${p.enabled ? '🟢' : '⚫'} ${p.name}</div><div class="stat-label">${p.description}</div></div>`
-      ).join('')}</div>`;
-    }
-    async function loadLogs() {
-      const data = await api('logs/recent');
-      document.getElementById('logs-content').textContent = (data.lines || []).join('\n') || 'No logs';
-    }
-    // Modules
-    async function loadModules() {
-      const data = await api('modules');
-      const grid = document.getElementById('modules-grid');
-      if (data.modules) {
-        grid.innerHTML = data.modules.map(m => `
-          <div class="card stat" style="cursor:pointer" onclick="document.querySelector('[data-page=${m.path.replace(/\//g,'')}-module]')?.click()">
-            <div class="stat-value">${m.icon} ${m.name}</div>
-            <div class="stat-label">${m.running ? '🟢 Running on port ' + m.port : '⚫ Not running'}</div>
-          </div>`).join('');
-      } else {
-        grid.innerHTML = '<div class="card">Failed to load module status</div>';
-      }
-    }
-    // Telemetry
-    async function loadTelemetry() {
-      const stats = await api('telemetry/stats');
-      if (stats && !stats.error) {
-        document.getElementById('tel-stat-spans').textContent = stats.totalSpans;
-        document.getElementById('tel-stat-traces').textContent = stats.totalTraces;
-        document.getElementById('tel-stat-errors').textContent = (stats.errorRate * 100).toFixed(1) + '%';
-        document.getElementById('tel-stat-p95').textContent = stats.p95Latency.toFixed(0) + 'ms';
-      }
-      const tracesData = await api('telemetry/traces?limit=50');
-      const el = document.getElementById('tel-traces-list');
-      if (tracesData.traces && tracesData.traces.length > 0) {
-        el.innerHTML = '<table style="width:100%;border-collapse:collapse"><tr style="color:var(--text-muted);text-align:left"><th>Trace ID</th><th>Root Span</th><th>Time</th><th>Spans</th><th>Status</th></tr>' +
-          tracesData.traces.map(t => {
-            const time = new Date(t.startTime).toLocaleTimeString();
-            const statusColor = t.status === 'ok' ? '#4ade80' : t.status === 'error' ? '#f87171' : '#9ca3af';
-            return `<tr style="cursor:pointer;border-top:1px solid var(--border)" onclick="loadTraceWaterfall('${t.traceId}')"><td style="padding:6px;color:var(--accent)">${t.traceId.slice(0,12)}</td><td>${t.rootSpan}</td><td>${time}</td><td>${t.spanCount}</td><td style="color:${statusColor}">${t.status}</td></tr>`;
-          }).join('') + '</table>';
-      } else {
-        el.innerHTML = '<div style="color:var(--text-muted)">No traces yet. Enable telemetry: spec.telemetry.enabled: true</div>';
-      }
-    }
-    async function loadTraceWaterfall(traceId) {
-      const data = await api('telemetry/traces?id=' + traceId);
-      const el = document.getElementById('tel-waterfall');
-      if (!data.spans || data.spans.length === 0) { el.innerHTML = 'No spans found'; return; }
-      const spans = data.spans;
-      const minTime = Math.min(...spans.map(s => s.startTime));
-      const maxTime = Math.max(...spans.map(s => s.endTime || s.startTime));
-      const totalDur = maxTime - minTime || 1;
-      const depthMap = {};
-      spans.forEach(s => { depthMap[s.spanId] = s.parentSpanId && depthMap[s.parentSpanId] !== undefined ? depthMap[s.parentSpanId] + 1 : 0; });
-      el.innerHTML = spans.map(s => {
-        const left = ((s.startTime - minTime) / totalDur * 70).toFixed(1);
-        const width = Math.max(1, ((s.endTime || s.startTime) - s.startTime) / totalDur * 70).toFixed(1);
-        const color = s.status === 'ok' ? '#4ade80' : s.status === 'error' ? '#f87171' : '#60a5fa';
-        const depth = depthMap[s.spanId] || 0;
-        const dur = s.endTime ? (s.endTime - s.startTime) + 'ms' : '—';
-        return `<div style="display:flex;align-items:center;margin:2px 0;padding-left:${depth*20}px"><span style="width:180px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${s.name}</span><div style="flex:1;position:relative;height:18px;background:var(--bg-hover);border-radius:3px"><div style="position:absolute;left:${left}%;width:${width}%;height:100%;background:${color};border-radius:3px;opacity:0.8" title="${dur}"></div></div><span style="width:60px;text-align:right;flex-shrink:0;margin-left:8px">${dur}</span></div>`;
-      }).join('');
-    }
-    window.loadTraceWaterfall = loadTraceWaterfall;
-    // Doctor
-    async function runDoctor() {
-      const el = document.getElementById('doctor-results');
-      el.innerHTML = '<div class="loading"><span class="spinner"></span> Running checks...</div>';
-      const data = await api('doctor/check');
-      if (data.checks) {
-        el.innerHTML = data.checks.map(c => `
-          <div class="check-item">
-            <span class="check-icon">${c.ok ? '✅' : '❌'}</span>
-            <span class="check-name">${c.name}</span>
-            <span class="check-detail">${c.detail || ''}</span>
-            ${c.fix ? `<span class="check-fix">→ ${c.fix}</span>` : ''}
-          </div>
-        `).join('') + `<div style="margin-top:16px"><button class="btn btn-primary" onclick="runDoctor()">Re-run</button></div>`;
-      } else {
-        el.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre><button class="btn btn-primary" onclick="runDoctor()">Re-run</button>`;
-      }
-    }
-    // Helpers
-    async function runEval() {
-      const suite = document.getElementById('eval-suite-select').value;
-      const el = document.getElementById('eval-results');
-      el.innerHTML = '<div class="loading"><span class="spinner"></span> Running eval...</div>';
-      try {
-        const resp = await fetch('/api/eval/run', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ suite }) });
-        const report = await resp.json();
-        let html = `<div style="margin-bottom:12px;font-weight:600">${report.summary || ''}</div>`;
-        html += '<table style="width:100%;border-collapse:collapse">';
-        html += '<tr style="border-bottom:1px solid var(--border)"><th style="text-align:left;padding:6px">Case</th><th>Status</th><th>Latency</th></tr>';
-        for (const r of (report.results || [])) {
-          const color = r.passed ? '#4ade80' : '#f87171';
-          html += `<tr style="border-bottom:1px solid var(--border)"><td style="padding:6px">${r.caseId}</td><td style="color:${color};text-align:center">${r.passed ? 'PASS' : 'FAIL'}</td><td style="text-align:center">${r.scores?.latency_ms || 0}ms</td></tr>`;
-        }
-        html += '</table>';
-        el.innerHTML = html;
-      } catch (e) { el.innerHTML = `<div style="color:#f87171">Error: ${e.message}</div>`; }
-    }
-    function renderList(id, items, renderFn) {
-      const el = document.getElementById(id);
-      if (!items.length) { el.innerHTML = '<div class="loading">None configured</div>'; return; }
-      el.innerHTML = '<table class="table"><tbody>' +
-        items.map(i => `<tr><td>${renderFn(i)}</td></tr>`).join('') +
-        '</tbody></table>';
-    }
-    function escapeHtml(s) {
-      return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
-    }
-    // Initial load
-    loadDashboard();
-  </script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OPC Studio</title>
+  <style>
+    /* === Global === */
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    :root {
+      --bg: #0a0a0a;
+      --bg-card: #141414;
+      --bg-hover: #1a1a1a;
+      --border: #262626;
+      --text: #e5e5e5;
+      --text-muted: #737373;
+      --accent: #3b82f6;
+      --accent-hover: #2563eb;
+      --green: #22c55e;
+      --red: #ef4444;
+      --yellow: #eab308;
+      --purple: #a855f7;
+      --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      --mono: 'SF Mono', 'Fira Code', monospace;
+      --radius: 8px;
+    }
+    body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; }
+    /* === Layout === */
+    .app { display: flex; min-height: 100vh; }
+    /* Sidebar */
+    .sidebar {
+      width: 240px; background: var(--bg-card); border-right: 1px solid var(--border);
+      padding: 16px; display: flex; flex-direction: column; position: fixed; height: 100vh;
+    }
+    .sidebar-logo { font-size: 18px; font-weight: 700; padding: 8px 12px; margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
+    .sidebar-logo span { color: var(--accent); }
+    .sidebar-nav { flex: 1; }
+    .nav-item {
+      display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius);
+      cursor: pointer; color: var(--text-muted); transition: all 0.15s; font-size: 14px; margin-bottom: 2px;
+    }
+    .nav-item:hover { background: var(--bg-hover); color: var(--text); }
+    .nav-item.active { background: var(--bg-hover); color: var(--text); font-weight: 500; }
+    .nav-item .icon { width: 18px; text-align: center; }
+    /* Main content */
+    .main { flex: 1; margin-left: 240px; padding: 32px; max-width: 1200px; }
+    /* Header */
+    .page-header { margin-bottom: 32px; }
+    .page-title { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
+    .page-subtitle { color: var(--text-muted); font-size: 14px; }
+    /* Cards */
+    .card {
+      background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
+      padding: 20px; margin-bottom: 16px;
+    }
+    .card-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
+    .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 24px; }
+    /* Stats */
+    .stat { text-align: center; padding: 16px; }
+    .stat-value { font-size: 32px; font-weight: 700; color: var(--accent); }
+    .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
+    /* Status badge */
+    .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
+    .badge-green { background: rgba(34,197,94,0.1); color: var(--green); }
+    .badge-red { background: rgba(239,68,68,0.1); color: var(--red); }
+    .badge-yellow { background: rgba(234,179,8,0.1); color: var(--yellow); }
+    .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+    /* Table */
+    .table { width: 100%; border-collapse: collapse; }
+    .table th { text-align: left; padding: 10px 12px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
+    .table td { padding: 10px 12px; font-size: 14px; border-bottom: 1px solid var(--border); }
+    .table tr:hover { background: var(--bg-hover); }
+    /* Chat */
+    .chat-container { height: 500px; display: flex; flex-direction: column; }
+    .chat-messages { flex: 1; overflow-y: auto; padding: 16px; }
+    .chat-input-row { display: flex; gap: 8px; padding: 16px; border-top: 1px solid var(--border); }
+    .chat-input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; color: var(--text); font-size: 14px; outline: none; }
+    .chat-input:focus { border-color: var(--accent); }
+    .chat-send { background: var(--accent); color: white; border: none; border-radius: var(--radius); padding: 10px 20px; font-weight: 500; cursor: pointer; }
+    .chat-send:hover { background: var(--accent-hover); }
+    .message { margin-bottom: 16px; }
+    .message-user { text-align: right; }
+    .message-user .bubble { background: var(--accent); color: white; display: inline-block; padding: 10px 14px; border-radius: 14px 14px 4px 14px; max-width: 70%; text-align: left; }
+    .message-agent .bubble { background: var(--bg-hover); display: inline-block; padding: 10px 14px; border-radius: 14px 14px 14px 4px; max-width: 70%; }
+    .message-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
+    /* Config editor */
+    .editor { width: 100%; min-height: 400px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; color: var(--text); font-family: var(--mono); font-size: 13px; line-height: 1.6; resize: vertical; outline: none; }
+    .editor:focus { border-color: var(--accent); }
+    /* Button */
+    .btn { padding: 8px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); transition: all 0.15s; }
+    .btn:hover { background: var(--bg-hover); }
+    .btn-primary { background: var(--accent); border-color: var(--accent); color: white; }
+    .btn-primary:hover { background: var(--accent-hover); }
+    /* Doctor checks */
+    .check-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
+    .check-icon { font-size: 16px; }
+    .check-name { font-weight: 500; min-width: 180px; }
+    .check-detail { color: var(--text-muted); font-size: 13px; }
+    .check-fix { color: var(--yellow); font-size: 12px; font-style: italic; }
+    /* Memory list */
+    .memory-item { padding: 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
+    .memory-item:hover { background: var(--bg-hover); }
+    .memory-slug { font-weight: 500; font-family: var(--mono); font-size: 13px; }
+    .memory-preview { color: var(--text-muted); font-size: 13px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .memory-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
+    /* Search */
+    .search-bar { display: flex; gap: 8px; margin-bottom: 16px; }
+    .search-input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px; color: var(--text); font-size: 14px; outline: none; }
+    /* Page sections (hidden by default) */
+    .page { display: none; }
+    .page.active { display: block; }
+    /* Scrollbar */
+    ::-webkit-scrollbar { width: 6px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+    /* Loading */
+    .loading { color: var(--text-muted); text-align: center; padding: 40px; }
+    .spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <!-- Sidebar -->
+    <nav class="sidebar">
+      <div class="sidebar-logo">⚡ <span>OPC</span> Studio</div>
+      <div class="sidebar-nav">
+        <div class="nav-item active" data-page="dashboard"><span class="icon">📊</span> Dashboard</div>
+        <div class="nav-item" data-page="chat"><span class="icon">💬</span> Chat</div>
+        <div class="nav-item" data-page="config"><span class="icon">⚙️</span> Config</div>
+        <div class="nav-item" data-page="memory"><span class="icon">🧠</span> Memory</div>
+        <div class="nav-item" data-page="skills"><span class="icon">🛠</span> Skills</div>
+        <div class="nav-item" data-page="tools"><span class="icon">🔧</span> Tools</div>
+        <div class="nav-item" data-page="channels"><span class="icon">📡</span> Channels</div>
+        <div class="nav-item" data-page="workflows"><span class="icon">🔀</span> Workflows</div>
+        <div class="nav-item" data-page="jobs"><span class="icon">⏰</span> Jobs</div>
+        <div class="nav-item" data-page="plugins"><span class="icon">🔌</span> Plugins</div>
+        <div class="nav-item" data-page="protocols"><span class="icon">📡</span> Protocols</div>
+        <div class="nav-item" data-page="doctor"><span class="icon">🩺</span> Doctor</div>
+        <div class="nav-item" data-page="evals"><span class="icon">🧪</span> Evals</div>
+        <div class="nav-item" data-page="telemetry"><span class="icon">📈</span> Telemetry</div>
+        <div class="nav-item" data-page="logs"><span class="icon">📜</span> Logs</div>
+        <div class="nav-item" data-page="playground"><span class="icon">🎮</span> Playground</div>
+        <div style="padding: 8px 12px; margin-top: 16px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;">Modules</div>
+        <div class="nav-item" data-page="modules"><span class="icon">🔌</span> Modules</div>
+        <div class="nav-item" data-page="brain-module"><span class="icon">🧠</span> DeepBrain</div>
+        <div class="nav-item" data-page="kits-module"><span class="icon">📊</span> AgentKits</div>
+        <div class="nav-item" data-page="workstation-module"><span class="icon">👤</span> Workstation</div>
+      </div>
+      <div style="padding: 8px 12px; font-size: 11px; color: var(--text-muted);">OPC Agent v2.1</div>
+    </nav>
+    <!-- Main Content -->
+    <main class="main">
+      <!-- Dashboard -->
+      <div class="page active" id="page-dashboard">
+        <div class="page-header">
+          <div class="page-title">Dashboard</div>
+          <div class="page-subtitle">Agent overview and health status</div>
+        </div>
+        <div class="card-grid">
+          <div class="card stat"><div class="stat-value" id="agent-name">—</div><div class="stat-label">Agent Name</div></div>
+          <div class="card stat"><div class="stat-value" id="agent-model">—</div><div class="stat-label">Model</div></div>
+          <div class="card stat"><div class="stat-value" id="agent-channels">—</div><div class="stat-label">Channels</div></div>
+          <div class="card stat"><div class="stat-value" id="agent-skills">—</div><div class="stat-label">Skills</div></div>
+        </div>
+        <div class="card">
+          <div class="card-title">🟢 Agent Status</div>
+          <div id="agent-status-detail">Loading...</div>
+        </div>
+        <div class="card">
+          <div class="card-title">🧠 Memory Stats</div>
+          <div id="memory-stats">Loading...</div>
+        </div>
+      </div>
+      <!-- Chat -->
+      <div class="page" id="page-chat">
+        <div class="page-header">
+          <div class="page-title">Chat</div>
+          <div class="page-subtitle">Test your agent in real-time</div>
+        </div>
+        <div class="card chat-container">
+          <div class="chat-messages" id="chat-messages">
+            <div class="message message-agent"><div class="message-label">Agent</div><div class="bubble">Hi! I'm ready to chat. Type a message below.</div></div>
+          </div>
+          <div class="chat-input-row">
+            <input class="chat-input" id="chat-input" placeholder="Type a message..." onkeydown="if(event.key==='Enter')sendChat()">
+            <button class="chat-send" onclick="sendChat()">Send</button>
+          </div>
+        </div>
+      </div>
+      <!-- Config -->
+      <div class="page" id="page-config">
+        <div class="page-header">
+          <div class="page-title">Configuration</div>
+          <div class="page-subtitle">Edit agent.yaml</div>
+        </div>
+        <div class="card">
+          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
+            <div class="card-title" style="margin:0">agent.yaml</div>
+            <button class="btn btn-primary" onclick="saveConfig()">Save</button>
+          </div>
+          <textarea class="editor" id="config-editor">Loading...</textarea>
+        </div>
+      </div>
+      <!-- Memory -->
+      <div class="page" id="page-memory">
+        <div class="page-header">
+          <div class="page-title">Memory</div>
+          <div class="page-subtitle">DeepBrain knowledge pages</div>
+        </div>
+        <div class="search-bar">
+          <input class="search-input" id="memory-search" placeholder="Search memories..." onkeydown="if(event.key==='Enter')searchMemory()">
+          <button class="btn" onclick="searchMemory()">Search</button>
+        </div>
+        <div class="card" id="memory-list">Loading...</div>
+      </div>
+      <!-- Skills -->
+      <div class="page" id="page-skills">
+        <div class="page-header">
+          <div class="page-title">Skills</div>
+          <div class="page-subtitle">Agent capabilities</div>
+        </div>
+        <div class="card" id="skills-list">Loading...</div>
+      </div>
+      <!-- Tools -->
+      <div class="page" id="page-tools">
+        <div class="page-header">
+          <div class="page-title">Tools</div>
+          <div class="page-subtitle">Built-in and MCP tools</div>
+        </div>
+        <div class="card" id="tools-list">Loading...</div>
+      </div>
+      <!-- Channels -->
+      <div class="page" id="page-channels">
+        <div class="page-header">
+          <div class="page-title">Channels</div>
+          <div class="page-subtitle">Communication endpoints</div>
+        </div>
+        <div class="card" id="channels-list">Loading...</div>
+      </div>
+      <!-- Workflows — Visual DAG Editor -->
+      <div class="page" id="page-workflows">
+        <div class="page-header" style="display:flex;justify-content:space-between;align-items:flex-start">
+          <div>
+            <div class="page-title">Workflows</div>
+            <div class="page-subtitle">Visual DAG workflow editor</div>
+          </div>
+          <div style="display:flex;gap:8px;flex-wrap:wrap">
+            <select id="wf-list-select" style="padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-size:13px">
+              <option value="">— New Workflow —</option>
+            </select>
+            <button class="btn" onclick="dagEditor.loadSelected()">Load</button>
+            <button class="btn btn-primary" onclick="dagEditor.save()">💾 Save</button>
+            <button class="btn" onclick="dagEditor.exportJSON()">📤 Export</button>
+            <button class="btn" onclick="dagEditor.importJSON()">📥 Import</button>
+            <button class="btn" style="background:var(--green);border-color:var(--green);color:#000" onclick="dagEditor.run()">▶ Run</button>
+          </div>
+        </div>
+        <div style="display:flex;gap:12px;margin-bottom:12px">
+          <div class="card" style="width:180px;padding:12px;flex-shrink:0">
+            <div style="font-size:12px;color:var(--text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px">Node Palette</div>
+            <div class="dag-palette-item" draggable="true" data-type="input" style="cursor:grab;padding:6px 10px;margin:4px 0;border-radius:6px;border:1px solid var(--border);font-size:13px;background:var(--bg)" ondragstart="dagEditor.onPaletteDrag(event,'input')">📥 Input</div>
+            <div class="dag-palette-item" draggable="true" data-type="agent" style="cursor:grab;padding:6px 10px;margin:4px 0;border-radius:6px;border:1px solid var(--border);font-size:13px;background:var(--bg)" ondragstart="dagEditor.onPaletteDrag(event,'agent')">🤖 Agent</div>
+            <div class="dag-palette-item" draggable="true" data-type="tool" style="cursor:grab;padding:6px 10px;margin:4px 0;border-radius:6px;border:1px solid var(--border);font-size:13px;background:var(--bg)" ondragstart="dagEditor.onPaletteDrag(event,'tool')">🔧 Tool</div>
+            <div class="dag-palette-item" draggable="true" data-type="condition" style="cursor:grab;padding:6px 10px;margin:4px 0;border-radius:6px;border:1px solid var(--border);font-size:13px;background:var(--bg)" ondragstart="dagEditor.onPaletteDrag(event,'condition')">❓ Condition</div>
+            <div class="dag-palette-item" draggable="true" data-type="loop" style="cursor:grab;padding:6px 10px;margin:4px 0;border-radius:6px;border:1px solid var(--border);font-size:13px;background:var(--bg)" ondragstart="dagEditor.onPaletteDrag(event,'loop')">🔁 Loop</div>
+            <div class="dag-palette-item" draggable="true" data-type="parallel" style="cursor:grab;padding:6px 10px;margin:4px 0;border-radius:6px;border:1px solid var(--border);font-size:13px;background:var(--bg)" ondragstart="dagEditor.onPaletteDrag(event,'parallel')">⚡ Parallel</div>
+            <div class="dag-palette-item" draggable="true" data-type="output" style="cursor:grab;padding:6px 10px;margin:4px 0;border-radius:6px;border:1px solid var(--border);font-size:13px;background:var(--bg)" ondragstart="dagEditor.onPaletteDrag(event,'output')">📤 Output</div>
+            <hr style="border-color:var(--border);margin:12px 0">
+            <div style="font-size:12px;color:var(--text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px">Actions</div>
+            <button class="btn" style="width:100%;margin:3px 0;font-size:12px" onclick="dagEditor.undo()">↩ Undo</button>
+            <button class="btn" style="width:100%;margin:3px 0;font-size:12px" onclick="dagEditor.redo()">↪ Redo</button>
+            <button class="btn" style="width:100%;margin:3px 0;font-size:12px" onclick="dagEditor.deleteSelected()">🗑 Delete</button>
+            <button class="btn" style="width:100%;margin:3px 0;font-size:12px" onclick="dagEditor.zoomIn()">🔍+ Zoom In</button>
+            <button class="btn" style="width:100%;margin:3px 0;font-size:12px" onclick="dagEditor.zoomOut()">🔍- Zoom Out</button>
+            <button class="btn" style="width:100%;margin:3px 0;font-size:12px" onclick="dagEditor.fitView()">⊞ Fit</button>
+          </div>
+          <div style="flex:1;position:relative">
+            <canvas id="dag-canvas" style="width:100%;height:600px;border-radius:8px;border:1px solid var(--border);background:#0d0d0d;cursor:default"></canvas>
+          </div>
+        </div>
+        <!-- Node properties panel -->
+        <div class="card" id="dag-props" style="display:none">
+          <div class="card-title">Node Properties</div>
+          <div id="dag-props-content"></div>
+        </div>
+        <!-- Run output -->
+        <div class="card" id="dag-run-output" style="display:none">
+          <div class="card-title">▶ Execution Results</div>
+          <pre id="dag-run-results" style="font-family:var(--mono);font-size:12px;max-height:300px;overflow:auto;color:var(--text-muted)"></pre>
+        </div>
+      </div>
+      <!-- Jobs -->
+      <div class="page" id="page-jobs">
+        <div class="page-header">
+          <div class="page-title">Scheduled Jobs</div>
+          <div class="page-subtitle">Cron tasks</div>
+        </div>
+        <div class="card" id="jobs-list">Loading...</div>
+      </div>
+      <!-- Plugins -->
+      <div class="page" id="page-plugins">
+        <div class="page-header">
+          <div class="page-title">Plugins</div>
+          <div class="page-subtitle">Middleware and extensions</div>
+        </div>
+        <div class="card" id="plugins-list">Loading...</div>
+      </div>
+      <!-- Doctor -->
+      <div class="page" id="page-doctor">
+        <div class="page-header">
+          <div class="page-title">Doctor</div>
+          <div class="page-subtitle">Environment health check</div>
+        </div>
+        <div class="card" id="doctor-results">
+          <button class="btn btn-primary" onclick="runDoctor()">Run Diagnostic</button>
+        </div>
+      </div>
+      <!-- Logs -->
+      <div class="page" id="page-evals">
+        <div class="page-header">
+          <div class="page-title">🧪 Evals</div>
+          <div class="page-subtitle">Agent quality evaluation</div>
+        </div>
+        <div class="card" id="eval-panel">
+          <div style="margin-bottom:16px">
+            <label>Suite: </label>
+            <select id="eval-suite-select" style="padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);color:var(--text)">
+              <option value="basic">basic</option>
+              <option value="safety">safety</option>
+              <option value="memory">memory</option>
+            </select>
+            <button class="btn btn-primary" onclick="runEval()" style="margin-left:8px">Run Suite</button>
+          </div>
+          <div id="eval-results"></div>
+        </div>
+      </div>
+      <!-- Telemetry -->
+      <div class="page" id="page-telemetry">
+        <div class="page-header">
+          <div class="page-title">Telemetry</div>
+          <div class="page-subtitle">OTel-compatible tracing & metrics</div>
+        </div>
+        <div class="card-grid" style="grid-template-columns: repeat(4,1fr); margin-bottom:16px">
+          <div class="card" id="tel-total-spans"><div style="font-size:11px;color:var(--text-muted)">Total Spans</div><div style="font-size:24px;font-weight:700" id="tel-stat-spans">—</div></div>
+          <div class="card" id="tel-total-traces"><div style="font-size:11px;color:var(--text-muted)">Total Traces</div><div style="font-size:24px;font-weight:700" id="tel-stat-traces">—</div></div>
+          <div class="card" id="tel-error-rate"><div style="font-size:11px;color:var(--text-muted)">Error Rate</div><div style="font-size:24px;font-weight:700" id="tel-stat-errors">—</div></div>
+          <div class="card" id="tel-p95"><div style="font-size:11px;color:var(--text-muted)">P95 Latency</div><div style="font-size:24px;font-weight:700" id="tel-stat-p95">—</div></div>
+        </div>
+        <div class="card" style="margin-bottom:16px">
+          <h3 style="margin:0 0 12px">Recent Traces</h3>
+          <div id="tel-traces-list" style="font-family:var(--mono);font-size:12px">Loading...</div>
+        </div>
+        <div class="card">
+          <h3 style="margin:0 0 12px">Trace Waterfall</h3>
+          <div id="tel-waterfall" style="font-family:var(--mono);font-size:12px;min-height:100px;color:var(--text-muted)">Click a trace above to view spans</div>
+        </div>
+      </div>
+      <!-- Logs -->
+      <div class="page" id="page-logs">
+        <div class="page-header">
+          <div class="page-title">Logs</div>
+          <div class="page-subtitle">Recent agent activity</div>
+        </div>
+        <div class="card"><pre id="logs-content" style="font-family:var(--mono);font-size:12px;max-height:600px;overflow:auto;color:var(--text-muted)">Loading...</pre></div>
+      </div>
+      <!-- Modules Status -->
+      <div class="page" id="page-modules">
+        <div class="page-header">
+          <div class="page-title">Modules</div>
+          <div class="page-subtitle">Sub-module status and health</div>
+        </div>
+        <div id="modules-grid" class="card-grid">Loading...</div>
+      </div>
+      <!-- DeepBrain Module -->
+      <div class="page" id="page-brain-module">
+        <iframe src="/brain/" style="width:100%;height:calc(100vh - 32px);border:none;border-radius:8px;"></iframe>
+      </div>
+      <!-- AgentKits Module -->
+      <div class="page" id="page-kits-module">
+        <iframe src="/kits/" style="width:100%;height:calc(100vh - 32px);border:none;border-radius:8px;"></iframe>
+      </div>
+      <!-- Workstation Module -->
+      <div class="page" id="page-workstation-module">
+        <iframe src="/workstation/" style="width:100%;height:calc(100vh - 32px);border:none;border-radius:8px;"></iframe>
+      </div>
+      <!-- Playground Page -->
+      <div class="page" id="page-playground">
+        <div class="page-header">
+          <h1 class="page-title">🎮 Playground</h1>
+          <p class="page-subtitle">Interactive chat with model selection, system prompts, and streaming</p>
+        </div>
+        <div style="display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap;align-items:flex-end;">
+          <div style="flex:1;min-width:150px;">
+            <label style="font-size:12px;color:var(--text-muted);display:block;margin-bottom:4px;">Model</label>
+            <select id="pg-model" style="width:100%;padding:8px;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-size:13px;">
+              <option>gpt-4o</option><option>gpt-4o-mini</option><option>claude-sonnet-4</option><option>claude-haiku</option><option>gemini-2.0-flash</option><option>deepseek-v3</option>
+            </select>
+          </div>
+          <div style="flex:0 0 160px;">
+            <label style="font-size:12px;color:var(--text-muted);display:block;margin-bottom:4px;">Temperature: <span id="pg-temp-val">0.7</span></label>
+            <input type="range" id="pg-temp" min="0" max="2" step="0.1" value="0.7" style="width:100%;" oninput="document.getElementById('pg-temp-val').textContent=this.value">
+          </div>
+        </div>
+        <div style="margin-bottom:16px;">
+          <label style="font-size:12px;color:var(--text-muted);display:block;margin-bottom:4px;">System Prompt</label>
+          <textarea id="pg-system" rows="2" placeholder="You are a helpful assistant..." style="width:100%;padding:8px;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-size:13px;resize:vertical;font-family:inherit;"></textarea>
+        </div>
+        <div id="pg-messages" style="flex:1;min-height:300px;max-height:50vh;overflow-y:auto;border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:16px;background:var(--bg-card);display:flex;flex-direction:column;gap:10px;">
+          <div style="color:var(--text-muted);font-size:13px;text-align:center;padding:40px;">Send a message to start chatting</div>
+        </div>
+        <div style="display:flex;gap:8px;">
+          <textarea id="pg-input" rows="2" placeholder="Type your message..." style="flex:1;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-size:14px;resize:none;font-family:inherit;" onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();pgSend()}"></textarea>
+          <button onclick="pgSend()" id="pg-send-btn" style="padding:10px 24px;border:none;border-radius:8px;background:var(--accent);color:#000;font-weight:600;cursor:pointer;font-size:14px;">Send</button>
+          <button onclick="pgClear()" style="padding:10px 16px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;font-size:13px;">Clear</button>
+        </div>
+      </div>
+    </main>
+  </div>
+  <script>
+    const API = '';  // same origin
+    // Navigation
+    document.querySelectorAll('.nav-item').forEach(item => {
+      item.addEventListener('click', () => {
+        document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
+        document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
+        item.classList.add('active');
+        const page = item.dataset.page;
+        document.getElementById('page-' + page).classList.add('active');
+        loadPage(page);
+      });
+    });
+    // Page loaders
+    async function loadPage(page) {
+      switch (page) {
+        case 'dashboard': loadDashboard(); break;
+        case 'config': loadConfig(); break;
+        case 'memory': loadMemory(); break;
+        case 'skills': loadSkills(); break;
+        case 'tools': loadTools(); break;
+        case 'channels': loadChannels(); break;
+        case 'workflows': loadWorkflows(); break;
+        case 'jobs': loadJobs(); break;
+        case 'plugins': loadPlugins(); break;
+        case 'protocols': loadProtocols(); break;
+        case 'logs': loadLogs(); break;
+        case 'modules': loadModules(); break;
+        case 'telemetry': loadTelemetry(); break;
+        case 'evals': break; // static page, run via button
+      }
+    }
+    async function api(path) {
+      const r = await fetch(API + '/api/' + path);
+      return r.json();
+    }
+    async function apiPost(path, body) {
+      const r = await fetch(API + '/api/' + path, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+      return r.json();
+    }
+    async function apiPut(path, body) {
+      const r = await fetch(API + '/api/' + path, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+      return r.json();
+    }
+    // Dashboard
+    async function loadDashboard() {
+      try {
+        const info = await api('agent/info');
+        document.getElementById('agent-name').textContent = info.name || '—';
+        document.getElementById('agent-model').textContent = info.model || '—';
+        document.getElementById('agent-channels').textContent = info.channels?.length || 0;
+        document.getElementById('agent-skills').textContent = info.skills?.length || 0;
+        document.getElementById('agent-status-detail').innerHTML =
+          `<span class="badge badge-green"><span class="badge-dot"></span> ${info.status || 'unknown'}</span>` +
+          ` &nbsp; Provider: ${info.provider || '—'} &nbsp; Version: ${info.version || '—'}`;
+        const stats = await api('memory/stats');
+        document.getElementById('memory-stats').innerHTML =
+          `Pages: <strong>${stats.pages || 0}</strong> &nbsp; Chunks: <strong>${stats.chunks || 0}</strong>`;
+      } catch (e) {
+        document.getElementById('agent-status-detail').textContent = 'Failed to connect to agent';
+      }
+    }
+    // Chat
+    async function sendChat() {
+      const input = document.getElementById('chat-input');
+      const msg = input.value.trim();
+      if (!msg) return;
+      input.value = '';
+      const messages = document.getElementById('chat-messages');
+      messages.innerHTML += `<div class="message message-user"><div class="message-label">You</div><div class="bubble">${escapeHtml(msg)}</div></div>`;
+      messages.innerHTML += `<div class="message message-agent" id="pending"><div class="message-label">Agent</div><div class="bubble"><span class="spinner"></span> Thinking...</div></div>`;
+      messages.scrollTop = messages.scrollHeight;
+      try {
+        const result = await apiPost('agent/chat', { message: msg, sessionId: 'studio' });
+        document.getElementById('pending').innerHTML = `<div class="message-label">Agent</div><div class="bubble">${escapeHtml(result.response || 'No response')}</div>`;
+        document.getElementById('pending').id = '';
+      } catch (e) {
+        document.getElementById('pending').innerHTML = `<div class="message-label">Agent</div><div class="bubble" style="color:var(--red)">Error: ${e.message}</div>`;
+        document.getElementById('pending').id = '';
+      }
+      messages.scrollTop = messages.scrollHeight;
+    }
+    // Config
+    async function loadConfig() {
+      const data = await api('agent/config');
+      document.getElementById('config-editor').value = data.content || '# No config found';
+    }
+    async function saveConfig() {
+      const content = document.getElementById('config-editor').value;
+      await apiPut('agent/config', { content });
+      alert('Config saved!');
+    }
+    // Memory
+    async function loadMemory() {
+      const data = await api('memory/list');
+      const el = document.getElementById('memory-list');
+      if (!data.pages?.length) { el.innerHTML = '<div class="loading">No memories yet</div>'; return; }
+      el.innerHTML = data.pages.map(p => `
+        <div class="memory-item">
+          <div class="memory-slug">${escapeHtml(p.slug || p.title || '—')}</div>
+          <div class="memory-preview">${escapeHtml((p.compiled_truth || p.content || '').slice(0, 100))}</div>
+          <div class="memory-meta">Type: ${p.type || '—'} | Tags: ${(p.tags || []).join(', ') || '—'}</div>
+        </div>
+      `).join('');
+    }
+    async function searchMemory() {
+      const q = document.getElementById('memory-search').value;
+      if (!q) return loadMemory();
+      const data = await api('memory/search?q=' + encodeURIComponent(q));
+      const el = document.getElementById('memory-list');
+      if (!data.results?.length) { el.innerHTML = '<div class="loading">No results</div>'; return; }
+      el.innerHTML = data.results.map(r => `
+        <div class="memory-item">
+          <div class="memory-slug">${escapeHtml(r.slug || r.title || '—')}</div>
+          <div class="memory-preview">${escapeHtml((r.compiled_truth || r.content || '').slice(0, 100))}</div>
+        </div>
+      `).join('');
+    }
+    // Generic list loaders
+    async function loadSkills() {
+      const data = await api('skills/list');
+      renderList('skills-list', data.skills || [], s => `<strong>${s.name}</strong> — ${s.description || '—'} (used ${s.usageCount || 0} times)`);
+    }
+    async function loadTools() {
+      const data = await api('tools/list');
+      renderList('tools-list', data.tools || [], t => `<strong>🔧 ${t.name}</strong> — ${t.description || '—'}`);
+    }
+    async function loadChannels() {
+      const data = await api('channels/list');
+      renderList('channels-list', data.channels || [], c => `<span class="badge badge-green"><span class="badge-dot"></span> ${c.type}</span> ${c.port ? 'Port ' + c.port : ''} ${c.mode || ''}`);
+    }
+    async function loadWorkflows() {
+      // Load saved workflows into dropdown
+      try {
+        const data = await api('workflows');
+        const select = document.getElementById('wf-list-select');
+        select.innerHTML = '<option value="">— New Workflow —</option>';
+        for (const wf of (data.workflows || [])) {
+          const opt = document.createElement('option');
+          opt.value = wf.id;
+          opt.textContent = wf.name || wf.id;
+          select.appendChild(opt);
+        }
+      } catch {}
+      dagEditor.initCanvas();
+    }
+    async function loadJobs() {
+      const data = await api('jobs/list');
+      renderList('jobs-list', data.jobs || [], j => `<strong>⏰ ${j.name}</strong> — <code>${j.schedule}</code> — ${j.task || '—'}`);
+    }
+    async function loadPlugins() {
+      const data = await api('plugins/list');
+      renderList('plugins-list', data.plugins || [], p => `<strong>🔌 ${p.name}</strong> ${p.config ? JSON.stringify(p.config) : ''}`);
+    }
+    async function loadProtocols() {
+      const data = await api('protocols');
+      const list = data.protocols || [];
+      const content = document.getElementById('content');
+      content.innerHTML = `<h2>📡 Protocols</h2><div class="grid">${list.map(p =>
+        `<div class="card stat"><div class="stat-value">${p.enabled ? '🟢' : '⚫'} ${p.name}</div><div class="stat-label">${p.description}</div></div>`
+      ).join('')}</div>`;
+    }
+    async function loadLogs() {
+      const data = await api('logs/recent');
+      document.getElementById('logs-content').textContent = (data.lines || []).join('\n') || 'No logs';
+    }
+    // Modules
+    async function loadModules() {
+      const data = await api('modules');
+      const grid = document.getElementById('modules-grid');
+      if (data.modules) {
+        grid.innerHTML = data.modules.map(m => `
+          <div class="card stat" style="cursor:pointer" onclick="document.querySelector('[data-page=${m.path.replace(/\//g,'')}-module]')?.click()">
+            <div class="stat-value">${m.icon} ${m.name}</div>
+            <div class="stat-label">${m.running ? '🟢 Running on port ' + m.port : '⚫ Not running'}</div>
+          </div>`).join('');
+      } else {
+        grid.innerHTML = '<div class="card">Failed to load module status</div>';
+      }
+    }
+    // Telemetry
+    async function loadTelemetry() {
+      const stats = await api('telemetry/stats');
+      if (stats && !stats.error) {
+        document.getElementById('tel-stat-spans').textContent = stats.totalSpans;
+        document.getElementById('tel-stat-traces').textContent = stats.totalTraces;
+        document.getElementById('tel-stat-errors').textContent = (stats.errorRate * 100).toFixed(1) + '%';
+        document.getElementById('tel-stat-p95').textContent = stats.p95Latency.toFixed(0) + 'ms';
+      }
+      const tracesData = await api('telemetry/traces?limit=50');
+      const el = document.getElementById('tel-traces-list');
+      if (tracesData.traces && tracesData.traces.length > 0) {
+        el.innerHTML = '<table style="width:100%;border-collapse:collapse"><tr style="color:var(--text-muted);text-align:left"><th>Trace ID</th><th>Root Span</th><th>Time</th><th>Spans</th><th>Status</th></tr>' +
+          tracesData.traces.map(t => {
+            const time = new Date(t.startTime).toLocaleTimeString();
+            const statusColor = t.status === 'ok' ? '#4ade80' : t.status === 'error' ? '#f87171' : '#9ca3af';
+            return `<tr style="cursor:pointer;border-top:1px solid var(--border)" onclick="loadTraceWaterfall('${t.traceId}')"><td style="padding:6px;color:var(--accent)">${t.traceId.slice(0,12)}</td><td>${t.rootSpan}</td><td>${time}</td><td>${t.spanCount}</td><td style="color:${statusColor}">${t.status}</td></tr>`;
+          }).join('') + '</table>';
+      } else {
+        el.innerHTML = '<div style="color:var(--text-muted)">No traces yet. Enable telemetry: spec.telemetry.enabled: true</div>';
+      }
+    }
+    async function loadTraceWaterfall(traceId) {
+      const data = await api('telemetry/traces?id=' + traceId);
+      const el = document.getElementById('tel-waterfall');
+      if (!data.spans || data.spans.length === 0) { el.innerHTML = 'No spans found'; return; }
+      const spans = data.spans;
+      const minTime = Math.min(...spans.map(s => s.startTime));
+      const maxTime = Math.max(...spans.map(s => s.endTime || s.startTime));
+      const totalDur = maxTime - minTime || 1;
+      const depthMap = {};
+      spans.forEach(s => { depthMap[s.spanId] = s.parentSpanId && depthMap[s.parentSpanId] !== undefined ? depthMap[s.parentSpanId] + 1 : 0; });
+      el.innerHTML = spans.map(s => {
+        const left = ((s.startTime - minTime) / totalDur * 70).toFixed(1);
+        const width = Math.max(1, ((s.endTime || s.startTime) - s.startTime) / totalDur * 70).toFixed(1);
+        const color = s.status === 'ok' ? '#4ade80' : s.status === 'error' ? '#f87171' : '#60a5fa';
+        const depth = depthMap[s.spanId] || 0;
+        const dur = s.endTime ? (s.endTime - s.startTime) + 'ms' : '—';
+        return `<div style="display:flex;align-items:center;margin:2px 0;padding-left:${depth*20}px"><span style="width:180px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${s.name}</span><div style="flex:1;position:relative;height:18px;background:var(--bg-hover);border-radius:3px"><div style="position:absolute;left:${left}%;width:${width}%;height:100%;background:${color};border-radius:3px;opacity:0.8" title="${dur}"></div></div><span style="width:60px;text-align:right;flex-shrink:0;margin-left:8px">${dur}</span></div>`;
+      }).join('');
+    }
+    window.loadTraceWaterfall = loadTraceWaterfall;
+    // Doctor
+    async function runDoctor() {
+      const el = document.getElementById('doctor-results');
+      el.innerHTML = '<div class="loading"><span class="spinner"></span> Running checks...</div>';
+      const data = await api('doctor/check');
+      if (data.checks) {
+        el.innerHTML = data.checks.map(c => `
+          <div class="check-item">
+            <span class="check-icon">${c.ok ? '✅' : '❌'}</span>
+            <span class="check-name">${c.name}</span>
+            <span class="check-detail">${c.detail || ''}</span>
+            ${c.fix ? `<span class="check-fix">→ ${c.fix}</span>` : ''}
+          </div>
+        `).join('') + `<div style="margin-top:16px"><button class="btn btn-primary" onclick="runDoctor()">Re-run</button></div>`;
+      } else {
+        el.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre><button class="btn btn-primary" onclick="runDoctor()">Re-run</button>`;
+      }
+    }
+    // Helpers
+    async function runEval() {
+      const suite = document.getElementById('eval-suite-select').value;
+      const el = document.getElementById('eval-results');
+      el.innerHTML = '<div class="loading"><span class="spinner"></span> Running eval...</div>';
+      try {
+        const resp = await fetch('/api/eval/run', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ suite }) });
+        const report = await resp.json();
+        let html = `<div style="margin-bottom:12px;font-weight:600">${report.summary || ''}</div>`;
+        html += '<table style="width:100%;border-collapse:collapse">';
+        html += '<tr style="border-bottom:1px solid var(--border)"><th style="text-align:left;padding:6px">Case</th><th>Status</th><th>Latency</th></tr>';
+        for (const r of (report.results || [])) {
+          const color = r.passed ? '#4ade80' : '#f87171';
+          html += `<tr style="border-bottom:1px solid var(--border)"><td style="padding:6px">${r.caseId}</td><td style="color:${color};text-align:center">${r.passed ? 'PASS' : 'FAIL'}</td><td style="text-align:center">${r.scores?.latency_ms || 0}ms</td></tr>`;
+        }
+        html += '</table>';
+        el.innerHTML = html;
+      } catch (e) { el.innerHTML = `<div style="color:#f87171">Error: ${e.message}</div>`; }
+    }
+    function renderList(id, items, renderFn) {
+      const el = document.getElementById(id);
+      if (!items.length) { el.innerHTML = '<div class="loading">None configured</div>'; return; }
+      el.innerHTML = '<table class="table"><tbody>' +
+        items.map(i => `<tr><td>${renderFn(i)}</td></tr>`).join('') +
+        '</tbody></table>';
+    }
+    function escapeHtml(s) {
+      return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+    }
+    // ═══════════════════════════════════════════════
+    // DAG Visual Editor
+    // ═══════════════════════════════════════════════
+    const dagEditor = (() => {
+      let canvas, ctx;
+      let nodes = [], edges = [];
+      let selected = null, dragging = null, dragOffset = { x: 0, y: 0 };
+      let connecting = null; // { nodeId, port:'out', mx, my }
+      let pan = { x: 0, y: 0 }, zoom = 1;
+      let isPanning = false, panStart = { x: 0, y: 0 };
+      let undoStack = [], redoStack = [];
+      let workflowId = null, workflowName = 'Untitled';
+      let initialized = false;
+      const GRID = 20, NODE_W = 160, NODE_H = 60, PORT_R = 7;
+      const NODE_COLORS = {
+        input: '#22c55e', output: '#ef4444', agent: '#3b82f6',
+        tool: '#eab308', condition: '#a855f7', loop: '#f97316', parallel: '#06b6d4'
+      };
+      const NODE_ICONS = {
+        input: '📥', output: '📤', agent: '🤖', tool: '🔧',
+        condition: '❓', loop: '🔁', parallel: '⚡'
+      };
+      function snap(v) { return Math.round(v / GRID) * GRID; }
+      function initCanvas() {
+        canvas = document.getElementById('dag-canvas');
+        if (!canvas) return;
+        const rect = canvas.parentElement.getBoundingClientRect();
+        canvas.width = rect.width * (window.devicePixelRatio || 1);
+        canvas.height = 600 * (window.devicePixelRatio || 1);
+        canvas.style.width = rect.width + 'px';
+        canvas.style.height = '600px';
+        ctx = canvas.getContext('2d');
+        ctx.scale(window.devicePixelRatio || 1, window.devicePixelRatio || 1);
+        if (!initialized) {
+          canvas.addEventListener('mousedown', onMouseDown);
+          canvas.addEventListener('mousemove', onMouseMove);
+          canvas.addEventListener('mouseup', onMouseUp);
+          canvas.addEventListener('dblclick', onDblClick);
+          canvas.addEventListener('wheel', onWheel);
+          canvas.addEventListener('dragover', e => e.preventDefault());
+          canvas.addEventListener('drop', onDrop);
+          canvas.addEventListener('contextmenu', e => e.preventDefault());
+          document.addEventListener('keydown', onKey);
+          initialized = true;
+        }
+        render();
+      }
+      function toCanvas(e) {
+        const r = canvas.getBoundingClientRect();
+        return { x: (e.clientX - r.left - pan.x) / zoom, y: (e.clientY - r.top - pan.y) / zoom };
+      }
+      function nodeAt(x, y) {
+        for (let i = nodes.length - 1; i >= 0; i--) {
+          const n = nodes[i];
+          if (x >= n.x && x <= n.x + NODE_W && y >= n.y && y <= n.y + NODE_H) return n;
+        }
+        return null;
+      }
+      function portAt(x, y) {
+        for (const n of nodes) {
+          // Input port (left center)
+          if (n.type !== 'input') {
+            const px = n.x, py = n.y + NODE_H / 2;
+            if (Math.hypot(x - px, y - py) < PORT_R + 4) return { node: n, port: 'in' };
+          }
+          // Output port (right center)
+          if (n.type !== 'output') {
+            const px = n.x + NODE_W, py = n.y + NODE_H / 2;
+            if (Math.hypot(x - px, y - py) < PORT_R + 4) return { node: n, port: 'out' };
+          }
+        }
+        return null;
+      }
+      function pushUndo() {
+        undoStack.push(JSON.stringify({ nodes, edges }));
+        if (undoStack.length > 50) undoStack.shift();
+        redoStack = [];
+      }
+      function addNode(type, x, y) {
+        pushUndo();
+        const id = 'n' + Date.now() + Math.random().toString(36).slice(2, 6);
+        const node = { id, type, name: type.charAt(0).toUpperCase() + type.slice(1), x: snap(x), y: snap(y), config: {} };
+        if (type === 'agent') { node.config = { systemPrompt: '', model: 'gpt-4o' }; }
+        if (type === 'tool') { node.config = { toolName: '' }; }
+        if (type === 'condition') { node.config = { expression: '' }; }
+        if (type === 'loop') { node.config = { maxIterations: 10, condition: '' }; }
+        if (type === 'parallel') { node.config = { branches: [] }; }
+        nodes.push(node);
+        selected = node;
+        showProps(node);
+        render();
+      }
+      function addEdge(fromId, toId) {
+        if (fromId === toId) return;
+        if (edges.find(e => e.from === fromId && e.to === toId)) return;
+        pushUndo();
+        edges.push({ id: 'e' + Date.now(), from: fromId, to: toId, fromPort: 'out', toPort: 'in' });
+        render();
+      }
+      // ── Rendering ──
+      function render() {
+        if (!ctx) return;
+        const w = canvas.width / (window.devicePixelRatio || 1);
+        const h = canvas.height / (window.devicePixelRatio || 1);
+        ctx.clearRect(0, 0, w, h);
+        ctx.save();
+        ctx.translate(pan.x, pan.y);
+        ctx.scale(zoom, zoom);
+        // Grid
+        ctx.strokeStyle = '#1a1a1a';
+        ctx.lineWidth = 0.5;
+        const gs = GRID;
+        const startX = Math.floor(-pan.x / zoom / gs) * gs - gs;
+        const startY = Math.floor(-pan.y / zoom / gs) * gs - gs;
+        const endX = startX + w / zoom + gs * 2;
+        const endY = startY + h / zoom + gs * 2;
+        for (let x = startX; x < endX; x += gs) { ctx.beginPath(); ctx.moveTo(x, startY); ctx.lineTo(x, endY); ctx.stroke(); }
+        for (let y = startY; y < endY; y += gs) { ctx.beginPath(); ctx.moveTo(startX, y); ctx.lineTo(endX, y); ctx.stroke(); }
+        // Edges
+        for (const e of edges) {
+          const from = nodes.find(n => n.id === e.from);
+          const to = nodes.find(n => n.id === e.to);
+          if (!from || !to) continue;
+          const x1 = from.x + NODE_W, y1 = from.y + NODE_H / 2;
+          const x2 = to.x, y2 = to.y + NODE_H / 2;
+          const cp = Math.abs(x2 - x1) * 0.5 + 40;
+          ctx.beginPath();
+          ctx.moveTo(x1, y1);
+          ctx.bezierCurveTo(x1 + cp, y1, x2 - cp, y2, x2, y2);
+          ctx.strokeStyle = '#555';
+          ctx.lineWidth = 2;
+          ctx.stroke();
+          // Arrow
+          const angle = Math.atan2(y2 - (y2 - 0.1), x2 - (x2 - cp * 0.1));
+          ctx.fillStyle = '#555';
+          ctx.beginPath();
+          ctx.moveTo(x2, y2);
+          ctx.lineTo(x2 - 8, y2 - 4);
+          ctx.lineTo(x2 - 8, y2 + 4);
+          ctx.fill();
+        }
+        // Connecting line (in progress)
+        if (connecting) {
+          const from = nodes.find(n => n.id === connecting.nodeId);
+          if (from) {
+            const x1 = from.x + NODE_W, y1 = from.y + NODE_H / 2;
+            ctx.beginPath();
+            ctx.moveTo(x1, y1);
+            const cp = Math.abs(connecting.mx - x1) * 0.5 + 40;
+            ctx.bezierCurveTo(x1 + cp, y1, connecting.mx - cp, connecting.my, connecting.mx, connecting.my);
+            ctx.strokeStyle = '#3b82f6';
+            ctx.lineWidth = 2;
+            ctx.setLineDash([6, 3]);
+            ctx.stroke();
+            ctx.setLineDash([]);
+          }
+        }
+        // Nodes
+        for (const n of nodes) {
+          const isSelected = selected && selected.id === n.id;
+          const color = NODE_COLORS[n.type] || '#666';
+          // Shadow
+          ctx.fillStyle = 'rgba(0,0,0,0.3)';
+          ctx.beginPath();
+          ctx.roundRect(n.x + 2, n.y + 2, NODE_W, NODE_H, 10);
+          ctx.fill();
+          // Body
+          ctx.fillStyle = isSelected ? '#252525' : '#1e1e1e';
+          ctx.strokeStyle = isSelected ? color : '#333';
+          ctx.lineWidth = isSelected ? 2.5 : 1;
+          ctx.beginPath();
+          ctx.roundRect(n.x, n.y, NODE_W, NODE_H, 10);
+          ctx.fill();
+          ctx.stroke();
+          // Color bar top
+          ctx.fillStyle = color;
+          ctx.beginPath();
+          ctx.roundRect(n.x, n.y, NODE_W, 4, [10, 10, 0, 0]);
+          ctx.fill();
+          // Icon + name
+          ctx.fillStyle = '#e5e5e5';
+          ctx.font = '13px -apple-system, sans-serif';
+          ctx.textBaseline = 'middle';
+          const icon = NODE_ICONS[n.type] || '⬜';
+          ctx.fillText(icon + ' ' + n.name, n.x + 12, n.y + 28);
+          // Type label
+          ctx.fillStyle = '#737373';
+          ctx.font = '10px -apple-system, sans-serif';
+          ctx.fillText(n.type, n.x + 12, n.y + 46);
+          // Input port
+          if (n.type !== 'input') {
+            ctx.beginPath();
+            ctx.arc(n.x, n.y + NODE_H / 2, PORT_R, 0, Math.PI * 2);
+            ctx.fillStyle = '#333';
+            ctx.fill();
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 1.5;
+            ctx.stroke();
+          }
+          // Output port
+          if (n.type !== 'output') {
+            ctx.beginPath();
+            ctx.arc(n.x + NODE_W, n.y + NODE_H / 2, PORT_R, 0, Math.PI * 2);
+            ctx.fillStyle = '#333';
+            ctx.fill();
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 1.5;
+            ctx.stroke();
+          }
+        }
+        ctx.restore();
+      }
+      // ── Events ──
+      function onMouseDown(e) {
+        const p = toCanvas(e);
+        // Check port first
+        const port = portAt(p.x, p.y);
+        if (port && port.port === 'out') {
+          connecting = { nodeId: port.node.id, mx: p.x, my: p.y };
+          return;
+        }
+        const node = nodeAt(p.x, p.y);
+        if (node) {
+          selected = node;
+          dragging = node;
+          dragOffset = { x: p.x - node.x, y: p.y - node.y };
+          pushUndo();
+          showProps(node);
+          render();
+        } else {
+          selected = null;
+          hideProps();
+          isPanning = true;
+          panStart = { x: e.clientX - pan.x, y: e.clientY - pan.y };
+          render();
+        }
+      }
+      function onMouseMove(e) {
+        const p = toCanvas(e);
+        if (connecting) {
+          connecting.mx = p.x;
+          connecting.my = p.y;
+          render();
+          return;
+        }
+        if (dragging) {
+          dragging.x = snap(p.x - dragOffset.x);
+          dragging.y = snap(p.y - dragOffset.y);
+          render();
+          return;
+        }
+        if (isPanning) {
+          pan.x = e.clientX - panStart.x;
+          pan.y = e.clientY - panStart.y;
+          render();
+        }
+      }
+      function onMouseUp(e) {
+        if (connecting) {
+          const p = toCanvas(e);
+          const port = portAt(p.x, p.y);
+          if (port && port.port === 'in' && port.node.id !== connecting.nodeId) {
+            addEdge(connecting.nodeId, port.node.id);
+          }
+          connecting = null;
+          render();
+        }
+        dragging = null;
+        isPanning = false;
+      }
+      function onDblClick(e) {
+        const p = toCanvas(e);
+        const node = nodeAt(p.x, p.y);
+        if (node) {
+          const newName = prompt('Node name:', node.name);
+          if (newName !== null) { pushUndo(); node.name = newName; render(); showProps(node); }
+        }
+      }
+      function onWheel(e) {
+        e.preventDefault();
+        const r = canvas.getBoundingClientRect();
+        const mx = e.clientX - r.left, my = e.clientY - r.top;
+        const oldZoom = zoom;
+        zoom *= e.deltaY < 0 ? 1.1 : 0.9;
+        zoom = Math.max(0.2, Math.min(3, zoom));
+        pan.x = mx - (mx - pan.x) * (zoom / oldZoom);
+        pan.y = my - (my - pan.y) * (zoom / oldZoom);
+        render();
+      }
+      function onDrop(e) {
+        e.preventDefault();
+        const type = e.dataTransfer.getData('node-type');
+        if (!type) return;
+        const p = toCanvas(e);
+        addNode(type, p.x - NODE_W / 2, p.y - NODE_H / 2);
+      }
+      function onKey(e) {
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+        if ((e.key === 'Delete' || e.key === 'Backspace') && selected) { deleteSelected(); }
+        if (e.ctrlKey && e.key === 'z') { undo(); }
+        if (e.ctrlKey && e.key === 'y') { redo(); }
+      }
+      function showProps(node) {
+        const panel = document.getElementById('dag-props');
+        const content = document.getElementById('dag-props-content');
+        panel.style.display = 'block';
+        let html = `<div style="margin-bottom:8px"><strong>${NODE_ICONS[node.type]} ${node.name}</strong> <span style="color:var(--text-muted)">(${node.type})</span></div>`;
+        html += `<label style="font-size:12px;color:var(--text-muted)">Name</label><br><input class="search-input" value="${escapeHtml(node.name)}" onchange="dagEditor.updateProp('${node.id}','name',this.value)" style="margin-bottom:8px;width:300px"><br>`;
+        for (const [key, val] of Object.entries(node.config)) {
+          html += `<label style="font-size:12px;color:var(--text-muted)">${key}</label><br>`;
+          if (typeof val === 'number') {
+            html += `<input class="search-input" type="number" value="${val}" onchange="dagEditor.updateConfig('${node.id}','${key}',Number(this.value))" style="margin-bottom:8px;width:300px"><br>`;
+          } else {
+            html += `<input class="search-input" value="${escapeHtml(String(val))}" onchange="dagEditor.updateConfig('${node.id}','${key}',this.value)" style="margin-bottom:8px;width:300px"><br>`;
+          }
+        }
+        content.innerHTML = html;
+      }
+      function hideProps() {
+        document.getElementById('dag-props').style.display = 'none';
+      }
+      // ── Public API ──
+      return {
+        initCanvas,
+        onPaletteDrag(e, type) { e.dataTransfer.setData('node-type', type); },
+        deleteSelected() {
+          if (!selected) return;
+          pushUndo();
+          edges = edges.filter(e => e.from !== selected.id && e.to !== selected.id);
+          nodes = nodes.filter(n => n.id !== selected.id);
+          selected = null;
+          hideProps();
+          render();
+        },
+        undo() {
+          if (!undoStack.length) return;
+          redoStack.push(JSON.stringify({ nodes, edges }));
+          const state = JSON.parse(undoStack.pop());
+          nodes = state.nodes; edges = state.edges; selected = null; hideProps(); render();
+        },
+        redo() {
+          if (!redoStack.length) return;
+          undoStack.push(JSON.stringify({ nodes, edges }));
+          const state = JSON.parse(redoStack.pop());
+          nodes = state.nodes; edges = state.edges; selected = null; hideProps(); render();
+        },
+        zoomIn() { zoom = Math.min(3, zoom * 1.2); render(); },
+        zoomOut() { zoom = Math.max(0.2, zoom * 0.8); render(); },
+        fitView() {
+          if (!nodes.length) { pan = { x: 50, y: 50 }; zoom = 1; render(); return; }
+          const minX = Math.min(...nodes.map(n => n.x));
+          const minY = Math.min(...nodes.map(n => n.y));
+          const maxX = Math.max(...nodes.map(n => n.x + NODE_W));
+          const maxY = Math.max(...nodes.map(n => n.y + NODE_H));
+          const cw = canvas.width / (window.devicePixelRatio || 1);
+          const ch = canvas.height / (window.devicePixelRatio || 1);
+          zoom = Math.min(cw / (maxX - minX + 100), ch / (maxY - minY + 100), 2);
+          pan.x = (cw - (maxX + minX) * zoom) / 2;
+          pan.y = (ch - (maxY + minY) * zoom) / 2;
+          render();
+        },
+        updateProp(nodeId, key, value) {
+          const n = nodes.find(n => n.id === nodeId);
+          if (n) { pushUndo(); n[key] = value; render(); }
+        },
+        updateConfig(nodeId, key, value) {
+          const n = nodes.find(n => n.id === nodeId);
+          if (n) { pushUndo(); n.config[key] = value; }
+        },
+        async save() {
+          const name = prompt('Workflow name:', workflowName);
+          if (!name) return;
+          workflowName = name;
+          const wf = { id: workflowId || undefined, name, nodes, edges };
+          try {
+            const result = await apiPost('workflows', wf);
+            workflowId = result.id;
+            alert('Saved: ' + result.id);
+            loadWorkflows();
+          } catch (e) { alert('Save failed: ' + e.message); }
+        },
+        async loadSelected() {
+          const id = document.getElementById('wf-list-select').value;
+          if (!id) { nodes = []; edges = []; workflowId = null; workflowName = 'Untitled'; selected = null; hideProps(); render(); return; }
+          try {
+            const wf = await api('workflows/' + id);
+            if (wf.error) { alert(wf.error); return; }
+            nodes = wf.nodes || []; edges = wf.edges || [];
+            workflowId = wf.id; workflowName = wf.name;
+            selected = null; hideProps(); undoStack = []; redoStack = [];
+            render();
+          } catch (e) { alert('Load failed: ' + e.message); }
+        },
+        exportJSON() {
+          const json = JSON.stringify({ name: workflowName, nodes, edges }, null, 2);
+          const blob = new Blob([json], { type: 'application/json' });
+          const a = document.createElement('a');
+          a.href = URL.createObjectURL(blob);
+          a.download = (workflowName || 'workflow') + '.json';
+          a.click();
+        },
+        importJSON() {
+          const input = document.createElement('input');
+          input.type = 'file';
+          input.accept = '.json';
+          input.onchange = async (e) => {
+            const file = e.target.files[0];
+            if (!file) return;
+            const text = await file.text();
+            try {
+              const wf = JSON.parse(text);
+              pushUndo();
+              nodes = wf.nodes || []; edges = wf.edges || [];
+              workflowName = wf.name || 'Imported';
+              workflowId = null; selected = null; hideProps();
+              render();
+            } catch { alert('Invalid JSON'); }
+          };
+          input.click();
+        },
+        async run() {
+          if (!workflowId) { alert('Save workflow first'); return; }
+          const outEl = document.getElementById('dag-run-output');
+          const resEl = document.getElementById('dag-run-results');
+          outEl.style.display = 'block';
+          resEl.textContent = 'Running...';
+          try {
+            const result = await apiPost('workflows/' + workflowId + '/run', {});
+            resEl.textContent = JSON.stringify(result, null, 2);
+          } catch (e) { resEl.textContent = 'Error: ' + e.message; }
+        },
+        // For serialization tests
+        serialize() { return { name: workflowName, nodes, edges }; },
+        deserialize(wf) { nodes = wf.nodes || []; edges = wf.edges || []; workflowName = wf.name || ''; render(); },
+        getNodes() { return nodes; },
+        getEdges() { return edges; },
+      };
+    })();
+    // Initial load
+    loadDashboard();
+    // ─── Playground ───────────────────────────────────
+    const pgMessages = [];
+    function pgAddMsg(role, text) {
+      const el = document.createElement('div');
+      el.style.cssText = role === 'user'
+        ? 'align-self:flex-end;background:var(--accent);color:#000;padding:8px 12px;border-radius:12px 12px 4px 12px;max-width:75%;font-size:14px;white-space:pre-wrap;'
+        : 'align-self:flex-start;background:var(--bg-hover);padding:8px 12px;border-radius:12px 12px 12px 4px;max-width:75%;font-size:14px;white-space:pre-wrap;';
+      el.textContent = text;
+      const container = document.getElementById('pg-messages');
+      // Remove placeholder
+      if (pgMessages.length === 0) container.innerHTML = '';
+      container.appendChild(el);
+      container.scrollTop = container.scrollHeight;
+      return el;
+    }
+    async function pgSend() {
+      const input = document.getElementById('pg-input');
+      const text = input.value.trim();
+      if (!text) return;
+      input.value = '';
+      document.getElementById('pg-send-btn').disabled = true;
+      pgMessages.push({ role: 'user', content: text });
+      pgAddMsg('user', text);
+      const el = pgAddMsg('assistant', '');
+      let full = '';
+      try {
+        const res = await fetch(API + '/api/playground/chat', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            messages: pgMessages,
+            model: document.getElementById('pg-model').value,
+            temperature: parseFloat(document.getElementById('pg-temp').value),
+            systemPrompt: document.getElementById('pg-system').value || undefined,
+          }),
+        });
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let buf = '';
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buf += decoder.decode(value, { stream: true });
+          const lines = buf.split('\n');
+          buf = lines.pop() || '';
+          for (const line of lines) {
+            if (line.startsWith('data: ')) {
+              const d = line.slice(6);
+              if (d === '[DONE]') break;
+              try { const j = JSON.parse(d); full += j.content || ''; el.textContent = full; } catch {}
+            }
+          }
+          document.getElementById('pg-messages').scrollTop = document.getElementById('pg-messages').scrollHeight;
+        }
+      } catch (e) { full = 'Error: ' + e.message; el.textContent = full; }
+      pgMessages.push({ role: 'assistant', content: full });
+      document.getElementById('pg-send-btn').disabled = false;
+      input.focus();
+    }
+    function pgClear() {
+      pgMessages.length = 0;
+      document.getElementById('pg-messages').innerHTML = '<div style="color:var(--text-muted);font-size:13px;text-align:center;padding:40px;">Send a message to start chatting</div>';
+    }
+  </script>
+</body>
+</html>