opc-agent 3.0.1 → 4.0.1

package/src/studio-ui/index.html

@@ -5,1274 +5,2703 @@
   <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;
+      --bg: #0a0a0a; --bg-card: #141414; --bg-hover: #1a1a1a; --bg-input: #1a1a1a;
+      --border: #262626; --text: #e5e5e5; --text-muted: #737373; --text-dim: #525252;
+      --accent: #3b82f6; --accent-hover: #2563eb; --accent-light: rgba(59,130,246,0.1);
+      --green: #22c55e; --red: #ef4444; --yellow: #eab308; --purple: #a855f7;
       --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       --mono: 'SF Mono', 'Fira Code', monospace;
-      --radius: 8px;
+      --radius: 10px; --radius-lg: 16px;
     }
     body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; }
-    
-    /* === Layout === */
+    a { color: var(--accent); text-decoration: none; }
+    button { font-family: var(--font); cursor: pointer; border: none; }
+    input, select, textarea { font-family: var(--font); }
+
+    /* 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;
+      width: 220px; background: var(--bg-card); border-right: 1px solid var(--border);
+      padding: 16px 12px; display: flex; flex-direction: column; position: fixed; height: 100vh; z-index: 100;
     }
-    .sidebar-logo { font-size: 18px; font-weight: 700; padding: 8px 12px; margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
+    .sidebar-logo { font-size: 17px; font-weight: 700; padding: 10px 12px; margin-bottom: 20px; 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; }
-    
+    .nav-item.active { background: var(--accent-light); color: var(--accent); font-weight: 500; }
+    .nav-item .icon { width: 20px; text-align: center; font-size: 16px; }
+    .main { flex: 1; margin-left: 220px; min-height: 100vh; }
+
+    /* Mobile */
+    .mobile-header { display: none; background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 12px 16px; position: sticky; top: 0; z-index: 50; }
+    .mobile-header button { background: none; border: none; color: var(--text); font-size: 20px; }
+    @media (max-width: 768px) {
+      .sidebar { transform: translateX(-100%); transition: transform 0.2s; width: 260px; }
+      .sidebar.open { transform: translateX(0); }
+      .mobile-header { display: flex; align-items: center; justify-content: space-between; }
+      .main { margin-left: 0; }
+      .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; }
+      .sidebar-overlay.show { display: block; }
+    }
+
+    /* Page container */
+    .page { display: none; padding: 32px; max-width: 1200px; margin: 0 auto; }
+    .page.active { display: block; }
+    .page-title { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
+    .page-subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; }
+
     /* 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; }
+    .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; transition: border-color 0.15s; }
+    .card:hover { border-color: #333; }
+    .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
+
+    /* Buttons */
+    .btn { padding: 10px 20px; border-radius: var(--radius); font-size: 14px; font-weight: 500; transition: all 0.15s; display: inline-flex; align-items: center; gap: 8px; }
+    .btn-primary { background: 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; }
-    
+    .btn-secondary { background: var(--bg-hover); color: var(--text); border: 1px solid var(--border); }
+    .btn-secondary:hover { border-color: #444; }
+    .btn-danger { background: rgba(239,68,68,0.1); color: var(--red); }
+    .btn-danger:hover { background: rgba(239,68,68,0.2); }
+    .btn-sm { padding: 6px 12px; font-size: 13px; }
+    .btn-lg { padding: 14px 28px; font-size: 16px; }
+
+    /* Form elements */
+    .input { width: 100%; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 14px; outline: none; transition: border-color 0.15s; }
+    .input:focus { border-color: var(--accent); }
+    .input::placeholder { color: var(--text-dim); }
+    .label { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; }
+    .form-group { margin-bottom: 20px; }
+    select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
+
+    /* Search bar */
+    .search-bar { position: relative; margin-bottom: 20px; }
+    .search-bar .input { padding-left: 40px; }
+    .search-bar::before { content: '🔍'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; }
+
+    /* Tags / Chips */
+    .chip { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; }
+    .chip:hover, .chip.active { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
+    .chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
+
+    /* Template card */
+    .tpl-card { cursor: pointer; }
+    .tpl-card .tpl-icon { font-size: 32px; margin-bottom: 12px; }
+    .tpl-card .tpl-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
+    .tpl-card .tpl-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
+    .tpl-card .tpl-tags { display: flex; gap: 6px; flex-wrap: wrap; }
+    .tpl-card .tpl-tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--bg-hover); color: var(--text-dim); }
+
+    /* Wizard */
+    .wizard { max-width: 640px; margin: 0 auto; }
+    .wizard-steps { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; }
+    .wizard-step { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 13px; }
+    .wizard-step.active { color: var(--accent); }
+    .wizard-step.done { color: var(--green); }
+    .wizard-step .step-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; border: 2px solid var(--border); }
+    .wizard-step.active .step-num { border-color: var(--accent); background: var(--accent-light); }
+    .wizard-step.done .step-num { border-color: var(--green); background: rgba(34,197,94,0.1); }
+    .wizard-step .step-line { width: 40px; height: 2px; background: var(--border); }
+    .wizard-panel { display: none; }
+    .wizard-panel.active { display: block; }
+
+    /* Agent card on dashboard */
+    .agent-card { cursor: pointer; position: relative; }
+    .agent-card .agent-icon { font-size: 36px; margin-bottom: 12px; }
+    .agent-card .agent-name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
+    .agent-card .agent-template { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
+    .agent-card .agent-stats { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
+    .agent-card .agent-actions { position: absolute; top: 16px; right: 16px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
+    .agent-card:hover .agent-actions { opacity: 1; }
+    .agent-card .agent-actions button { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 12px; color: var(--text-muted); }
+    .agent-card .agent-actions button:hover { color: var(--text); border-color: #444; }
+
+    /* Chat UI */
+    .chat-container { display: none; flex-direction: column; height: calc(100vh - 0px); }
+    .chat-container.active { display: flex; }
+    .chat-header { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; background: var(--bg-card); }
+    .chat-header .chat-icon { font-size: 28px; }
+    .chat-header .chat-name { font-size: 16px; font-weight: 600; }
+    .chat-header .chat-status { font-size: 12px; color: var(--text-muted); }
+    .chat-header .chat-back { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; margin-right: 4px; }
+    .chat-messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
+    .msg { max-width: 75%; display: flex; flex-direction: column; gap: 4px; }
+    .msg.user { align-self: flex-end; }
+    .msg.assistant { align-self: flex-start; }
+    .msg-bubble { padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
+    .msg.user .msg-bubble { background: var(--accent); color: white; border-bottom-right-radius: 4px; }
+    .msg.assistant .msg-bubble { background: var(--bg-card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
+    .msg-time { font-size: 11px; color: var(--text-dim); }
+    .msg.user .msg-time { text-align: right; }
+    .typing-indicator { display: none; align-self: flex-start; }
+    .typing-indicator.show { display: flex; }
+    .typing-indicator .dots { display: flex; gap: 4px; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; }
+    .typing-indicator .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); animation: bounce 1.4s infinite ease-in-out; }
+    .typing-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
+    .typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; }
+    @keyframes bounce { 0%,80%,100% { transform: scale(0.6); } 40% { transform: scale(1); } }
+    .chat-input-bar { padding: 16px 24px; border-top: 1px solid var(--border); background: var(--bg-card); display: flex; gap: 12px; align-items: center; }
+    .chat-input-bar .input { flex: 1; border-radius: 24px; padding: 12px 20px; }
+    .chat-input-bar .btn { border-radius: 24px; padding: 12px 24px; }
+
+    /* Memory timeline */
+    .timeline { position: relative; padding-left: 24px; }
+    .timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--border); }
+    .timeline-item { position: relative; margin-bottom: 24px; }
+    .timeline-item::before { content: ''; position: absolute; left: -20px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
+    .timeline-date { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
+    .timeline-content { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
+
+    /* Empty state */
+    .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
+    .empty-state .empty-icon { font-size: 48px; margin-bottom: 16px; }
+    .empty-state .empty-title { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
+    .empty-state .empty-desc { font-size: 14px; margin-bottom: 24px; }
+
+    /* Confirm dialog */
+    .dialog-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 200; align-items: center; justify-content: center; }
+    .dialog-overlay.show { display: flex; }
+    .dialog { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; max-width: 400px; width: 90%; }
+    .dialog-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
+    .dialog-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; }
+    .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
+
+    /* Settings layout */
+    .settings-layout { display: flex; gap: 0; min-height: calc(100vh - 64px); }
+    .settings-nav { width: 200px; background: var(--bg-card); border-right: 1px solid var(--border); padding: 16px 8px; flex-shrink: 0; }
+    .settings-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); cursor: pointer; color: var(--text-muted); font-size: 14px; margin-bottom: 2px; transition: all 0.15s; }
+    .settings-nav-item:hover { background: var(--bg-hover); color: var(--text); }
+    .settings-nav-item.active { background: var(--accent-light); color: var(--accent); font-weight: 500; }
+    .settings-content { flex: 1; padding: 32px; max-width: 900px; }
+    .settings-panel { display: none; }
+    .settings-panel.active { display: block; }
+    @media (max-width: 768px) {
+      .settings-layout { flex-direction: column; }
+      .settings-nav { width: 100%; display: flex; overflow-x: auto; padding: 8px; gap: 4px; border-right: none; border-bottom: 1px solid var(--border); }
+      .settings-nav-item { white-space: nowrap; font-size: 13px; padding: 8px 12px; }
+      .settings-content { padding: 16px; }
+    }
+
+    /* Tabs */
+    .tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
+    .tab { padding: 10px 20px; cursor: pointer; color: var(--text-muted); font-size: 14px; border-bottom: 2px solid transparent; transition: all 0.15s; }
+    .tab:hover { color: var(--text); }
+    .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
+    .tab-panel { display: none; }
+    .tab-panel.active { display: block; }
+
+    /* Status dot */
+    .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+    .status-dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); }
+    .status-dot.red { background: var(--red); box-shadow: 0 0 6px var(--red); }
+    .status-dot.yellow { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
+
+    /* Channel card */
+    .channel-card { display: flex; align-items: center; gap: 16px; cursor: pointer; }
+    .channel-card .ch-icon { font-size: 28px; }
+    .channel-card .ch-info { flex: 1; }
+    .channel-card .ch-name { font-size: 15px; font-weight: 600; }
+    .channel-card .ch-status { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
+
+    /* Stat card */
+    .stat-card { text-align: center; }
+    .stat-value { font-size: 28px; font-weight: 700; color: var(--accent); }
+    .stat-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
+
+    /* Log viewer */
+    .log-viewer { background: #0d0d0d; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; font-family: var(--mono); font-size: 12px; color: var(--text-muted); max-height: 400px; overflow-y: auto; white-space: pre-wrap; line-height: 1.6; }
+
+    /* Module iframe */
+    .module-frame-container { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
+    .module-frame-container iframe { width: 100%; height: 600px; border: none; background: var(--bg); }
+    .module-frame-fallback { text-align: center; padding: 48px 24px; }
+    .module-frame-fallback .mf-icon { font-size: 48px; margin-bottom: 16px; }
+
+    /* Ollama tutorial */
+    .tutorial-steps { counter-reset: step; }
+    .tutorial-step { display: flex; gap: 16px; margin-bottom: 20px; align-items: flex-start; }
+    .tutorial-step::before { counter-increment: step; content: counter(step); width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
+    .tutorial-step-content { flex: 1; }
+    .tutorial-step-content h4 { font-size: 15px; margin-bottom: 4px; }
+    .tutorial-step-content p { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
+    .tutorial-step-content code { background: var(--bg-hover); padding: 2px 8px; border-radius: 4px; font-family: var(--mono); font-size: 13px; }
+
+    /* Provider card */
+    .provider-card { cursor: pointer; transition: all 0.15s; }
+    .provider-card:hover { border-color: var(--accent); }
+    .provider-card.configured { border-color: var(--green); }
+    .provider-card .pv-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
+    .provider-card .pv-name { font-size: 15px; font-weight: 600; }
+    .provider-card .pv-status { font-size: 12px; }
+
+    /* Bar chart */
+    .bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding-top: 8px; }
+    .bar-chart .bar { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 4px; transition: height 0.3s; position: relative; }
+    .bar-chart .bar:hover { opacity: 0.8; }
+    .bar-chart .bar-label { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-dim); white-space: nowrap; }
+
     /* 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); } }
+    ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
+
+    /* Settings layout */
+    .settings-layout { display: flex; gap: 24px; align-items: flex-start; }
+    .settings-subnav { width: 190px; flex-shrink: 0; }
+    .snav-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; }
+    .snav-item:hover { background: var(--bg-hover); color: var(--text); }
+    .snav-item.active { background: var(--accent-light); color: var(--accent); font-weight: 500; }
+    .settings-content { flex: 1; min-width: 0; }
+    .settings-section { display: none; }
+    .settings-section.active { display: block; }
+    .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
+    .tab { padding: 10px 20px; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s; }
+    .tab:hover { color: var(--text); }
+    .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+    .tab-panel { display: none; }
+    .tab-panel.active { display: block; }
+    .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; flex-shrink: 0; }
+    .status-dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); }
+    .status-dot.red { background: var(--red); }
+    .status-dot.yellow { background: var(--yellow); animation: sdpulse 1.5s ease-in-out infinite; }
+    @keyframes sdpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
+    .channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
+    .channel-card { cursor: pointer; text-align: center; padding: 20px 12px; }
+    .channel-card:hover { border-color: var(--accent); }
+    .channel-card.connected { border-color: var(--green); }
+    .log-viewer { background: #080808; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; font-family: var(--mono); font-size: 12px; line-height: 1.7; overflow-y: auto; max-height: 280px; color: #86efac; white-space: pre-wrap; word-break: break-all; }
+    .bar-chart-wrap { display: flex; align-items: flex-end; gap: 6px; height: 80px; }
+    .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; }
+    .bar-fill { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; transition: height 0.4s ease; }
+    .bar-lbl { font-size: 10px; color: var(--text-dim); }
+    .iframe-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
+    .iframe-wrap iframe { width: 100%; height: 580px; border: none; display: block; background: var(--bg); }
+    .help-text { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
+    @media (max-width: 768px) {
+      .settings-layout { flex-direction: column; }
+      .settings-subnav { width: 100%; display: flex; flex-wrap: wrap; gap: 4px; }
+      .snav-item { padding: 8px 10px; font-size: 12px; flex-direction: column; gap: 4px; text-align: center; min-width: 70px; }
+    }
   </style>
 </head>
 <body>
   <div class="app">
     <!-- Sidebar -->
+    <div class="sidebar-overlay" onclick="toggleSidebar(false)"></div>
     <nav class="sidebar">
-      <div class="sidebar-logo">⚡ <span>OPC</span> Studio</div>
+      <div class="sidebar-logo">⚡ <span>OPC Studio</span></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 class="nav-item active" data-page="dashboard" onclick="navigate('dashboard')">
+          <span class="icon">🏠</span> Dashboard
         </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 class="nav-item" data-page="chat" onclick="openLastChat()">
+          <span class="icon">💬</span> Chat
         </div>
-        <div class="card">
-          <div class="card-title">🟢 Agent Status</div>
-          <div id="agent-status-detail">Loading...</div>
+        <div class="nav-item" data-page="templates" onclick="navigate('templates')">
+          <span class="icon">👤</span> Templates
         </div>
-        <div class="card">
-          <div class="card-title">🧠 Memory Stats</div>
-          <div id="memory-stats">Loading...</div>
+        <div class="nav-item" data-page="skills" onclick="navigate('skills')">
+          <span class="icon">🧩</span> Skills Market
         </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 class="nav-item" data-page="create" onclick="navigate('create')">
+          <span class="icon">✨</span> Create Agent
         </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 class="nav-item" data-page="settings" onclick="currentSettingsTab='models';navigate('settings')">
+          <span class="icon">🤖</span> Models
+        </div>
+        <div class="nav-item" data-page="settings" onclick="currentSettingsTab='channels';navigate('settings')">
+          <span class="icon">📡</span> Channels
+        </div>
+        <div class="nav-item" data-page="settings" onclick="currentSettingsTab='memory';navigate('settings')">
+          <span class="icon">🧠</span> Memory
         </div>
+        <div class="nav-item" data-page="settings" onclick="navigate('settings')">
+          <span class="icon">⚙️</span> Settings
+        </div>
+        <div class="nav-item" data-page="schedules" onclick="navigate('schedules')">
+          <span class="icon">⏰</span> Schedules
+        </div>
+      </div>
+      <div style="padding: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim);">
+        OPC Studio v2.0
       </div>
+    </nav>
 
-      <!-- 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>
+    <!-- Mobile Header -->
+    <div class="mobile-header">
+      <button onclick="toggleSidebar(true)">☰</button>
+      <span style="font-weight:600;">⚡ OPC Studio</span>
+      <span></span>
+    </div>
+
+    <!-- Main Content -->
+    <div class="main">
+      <!-- Dashboard Page -->
+      <div class="page active" id="page-dashboard">
+        <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:24px;">
+          <div>
+            <h1 class="page-title">My Agents</h1>
+            <p class="page-subtitle">Manage and chat with your AI agents</p>
           </div>
-          <textarea class="editor" id="config-editor">Loading...</textarea>
+          <button class="btn btn-primary" onclick="navigate('create')">✨ Create New Agent</button>
+        </div>
+        <!-- Health Status Section -->
+        <div id="health-section" style="margin-bottom:24px;"></div>
+        <div id="agents-list" class="card-grid"></div>
+        <div id="agents-empty" class="empty-state" style="display:none;">
+          <div class="empty-icon">🤖</div>
+          <div class="empty-title">No agents yet</div>
+          <div class="empty-desc">Create your first AI agent in just 3 steps — no coding required!</div>
+          <button class="btn btn-primary btn-lg" onclick="navigate('create')">✨ Create My First Agent</button>
         </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>
+      <!-- Templates Page -->
+      <div class="page" id="page-templates">
+        <h1 class="page-title">Template Market</h1>
+        <p class="page-subtitle">Browse 100+ ready-to-use agent templates across 19 industries</p>
         <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>
+          <input class="input" id="tpl-search" placeholder="Search templates..." oninput="filterTemplates()">
         </div>
-        <div class="card" id="memory-list">Loading...</div>
+        <div class="chip-group" id="industry-chips"></div>
+        <div class="card-grid" id="templates-grid"></div>
       </div>
 
-      <!-- Skills -->
+      <!-- Skills Marketplace Page -->
       <div class="page" id="page-skills">
-        <div class="page-header">
-          <div class="page-title">Skills</div>
-          <div class="page-subtitle">Agent capabilities</div>
+        <h1 class="page-title">🧩 Skill Market</h1>
+        <p class="page-subtitle">One-click install new capabilities for your agent — no coding required</p>
+        <div class="search-bar" style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;">
+          <input class="input" id="skills-search" placeholder="Search skills..." oninput="filterSkills()" style="flex:1;min-width:200px;">
+          <div class="chip-group" id="skill-category-chips" style="margin:0;"></div>
         </div>
-        <div class="card" id="skills-list">Loading...</div>
+        <div class="card-grid" id="skills-grid" style="margin-top:16px;"></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>
+      <!-- Create Wizard Page -->
+      <div class="page" id="page-create">
+        <div class="wizard">
+          <div class="wizard-steps">
+            <div class="wizard-step active" id="ws-1"><div class="step-num">1</div><span>Choose Template</span></div>
+            <div class="wizard-step" id="ws-2"><div class="step-line"></div><div class="step-num">2</div><span>Configure</span></div>
+            <div class="wizard-step" id="ws-3"><div class="step-line"></div><div class="step-num">3</div><span>Confirm</span></div>
+          </div>
+
+          <!-- Step 1: Choose Template -->
+          <div class="wizard-panel active" id="wp-1">
+            <h2 style="font-size:20px;margin-bottom:8px;">Choose a Template</h2>
+            <p style="color:var(--text-muted);font-size:14px;margin-bottom:20px;">Pick a role for your agent. Don't worry, you can customize it later.</p>
+            <div class="search-bar">
+              <input class="input" id="wizard-tpl-search" placeholder="Search templates..." oninput="filterWizardTemplates()">
+            </div>
+            <div class="chip-group" id="wizard-industry-chips"></div>
+            <div class="card-grid" id="wizard-tpl-grid" style="max-height:400px;overflow-y:auto;"></div>
+          </div>
+
+          <!-- Step 2: Configure -->
+          <div class="wizard-panel" id="wp-2">
+            <h2 style="font-size:20px;margin-bottom:8px;">Configure Your Agent</h2>
+            <p style="color:var(--text-muted);font-size:14px;margin-bottom:24px;">Give your agent a name and tell it about your business.</p>
+            <div class="form-group">
+              <label class="label">Agent Name *</label>
+              <input class="input" id="agent-name" placeholder="e.g. My Sales Coach">
+            </div>
+            <div class="form-group">
+              <label class="label">Company / Business Description</label>
+              <textarea class="input" id="agent-desc" rows="3" placeholder="Brief description of your business so the agent can better help you..."></textarea>
+            </div>
+            <div class="form-group">
+              <label class="label">AI Model</label>
+              <select class="input" id="agent-model">
+                <option value="gpt-4o-mini">GPT-4o Mini (Fast & Affordable) ⭐ Recommended</option>
+                <option value="gpt-4o">GPT-4o (Most Capable)</option>
+                <option value="claude-sonnet-4">Claude Sonnet (Balanced)</option>
+                <option value="claude-haiku">Claude Haiku (Fast)</option>
+                <option value="gemini-2.0-flash">Gemini 2.0 Flash (Google)</option>
+                <option value="deepseek-v3">DeepSeek V3 (Open Source)</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label class="label">Language Preference</label>
+              <select class="input" id="agent-lang">
+                <option value="en">English</option>
+                <option value="zh">中文</option>
+                <option value="auto">Auto-detect</option>
+              </select>
+            </div>
+            <div style="display:flex;gap:12px;justify-content:flex-end;margin-top:24px;">
+              <button class="btn btn-secondary" onclick="wizardBack()">← Back</button>
+              <button class="btn btn-primary" onclick="wizardNext()">Next →</button>
+            </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>
+          <!-- Step 3: Confirm -->
+          <div class="wizard-panel" id="wp-3">
+            <h2 style="font-size:20px;margin-bottom:8px;">Review & Create</h2>
+            <p style="color:var(--text-muted);font-size:14px;margin-bottom:24px;">Everything looks good? Let's bring your agent to life!</p>
+            <div class="card" id="confirm-card" style="margin-bottom:24px;"></div>
+            <div style="display:flex;gap:12px;justify-content:flex-end;">
+              <button class="btn btn-secondary" onclick="wizardBack()">← Back</button>
+              <button class="btn btn-primary btn-lg" onclick="createAgent()" id="create-btn">🚀 Create Agent</button>
+            </div>
+          </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">
+      <!-- Chat Page (full height, no padding) -->
+      <div class="chat-container" id="page-chat">
+        <div class="chat-header">
+          <button class="chat-back" onclick="navigate('dashboard')">←</button>
+          <span class="chat-icon" id="chat-agent-icon">🤖</span>
           <div>
-            <div class="page-title">Workflows</div>
-            <div class="page-subtitle">Visual DAG workflow editor</div>
+            <div class="chat-name" id="chat-agent-name">Agent</div>
+            <div class="chat-status" id="chat-agent-status">Online</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 style="margin-left:auto;display:flex;gap:8px;align-items:center;">
+            <select id="chat-agent-select" class="input" style="width:auto;padding:6px 10px;font-size:13px;border-radius:8px;" onchange="switchChatAgent(this.value)"></select>
+            <span id="streaming-indicator" style="display:none;font-size:16px;" title="Thinking...">⏳</span>
+            <button class="btn btn-sm btn-secondary" onclick="clearChat()">🗑 Clear</button>
+            <button class="btn btn-sm btn-secondary" onclick="openMemory()">🧠 Memory</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 class="chat-messages" id="chat-messages">
+          <div class="msg assistant">
+            <div class="msg-bubble" id="chat-welcome">Hello! How can I help you today?</div>
           </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 class="typing-indicator" id="typing-indicator">
+          <div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></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 class="chat-input-bar">
+          <input type="file" id="doc-upload-input" style="display:none" accept=".pdf,.txt,.md,.docx,.csv,.json" onchange="handleDocUpload(this)">
+          <button class="btn" onclick="document.getElementById('doc-upload-input').click()" title="Upload document" style="padding:12px;font-size:18px;background:transparent;border:1px solid var(--border);border-radius:24px;cursor:pointer;">📎</button>
+          <button class="btn" id="voice-btn" onclick="toggleVoiceInput()" title="Voice input (click to start/stop)" style="padding:12px;font-size:18px;background:transparent;border:1px solid var(--border);border-radius:24px;cursor:pointer;">🎤</button>
+          <input class="input" id="chat-input" placeholder="Type a message..." onkeydown="if(event.key==='Enter')sendMessage()">
+          <button class="btn btn-primary" onclick="sendMessage()">Send</button>
         </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>
+      <!-- Settings Page -->
+      <div class="page" id="page-settings">
+        <h1 class="page-title">⚙️ Settings</h1>
+        <p class="page-subtitle">配置您的 AI Agent 平台</p>
+        <div class="settings-layout">
+          <!-- Sub-nav -->
+          <div class="settings-subnav">
+            <div class="snav-item active" data-section="models" onclick="showSettingsSection('models')"><span>🤖</span> 模型配置</div>
+            <div class="snav-item" data-section="channels" onclick="showSettingsSection('channels')"><span>📡</span> 渠道配置</div>
+            <div class="snav-item" data-section="memory" onclick="showSettingsSection('memory')"><span>🧠</span> 记忆管理</div>
+            <div class="snav-item" data-section="role" onclick="showSettingsSection('role')"><span>👤</span> 角色编辑</div>
+            <div class="snav-item" data-section="status" onclick="showSettingsSection('status')"><span>📊</span> 运行状态</div>
+            <div class="snav-item" data-section="usage" onclick="showSettingsSection('usage')"><span>💰</span> 用量统计</div>
+          </div>
+          <!-- Content -->
+          <div class="settings-content">
+
+            <!-- SECTION: Models -->
+            <div class="settings-section active" id="section-models">
+              <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">🤖 模型配置</h2>
+              <p style="color:var(--text-muted);font-size:13px;margin-bottom:20px;">选择让 Agent 思考和对话的 AI 大脑</p>
+              <div class="tabs">
+                <div class="tab active" id="tab-btn-local" onclick="switchModelTab('local')">本地模型</div>
+                <div class="tab" id="tab-btn-cloud" onclick="switchModelTab('cloud')">☁️ 云端 API</div>
+              </div>
+              <!-- Local tab -->
+              <div class="tab-panel active" id="tab-local">
+                <div id="ollama-checking" style="display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:14px;padding:16px 0;">
+                  <span class="status-dot yellow"></span> 正在检测本地 Ollama...
+                </div>
+                <div id="ollama-running" style="display:none;">
+                  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
+                    <div style="display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;">
+                      <span class="status-dot green"></span> Ollama 运行中
+                    </div>
+                    <button class="btn btn-secondary btn-sm" onclick="refreshLocalModels()">🔄 刷新</button>
+                  </div>
+                  <div id="local-models-list" style="display:flex;flex-direction:column;gap:6px;margin-bottom:16px;"></div>
+                  <div class="card" style="background:rgba(59,130,246,0.06);border-color:rgba(59,130,246,0.3);">
+                    <div style="font-size:13px;font-weight:600;margin-bottom:6px;">💡 推荐模型组合</div>
+                    <div style="font-size:12px;color:var(--text-muted);margin-bottom:10px;">对话：<strong>qwen2.5:7b</strong> &nbsp;·&nbsp; 嵌入：<strong>nomic-embed-text</strong></div>
+                    <button class="btn btn-primary btn-sm" onclick="showPullCommand()">查看安装命令</button>
+                  </div>
+                  <div id="pull-cmd" style="display:none;margin-top:12px;">
+                    <div style="background:#080808;padding:10px 14px;border-radius:var(--radius);font-family:var(--mono);font-size:12px;color:#86efac;line-height:1.8;">ollama pull qwen2.5:7b<br>ollama pull nomic-embed-text</div>
+                  </div>
+                </div>
+                <div id="ollama-offline" style="display:none;">
+                  <div class="card">
+                    <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
+                      <span class="status-dot red"></span>
+                      <span style="font-size:14px;font-weight:600;">Ollama 未检测到</span>
+                    </div>
+                    <p style="font-size:13px;color:var(--text-muted);margin-bottom:16px;">在本地运行 AI 模型，完全免费、无需联网、数据不外泄</p>
+                    <div style="display:flex;flex-direction:column;gap:14px;">
+                      <div style="display:flex;gap:12px;">
+                        <div style="width:26px;height:26px;min-width:26px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:white;">1</div>
+                        <div>
+                          <div style="font-size:14px;font-weight:500;margin-bottom:2px;">下载 Ollama</div>
+                          <div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;">访问官网下载安装包（约 200MB，免费）</div>
+                          <a href="https://ollama.com/download" target="_blank" class="btn btn-secondary btn-sm">打开下载页面 ↗</a>
+                        </div>
+                      </div>
+                      <div style="display:flex;gap:12px;">
+                        <div style="width:26px;height:26px;min-width:26px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:white;">2</div>
+                        <div>
+                          <div style="font-size:14px;font-weight:500;margin-bottom:2px;">安装并启动</div>
+                          <div style="font-size:12px;color:var(--text-muted);">按向导安装，Ollama 会自动在后台运行</div>
+                        </div>
+                      </div>
+                      <div style="display:flex;gap:12px;">
+                        <div style="width:26px;height:26px;min-width:26px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:white;">3</div>
+                        <div>
+                          <div style="font-size:14px;font-weight:500;margin-bottom:2px;">拉取推荐模型</div>
+                          <div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;">在终端运行（首次约 5GB，之后永久免费）</div>
+                          <div style="background:#080808;padding:8px 12px;border-radius:var(--radius);font-family:var(--mono);font-size:12px;color:#86efac;">ollama pull qwen2.5:7b<br>ollama pull nomic-embed-text</div>
+                        </div>
+                      </div>
+                    </div>
+                    <button class="btn btn-primary" style="width:100%;margin-top:16px;" onclick="checkOllama()">✅ 已安装完成，重新检测</button>
+                  </div>
+                </div>
+              </div>
+              <!-- Cloud tab -->
+              <div class="tab-panel" id="tab-cloud">
+                <p style="font-size:13px;color:var(--text-muted);margin-bottom:20px;">填入 API Key 即可使用云端大模型，Key 仅保存在本地配置文件中</p>
+                <div id="cloud-providers"></div>
+                <button class="btn btn-primary" style="width:100%;" onclick="saveCloudConfig()">💾 保存云端配置</button>
+                <div id="cloud-save-msg" style="text-align:center;font-size:13px;color:var(--green);margin-top:8px;"></div>
+              </div>
+              <!-- Model assignment -->
+              <div class="card" style="margin-top:24px;">
+                <div style="font-size:15px;font-weight:600;margin-bottom:4px;">模型分配</div>
+                <p style="font-size:12px;color:var(--text-muted);margin-bottom:16px;">将不同模型分配给不同任务，获得最佳效果</p>
+                <div class="form-group">
+                  <label class="label">对话模型 <span style="color:var(--red);">*</span></label>
+                  <p class="help-text" style="margin-bottom:6px;">Agent 用来理解和回复消息的主模型</p>
+                  <select class="input" id="chat-model-select"></select>
+                </div>
+                <div class="form-group">
+                  <label class="label">嵌入模型（记忆专用）</label>
+                  <p class="help-text" style="margin-bottom:6px;">将记忆转为向量存储，推荐 nomic-embed-text</p>
+                  <select class="input" id="embed-model-select"></select>
+                </div>
+                <div style="display:flex;align-items:center;gap:12px;">
+                  <button class="btn btn-primary" onclick="saveModelAssignment()">💾 保存</button>
+                  <span id="model-save-msg" style="font-size:13px;color:var(--green);"></span>
+                </div>
+              </div>
+            </div>
+
+            <!-- SECTION: Channels -->
+            <div class="settings-section" id="section-channels">
+              <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">📡 渠道配置</h2>
+              <p style="color:var(--text-muted);font-size:13px;margin-bottom:20px;">设置 Agent 与用户沟通的渠道，点击卡片进行配置</p>
+              <div class="channel-grid" id="channel-cards"></div>
+            </div>
+
+            <!-- SECTION: Memory -->
+            <div class="settings-section" id="section-memory">
+              <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">🧠 记忆管理</h2>
+              <p style="color:var(--text-muted);font-size:13px;margin-bottom:16px;">管理 Agent 的长期记忆（由 DeepBrain 驱动）</p>
+              <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;" id="deepbrain-status">
+                <span class="status-dot yellow"></span>
+                <span style="font-size:13px;color:var(--text-muted);">正在检测 DeepBrain...</span>
+              </div>
+              <div id="deepbrain-online" style="display:none;">
+                <div class="iframe-wrap"><iframe id="deepbrain-frame" src="http://localhost:4001" title="DeepBrain"></iframe></div>
+              </div>
+              <div id="deepbrain-offline" style="display:none;">
+                <div class="card empty-state">
+                  <div class="empty-icon">🧠</div>
+                  <div class="empty-title">DeepBrain 未启动</div>
+                  <div class="empty-desc">DeepBrain 是独立的记忆管理模块，需要单独运行在端口 4001</div>
+                  <div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap;">
+                    <a href="http://localhost:4001" target="_blank" class="btn btn-primary">在新标签页打开 ↗</a>
+                    <button class="btn btn-secondary" onclick="checkDeepBrain()">🔄 重新检测</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- SECTION: Role -->
+            <div class="settings-section" id="section-role">
+              <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">👤 角色编辑</h2>
+              <p style="color:var(--text-muted);font-size:13px;margin-bottom:16px;">设计 Agent 的人格和行为方式（由 Workstation 驱动）</p>
+              <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;" id="workstation-status">
+                <span class="status-dot yellow"></span>
+                <span style="font-size:13px;color:var(--text-muted);">正在检测 Workstation...</span>
+              </div>
+              <div id="workstation-online" style="display:none;">
+                <div class="iframe-wrap"><iframe id="workstation-frame" src="http://localhost:4003" title="Workstation"></iframe></div>
+              </div>
+              <div id="workstation-offline" style="display:none;">
+                <div class="card empty-state">
+                  <div class="empty-icon">👤</div>
+                  <div class="empty-title">Workstation 未启动</div>
+                  <div class="empty-desc">Workstation 是独立的角色编辑模块，需要单独运行在端口 4003</div>
+                  <div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap;">
+                    <a href="http://localhost:4003" target="_blank" class="btn btn-primary">在新标签页打开 ↗</a>
+                    <button class="btn btn-secondary" onclick="checkWorkstation()">🔄 重新检测</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- SECTION: Status -->
+            <div class="settings-section" id="section-status">
+              <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">📊 运行状态</h2>
+              <p style="color:var(--text-muted);font-size:13px;margin-bottom:20px;">查看 Studio 和 Agent 的运行情况</p>
+              <div class="card-grid" style="grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin-bottom:20px;">
+                <div class="card">
+                  <div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;">Studio 状态</div>
+                  <div style="display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;">
+                    <span class="status-dot green"></span> 运行中
+                  </div>
+                </div>
+                <div class="card">
+                  <div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;">运行时长</div>
+                  <div style="font-size:15px;font-weight:600;" id="status-uptime">--</div>
+                </div>
+                <div class="card">
+                  <div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;">内存占用</div>
+                  <div style="font-size:15px;font-weight:600;" id="status-memory">-- MB</div>
+                </div>
+                <div class="card">
+                  <div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;">启动 Agent</div>
+                  <code style="background:var(--bg-hover);padding:4px 8px;border-radius:4px;font-size:12px;color:var(--text-muted);">opc run</code>
+                </div>
+              </div>
+              <div class="card">
+                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
+                  <div style="font-size:14px;font-weight:600;">📋 最近日志（最后 50 行）</div>
+                  <button class="btn btn-secondary btn-sm" onclick="refreshStatus()">🔄 刷新</button>
+                </div>
+                <div class="log-viewer" id="status-logs">暂无日志记录</div>
+              </div>
+            </div>
+
+            <!-- SECTION: Usage -->
+            <div class="settings-section" id="section-usage">
+              <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">💰 用量统计</h2>
+              <p style="color:var(--text-muted);font-size:13px;margin-bottom:20px;">Token 消耗和费用概览（近 7 天）</p>
+              <div class="card-grid" style="grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin-bottom:20px;">
+                <div class="card">
+                  <div style="font-size:12px;color:var(--text-muted);margin-bottom:4px;">总 Token 用量</div>
+                  <div style="font-size:26px;font-weight:700;" id="usage-total-tokens">0</div>
+                  <div style="font-size:11px;color:var(--text-dim);margin-top:2px;">近 7 天</div>
+                </div>
+                <div class="card">
+                  <div style="font-size:12px;color:var(--text-muted);margin-bottom:4px;">预估费用</div>
+                  <div style="font-size:26px;font-weight:700;" id="usage-total-cost">$0.00</div>
+                  <div style="font-size:11px;color:var(--text-dim);margin-top:2px;">近 7 天</div>
+                </div>
+              </div>
+              <div class="card" style="margin-bottom:20px;">
+                <div style="font-size:14px;font-weight:600;margin-bottom:16px;">📈 每日 Token 用量</div>
+                <div class="bar-chart-wrap" id="usage-chart"></div>
+              </div>
+              <div class="card">
+                <div style="font-size:14px;font-weight:600;margin-bottom:12px;">按模型分类</div>
+                <div id="usage-by-model"><div style="font-size:13px;color:var(--text-muted);">暂无使用记录。开始与 Agent 对话后将自动统计。</div></div>
+              </div>
+            </div>
+
+            <!-- SECTION: Image Generation -->
+            <div class="settings-section" id="section-imagegen">
+              <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">🎨 图片生成</h2>
+              <p style="color:var(--text-muted);font-size:13px;margin-bottom:20px;">Configure image generation providers for your agents</p>
+              <div class="card" style="margin-bottom:16px;">
+                <div style="font-size:14px;font-weight:600;margin-bottom:12px;">DALL·E (OpenAI)</div>
+                <div class="form-group">
+                  <label class="label">OpenAI API Key</label>
+                  <input class="input" id="ig-openai-key" type="password" placeholder="sk-...">
+                </div>
+              </div>
+              <div class="card" style="margin-bottom:16px;">
+                <div style="font-size:14px;font-weight:600;margin-bottom:12px;">Stable Diffusion (Local)</div>
+                <div class="form-group">
+                  <label class="label">API URL</label>
+                  <input class="input" id="ig-sd-url" placeholder="http://localhost:7860">
+                </div>
+              </div>
+              <div class="card" style="margin-bottom:16px;">
+                <div style="font-size:14px;font-weight:600;margin-bottom:12px;">Replicate</div>
+                <div class="form-group">
+                  <label class="label">API Token</label>
+                  <input class="input" id="ig-replicate-key" type="password" placeholder="r8_...">
+                </div>
+              </div>
+              <button class="btn btn-primary" onclick="saveImageGenConfig()">💾 Save Configuration</button>
+              <div id="ig-status" style="margin-top:12px;font-size:13px;color:var(--text-muted);"></div>
+            </div>
+
+          </div><!-- end settings-content -->
+        </div><!-- end settings-layout -->
+      </div><!-- end page-settings -->
+
+      <!-- Memory Page -->
+      <div class="page" id="page-memory">
+        <div style="display:flex;align-items:center;gap:12px;margin-bottom:24px;">
+          <button class="btn btn-secondary btn-sm" onclick="navigateToChat()">← Back to Chat</button>
+          <div>
+            <h1 class="page-title" style="margin-bottom:0;">🧠 Agent Memory</h1>
+            <p class="page-subtitle" style="margin-bottom:0;">Knowledge your agent has learned over time</p>
+          </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 id="memory-timeline"></div>
+        <div id="memory-empty" class="empty-state">
+          <div class="empty-icon">🧠</div>
+          <div class="empty-title">No memories yet</div>
+          <div class="empty-desc">Your agent will learn and remember things as you chat with it.</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>
+      <!-- Schedules Page -->
+      <div class="page" id="page-schedules">
+        <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:24px;">
+          <div>
+            <h1 class="page-title">⏰ Scheduled Tasks</h1>
+            <p class="page-subtitle">Automate recurring agent tasks with cron schedules</p>
+          </div>
+          <button class="btn btn-primary" onclick="showScheduleForm()">+ New Task</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>
+        <!-- New/Edit Form (hidden by default) -->
+        <div id="schedule-form" class="card" style="display:none;margin-bottom:24px;">
+          <h3 style="font-size:16px;font-weight:600;margin-bottom:16px;" id="schedule-form-title">New Scheduled Task</h3>
+          <div class="form-group">
+            <label class="label">Task Name *</label>
+            <input class="input" id="sched-name" placeholder="e.g. Daily News Summary">
+          </div>
+          <div class="form-group">
+            <label class="label">Frequency</label>
+            <select class="input" id="sched-frequency" onchange="onSchedFreqChange()">
+              <option value="daily">Every Day</option>
+              <option value="weekly">Every Week (Monday)</option>
+              <option value="monthly">Every Month (1st)</option>
+              <option value="custom">Custom Cron</option>
             </select>
-            <button class="btn btn-primary" onclick="runEval()" style="margin-left:8px">Run Suite</button>
           </div>
-          <div id="eval-results"></div>
+          <div class="form-group" id="sched-time-group">
+            <label class="label">Time</label>
+            <input class="input" type="time" id="sched-time" value="09:00">
+          </div>
+          <div class="form-group" id="sched-cron-group" style="display:none;">
+            <label class="label">Cron Expression</label>
+            <input class="input" id="sched-cron" placeholder="*/5 * * * *">
+            <div class="help-text">Format: minute hour dayOfMonth month dayOfWeek</div>
+          </div>
+          <div class="form-group">
+            <label class="label">Description</label>
+            <textarea class="input" id="sched-desc" rows="2" placeholder="e.g. Send a news summary every morning at 8am"></textarea>
+          </div>
+          <div class="form-group">
+            <label class="label">Output Channel</label>
+            <select class="input" id="sched-channel">
+              <option value="web">Web</option>
+              <option value="telegram">Telegram</option>
+              <option value="email">Email</option>
+            </select>
+          </div>
+          <div style="display:flex;gap:8px;">
+            <button class="btn btn-primary" onclick="saveSchedule()">💾 Save</button>
+            <button class="btn btn-secondary" onclick="hideScheduleForm()">Cancel</button>
+          </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>
+        <!-- Task List -->
+        <div id="schedules-list"></div>
+        <div id="schedules-empty" class="empty-state" style="display:none;">
+          <div class="empty-icon">⏰</div>
+          <div class="empty-title">No scheduled tasks</div>
+          <div class="empty-desc">Create your first automated task to get started.</div>
+          <button class="btn btn-primary" onclick="showScheduleForm()">+ Create Task</button>
         </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>
+  </div>
+
+  <!-- Channel Config Dialog -->
+  <div class="dialog-overlay" id="channel-dialog">
+    <div class="dialog" style="max-width:480px;width:92%;">
+      <div class="dialog-title" id="channel-dialog-title">配置渠道</div>
+      <div id="channel-dialog-body" style="margin-bottom:4px;"></div>
+      <div class="dialog-actions">
+        <button class="btn btn-secondary btn-sm" onclick="closeChannelDialog()">取消</button>
+        <button class="btn btn-primary btn-sm" onclick="saveCurrentChannel()">💾 保存</button>
+      </div>
+      <!-- Settings Page -->
+      <div class="page" id="page-settings">
+        <div class="settings-layout">
+          <div class="settings-nav">
+            <div class="settings-nav-item active" data-settings="models" onclick="showSettings('models')">🤖 模型配置</div>
+            <div class="settings-nav-item" data-settings="channels" onclick="showSettings('channels')">📡 渠道配置</div>
+            <div class="settings-nav-item" data-settings="memory" onclick="showSettings('memory')">🧠 记忆管理</div>
+            <div class="settings-nav-item" data-settings="role" onclick="showSettings('role')">👤 角色编辑</div>
+            <div class="settings-nav-item" data-settings="status" onclick="showSettings('status')">📊 运行状态</div>
+            <div class="settings-nav-item" data-settings="usage" onclick="showSettings('usage')">💰 用量统计</div>
+            <div class="settings-nav-item" data-settings="search" onclick="showSettings('search')">🔍 搜索配置</div>
+          </div>
+          <div class="settings-content">
+
+            <!-- Models Panel -->
+            <div class="settings-panel active" id="sp-models">
+              <h2 style="font-size:20px;font-weight:700;margin-bottom:4px;">🤖 模型配置</h2>
+              <p style="color:var(--text-muted);font-size:14px;margin-bottom:20px;">选择 AI 模型，默认使用本地模型，完全免费</p>
+
+              <div class="tabs">
+                <div class="tab active" onclick="switchModelTab('local')">🏠 本地模型</div>
+                <div class="tab" onclick="switchModelTab('cloud')">☁️ 云端 API</div>
+              </div>
+
+              <!-- Local Models Tab -->
+              <div class="tab-panel active" id="mt-local">
+                <div id="ollama-status" style="margin-bottom:20px;"></div>
+                <div id="ollama-models" style="margin-bottom:20px;"></div>
+                <div id="ollama-tutorial" style="display:none;">
+                  <div class="card" style="margin-bottom:20px;">
+                    <h3 style="font-size:16px;margin-bottom:16px;">📖 3 步安装本地模型</h3>
+                    <div class="tutorial-steps">
+                      <div class="tutorial-step"><div class="tutorial-step-content"><h4>下载 Ollama</h4><p>访问 <a href="https://ollama.com" target="_blank">ollama.com</a> 下载安装包，支持 Windows / Mac / Linux</p></div></div>
+                      <div class="tutorial-step"><div class="tutorial-step-content"><h4>安装并启动</h4><p>安装完成后，Ollama 会自动在后台运行</p></div></div>
+                      <div class="tutorial-step"><div class="tutorial-step-content"><h4>拉取推荐模型</h4><p>打开终端，运行：<br><code>ollama pull qwen2.5:7b</code><br><code>ollama pull nomic-embed-text</code></p></div></div>
+                    </div>
+                    <button class="btn btn-primary btn-sm" onclick="detectOllama()" style="margin-top:8px;">🔄 重新检测</button>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Cloud API Tab -->
+              <div class="tab-panel" id="mt-cloud">
+                <p style="color:var(--text-muted);font-size:13px;margin-bottom:16px;">填入 API Key 即可使用云端模型，按用量付费</p>
+                <div class="card-grid" id="cloud-providers">
+                  <div class="card provider-card" onclick="configureProvider('openai')">
+                    <div class="pv-header"><span style="font-size:20px;">🟢</span><span class="pv-name">OpenAI</span></div>
+                    <p style="font-size:13px;color:var(--text-muted);">GPT-4o / GPT-4o-mini</p>
+                    <div class="pv-status" id="pv-openai">未配置</div>
+                  </div>
+                  <div class="card provider-card" onclick="configureProvider('deepseek')">
+                    <div class="pv-header"><span style="font-size:20px;">🔵</span><span class="pv-name">DeepSeek</span></div>
+                    <p style="font-size:13px;color:var(--text-muted);">DeepSeek V3 / R1</p>
+                    <div class="pv-status" id="pv-deepseek">未配置</div>
+                  </div>
+                  <div class="card provider-card" onclick="configureProvider('qwen')">
+                    <div class="pv-header"><span style="font-size:20px;">🟣</span><span class="pv-name">通义千问</span></div>
+                    <p style="font-size:13px;color:var(--text-muted);">Qwen-Max / Qwen-Plus</p>
+                    <div class="pv-status" id="pv-qwen">未配置</div>
+                  </div>
+                  <div class="card provider-card" onclick="configureProvider('anthropic')">
+                    <div class="pv-header"><span style="font-size:20px;">🟠</span><span class="pv-name">Anthropic</span></div>
+                    <p style="font-size:13px;color:var(--text-muted);">Claude Sonnet / Haiku</p>
+                    <div class="pv-status" id="pv-anthropic">未配置</div>
+                  </div>
+                  <div class="card provider-card" onclick="configureProvider('openrouter')">
+                    <div class="pv-header"><span style="font-size:20px;">🌐</span><span class="pv-name">OpenRouter</span></div>
+                    <p style="font-size:13px;color:var(--text-muted);">100+ 模型聚合</p>
+                    <div class="pv-status" id="pv-openrouter">未配置</div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Model Assignment -->
+              <div class="card" style="margin-top:24px;">
+                <h3 style="font-size:16px;margin-bottom:16px;">🎯 模型用途分配</h3>
+                <div class="form-group">
+                  <label class="label">聊天模型（必选）</label>
+                  <select class="input" id="cfg-chat-model" onchange="saveModelAssignment()">
+                    <option value="qwen2.5:7b">qwen2.5:7b (本地推荐) ⭐</option>
+                  </select>
+                  <p style="font-size:12px;color:var(--text-dim);margin-top:4px;">用于对话、回答问题、执行任务</p>
+                </div>
+                <div class="form-group" style="margin-bottom:0;">
+                  <label class="label">Embedding 模型（记忆用）</label>
+                  <select class="input" id="cfg-embed-model" onchange="saveModelAssignment()">
+                    <option value="nomic-embed-text">nomic-embed-text (本地推荐) ⭐</option>
+                  </select>
+                  <p style="font-size:12px;color:var(--text-dim);margin-top:4px;">用于记忆存储和语义搜索，一般不需要更改</p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Channels Panel -->
+            <div class="settings-panel" id="sp-channels">
+              <h2 style="font-size:20px;font-weight:700;margin-bottom:4px;">📡 渠道配置</h2>
+              <p style="color:var(--text-muted);font-size:14px;margin-bottom:20px;">连接你的聊天平台，让 Agent 在各个渠道工作</p>
+              <div class="card-grid" id="channels-grid"></div>
+            </div>
+
+            <!-- Memory Panel (DeepBrain) -->
+            <div class="settings-panel" id="sp-memory">
+              <h2 style="font-size:20px;font-weight:700;margin-bottom:4px;">🧠 记忆管理</h2>
+              <p style="color:var(--text-muted);font-size:14px;margin-bottom:20px;">管理 Agent 的知识库和记忆，由 DeepBrain 提供</p>
+              <div id="memory-module-frame"></div>
+            </div>
+
+            <!-- Role Panel (Workstation) -->
+            <div class="settings-panel" id="sp-role">
+              <h2 style="font-size:20px;font-weight:700;margin-bottom:4px;">👤 角色编辑</h2>
+              <p style="color:var(--text-muted);font-size:14px;margin-bottom:20px;">编辑 Agent 的角色设定和技能，由 Workstation 提供</p>
+              <div id="role-module-frame"></div>
+            </div>
+
+            <!-- Status Panel -->
+            <div class="settings-panel" id="sp-status">
+              <h2 style="font-size:20px;font-weight:700;margin-bottom:4px;">📊 运行状态</h2>
+              <p style="color:var(--text-muted);font-size:14px;margin-bottom:20px;">查看 Agent 和各模块的运行情况</p>
+              <div id="status-overview" style="margin-bottom:24px;"></div>
+              <div class="card" style="margin-bottom:16px;">
+                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
+                  <h3 style="font-size:16px;">📋 最近日志</h3>
+                  <button class="btn btn-secondary btn-sm" onclick="refreshStatus()">🔄 刷新</button>
+                </div>
+                <div class="log-viewer" id="status-logs">暂无日志</div>
+              </div>
+            </div>
+
+            <!-- Usage Panel -->
+            <div class="settings-panel" id="sp-usage">
+              <h2 style="font-size:20px;font-weight:700;margin-bottom:4px;">💰 用量统计</h2>
+              <p style="color:var(--text-muted);font-size:14px;margin-bottom:20px;">查看 Token 消耗和费用估算</p>
+              <div id="usage-stats"></div>
+            </div>
+
+            <!-- Web Search Panel -->
+            <div class="settings-panel" id="sp-search">
+              <h2 style="font-size:20px;font-weight:700;margin-bottom:4px;">🔍 搜索配置</h2>
+              <p style="color:var(--text-muted);font-size:14px;margin-bottom:20px;">Agent 可以自动搜索互联网回答问题，默认使用 DuckDuckGo（免费，无需配置）</p>
+
+              <div class="form-group">
+                <label class="label">搜索开关</label>
+                <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
+                  <input type="checkbox" id="search-enabled" checked onchange="updateSearchConfig()">
+                  <span style="font-size:14px;">启用 Web 搜索</span>
+                </label>
+              </div>
+
+              <div class="form-group">
+                <label class="label">默认搜索引擎</label>
+                <select class="input" id="search-engine" onchange="updateSearchConfig()" style="padding:8px 12px;">
+                  <option value="duckduckgo">🦆 DuckDuckGo（免费，默认）</option>
+                  <option value="brave">🦁 Brave Search（需 API Key）</option>
+                  <option value="searxng">🔧 SearXNG（自托管）</option>
+                  <option value="google">🔍 Google Custom Search（需 API Key）</option>
+                </select>
+              </div>
+
+              <div class="form-group" id="search-apikey-group" style="display:none;">
+                <label class="label" id="search-apikey-label">API Key</label>
+                <input class="input" id="search-apikey" type="password" placeholder="输入 API Key" onchange="updateSearchConfig()">
+              </div>
+
+              <div class="form-group" id="search-baseurl-group" style="display:none;">
+                <label class="label">SearXNG URL</label>
+                <input class="input" id="search-baseurl" placeholder="https://searx.example.com" onchange="updateSearchConfig()">
+              </div>
+
+              <div style="margin-top:16px;">
+                <button class="btn btn-secondary btn-sm" onclick="testSearch()">🧪 测试搜索</button>
+              </div>
+              <div id="search-test-result" style="margin-top:12px;font-size:13px;"></div>
+
+              <div style="margin-top:24px;padding:16px;background:var(--bg-light);border-radius:8px;font-size:13px;color:var(--text-muted);">
+                <strong>💡 提示</strong><br>
+                Agent 会自动判断何时需要搜索，也可以通过 <code>web_search</code> 和 <code>web_read</code> 工具主动调用。<br>
+                DuckDuckGo 完全免费、无需注册，适合大多数场景。
+              </div>
+            </div>
+
+          </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>
+      <!-- Provider Config Dialog -->
+      <div class="dialog-overlay" id="provider-dialog">
+        <div class="dialog" style="max-width:480px;">
+          <div class="dialog-title" id="pd-title">配置 Provider</div>
+          <div class="dialog-desc" id="pd-desc">填入 API Key 即可开始使用</div>
+          <div class="form-group">
+            <label class="label">API Key</label>
+            <input class="input" id="pd-apikey" type="password" placeholder="sk-...">
+          </div>
+          <div class="form-group" id="pd-baseurl-group" style="display:none;">
+            <label class="label">自定义 Base URL（可选）</label>
+            <input class="input" id="pd-baseurl" placeholder="https://api.example.com">
+          </div>
+          <div id="pd-test-result" style="margin-bottom:16px;font-size:13px;"></div>
+          <div class="dialog-actions">
+            <button class="btn btn-secondary btn-sm" onclick="closeProviderDialog()">取消</button>
+            <button class="btn btn-secondary btn-sm" onclick="testProvider()">🔍 测试连接</button>
+            <button class="btn btn-primary btn-sm" onclick="saveProvider()">💾 保存</button>
+          </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>
+      <!-- Channel Config Dialog -->
+      <div class="dialog-overlay" id="channel-dialog">
+        <div class="dialog" style="max-width:480px;">
+          <div class="dialog-title" id="cd-title">配置渠道</div>
+          <div class="dialog-desc" id="cd-desc"></div>
+          <div id="cd-fields"></div>
+          <div class="dialog-actions">
+            <button class="btn btn-secondary btn-sm" onclick="closeChannelDialog()">取消</button>
+            <button class="btn btn-primary btn-sm" onclick="saveChannel()">💾 保存</button>
+          </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>
+  </div>
+
+  <!-- Delete Confirm Dialog -->
+  <div class="dialog-overlay" id="delete-dialog">
+    <div class="dialog">
+      <div class="dialog-title">Delete Agent?</div>
+      <div class="dialog-desc">This action cannot be undone. The agent and all its data will be permanently removed.</div>
+      <div class="dialog-actions">
+        <button class="btn btn-secondary btn-sm" onclick="closeDeleteDialog()">Cancel</button>
+        <button class="btn btn-danger btn-sm" onclick="confirmDelete()">Delete</button>
       </div>
+    </div>
+  </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>
+  <!-- First Run Wizard Modal -->
+  <div id="first-run-overlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:600;align-items:center;justify-content:center;">
+    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;max-width:580px;width:94%;max-height:90vh;overflow-y:auto;">
+      <!-- Step indicators -->
+      <div style="display:flex;justify-content:center;gap:6px;margin-bottom:32px;" id="fr-steps">
+        <div class="wizard-step active" id="fr-step-1"><div class="step-num">1</div><span>Welcome</span></div>
+        <div class="wizard-step" id="fr-step-2"><div class="step-line"></div><div class="step-num">2</div><span>Models</span></div>
+        <div class="wizard-step" id="fr-step-3"><div class="step-line"></div><div class="step-num">3</div><span>Template</span></div>
+        <div class="wizard-step" id="fr-step-4"><div class="step-line"></div><div class="step-num">4</div><span>Done</span></div>
       </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>
+      <!-- Step 1: Welcome -->
+      <div class="wizard-panel active" id="fr-panel-1">
+        <div style="text-align:center;margin-bottom:32px;">
+          <div style="font-size:64px;margin-bottom:16px;">⚡</div>
+          <h2 style="font-size:24px;font-weight:700;margin-bottom:8px;">Welcome to OPC Studio</h2>
+          <p style="color:var(--text-muted);font-size:15px;line-height:1.6;">Create AI agents in minutes — no coding required.<br>Let's get you set up in 3 quick steps.</p>
+        </div>
+        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:32px;">
+          <div class="card" style="text-align:center;padding:16px 8px;"><div style="font-size:28px;margin-bottom:8px;">🤖</div><div style="font-size:13px;font-weight:500;">100+ Templates</div></div>
+          <div class="card" style="text-align:center;padding:16px 8px;"><div style="font-size:28px;margin-bottom:8px;">🧠</div><div style="font-size:13px;font-weight:500;">Local AI Models</div></div>
+          <div class="card" style="text-align:center;padding:16px 8px;"><div style="font-size:28px;margin-bottom:8px;">💬</div><div style="font-size:13px;font-weight:500;">Multi-channel</div></div>
+        </div>
+        <button class="btn btn-primary btn-lg" style="width:100%;" onclick="frNext()">Get Started →</button>
       </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>
+      <!-- Step 2: Model Detection -->
+      <div class="wizard-panel" id="fr-panel-2">
+        <h2 style="font-size:20px;font-weight:700;margin-bottom:4px;">🤖 Choose Your AI Model</h2>
+        <p style="color:var(--text-muted);font-size:14px;margin-bottom:20px;">We recommend using free local models. Cloud APIs also supported.</p>
+        <div id="fr-ollama-status" style="padding:16px;border-radius:var(--radius);margin-bottom:16px;background:var(--bg-hover);">
+          <div style="display:flex;align-items:center;gap:8px;"><span class="status-dot yellow"></span> Detecting Ollama...</div>
         </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>
+        <div id="fr-model-choice" style="display:none;">
+          <div class="form-group">
+            <label class="label">Select a model to use</label>
+            <select class="input" id="fr-model-select">
+              <option value="qwen2.5:7b">qwen2.5:7b — Local, free ⭐ Recommended</option>
+              <option value="gpt-4o-mini">GPT-4o Mini — Cloud, fast</option>
+              <option value="gpt-4o">GPT-4o — Cloud, most capable</option>
+              <option value="claude-sonnet-4">Claude Sonnet — Cloud, balanced</option>
+              <option value="deepseek-v3">DeepSeek V3 — Cloud, affordable</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 style="display:flex;gap:12px;justify-content:flex-end;margin-top:24px;">
+          <button class="btn btn-secondary" onclick="frBack()">← Back</button>
+          <button class="btn btn-primary" onclick="frNext()">Next →</button>
         </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>
+
+      <!-- Step 3: Choose Template -->
+      <div class="wizard-panel" id="fr-panel-3">
+        <h2 style="font-size:20px;font-weight:700;margin-bottom:4px;">👤 Pick a Starting Template</h2>
+        <p style="color:var(--text-muted);font-size:14px;margin-bottom:20px;">Choose what your first agent will do. You can always change this later.</p>
+        <div style="display:flex;flex-direction:column;gap:8px;" id="fr-template-list">
+          <div class="card" style="cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;" onclick="frSelectTemplate('customer-service')" id="fr-tpl-customer-service">
+            <span style="font-size:24px;">🎧</span><div><div style="font-weight:500;">Customer Service</div><div style="font-size:12px;color:var(--text-muted);">Answer questions, resolve issues</div></div>
+          </div>
+          <div class="card" style="cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;" onclick="frSelectTemplate('executive-assistant')" id="fr-tpl-executive-assistant">
+            <span style="font-size:24px;">💼</span><div><div style="font-weight:500;">Personal Assistant</div><div style="font-size:12px;color:var(--text-muted);">Scheduling, email drafting, planning</div></div>
+          </div>
+          <div class="card" style="cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;" onclick="frSelectTemplate('content-writer')" id="fr-tpl-content-writer">
+            <span style="font-size:24px;">✍️</span><div><div style="font-weight:500;">Content Writer</div><div style="font-size:12px;color:var(--text-muted);">Blog posts, social media, SEO</div></div>
+          </div>
+          <div class="card" style="cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;" onclick="frSelectTemplate('data-analyst')" id="fr-tpl-data-analyst">
+            <span style="font-size:24px;">📊</span><div><div style="font-weight:500;">Data Analyst</div><div style="font-size:12px;color:var(--text-muted);">Data querying, insights, reports</div></div>
+          </div>
+          <div class="card" style="cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;" onclick="frSelectTemplate('teacher')" id="fr-tpl-teacher">
+            <span style="font-size:24px;">📚</span><div><div style="font-weight:500;">Translator / Teacher</div><div style="font-size:12px;color:var(--text-muted);">Language learning, translation, explanation</div></div>
+          </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 style="display:flex;gap:12px;justify-content:flex-end;margin-top:20px;">
+          <button class="btn btn-secondary" onclick="frBack()">← Back</button>
+          <button class="btn btn-primary" onclick="frNext()" id="fr-next-3">Next →</button>
         </div>
       </div>
 
-    </main>
+      <!-- Step 4: Creating / Done -->
+      <div class="wizard-panel" id="fr-panel-4">
+        <div style="text-align:center;padding:20px 0;">
+          <div id="fr-creating" style="">
+            <div style="font-size:48px;margin-bottom:16px;">⏳</div>
+            <h2 style="font-size:20px;font-weight:700;margin-bottom:8px;">Creating your agent...</h2>
+            <p style="color:var(--text-muted);">Just a moment</p>
+          </div>
+          <div id="fr-done" style="display:none;">
+            <div style="font-size:64px;margin-bottom:16px;">🎉</div>
+            <h2 style="font-size:22px;font-weight:700;margin-bottom:8px;">You're all set!</h2>
+            <p style="color:var(--text-muted);margin-bottom:24px;">Your agent is ready. Start chatting now!</p>
+            <button class="btn btn-primary btn-lg" onclick="frFinish()">Start Chatting →</button>
+          </div>
+        </div>
+      </div>
+    </div>
   </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
+    // === State ===
+    let templates = [];
+    let industries = [];
+    let agents = [];
+    let selectedTemplate = null;
+    let currentAgent = null;
+    let chatMessages = [];
+    let wizardStep = 1;
+    let selectedIndustry = '';
+    let deleteTargetId = null;
+
+    const API = '';
+
+    // === Init ===
+    async function init() {
+      await Promise.all([loadTemplates(), loadAgents()]);
+      handleRoute();
+      window.addEventListener('popstate', handleRoute);
+      checkFirstRun();
+    }
+
+    function handleRoute() {
+      const path = location.hash.slice(1) || '/dashboard';
+      const parts = path.split('/').filter(Boolean);
+      if (parts[0] === 'chat' && parts[1]) {
+        openChat(parts[1]);
+      } else if (parts[0] === 'settings') {
+        if (parts[1]) currentSettingsTab = parts[1];
+        navigate('settings');
+      } else if (parts[0] === 'memory' && parts[1]) {
+        openMemoryPage(parts[1]);
+      } else if (parts[0] === 'create') {
+        if (parts[1]) {
+          // pre-select template
+          selectedTemplate = templates.find(t => t.id === parts[1]) || null;
+          if (selectedTemplate) {
+            wizardStep = 2;
+          }
+        }
+        showPage('create');
+        renderWizard();
+      } else {
+        navigate(parts[0] || 'dashboard');
       }
     }
 
-    async function api(path) {
-      const r = await fetch(API + '/api/' + path);
-      return r.json();
+    // === API ===
+    async function loadTemplates() {
+      try {
+        const res = await fetch(`${API}/api/templates`);
+        const data = await res.json();
+        templates = data.templates || [];
+        industries = data.industries || [];
+        renderIndustryChips();
+        renderTemplates();
+      } catch(e) { console.error('Failed to load templates:', e); }
+    }
+
+    async function loadAgents() {
+      try {
+        const res = await fetch(`${API}/api/agents`);
+        const data = await res.json();
+        agents = data.agents || [];
+        renderAgents();
+      } catch(e) { console.error('Failed to load agents:', e); }
+    }
+
+    // === Navigation ===
+    function navigate(page) {
+      document.querySelectorAll('.page, .chat-container').forEach(p => { p.classList.remove('active'); p.style.display = ''; });
+      document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+      const navItem = document.querySelector(`.nav-item[data-page="${page}"]`);
+      if (navItem) navItem.classList.add('active');
+
+      if (page === 'dashboard') { loadAgents(); loadHealthDashboard(); }
+      if (page === 'create') { renderWizard(); renderWizardTemplates(); }
+      if (page === 'settings') { showSettings(currentSettingsTab || 'models'); }
+      if (page === 'schedules') { loadSchedules(); }
+      if (page === 'skills') { loadSkillsMarketplace(); }
+
+      showPage(page);
+      location.hash = `/${page}`;
+      toggleSidebar(false);
+    }
+
+    function showPage(page) {
+      document.querySelectorAll('.page, .chat-container').forEach(p => { p.classList.remove('active'); });
+      const el = document.getElementById(`page-${page}`);
+      if (el) el.classList.add('active');
     }
 
-    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();
+    function toggleSidebar(open) {
+      document.querySelector('.sidebar').classList.toggle('open', open);
+      document.querySelector('.sidebar-overlay').classList.toggle('show', open);
     }
 
-    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();
+    // === Templates Rendering ===
+    function renderIndustryChips() {
+      const html = `<span class="chip active" onclick="filterByIndustry('')">All</span>` +
+        industries.map(i => `<span class="chip" onclick="filterByIndustry('${i.id}')">${i.nameZh} ${i.name}</span>`).join('');
+      document.getElementById('industry-chips').innerHTML = html;
+      document.getElementById('wizard-industry-chips').innerHTML = html.replace(/filterByIndustry/g, 'filterWizardByIndustry');
     }
 
-    // Dashboard
-    async function loadDashboard() {
+    function filterByIndustry(id) {
+      selectedIndustry = id;
+      document.querySelectorAll('#industry-chips .chip').forEach(c => c.classList.remove('active'));
+      event.target.classList.add('active');
+      renderTemplates();
+    }
+
+    function filterWizardByIndustry(id) {
+      selectedIndustry = id;
+      document.querySelectorAll('#wizard-industry-chips .chip').forEach(c => c.classList.remove('active'));
+      event.target.classList.add('active');
+      renderWizardTemplates();
+    }
+
+    function filterTemplates() {
+      renderTemplates();
+    }
+
+    // === Skills Marketplace ===
+    let allSkills = [];
+    let selectedSkillCategory = '';
+    const SKILL_CATEGORIES = [
+      { id: '', label: 'All', labelZh: '全部' },
+      { id: 'productivity', label: 'Productivity', labelZh: '效率' },
+      { id: 'knowledge', label: 'Knowledge', labelZh: '知识' },
+      { id: 'creative', label: 'Creative', labelZh: '创作' },
+      { id: 'developer', label: 'Developer', labelZh: '开发' },
+      { id: 'lifestyle', label: 'Lifestyle', labelZh: '生活' },
+      { id: 'business', label: 'Business', labelZh: '业务' },
+    ];
+
+    async function loadSkillsMarketplace() {
       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';
+        const res = await fetch('/api/skills/marketplace');
+        allSkills = await res.json();
+      } catch(e) { console.error('Failed to load skills:', e); allSkills = []; }
+      renderSkillCategoryChips();
+      renderSkills();
+    }
+
+    function renderSkillCategoryChips() {
+      const el = document.getElementById('skill-category-chips');
+      if (!el) return;
+      el.innerHTML = SKILL_CATEGORIES.map(c =>
+        `<span class="chip ${selectedSkillCategory === c.id ? 'active' : ''}" onclick="selectSkillCategory('${c.id}')">${c.labelZh}</span>`
+      ).join('');
+    }
+
+    function selectSkillCategory(cat) {
+      selectedSkillCategory = cat;
+      renderSkillCategoryChips();
+      renderSkills();
+    }
+
+    function filterSkills() {
+      renderSkills();
+    }
+
+    function renderSkills() {
+      const q = (document.getElementById('skills-search')?.value || '').toLowerCase();
+      let filtered = allSkills;
+      if (selectedSkillCategory) {
+        filtered = filtered.filter(s => s.category === selectedSkillCategory);
+      }
+      if (q) {
+        filtered = filtered.filter(s =>
+          s.name.toLowerCase().includes(q) || s.nameZh.includes(q) ||
+          s.description.toLowerCase().includes(q) || s.descriptionZh.includes(q)
+        );
       }
+      const grid = document.getElementById('skills-grid');
+      if (!grid) return;
+      grid.innerHTML = filtered.map(s => `
+        <div class="card" style="cursor:default;position:relative;">
+          <div style="font-size:36px;margin-bottom:8px;">${s.icon}</div>
+          <div style="font-weight:600;font-size:15px;">${s.nameZh}</div>
+          <div style="font-size:12px;color:var(--text-dim);margin-bottom:4px;">${s.name}</div>
+          <div style="font-size:13px;color:var(--text-muted);margin-bottom:12px;line-height:1.4;">${s.descriptionZh}</div>
+          <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px;">
+            ${s.tools.slice(0,3).map(t => `<span style="font-size:11px;padding:2px 6px;background:var(--bg-hover);border-radius:4px;color:var(--text-dim);">${t}</span>`).join('')}
+            ${s.tools.length > 3 ? `<span style="font-size:11px;color:var(--text-dim);">+${s.tools.length-3}</span>` : ''}
+          </div>
+          ${s.installed
+            ? `<button class="btn" style="width:100%;background:var(--bg-hover);color:var(--text-muted);cursor:pointer;" onclick="uninstallSkill('${s.id}',this)">✓ Installed</button>`
+            : `<button class="btn btn-primary" style="width:100%;" onclick="installSkill('${s.id}',this)">Install</button>`
+          }
+        </div>
+      `).join('');
     }
 
-    // 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;
-      
+    async function installSkill(id, btn) {
+      btn.disabled = true; btn.textContent = 'Installing...';
       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>
+        const res = await fetch(\`/api/skills/marketplace/\${id}/install\`, { method: 'POST' });
+        const data = await res.json();
+        if (data.success) {
+          const skill = allSkills.find(s => s.id === id);
+          if (skill) skill.installed = true;
+          renderSkills();
+        }
+      } catch(e) { console.error(e); btn.disabled = false; btn.textContent = 'Install'; }
+    }
+
+    async function uninstallSkill(id, btn) {
+      btn.disabled = true; btn.textContent = 'Removing...';
+      try {
+        const res = await fetch(\`/api/skills/marketplace/\${id}/uninstall\`, { method: 'DELETE' });
+        const data = await res.json();
+        if (data.success) {
+          const skill = allSkills.find(s => s.id === id);
+          if (skill) skill.installed = false;
+          renderSkills();
+        }
+      } catch(e) { console.error(e); btn.disabled = false; btn.textContent = '✓ Installed'; }
+    }
+
+    function filterWizardTemplates() {
+      renderWizardTemplates();
+    }
+
+    function getFilteredTemplates(searchId) {
+      const q = (document.getElementById(searchId)?.value || '').toLowerCase();
+      return templates.filter(t => {
+        if (selectedIndustry && t.industry !== selectedIndustry) return false;
+        if (q && !t.name.toLowerCase().includes(q) && !t.nameZh.includes(q) && !t.description.toLowerCase().includes(q)) return false;
+        return true;
+      });
+    }
+
+    function renderTemplates() {
+      const filtered = getFilteredTemplates('tpl-search');
+      document.getElementById('templates-grid').innerHTML = filtered.map(t => `
+        <div class="card tpl-card" onclick="selectTemplateAndCreate('${t.id}')">
+          <div class="tpl-icon">${t.icon}</div>
+          <div class="tpl-name">${t.name}</div>
+          <div style="font-size:13px;color:var(--text-dim);margin-bottom:6px;">${t.nameZh}</div>
+          <div class="tpl-desc">${t.description}</div>
+          <div class="tpl-tags">
+            <span class="tpl-tag">${t.industryZh}</span>
+            ${t.tags.map(tag => `<span class="tpl-tag">${tag}</span>`).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>
+
+    function renderWizardTemplates() {
+      const filtered = getFilteredTemplates('wizard-tpl-search');
+      document.getElementById('wizard-tpl-grid').innerHTML = filtered.map(t => `
+        <div class="card tpl-card ${selectedTemplate?.id === t.id ? 'selected' : ''}" onclick="selectWizardTemplate('${t.id}')"
+             style="${selectedTemplate?.id === t.id ? 'border-color:var(--accent);background:var(--accent-light);' : ''}">
+          <div class="tpl-icon">${t.icon}</div>
+          <div class="tpl-name">${t.name}</div>
+          <div style="font-size:12px;color:var(--text-dim);">${t.nameZh} · ${t.industryZh}</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)`);
+    function selectTemplateAndCreate(id) {
+      selectedTemplate = templates.find(t => t.id === id);
+      wizardStep = 2;
+      navigate('create');
     }
-    async function loadTools() {
-      const data = await api('tools/list');
-      renderList('tools-list', data.tools || [], t => `<strong>🔧 ${t.name}</strong> — ${t.description || '—'}`);
+
+    function selectWizardTemplate(id) {
+      selectedTemplate = templates.find(t => t.id === id);
+      renderWizardTemplates();
+      // Auto-advance after selection
+      setTimeout(() => wizardNext(), 300);
+    }
+
+    // === Wizard ===
+    function renderWizard() {
+      for (let i = 1; i <= 3; i++) {
+        const ws = document.getElementById(`ws-${i}`);
+        const wp = document.getElementById(`wp-${i}`);
+        ws.className = 'wizard-step' + (i < wizardStep ? ' done' : i === wizardStep ? ' active' : '');
+        wp.className = 'wizard-panel' + (i === wizardStep ? ' active' : '');
+      }
+      if (wizardStep === 2 && selectedTemplate) {
+        document.getElementById('agent-name').placeholder = selectedTemplate.name;
+        document.getElementById('agent-model').value = selectedTemplate.suggestedModel;
+      }
+      if (wizardStep === 3) {
+        renderConfirmCard();
+      }
+    }
+
+    function wizardNext() {
+      if (wizardStep === 1 && !selectedTemplate) { alert('Please select a template first'); return; }
+      if (wizardStep < 3) { wizardStep++; renderWizard(); }
+    }
+
+    function wizardBack() {
+      if (wizardStep > 1) { wizardStep--; renderWizard(); }
     }
-    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 || ''}`);
+
+    function renderConfirmCard() {
+      const name = document.getElementById('agent-name').value || selectedTemplate?.name || 'My Agent';
+      const model = document.getElementById('agent-model').value;
+      const lang = document.getElementById('agent-lang').selectedOptions[0]?.text || 'English';
+      document.getElementById('confirm-card').innerHTML = `
+        <div style="display:flex;align-items:center;gap:16px;margin-bottom:16px;">
+          <span style="font-size:48px;">${selectedTemplate?.icon || '🤖'}</span>
+          <div>
+            <div style="font-size:20px;font-weight:700;">${name}</div>
+            <div style="color:var(--text-muted);font-size:14px;">Based on: ${selectedTemplate?.name || 'Custom'} (${selectedTemplate?.nameZh || ''})</div>
+          </div>
+        </div>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:14px;">
+          <div><span style="color:var(--text-dim);">Model:</span> ${model}</div>
+          <div><span style="color:var(--text-dim);">Language:</span> ${lang}</div>
+          <div style="grid-column:span 2;"><span style="color:var(--text-dim);">Industry:</span> ${selectedTemplate?.industryZh || ''} (${selectedTemplate?.industry || ''})</div>
+        </div>
+      `;
     }
-    async function loadWorkflows() {
-      // Load saved workflows into dropdown
+
+    async function createAgent() {
+      const btn = document.getElementById('create-btn');
+      btn.textContent = '⏳ Creating...';
+      btn.disabled = true;
       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>';
+        const res = await fetch(`${API}/api/agents`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            name: document.getElementById('agent-name').value || selectedTemplate?.name,
+            templateId: selectedTemplate?.id,
+            description: document.getElementById('agent-desc').value,
+            model: document.getElementById('agent-model').value,
+            language: document.getElementById('agent-lang').value,
+          }),
+        });
+        const agent = await res.json();
+        // Reset wizard
+        wizardStep = 1;
+        selectedTemplate = null;
+        document.getElementById('agent-name').value = '';
+        document.getElementById('agent-desc').value = '';
+        // Navigate to chat
+        openChat(agent.id);
+      } catch(e) {
+        alert('Failed to create agent: ' + e.message);
       }
+      btn.textContent = '🚀 Create Agent';
+      btn.disabled = false;
     }
 
-    // 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';
+    // === Dashboard ===
+    function renderAgents() {
+      if (agents.length === 0) {
+        document.getElementById('agents-list').style.display = 'none';
+        document.getElementById('agents-empty').style.display = 'block';
+        return;
       }
-      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>';
+      document.getElementById('agents-list').style.display = '';
+      document.getElementById('agents-empty').style.display = 'none';
+      document.getElementById('agents-list').innerHTML = agents.map(a => {
+        const timeAgo = getTimeAgo(a.lastActive || a.created);
+        return `
+          <div class="card agent-card" onclick="openChat('${a.id}')">
+            <div class="agent-actions">
+              <button onclick="event.stopPropagation();openDeleteDialog('${a.id}')">🗑️</button>
+            </div>
+            <div class="agent-icon">${a.templateIcon || '🤖'}</div>
+            <div class="agent-name">${a.name}</div>
+            <div class="agent-template">${a.templateName || 'Custom'}</div>
+            <div class="agent-stats">
+              <span>💬 ${a.messageCount || 0} messages</span>
+              <span>⏰ ${timeAgo}</span>
+            </div>
+          </div>
+        `;
+      }).join('');
+    }
+
+    function getTimeAgo(dateStr) {
+      const diff = Date.now() - new Date(dateStr).getTime();
+      const mins = Math.floor(diff / 60000);
+      if (mins < 1) return 'just now';
+      if (mins < 60) return `${mins}m ago`;
+      const hours = Math.floor(mins / 60);
+      if (hours < 24) return `${hours}h ago`;
+      const days = Math.floor(hours / 24);
+      return `${days}d ago`;
+    }
+
+    // === Delete ===
+    function openDeleteDialog(id) { deleteTargetId = id; document.getElementById('delete-dialog').classList.add('show'); }
+    function closeDeleteDialog() { deleteTargetId = null; document.getElementById('delete-dialog').classList.remove('show'); }
+    async function confirmDelete() {
+      if (!deleteTargetId) return;
+      await fetch(`${API}/api/agents/${deleteTargetId}`, { method: 'DELETE' });
+      closeDeleteDialog();
+      loadAgents();
+    }
+
+    // === Chat ===
+    async function openLastChat() {
+      if (currentAgent) { openChat(currentAgent.id); return; }
+      const agentsRes = await fetch(`${API}/api/agents`).catch(() => null);
+      if (agentsRes) {
+        const data = await agentsRes.json().catch(() => ({}));
+        const list = data.agents || [];
+        if (list.length > 0) { openChat(list[0].id); return; }
       }
+      navigate('dashboard');
     }
 
-    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('');
+    async function switchChatAgent(agentId) {
+      if (agentId && agentId !== currentAgent?.id) openChat(agentId);
     }
-    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>` : ''}
+
+    async function openChat(agentId) {
+      try {
+        const res = await fetch(`${API}/api/agents/${agentId}`);
+        currentAgent = await res.json();
+        if (currentAgent.error) { navigate('dashboard'); return; }
+      } catch { navigate('dashboard'); return; }
+
+      // Load history from localStorage, fallback to empty
+      const stored = localStorage.getItem(`opc-chat-${agentId}`);
+      chatMessages = stored ? JSON.parse(stored) : [];
+
+      document.getElementById('chat-agent-icon').textContent = currentAgent.templateIcon || '🤖';
+      document.getElementById('chat-agent-name').textContent = currentAgent.name;
+      document.getElementById('chat-agent-status').textContent = `${currentAgent.templateName || 'Custom'} · ${currentAgent.model}`;
+
+      // Populate agent selector
+      const sel = document.getElementById('chat-agent-select');
+      sel.innerHTML = agents.map(a => `<option value="${a.id}" ${a.id === agentId ? 'selected' : ''}>${a.templateIcon || '🤖'} ${a.name}</option>`).join('');
+
+      // Render messages
+      const msgEl = document.getElementById('chat-messages');
+      if (chatMessages.length > 0) {
+        msgEl.innerHTML = chatMessages.map(m => `
+          <div class="msg ${m.role}">
+            <div class="msg-bubble">${m.content.replace(/</g,'&lt;')}</div>
           </div>
-        `).join('') + `<div style="margin-top:16px"><button class="btn btn-primary" onclick="runDoctor()">Re-run</button></div>`;
+        `).join('');
       } else {
-        el.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre><button class="btn btn-primary" onclick="runDoctor()">Re-run</button>`;
+        msgEl.innerHTML = `
+          <div class="msg assistant">
+            <div class="msg-bubble">Hello! I'm ${currentAgent.name}. ${currentAgent.description ? 'I specialize in: ' + currentAgent.description : 'How can I help you today?'}</div>
+          </div>
+        `;
       }
+      document.getElementById('chat-input').value = '';
+
+      showPage('chat');
+      location.hash = `/chat/${agentId}`;
+      document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+      const chatNav = document.querySelector('.nav-item[data-page="chat"]');
+      if (chatNav) chatNav.classList.add('active');
+      msgEl.scrollTop = msgEl.scrollHeight;
+      document.getElementById('chat-input').focus();
+    }
+
+    function clearChat() {
+      if (!currentAgent) return;
+      chatMessages = [];
+      localStorage.removeItem(`opc-chat-${currentAgent.id}`);
+      document.getElementById('chat-messages').innerHTML = `
+        <div class="msg assistant">
+          <div class="msg-bubble">Hello! I'm ${currentAgent.name}. How can I help you today?</div>
+        </div>
+      `;
     }
 
-    // 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>';
+    async function handleDocUpload(input) {
+      const file = input.files[0];
+      if (!file || !currentAgent) return;
+      input.value = '';
+
+      // Show uploading status in chat
+      appendMessage('user', `📎 Uploading: ${file.name}`);
+      const statusEl = appendMessage('assistant', '⏳ Processing document...');
+
       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: '⚡'
-      };
+        const formData = new FormData();
+        formData.append('file', file);
+
+        const res = await fetch(`${API}/api/agents/${currentAgent.id}/upload`, {
+          method: 'POST',
+          body: formData,
+        });
 
-      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;
+        const data = await res.json();
+        if (data.error) {
+          statusEl.textContent = `❌ ${data.error}`;
+        } else {
+          statusEl.textContent = `✅ Learned ${data.learnedCount} knowledge chunks from "${file.name}"`;
         }
-        render();
+      } catch (e) {
+        statusEl.textContent = `❌ Upload failed: ${e.message}`;
       }
+    }
+
+    async function sendMessage() {
+      const input = document.getElementById('chat-input');
+      const text = input.value.trim();
+      if (!text || !currentAgent) return;
+
+      input.value = '';
+      chatMessages.push({ role: 'user', content: text });
+
+      // Render user message
+      appendMessage('user', text);
+
+      // Show typing + streaming indicator
+      document.getElementById('typing-indicator').classList.add('show');
+      document.getElementById('streaming-indicator').style.display = 'inline';
+      const msgContainer = document.getElementById('chat-messages');
+      msgContainer.scrollTop = msgContainer.scrollHeight;
+
+      try {
+        const res = await fetch(`${API}/api/agents/${currentAgent.id}/chat`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ messages: chatMessages }),
+        });
 
-      function toCanvas(e) {
-        const r = canvas.getBoundingClientRect();
-        return { x: (e.clientX - r.left - pan.x) / zoom, y: (e.clientY - r.top - pan.y) / zoom };
+        document.getElementById('typing-indicator').classList.remove('show');
+
+        if (res.headers.get('content-type')?.includes('text/event-stream')) {
+          // SSE streaming
+          const reader = res.body.getReader();
+          const decoder = new TextDecoder();
+          let assistantText = '';
+          const bubbleEl = appendMessage('assistant', '');
+
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            const chunk = decoder.decode(value);
+            const lines = chunk.split('\n');
+            for (const line of lines) {
+              if (line.startsWith('data: ')) {
+                const data = line.slice(6);
+                if (data === '[DONE]') break;
+                try {
+                  const parsed = JSON.parse(data);
+                  const content = parsed.choices?.[0]?.delta?.content || parsed.content || '';
+                  assistantText += content;
+                  bubbleEl.textContent = assistantText;
+                  msgContainer.scrollTop = msgContainer.scrollHeight;
+                } catch {}
+              }
+            }
+          }
+          chatMessages.push({ role: 'assistant', content: assistantText });
+        } else {
+          const data = await res.json();
+          const reply = data.response || data.error || 'No response';
+          appendMessage('assistant', reply);
+          chatMessages.push({ role: 'assistant', content: reply });
+        }
+        // Persist to localStorage
+        if (currentAgent) {
+          try { localStorage.setItem(`opc-chat-${currentAgent.id}`, JSON.stringify(chatMessages.slice(-100))); } catch {}
+        }
+      } catch(e) {
+        document.getElementById('typing-indicator').classList.remove('show');
+        appendMessage('assistant', `Error: ${e.message}`);
+      } finally {
+        document.getElementById('streaming-indicator').style.display = 'none';
       }
+      msgContainer.scrollTop = msgContainer.scrollHeight;
+    }
+
+    function appendMessage(role, text) {
+      const msgContainer = document.getElementById('chat-messages');
+      const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+      const div = document.createElement('div');
+      div.className = `msg ${role}`;
+      const bubble = document.createElement('div');
+      bubble.className = 'msg-bubble';
+      bubble.textContent = text;
+      div.appendChild(bubble);
+      const timeEl = document.createElement('div');
+      timeEl.className = 'msg-time';
+      timeEl.textContent = time;
+      div.appendChild(timeEl);
+      msgContainer.appendChild(div);
+      msgContainer.scrollTop = msgContainer.scrollHeight;
+      return bubble;
+    }
 
-      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;
+    // === Memory ===
+    function openMemory() {
+      if (currentAgent) openMemoryPage(currentAgent.id);
+    }
+
+    async function openMemoryPage(agentId) {
+      showPage('memory');
+      location.hash = `/memory/${agentId}`;
+      try {
+        const res = await fetch(`${API}/api/agents/${agentId}/memory`);
+        const data = await res.json();
+        if (data.entries && data.entries.length > 0) {
+          document.getElementById('memory-empty').style.display = 'none';
+          document.getElementById('memory-timeline').innerHTML = `
+            <div class="timeline">
+              ${data.entries.map(e => `
+                <div class="timeline-item">
+                  <div class="timeline-date">${new Date(e.timestamp).toLocaleDateString()} ${new Date(e.timestamp).toLocaleTimeString()}</div>
+                  <div class="timeline-content">${e.summary || e.content || 'Learned something new'}</div>
+                </div>
+              `).join('')}
+            </div>
+          `;
+        } else {
+          document.getElementById('memory-empty').style.display = 'block';
+          document.getElementById('memory-timeline').innerHTML = '';
         }
-        return null;
+      } catch {
+        document.getElementById('memory-empty').style.display = 'block';
       }
+    }
 
-      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' };
+    function navigateToChat() {
+      if (currentAgent) openChat(currentAgent.id);
+      else navigate('dashboard');
+    }
+
+    // === Settings ===
+    let currentSettingsTab = 'models';
+    let currentProvider = null;
+    let currentChannel = null;
+    let modelConfig = {};
+    let statusRefreshTimer = null;
+
+    function showSettings(tab) {
+      currentSettingsTab = tab;
+      document.querySelectorAll('.settings-nav-item').forEach(n => n.classList.remove('active'));
+      document.querySelector(`.settings-nav-item[data-settings="${tab}"]`)?.classList.add('active');
+      document.querySelectorAll('.settings-panel').forEach(p => p.classList.remove('active'));
+      document.getElementById(`sp-${tab}`)?.classList.add('active');
+
+      if (tab === 'models') initModelsPanel();
+      if (tab === 'channels') initChannelsPanel();
+      if (tab === 'memory') initMemoryPanel();
+      if (tab === 'role') initRolePanel();
+      if (tab === 'status') refreshStatus();
+      if (tab === 'usage') refreshUsage();
+      if (tab === 'search') initSearchPanel();
+    }
+
+    function switchModelTab(tab) {
+      document.querySelectorAll('#sp-models .tab').forEach(t => t.classList.remove('active'));
+      document.querySelectorAll('#sp-models .tab-panel').forEach(p => p.classList.remove('active'));
+      if (tab === 'local') {
+        document.querySelector('#sp-models .tab:first-child').classList.add('active');
+        document.getElementById('mt-local').classList.add('active');
+      } else {
+        document.querySelector('#sp-models .tab:last-child').classList.add('active');
+        document.getElementById('mt-cloud').classList.add('active');
+      }
+    }
+
+    // --- Models Panel ---
+    async function initModelsPanel() {
+      try {
+        const res = await fetch(`${API}/api/settings/models`);
+        modelConfig = await res.json();
+      } catch { modelConfig = {}; }
+      detectOllama();
+      updateProviderStatuses();
+      updateModelDropdowns();
+    }
+
+    async function detectOllama() {
+      const statusEl = document.getElementById('ollama-status');
+      const modelsEl = document.getElementById('ollama-models');
+      const tutorialEl = document.getElementById('ollama-tutorial');
+      statusEl.innerHTML = '<div style="display:flex;align-items:center;gap:8px;"><span class="status-dot yellow"></span> 正在检测本地 Ollama...</div>';
+      try {
+        const res = await fetch(`${API}/api/settings/models/local`);
+        const data = await res.json();
+        if (data.running) {
+          statusEl.innerHTML = '<div style="display:flex;align-items:center;gap:8px;"><span class="status-dot green"></span> <b>Ollama 运行中</b> — 本地模型可用，完全免费</div>';
+          tutorialEl.style.display = 'none';
+          if (data.models && data.models.length > 0) {
+            modelsEl.innerHTML = '<div class="card"><h3 style="font-size:15px;margin-bottom:12px;">已安装的模型</h3>' +
+              data.models.map(m => {
+                const size = m.size ? `${(m.size / 1e9).toFixed(1)}GB` : '';
+                const isChat = modelConfig.chatModel === m.name;
+                const isEmbed = modelConfig.embeddingModel === m.name;
+                const badge = isChat ? ' <span style="color:var(--accent);font-size:11px;">● 聊天</span>' : isEmbed ? ' <span style="color:var(--green);font-size:11px;">● 记忆</span>' : '';
+                return `<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);">
+                  <div><span style="font-weight:500;">${m.name}</span>${badge}</div>
+                  <span style="font-size:12px;color:var(--text-dim);">${size}</span>
+                </div>`;
+              }).join('') + '</div>';
+            // Update dropdowns with local models
+            updateModelDropdowns(data.models);
+          } else {
+            modelsEl.innerHTML = '<div class="card"><p style="color:var(--text-muted);font-size:14px;">Ollama 已运行但没有安装任何模型。请在终端运行：<br><code style="background:var(--bg-hover);padding:2px 8px;border-radius:4px;font-family:var(--mono);">ollama pull qwen2.5:7b</code></p></div>';
           }
+        } else {
+          statusEl.innerHTML = '<div style="display:flex;align-items:center;gap:8px;"><span class="status-dot red"></span> <b>Ollama 未运行</b> — 按照下面的教程安装</div>';
+          modelsEl.innerHTML = '';
+          tutorialEl.style.display = 'block';
         }
-        return null;
+      } catch {
+        statusEl.innerHTML = '<div style="display:flex;align-items:center;gap:8px;"><span class="status-dot red"></span> 无法检测 Ollama</div>';
+        tutorialEl.style.display = 'block';
+      }
+    }
+
+    function updateModelDropdowns(localModels) {
+      const chatSel = document.getElementById('cfg-chat-model');
+      const embedSel = document.getElementById('cfg-embed-model');
+      if (localModels && localModels.length > 0) {
+        const chatOpts = localModels.map(m => `<option value="${m.name}" ${modelConfig.chatModel === m.name ? 'selected' : ''}>${m.name}${m.name === 'qwen2.5:7b' ? ' ⭐ 推荐' : ''}</option>`).join('');
+        const embedOpts = localModels.map(m => `<option value="${m.name}" ${modelConfig.embeddingModel === m.name ? 'selected' : ''}>${m.name}${m.name === 'nomic-embed-text' ? ' ⭐ 推荐' : ''}</option>`).join('');
+        chatSel.innerHTML = chatOpts;
+        embedSel.innerHTML = embedOpts;
       }
+      // Add cloud models if configured
+      const providers = modelConfig.providers || {};
+      const cloudModels = [];
+      if (providers.openai?.apiKey) cloudModels.push({name:'gpt-4o',label:'GPT-4o (OpenAI)'},{name:'gpt-4o-mini',label:'GPT-4o Mini (OpenAI)'});
+      if (providers.deepseek?.apiKey) cloudModels.push({name:'deepseek-chat',label:'DeepSeek V3'},{name:'deepseek-reasoner',label:'DeepSeek R1'});
+      if (providers.anthropic?.apiKey) cloudModels.push({name:'claude-sonnet-4-20250514',label:'Claude Sonnet (Anthropic)'});
+      if (providers.openrouter?.apiKey) cloudModels.push({name:'openrouter/auto',label:'OpenRouter Auto'});
+      cloudModels.forEach(m => {
+        chatSel.innerHTML += `<option value="${m.name}" ${modelConfig.chatModel === m.name ? 'selected' : ''}>${m.label}</option>`;
+      });
+    }
+
+    function updateProviderStatuses() {
+      const providers = modelConfig.providers || {};
+      ['openai','deepseek','qwen','anthropic','openrouter'].forEach(p => {
+        const el = document.getElementById(`pv-${p}`);
+        if (!el) return;
+        if (providers[p]?.apiKey) {
+          el.innerHTML = '<span style="color:var(--green);">✅ 已配置</span>';
+          el.closest('.provider-card')?.classList.add('configured');
+        } else {
+          el.innerHTML = '未配置';
+          el.closest('.provider-card')?.classList.remove('configured');
+        }
+      });
+    }
 
-      function pushUndo() {
-        undoStack.push(JSON.stringify({ nodes, edges }));
-        if (undoStack.length > 50) undoStack.shift();
-        redoStack = [];
+    async function saveModelAssignment() {
+      const chatModel = document.getElementById('cfg-chat-model').value;
+      const embeddingModel = document.getElementById('cfg-embed-model').value;
+      try {
+        await fetch(`${API}/api/settings/models`, {
+          method: 'PUT', headers: {'Content-Type':'application/json'},
+          body: JSON.stringify({ chatModel, embeddingModel })
+        });
+        modelConfig.chatModel = chatModel;
+        modelConfig.embeddingModel = embeddingModel;
+      } catch {}
+    }
+
+    // --- Provider Dialog ---
+    const PROVIDER_INFO = {
+      openai: { name: 'OpenAI', desc: '需要 OpenAI 账号。获取 Key: platform.openai.com/api-keys', placeholder: 'sk-...' },
+      deepseek: { name: 'DeepSeek', desc: '国产大模型，性价比极高。获取 Key: platform.deepseek.com', placeholder: 'sk-...' },
+      qwen: { name: '通义千问', desc: '阿里云大模型。获取 Key: dashscope.console.aliyun.com', placeholder: 'sk-...' },
+      anthropic: { name: 'Anthropic', desc: 'Claude 系列模型。获取 Key: console.anthropic.com', placeholder: 'sk-ant-...' },
+      openrouter: { name: 'OpenRouter', desc: '100+ 模型聚合平台。获取 Key: openrouter.ai/keys', placeholder: 'sk-or-...' },
+    };
+
+    function configureProvider(provider) {
+      currentProvider = provider;
+      const info = PROVIDER_INFO[provider] || {};
+      document.getElementById('pd-title').textContent = `配置 ${info.name || provider}`;
+      document.getElementById('pd-desc').textContent = info.desc || '';
+      document.getElementById('pd-apikey').placeholder = info.placeholder || 'API Key';
+      document.getElementById('pd-apikey').value = modelConfig.providers?.[provider]?.apiKey || '';
+      document.getElementById('pd-baseurl').value = modelConfig.providers?.[provider]?.baseUrl || '';
+      document.getElementById('pd-test-result').innerHTML = '';
+      document.getElementById('pd-baseurl-group').style.display = (provider === 'qwen' || provider === 'openrouter') ? 'block' : 'none';
+      document.getElementById('provider-dialog').classList.add('show');
+    }
+    function closeProviderDialog() { document.getElementById('provider-dialog').classList.remove('show'); currentProvider = null; }
+
+    async function testProvider() {
+      const apiKey = document.getElementById('pd-apikey').value.trim();
+      const baseUrl = document.getElementById('pd-baseurl').value.trim();
+      const resultEl = document.getElementById('pd-test-result');
+      if (!apiKey) { resultEl.innerHTML = '<span style="color:var(--yellow);">请先填入 API Key</span>'; return; }
+      resultEl.innerHTML = '<span style="color:var(--text-muted);">⏳ 测试中...</span>';
+      try {
+        const res = await fetch(`${API}/api/settings/models/test`, {
+          method: 'POST', headers: {'Content-Type':'application/json'},
+          body: JSON.stringify({ provider: currentProvider, apiKey, baseUrl: baseUrl || undefined })
+        });
+        const data = await res.json();
+        resultEl.innerHTML = data.success ? '<span style="color:var(--green);">✅ 连接成功！</span>' : `<span style="color:var(--red);">❌ 连接失败 (${data.error || data.statusCode})</span>`;
+      } catch(e) {
+        resultEl.innerHTML = `<span style="color:var(--red);">❌ 网络错误</span>`;
       }
+    }
+
+    async function saveProvider() {
+      const apiKey = document.getElementById('pd-apikey').value.trim();
+      const baseUrl = document.getElementById('pd-baseurl').value.trim();
+      if (!modelConfig.providers) modelConfig.providers = {};
+      modelConfig.providers[currentProvider] = { apiKey, baseUrl: baseUrl || undefined };
+      try {
+        await fetch(`${API}/api/settings/models`, {
+          method: 'PUT', headers: {'Content-Type':'application/json'},
+          body: JSON.stringify({ providers: modelConfig.providers })
+        });
+      } catch {}
+      updateProviderStatuses();
+      updateModelDropdowns();
+      closeProviderDialog();
+    }
+
+    // --- Channels Panel ---
+    const CHANNELS = [
+      { id: 'telegram', name: 'Telegram', icon: '✈️', fields: [{key:'botToken',label:'Bot Token',placeholder:'123456:ABC-DEF...',help:'从 @BotFather 获取。<a href="https://t.me/botfather" target="_blank">打开 BotFather →</a>'}] },
+      { id: 'wechat', name: '微信', icon: '💬', fields: [], comingSoon: true },
+      { id: 'feishu', name: '飞书', icon: '🐦', fields: [{key:'appId',label:'App ID',placeholder:'cli_...'},{key:'appSecret',label:'App Secret',placeholder:'',type:'password'}] },
+      { id: 'discord', name: 'Discord', icon: '🎮', fields: [{key:'botToken',label:'Bot Token',placeholder:'',type:'password'}] },
+      { id: 'slack', name: 'Slack', icon: '💼', fields: [{key:'botToken',label:'Bot Token',placeholder:'xoxb-...',type:'password'}] },
+      { id: 'email', name: 'Email', icon: '📧', fields: [{key:'imapHost',label:'IMAP Host',placeholder:'imap.gmail.com'},{key:'smtpHost',label:'SMTP Host',placeholder:'smtp.gmail.com'},{key:'email',label:'Email',placeholder:'agent@example.com'},{key:'password',label:'Password',placeholder:'',type:'password'}] },
+      { id: 'web', name: 'Web', icon: '🌐', fields: [], alwaysOn: true },
+      { id: 'whatsapp', name: 'WhatsApp', icon: '📱', fields: [{key:'phoneId',label:'Phone Number ID',placeholder:''},{key:'accessToken',label:'Access Token',placeholder:'',type:'password'}] },
+    ];
+
+    let channelConfigs = {};
+
+    async function initChannelsPanel() {
+      try {
+        const res = await fetch(`${API}/api/settings/channels`);
+        channelConfigs = await res.json();
+      } catch { channelConfigs = {}; }
+      renderChannels();
+    }
+
+    function renderChannels() {
+      document.getElementById('channels-grid').innerHTML = CHANNELS.map(ch => {
+        const cfg = channelConfigs[ch.id] || {};
+        const connected = ch.alwaysOn || (cfg && Object.keys(cfg).some(k => k !== 'updated' && cfg[k]));
+        const statusDot = ch.comingSoon ? 'yellow' : connected ? 'green' : 'red';
+        const statusText = ch.comingSoon ? '即将支持' : connected ? '已连接' : '未配置';
+        return `<div class="card channel-card" onclick="${ch.comingSoon ? '' : `configureChannel('${ch.id}')`}" style="${ch.comingSoon ? 'opacity:0.6;cursor:default;' : ''}">
+          <div class="ch-icon">${ch.icon}</div>
+          <div class="ch-info">
+            <div class="ch-name">${ch.name}</div>
+            <div class="ch-status"><span class="status-dot ${statusDot}"></span> ${statusText}</div>
+          </div>
+          ${!ch.comingSoon && !ch.alwaysOn ? '<span style="color:var(--text-dim);font-size:18px;">›</span>' : ''}
+          ${ch.alwaysOn ? '<span style="font-size:12px;color:var(--green);">默认开启</span>' : ''}
+        </div>`;
+      }).join('');
+    }
+
+    function configureChannel(chId) {
+      const ch = CHANNELS.find(c => c.id === chId);
+      if (!ch || ch.comingSoon) return;
+      if (ch.alwaysOn) return;
+      currentChannel = chId;
+      const cfg = channelConfigs[chId] || {};
+      document.getElementById('cd-title').textContent = `配置 ${ch.name}`;
+      document.getElementById('cd-desc').textContent = '';
+      document.getElementById('cd-fields').innerHTML = ch.fields.map(f =>
+        `<div class="form-group">
+          <label class="label">${f.label}</label>
+          <input class="input" id="cf-${f.key}" type="${f.type || 'text'}" placeholder="${f.placeholder || ''}" value="${cfg[f.key] || ''}">
+          ${f.help ? `<p style="font-size:12px;color:var(--text-dim);margin-top:4px;">${f.help}</p>` : ''}
+        </div>`
+      ).join('');
+      document.getElementById('channel-dialog').classList.add('show');
+    }
+    function closeChannelDialog() { document.getElementById('channel-dialog').classList.remove('show'); currentChannel = null; }
+
+    async function saveChannel() {
+      const ch = CHANNELS.find(c => c.id === currentChannel);
+      if (!ch) return;
+      const cfg = {};
+      ch.fields.forEach(f => { cfg[f.key] = document.getElementById(`cf-${f.key}`)?.value?.trim() || ''; });
+      try {
+        await fetch(`${API}/api/settings/channels/${currentChannel}`, {
+          method: 'PUT', headers: {'Content-Type':'application/json'},
+          body: JSON.stringify(cfg)
+        });
+        channelConfigs[currentChannel] = cfg;
+      } catch {}
+      renderChannels();
+      closeChannelDialog();
+    }
 
-      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();
+    // --- Memory Panel (DeepBrain iframe) ---
+    async function initMemoryPanel() {
+      const container = document.getElementById('memory-module-frame');
+      const running = await checkModulePort(4001);
+      if (running) {
+        container.innerHTML = `<div class="module-frame-container"><iframe src="http://localhost:4001" title="DeepBrain 记忆管理"></iframe></div>`;
+      } else {
+        container.innerHTML = `<div class="card module-frame-fallback">
+          <div class="mf-icon">🧠</div>
+          <h3 style="margin-bottom:8px;">DeepBrain 未运行</h3>
+          <p style="color:var(--text-muted);font-size:14px;margin-bottom:16px;">记忆管理由 DeepBrain 模块提供（端口 4001）</p>
+          <a href="http://localhost:4001" target="_blank" class="btn btn-primary">🔗 打开记忆管理</a>
+          <p style="color:var(--text-dim);font-size:12px;margin-top:12px;">如果按钮无法打开，请先启动 DeepBrain 服务</p>
+        </div>`;
       }
+    }
 
-      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();
+    // --- Role Panel (Workstation iframe) ---
+    async function initRolePanel() {
+      const container = document.getElementById('role-module-frame');
+      const running = await checkModulePort(4003);
+      if (running) {
+        container.innerHTML = `<div class="module-frame-container"><iframe src="http://localhost:4003" title="Workstation 角色编辑"></iframe></div>`;
+      } else {
+        container.innerHTML = `<div class="card module-frame-fallback">
+          <div class="mf-icon">👤</div>
+          <h3 style="margin-bottom:8px;">Workstation 未运行</h3>
+          <p style="color:var(--text-muted);font-size:14px;margin-bottom:16px;">角色编辑由 Workstation 模块提供（端口 4003）</p>
+          <a href="http://localhost:4003" target="_blank" class="btn btn-primary">🔗 打开角色编辑</a>
+          <p style="color:var(--text-dim);font-size:12px;margin-top:12px;">如果按钮无法打开，请先启动 Workstation 服务</p>
+        </div>`;
       }
+    }
 
-      // ── 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();
-        }
+    async function checkModulePort(port) {
+      try {
+        const res = await fetch(`${API}/api/modules`);
+        const data = await res.json();
+        const mod = (data.modules || []).find(m => m.port === port);
+        return mod?.running || false;
+      } catch { return false; }
+    }
 
-        // 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([]);
-          }
-        }
+    // --- Status Panel ---
+    async function refreshStatus() {
+      try {
+        const res = await fetch(`${API}/api/settings/status`);
+        const data = await res.json();
+
+        // Overview cards
+        const upHrs = Math.floor(data.uptime / 3600);
+        const upMins = Math.floor((data.uptime % 3600) / 60);
+        const memMB = Math.round((data.memory?.rss || 0) / 1048576);
+
+        document.getElementById('status-overview').innerHTML = `
+          <div class="card-grid" style="margin-bottom:16px;">
+            <div class="card stat-card">
+              <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;">
+                <span class="status-dot green"></span><span style="font-size:14px;font-weight:600;">运行中</span>
+              </div>
+              <div class="stat-value">${upHrs}h ${upMins}m</div>
+              <div class="stat-label">运行时间</div>
+            </div>
+            <div class="card stat-card">
+              <div class="stat-value">${memMB} MB</div>
+              <div class="stat-label">内存占用</div>
+            </div>
+            <div class="card stat-card">
+              <div class="stat-value">${(data.modules || []).filter(m => m.running).length}/${(data.modules || []).length}</div>
+              <div class="stat-label">模块在线</div>
+            </div>
+          </div>
+          <div class="card" style="margin-bottom:16px;">
+            <h3 style="font-size:15px;margin-bottom:12px;">模块状态</h3>
+            ${(data.modules || []).map(m => `<div style="display:flex;align-items:center;gap:10px;padding:6px 0;">
+              <span class="status-dot ${m.running ? 'green' : 'red'}"></span>
+              <span>${m.icon} ${m.name}</span>
+              <span style="color:var(--text-dim);font-size:12px;margin-left:auto;">:${m.port}</span>
+            </div>`).join('')}
+          </div>
+        `;
 
-        // 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();
-          }
+        // Logs
+        const logsEl = document.getElementById('status-logs');
+        if (data.logs && data.logs.length > 0) {
+          logsEl.textContent = data.logs.join('\n');
+          logsEl.scrollTop = logsEl.scrollHeight;
+        } else {
+          logsEl.textContent = '暂无日志。Agent 运行后日志会显示在这里。';
         }
-        ctx.restore();
+      } catch {
+        document.getElementById('status-overview').innerHTML = '<div class="card"><p style="color:var(--text-muted);">无法获取状态信息</p></div>';
       }
+    }
 
-      // ── 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;
+    // --- Usage Panel ---
+    async function refreshUsage() {
+      try {
+        const res = await fetch(`${API}/api/settings/usage`);
+        const data = await res.json();
+        const totalTokens = data.totalTokens || 0;
+        const totalCost = data.totalCost || 0;
+        const byModel = data.byModel || {};
+        const daily = data.daily || [];
+
+        document.getElementById('usage-stats').innerHTML = `
+          <div class="card-grid" style="margin-bottom:24px;">
+            <div class="card stat-card">
+              <div class="stat-value">${totalTokens > 1000 ? (totalTokens/1000).toFixed(1) + 'K' : totalTokens}</div>
+              <div class="stat-label">总 Token 消耗</div>
+            </div>
+            <div class="card stat-card">
+              <div class="stat-value">$${totalCost.toFixed(4)}</div>
+              <div class="stat-label">估算费用</div>
+            </div>
+            <div class="card stat-card">
+              <div class="stat-value">${Object.keys(byModel).length || 0}</div>
+              <div class="stat-label">使用模型数</div>
+            </div>
+          </div>
+          ${Object.keys(byModel).length > 0 ? `
+            <div class="card" style="margin-bottom:16px;">
+              <h3 style="font-size:15px;margin-bottom:12px;">按模型分布</h3>
+              ${Object.entries(byModel).map(([m, v]) => `<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);">
+                <span style="font-size:14px;">${m}</span>
+                <span style="font-size:13px;color:var(--text-muted);">${v.tokens || 0} tokens · $${(v.cost || 0).toFixed(4)}</span>
+              </div>`).join('')}
+            </div>
+          ` : ''}
+          ${totalTokens === 0 ? `
+            <div class="card" style="text-align:center;padding:40px;">
+              <div style="font-size:36px;margin-bottom:12px;">📊</div>
+              <p style="color:var(--text-muted);">还没有使用记录。开始和 Agent 聊天后，用量数据会自动记录在这里。</p>
+              ${modelConfig.mode === 'local' || !modelConfig.mode ? '<p style="color:var(--green);font-size:13px;margin-top:8px;">💡 使用本地模型完全免费，不产生费用</p>' : ''}
+            </div>
+          ` : ''}
+        `;
+      } catch {
+        document.getElementById('usage-stats').innerHTML = '<div class="card"><p style="color:var(--text-muted);">无法获取用量数据</p></div>';
+      }
+    }
+
+    // === Web Search Settings ===
+    async function initSearchPanel() {
+      try {
+        const res = await fetch(`${API}/api/settings/search`);
+        const cfg = await res.json();
+        document.getElementById('search-enabled').checked = cfg.enabled !== false;
+        document.getElementById('search-engine').value = cfg.defaultEngine || 'duckduckgo';
+        updateSearchEngineUI(cfg.defaultEngine || 'duckduckgo');
+        if (cfg.engines) {
+          const eng = cfg.engines[cfg.defaultEngine];
+          if (eng?.apiKey) document.getElementById('search-apikey').value = eng.apiKey;
+          if (eng?.baseUrl) document.getElementById('search-baseurl').value = eng.baseUrl;
         }
-        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();
+      } catch { /* defaults are fine */ }
+    }
+
+    function updateSearchEngineUI(engine) {
+      const needsKey = ['brave', 'google'].includes(engine);
+      const needsUrl = engine === 'searxng';
+      document.getElementById('search-apikey-group').style.display = needsKey ? '' : 'none';
+      document.getElementById('search-baseurl-group').style.display = needsUrl ? '' : 'none';
+      if (engine === 'brave') document.getElementById('search-apikey-label').textContent = 'Brave Search API Key';
+      if (engine === 'google') document.getElementById('search-apikey-label').textContent = 'Google API Key:CX';
+    }
+
+    async function updateSearchConfig() {
+      const engine = document.getElementById('search-engine').value;
+      updateSearchEngineUI(engine);
+      const cfg = {
+        enabled: document.getElementById('search-enabled').checked,
+        defaultEngine: engine,
+        engines: {}
+      };
+      cfg.engines[engine] = { enabled: true };
+      const apiKey = document.getElementById('search-apikey').value;
+      const baseUrl = document.getElementById('search-baseurl').value;
+      if (apiKey) cfg.engines[engine].apiKey = apiKey;
+      if (baseUrl) cfg.engines[engine].baseUrl = baseUrl;
+      cfg.engines.duckduckgo = { enabled: true };
+      try {
+        await fetch(`${API}/api/settings/search`, {
+          method: 'PUT', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(cfg)
+        });
+      } catch { /* silent */ }
+    }
+
+    async function testSearch() {
+      const el = document.getElementById('search-test-result');
+      el.innerHTML = '<span style="color:var(--yellow);">🔍 正在搜索...</span>';
+      try {
+        const res = await fetch(`${API}/api/settings/search/test`, {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ query: 'hello world test' })
+        });
+        const data = await res.json();
+        if (data.success && data.results?.length) {
+          el.innerHTML = `<span style="color:var(--green);">✅ 搜索成功！找到 ${data.results.length} 条结果</span><br>` +
+            data.results.map(r => `<div style="margin-top:8px;font-size:12px;"><a href="${r.url}" target="_blank">${r.title}</a><br><span style="color:var(--text-muted);">${r.snippet?.slice(0,100)}</span></div>`).join('');
         } else {
-          selected = null;
-          hideProps();
-          isPanning = true;
-          panStart = { x: e.clientX - pan.x, y: e.clientY - pan.y };
-          render();
+          el.innerHTML = `<span style="color:var(--red);">❌ ${data.error || '未找到结果'}</span>`;
         }
+      } catch (e) {
+        el.innerHTML = `<span style="color:var(--red);">❌ 测试失败: ${e.message}</span>`;
       }
+    }
 
-      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;
+    // === Health Dashboard ===
+    async function loadHealthDashboard() {
+      const el = document.getElementById('health-section');
+      if (!el) return;
+      try {
+        const [modRes, ollamaRes] = await Promise.all([
+          fetch(`${API}/api/modules`),
+          fetch(`${API}/api/settings/models/local`),
+        ]);
+        const modData = await modRes.json();
+        const ollamaData = await ollamaRes.json();
+        const modules = modData.modules || [];
+        const runningCount = modules.filter(m => m.running).length;
+        el.innerHTML = `
+          <div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;">
+            ${modules.map(m => `
+              <div class="card" style="flex:1;min-width:140px;display:flex;align-items:center;gap:10px;padding:12px 14px;">
+                <span class="status-dot ${m.running ? 'green' : 'red'}"></span>
+                <span style="font-size:13px;">${m.icon} ${m.name}</span>
+                <span style="font-size:11px;color:var(--text-dim);margin-left:auto;">:${m.port}</span>
+              </div>
+            `).join('')}
+            <div class="card" style="flex:1;min-width:140px;display:flex;align-items:center;gap:10px;padding:12px 14px;">
+              <span class="status-dot ${ollamaData.running ? 'green' : 'red'}"></span>
+              <span style="font-size:13px;">🦙 Ollama</span>
+              <span style="font-size:11px;color:var(--text-dim);margin-left:auto;">${ollamaData.running ? (ollamaData.models?.length || 0) + ' models' : 'offline'}</span>
+            </div>
+          </div>
+        `;
+      } catch {
+        el.innerHTML = '';
+      }
+    }
+
+    // === First Run Wizard ===
+    let frStep = 1;
+    let frSelectedTemplate = null;
+    let frCreatedAgentId = null;
+
+    async function checkFirstRun() {
+      try {
+        const res = await fetch(`${API}/api/first-run/status`);
+        const data = await res.json();
+        if (data.firstRun) {
+          showFirstRunWizard(data);
         }
-        if (isPanning) {
-          pan.x = e.clientX - panStart.x;
-          pan.y = e.clientY - panStart.y;
-          render();
+      } catch {}
+    }
+
+    function showFirstRunWizard(data) {
+      frStep = 1;
+      const overlay = document.getElementById('first-run-overlay');
+      overlay.style.display = 'flex';
+      frRenderStep();
+      if (data?.ollamaDetected) {
+        const statusEl = document.getElementById('fr-ollama-status');
+        if (statusEl) {
+          statusEl.innerHTML = `<div style="display:flex;align-items:center;gap:8px;color:var(--green);"><span class="status-dot green"></span> <b>Ollama detected!</b> ${data.ollamaModels?.length ? data.ollamaModels.length + ' models available.' : ''} Local AI is free.</div>`;
+          const choiceEl = document.getElementById('fr-model-choice');
+          if (choiceEl) choiceEl.style.display = 'block';
+          const sel = document.getElementById('fr-model-select');
+          if (sel && data.ollamaModels?.length) {
+            sel.innerHTML = data.ollamaModels.map(m => `<option value="${m.name}">${m.name} (local)</option>`).join('') + '<option value="gpt-4o-mini">GPT-4o Mini (cloud)</option>';
+          }
         }
+      } else {
+        detectFrOllama();
       }
+    }
 
-      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);
+    async function detectFrOllama() {
+      try {
+        const res = await fetch(`${API}/api/settings/models/local`);
+        const data = await res.json();
+        const statusEl = document.getElementById('fr-ollama-status');
+        const choiceEl = document.getElementById('fr-model-choice');
+        if (!statusEl) return;
+        if (data.running) {
+          statusEl.innerHTML = `<div style="display:flex;align-items:center;gap:8px;color:var(--green);"><span class="status-dot green"></span> <b>Ollama running</b> — free local models available!</div>`;
+          if (choiceEl) choiceEl.style.display = 'block';
+          const sel = document.getElementById('fr-model-select');
+          if (sel && data.models?.length) {
+            sel.innerHTML = data.models.map(m => `<option value="${m.name}">${m.name} (local)</option>`).join('') + '<option value="gpt-4o-mini">GPT-4o Mini (cloud)</option>';
           }
-          connecting = null;
-          render();
+        } else {
+          statusEl.innerHTML = `<div style="display:flex;align-items:center;gap:8px;"><span class="status-dot red"></span> Ollama not detected — you can use cloud models or <a href="https://ollama.com" target="_blank">install Ollama</a> for free local AI.</div>`;
+          if (choiceEl) choiceEl.style.display = 'block';
         }
-        dragging = null;
-        isPanning = false;
+      } catch {}
+    }
+
+    function frRenderStep() {
+      for (let i = 1; i <= 4; i++) {
+        const stepEl = document.getElementById(`fr-step-${i}`);
+        const panelEl = document.getElementById(`fr-panel-${i}`);
+        if (stepEl) stepEl.className = 'wizard-step' + (i < frStep ? ' done' : i === frStep ? ' active' : '');
+        if (panelEl) panelEl.className = 'wizard-panel' + (i === frStep ? ' active' : '');
       }
+    }
 
-      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 frNext() {
+      if (frStep === 3 && !frSelectedTemplate) {
+        frSelectedTemplate = 'customer-service';
       }
+      if (frStep === 3) {
+        frStep = 4;
+        frRenderStep();
+        frCreateAgent();
+        return;
+      }
+      if (frStep < 4) { frStep++; frRenderStep(); }
+    }
 
-      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 frBack() {
+      if (frStep > 1) { frStep--; frRenderStep(); }
+    }
+
+    function frSelectTemplate(id) {
+      frSelectedTemplate = id;
+      document.querySelectorAll('#fr-template-list .card').forEach(c => {
+        c.style.borderColor = '';
+        c.style.background = '';
+      });
+      const el = document.getElementById(`fr-tpl-${id}`);
+      if (el) { el.style.borderColor = 'var(--accent)'; el.style.background = 'var(--accent-light)'; }
+    }
+
+    async function frCreateAgent() {
+      const model = document.getElementById('fr-model-select')?.value || 'qwen2.5:7b';
+      try {
+        // Save first-run complete
+        await fetch(`${API}/api/first-run/complete`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ templateId: frSelectedTemplate, model }),
+        });
+        // Create the agent
+        const res = await fetch(`${API}/api/agents`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name: '', templateId: frSelectedTemplate || 'customer-service', model }),
+        });
+        const agent = await res.json();
+        frCreatedAgentId = agent.id;
+        document.getElementById('fr-creating').style.display = 'none';
+        document.getElementById('fr-done').style.display = 'block';
+        await loadAgents();
+      } catch(e) {
+        document.getElementById('fr-creating').innerHTML = `<div style="color:var(--red);">Error: ${e.message}</div>`;
       }
+    }
 
-      function onDrop(e) {
+    function frFinish() {
+      document.getElementById('first-run-overlay').style.display = 'none';
+      if (frCreatedAgentId) openChat(frCreatedAgentId);
+      else navigate('dashboard');
+    }
+
+    // === Drag & drop document upload ===
+    const chatArea = document.getElementById('chat-messages');
+    if (chatArea) {
+      chatArea.addEventListener('dragover', (e) => { e.preventDefault(); chatArea.style.outline = '2px dashed var(--primary)'; });
+      chatArea.addEventListener('dragleave', () => { chatArea.style.outline = ''; });
+      chatArea.addEventListener('drop', (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);
+        chatArea.style.outline = '';
+        const file = e.dataTransfer?.files?.[0];
+        if (file) {
+          const dt = new DataTransfer();
+          dt.items.add(file);
+          const inp = document.getElementById('doc-upload-input');
+          inp.files = dt.files;
+          handleDocUpload(inp);
+        }
+      });
+    }
+
+    // === Start ===
+    init();
+
+    // =============================================
+    // === Schedules Management ===
+    // =============================================
+    let editingScheduleId = null;
+
+    async function loadSchedules() {
+      try {
+        const res = await fetch('/api/schedules');
+        const tasks = await res.json();
+        const list = Array.isArray(tasks) ? tasks : [];
+        renderSchedules(list);
+      } catch(e) {
+        console.error('Failed to load schedules:', e);
+        renderSchedules([]);
       }
+    }
 
-      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 renderSchedules(tasks) {
+      const listEl = document.getElementById('schedules-list');
+      const emptyEl = document.getElementById('schedules-empty');
+      if (!tasks.length) {
+        listEl.innerHTML = '';
+        emptyEl.style.display = '';
+        return;
       }
+      emptyEl.style.display = 'none';
+      listEl.innerHTML = tasks.map(t => `
+        <div class="card" style="margin-bottom:12px;display:flex;align-items:center;gap:16px;">
+          <div style="font-size:28px;">⏰</div>
+          <div style="flex:1;">
+            <div style="font-size:15px;font-weight:600;">${esc(t.name)}</div>
+            <div style="font-size:12px;color:var(--text-muted);">${esc(t.description || '')}</div>
+            <div style="font-size:11px;color:var(--text-dim);margin-top:4px;">
+              ${esc(t.schedule)} · ${t.outputChannel || 'web'} · Next: ${t.nextRun ? new Date(t.nextRun).toLocaleString() : 'N/A'}
+            </div>
+          </div>
+          <div style="display:flex;gap:8px;align-items:center;">
+            <label style="position:relative;display:inline-block;width:40px;height:22px;cursor:pointer;">
+              <input type="checkbox" ${t.enabled ? 'checked' : ''} onchange="toggleSchedule('${t.id}', this.checked)" style="opacity:0;width:0;height:0;">
+              <span style="position:absolute;inset:0;border-radius:11px;background:${t.enabled ? 'var(--green)' : 'var(--border)'};transition:0.3s;"></span>
+              <span style="position:absolute;top:2px;left:${t.enabled ? '20px' : '2px'};width:18px;height:18px;border-radius:50%;background:white;transition:0.3s;"></span>
+            </label>
+            <button class="btn btn-sm btn-secondary" onclick="runScheduleNow('${t.id}')" title="Run now">▶️</button>
+            <button class="btn btn-sm btn-secondary" onclick="editSchedule('${t.id}')" title="Edit">✏️</button>
+            <button class="btn btn-sm btn-danger" onclick="deleteSchedule('${t.id}')" title="Delete">🗑</button>
+          </div>
+        </div>
+      `).join('');
+    }
 
-      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>`;
-          }
+    function esc(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+
+    function showScheduleForm(task) {
+      editingScheduleId = task ? task.id : null;
+      document.getElementById('schedule-form').style.display = '';
+      document.getElementById('schedule-form-title').textContent = task ? 'Edit Task' : 'New Scheduled Task';
+      document.getElementById('sched-name').value = task ? task.name : '';
+      document.getElementById('sched-frequency').value = task ? task.frequency : 'daily';
+      document.getElementById('sched-time').value = task ? (task.time || '09:00') : '09:00';
+      document.getElementById('sched-cron').value = task ? task.schedule : '';
+      document.getElementById('sched-desc').value = task ? task.description : '';
+      document.getElementById('sched-channel').value = task ? task.outputChannel : 'web';
+      onSchedFreqChange();
+    }
+
+    function hideScheduleForm() {
+      document.getElementById('schedule-form').style.display = 'none';
+      editingScheduleId = null;
+    }
+
+    function onSchedFreqChange() {
+      const freq = document.getElementById('sched-frequency').value;
+      document.getElementById('sched-time-group').style.display = freq === 'custom' ? 'none' : '';
+      document.getElementById('sched-cron-group').style.display = freq === 'custom' ? '' : 'none';
+    }
+
+    async function saveSchedule() {
+      const data = {
+        name: document.getElementById('sched-name').value.trim(),
+        frequency: document.getElementById('sched-frequency').value,
+        time: document.getElementById('sched-time').value,
+        schedule: document.getElementById('sched-frequency').value === 'custom' ? document.getElementById('sched-cron').value.trim() : '',
+        description: document.getElementById('sched-desc').value.trim(),
+        outputChannel: document.getElementById('sched-channel').value,
+        enabled: true,
+      };
+      if (!data.name) { alert('Task name is required'); return; }
+      try {
+        if (editingScheduleId) {
+          await fetch(`/api/schedules/${editingScheduleId}`, { method: 'PUT', headers: {'Content-Type':'application/json'}, body: JSON.stringify(data) });
+        } else {
+          await fetch('/api/schedules', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify(data) });
         }
-        content.innerHTML = html;
+        hideScheduleForm();
+        loadSchedules();
+      } catch(e) { alert('Failed to save: ' + e.message); }
+    }
+
+    async function toggleSchedule(id, enabled) {
+      await fetch(`/api/schedules/${id}`, { method: 'PUT', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ enabled }) });
+      loadSchedules();
+    }
+
+    async function deleteSchedule(id) {
+      if (!confirm('Delete this task?')) return;
+      await fetch(`/api/schedules/${id}`, { method: 'DELETE' });
+      loadSchedules();
+    }
+
+    async function runScheduleNow(id) {
+      await fetch(`/api/schedules/${id}/run`, { method: 'POST' });
+      alert('Task executed!');
+      loadSchedules();
+    }
+
+    async function editSchedule(id) {
+      const res = await fetch('/api/schedules');
+      const tasks = await res.json();
+      const list = Array.isArray(tasks) ? tasks : [];
+      const task = list.find(t => t.id === id);
+      if (task) showScheduleForm(task);
+    }
+
+    // =============================================
+    // === Voice Interaction ===
+    // =============================================
+    let voiceRecognition = null;
+    let isRecording = false;
+
+    function toggleVoiceInput() {
+      if (isRecording) {
+        stopVoiceInput();
+      } else {
+        startVoiceInput();
       }
+    }
 
-      function hideProps() {
-        document.getElementById('dag-props').style.display = 'none';
+    function startVoiceInput() {
+      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+      if (!SpeechRecognition) {
+        alert('Speech recognition is not supported in this browser. Try Chrome.');
+        return;
       }
+      voiceRecognition = new SpeechRecognition();
+      voiceRecognition.continuous = false;
+      voiceRecognition.interimResults = true;
+      voiceRecognition.lang = navigator.language || 'en-US';
+
+      voiceRecognition.onstart = () => {
+        isRecording = true;
+        const btn = document.getElementById('voice-btn');
+        btn.style.background = 'var(--red)';
+        btn.style.color = 'white';
+        btn.style.borderColor = 'var(--red)';
+        btn.textContent = '⏹';
+      };
 
-      // ── 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; },
+      voiceRecognition.onresult = (event) => {
+        let transcript = '';
+        for (let i = event.resultIndex; i < event.results.length; i++) {
+          transcript += event.results[i][0].transcript;
+        }
+        document.getElementById('chat-input').value = transcript;
       };
-    })();
-
-    // 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 {}
+
+      voiceRecognition.onend = () => {
+        isRecording = false;
+        const btn = document.getElementById('voice-btn');
+        btn.style.background = 'transparent';
+        btn.style.color = '';
+        btn.style.borderColor = 'var(--border)';
+        btn.textContent = '🎤';
+        // Auto-send if we got text
+        const input = document.getElementById('chat-input');
+        if (input.value.trim()) {
+          sendMessage();
+        }
+      };
+
+      voiceRecognition.onerror = (event) => {
+        console.error('Speech recognition error:', event.error);
+        isRecording = false;
+        const btn = document.getElementById('voice-btn');
+        btn.style.background = 'transparent';
+        btn.style.color = '';
+        btn.style.borderColor = 'var(--border)';
+        btn.textContent = '🎤';
+      };
+
+      voiceRecognition.start();
+    }
+
+    function stopVoiceInput() {
+      if (voiceRecognition) {
+        voiceRecognition.stop();
+      }
+    }
+
+    function speakText(text) {
+      if (!window.speechSynthesis) return;
+      window.speechSynthesis.cancel();
+      const utterance = new SpeechSynthesisUtterance(text);
+      utterance.lang = navigator.language || 'en-US';
+      utterance.rate = 1.0;
+      window.speechSynthesis.speak(utterance);
+    }
+
+    // Patch message rendering to add TTS button to assistant messages
+    const _origAppendMsg = typeof appendMessage === 'function' ? appendMessage : null;
+    if (typeof window._patchedMsgRender === 'undefined') {
+      window._patchedMsgRender = true;
+      const observer = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          for (const node of m.addedNodes) {
+            if (node.nodeType === 1 && node.classList?.contains('msg') && node.classList?.contains('assistant')) {
+              const bubble = node.querySelector('.msg-bubble');
+              if (bubble && !node.querySelector('.tts-btn')) {
+                const btn = document.createElement('button');
+                btn.className = 'tts-btn';
+                btn.textContent = '🔊';
+                btn.title = 'Read aloud';
+                btn.style.cssText = 'background:none;border:1px solid var(--border);border-radius:50%;padding:4px 6px;cursor:pointer;font-size:14px;margin-top:4px;color:var(--text-muted);';
+                btn.onclick = () => speakText(bubble.textContent);
+                node.appendChild(btn);
+              }
             }
           }
-          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();
+      });
+      const chatMsgs = document.getElementById('chat-messages');
+      if (chatMsgs) observer.observe(chatMsgs, { childList: true });
     }
-    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>';
+
+    // =============================================
+    // === Image Generation Config ===
+    // =============================================
+    async function saveImageGenConfig() {
+      const data = {
+        openaiApiKey: document.getElementById('ig-openai-key').value.trim(),
+        sdApiUrl: document.getElementById('ig-sd-url').value.trim(),
+        replicateApiKey: document.getElementById('ig-replicate-key').value.trim(),
+      };
+      try {
+        await fetch('/api/image-gen/config', { method: 'PUT', headers: {'Content-Type':'application/json'}, body: JSON.stringify(data) });
+        document.getElementById('ig-status').textContent = '✅ Configuration saved!';
+        document.getElementById('ig-status').style.color = 'var(--green)';
+      } catch(e) {
+        document.getElementById('ig-status').textContent = '❌ Failed: ' + e.message;
+        document.getElementById('ig-status').style.color = 'var(--red)';
+      }
     }
+
   </script>
 </body>
 </html>