opc-agent 4.2.0 → 4.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (119) hide show
  1. package/.opc/memory.db +0 -0
  2. package/COMPETITIVE-GAP.md +92 -92
  3. package/CONTRIBUTING.md +36 -36
  4. package/README.md +290 -290
  5. package/README.zh-CN.md +269 -269
  6. package/STUDIO-REWRITE-TASK.md +76 -0
  7. package/dist/channels/telegram.d.ts +5 -0
  8. package/dist/channels/telegram.d.ts.map +1 -1
  9. package/dist/channels/telegram.js +108 -0
  10. package/dist/channels/telegram.js.map +1 -1
  11. package/dist/channels/voice.d.ts +71 -97
  12. package/dist/channels/voice.d.ts.map +1 -1
  13. package/dist/channels/voice.js +369 -347
  14. package/dist/channels/voice.js.map +1 -1
  15. package/dist/channels/web.d.ts.map +1 -1
  16. package/dist/channels/web.js +8 -2
  17. package/dist/channels/web.js.map +1 -1
  18. package/dist/channels/wechat.js +6 -6
  19. package/dist/cli/chat.d.ts +4 -1
  20. package/dist/cli/chat.d.ts.map +1 -1
  21. package/dist/cli/chat.js +680 -73
  22. package/dist/cli/chat.js.map +1 -1
  23. package/dist/cli/setup.js +1 -1
  24. package/dist/cli/setup.js.map +1 -1
  25. package/dist/cli.js +373 -280
  26. package/dist/cli.js.map +1 -1
  27. package/dist/core/a2a-http.d.ts +75 -0
  28. package/dist/core/a2a-http.d.ts.map +1 -0
  29. package/dist/core/a2a-http.js +217 -0
  30. package/dist/core/a2a-http.js.map +1 -0
  31. package/dist/core/a2a.d.ts +2 -0
  32. package/dist/core/a2a.d.ts.map +1 -1
  33. package/dist/core/a2a.js +6 -1
  34. package/dist/core/a2a.js.map +1 -1
  35. package/dist/core/agent.d.ts +1 -0
  36. package/dist/core/agent.d.ts.map +1 -1
  37. package/dist/core/agent.js +3 -0
  38. package/dist/core/agent.js.map +1 -1
  39. package/dist/core/gateway-registry.d.ts +116 -0
  40. package/dist/core/gateway-registry.d.ts.map +1 -0
  41. package/dist/core/gateway-registry.js +280 -0
  42. package/dist/core/gateway-registry.js.map +1 -0
  43. package/dist/core/model-recommender.d.ts +40 -0
  44. package/dist/core/model-recommender.d.ts.map +1 -0
  45. package/dist/core/model-recommender.js +186 -0
  46. package/dist/core/model-recommender.js.map +1 -0
  47. package/dist/core/priority-queue.d.ts +100 -0
  48. package/dist/core/priority-queue.d.ts.map +1 -0
  49. package/dist/core/priority-queue.js +181 -0
  50. package/dist/core/priority-queue.js.map +1 -0
  51. package/dist/core/runtime.d.ts.map +1 -1
  52. package/dist/core/runtime.js +192 -22
  53. package/dist/core/runtime.js.map +1 -1
  54. package/dist/deploy/index.js +56 -56
  55. package/dist/doctor.d.ts +1 -0
  56. package/dist/doctor.d.ts.map +1 -1
  57. package/dist/doctor.js +155 -10
  58. package/dist/doctor.js.map +1 -1
  59. package/dist/index.d.ts +10 -3
  60. package/dist/index.d.ts.map +1 -1
  61. package/dist/index.js +24 -13
  62. package/dist/index.js.map +1 -1
  63. package/dist/memory/deepbrain.d.ts +1 -1
  64. package/dist/memory/deepbrain.d.ts.map +1 -1
  65. package/dist/memory/deepbrain.js +95 -4
  66. package/dist/memory/deepbrain.js.map +1 -1
  67. package/dist/memory/evolve-engine.d.ts +113 -0
  68. package/dist/memory/evolve-engine.d.ts.map +1 -0
  69. package/dist/memory/evolve-engine.js +549 -0
  70. package/dist/memory/evolve-engine.js.map +1 -0
  71. package/dist/memory/index.d.ts +2 -0
  72. package/dist/memory/index.d.ts.map +1 -1
  73. package/dist/memory/index.js +3 -1
  74. package/dist/memory/index.js.map +1 -1
  75. package/dist/memory/sqlite-store.d.ts +40 -0
  76. package/dist/memory/sqlite-store.d.ts.map +1 -0
  77. package/dist/memory/sqlite-store.js +269 -0
  78. package/dist/memory/sqlite-store.js.map +1 -0
  79. package/dist/memory/user-profiler.d.ts +8 -0
  80. package/dist/memory/user-profiler.d.ts.map +1 -1
  81. package/dist/memory/user-profiler.js +89 -0
  82. package/dist/memory/user-profiler.js.map +1 -1
  83. package/dist/scheduler/cron-engine.d.ts.map +1 -1
  84. package/dist/scheduler/cron-engine.js +3 -36
  85. package/dist/scheduler/cron-engine.js.map +1 -1
  86. package/dist/scheduler/proactive.d.ts +62 -0
  87. package/dist/scheduler/proactive.d.ts.map +1 -0
  88. package/dist/scheduler/proactive.js +185 -0
  89. package/dist/scheduler/proactive.js.map +1 -0
  90. package/dist/skills/auto-learn.d.ts.map +1 -1
  91. package/dist/skills/auto-learn.js +65 -11
  92. package/dist/skills/auto-learn.js.map +1 -1
  93. package/dist/skills/builtin/index.d.ts.map +1 -1
  94. package/dist/skills/builtin/index.js +163 -30
  95. package/dist/skills/builtin/index.js.map +1 -1
  96. package/dist/skills/types.d.ts +1 -1
  97. package/dist/skills/types.d.ts.map +1 -1
  98. package/dist/skills/types.js +1 -0
  99. package/dist/skills/types.js.map +1 -1
  100. package/dist/studio/server.d.ts +1 -0
  101. package/dist/studio/server.d.ts.map +1 -1
  102. package/dist/studio/server.js +148 -17
  103. package/dist/studio/server.js.map +1 -1
  104. package/dist/studio-ui/index.html +867 -2630
  105. package/dist/ui/components.js +105 -105
  106. package/examples/README.md +22 -22
  107. package/examples/basic-agent.ts +90 -90
  108. package/examples/brain-integration.ts +71 -71
  109. package/examples/multi-channel.ts +74 -74
  110. package/install.ps1 +127 -127
  111. package/install.sh +154 -154
  112. package/models.json +164 -164
  113. package/package.json +5 -2
  114. package/scripts/install.ps1 +31 -31
  115. package/scripts/install.sh +40 -40
  116. package/templates/ecommerce-assistant/README.md +45 -45
  117. package/templates/ecommerce-assistant/oad.yaml +47 -47
  118. package/templates/tech-support/README.md +43 -43
  119. package/templates/tech-support/oad.yaml +45 -45
package/dist/studio-ui/index.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en">
2
+ <html lang="zh">
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,2850 +7,1087 @@
7
7
  <style>
8
8
  * { margin: 0; padding: 0; box-sizing: border-box; }
9
9
  :root {
10
- --bg: #05051a; --bg-card: rgba(15,15,40,0.6); --bg-hover: rgba(124,92,255,0.08); --bg-input: rgba(15,15,40,0.8);
11
- --border: rgba(124,92,255,0.15); --text: #f0f0ff; --text-muted: #9090cc; --text-dim: #5555aa;
12
- --accent: #8b5cf6; --accent-hover: #7c3aed; --accent-light: rgba(139,92,246,0.15);
13
- --green: #10b981; --red: #f87171; --yellow: #fbbf24; --purple: #c084fc;
14
- --gradient: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 50%, #8b5cf6 100%);
15
- --gradient-btn: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 50%, #06b6d4 100%);
16
- --glow: 0 0 30px rgba(139,92,246,0.4), 0 0 60px rgba(6,182,212,0.2);
17
- --glow-sm: 0 0 15px rgba(139,92,246,0.25);
18
- --card-glow: 0 4px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
19
- --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
20
- --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
21
- --radius: 14px; --radius-lg: 24px;
22
- }
23
- body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 18px; line-height: 1.6; background-image: radial-gradient(ellipse at 20% 0%, rgba(139,92,246,0.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(6,182,212,0.08) 0%, transparent 50%), url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30h60M30 0v60' stroke='rgba(139,92,246,0.04)' stroke-width='0.5'/%3E%3C/svg%3E"); }
24
- a { color: var(--accent); text-decoration: none; }
10
+ --blue: #1a73e8; --blue-light: #e8f0fe; --blue-hover: #1557b0;
11
+ --green: #188038; --green-light: #e6f4ea;
12
+ --red: #d93025; --red-light: #fce8e6;
13
+ --yellow: #e37400; --yellow-light: #fef7e0;
14
+ --bg: #f8f9fa; --white: #fff; --border: #dadce0;
15
+ --text: #202124; --text-muted: #5f6368; --text-dim: #9aa0a6;
16
+ --radius: 12px; --radius-sm: 8px;
17
+ --shadow: 0 1px 3px rgba(0,0,0,0.08);
18
+ --shadow-hover: 0 4px 12px rgba(0,0,0,0.12);
19
+ --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
20
+ --mono: 'SF Mono', 'Fira Code', monospace;
21
+ }
22
+ body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.6; }
25
23
  button { font-family: var(--font); cursor: pointer; border: none; }
26
- input, select, textarea { font-family: var(--font); }
24
+ input, select, textarea { font-family: var(--font); font-size: 14px; }
27
25
 
28
26
  /* Layout */
29
27
  .app { display: flex; min-height: 100vh; }
30
- .sidebar {
31
- width: 270px; background: rgba(5,5,30,0.9); backdrop-filter: blur(30px); border-right: 1px solid var(--border);
32
- padding: 24px 16px; display: flex; flex-direction: column; position: fixed; height: 100vh; z-index: 100;
33
- background-image: linear-gradient(180deg, rgba(139,92,246,0.05) 0%, transparent 30%);
34
- }
35
- .sidebar-logo { font-size: 24px; font-weight: 700; padding: 12px 12px; margin-bottom: 28px; display: flex; align-items: center; gap: 10px; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.5px; }
36
- .sidebar-logo span { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
37
- .nav-item {
38
- display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px;
39
- cursor: pointer; color: var(--text-muted); transition: all 0.2s ease; font-size: 18px; margin-bottom: 4px; position: relative;
40
- }
41
- .nav-item:hover { background: var(--bg-hover); color: var(--text); transform: translateX(4px); }
42
- .nav-item.active { background: var(--accent-light); color: #fff; font-weight: 600; box-shadow: var(--glow-sm); border: 1px solid var(--border); }
43
- .nav-item .icon { width: 28px; text-align: center; font-size: 22px; }
44
- .main { flex: 1; margin-left: 270px; min-height: 100vh; }
45
-
46
- /* Mobile */
47
- .mobile-header { display: none; background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 12px 16px; position: sticky; top: 0; z-index: 50; }
48
- .mobile-header button { background: none; border: none; color: var(--text); font-size: 20px; }
49
- @media (max-width: 768px) {
50
- .sidebar { transform: translateX(-100%); transition: transform 0.2s; width: 260px; }
51
- .sidebar.open { transform: translateX(0); }
52
- .mobile-header { display: flex; align-items: center; justify-content: space-between; }
53
- .main { margin-left: 0; }
54
- .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; }
55
- .sidebar-overlay.show { display: block; }
56
- }
57
28
 
58
- /* Page container */
59
- .page { display: none; padding: 32px; max-width: 1200px; margin: 0 auto; }
60
- .page.active { display: block; }
61
- .page-title { font-size: 32px; font-weight: 700; margin-bottom: 8px; background: var(--gradient); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 3s linear infinite; letter-spacing: -0.5px; }
62
- @keyframes shimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
63
- .page-subtitle { color: var(--text-muted); font-size: 18px; margin-bottom: 24px; }
29
+ /* Sidebar */
30
+ .sidebar { width: 240px; background: var(--white); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; }
31
+ .sidebar-logo { padding: 20px 16px; font-size: 18px; font-weight: 700; color: var(--blue); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
32
+ .sidebar-section { padding: 8px; }
33
+ .sidebar-label { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 12px 4px; }
34
+ .sidebar-item { padding: 8px 12px; border-radius: var(--radius-sm); margin: 1px 0; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--text); transition: background 0.15s; }
35
+ .sidebar-item:hover { background: var(--bg); }
36
+ .sidebar-item.active { background: var(--blue-light); color: var(--blue); font-weight: 500; }
37
+ .sidebar-item.action { color: var(--blue); font-weight: 500; }
38
+ .sidebar-item .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-left: auto; flex-shrink: 0; }
39
+ .sidebar-divider { height: 1px; background: var(--border); margin: 4px 12px; }
40
+
41
+ /* Main */
42
+ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
43
+
44
+ /* Header */
45
+ .page-header { padding: 12px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; background: var(--white); font-weight: 600; flex-shrink: 0; }
46
+ .page-header .status { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
47
+ .page-header .status-text { font-size: 12px; color: var(--green); font-weight: 400; }
48
+ .page-header .settings-btn { margin-left: auto; font-size: 18px; cursor: pointer; padding: 4px; border-radius: 6px; background: none; color: var(--text-muted); }
49
+ .page-header .settings-btn:hover { background: var(--bg); }
50
+
51
+ /* Chat */
52
+ .chat-container { display: flex; flex: 1; min-height: 0; }
53
+ .chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
54
+ .chat-messages { flex: 1; overflow-y: auto; padding: 20px; }
55
+ .chat-msg { margin: 8px 0; display: flex; }
56
+ .chat-msg.user { justify-content: flex-end; }
57
+ .chat-msg .bubble { max-width: 75%; padding: 10px 16px; border-radius: 16px; line-height: 1.6; font-size: 14px; word-break: break-word; }
58
+ .chat-msg.agent .bubble { background: #f1f3f4; border-bottom-left-radius: 4px; }
59
+ .chat-msg.user .bubble { background: var(--blue); color: white; border-bottom-right-radius: 4px; }
60
+ .chat-msg .bubble pre { background: #1e1e1e; color: #d4d4d4; padding: 12px; border-radius: 8px; overflow-x: auto; margin: 8px 0; font-family: var(--mono); font-size: 13px; }
61
+ .chat-msg .bubble code { background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 4px; font-family: var(--mono); font-size: 13px; }
62
+ .chat-msg .bubble pre code { background: none; padding: 0; }
63
+ .chat-msg .bubble p { margin: 4px 0; }
64
+ .chat-msg .bubble ul, .chat-msg .bubble ol { margin: 4px 0 4px 20px; }
65
+ .chat-input-bar { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; background: var(--white); }
66
+ .chat-input-bar input { flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14px; outline: none; background: var(--bg); }
67
+ .chat-input-bar input:focus { border-color: var(--blue); background: var(--white); }
68
+ .chat-input-bar .send-btn { background: var(--blue); color: white; padding: 10px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; }
69
+ .chat-input-bar .send-btn:hover { background: var(--blue-hover); }
70
+ .chat-input-bar .send-btn:disabled { background: var(--border); cursor: not-allowed; }
71
+ .chat-input-bar .icon-btn { font-size: 18px; background: none; color: var(--text-muted); padding: 4px; cursor: pointer; }
72
+
73
+ /* Settings Panel */
74
+ .settings-panel { width: 380px; border-left: 1px solid var(--border); background: var(--bg); overflow-y: auto; display: none; flex-shrink: 0; }
75
+ .settings-panel.open { display: block; }
76
+ .settings-tabs { display: flex; gap: 6px; padding: 12px 16px; flex-wrap: wrap; }
77
+ .settings-tab { padding: 4px 12px; border-radius: 16px; font-size: 12px; cursor: pointer; border: 1px solid var(--border); background: var(--white); color: var(--text-muted); }
78
+ .settings-tab.active { background: var(--blue); color: white; border-color: var(--blue); }
79
+ .settings-content { padding: 16px; }
80
+ .form-group { margin-bottom: 14px; }
81
+ .form-label { font-weight: 600; font-size: 13px; margin-bottom: 4px; display: block; }
82
+ .form-input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 14px; background: var(--white); outline: none; }
83
+ .form-input:focus { border-color: var(--blue); }
84
+ .form-textarea { min-height: 80px; resize: vertical; }
85
+ .btn-primary { background: var(--blue); color: white; padding: 8px 20px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; }
86
+ .btn-primary:hover { background: var(--blue-hover); }
87
+ .btn-secondary { background: var(--white); color: var(--text); padding: 8px 20px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; border: 1px solid var(--border); }
88
+
89
+ /* Pages */
90
+ .page { display: none; flex: 1; flex-direction: column; overflow: hidden; }
91
+ .page.active { display: flex; }
92
+ .page-body { flex: 1; overflow-y: auto; padding: 24px; }
64
93
 
65
94
  /* Cards */
66
- .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: all 0.3s ease; backdrop-filter: blur(10px); box-shadow: var(--card-glow); position: relative; overflow: hidden; }
67
- .card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 2px; background: var(--gradient); transition: left 0.4s ease; }
68
- .card:hover { border-color: rgba(139,92,246,0.4); transform: translateY(-3px); box-shadow: 0 12px 50px rgba(0,0,0,0.5), var(--glow); }
69
- .card:hover::before { left: 0; }
70
- .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
71
-
72
- /* Buttons */
73
- .btn { padding: 10px 24px; border-radius: 10px; font-size: 18px; font-weight: 500; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; height: 44px; line-height: 22px; position: relative; overflow: hidden; }
74
- .btn-primary { background: var(--gradient-btn); background-size: 200% auto; color: white; box-shadow: var(--glow-sm); }
75
- .btn-primary:hover { background-position: right center; transform: translateY(-2px); box-shadow: var(--glow); }
76
- .btn-secondary { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); backdrop-filter: blur(10px); }
77
- .btn-secondary:hover { border-color: var(--accent); box-shadow: var(--glow-sm); transform: translateY(-1px); }
78
- .btn-danger { background: rgba(239,68,68,0.1); color: var(--red); }
79
- .btn-danger:hover { background: rgba(239,68,68,0.2); }
80
- .btn-sm { padding: 8px 16px; font-size: 18px; height: 38px; }
81
- .btn-lg { padding: 16px 32px; font-size: 24px; height: 56px; }
82
-
83
- /* Form elements */
84
- .input { width: 100%; padding: 10px 16px; height: 48px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 18px; outline: none; transition: all 0.2s ease; backdrop-filter: blur(5px); }
85
- .input:focus { border-color: var(--accent); box-shadow: var(--glow-sm); }
86
- .input::placeholder { color: var(--text-dim); }
87
- .label { display: block; font-size: 18px; font-weight: 500; color: var(--text-muted); margin-bottom: 8px; letter-spacing: 0.3px; }
88
- .form-group { margin-bottom: 20px; }
89
- 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; }
90
-
91
- /* Search bar */
92
- .search-bar { position: relative; margin-bottom: 20px; }
93
- .search-bar .input { padding-left: 40px; }
94
- .search-bar::before { content: '🔍'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; }
95
-
96
- /* Tags / Chips */
97
- .chip { display: inline-block; padding: 4px 12px; border-radius: 10px; font-size: 18px; background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; }
98
- .chip:hover, .chip.active { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
99
- .chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
100
-
101
- /* Template card */
102
- .tpl-card { cursor: pointer; }
103
- .tpl-card .tpl-icon { font-size: 40px; margin-bottom: 12px; }
104
- .tpl-card .tpl-name { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
105
- .tpl-card .tpl-desc { font-size: 18px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
106
- .tpl-card .tpl-tags { display: flex; gap: 6px; flex-wrap: wrap; }
107
- .tpl-card .tpl-tag { font-size: 18px; padding: 4px 10px; border-radius: 10px; background: var(--bg-hover); color: var(--text-dim); }
108
-
109
- /* Wizard */
110
- .wizard { max-width: 640px; margin: 0 auto; }
111
- .wizard-steps { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; }
112
- .wizard-step { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 18px; }
113
- .wizard-step.active { color: var(--accent); }
114
- .wizard-step.done { color: var(--green); }
115
- .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); }
116
- .wizard-step.active .step-num { border-color: var(--accent); background: var(--accent-light); }
117
- .wizard-step.done .step-num { border-color: var(--green); background: rgba(34,197,94,0.1); }
118
- .wizard-step .step-line { width: 40px; height: 2px; background: var(--border); }
119
- .wizard-panel { display: none; }
120
- .wizard-panel.active { display: block; }
121
-
122
- /* Agent card on dashboard */
123
- .agent-card { cursor: pointer; position: relative; }
124
- .agent-card .agent-icon { font-size: 36px; margin-bottom: 12px; }
125
- .agent-card .agent-name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
126
- .agent-card .agent-template { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
127
- .agent-card .agent-stats { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
128
- .agent-card .agent-actions { position: absolute; top: 16px; right: 16px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
129
- .agent-card:hover .agent-actions { opacity: 1; }
130
- .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); }
131
- .agent-card .agent-actions button:hover { color: var(--text); border-color: #444; }
132
-
133
- /* Chat UI */
134
- .chat-container { display: none; flex-direction: column; height: calc(100vh - 0px); }
135
- .chat-container.active { display: flex; }
136
- .chat-header { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; background: var(--bg-card); }
137
- .chat-header .chat-icon { font-size: 28px; }
138
- .chat-header .chat-name { font-size: 16px; font-weight: 600; }
139
- .chat-header .chat-status { font-size: 12px; color: var(--text-muted); }
140
- .chat-header .chat-back { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; margin-right: 4px; }
141
- .chat-messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
142
- .msg { max-width: 75%; display: flex; flex-direction: column; gap: 4px; }
143
- .msg.user { align-self: flex-end; }
144
- .msg.assistant { align-self: flex-start; }
145
- .msg-bubble { padding: 12px 16px; border-radius: 6px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
146
- .msg.user .msg-bubble { background: #238636; color: white; border-bottom-right-radius: 4px; }
147
- .msg.assistant .msg-bubble { background: var(--bg-card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
148
- .msg-time { font-size: 11px; color: var(--text-dim); }
149
- .msg.user .msg-time { text-align: right; }
150
- .typing-indicator { display: none; align-self: flex-start; }
151
- .typing-indicator.show { display: flex; }
152
- .typing-indicator .dots { display: flex; gap: 4px; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; }
153
- .typing-indicator .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); animation: bounce 1.4s infinite ease-in-out; }
154
- .typing-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
155
- .typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; }
156
- @keyframes bounce { 0%,80%,100% { transform: scale(0.6); } 40% { transform: scale(1); } }
157
- .chat-input-bar { padding: 16px 24px; border-top: 1px solid var(--border); background: var(--bg-card); display: flex; gap: 12px; align-items: center; }
158
- .chat-input-bar .input { flex: 1; border-radius: 6px; padding: 5px 12px; height: 32px; }
159
- .chat-input-bar .btn { border-radius: 6px; padding: 6px 16px; }
160
-
161
- /* Memory timeline */
162
- .timeline { position: relative; padding-left: 24px; }
163
- .timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--border); }
164
- .timeline-item { position: relative; margin-bottom: 24px; }
165
- .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); }
166
- .timeline-date { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
167
- .timeline-content { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
168
-
169
- /* Empty state */
170
- .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
171
- .empty-state .empty-icon { font-size: 48px; margin-bottom: 16px; }
172
- .empty-state .empty-title { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
173
- .empty-state .empty-desc { font-size: 14px; margin-bottom: 24px; }
174
-
175
- /* Confirm dialog */
176
- .dialog-overlay { display: none; position: fixed; inset: 0; background: rgba(5,5,26,0.85); backdrop-filter: blur(12px); z-index: 200; align-items: center; justify-content: center; }
177
- .dialog-overlay.show { display: flex; }
178
- .dialog { background: rgba(15,15,45,0.95); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; max-width: 420px; width: 90%; backdrop-filter: blur(30px); box-shadow: 0 25px 80px rgba(0,0,0,0.6), var(--glow); }
179
- .dialog-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
180
- .dialog-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; }
181
- .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
182
-
183
- /* Settings layout */
184
- .settings-layout { display: flex; gap: 0; min-height: calc(100vh - 64px); }
185
- .settings-nav { width: 200px; background: var(--bg-card); border-right: 1px solid var(--border); padding: 16px 8px; flex-shrink: 0; }
186
- .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; }
187
- .settings-nav-item:hover { background: var(--bg-hover); color: var(--text); }
188
- .settings-nav-item.active { background: var(--accent-light); color: var(--accent); font-weight: 500; }
189
- .settings-content { flex: 1; padding: 32px; max-width: 900px; }
190
- .settings-panel { display: none; }
191
- .settings-panel.active { display: block; }
192
- @media (max-width: 768px) {
193
- .settings-layout { flex-direction: column; }
194
- .settings-nav { width: 100%; display: flex; overflow-x: auto; padding: 8px; gap: 4px; border-right: none; border-bottom: 1px solid var(--border); }
195
- .settings-nav-item { white-space: nowrap; font-size: 13px; padding: 8px 12px; }
196
- .settings-content { padding: 16px; }
197
- }
198
-
199
- /* Tabs */
200
- .tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
201
- .tab { padding: 10px 20px; cursor: pointer; color: var(--text-muted); font-size: 14px; border-bottom: 2px solid transparent; transition: all 0.15s; }
202
- .tab:hover { color: var(--text); }
203
- .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
204
- .tab-panel { display: none; }
205
- .tab-panel.active { display: block; }
206
-
207
- /* Status dot */
208
- .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; animation: pulse 2s ease-in-out infinite; }
209
- .status-dot.green { background: var(--green); box-shadow: 0 0 12px var(--green), 0 0 4px var(--green); }
210
- .status-dot.red { background: var(--red); box-shadow: 0 0 12px var(--red), 0 0 4px var(--red); }
211
- .status-dot.yellow { background: var(--yellow); box-shadow: 0 0 12px var(--yellow), 0 0 4px var(--yellow); }
212
- @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } }
213
-
214
- /* Channel card */
215
- .channel-card { display: flex; align-items: center; gap: 16px; cursor: pointer; }
216
- .channel-card .ch-icon { font-size: 28px; }
217
- .channel-card .ch-info { flex: 1; }
218
- .channel-card .ch-name { font-size: 15px; font-weight: 600; }
219
- .channel-card .ch-status { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
220
-
221
- /* Stat card */
222
- .stat-card { text-align: center; }
223
- .stat-value { font-size: 28px; font-weight: 700; color: var(--accent); }
224
- .stat-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
225
-
226
- /* Log viewer */
227
- .log-viewer { background: #0d1117; 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; }
228
-
229
- /* Module iframe */
230
- .module-frame-container { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
231
- .module-frame-container iframe { width: 100%; height: 600px; border: none; background: var(--bg); }
232
- .module-frame-fallback { text-align: center; padding: 48px 24px; }
233
- .module-frame-fallback .mf-icon { font-size: 48px; margin-bottom: 16px; }
234
-
235
- /* Ollama tutorial */
236
- .tutorial-steps { counter-reset: step; }
237
- .tutorial-step { display: flex; gap: 16px; margin-bottom: 20px; align-items: flex-start; }
238
- .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; }
239
- .tutorial-step-content { flex: 1; }
240
- .tutorial-step-content h4 { font-size: 15px; margin-bottom: 4px; }
241
- .tutorial-step-content p { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
242
- .tutorial-step-content code { background: var(--bg-hover); padding: 2px 8px; border-radius: 4px; font-family: var(--mono); font-size: 13px; }
243
-
244
- /* Provider card */
245
- .provider-card { cursor: pointer; transition: all 0.15s; }
246
- .provider-card:hover { border-color: var(--accent); }
247
- .provider-card.configured { border-color: var(--green); }
248
- .provider-card .pv-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
249
- .provider-card .pv-name { font-size: 15px; font-weight: 600; }
250
- .provider-card .pv-status { font-size: 12px; }
251
-
252
- /* Bar chart */
253
- .bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding-top: 8px; }
254
- .bar-chart .bar { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 4px; transition: height 0.3s; position: relative; }
255
- .bar-chart .bar:hover { opacity: 0.8; }
256
- .bar-chart .bar-label { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-dim); white-space: nowrap; }
257
-
258
- /* Scrollbar */
259
- ::-webkit-scrollbar { width: 6px; }
260
- ::-webkit-scrollbar-track { background: transparent; }
261
- ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
262
-
263
- /* Settings layout */
264
- .settings-layout { display: flex; gap: 24px; align-items: flex-start; }
265
- .settings-subnav { width: 190px; flex-shrink: 0; }
266
- .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; }
267
- .snav-item:hover { background: var(--bg-hover); color: var(--text); }
268
- .snav-item.active { background: var(--accent-light); color: var(--accent); font-weight: 500; }
269
- .settings-content { flex: 1; min-width: 0; }
270
- .settings-section { display: none; }
271
- .settings-section.active { display: block; }
272
- .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
273
- .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; }
274
- .tab:hover { color: var(--text); }
275
- .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
276
- .tab-panel { display: none; }
277
- .tab-panel.active { display: block; }
278
- .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; flex-shrink: 0; }
279
- .status-dot.green { background: var(--green); }
280
- .status-dot.red { background: var(--red); }
281
- .status-dot.yellow { background: var(--yellow); animation: sdpulse 1.5s ease-in-out infinite; }
282
- @keyframes sdpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
283
- .channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
284
- .channel-card { cursor: pointer; text-align: center; padding: 20px 12px; }
285
- .channel-card:hover { border-color: var(--accent); }
286
- .channel-card.connected { border-color: var(--green); }
287
- .log-viewer { background: #0d1117; 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; }
288
- .bar-chart-wrap { display: flex; align-items: flex-end; gap: 6px; height: 80px; }
289
- .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; }
290
- .bar-fill { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; transition: height 0.4s ease; }
291
- .bar-lbl { font-size: 10px; color: var(--text-dim); }
292
- .iframe-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
293
- .iframe-wrap iframe { width: 100%; height: 580px; border: none; display: block; background: var(--bg); }
294
- .help-text { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
95
+ .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin: 12px 0; box-shadow: var(--shadow); }
96
+ .card:hover { box-shadow: var(--shadow-hover); }
97
+ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 16px 0; }
98
+ .card-title { font-weight: 600; margin-bottom: 4px; }
99
+ .card-desc { font-size: 13px; color: var(--text-muted); }
100
+
101
+ /* Tags */
102
+ .tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 12px; margin: 2px; }
103
+ .tag-blue { background: var(--blue-light); color: var(--blue); }
104
+ .tag-green { background: var(--green-light); color: var(--green); }
105
+ .tag-yellow { background: var(--yellow-light); color: var(--yellow); }
106
+ .tag-red { background: var(--red-light); color: var(--red); }
107
+
108
+ /* Stat Cards */
109
+ .stat-row { display: flex; gap: 12px; margin-bottom: 20px; }
110
+ .stat-card { flex: 1; border-radius: var(--radius-sm); padding: 16px; text-align: center; }
111
+ .stat-card .num { font-size: 28px; font-weight: 700; }
112
+ .stat-card .label { font-size: 12px; color: var(--text-muted); }
113
+
114
+ /* Provider Card */
115
+ .provider-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; }
116
+ .provider-card.verified { border-color: var(--green); background: #f6fef8; }
117
+ .provider-card .provider-name { font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
118
+ .provider-card .provider-status { font-size: 12px; margin-bottom: 6px; }
119
+ .provider-card .provider-models { font-size: 11px; color: var(--text-muted); }
120
+ .provider-card .key-row { margin-top: 8px; display: flex; gap: 4px; align-items: center; }
121
+ .provider-card .key-input { flex: 1; border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; font-size: 12px; background: var(--white); }
122
+ .provider-card .verify-btn { background: var(--blue); color: white; border-radius: 4px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
123
+
124
+ /* Breadcrumb */
125
+ .breadcrumb { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
126
+ .breadcrumb a { color: var(--blue); cursor: pointer; font-weight: 500; text-decoration: none; }
127
+ .breadcrumb .sep { margin: 0 6px; }
128
+
129
+ /* Skill Tags */
130
+ .skill-box { border-radius: var(--radius-sm); padding: 10px; margin: 8px 0; font-size: 13px; }
131
+ .skill-box.industry { background: #f8faff; border: 1px solid var(--blue-light); }
132
+ .skill-box.job { background: #f6fef8; border: 1px solid #c8e6c9; }
133
+ .skill-box.station { background: #fff8f0; border: 1px solid #ffe0b2; }
134
+ .skill-tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; margin: 2px; }
135
+
136
+ /* Upload Zone */
137
+ .upload-zone { border: 2px dashed var(--blue); border-radius: var(--radius); padding: 32px; text-align: center; background: #f8faff; margin-bottom: 20px; cursor: pointer; transition: background 0.15s; }
138
+ .upload-zone:hover { background: var(--blue-light); }
139
+ .upload-zone .icon { font-size: 36px; margin-bottom: 8px; }
140
+ .upload-zone .title { font-weight: 600; font-size: 16px; color: var(--blue); }
141
+ .upload-zone .desc { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
142
+
143
+ /* Search */
144
+ .search-input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14px; background: var(--bg); outline: none; margin-bottom: 16px; }
145
+ .search-input:focus { border-color: var(--blue); background: var(--white); }
146
+
147
+ /* Filter Tags */
148
+ .filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
149
+ .filter-tag { padding: 6px 14px; border-radius: 20px; font-size: 12px; cursor: pointer; border: 1px solid var(--border); background: var(--white); color: var(--text-muted); }
150
+ .filter-tag.active { background: var(--blue); color: white; border-color: var(--blue); }
151
+
152
+ /* Knowledge Layer Cards */
153
+ .knowledge-card { border-left: 4px solid; border-radius: var(--radius); padding: 16px; margin: 8px 0; background: var(--white); box-shadow: var(--shadow); }
154
+ .knowledge-card.industry { border-left-color: var(--blue); }
155
+ .knowledge-card.job { border-left-color: var(--green); }
156
+ .knowledge-card.station { border-left-color: var(--yellow); }
157
+
158
+ /* Toast */
159
+ .toast { position: fixed; bottom: 20px; right: 20px; background: var(--text); color: white; padding: 12px 20px; border-radius: var(--radius-sm); font-size: 14px; z-index: 999; display: none; box-shadow: var(--shadow-hover); }
160
+
161
+ /* Typing indicator */
162
+ .typing { display: inline-flex; gap: 4px; padding: 10px 16px; background: #f1f3f4; border-radius: 16px; border-bottom-left-radius: 4px; }
163
+ .typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); animation: typing 1.2s infinite; }
164
+ .typing span:nth-child(2) { animation-delay: 0.2s; }
165
+ .typing span:nth-child(3) { animation-delay: 0.4s; }
166
+ @keyframes typing { 0%,60%,100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
167
+
168
+ /* Responsive */
295
169
  @media (max-width: 768px) {
296
- .settings-layout { flex-direction: column; }
297
- .settings-subnav { width: 100%; display: flex; flex-wrap: wrap; gap: 4px; }
298
- .snav-item { padding: 8px 10px; font-size: 12px; flex-direction: column; gap: 4px; text-align: center; min-width: 70px; }
170
+ .sidebar { width: 60px; }
171
+ .sidebar-label, .sidebar-item span:not(.status-dot) { display: none; }
172
+ .settings-panel { width: 100%; position: absolute; right: 0; top: 0; bottom: 0; z-index: 10; }
299
173
  }
300
-
301
- /* Sidebar restructure */
302
- .sidebar-section-title { font-size: 18px; letter-spacing: 0.3px; color: var(--text-dim); margin: 24px 16px 10px; font-weight: 600; }
303
- .sidebar-divider { height: 1px; background: var(--border); margin: 8px 12px; }
304
- .pattern-card.active { border-color: var(--accent); box-shadow: var(--glow-sm); }
305
- .agent-list-container { overflow-y: auto; flex: 1; min-height: 0; }
306
- .agent-list-item {
307
- display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px;
308
- cursor: pointer; color: var(--text-muted); transition: all 0.2s ease; font-size: 18px; margin-bottom: 2px; position: relative;
309
- }
310
- .agent-list-item:hover { background: var(--bg-hover); color: var(--text); transform: translateX(4px); }
311
- .agent-list-item.active { background: var(--accent-light); color: #fff; font-weight: 600; box-shadow: var(--glow-sm); border: 1px solid var(--border); }
312
- .agent-list-item .agent-icon { width: 24px; text-align: center; font-size: 16px; }
313
- .agent-list-item .agent-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
314
- .agent-list-item .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
315
- .agent-list-item .status-dot.online { background: var(--green); box-shadow: 0 0 6px var(--green); }
316
- .agent-list-item .status-dot.offline { background: var(--text-dim); }
317
- .agent-list-item .status-dot.error { background: var(--red); box-shadow: 0 0 6px var(--red); }
318
- .sidebar-bottom { margin-top: auto; flex-shrink: 0; }
319
- .sidebar-nav { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
320
-
321
- /* Agent Detail Page */
322
- .agent-detail-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 28px; border-bottom: 1px solid var(--border); }
323
- .agent-detail-info { display: flex; align-items: center; gap: 12px; }
324
- .agent-detail-icon { font-size: 28px; }
325
- .agent-detail-name { font-size: 20px; font-weight: 700; margin: 0; }
326
- .agent-detail-toggle { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; width: 40px; height: 40px; font-size: 18px; cursor: pointer; color: var(--text-muted); transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
327
- .agent-detail-toggle:hover { background: var(--bg-hover); color: var(--text); border-color: var(--accent); }
328
- .agent-detail-toggle.active { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
329
- #page-agent-detail { display: none; flex-direction: column; height: 100vh; }
330
- #page-agent-detail.active { display: flex; }
331
- .agent-chat-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
332
- .agent-chat-messages { flex: 1; overflow-y: auto; padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
333
- .agent-chat-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; color: var(--text-dim); }
334
- .agent-chat-input-bar { display: flex; gap: 12px; padding: 16px 28px; border-top: 1px solid var(--border); background: rgba(5,5,30,0.5); backdrop-filter: blur(10px); }
335
- .agent-chat-input { flex: 1; background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; color: var(--text); font-size: 14px; resize: none; outline: none; font-family: var(--font); max-height: 120px; }
336
- .agent-chat-input:focus { border-color: var(--accent); }
337
- .agent-chat-send { padding: 12px 20px; border-radius: 12px; font-weight: 600; flex-shrink: 0; }
338
- .agent-chat-msg { max-width: 75%; padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.6; word-break: break-word; }
339
- .agent-chat-msg.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
340
- .agent-chat-msg.assistant { align-self: flex-start; background: var(--bg-card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
341
- .agent-settings-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
342
- .agent-settings-tabs { display: flex; gap: 4px; padding: 16px 28px 0; border-bottom: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; }
343
- .agent-tab { padding: 10px 16px; border-radius: 10px 10px 0 0; cursor: pointer; color: var(--text-muted); font-size: 13px; white-space: nowrap; transition: all 0.15s; border-bottom: 2px solid transparent; }
344
- .agent-tab:hover { color: var(--text); background: var(--bg-hover); }
345
- .agent-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
346
- .agent-settings-content { flex: 1; overflow-y: auto; padding: 24px 28px; }
347
- .agent-tab-panel { display: none; }
348
- .agent-tab-panel.active { display: block; }
349
- .agent-tab-panel h3 { margin-bottom: 12px; font-size: 18px; }
350
174
  </style>
351
175
  </head>
352
176
  <body>
353
177
  <div class="app">
354
178
  <!-- Sidebar -->
355
- <div class="sidebar-overlay" onclick="toggleSidebar(false)"></div>
356
- <nav class="sidebar">
357
- <div class="sidebar-logo" onclick="navigate('dashboard')" style="cursor:pointer;">⚡ <span>OPC Studio</span></div>
358
- <div class="sidebar-nav">
359
- <!-- Section 1: My Agents -->
360
- <div class="sidebar-section-title">🤖 我的 Agent</div>
361
- <div class="agent-list-container" id="sidebar-agent-list">
362
- <div style="padding: 12px 16px; color: var(--text-dim); font-size: 13px;">加载中...</div>
363
- </div>
179
+ <nav class="sidebar" id="sidebar">
180
+ <div class="sidebar-logo">ΓÜí OPC Studio</div>
364
181
 
365
- <!-- Section 2: Collaboration Groups -->
366
- <div class="sidebar-divider"></div>
367
- <div class="sidebar-section-title">👥 协作群组</div>
368
- <div class="agent-list-container" id="groups-list" style="max-height:120px;">
369
- <!-- dynamically loaded -->
370
- </div>
371
- <div class="nav-item" data-page="create-group" onclick="navigate('create-group')">
372
- <span class="icon">➕</span> 新建群组
182
+ <div class="sidebar-section">
183
+ <div class="sidebar-item active" onclick="navigate('assistant')" id="nav-assistant">
184
+ <span>🧑‍💻</span><span>OPC 助手</span>
185
+ <span class="status-dot"></span>
373
186
  </div>
187
+ </div>
374
188
 
375
- <!-- Section 3: Create Agent -->
376
- <div class="sidebar-divider"></div>
377
- <div class="nav-item" data-page="create" onclick="navigate('create')">
378
- <span class="icon">➕</span> 新建 Agent
379
- </div>
189
+ <div class="sidebar-divider"></div>
380
190
 
381
- <!-- Section 3: Global Config -->
382
- <div class="sidebar-bottom">
383
- <div class="sidebar-divider"></div>
384
- <div class="sidebar-section-title">⚙️ 全局配置</div>
385
- <div class="nav-item" data-page="global-runtime" onclick="navigate('global-runtime')">
386
- <span class="icon">🚀</span> Runtime
387
- </div>
388
- <div class="nav-item" data-page="global-models" onclick="navigate('global-models')">
389
- <span class="icon">🧠</span> Models
390
- </div>
391
- <div class="nav-item" data-page="global-memory" onclick="navigate('global-memory')">
392
- <span class="icon">💾</span> Memory
393
- </div>
394
- <div class="nav-item" data-page="global-templates" onclick="navigate('global-templates')">
395
- <span class="icon">📋</span> Templates
396
- </div>
397
- </div>
191
+ <div class="sidebar-section">
192
+ <div class="sidebar-label">🤖 OPC Agent</div>
193
+ <div id="agent-list"></div>
194
+ <div class="sidebar-item action" onclick="navigate('new-agent')"><span>Γ₧ò</span><span>µû░σ╗║ Agent</span></div>
195
+ <div class="sidebar-item action" onclick="showToast('群组功能即将推出')"><span>👥</span><span>新建群组</span></div>
196
+ <div class="sidebar-item" onclick="navigate('channels')"><span>📡</span><span>渠道配置</span></div>
398
197
  </div>
399
- <div style="padding: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim);">
400
- OPC Studio v2.0
198
+
199
+ <div class="sidebar-divider"></div>
200
+
201
+ <div class="sidebar-section">
202
+ <div class="sidebar-label">🧩 AgentKits</div>
203
+ <div class="sidebar-item" onclick="navigate('models')" id="nav-models"><span>🤖</span><span>模型配置</span></div>
401
204
  </div>
402
- </nav>
403
205
 
404
- <!-- Mobile Header -->
405
- <div class="mobile-header">
406
- <button onclick="toggleSidebar(true)">☰</button>
407
- <span style="font-weight:600;">⚡ OPC Studio</span>
408
- <span></span>
409
- </div>
206
+ <div class="sidebar-divider"></div>
410
207
 
411
- <!-- Main Content -->
412
- <div class="main">
413
- <!-- Dashboard Page -->
414
- <div class="page active" id="page-dashboard">
415
- <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:24px;">
416
- <div>
417
- <h1 class="page-title">My Agents</h1>
418
- <p class="page-subtitle">Manage and chat with your AI agents</p>
419
- </div>
420
- <button class="btn btn-primary" onclick="navigate('create')">✨ Create New Agent</button>
421
- </div>
422
- <!-- Health Status Section -->
423
- <div id="health-section" style="margin-bottom:24px;"></div>
424
- <div id="agents-list" class="card-grid"></div>
425
- <div id="agents-empty" class="empty-state" style="display:none;">
426
- <div class="empty-icon">🤖</div>
427
- <div class="empty-title">No agents yet</div>
428
- <div class="empty-desc">Create your first AI agent in just 3 steps — no coding required!</div>
429
- <button class="btn btn-primary btn-lg" onclick="navigate('create')">✨ Create My First Agent</button>
430
- </div>
208
+ <div class="sidebar-section">
209
+ <div class="sidebar-label">🧠 DeepBrain</div>
210
+ <div class="sidebar-item" onclick="navigate('knowledge')" id="nav-knowledge"><span>📖</span><span>知识库浏览</span></div>
431
211
  </div>
432
212
 
433
- <!-- Agent Detail Page -->
434
- <div class="page" id="page-agent-detail">
435
- <div class="agent-detail-header">
436
- <div class="agent-detail-info">
437
- <span class="agent-detail-icon" id="agent-detail-icon">🤖</span>
438
- <h1 class="agent-detail-name" id="agent-detail-name">Agent</h1>
439
- <span class="status-dot online" id="agent-detail-status"></span>
440
- </div>
441
- <button class="agent-detail-toggle" id="agent-detail-toggle" onclick="toggleAgentSettings()">⚙️</button>
442
- </div>
213
+ <div class="sidebar-divider"></div>
443
214
 
444
- <!-- Chat View (default) -->
445
- <div class="agent-chat-view" id="agent-chat-view">
446
- <div class="agent-chat-messages" id="agent-chat-messages">
447
- <div class="agent-chat-welcome" id="agent-chat-welcome">
448
- <div style="font-size: 48px; margin-bottom: 16px;">💬</div>
449
- <div style="font-size: 18px; font-weight: 600; margin-bottom: 8px;">开始对话</div>
450
- <div style="color: var(--text-muted); font-size: 14px;">向你的 Agent 发送第一条消息</div>
451
- </div>
452
- </div>
453
- <div class="agent-chat-input-bar">
454
- <textarea class="agent-chat-input" id="agent-chat-input" placeholder="输入消息..." rows="1" onkeydown="handleAgentChatKey(event)"></textarea>
455
- <button class="btn btn-primary agent-chat-send" onclick="sendAgentChat()">发送</button>
456
- </div>
457
- </div>
215
+ <div class="sidebar-section">
216
+ <div class="sidebar-label">🖥️ Workstation</div>
217
+ <div class="sidebar-item" onclick="navigate('workstation')" id="nav-workstation"><span>📋</span><span>岗位模板库</span></div>
218
+ </div>
219
+ </nav>
458
220
 
459
- <!-- Settings View (hidden) -->
460
- <div class="agent-settings-view" id="agent-settings-view" style="display:none;">
461
- <div class="agent-settings-tabs">
462
- <div class="agent-tab active" data-atab="role" onclick="switchAgentTab('role')">👤 角色</div>
463
- <div class="agent-tab" data-atab="models" onclick="switchAgentTab('models')">🤖 模型</div>
464
- <div class="agent-tab" data-atab="channels" onclick="switchAgentTab('channels')">📡 渠道</div>
465
- <div class="agent-tab" data-atab="memory" onclick="switchAgentTab('memory')">🧠 记忆</div>
466
- <div class="agent-tab" data-atab="skills" onclick="switchAgentTab('skills')">🧩 技能</div>
467
- <div class="agent-tab" data-atab="schedules" onclick="switchAgentTab('schedules')">⏰ 定时</div>
468
- <div class="agent-tab" data-atab="usage" onclick="switchAgentTab('usage')">📊 统计</div>
469
- </div>
470
- <div class="agent-settings-content" id="agent-settings-content">
471
- <div class="agent-tab-panel active" id="atab-role">
472
- <h3>角色配置</h3>
473
- <p style="color:var(--text-muted)">Agent 角色和人设配置（即将上线）</p>
474
- </div>
475
- <div class="agent-tab-panel" id="atab-models">
476
- <h3>模型配置</h3>
477
- <p style="color:var(--text-muted)">Agent 使用的模型配置（即将上线）</p>
478
- </div>
479
- <div class="agent-tab-panel" id="atab-channels">
480
- <h3>渠道配置</h3>
481
- <p style="color:var(--text-muted)">Agent 接入的渠道配置（即将上线）</p>
482
- </div>
483
- <div class="agent-tab-panel" id="atab-memory">
484
- <h3>记忆管理</h3>
485
- <p style="color:var(--text-muted)">Agent 记忆和知识库（即将上线）</p>
486
- </div>
487
- <div class="agent-tab-panel" id="atab-skills">
488
- <h3>技能配置</h3>
489
- <p style="color:var(--text-muted)">Agent 已安装的技能（即将上线）</p>
490
- </div>
491
- <div class="agent-tab-panel" id="atab-schedules">
492
- <h3>定时任务</h3>
493
- <p style="color:var(--text-muted)">Agent 定时任务配置（即将上线）</p>
221
+ <!-- Main Content -->
222
+ <div class="main">
223
+
224
+ <!-- Page: OPC Assistant Chat -->
225
+ <div class="page active" id="page-assistant">
226
+ <div class="page-header">
227
+ <span>🧑‍💻</span> OPC 助手
228
+ <span class="status"></span>
229
+ <span class="status-text">在线</span>
230
+ </div>
231
+ <div class="chat-container">
232
+ <div class="chat-main">
233
+ <div class="chat-messages" id="assistant-messages">
234
+ <div class="chat-msg agent">
235
+ <div class="bubble">
236
+ 👋 你好！我是 OPC 助手。<br><br>
237
+ 我可以帮你：<br>
238
+ • 直接聊天<br>
239
+ • 创建 AI Agent<br>
240
+ • 配置渠道（Telegram / 微信 / 飞书）<br>
241
+ • 回答关于 OPC 的任何问题<br><br>
242
+ 试试跟我说点什么吧！
243
+ </div>
244
+ </div>
494
245
  </div>
495
- <div class="agent-tab-panel" id="atab-usage">
496
- <h3>用量统计</h3>
497
- <p style="color:var(--text-muted)">Agent 使用量和成本（即将上线）</p>
246
+ <div class="chat-input-bar">
247
+ <button class="icon-btn">📎</button>
248
+ <button class="icon-btn">🎤</button>
249
+ <input type="text" id="assistant-input" placeholder="输入消息..." onkeydown="if(event.key==='Enter')sendAssistantMsg()">
250
+ <button class="send-btn" onclick="sendAssistantMsg()">发送</button>
498
251
  </div>
499
252
  </div>
500
253
  </div>
501
254
  </div>
502
255
 
503
- <!-- Templates Page -->
504
- <!-- Create Group Page -->
505
- <div class="page" id="page-create-group">
506
- <h1 class="page-title">新建协作群组</h1>
507
- <p class="page-subtitle">选择协作模式，拉入 Agent，开始多角色协作</p>
508
- <div class="card" style="max-width:600px;">
509
- <div class="label">群组名称</div>
510
- <input class="input" id="group-name" placeholder="例如：产品讨论组">
511
- <div class="label" style="margin-top:16px;">协作模式</div>
512
- <div class="card-grid" style="grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:16px; margin-bottom:16px;">
513
- <div class="card pattern-card active" onclick="selectPattern('debate')" id="pat-debate" style="padding:20px;cursor:pointer;">
514
- <div style="font-size:28px;margin-bottom:8px;">⚔️</div>
515
- <div style="font-size:15px;font-weight:700;margin-bottom:6px;">Debate 辩论模式</div>
516
- <div style="font-size:13px;color:var(--text-muted);line-height:1.5;margin-bottom:10px;">多个 Agent 围绕一个话题正反方辩论，最终由裁判 Agent 综合各方观点给出结论。</div>
517
- <div style="font-size:12px;color:var(--accent);">💡 适合：决策分析、方案对比、风险评估</div>
518
- <div style="font-size:12px;color:var(--green);margin-top:4px;">📤 产出：多角度分析报告 + 最终建议</div>
519
- </div>
520
- <div class="card pattern-card" onclick="selectPattern('voting')" id="pat-voting" style="padding:20px;cursor:pointer;">
521
- <div style="font-size:28px;margin-bottom:8px;">🗳️</div>
522
- <div style="font-size:15px;font-weight:700;margin-bottom:6px;">Voting 投票模式</div>
523
- <div style="font-size:13px;color:var(--text-muted);line-height:1.5;margin-bottom:10px;">每个 Agent 独立给出判断和投票，汇总统计后输出多数意见和少数意见。</div>
524
- <div style="font-size:12px;color:var(--accent);">💡 适合：质量评审、内容审核、多人打分</div>
525
- <div style="font-size:12px;color:var(--green);margin-top:4px;">📤 产出：投票结果 + 各方理由汇总</div>
526
- </div>
527
- <div class="card pattern-card" onclick="selectPattern('pipeline')" id="pat-pipeline" style="padding:20px;cursor:pointer;">
528
- <div style="font-size:28px;margin-bottom:8px;">🔗</div>
529
- <div style="font-size:15px;font-weight:700;margin-bottom:6px;">Pipeline 流水线模式</div>
530
- <div style="font-size:13px;color:var(--text-muted);line-height:1.5;margin-bottom:10px;">Agent A 的输出自动传给 Agent B 作为输入，逐步处理和加工，像工厂流水线。</div>
531
- <div style="font-size:12px;color:var(--accent);">💡 适合：内容创作、数据处理、翻译校对</div>
532
- <div style="font-size:12px;color:var(--green);margin-top:4px;">📤 产出：经过多轮加工的最终成果</div>
256
+ <!-- Page: Agent Chat -->
257
+ <div class="page" id="page-agent-chat">
258
+ <div class="page-header">
259
+ <span id="agent-chat-icon">🤖</span>
260
+ <span id="agent-chat-name">Agent</span>
261
+ <span class="status"></span>
262
+ <span class="status-text">在线</span>
263
+ <button class="settings-btn" onclick="toggleSettings()">⚙️</button>
264
+ </div>
265
+ <div class="chat-container">
266
+ <div class="chat-main">
267
+ <div class="chat-messages" id="agent-messages"></div>
268
+ <div class="chat-input-bar">
269
+ <button class="icon-btn">📎</button>
270
+ <button class="icon-btn">🎤</button>
271
+ <input type="text" id="agent-input" placeholder="输入消息..." onkeydown="if(event.key==='Enter')sendAgentMsg()">
272
+ <button class="send-btn" onclick="sendAgentMsg()">发送</button>
533
273
  </div>
534
- <div class="card pattern-card" onclick="selectPattern('hierarchy')" id="pat-hierarchy" style="padding:20px;cursor:pointer;">
535
- <div style="font-size:28px;margin-bottom:8px;">🏛️</div>
536
- <div style="font-size:15px;font-weight:700;margin-bottom:6px;">Hierarchy 层级模式</div>
537
- <div style="font-size:13px;color:var(--text-muted);line-height:1.5;margin-bottom:10px;">一个主管 Agent 拆解任务分配给下属 Agent，收集结果后汇总报告。</div>
538
- <div style="font-size:12px;color:var(--accent);">💡 适合：项目管理、调研收集、并行执行</div>
539
- <div style="font-size:12px;color:var(--green);margin-top:4px;">📤 产出：汇总报告 + 各子任务结果</div>
274
+ </div>
275
+ <div class="settings-panel" id="agent-settings">
276
+ <div class="settings-tabs" id="settings-tabs">
277
+ <div class="settings-tab active" onclick="switchSettingsTab('role')">角色</div>
278
+ <div class="settings-tab" onclick="switchSettingsTab('model')">模型</div>
279
+ <div class="settings-tab" onclick="switchSettingsTab('channel')">渠道</div>
280
+ <div class="settings-tab" onclick="switchSettingsTab('memory')">记忆</div>
281
+ <div class="settings-tab" onclick="switchSettingsTab('skills')">技能</div>
540
282
  </div>
541
- <div class="card pattern-card" onclick="selectPattern('shared-memory')" id="pat-shared-memory" style="padding:20px;cursor:pointer;">
542
- <div style="font-size:28px;margin-bottom:8px;">🧠</div>
543
- <div style="font-size:15px;font-weight:700;margin-bottom:6px;">Shared Memory 共享记忆模式</div>
544
- <div style="font-size:13px;color:var(--text-muted);line-height:1.5;margin-bottom:10px;">所有 Agent 共享一个知识空间，各自贡献信息，互相读取和补充，持续积累。</div>
545
- <div style="font-size:12px;color:var(--accent);">💡 适合：知识构建、团队学习、长期项目</div>
546
- <div style="font-size:12px;color:var(--green);margin-top:4px;">📤 产出：持续进化的共享知识库</div>
283
+ <div class="settings-content" id="settings-content">
284
+ <!-- Filled by JS -->
547
285
  </div>
548
286
  </div>
549
- <div class="label">选择 Agent 成员</div>
550
- <div id="group-agent-select" style="margin-bottom:16px;">
551
- <p style="color:var(--text-muted);font-size:13px;">请先创建 Agent，再拉入群组</p>
552
- </div>
553
- <button class="btn btn-primary" onclick="createGroup()">✨ 创建群组</button>
554
287
  </div>
555
288
  </div>
556
289
 
557
- <div class="page" id="page-templates">
558
- <h1 class="page-title">Template Market</h1>
559
- <p class="page-subtitle">Browse 100+ ready-to-use agent templates across 19 industries</p>
560
- <div class="search-bar">
561
- <input class="input" id="tpl-search" placeholder="Search templates..." oninput="filterTemplates()">
562
- </div>
563
- <div class="chip-group" id="industry-chips"></div>
564
- <div class="card-grid" id="templates-grid"></div>
565
- </div>
566
-
567
- <!-- Skills Marketplace Page -->
568
- <div class="page" id="page-skills">
569
- <h1 class="page-title">🧩 Skill Market</h1>
570
- <p class="page-subtitle">One-click install new capabilities for your agent — no coding required</p>
571
- <div class="search-bar" style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;">
572
- <input class="input" id="skills-search" placeholder="Search skills..." oninput="filterSkills()" style="flex:1;min-width:200px;">
573
- <div class="chip-group" id="skill-category-chips" style="margin:0;"></div>
290
+ <!-- Page: Models Config (AgentKits) -->
291
+ <div class="page" id="page-models">
292
+ <div class="page-header"><span>🧩</span> AgentKits — 模型配置</div>
293
+ <div class="page-body" id="models-body">
294
+ <div style="background:var(--yellow-light);border:1px solid var(--yellow);border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:16px;font-size:14px;">
295
+ <strong style="color:var(--yellow);">⚠️ 规则：</strong>没有配通 API Key 的 Provider，其模型不会出现在 Agent 的模型选择列表中。
296
+ </div>
297
+ <div id="models-content">加载中...</div>
574
298
  </div>
575
- <div class="card-grid" id="skills-grid" style="margin-top:16px;"></div>
576
299
  </div>
577
300
 
578
- <!-- Create Wizard Page -->
579
- <div class="page" id="page-create">
580
- <div class="wizard">
581
- <div class="wizard-steps">
582
- <div class="wizard-step active" id="ws-1"><div class="step-num">1</div><span>Choose Template</span></div>
583
- <div class="wizard-step" id="ws-2"><div class="step-line"></div><div class="step-num">2</div><span>Configure</span></div>
584
- <div class="wizard-step" id="ws-3"><div class="step-line"></div><div class="step-num">3</div><span>Confirm</span></div>
301
+ <!-- Page: Knowledge (DeepBrain) -->
302
+ <div class="page" id="page-knowledge">
303
+ <div class="page-header"><span>🧠</span> DeepBrain — 知识库</div>
304
+ <div class="page-body">
305
+ <div class="upload-zone" onclick="document.getElementById('file-upload').click()">
306
+ <div class="icon">📂</div>
307
+ <div class="title">拖入文档，自动分类</div>
308
+ <div class="desc">支持 PDF · Word · TXT · Markdown · 网页链接</div>
309
+ <div style="font-size:12px;color:var(--text-dim);margin-top:8px;">DeepBrain 自动分析内容，归入行业 / 岗位 / 工位层</div>
310
+ <input type="file" id="file-upload" style="display:none" multiple accept=".pdf,.doc,.docx,.txt,.md">
585
311
  </div>
586
312
 
587
- <!-- Step 1: Choose Template -->
588
- <div class="wizard-panel active" id="wp-1">
589
- <h2 style="font-size:20px;margin-bottom:8px;">Choose a Template</h2>
590
- <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>
591
- <div class="search-bar">
592
- <input class="input" id="wizard-tpl-search" placeholder="Search templates..." oninput="filterWizardTemplates()">
593
- </div>
594
- <div class="chip-group" id="wizard-industry-chips"></div>
595
- <div class="card-grid" id="wizard-tpl-grid" style="max-height:400px;overflow-y:auto;"></div>
313
+ <div class="stat-row">
314
+ <div class="stat-card" style="background:var(--blue-light);"><div class="num" style="color:var(--blue);" id="kb-total">0</div><div class="label">知识条目</div></div>
315
+ <div class="stat-card" style="background:var(--green-light);"><div class="num" style="color:var(--green);" id="kb-evolve">0</div><div class="label">进化次数</div></div>
316
+ <div class="stat-card" style="background:var(--yellow-light);"><div class="num" style="color:var(--yellow);" id="kb-docs">0</div><div class="label">文档已导入</div></div>
596
317
  </div>
597
318
 
598
- <!-- Step 2: Configure -->
599
- <div class="wizard-panel" id="wp-2">
600
- <h2 style="font-size:20px;margin-bottom:8px;">Configure Your Agent</h2>
601
- <p style="color:var(--text-muted);font-size:14px;margin-bottom:24px;">Give your agent a name and tell it about your business.</p>
602
- <div class="form-group">
603
- <label class="label">Agent Name *</label>
604
- <input class="input" id="agent-name" placeholder="e.g. My Sales Coach">
605
- </div>
606
- <div class="form-group">
607
- <label class="label">Company / Business Description</label>
608
- <textarea class="input" id="agent-desc" rows="3" placeholder="Brief description of your business so the agent can better help you..."></textarea>
609
- </div>
610
- <div class="form-group">
611
- <label class="label">AI Model</label>
612
- <select class="input" id="agent-model">
613
- <option value="gpt-4o-mini">GPT-4o Mini (Fast & Affordable) ⭐ Recommended</option>
614
- <option value="gpt-4o">GPT-4o (Most Capable)</option>
615
- <option value="claude-sonnet-4">Claude Sonnet (Balanced)</option>
616
- <option value="claude-haiku">Claude Haiku (Fast)</option>
617
- <option value="gemini-2.0-flash">Gemini 2.0 Flash (Google)</option>
618
- <option value="deepseek-v3">DeepSeek V3 (Open Source)</option>
619
- </select>
620
- </div>
621
- <div class="form-group">
622
- <label class="label">Language Preference</label>
623
- <select class="input" id="agent-lang">
624
- <option value="en">English</option>
625
- <option value="zh">中文</option>
626
- <option value="auto">Auto-detect</option>
627
- </select>
319
+ <input type="text" class="search-input" placeholder="🔍 搜索知识..." oninput="searchKnowledge(this.value)">
320
+
321
+ <div id="knowledge-layers">
322
+ <div class="knowledge-card industry">
323
+ <div style="font-weight:600;margin-bottom:4px;">🏢 行业知识</div>
324
+ <div style="font-size:13px;color:var(--text-muted);">加载中...</div>
628
325
  </div>
629
- <div style="display:flex;gap:12px;justify-content:flex-end;margin-top:24px;">
630
- <button class="btn btn-secondary" onclick="wizardBack()">← Back</button>
631
- <button class="btn btn-primary" onclick="wizardNext()">Next →</button>
326
+ <div class="knowledge-card job">
327
+ <div style="font-weight:600;margin-bottom:4px;">👔 岗位知识</div>
328
+ <div style="font-size:13px;color:var(--text-muted);">加载中...</div>
632
329
  </div>
633
- </div>
634
-
635
- <!-- Step 3: Confirm -->
636
- <div class="wizard-panel" id="wp-3">
637
- <h2 style="font-size:20px;margin-bottom:8px;">Review & Create</h2>
638
- <p style="color:var(--text-muted);font-size:14px;margin-bottom:24px;">Everything looks good? Let's bring your agent to life!</p>
639
- <div class="card" id="confirm-card" style="margin-bottom:24px;"></div>
640
- <div style="display:flex;gap:12px;justify-content:flex-end;">
641
- <button class="btn btn-secondary" onclick="wizardBack()">← Back</button>
642
- <button class="btn btn-primary btn-lg" onclick="createAgent()" id="create-btn">🚀 Create Agent</button>
330
+ <div class="knowledge-card station">
331
+ <div style="font-weight:600;margin-bottom:4px;">🖥️ 工位知识</div>
332
+ <div style="font-size:13px;color:var(--text-muted);">加载中...</div>
643
333
  </div>
644
334
  </div>
645
- </div>
646
- </div>
647
335
 
648
- <!-- Chat Page (full height, no padding) -->
649
- <div class="chat-container" id="page-chat">
650
- <div class="chat-header">
651
- <button class="chat-back" onclick="navigate('dashboard')">←</button>
652
- <span class="chat-icon" id="chat-agent-icon">🤖</span>
653
- <div>
654
- <div class="chat-name" id="chat-agent-name">Agent</div>
655
- <div class="chat-status" id="chat-agent-status">Online</div>
656
- </div>
657
- <div style="margin-left:auto;display:flex;gap:8px;align-items:center;">
658
- <select id="chat-agent-select" class="input" style="width:auto;padding:6px 10px;font-size:13px;border-radius:8px;" onchange="switchChatAgent(this.value)"></select>
659
- <span id="streaming-indicator" style="display:none;font-size:16px;" title="Thinking...">⏳</span>
660
- <button class="btn btn-sm btn-secondary" onclick="clearChat()">🗑 Clear</button>
661
- <button class="btn btn-sm btn-secondary" onclick="openMemory()">🧠 Memory</button>
336
+ <div style="font-size:12px;color:var(--text-dim);margin-top:16px;text-align:center;">
337
+ 💡 所有 Agent 自动从知识库 recall 相关知识，无需手动分配
662
338
  </div>
663
339
  </div>
664
- <div class="chat-messages" id="chat-messages">
665
- <div class="msg assistant">
666
- <div class="msg-bubble" id="chat-welcome">Hello! How can I help you today?</div>
667
- </div>
668
- </div>
669
- <div class="typing-indicator" id="typing-indicator">
670
- <div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>
671
- </div>
672
- <div class="chat-input-bar">
673
- <input type="file" id="doc-upload-input" style="display:none" accept=".pdf,.txt,.md,.docx,.csv,.json" onchange="handleDocUpload(this)">
674
- <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>
675
- <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>
676
- <input class="input" id="chat-input" placeholder="Type a message..." onkeydown="if(event.key==='Enter')sendMessage()">
677
- <button class="btn btn-primary" onclick="sendMessage()">Send</button>
678
- </div>
679
340
  </div>
680
341
 
681
-
682
- <!-- Memory Page -->
683
- <div class="page" id="page-memory">
684
- <div style="display:flex;align-items:center;gap:12px;margin-bottom:24px;">
685
- <button class="btn btn-secondary btn-sm" onclick="navigateToChat()">← Back to Chat</button>
686
- <div>
687
- <h1 class="page-title" style="margin-bottom:0;">🧠 Agent Memory</h1>
688
- <p class="page-subtitle" style="margin-bottom:0;">Knowledge your agent has learned over time</p>
342
+ <!-- Page: Workstation -->
343
+ <div class="page" id="page-workstation">
344
+ <div class="page-header"><span>🖥️</span> Workstation — 岗位模板库</div>
345
+ <div class="page-body">
346
+ <input type="text" class="search-input" placeholder="🔍 搜索模板..." oninput="searchTemplates(this.value)">
347
+ <div class="breadcrumb" id="ws-breadcrumb">
348
+ <a onclick="wsNavigate('root')">全部行业</a>
689
349
  </div>
690
- </div>
691
- <div id="memory-timeline"></div>
692
- <div id="memory-empty" class="empty-state">
693
- <div class="empty-icon">🧠</div>
694
- <div class="empty-title">No memories yet</div>
695
- <div class="empty-desc">Your agent will learn and remember things as you chat with it.</div>
350
+ <div id="ws-content">加载中...</div>
696
351
  </div>
697
352
  </div>
698
353
 
699
- <!-- Schedules Page -->
700
- <div class="page" id="page-schedules">
701
- <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:24px;">
702
- <div>
703
- <h1 class="page-title">⏰ Scheduled Tasks</h1>
704
- <p class="page-subtitle">Automate recurring agent tasks with cron schedules</p>
705
- </div>
706
- <button class="btn btn-primary" onclick="showScheduleForm()">+ New Task</button>
707
- </div>
708
-
709
- <!-- New/Edit Form (hidden by default) -->
710
- <div id="schedule-form" class="card" style="display:none;margin-bottom:24px;">
711
- <h3 style="font-size:16px;font-weight:600;margin-bottom:16px;" id="schedule-form-title">New Scheduled Task</h3>
712
- <div class="form-group">
713
- <label class="label">Task Name *</label>
714
- <input class="input" id="sched-name" placeholder="e.g. Daily News Summary">
715
- </div>
716
- <div class="form-group">
717
- <label class="label">Frequency</label>
718
- <select class="input" id="sched-frequency" onchange="onSchedFreqChange()">
719
- <option value="daily">Every Day</option>
720
- <option value="weekly">Every Week (Monday)</option>
721
- <option value="monthly">Every Month (1st)</option>
722
- <option value="custom">Custom Cron</option>
723
- </select>
724
- </div>
725
- <div class="form-group" id="sched-time-group">
726
- <label class="label">Time</label>
727
- <input class="input" type="time" id="sched-time" value="09:00">
728
- </div>
729
- <div class="form-group" id="sched-cron-group" style="display:none;">
730
- <label class="label">Cron Expression</label>
731
- <input class="input" id="sched-cron" placeholder="*/5 * * * *">
732
- <div class="help-text">Format: minute hour dayOfMonth month dayOfWeek</div>
733
- </div>
734
- <div class="form-group">
735
- <label class="label">Description</label>
736
- <textarea class="input" id="sched-desc" rows="2" placeholder="e.g. Send a news summary every morning at 8am"></textarea>
737
- </div>
738
- <div class="form-group">
739
- <label class="label">Output Channel</label>
740
- <select class="input" id="sched-channel">
741
- <option value="web">Web</option>
742
- <option value="telegram">Telegram</option>
743
- <option value="email">Email</option>
744
- </select>
745
- </div>
746
- <div style="display:flex;gap:8px;">
747
- <button class="btn btn-primary" onclick="saveSchedule()">💾 Save</button>
748
- <button class="btn btn-secondary" onclick="hideScheduleForm()">Cancel</button>
749
- </div>
750
- </div>
751
-
752
- <!-- Task List -->
753
- <div id="schedules-list"></div>
754
- <div id="schedules-empty" class="empty-state" style="display:none;">
755
- <div class="empty-icon">⏰</div>
756
- <div class="empty-title">No scheduled tasks</div>
757
- <div class="empty-desc">Create your first automated task to get started.</div>
758
- <button class="btn btn-primary" onclick="showScheduleForm()">+ Create Task</button>
354
+ <!-- Page: Channels -->
355
+ <div class="page" id="page-channels">
356
+ <div class="page-header"><span>📡</span> 渠道配置</div>
357
+ <div class="page-body" id="channels-body">
358
+ <div id="channels-content">加载中...</div>
759
359
  </div>
760
360
  </div>
761
- </div>
762
- </div>
763
-
764
- <!-- Channel Config Dialog -->
765
- <div class="dialog-overlay" id="channel-dialog">
766
- <div class="dialog" style="max-width:480px;width:92%;">
767
- <div class="dialog-title" id="channel-dialog-title">配置渠道</div>
768
- <div id="channel-dialog-body" style="margin-bottom:4px;"></div>
769
- <div class="dialog-actions">
770
- <button class="btn btn-secondary btn-sm" onclick="closeChannelDialog()">取消</button>
771
- <button class="btn btn-primary btn-sm" onclick="saveCurrentChannel()">💾 保存</button>
772
- </div>
773
- <!-- Settings Page -->
774
- <div class="page" id="page-settings">
775
- <div class="settings-layout">
776
- <div class="settings-nav">
777
- <div class="settings-nav-item active" data-settings="models" onclick="showSettings('models')">🤖 模型配置</div>
778
- <div class="settings-nav-item" data-settings="channels" onclick="showSettings('channels')">📡 渠道配置</div>
779
- <div class="settings-nav-item" data-settings="memory" onclick="showSettings('memory')">🧠 记忆管理</div>
780
- <div class="settings-nav-item" data-settings="role" onclick="showSettings('role')">👤 角色编辑</div>
781
- <div class="settings-nav-item" data-settings="status" onclick="showSettings('status')">📊 运行状态</div>
782
- <div class="settings-nav-item" data-settings="usage" onclick="showSettings('usage')">💰 用量统计</div>
783
- <div class="settings-nav-item" data-settings="search" onclick="showSettings('search')">🔍 搜索配置</div>
784
- </div>
785
- <div class="settings-content">
786
361
 
787
- <!-- Models Panel -->
788
- <div class="settings-panel active" id="sp-models">
789
- <h2 style="font-size:20px;font-weight:700;margin-bottom:4px;">🤖 模型配置</h2>
790
- <p style="color:var(--text-muted);font-size:14px;margin-bottom:20px;">选择 AI 模型，默认使用本地模型，完全免费</p>
791
-
792
- <div class="tabs">
793
- <div class="tab active" onclick="switchModelTab('local')">🏠 本地模型</div>
794
- <div class="tab" onclick="switchModelTab('cloud')">☁️ 云端 API</div>
795
- </div>
796
-
797
- <!-- Local Models Tab -->
798
- <div class="tab-panel active" id="mt-local">
799
- <div id="ollama-status" style="margin-bottom:20px;"></div>
800
- <div id="ollama-models" style="margin-bottom:20px;"></div>
801
- <div id="ollama-tutorial" style="display:none;">
802
- <div class="card" style="margin-bottom:20px;">
803
- <h3 style="font-size:16px;margin-bottom:16px;">📖 3 步安装本地模型</h3>
804
- <div class="tutorial-steps">
805
- <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>
806
- <div class="tutorial-step"><div class="tutorial-step-content"><h4>安装并启动</h4><p>安装完成后，Ollama 会自动在后台运行</p></div></div>
807
- <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>
808
- </div>
809
- <button class="btn btn-primary btn-sm" onclick="detectOllama()" style="margin-top:8px;">🔄 重新检测</button>
810
- </div>
811
- </div>
812
- </div>
813
-
814
- <!-- Cloud API Tab -->
815
- <div class="tab-panel" id="mt-cloud">
816
- <p style="color:var(--text-muted);font-size:13px;margin-bottom:16px;">填入 API Key 即可使用云端模型，按用量付费</p>
817
- <div class="card-grid" id="cloud-providers">
818
- <div class="card provider-card" onclick="configureProvider('openai')">
819
- <div class="pv-header"><span style="font-size:20px;">🟢</span><span class="pv-name">OpenAI</span></div>
820
- <p style="font-size:13px;color:var(--text-muted);">GPT-4o / GPT-4o-mini</p>
821
- <div class="pv-status" id="pv-openai">未配置</div>
822
- </div>
823
- <div class="card provider-card" onclick="configureProvider('deepseek')">
824
- <div class="pv-header"><span style="font-size:20px;">🔵</span><span class="pv-name">DeepSeek</span></div>
825
- <p style="font-size:13px;color:var(--text-muted);">DeepSeek V3 / R1</p>
826
- <div class="pv-status" id="pv-deepseek">未配置</div>
827
- </div>
828
- <div class="card provider-card" onclick="configureProvider('qwen')">
829
- <div class="pv-header"><span style="font-size:20px;">🟣</span><span class="pv-name">通义千问</span></div>
830
- <p style="font-size:13px;color:var(--text-muted);">Qwen-Max / Qwen-Plus</p>
831
- <div class="pv-status" id="pv-qwen">未配置</div>
832
- </div>
833
- <div class="card provider-card" onclick="configureProvider('anthropic')">
834
- <div class="pv-header"><span style="font-size:20px;">🟠</span><span class="pv-name">Anthropic</span></div>
835
- <p style="font-size:13px;color:var(--text-muted);">Claude Sonnet / Haiku</p>
836
- <div class="pv-status" id="pv-anthropic">未配置</div>
837
- </div>
838
- <div class="card provider-card" onclick="configureProvider('openrouter')">
839
- <div class="pv-header"><span style="font-size:20px;">🌐</span><span class="pv-name">OpenRouter</span></div>
840
- <p style="font-size:13px;color:var(--text-muted);">100+ 模型聚合</p>
841
- <div class="pv-status" id="pv-openrouter">未配置</div>
842
- </div>
843
- </div>
844
- </div>
845
-
846
- <!-- Model Assignment -->
847
- <div class="card" style="margin-top:24px;">
848
- <h3 style="font-size:16px;margin-bottom:16px;">🎯 模型用途分配</h3>
849
- <div class="form-group">
850
- <label class="label">聊天模型（必选）</label>
851
- <select class="input" id="cfg-chat-model" onchange="saveModelAssignment()">
852
- <option value="qwen2.5:7b">qwen2.5:7b (本地推荐) ⭐</option>
853
- </select>
854
- <p style="font-size:12px;color:var(--text-dim);margin-top:4px;">用于对话、回答问题、执行任务</p>
855
- </div>
856
- <div class="form-group" style="margin-bottom:0;">
857
- <label class="label">Embedding 模型（记忆用）</label>
858
- <select class="input" id="cfg-embed-model" onchange="saveModelAssignment()">
859
- <option value="nomic-embed-text">nomic-embed-text (本地推荐) ⭐</option>
860
- </select>
861
- <p style="font-size:12px;color:var(--text-dim);margin-top:4px;">用于记忆存储和语义搜索，一般不需要更改</p>
862
- </div>
863
- </div>
864
- </div>
865
-
866
- <!-- Channels Panel -->
867
- <div class="settings-panel" id="sp-channels">
868
- <h2 style="font-size:20px;font-weight:700;margin-bottom:4px;">📡 渠道配置</h2>
869
- <p style="color:var(--text-muted);font-size:14px;margin-bottom:20px;">连接你的聊天平台，让 Agent 在各个渠道工作</p>
870
- <div class="card-grid" id="channels-grid"></div>
362
+ <!-- Page: New Agent -->
363
+ <div class="page" id="page-new-agent">
364
+ <div class="page-header"><span>Γ₧ò</span> µû░σ╗║ Agent</div>
365
+ <div class="page-body">
366
+ <div class="card" style="max-width:600px;">
367
+ <div class="form-group">
368
+ <label class="form-label">名称</label>
369
+ <input class="form-input" id="new-agent-name" placeholder="给你的 Agent 起个名字">
871
370
  </div>
872
-
873
- <!-- Memory Panel (DeepBrain) -->
874
- <div class="settings-panel" id="sp-memory">
875
- <h2 style="font-size:20px;font-weight:700;margin-bottom:4px;">🧠 记忆管理</h2>
876
- <p style="color:var(--text-muted);font-size:14px;margin-bottom:20px;">管理 Agent 的知识库和记忆，由 DeepBrain 提供</p>
877
- <div id="memory-module-frame"></div>
371
+ <div class="form-group">
372
+ <label class="form-label">描述</label>
373
+ <input class="form-input" id="new-agent-desc" placeholder="这个 Agent 做什么？">
878
374
  </div>
879
-
880
- <!-- Role Panel (Workstation) -->
881
- <div class="settings-panel" id="sp-role">
882
- <h2 style="font-size:20px;font-weight:700;margin-bottom:4px;">👤 角色编辑</h2>
883
- <p style="color:var(--text-muted);font-size:14px;margin-bottom:20px;">编辑 Agent 的角色设定和技能，由 Workstation 提供</p>
884
- <div id="role-module-frame"></div>
375
+ <div class="form-group">
376
+ <label class="form-label">图标</label>
377
+ <input class="form-input" id="new-agent-icon" placeholder="🤖" value="🤖" style="width:60px;">
885
378
  </div>
886
-
887
- <!-- Status Panel -->
888
- <div class="settings-panel" id="sp-status">
889
- <h2 style="font-size:20px;font-weight:700;margin-bottom:4px;">📊 运行状态</h2>
890
- <p style="color:var(--text-muted);font-size:14px;margin-bottom:20px;">查看 Agent 和各模块的运行情况</p>
891
- <div id="status-overview" style="margin-bottom:24px;"></div>
892
- <div class="card" style="margin-bottom:16px;">
893
- <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
894
- <h3 style="font-size:16px;">📋 最近日志</h3>
895
- <button class="btn btn-secondary btn-sm" onclick="refreshStatus()">🔄 刷新</button>
896
- </div>
897
- <div class="log-viewer" id="status-logs">暂无日志</div>
898
- </div>
379
+ <div class="form-group">
380
+ <label class="form-label">System Prompt</label>
381
+ <textarea class="form-input form-textarea" id="new-agent-prompt" placeholder="描述 Agent 的角色和行为..."></textarea>
899
382
  </div>
900
-
901
- <!-- Usage Panel -->
902
- <div class="settings-panel" id="sp-usage">
903
- <h2 style="font-size:20px;font-weight:700;margin-bottom:4px;">💰 用量统计</h2>
904
- <p style="color:var(--text-muted);font-size:14px;margin-bottom:20px;">查看 Token 消耗和费用估算</p>
905
- <div id="usage-stats"></div>
383
+ <div class="form-group">
384
+ <label class="form-label">模型</label>
385
+ <select class="form-input" id="new-agent-model">
386
+ <option value="">使用全局默认</option>
387
+ </select>
906
388
  </div>
907
-
908
- <!-- Web Search Panel -->
909
- <div class="settings-panel" id="sp-search">
910
- <h2 style="font-size:20px;font-weight:700;margin-bottom:4px;">🔍 搜索配置</h2>
911
- <p style="color:var(--text-muted);font-size:14px;margin-bottom:20px;">Agent 可以自动搜索互联网回答问题，默认使用 DuckDuckGo（免费，无需配置）</p>
912
-
913
- <div class="form-group">
914
- <label class="label">搜索开关</label>
915
- <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
916
- <input type="checkbox" id="search-enabled" checked onchange="updateSearchConfig()">
917
- <span style="font-size:14px;">启用 Web 搜索</span>
918
- </label>
919
- </div>
920
-
921
- <div class="form-group">
922
- <label class="label">默认搜索引擎</label>
923
- <select class="input" id="search-engine" onchange="updateSearchConfig()" style="padding:8px 12px;">
924
- <option value="duckduckgo">🦆 DuckDuckGo（免费，默认）</option>
925
- <option value="brave">🦁 Brave Search（需 API Key）</option>
926
- <option value="searxng">🔧 SearXNG（自托管）</option>
927
- <option value="google">🔍 Google Custom Search（需 API Key）</option>
928
- </select>
929
- </div>
930
-
931
- <div class="form-group" id="search-apikey-group" style="display:none;">
932
- <label class="label" id="search-apikey-label">API Key</label>
933
- <input class="input" id="search-apikey" type="password" placeholder="输入 API Key" onchange="updateSearchConfig()">
934
- </div>
935
-
936
- <div class="form-group" id="search-baseurl-group" style="display:none;">
937
- <label class="label">SearXNG URL</label>
938
- <input class="input" id="search-baseurl" placeholder="https://searx.example.com" onchange="updateSearchConfig()">
939
- </div>
940
-
941
- <div style="margin-top:16px;">
942
- <button class="btn btn-secondary btn-sm" onclick="testSearch()">🧪 测试搜索</button>
943
- </div>
944
- <div id="search-test-result" style="margin-top:12px;font-size:13px;"></div>
945
-
946
- <div style="margin-top:24px;padding:16px;background:var(--bg-light);border-radius:8px;font-size:13px;color:var(--text-muted);">
947
- <strong>💡 提示</strong><br>
948
- Agent 会自动判断何时需要搜索，也可以通过 <code>web_search</code> 和 <code>web_read</code> 工具主动调用。<br>
949
- DuckDuckGo 完全免费、无需注册，适合大多数场景。
950
- </div>
389
+ <div style="display:flex;gap:8px;margin-top:16px;">
390
+ <button class="btn-primary" onclick="createAgent()">创建 Agent</button>
391
+ <button class="btn-secondary" onclick="navigate('assistant')">取消</button>
951
392
  </div>
952
-
953
- </div>
954
- </div>
955
- </div>
956
-
957
- <!-- Provider Config Dialog -->
958
- <div class="dialog-overlay" id="provider-dialog">
959
- <div class="dialog" style="max-width:480px;">
960
- <div class="dialog-title" id="pd-title">配置 Provider</div>
961
- <div class="dialog-desc" id="pd-desc">填入 API Key 即可开始使用</div>
962
- <div class="form-group">
963
- <label class="label">API Key</label>
964
- <input class="input" id="pd-apikey" type="password" placeholder="sk-...">
965
- </div>
966
- <div class="form-group" id="pd-baseurl-group" style="display:none;">
967
- <label class="label">自定义 Base URL（可选）</label>
968
- <input class="input" id="pd-baseurl" placeholder="https://api.example.com">
969
- </div>
970
- <div id="pd-test-result" style="margin-bottom:16px;font-size:13px;"></div>
971
- <div class="dialog-actions">
972
- <button class="btn btn-secondary btn-sm" onclick="closeProviderDialog()">取消</button>
973
- <button class="btn btn-secondary btn-sm" onclick="testProvider()">🔍 测试连接</button>
974
- <button class="btn btn-primary btn-sm" onclick="saveProvider()">💾 保存</button>
975
- </div>
976
- </div>
977
- </div>
978
-
979
- <!-- Channel Config Dialog -->
980
- <div class="dialog-overlay" id="channel-dialog">
981
- <div class="dialog" style="max-width:480px;">
982
- <div class="dialog-title" id="cd-title">配置渠道</div>
983
- <div class="dialog-desc" id="cd-desc"></div>
984
- <div id="cd-fields"></div>
985
- <div class="dialog-actions">
986
- <button class="btn btn-secondary btn-sm" onclick="closeChannelDialog()">取消</button>
987
- <button class="btn btn-primary btn-sm" onclick="saveChannel()">💾 保存</button>
988
- </div>
989
- </div>
990
- </div>
991
-
992
- </div>
993
- </div>
994
-
995
- <!-- Delete Confirm Dialog -->
996
- <div class="dialog-overlay" id="delete-dialog">
997
- <div class="dialog">
998
- <div class="dialog-title">Delete Agent?</div>
999
- <div class="dialog-desc">This action cannot be undone. The agent and all its data will be permanently removed.</div>
1000
- <div class="dialog-actions">
1001
- <button class="btn btn-secondary btn-sm" onclick="closeDeleteDialog()">Cancel</button>
1002
- <button class="btn btn-danger btn-sm" onclick="confirmDelete()">Delete</button>
1003
- </div>
1004
- </div>
1005
- </div>
1006
-
1007
- <!-- First Run Wizard Modal -->
1008
- <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;">
1009
- <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;">
1010
- <!-- Step indicators -->
1011
- <div style="display:flex;justify-content:center;gap:6px;margin-bottom:32px;" id="fr-steps">
1012
- <div class="wizard-step active" id="fr-step-1"><div class="step-num">1</div><span>Welcome</span></div>
1013
- <div class="wizard-step" id="fr-step-2"><div class="step-line"></div><div class="step-num">2</div><span>Models</span></div>
1014
- <div class="wizard-step" id="fr-step-3"><div class="step-line"></div><div class="step-num">3</div><span>Template</span></div>
1015
- <div class="wizard-step" id="fr-step-4"><div class="step-line"></div><div class="step-num">4</div><span>Done</span></div>
1016
- </div>
1017
-
1018
- <!-- Step 1: Welcome -->
1019
- <div class="wizard-panel active" id="fr-panel-1">
1020
- <div style="text-align:center;margin-bottom:32px;">
1021
- <div style="font-size:64px;margin-bottom:16px;">⚡</div>
1022
- <h2 style="font-size:24px;font-weight:700;margin-bottom:8px;">Welcome to OPC Studio</h2>
1023
- <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>
1024
- </div>
1025
- <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:32px;">
1026
- <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>
1027
- <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>
1028
- <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>
1029
- </div>
1030
- <button class="btn btn-primary btn-lg" style="width:100%;" onclick="frNext()">Get Started →</button>
1031
- </div>
1032
-
1033
- <!-- Step 2: Model Detection -->
1034
- <div class="wizard-panel" id="fr-panel-2">
1035
- <h2 style="font-size:20px;font-weight:700;margin-bottom:4px;">🤖 Choose Your AI Model</h2>
1036
- <p style="color:var(--text-muted);font-size:14px;margin-bottom:20px;">We recommend using free local models. Cloud APIs also supported.</p>
1037
- <div id="fr-ollama-status" style="padding:16px;border-radius:var(--radius);margin-bottom:16px;background:var(--bg-hover);">
1038
- <div style="display:flex;align-items:center;gap:8px;"><span class="status-dot yellow"></span> Detecting Ollama...</div>
1039
- </div>
1040
- <div id="fr-model-choice" style="display:none;">
1041
- <div class="form-group">
1042
- <label class="label">Select a model to use</label>
1043
- <select class="input" id="fr-model-select">
1044
- <option value="qwen2.5:7b">qwen2.5:7b — Local, free ⭐ Recommended</option>
1045
- <option value="gpt-4o-mini">GPT-4o Mini — Cloud, fast</option>
1046
- <option value="gpt-4o">GPT-4o — Cloud, most capable</option>
1047
- <option value="claude-sonnet-4">Claude Sonnet — Cloud, balanced</option>
1048
- <option value="deepseek-v3">DeepSeek V3 — Cloud, affordable</option>
1049
- </select>
1050
393
  </div>
1051
394
  </div>
1052
- <div style="display:flex;gap:12px;justify-content:flex-end;margin-top:24px;">
1053
- <button class="btn btn-secondary" onclick="frBack()">← Back</button>
1054
- <button class="btn btn-primary" onclick="frNext()">Next →</button>
1055
- </div>
1056
395
  </div>
1057
396
 
1058
- <!-- Step 3: Choose Template -->
1059
- <div class="wizard-panel" id="fr-panel-3">
1060
- <h2 style="font-size:20px;font-weight:700;margin-bottom:4px;">👤 Pick a Starting Template</h2>
1061
- <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>
1062
- <div style="display:flex;flex-direction:column;gap:8px;" id="fr-template-list">
1063
- <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">
1064
- <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>
1065
- </div>
1066
- <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">
1067
- <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>
1068
- </div>
1069
- <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">
1070
- <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>
1071
- </div>
1072
- <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">
1073
- <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>
1074
- </div>
1075
- <div class="card" style="cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;" onclick="frSelectTemplate('teacher')" id="fr-tpl-teacher">
1076
- <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>
1077
- </div>
1078
- </div>
1079
- <div style="display:flex;gap:12px;justify-content:flex-end;margin-top:20px;">
1080
- <button class="btn btn-secondary" onclick="frBack()">← Back</button>
1081
- <button class="btn btn-primary" onclick="frNext()" id="fr-next-3">Next →</button>
1082
- </div>
1083
- </div>
397
+ </div><!-- main -->
398
+ </div><!-- app -->
1084
399
 
1085
- <!-- Step 4: Creating / Done -->
1086
- <div class="wizard-panel" id="fr-panel-4">
1087
- <div style="text-align:center;padding:20px 0;">
1088
- <div id="fr-creating" style="">
1089
- <div style="font-size:48px;margin-bottom:16px;">⏳</div>
1090
- <h2 style="font-size:20px;font-weight:700;margin-bottom:8px;">Creating your agent...</h2>
1091
- <p style="color:var(--text-muted);">Just a moment</p>
1092
- </div>
1093
- <div id="fr-done" style="display:none;">
1094
- <div style="font-size:64px;margin-bottom:16px;">🎉</div>
1095
- <h2 style="font-size:22px;font-weight:700;margin-bottom:8px;">You're all set!</h2>
1096
- <p style="color:var(--text-muted);margin-bottom:24px;">Your agent is ready. Start chatting now!</p>
1097
- <button class="btn btn-primary btn-lg" onclick="frFinish()">Start Chatting →</button>
1098
- </div>
1099
- </div>
1100
- </div>
1101
- </div>
1102
- </div>
400
+ <div class="toast" id="toast"></div>
1103
401
 
1104
402
  <script>
1105
- // === Debug: catch all JS errors ===
1106
- window.onerror = function(msg, url, line, col, err) {
1107
- console.error('JS ERROR:', msg, 'at line', line, ':', col);
1108
- const d = document.createElement('div');
1109
- d.style.cssText = 'position:fixed;bottom:0;left:0;right:0;background:red;color:white;padding:8px;z-index:9999;font-size:12px;';
1110
- d.textContent = 'JS Error: ' + msg + ' (line ' + line + ')';
1111
- document.body.appendChild(d);
1112
- };
1113
- // === State ===
1114
- let templates = [];
1115
- let industries = [];
1116
- let agents = [];
1117
- let selectedTemplate = null;
1118
- let currentAgent = null;
1119
- let chatMessages = [];
1120
- let wizardStep = 1;
1121
- let selectedIndustry = '';
1122
- let deleteTargetId = null;
1123
-
1124
403
  const API = '';
1125
-
1126
- // === Init ===
1127
- async function init() {
1128
- await Promise.all([loadTemplates(), loadAgents(), loadSidebarAgents()]);
1129
- loadSidebarGroups();
1130
- handleRoute();
1131
- window.addEventListener('popstate', handleRoute);
1132
- checkFirstRun();
1133
- }
1134
-
1135
- function handleRoute() {
1136
- const path = location.hash.slice(1) || '/dashboard';
1137
- const parts = path.split('/').filter(Boolean);
1138
- if (parts[0] === 'chat' && parts[1]) {
1139
- openChat(parts[1]);
1140
- } else if (parts[0] === 'agent' && parts[1]) {
1141
- loadSidebarAgents().then(() => navigateToAgent(parts[1]));
1142
- } else if (parts[0] === 'settings') {
1143
- if (parts[1]) currentSettingsTab = parts[1];
1144
- navigate('settings');
1145
- } else if (parts[0] === 'memory' && parts[1]) {
1146
- openMemoryPage(parts[1]);
1147
- } else if (parts[0] === 'create') {
1148
- if (parts[1]) {
1149
- // pre-select template
1150
- selectedTemplate = templates.find(t => t.id === parts[1]) || null;
1151
- if (selectedTemplate) {
1152
- wizardStep = 2;
1153
- }
1154
- }
1155
- showPage('create');
1156
- renderWizard();
1157
- } else {
1158
- navigate(parts[0] || 'dashboard');
404
+ let agents = [];
405
+ let currentAgentId = null;
406
+ let currentPage = 'assistant';
407
+ let settingsPanelOpen = false;
408
+ let currentSettingsTab = 'role';
409
+ let modelsConfig = null;
410
+ let wsState = { level: 'root', industry: null, job: null };
411
+ let chatHistories = {};
412
+
413
+ // ======================== Navigation ========================
414
+ function navigate(page, data) {
415
+ document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
416
+ document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
417
+
418
+ if (page === 'assistant') {
419
+ document.getElementById('page-assistant').classList.add('active');
420
+ document.getElementById('nav-assistant').classList.add('active');
421
+ } else if (page === 'agent' && data) {
422
+ currentAgentId = data.id;
423
+ document.getElementById('page-agent-chat').classList.add('active');
424
+ document.getElementById('agent-chat-icon').textContent = data.icon || '🤖';
425
+ document.getElementById('agent-chat-name').textContent = data.name || data.id;
426
+ const navItem = document.querySelector(`[data-agent-id="${data.id}"]`);
427
+ if (navItem) navItem.classList.add('active');
428
+ loadAgentChat(data.id);
429
+ loadAgentSettings(data.id);
430
+ } else if (page === 'models') {
431
+ document.getElementById('page-models').classList.add('active');
432
+ document.getElementById('nav-models').classList.add('active');
433
+ loadModelsConfig();
434
+ } else if (page === 'knowledge') {
435
+ document.getElementById('page-knowledge').classList.add('active');
436
+ document.getElementById('nav-knowledge').classList.add('active');
437
+ loadKnowledge();
438
+ } else if (page === 'workstation') {
439
+ document.getElementById('page-workstation').classList.add('active');
440
+ document.getElementById('nav-workstation').classList.add('active');
441
+ loadWorkstation();
442
+ } else if (page === 'channels') {
443
+ document.getElementById('page-channels').classList.add('active');
444
+ loadChannels();
445
+ } else if (page === 'new-agent') {
446
+ document.getElementById('page-new-agent').classList.add('active');
447
+ loadAvailableModels();
1159
448
  }
449
+ currentPage = page;
1160
450
  }
1161
451
 
1162
- // === API ===
1163
- async function loadTemplates() {
1164
- try {
1165
- const res = await fetch(`${API}/api/templates`);
1166
- const data = await res.json();
1167
- templates = data.templates || [];
1168
- industries = data.industries || [];
1169
- renderIndustryChips();
1170
- renderTemplates();
1171
- } catch(e) { console.error('Failed to load templates:', e); }
1172
- }
1173
-
452
+ // ======================== Agents List ========================
1174
453
  async function loadAgents() {
1175
454
  try {
1176
455
  const res = await fetch(`${API}/api/agents`);
1177
456
  const data = await res.json();
1178
- agents = data.agents || [];
1179
- renderAgents();
1180
- } catch(e) { console.error('Failed to load agents:', e); }
457
+ agents = Array.isArray(data) ? data : (data.agents || []);
458
+ renderAgentList();
459
+ } catch (e) { console.error('loadAgents:', e); }
1181
460
  }
1182
461
 
1183
- // === Sidebar Agents ===
1184
- let selectedAgentId = null;
1185
-
1186
- async function loadSidebarAgents() {
1187
- try {
1188
- const res = await fetch('/api/agents');
1189
- const data = await res.json();
1190
- const agents = data.agents || data || [];
1191
- window._sidebarAgents = agents;
1192
- const container = document.getElementById('sidebar-agent-list');
1193
- if (!agents.length) {
1194
- container.innerHTML = '<div style="padding: 12px 16px; color: var(--text-dim); font-size: 13px;">暂无 Agent</div>';
1195
- return;
1196
- }
1197
- container.innerHTML = agents.map(a => {
1198
- const status = (a.status || 'offline').toLowerCase();
1199
- const icon = a.emoji || a.icon || '🤖';
1200
- const name = a.name || a.id;
1201
- return `<div class="agent-list-item${selectedAgentId === a.id ? ' active' : ''}" data-agent-id="${a.id}" onclick="navigateToAgent('${a.id}')">
1202
- <span class="agent-icon">${icon}</span>
1203
- <span class="agent-name">${name}</span>
1204
- <span class="status-dot ${status}"></span>
1205
- </div>`;
1206
- }).join('');
1207
- } catch(e) {
1208
- console.error('Failed to load sidebar agents:', e);
1209
- const container = document.getElementById('sidebar-agent-list');
1210
- if (container) container.innerHTML = '<div style="padding: 12px 16px; color: var(--text-dim); font-size: 13px;">加载失败</div>';
462
+ function renderAgentList() {
463
+ const el = document.getElementById('agent-list');
464
+ if (!agents.length) {
465
+ el.innerHTML = '<div style="padding:4px 12px;font-size:12px;color:var(--text-dim);font-style:italic;">还没有 Agent</div>';
466
+ return;
1211
467
  }
468
+ el.innerHTML = agents.map(a => `
469
+ <div class="sidebar-item${currentAgentId === a.id ? ' active' : ''}" data-agent-id="${a.id}" onclick="navigate('agent', ${JSON.stringify(a).replace(/"/g, '&quot;')})">
470
+ <span>${a.icon || '🤖'}</span><span>${a.name || a.id}</span>
471
+ </div>
472
+ `).join('');
1212
473
  }
1213
474
 
1214
- // --- Collaboration Groups ---
1215
- let selectedPattern = 'debate';
1216
- function selectPattern(pat) {
1217
- selectedPattern = pat;
1218
- document.querySelectorAll('.pattern-card').forEach(c => c.classList.remove('active'));
1219
- const el = document.getElementById('pat-' + pat);
1220
- if (el) el.classList.add('active');
1221
- }
1222
- async function loadGroupAgentSelect() {
1223
- try {
1224
- const res = await fetch('/api/agents');
1225
- const data = await res.json();
1226
- const agents = data.agents || data || [];
1227
- const container = document.getElementById('group-agent-select');
1228
- if (!agents.length) {
1229
- container.innerHTML = '<p style="color:var(--text-muted);font-size:13px;">请先创建 Agent，再拉入群组</p>';
1230
- return;
1231
- }
1232
- container.innerHTML = agents.map(a => `<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" class="group-agent-cb" value="${a.id}"> <span>${a.templateIcon || a.icon || '🤖'}</span> <span style="font-size:14px;">${a.name}</span></label>`).join('');
1233
- } catch(e) { console.error('loadGroupAgentSelect error', e); }
1234
- }
1235
- async function createGroup() {
1236
- const name = document.getElementById('group-name').value.trim();
1237
- if (!name) { alert('请输入群组名称'); return; }
1238
- const members = [...document.querySelectorAll('.group-agent-cb:checked')].map(cb => cb.value);
1239
- if (members.length < 2) { alert('至少选择 2 个 Agent'); return; }
1240
- // TODO: POST to /api/groups
1241
- alert('群组 "' + name + '" 创建成功！模式: ' + selectedPattern + ', 成员: ' + members.length + ' 个 Agent');
1242
- navigate('dashboard');
1243
- }
1244
- async function loadSidebarGroups() {
1245
- // TODO: fetch /api/groups and render
1246
- const container = document.getElementById('groups-list');
1247
- if (container) container.innerHTML = '<div style="padding:6px 16px;color:var(--text-dim);font-size:12px;">暂无群组</div>';
1248
- }
1249
-
1250
- function navigateToAgent(agentId) {
1251
- selectedAgentId = agentId;
1252
- // Update sidebar active state
1253
- document.querySelectorAll('.agent-list-item').forEach(el => el.classList.remove('active'));
1254
- document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
1255
- const item = document.querySelector(`.agent-list-item[data-agent-id="${agentId}"]`);
1256
- if (item) item.classList.add('active');
1257
-
1258
- // Find agent data
1259
- const agent = (window._sidebarAgents || []).find(a => a.id === agentId) || { id: agentId, name: agentId };
1260
- document.getElementById('agent-detail-icon').textContent = agent.emoji || agent.icon || '🤖';
1261
- document.getElementById('agent-detail-name').textContent = agent.name || agentId;
1262
- const statusDot = document.getElementById('agent-detail-status');
1263
- const status = (agent.status || 'offline').toLowerCase();
1264
- statusDot.className = 'status-dot ' + status;
1265
-
1266
- // Reset to chat view
1267
- document.getElementById('agent-chat-view').style.display = '';
1268
- document.getElementById('agent-settings-view').style.display = 'none';
1269
- document.getElementById('agent-detail-toggle').classList.remove('active');
1270
- document.getElementById('agent-chat-messages').innerHTML = document.querySelector('.agent-chat-welcome').outerHTML || '<div class="agent-chat-welcome"><div style="font-size:48px;margin-bottom:16px">💬</div><div style="font-size:18px;font-weight:600;margin-bottom:8px">开始对话</div><div style="color:var(--text-muted);font-size:14px">向你的 Agent 发送第一条消息</div></div>';
1271
- document.getElementById('agent-chat-input').value = '';
1272
-
1273
- // Show agent detail page
1274
- document.querySelectorAll('.page, .chat-container').forEach(p => { p.classList.remove('active'); p.style.display = ''; });
1275
- document.getElementById('page-agent-detail').classList.add('active');
1276
- location.hash = `/agent/${agentId}`;
1277
- toggleSidebar(false);
1278
- }
1279
-
1280
- function toggleAgentSettings() {
1281
- const chatView = document.getElementById('agent-chat-view');
1282
- const settingsView = document.getElementById('agent-settings-view');
1283
- const toggleBtn = document.getElementById('agent-detail-toggle');
1284
- const showSettings = chatView.style.display !== 'none';
1285
- chatView.style.display = showSettings ? 'none' : '';
1286
- settingsView.style.display = showSettings ? '' : 'none';
1287
- toggleBtn.classList.toggle('active', showSettings);
1288
- }
1289
-
1290
- function switchAgentTab(tab) {
1291
- document.querySelectorAll('.agent-tab').forEach(t => t.classList.remove('active'));
1292
- document.querySelector(`.agent-tab[data-atab="${tab}"]`)?.classList.add('active');
1293
- document.querySelectorAll('.agent-tab-panel').forEach(p => p.classList.remove('active'));
1294
- document.getElementById(`atab-${tab}`)?.classList.add('active');
475
+ // ======================== Chat (SSE) ========================
476
+ function renderMarkdown(text) {
477
+ if (!text) return '';
478
+ return text
479
+ .replace(/```(\w*)\n([\s\S]*?)```/g, '<pre><code>$2</code></pre>')
480
+ .replace(/`([^`]+)`/g, '<code>$1</code>')
481
+ .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
482
+ .replace(/\*(.+?)\*/g, '<em>$1</em>')
483
+ .replace(/^- (.+)$/gm, '<li>$1</li>')
484
+ .replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>')
485
+ .replace(/\n/g, '<br>');
1295
486
  }
1296
487
 
1297
- let agentChatHistory = [];
1298
-
1299
- async function sendAgentChat() {
1300
- const input = document.getElementById('agent-chat-input');
488
+ async function sendChat(inputId, messagesId, agentId) {
489
+ const input = document.getElementById(inputId);
1301
490
  const msg = input.value.trim();
1302
- if (!msg || !selectedAgentId) return;
491
+ if (!msg) return;
1303
492
  input.value = '';
1304
- input.style.height = 'auto';
1305
493
 
1306
- const messagesEl = document.getElementById('agent-chat-messages');
1307
- // Remove welcome screen
1308
- const welcome = messagesEl.querySelector('.agent-chat-welcome');
1309
- if (welcome) welcome.remove();
494
+ const messagesEl = document.getElementById(messagesId);
1310
495
 
1311
496
  // Add user message
1312
497
  const userDiv = document.createElement('div');
1313
- userDiv.className = 'agent-chat-msg user';
1314
- userDiv.textContent = msg;
498
+ userDiv.className = 'chat-msg user';
499
+ userDiv.innerHTML = `<div class="bubble">${escapeHtml(msg)}</div>`;
1315
500
  messagesEl.appendChild(userDiv);
1316
- messagesEl.scrollTop = messagesEl.scrollHeight;
1317
501
 
1318
- agentChatHistory.push({ role: 'user', content: msg });
1319
-
1320
- // Add assistant message placeholder
1321
- const assistantDiv = document.createElement('div');
1322
- assistantDiv.className = 'agent-chat-msg assistant';
1323
- assistantDiv.textContent = '';
1324
- messagesEl.appendChild(assistantDiv);
502
+ // Add typing indicator
503
+ const typingDiv = document.createElement('div');
504
+ typingDiv.className = 'chat-msg agent';
505
+ typingDiv.id = 'typing-indicator';
506
+ typingDiv.innerHTML = '<div class="typing"><span></span><span></span><span></span></div>';
507
+ messagesEl.appendChild(typingDiv);
508
+ messagesEl.scrollTop = messagesEl.scrollHeight;
1325
509
 
1326
- // Send to API and parse SSE stream
1327
510
  try {
1328
- const res = await fetch(`/api/agents/${selectedAgentId}/chat`, {
511
+ const chatId = agentId || 'opc-assistant';
512
+ const res = await fetch(`${API}/api/agents/${chatId}/chat`, {
1329
513
  method: 'POST',
1330
514
  headers: { 'Content-Type': 'application/json' },
1331
- body: JSON.stringify({ message: msg, history: agentChatHistory.slice(0, -1) })
515
+ body: JSON.stringify({ message: msg })
1332
516
  });
1333
517
 
1334
- if (!res.ok) {
1335
- let errMsg = `HTTP ${res.status}`;
1336
- try { const ej = await res.json(); errMsg = ej.error || errMsg; } catch {}
1337
- throw new Error(errMsg);
1338
- }
518
+ // Remove typing indicator
519
+ const ti = document.getElementById('typing-indicator');
520
+ if (ti) ti.remove();
521
+
522
+ // Create agent response bubble
523
+ const agentDiv = document.createElement('div');
524
+ agentDiv.className = 'chat-msg agent';
525
+ const bubble = document.createElement('div');
526
+ bubble.className = 'bubble';
527
+ agentDiv.appendChild(bubble);
528
+ messagesEl.appendChild(agentDiv);
529
+
530
+ if (res.headers.get('content-type')?.includes('text/event-stream')) {
531
+ // SSE streaming
532
+ const reader = res.body.getReader();
533
+ const decoder = new TextDecoder();
534
+ let fullText = '';
535
+ let buffer = '';
1339
536
 
1340
- const reader = res.body.getReader();
1341
- const decoder = new TextDecoder();
1342
- let fullReply = '';
1343
- let buffer = '';
1344
-
1345
- while (true) {
1346
- const { done, value } = await reader.read();
1347
- if (done) break;
1348
- buffer += decoder.decode(value, { stream: true });
1349
- const lines = buffer.split('\n');
1350
- buffer = lines.pop() || '';
1351
- for (const line of lines) {
1352
- const trimmed = line.trim();
1353
- if (!trimmed || !trimmed.startsWith('data: ')) continue;
1354
- const data = trimmed.slice(6);
1355
- if (data === '[DONE]') continue;
1356
- try {
1357
- const parsed = JSON.parse(data);
1358
- const content = parsed.choices?.[0]?.delta?.content;
1359
- if (content) {
1360
- fullReply += content;
1361
- assistantDiv.textContent = fullReply;
1362
- messagesEl.scrollTop = messagesEl.scrollHeight;
537
+ while (true) {
538
+ const { done, value } = await reader.read();
539
+ if (done) break;
540
+ buffer += decoder.decode(value, { stream: true });
541
+ const lines = buffer.split('\n');
542
+ buffer = lines.pop() || '';
543
+
544
+ for (const line of lines) {
545
+ if (line.startsWith('data: ')) {
546
+ const data = line.slice(6);
547
+ if (data === '[DONE]') continue;
548
+ try {
549
+ const parsed = JSON.parse(data);
550
+ const token = parsed.choices?.[0]?.delta?.content || parsed.token || parsed.content || '';
551
+ if (token) {
552
+ fullText += token;
553
+ bubble.innerHTML = renderMarkdown(fullText);
554
+ messagesEl.scrollTop = messagesEl.scrollHeight;
555
+ }
556
+ } catch {
557
+ // plain text token
558
+ if (data && data !== '[DONE]') {
559
+ fullText += data;
560
+ bubble.innerHTML = renderMarkdown(fullText);
561
+ messagesEl.scrollTop = messagesEl.scrollHeight;
562
+ }
563
+ }
1363
564
  }
1364
- } catch {}
565
+ }
1365
566
  }
567
+ if (!fullText) bubble.innerHTML = '<em style="color:var(--text-dim);">（无响应）</em>';
568
+ } else {
569
+ // JSON response
570
+ const data = await res.json();
571
+ const text = data.response || data.message || data.content || JSON.stringify(data);
572
+ bubble.innerHTML = renderMarkdown(text);
1366
573
  }
574
+ messagesEl.scrollTop = messagesEl.scrollHeight;
1367
575
 
1368
- if (!fullReply) {
1369
- assistantDiv.textContent = '(No response received)';
1370
- }
1371
- agentChatHistory.push({ role: 'assistant', content: fullReply });
1372
- } catch(e) {
1373
- assistantDiv.style.borderColor = 'var(--red)';
1374
- assistantDiv.textContent = `⚠️ 发送失败: ${e.message}`;
1375
- }
1376
- messagesEl.scrollTop = messagesEl.scrollHeight;
1377
- }
576
+ // Save to history
577
+ if (!chatHistories[chatId]) chatHistories[chatId] = [];
578
+ chatHistories[chatId].push({ role: 'user', content: msg });
579
+ chatHistories[chatId].push({ role: 'agent', content: bubble.innerHTML });
1378
580
 
1379
- function handleAgentChatKey(e) {
1380
- if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendAgentChat(); }
1381
- // Auto-resize textarea
1382
- e.target.style.height = 'auto';
1383
- e.target.style.height = Math.min(e.target.scrollHeight, 120) + 'px';
581
+ } catch (e) {
582
+ const ti = document.getElementById('typing-indicator');
583
+ if (ti) ti.remove();
584
+ const errDiv = document.createElement('div');
585
+ errDiv.className = 'chat-msg agent';
586
+ errDiv.innerHTML = `<div class="bubble" style="color:var(--red);">⚠️ 发送失败: ${escapeHtml(e.message)}</div>`;
587
+ messagesEl.appendChild(errDiv);
588
+ messagesEl.scrollTop = messagesEl.scrollHeight;
589
+ }
1384
590
  }
1385
591
 
1386
- // === Navigation ===
1387
- function navigate(page) {
1388
- document.querySelectorAll('.page, .chat-container').forEach(p => { p.classList.remove('active'); p.style.display = ''; });
1389
- document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
1390
- const navItem = document.querySelector(`.nav-item[data-page="${page}"]`);
1391
- if (navItem) navItem.classList.add('active');
1392
-
1393
- if (page === 'dashboard') { loadAgents(); loadHealthDashboard(); loadSidebarAgents(); }
1394
- if (page === 'create') { renderWizard(); renderWizardTemplates(); }
1395
- if (page === 'settings') { showSettings(currentSettingsTab || 'models'); }
1396
- if (page === 'global-runtime') { currentSettingsTab='status'; showSettings('status'); showPage('settings'); return; }
1397
- if (page === 'global-models') { currentSettingsTab='models'; showSettings('models'); showPage('settings'); return; }
1398
- if (page === 'global-memory') { currentSettingsTab='memory'; showSettings('memory'); showPage('settings'); return; }
1399
- if (page === 'global-templates') { navigate('templates'); return; }
1400
- if (page === 'create-group') { loadGroupAgentSelect(); }
1401
- if (page === 'schedules') { loadSchedules(); }
1402
- if (page === 'skills') { loadSkillsMarketplace(); }
1403
-
1404
- showPage(page);
1405
- location.hash = `/${page}`;
1406
- toggleSidebar(false);
1407
- }
592
+ function sendAssistantMsg() { sendChat('assistant-input', 'assistant-messages', null); }
593
+ function sendAgentMsg() { sendChat('agent-input', 'agent-messages', currentAgentId); }
1408
594
 
1409
- function showPage(page) {
1410
- document.querySelectorAll('.page, .chat-container').forEach(p => { p.classList.remove('active'); });
1411
- const el = document.getElementById(`page-${page}`);
1412
- if (el) el.classList.add('active');
595
+ function loadAgentChat(agentId) {
596
+ const el = document.getElementById('agent-messages');
597
+ const history = chatHistories[agentId];
598
+ if (history && history.length) {
599
+ el.innerHTML = history.map(m =>
600
+ `<div class="chat-msg ${m.role === 'user' ? 'user' : 'agent'}"><div class="bubble">${m.role === 'user' ? escapeHtml(m.content) : m.content}</div></div>`
601
+ ).join('');
602
+ } else {
603
+ el.innerHTML = `<div class="chat-msg agent"><div class="bubble">你好！有什么可以帮你的吗？</div></div>`;
604
+ }
605
+ el.scrollTop = el.scrollHeight;
1413
606
  }
1414
607
 
1415
- function toggleSidebar(open) {
1416
- document.querySelector('.sidebar').classList.toggle('open', open);
1417
- document.querySelector('.sidebar-overlay').classList.toggle('show', open);
608
+ // ======================== Agent Settings ========================
609
+ function toggleSettings() {
610
+ const panel = document.getElementById('agent-settings');
611
+ settingsPanelOpen = !settingsPanelOpen;
612
+ panel.classList.toggle('open', settingsPanelOpen);
1418
613
  }
1419
614
 
1420
- // === Templates Rendering ===
1421
- function renderIndustryChips() {
1422
- const html = `<span class="chip active" onclick="filterByIndustry('')">All</span>` +
1423
- industries.map(i => `<span class="chip" onclick="filterByIndustry('${i.id}')">${i.nameZh} ${i.name}</span>`).join('');
1424
- document.getElementById('industry-chips').innerHTML = html;
1425
- document.getElementById('wizard-industry-chips').innerHTML = html.replace(/filterByIndustry/g, 'filterWizardByIndustry');
615
+ async function loadAgentSettings(agentId) {
616
+ try {
617
+ const res = await fetch(`${API}/api/agents/${agentId}`);
618
+ const agent = await res.json();
619
+ renderSettingsTab('role', agent);
620
+ } catch (e) { console.error('loadAgentSettings:', e); }
1426
621
  }
1427
622
 
1428
- function filterByIndustry(id) {
1429
- selectedIndustry = id;
1430
- document.querySelectorAll('#industry-chips .chip').forEach(c => c.classList.remove('active'));
1431
- event.target.classList.add('active');
1432
- renderTemplates();
623
+ function switchSettingsTab(tab) {
624
+ currentSettingsTab = tab;
625
+ document.querySelectorAll('.settings-tab').forEach(t => t.classList.remove('active'));
626
+ document.querySelector(`.settings-tab[onclick*="${tab}"]`).classList.add('active');
627
+ if (currentAgentId) {
628
+ fetch(`${API}/api/agents/${currentAgentId}`).then(r => r.json()).then(a => renderSettingsTab(tab, a)).catch(console.error);
629
+ }
1433
630
  }
1434
631
 
1435
- function filterWizardByIndustry(id) {
1436
- selectedIndustry = id;
1437
- document.querySelectorAll('#wizard-industry-chips .chip').forEach(c => c.classList.remove('active'));
1438
- event.target.classList.add('active');
1439
- renderWizardTemplates();
1440
- }
632
+ function renderSettingsTab(tab, agent) {
633
+ const el = document.getElementById('settings-content');
634
+ const cfg = agent.config || agent;
1441
635
 
1442
- function filterTemplates() {
1443
- renderTemplates();
636
+ if (tab === 'role') {
637
+ el.innerHTML = `
638
+ <div class="form-group"><label class="form-label">名称</label><input class="form-input" id="s-name" value="${escapeAttr(cfg.name || agent.name || '')}"></div>
639
+ <div class="form-group"><label class="form-label">描述</label><input class="form-input" id="s-desc" value="${escapeAttr(cfg.description || '')}"></div>
640
+ <div class="form-group"><label class="form-label">图标</label><input class="form-input" id="s-icon" value="${escapeAttr(cfg.icon || agent.icon || '🤖')}" style="width:60px"></div>
641
+ <div class="form-group"><label class="form-label">System Prompt</label><textarea class="form-input form-textarea" id="s-prompt">${escapeHtml(cfg.systemPrompt || '')}</textarea></div>
642
+ <button class="btn-primary" onclick="saveAgentSettings()">保存</button>
643
+ `;
644
+ } else if (tab === 'model') {
645
+ el.innerHTML = '<div style="color:var(--text-dim);">加载可用模型...</div>';
646
+ loadModelTab(agent);
647
+ } else if (tab === 'memory') {
648
+ el.innerHTML = '<div style="color:var(--text-dim);">加载记忆...</div>';
649
+ loadMemoryTab(agent.id || currentAgentId);
650
+ } else if (tab === 'skills') {
651
+ const skills = cfg.skills || [];
652
+ el.innerHTML = `
653
+ <div class="form-label">已安装技能</div>
654
+ ${skills.length ? skills.map(s => `<div class="tag tag-blue">${s}</div>`).join(' ') : '<div style="color:var(--text-dim);font-size:13px;">暂无技能</div>'}
655
+ `;
656
+ } else if (tab === 'channel') {
657
+ el.innerHTML = `
658
+ <div class="form-label">Agent 渠道</div>
659
+ <div style="color:var(--text-dim);font-size:13px;">渠道在全局配置中管理 → <a style="color:var(--blue);cursor:pointer;" onclick="navigate('channels')">前往渠道配置</a></div>
660
+ `;
661
+ }
1444
662
  }
1445
663
 
1446
- // === Skills Marketplace ===
1447
- let allSkills = [];
1448
- let selectedSkillCategory = '';
1449
- const SKILL_CATEGORIES = [
1450
- { id: '', label: 'All', labelZh: '全部' },
1451
- { id: 'productivity', label: 'Productivity', labelZh: '效率' },
1452
- { id: 'knowledge', label: 'Knowledge', labelZh: '知识' },
1453
- { id: 'creative', label: 'Creative', labelZh: '创作' },
1454
- { id: 'developer', label: 'Developer', labelZh: '开发' },
1455
- { id: 'lifestyle', label: 'Lifestyle', labelZh: '生活' },
1456
- { id: 'business', label: 'Business', labelZh: '业务' },
1457
- ];
1458
-
1459
- async function loadSkillsMarketplace() {
664
+ async function loadModelTab(agent) {
665
+ const el = document.getElementById('settings-content');
1460
666
  try {
1461
- const res = await fetch('/api/skills/marketplace');
1462
- allSkills = await res.json();
1463
- } catch(e) { console.error('Failed to load skills:', e); allSkills = []; }
1464
- renderSkillCategoryChips();
1465
- renderSkills();
1466
- }
667
+ const [modelsRes, ollamaRes] = await Promise.all([
668
+ fetch(`${API}/api/settings/models`),
669
+ fetch(`${API}/api/settings/models/local`).catch(() => null)
670
+ ]);
671
+ const models = await modelsRes.json();
672
+ const ollama = ollamaRes ? await ollamaRes.json() : { available: false, models: [] };
673
+
674
+ let options = '<option value="">使用全局默认</option>';
675
+ if (ollama.available && ollama.models) {
676
+ ollama.models.filter(m => !m.name?.includes('embed')).forEach(m => {
677
+ options += `<option value="ollama:${m.name}" ${agent.model === `ollama:${m.name}` ? 'selected' : ''}>${m.name} (Ollama)</option>`;
678
+ });
679
+ }
680
+ // Add verified cloud models
681
+ const providers = models.providers || {};
682
+ for (const [name, cfg] of Object.entries(providers)) {
683
+ if (cfg.verified) {
684
+ const pModels = cfg.models || [name];
685
+ pModels.forEach(m => {
686
+ options += `<option value="${name}:${m}" ${agent.model === `${name}:${m}` ? 'selected' : ''}>${m} (${name})</option>`;
687
+ });
688
+ }
689
+ }
1467
690
 
1468
- function renderSkillCategoryChips() {
1469
- const el = document.getElementById('skill-category-chips');
1470
- if (!el) return;
1471
- el.innerHTML = SKILL_CATEGORIES.map(c =>
1472
- `<span class="chip ${selectedSkillCategory === c.id ? 'active' : ''}" onclick="selectSkillCategory('${c.id}')">${c.labelZh}</span>`
1473
- ).join('');
1474
- }
1475
-
1476
- function selectSkillCategory(cat) {
1477
- selectedSkillCategory = cat;
1478
- renderSkillCategoryChips();
1479
- renderSkills();
1480
- }
1481
-
1482
- function filterSkills() {
1483
- renderSkills();
1484
- }
1485
-
1486
- function renderSkills() {
1487
- const q = (document.getElementById('skills-search')?.value || '').toLowerCase();
1488
- let filtered = allSkills;
1489
- if (selectedSkillCategory) {
1490
- filtered = filtered.filter(s => s.category === selectedSkillCategory);
1491
- }
1492
- if (q) {
1493
- filtered = filtered.filter(s =>
1494
- s.name.toLowerCase().includes(q) || s.nameZh.includes(q) ||
1495
- s.description.toLowerCase().includes(q) || s.descriptionZh.includes(q)
1496
- );
1497
- }
1498
- const grid = document.getElementById('skills-grid');
1499
- if (!grid) return;
1500
- grid.innerHTML = filtered.map(s => `
1501
- <div class="card" style="cursor:default;position:relative;">
1502
- <div style="font-size:36px;margin-bottom:8px;">${s.icon}</div>
1503
- <div style="font-weight:600;font-size:15px;">${s.nameZh}</div>
1504
- <div style="font-size:12px;color:var(--text-dim);margin-bottom:4px;">${s.name}</div>
1505
- <div style="font-size:13px;color:var(--text-muted);margin-bottom:12px;line-height:1.4;">${s.descriptionZh}</div>
1506
- <div style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px;">
1507
- ${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('')}
1508
- ${s.tools.length > 3 ? `<span style="font-size:11px;color:var(--text-dim);">+${s.tools.length-3}</span>` : ''}
691
+ el.innerHTML = `
692
+ <div class="form-group">
693
+ <label class="form-label">聊天模型</label>
694
+ <select class="form-input" id="s-model">${options}</select>
1509
695
  </div>
1510
- ${s.installed
1511
- ? `<button class="btn" style="width:100%;background:var(--bg-hover);color:var(--text-muted);cursor:pointer;" onclick="uninstallSkill('${s.id}',this)">✓ Installed</button>`
1512
- : `<button class="btn btn-primary" style="width:100%;" onclick="installSkill('${s.id}',this)">Install</button>`
1513
- }
1514
- </div>
1515
- `).join('');
1516
- }
1517
-
1518
- async function installSkill(id, btn) {
1519
- btn.disabled = true; btn.textContent = 'Installing...';
1520
- try {
1521
- const res = await fetch(`/api/skills/marketplace/${id}/install`, { method: 'POST' });
1522
- const data = await res.json();
1523
- if (data.success) {
1524
- const skill = allSkills.find(s => s.id === id);
1525
- if (skill) skill.installed = true;
1526
- renderSkills();
1527
- }
1528
- } catch(e) { console.error(e); btn.disabled = false; btn.textContent = 'Install'; }
696
+ <button class="btn-primary" onclick="saveAgentSettings()">保存</button>
697
+ `;
698
+ } catch (e) {
699
+ el.innerHTML = `<div style="color:var(--red);">加载失败: ${e.message}</div>`;
700
+ }
1529
701
  }
1530
702
 
1531
- async function uninstallSkill(id, btn) {
1532
- btn.disabled = true; btn.textContent = 'Removing...';
703
+ async function loadMemoryTab(agentId) {
704
+ const el = document.getElementById('settings-content');
1533
705
  try {
1534
- const res = await fetch(`/api/skills/marketplace/${id}/uninstall`, { method: 'DELETE' });
706
+ const res = await fetch(`${API}/api/agents/${agentId}/memory`);
1535
707
  const data = await res.json();
1536
- if (data.success) {
1537
- const skill = allSkills.find(s => s.id === id);
1538
- if (skill) skill.installed = false;
1539
- renderSkills();
1540
- }
1541
- } catch(e) { console.error(e); btn.disabled = false; btn.textContent = '✓ Installed'; }
1542
- }
1543
-
1544
- function filterWizardTemplates() {
1545
- renderWizardTemplates();
1546
- }
1547
-
1548
- function getFilteredTemplates(searchId) {
1549
- const q = (document.getElementById(searchId)?.value || '').toLowerCase();
1550
- return templates.filter(t => {
1551
- if (selectedIndustry && t.industry !== selectedIndustry) return false;
1552
- if (q && !t.name.toLowerCase().includes(q) && !t.nameZh.includes(q) && !t.description.toLowerCase().includes(q)) return false;
1553
- return true;
1554
- });
1555
- }
1556
-
1557
- function renderTemplates() {
1558
- const filtered = getFilteredTemplates('tpl-search');
1559
- document.getElementById('templates-grid').innerHTML = filtered.map(t => `
1560
- <div class="card tpl-card" onclick="selectTemplateAndCreate('${t.id}')">
1561
- <div class="tpl-icon">${t.icon}</div>
1562
- <div class="tpl-name">${t.name}</div>
1563
- <div style="font-size:13px;color:var(--text-dim);margin-bottom:6px;">${t.nameZh}</div>
1564
- <div class="tpl-desc">${t.description}</div>
1565
- <div class="tpl-tags">
1566
- <span class="tpl-tag">${t.industryZh}</span>
1567
- ${t.tags.map(tag => `<span class="tpl-tag">${tag}</span>`).join('')}
1568
- </div>
1569
- </div>
1570
- `).join('');
1571
- }
1572
-
1573
- function renderWizardTemplates() {
1574
- const filtered = getFilteredTemplates('wizard-tpl-search');
1575
- document.getElementById('wizard-tpl-grid').innerHTML = filtered.map(t => `
1576
- <div class="card tpl-card ${selectedTemplate?.id === t.id ? 'selected' : ''}" onclick="selectWizardTemplate('${t.id}')"
1577
- style="${selectedTemplate?.id === t.id ? 'border-color:var(--accent);background:var(--accent-light);' : ''}">
1578
- <div class="tpl-icon">${t.icon}</div>
1579
- <div class="tpl-name">${t.name}</div>
1580
- <div style="font-size:12px;color:var(--text-dim);">${t.nameZh} · ${t.industryZh}</div>
1581
- </div>
1582
- `).join('');
1583
- }
1584
-
1585
- function selectTemplateAndCreate(id) {
1586
- selectedTemplate = templates.find(t => t.id === id);
1587
- wizardStep = 2;
1588
- navigate('create');
1589
- }
1590
-
1591
- function selectWizardTemplate(id) {
1592
- selectedTemplate = templates.find(t => t.id === id);
1593
- renderWizardTemplates();
1594
- // Auto-advance after selection
1595
- setTimeout(() => wizardNext(), 300);
1596
- }
1597
-
1598
- // === Wizard ===
1599
- function renderWizard() {
1600
- for (let i = 1; i <= 3; i++) {
1601
- const ws = document.getElementById(`ws-${i}`);
1602
- const wp = document.getElementById(`wp-${i}`);
1603
- ws.className = 'wizard-step' + (i < wizardStep ? ' done' : i === wizardStep ? ' active' : '');
1604
- wp.className = 'wizard-panel' + (i === wizardStep ? ' active' : '');
1605
- }
1606
- if (wizardStep === 2 && selectedTemplate) {
1607
- document.getElementById('agent-name').placeholder = selectedTemplate.name;
1608
- document.getElementById('agent-model').value = selectedTemplate.suggestedModel;
1609
- }
1610
- if (wizardStep === 3) {
1611
- renderConfirmCard();
708
+ const items = data.memories || data.items || [];
709
+ el.innerHTML = `
710
+ <div class="form-label">Agent 记忆 (${items.length} 条)</div>
711
+ ${items.length ? items.slice(0, 20).map(m =>
712
+ `<div style="background:var(--white);border:1px solid var(--border);border-radius:6px;padding:8px;margin:4px 0;font-size:12px;">${escapeHtml(typeof m === 'string' ? m : m.content || JSON.stringify(m))}</div>`
713
+ ).join('') : '<div style="color:var(--text-dim);font-size:13px;">暂无记忆</div>'}
714
+ `;
715
+ } catch (e) {
716
+ el.innerHTML = `<div style="color:var(--text-dim);font-size:13px;">暂无记忆数据</div>`;
1612
717
  }
1613
718
  }
1614
719
 
1615
- function wizardNext() {
1616
- if (wizardStep === 1 && !selectedTemplate) { alert('Please select a template first'); return; }
1617
- if (wizardStep < 3) { wizardStep++; renderWizard(); }
1618
- }
1619
-
1620
- function wizardBack() {
1621
- if (wizardStep > 1) { wizardStep--; renderWizard(); }
1622
- }
1623
-
1624
- function renderConfirmCard() {
1625
- const name = document.getElementById('agent-name').value || selectedTemplate?.name || 'My Agent';
1626
- const model = document.getElementById('agent-model').value;
1627
- const lang = document.getElementById('agent-lang').selectedOptions[0]?.text || 'English';
1628
- document.getElementById('confirm-card').innerHTML = `
1629
- <div style="display:flex;align-items:center;gap:16px;margin-bottom:16px;">
1630
- <span style="font-size:48px;">${selectedTemplate?.icon || '🤖'}</span>
1631
- <div>
1632
- <div style="font-size:20px;font-weight:700;">${name}</div>
1633
- <div style="color:var(--text-muted);font-size:14px;">Based on: ${selectedTemplate?.name || 'Custom'} (${selectedTemplate?.nameZh || ''})</div>
1634
- </div>
1635
- </div>
1636
- <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:14px;">
1637
- <div><span style="color:var(--text-dim);">Model:</span> ${model}</div>
1638
- <div><span style="color:var(--text-dim);">Language:</span> ${lang}</div>
1639
- <div style="grid-column:span 2;"><span style="color:var(--text-dim);">Industry:</span> ${selectedTemplate?.industryZh || ''} (${selectedTemplate?.industry || ''})</div>
1640
- </div>
1641
- `;
1642
- }
720
+ async function saveAgentSettings() {
721
+ if (!currentAgentId) return;
722
+ const body = {};
723
+ const name = document.getElementById('s-name');
724
+ const desc = document.getElementById('s-desc');
725
+ const icon = document.getElementById('s-icon');
726
+ const prompt = document.getElementById('s-prompt');
727
+ const model = document.getElementById('s-model');
728
+ if (name) body.name = name.value;
729
+ if (desc) body.description = desc.value;
730
+ if (icon) body.icon = icon.value;
731
+ if (prompt) body.systemPrompt = prompt.value;
732
+ if (model) body.model = model.value;
1643
733
 
1644
- async function createAgent() {
1645
- const btn = document.getElementById('create-btn');
1646
- btn.textContent = '⏳ Creating...';
1647
- btn.disabled = true;
1648
734
  try {
1649
- const res = await fetch(`${API}/api/agents`, {
1650
- method: 'POST',
1651
- headers: { 'Content-Type': 'application/json' },
1652
- body: JSON.stringify({
1653
- name: document.getElementById('agent-name').value || selectedTemplate?.name,
1654
- templateId: selectedTemplate?.id,
1655
- description: document.getElementById('agent-desc').value,
1656
- model: document.getElementById('agent-model').value,
1657
- language: document.getElementById('agent-lang').value,
1658
- }),
735
+ await fetch(`${API}/api/agents/${currentAgentId}`, {
736
+ method: 'PUT', headers: { 'Content-Type': 'application/json' },
737
+ body: JSON.stringify(body)
1659
738
  });
1660
- const agent = await res.json();
1661
- // Reset wizard
1662
- wizardStep = 1;
1663
- selectedTemplate = null;
1664
- document.getElementById('agent-name').value = '';
1665
- document.getElementById('agent-desc').value = '';
1666
- // Navigate to chat
1667
- openChat(agent.id);
1668
- } catch(e) {
1669
- alert('Failed to create agent: ' + e.message);
1670
- }
1671
- btn.textContent = '🚀 Create Agent';
1672
- btn.disabled = false;
1673
- }
1674
-
1675
- // === Dashboard ===
1676
- function renderAgents() {
1677
- if (agents.length === 0) {
1678
- document.getElementById('agents-list').style.display = 'none';
1679
- document.getElementById('agents-empty').style.display = 'block';
1680
- return;
1681
- }
1682
- document.getElementById('agents-list').style.display = '';
1683
- document.getElementById('agents-empty').style.display = 'none';
1684
- document.getElementById('agents-list').innerHTML = agents.map(a => {
1685
- const timeAgo = getTimeAgo(a.lastActive || a.created);
1686
- return `
1687
- <div class="card agent-card" onclick="openChat('${a.id}')">
1688
- <div class="agent-actions">
1689
- <button onclick="event.stopPropagation();openDeleteDialog('${a.id}')">🗑️</button>
1690
- </div>
1691
- <div class="agent-icon">${a.templateIcon || '🤖'}</div>
1692
- <div class="agent-name">${a.name}</div>
1693
- <div class="agent-template">${a.templateName || 'Custom'}</div>
1694
- <div class="agent-stats">
1695
- <span>💬 ${a.messageCount || 0} messages</span>
1696
- <span>⏰ ${timeAgo}</span>
1697
- </div>
1698
- </div>
1699
- `;
1700
- }).join('');
739
+ showToast('✅ 已保存');
740
+ loadAgents();
741
+ } catch (e) { showToast('❌ 保存失败: ' + e.message); }
1701
742
  }
1702
743
 
1703
- function getTimeAgo(dateStr) {
1704
- const diff = Date.now() - new Date(dateStr).getTime();
1705
- const mins = Math.floor(diff / 60000);
1706
- if (mins < 1) return 'just now';
1707
- if (mins < 60) return `${mins}m ago`;
1708
- const hours = Math.floor(mins / 60);
1709
- if (hours < 24) return `${hours}h ago`;
1710
- const days = Math.floor(hours / 24);
1711
- return `${days}d ago`;
1712
- }
1713
-
1714
- // === Delete ===
1715
- function openDeleteDialog(id) { deleteTargetId = id; document.getElementById('delete-dialog').classList.add('show'); }
1716
- function closeDeleteDialog() { deleteTargetId = null; document.getElementById('delete-dialog').classList.remove('show'); }
1717
- async function confirmDelete() {
1718
- if (!deleteTargetId) return;
1719
- await fetch(`${API}/api/agents/${deleteTargetId}`, { method: 'DELETE' });
1720
- closeDeleteDialog();
1721
- loadAgents();
1722
- }
744
+ // ======================== Models Config ========================
745
+ async function loadModelsConfig() {
746
+ const el = document.getElementById('models-content');
747
+ try {
748
+ const [modelsRes, ollamaRes] = await Promise.all([
749
+ fetch(`${API}/api/settings/models`),
750
+ fetch(`${API}/api/settings/models/local`).catch(() => null)
751
+ ]);
752
+ modelsConfig = await modelsRes.json();
753
+ const ollama = ollamaRes ? await ollamaRes.json() : { available: false, models: [] };
1723
754
 
1724
- // === Chat ===
1725
- async function openLastChat() {
1726
- if (currentAgent) { openChat(currentAgent.id); return; }
1727
- const agentsRes = await fetch(`${API}/api/agents`).catch(() => null);
1728
- if (agentsRes) {
1729
- const data = await agentsRes.json().catch(() => ({}));
1730
- const list = data.agents || [];
1731
- if (list.length > 0) { openChat(list[0].id); return; }
1732
- }
1733
- navigate('dashboard');
1734
- }
755
+ let html = '';
1735
756
 
1736
- async function switchChatAgent(agentId) {
1737
- if (agentId && agentId !== currentAgent?.id) openChat(agentId);
1738
- }
757
+ // Ollama
758
+ html += `<div class="card">
759
+ <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
760
+ <span style="font-size:20px;">🦙</span><strong>本地模型（Ollama）</strong>
761
+ ${ollama.available ? '<span class="status-dot" style="width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;"></span><span style="font-size:12px;color:var(--green);">自动检测 · 无需 Key</span>' : '<span style="font-size:12px;color:var(--red);">未检测到</span>'}
762
+ </div>
763
+ ${ollama.available && ollama.models?.length ? `<table style="width:100%;font-size:13px;border-collapse:collapse;">
764
+ <tr><th style="text-align:left;padding:6px;border-bottom:1px solid var(--border);">模型</th><th style="text-align:left;padding:6px;border-bottom:1px solid var(--border);">大小</th><th style="text-align:left;padding:6px;border-bottom:1px solid var(--border);">状态</th></tr>
765
+ ${ollama.models.map(m => `<tr><td style="padding:6px;">${m.name}</td><td style="padding:6px;">${formatSize(m.size)}</td><td style="padding:6px;color:var(--green);">✅ 可用</td></tr>`).join('')}
766
+ </table>` : '<div style="font-size:13px;color:var(--text-muted);">请安装 Ollama 并拉取模型</div>'}
767
+ </div>`;
1739
768
 
1740
- async function openChat(agentId) {
1741
- try {
1742
- const res = await fetch(`${API}/api/agents/${agentId}`);
1743
- currentAgent = await res.json();
1744
- if (currentAgent.error) { navigate('dashboard'); return; }
1745
- } catch { navigate('dashboard'); return; }
1746
-
1747
- // Load history from localStorage, fallback to empty
1748
- const stored = localStorage.getItem(`opc-chat-${agentId}`);
1749
- chatMessages = stored ? JSON.parse(stored) : [];
1750
-
1751
- document.getElementById('chat-agent-icon').textContent = currentAgent.templateIcon || '🤖';
1752
- document.getElementById('chat-agent-name').textContent = currentAgent.name;
1753
- document.getElementById('chat-agent-status').textContent = `${currentAgent.templateName || 'Custom'} · ${currentAgent.model}`;
1754
-
1755
- // Populate agent selector
1756
- const sel = document.getElementById('chat-agent-select');
1757
- sel.innerHTML = agents.map(a => `<option value="${a.id}" ${a.id === agentId ? 'selected' : ''}>${a.templateIcon || '🤖'} ${a.name}</option>`).join('');
1758
-
1759
- // Render messages
1760
- const msgEl = document.getElementById('chat-messages');
1761
- if (chatMessages.length > 0) {
1762
- msgEl.innerHTML = chatMessages.map(m => `
1763
- <div class="msg ${m.role}">
1764
- <div class="msg-bubble">${m.content.replace(/</g,'&lt;')}</div>
769
+ // Cloud providers
770
+ const cloudProviders = [
771
+ { id: 'openai', name: 'OpenAI', models: 'GPT-4o ┬╖ GPT-4o-mini ┬╖ o1 ┬╖ o3' },
772
+ { id: 'deepseek', name: 'DeepSeek', models: 'DeepSeek-V3 ┬╖ DeepSeek-R1' },
773
+ { id: 'anthropic', name: 'Anthropic', models: 'Claude Opus ┬╖ Sonnet ┬╖ Haiku' },
774
+ { id: 'google', name: 'Google Gemini', models: 'Gemini Pro ┬╖ Flash ┬╖ Ultra' },
775
+ ];
776
+ const providers = modelsConfig.providers || {};
777
+
778
+ html += `<div class="card">
779
+ <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
780
+ <span style="font-size:20px;">☁️</span><strong>云端 API — 填 Key → 验证 → 解锁模型</strong>
1765
781
  </div>
1766
- `).join('');
1767
- } else {
1768
- msgEl.innerHTML = `
1769
- <div class="msg assistant">
1770
- <div class="msg-bubble">Hello! I'm ${currentAgent.name}. ${currentAgent.description ? 'I specialize in: ' + currentAgent.description : 'How can I help you today?'}</div>
782
+ <div class="card-grid">
783
+ ${cloudProviders.map(p => {
784
+ const cfg = providers[p.id] || {};
785
+ const verified = cfg.verified;
786
+ return `<div class="provider-card${verified ? ' verified' : ''}">
787
+ <div class="provider-name">${p.name} <span style="width:8px;height:8px;border-radius:50%;background:${verified ? 'var(--green)' : 'var(--red)'};display:inline-block;"></span></div>
788
+ <div class="provider-status" style="color:${verified ? 'var(--green)' : 'var(--red)'};">${verified ? '✅ 已验证' : '❌ 未配置'}</div>
789
+ <div class="provider-models">${verified ? '解锁：' : ''}${p.models}${verified ? '' : '（需配 Key）'}</div>
790
+ <div class="key-row">
791
+ <input class="key-input" id="key-${p.id}" type="password" placeholder="输入 API Key..." value="${cfg.apiKey ? '••••••••' : ''}">
792
+ <button class="verify-btn" onclick="verifyProvider('${p.id}')">验证</button>
793
+ </div>
794
+ </div>`;
795
+ }).join('')}
1771
796
  </div>
1772
- `;
1773
- }
1774
- document.getElementById('chat-input').value = '';
1775
-
1776
- showPage('chat');
1777
- location.hash = `/chat/${agentId}`;
1778
- document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
1779
- const chatNav = document.querySelector('.nav-item[data-page="chat"]');
1780
- if (chatNav) chatNav.classList.add('active');
1781
- msgEl.scrollTop = msgEl.scrollHeight;
1782
- document.getElementById('chat-input').focus();
1783
- }
1784
-
1785
- function clearChat() {
1786
- if (!currentAgent) return;
1787
- chatMessages = [];
1788
- localStorage.removeItem(`opc-chat-${currentAgent.id}`);
1789
- document.getElementById('chat-messages').innerHTML = `
1790
- <div class="msg assistant">
1791
- <div class="msg-bubble">Hello! I'm ${currentAgent.name}. How can I help you today?</div>
1792
- </div>
1793
- `;
1794
- }
1795
-
1796
- async function handleDocUpload(input) {
1797
- const file = input.files[0];
1798
- if (!file || !currentAgent) return;
1799
- input.value = '';
1800
-
1801
- // Show uploading status in chat
1802
- appendMessage('user', `📎 Uploading: ${file.name}`);
1803
- const statusEl = appendMessage('assistant', '⏳ Processing document...');
1804
-
1805
- try {
1806
- const formData = new FormData();
1807
- formData.append('file', file);
797
+ </div>`;
1808
798
 
1809
- const res = await fetch(`${API}/api/agents/${currentAgent.id}/upload`, {
1810
- method: 'POST',
1811
- body: formData,
1812
- });
799
+ // Agent model assignment
800
+ html += `<div class="card">
801
+ <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
802
+ <span style="font-size:20px;">🤖</span><strong>Agent 模型分配</strong>
803
+ <span style="font-size:12px;color:var(--text-muted);">（只显示已配通的模型）</span>
804
+ </div>
805
+ ${agents.length ? `<table style="width:100%;font-size:13px;border-collapse:collapse;">
806
+ <tr><th style="text-align:left;padding:6px;border-bottom:1px solid var(--border);">Agent</th><th style="text-align:left;padding:6px;border-bottom:1px solid var(--border);">模型</th><th style="text-align:left;padding:6px;border-bottom:1px solid var(--border);">来源</th></tr>
807
+ ${agents.map(a => `<tr><td style="padding:6px;">${a.icon || '🤖'} ${a.name || a.id}</td><td style="padding:6px;">${a.model || modelsConfig.chatModel || 'auto'}</td><td style="padding:6px;"><span class="tag ${a.model ? 'tag-green' : 'tag-blue'}">${a.model ? 'Agent 覆盖' : '全局默认'}</span></td></tr>`).join('')}
808
+ </table>` : '<div style="font-size:13px;color:var(--text-dim);">暂无 Agent</div>'}
809
+ </div>`;
1813
810
 
1814
- const data = await res.json();
1815
- if (data.error) {
1816
- statusEl.textContent = `❌ ${data.error}`;
1817
- } else {
1818
- statusEl.textContent = `✅ Learned ${data.learnedCount} knowledge chunks from "${file.name}"`;
1819
- }
811
+ el.innerHTML = html;
1820
812
  } catch (e) {
1821
- statusEl.textContent = `❌ Upload failed: ${e.message}`;
813
+ el.innerHTML = `<div style="color:var(--red);">加载失败: ${e.message}</div>`;
1822
814
  }
1823
815
  }
1824
816
 
1825
- async function sendMessage() {
1826
- const input = document.getElementById('chat-input');
1827
- const text = input.value.trim();
1828
- if (!text || !currentAgent) return;
1829
-
1830
- input.value = '';
1831
- chatMessages.push({ role: 'user', content: text });
1832
-
1833
- // Render user message
1834
- appendMessage('user', text);
1835
-
1836
- // Show typing + streaming indicator
1837
- document.getElementById('typing-indicator').classList.add('show');
1838
- document.getElementById('streaming-indicator').style.display = 'inline';
1839
- const msgContainer = document.getElementById('chat-messages');
1840
- msgContainer.scrollTop = msgContainer.scrollHeight;
817
+ async function verifyProvider(providerId) {
818
+ const keyInput = document.getElementById(`key-${providerId}`);
819
+ const apiKey = keyInput.value;
820
+ if (!apiKey || apiKey === '••••••••') { showToast('请输入 API Key'); return; }
1841
821
 
822
+ showToast('验证中...');
1842
823
  try {
1843
- const res = await fetch(`${API}/api/agents/${currentAgent.id}/chat`, {
1844
- method: 'POST',
1845
- headers: { 'Content-Type': 'application/json' },
1846
- body: JSON.stringify({ messages: chatMessages }),
824
+ const res = await fetch(`${API}/api/settings/models/test`, {
825
+ method: 'POST', headers: { 'Content-Type': 'application/json' },
826
+ body: JSON.stringify({ provider: providerId, apiKey })
1847
827
  });
1848
-
1849
- document.getElementById('typing-indicator').classList.remove('show');
1850
-
1851
- if (true) { // Always try SSE first — server returns text/event-stream for chat
1852
- // SSE streaming
1853
- const reader = res.body.getReader();
1854
- const decoder = new TextDecoder();
1855
- let assistantText = '';
1856
- const bubbleEl = appendMessage('assistant', '');
1857
-
1858
- while (true) {
1859
- const { done, value } = await reader.read();
1860
- if (done) break;
1861
- const chunk = decoder.decode(value);
1862
- const lines = chunk.split('\n');
1863
- for (const line of lines) {
1864
- if (line.startsWith('data: ')) {
1865
- const data = line.slice(6);
1866
- if (data === '[DONE]') break;
1867
- try {
1868
- const parsed = JSON.parse(data);
1869
- const content = parsed.choices?.[0]?.delta?.content || parsed.content || '';
1870
- assistantText += content;
1871
- bubbleEl.textContent = assistantText;
1872
- msgContainer.scrollTop = msgContainer.scrollHeight;
1873
- } catch {}
1874
- }
1875
- }
1876
- }
1877
- chatMessages.push({ role: 'assistant', content: assistantText });
1878
- } else {
1879
- const data = await res.json();
1880
- const reply = data.response || data.error || 'No response';
1881
- appendMessage('assistant', reply);
1882
- chatMessages.push({ role: 'assistant', content: reply });
1883
- }
1884
- // Persist to localStorage
1885
- if (currentAgent) {
1886
- try { localStorage.setItem(`opc-chat-${currentAgent.id}`, JSON.stringify(chatMessages.slice(-100))); } catch {}
1887
- }
1888
- } catch(e) {
1889
- document.getElementById('typing-indicator').classList.remove('show');
1890
- appendMessage('assistant', `Error: ${e.message}`);
1891
- } finally {
1892
- document.getElementById('streaming-indicator').style.display = 'none';
1893
- }
1894
- msgContainer.scrollTop = msgContainer.scrollHeight;
1895
- }
1896
-
1897
- function appendMessage(role, text) {
1898
- const msgContainer = document.getElementById('chat-messages');
1899
- const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
1900
- const div = document.createElement('div');
1901
- div.className = `msg ${role}`;
1902
- const bubble = document.createElement('div');
1903
- bubble.className = 'msg-bubble';
1904
- bubble.textContent = text;
1905
- div.appendChild(bubble);
1906
- const timeEl = document.createElement('div');
1907
- timeEl.className = 'msg-time';
1908
- timeEl.textContent = time;
1909
- div.appendChild(timeEl);
1910
- msgContainer.appendChild(div);
1911
- msgContainer.scrollTop = msgContainer.scrollHeight;
1912
- return bubble;
1913
- }
1914
-
1915
- // === Memory ===
1916
- function openMemory() {
1917
- if (currentAgent) openMemoryPage(currentAgent.id);
1918
- }
1919
-
1920
- async function openMemoryPage(agentId) {
1921
- showPage('memory');
1922
- location.hash = `/memory/${agentId}`;
1923
- try {
1924
- const res = await fetch(`${API}/api/agents/${agentId}/memory`);
1925
828
  const data = await res.json();
1926
- if (data.entries && data.entries.length > 0) {
1927
- document.getElementById('memory-empty').style.display = 'none';
1928
- document.getElementById('memory-timeline').innerHTML = `
1929
- <div class="timeline">
1930
- ${data.entries.map(e => `
1931
- <div class="timeline-item">
1932
- <div class="timeline-date">${new Date(e.timestamp).toLocaleDateString()} ${new Date(e.timestamp).toLocaleTimeString()}</div>
1933
- <div class="timeline-content">${e.summary || e.content || 'Learned something new'}</div>
1934
- </div>
1935
- `).join('')}
1936
- </div>
1937
- `;
829
+ if (data.success) {
830
+ // Save
831
+ await fetch(`${API}/api/settings/models`, {
832
+ method: 'PUT', headers: { 'Content-Type': 'application/json' },
833
+ body: JSON.stringify({ providers: { ...modelsConfig.providers, [providerId]: { apiKey, verified: true, models: data.models || [] } } })
834
+ });
835
+ showToast(`✅ ${providerId} 验证成功`);
836
+ loadModelsConfig();
1938
837
  } else {
1939
- document.getElementById('memory-empty').style.display = 'block';
1940
- document.getElementById('memory-timeline').innerHTML = '';
838
+ showToast(`❌ 验证失败: ${data.error || '无效的 API Key'}`);
1941
839
  }
1942
- } catch {
1943
- document.getElementById('memory-empty').style.display = 'block';
1944
- }
840
+ } catch (e) { showToast(`❌ 验证失败: ${e.message}`); }
1945
841
  }
1946
842
 
1947
- function navigateToChat() {
1948
- if (currentAgent) openChat(currentAgent.id);
1949
- else navigate('dashboard');
1950
- }
1951
-
1952
- // === Settings ===
1953
- let currentSettingsTab = 'models';
1954
- let currentProvider = null;
1955
- let currentChannel = null;
1956
- let modelConfig = {};
1957
- let statusRefreshTimer = null;
1958
-
1959
- function showSettings(tab) {
1960
- currentSettingsTab = tab;
1961
- document.querySelectorAll('.settings-nav-item').forEach(n => n.classList.remove('active'));
1962
- document.querySelector(`.settings-nav-item[data-settings="${tab}"]`)?.classList.add('active');
1963
- document.querySelectorAll('.settings-panel').forEach(p => p.classList.remove('active'));
1964
- document.getElementById(`sp-${tab}`)?.classList.add('active');
1965
-
1966
- if (tab === 'models') initModelsPanel();
1967
- if (tab === 'channels') initChannelsPanel();
1968
- if (tab === 'memory') initMemoryPanel();
1969
- if (tab === 'role') initRolePanel();
1970
- if (tab === 'status') refreshStatus();
1971
- if (tab === 'usage') refreshUsage();
1972
- if (tab === 'search') initSearchPanel();
1973
- }
1974
-
1975
- function switchModelTab(tab) {
1976
- document.querySelectorAll('#sp-models .tab').forEach(t => t.classList.remove('active'));
1977
- document.querySelectorAll('#sp-models .tab-panel').forEach(p => p.classList.remove('active'));
1978
- if (tab === 'local') {
1979
- document.querySelector('#sp-models .tab:first-child').classList.add('active');
1980
- document.getElementById('mt-local').classList.add('active');
1981
- } else {
1982
- document.querySelector('#sp-models .tab:last-child').classList.add('active');
1983
- document.getElementById('mt-cloud').classList.add('active');
1984
- }
1985
- }
1986
-
1987
- // --- Models Panel ---
1988
- async function initModelsPanel() {
843
+ // ======================== Knowledge ========================
844
+ async function loadKnowledge() {
1989
845
  try {
1990
- const res = await fetch(`${API}/api/settings/models`);
1991
- modelConfig = await res.json();
1992
- } catch { modelConfig = {}; }
1993
- detectOllama();
1994
- updateProviderStatuses();
1995
- updateModelDropdowns();
1996
- }
1997
-
1998
- async function detectOllama() {
1999
- const statusEl = document.getElementById('ollama-status');
2000
- const modelsEl = document.getElementById('ollama-models');
2001
- const tutorialEl = document.getElementById('ollama-tutorial');
2002
- statusEl.innerHTML = '<div style="display:flex;align-items:center;gap:8px;"><span class="status-dot yellow"></span> 正在检测本地 Ollama...</div>';
2003
- try {
2004
- const res = await fetch(`${API}/api/settings/models/local`);
846
+ const res = await fetch(`${API}/api/memory`);
2005
847
  const data = await res.json();
2006
- if (data.running) {
2007
- statusEl.innerHTML = '<div style="display:flex;align-items:center;gap:8px;"><span class="status-dot green"></span> <b>Ollama 运行中</b> — 本地模型可用，完全免费</div>';
2008
- tutorialEl.style.display = 'none';
2009
- if (data.models && data.models.length > 0) {
2010
- modelsEl.innerHTML = '<div class="card"><h3 style="font-size:15px;margin-bottom:12px;">已安装的模型</h3>' +
2011
- data.models.map(m => {
2012
- const size = m.size ? `${(m.size / 1e9).toFixed(1)}GB` : '';
2013
- const isChat = modelConfig.chatModel === m.name;
2014
- const isEmbed = modelConfig.embeddingModel === m.name;
2015
- const badge = isChat ? ' <span style="color:var(--accent);font-size:11px;">● 聊天</span>' : isEmbed ? ' <span style="color:var(--green);font-size:11px;">● 记忆</span>' : '';
2016
- return `<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);">
2017
- <div><span style="font-weight:500;">${m.name}</span>${badge}</div>
2018
- <span style="font-size:12px;color:var(--text-dim);">${size}</span>
2019
- </div>`;
2020
- }).join('') + '</div>';
2021
- // Update dropdowns with local models
2022
- updateModelDropdowns(data.models);
2023
- } else {
2024
- 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>';
2025
- }
2026
- } else {
2027
- statusEl.innerHTML = '<div style="display:flex;align-items:center;gap:8px;"><span class="status-dot red"></span> <b>Ollama 未运行</b> — 按照下面的教程安装</div>';
2028
- modelsEl.innerHTML = '';
2029
- tutorialEl.style.display = 'block';
2030
- }
2031
- } catch {
2032
- statusEl.innerHTML = '<div style="display:flex;align-items:center;gap:8px;"><span class="status-dot red"></span> 无法检测 Ollama</div>';
2033
- tutorialEl.style.display = 'block';
2034
- }
2035
- }
2036
-
2037
- function updateModelDropdowns(localModels) {
2038
- const chatSel = document.getElementById('cfg-chat-model');
2039
- const embedSel = document.getElementById('cfg-embed-model');
2040
- if (localModels && localModels.length > 0) {
2041
- const chatOpts = localModels.map(m => `<option value="${m.name}" ${modelConfig.chatModel === m.name ? 'selected' : ''}>${m.name}${m.name === 'qwen2.5:7b' ? ' ⭐ 推荐' : ''}</option>`).join('');
2042
- const embedOpts = localModels.map(m => `<option value="${m.name}" ${modelConfig.embeddingModel === m.name ? 'selected' : ''}>${m.name}${m.name === 'nomic-embed-text' ? ' ⭐ 推荐' : ''}</option>`).join('');
2043
- chatSel.innerHTML = chatOpts;
2044
- embedSel.innerHTML = embedOpts;
2045
- }
2046
- // Add cloud models if configured
2047
- const providers = modelConfig.providers || {};
2048
- const cloudModels = [];
2049
- if (providers.openai?.apiKey) cloudModels.push({name:'gpt-4o',label:'GPT-4o (OpenAI)'},{name:'gpt-4o-mini',label:'GPT-4o Mini (OpenAI)'});
2050
- if (providers.deepseek?.apiKey) cloudModels.push({name:'deepseek-chat',label:'DeepSeek V3'},{name:'deepseek-reasoner',label:'DeepSeek R1'});
2051
- if (providers.anthropic?.apiKey) cloudModels.push({name:'claude-sonnet-4-20250514',label:'Claude Sonnet (Anthropic)'});
2052
- if (providers.openrouter?.apiKey) cloudModels.push({name:'openrouter/auto',label:'OpenRouter Auto'});
2053
- cloudModels.forEach(m => {
2054
- chatSel.innerHTML += `<option value="${m.name}" ${modelConfig.chatModel === m.name ? 'selected' : ''}>${m.label}</option>`;
2055
- });
848
+ const items = data.memories || data.items || [];
849
+ document.getElementById('kb-total').textContent = items.length;
850
+ document.getElementById('kb-evolve').textContent = data.evolveCount || 0;
851
+ document.getElementById('kb-docs').textContent = data.docCount || 0;
852
+ } catch (e) { console.error('loadKnowledge:', e); }
2056
853
  }
2057
854
 
2058
- function updateProviderStatuses() {
2059
- const providers = modelConfig.providers || {};
2060
- ['openai','deepseek','qwen','anthropic','openrouter'].forEach(p => {
2061
- const el = document.getElementById(`pv-${p}`);
2062
- if (!el) return;
2063
- if (providers[p]?.apiKey) {
2064
- el.innerHTML = '<span style="color:var(--green);">✅ 已配置</span>';
2065
- el.closest('.provider-card')?.classList.add('configured');
2066
- } else {
2067
- el.innerHTML = '未配置';
2068
- el.closest('.provider-card')?.classList.remove('configured');
2069
- }
2070
- });
2071
- }
2072
-
2073
- async function saveModelAssignment() {
2074
- const chatModel = document.getElementById('cfg-chat-model').value;
2075
- const embeddingModel = document.getElementById('cfg-embed-model').value;
2076
- try {
2077
- await fetch(`${API}/api/settings/models`, {
2078
- method: 'PUT', headers: {'Content-Type':'application/json'},
2079
- body: JSON.stringify({ chatModel, embeddingModel })
2080
- });
2081
- modelConfig.chatModel = chatModel;
2082
- modelConfig.embeddingModel = embeddingModel;
2083
- } catch {}
2084
- }
855
+ function searchKnowledge(query) { /* TODO: filter knowledge */ }
2085
856
 
2086
- // --- Provider Dialog ---
2087
- const PROVIDER_INFO = {
2088
- openai: { name: 'OpenAI', desc: '需要 OpenAI 账号。获取 Key: platform.openai.com/api-keys', placeholder: 'sk-...' },
2089
- deepseek: { name: 'DeepSeek', desc: '国产大模型，性价比极高。获取 Key: platform.deepseek.com', placeholder: 'sk-...' },
2090
- qwen: { name: '通义千问', desc: '阿里云大模型。获取 Key: dashscope.console.aliyun.com', placeholder: 'sk-...' },
2091
- anthropic: { name: 'Anthropic', desc: 'Claude 系列模型。获取 Key: console.anthropic.com', placeholder: 'sk-ant-...' },
2092
- openrouter: { name: 'OpenRouter', desc: '100+ 模型聚合平台。获取 Key: openrouter.ai/keys', placeholder: 'sk-or-...' },
2093
- };
2094
-
2095
- function configureProvider(provider) {
2096
- currentProvider = provider;
2097
- const info = PROVIDER_INFO[provider] || {};
2098
- document.getElementById('pd-title').textContent = `配置 ${info.name || provider}`;
2099
- document.getElementById('pd-desc').textContent = info.desc || '';
2100
- document.getElementById('pd-apikey').placeholder = info.placeholder || 'API Key';
2101
- document.getElementById('pd-apikey').value = modelConfig.providers?.[provider]?.apiKey || '';
2102
- document.getElementById('pd-baseurl').value = modelConfig.providers?.[provider]?.baseUrl || '';
2103
- document.getElementById('pd-test-result').innerHTML = '';
2104
- document.getElementById('pd-baseurl-group').style.display = (provider === 'qwen' || provider === 'openrouter') ? 'block' : 'none';
2105
- document.getElementById('provider-dialog').classList.add('show');
2106
- }
2107
- function closeProviderDialog() { document.getElementById('provider-dialog').classList.remove('show'); currentProvider = null; }
2108
-
2109
- async function testProvider() {
2110
- const apiKey = document.getElementById('pd-apikey').value.trim();
2111
- const baseUrl = document.getElementById('pd-baseurl').value.trim();
2112
- const resultEl = document.getElementById('pd-test-result');
2113
- if (!apiKey) { resultEl.innerHTML = '<span style="color:var(--yellow);">请先填入 API Key</span>'; return; }
2114
- resultEl.innerHTML = '<span style="color:var(--text-muted);">⏳ 测试中...</span>';
857
+ // ======================== Workstation ========================
858
+ async function loadWorkstation() {
2115
859
  try {
2116
- const res = await fetch(`${API}/api/settings/models/test`, {
2117
- method: 'POST', headers: {'Content-Type':'application/json'},
2118
- body: JSON.stringify({ provider: currentProvider, apiKey, baseUrl: baseUrl || undefined })
2119
- });
860
+ const res = await fetch(`${API}/api/templates?industry=${wsState.industry || ''}&q=`);
2120
861
  const data = await res.json();
2121
- resultEl.innerHTML = data.success ? '<span style="color:var(--green);">✅ 连接成功！</span>' : `<span style="color:var(--red);">❌ 连接失败 (${data.error || data.statusCode})</span>`;
2122
- } catch(e) {
2123
- resultEl.innerHTML = `<span style="color:var(--red);">❌ 网络错误</span>`;
862
+ renderWorkstation(data);
863
+ } catch (e) {
864
+ document.getElementById('ws-content').innerHTML = `<div style="color:var(--red);">加载失败: ${e.message}</div>`;
2124
865
  }
2125
866
  }
2126
867
 
2127
- async function saveProvider() {
2128
- const apiKey = document.getElementById('pd-apikey').value.trim();
2129
- const baseUrl = document.getElementById('pd-baseurl').value.trim();
2130
- if (!modelConfig.providers) modelConfig.providers = {};
2131
- modelConfig.providers[currentProvider] = { apiKey, baseUrl: baseUrl || undefined };
2132
- try {
2133
- await fetch(`${API}/api/settings/models`, {
2134
- method: 'PUT', headers: {'Content-Type':'application/json'},
2135
- body: JSON.stringify({ providers: modelConfig.providers })
2136
- });
2137
- } catch {}
2138
- updateProviderStatuses();
2139
- updateModelDropdowns();
2140
- closeProviderDialog();
868
+ function wsNavigate(level, value) {
869
+ if (level === 'root') { wsState = { level: 'root', industry: null, job: null }; }
870
+ else if (level === 'industry') { wsState = { level: 'industry', industry: value, job: null }; }
871
+ else if (level === 'job') { wsState.level = 'job'; wsState.job = value; }
872
+ loadWorkstation();
2141
873
  }
2142
874
 
2143
- // --- Channels Panel ---
2144
- const CHANNELS = [
2145
- { 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>'}] },
2146
- { id: 'wechat', name: '微信', icon: '💬', fields: [], comingSoon: true },
2147
- { id: 'feishu', name: '飞书', icon: '🐦', fields: [{key:'appId',label:'App ID',placeholder:'cli_...'},{key:'appSecret',label:'App Secret',placeholder:'',type:'password'}] },
2148
- { id: 'discord', name: 'Discord', icon: '🎮', fields: [{key:'botToken',label:'Bot Token',placeholder:'',type:'password'}] },
2149
- { id: 'slack', name: 'Slack', icon: '💼', fields: [{key:'botToken',label:'Bot Token',placeholder:'xoxb-...',type:'password'}] },
2150
- { 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'}] },
2151
- { id: 'web', name: 'Web', icon: '🌐', fields: [], alwaysOn: true },
2152
- { id: 'whatsapp', name: 'WhatsApp', icon: '📱', fields: [{key:'phoneId',label:'Phone Number ID',placeholder:''},{key:'accessToken',label:'Access Token',placeholder:'',type:'password'}] },
2153
- ];
2154
-
2155
- let channelConfigs = {};
2156
-
2157
- async function initChannelsPanel() {
2158
- try {
2159
- const res = await fetch(`${API}/api/settings/channels`);
2160
- channelConfigs = await res.json();
2161
- } catch { channelConfigs = {}; }
2162
- renderChannels();
2163
- }
875
+ function renderWorkstation(data) {
876
+ const el = document.getElementById('ws-content');
877
+ const bc = document.getElementById('ws-breadcrumb');
878
+ const templates = data.templates || [];
879
+ const industries = data.industries || [];
2164
880
 
2165
- function renderChannels() {
2166
- document.getElementById('channels-grid').innerHTML = CHANNELS.map(ch => {
2167
- const cfg = channelConfigs[ch.id] || {};
2168
- const connected = ch.alwaysOn || (cfg && Object.keys(cfg).some(k => k !== 'updated' && cfg[k]));
2169
- const statusDot = ch.comingSoon ? 'yellow' : connected ? 'green' : 'red';
2170
- const statusText = ch.comingSoon ? '即将支持' : connected ? '已连接' : '未配置';
2171
- return `<div class="card channel-card" onclick="${ch.comingSoon ? '' : `configureChannel('${ch.id}')`}" style="${ch.comingSoon ? 'opacity:0.6;cursor:default;' : ''}">
2172
- <div class="ch-icon">${ch.icon}</div>
2173
- <div class="ch-info">
2174
- <div class="ch-name">${ch.name}</div>
2175
- <div class="ch-status"><span class="status-dot ${statusDot}"></span> ${statusText}</div>
2176
- </div>
2177
- ${!ch.comingSoon && !ch.alwaysOn ? '<span style="color:var(--text-dim);font-size:18px;">›</span>' : ''}
2178
- ${ch.alwaysOn ? '<span style="font-size:12px;color:var(--green);">默认开启</span>' : ''}
2179
- </div>`;
2180
- }).join('');
2181
- }
2182
-
2183
- function configureChannel(chId) {
2184
- const ch = CHANNELS.find(c => c.id === chId);
2185
- if (!ch || ch.comingSoon) return;
2186
- if (ch.alwaysOn) return;
2187
- currentChannel = chId;
2188
- const cfg = channelConfigs[chId] || {};
2189
- document.getElementById('cd-title').textContent = `配置 ${ch.name}`;
2190
- document.getElementById('cd-desc').textContent = '';
2191
- document.getElementById('cd-fields').innerHTML = ch.fields.map(f =>
2192
- `<div class="form-group">
2193
- <label class="label">${f.label}</label>
2194
- <input class="input" id="cf-${f.key}" type="${f.type || 'text'}" placeholder="${f.placeholder || ''}" value="${cfg[f.key] || ''}">
2195
- ${f.help ? `<p style="font-size:12px;color:var(--text-dim);margin-top:4px;">${f.help}</p>` : ''}
2196
- </div>`
2197
- ).join('');
2198
- document.getElementById('channel-dialog').classList.add('show');
2199
- }
2200
- function closeChannelDialog() { document.getElementById('channel-dialog').classList.remove('show'); currentChannel = null; }
2201
-
2202
- async function saveChannel() {
2203
- const ch = CHANNELS.find(c => c.id === currentChannel);
2204
- if (!ch) return;
2205
- const cfg = {};
2206
- ch.fields.forEach(f => { cfg[f.key] = document.getElementById(`cf-${f.key}`)?.value?.trim() || ''; });
2207
- try {
2208
- await fetch(`${API}/api/settings/channels/${currentChannel}`, {
2209
- method: 'PUT', headers: {'Content-Type':'application/json'},
2210
- body: JSON.stringify(cfg)
2211
- });
2212
- channelConfigs[currentChannel] = cfg;
2213
- } catch {}
2214
- renderChannels();
2215
- closeChannelDialog();
2216
- }
2217
-
2218
- // --- Memory Panel (DeepBrain iframe) ---
2219
- async function initMemoryPanel() {
2220
- const container = document.getElementById('memory-module-frame');
2221
- const running = await checkModulePort(4001);
2222
- if (running) {
2223
- container.innerHTML = `<div class="module-frame-container"><iframe src="http://localhost:4001" title="DeepBrain 记忆管理"></iframe></div>`;
2224
- } else {
2225
- container.innerHTML = `<div class="card module-frame-fallback">
2226
- <div class="mf-icon">🧠</div>
2227
- <h3 style="margin-bottom:8px;">DeepBrain 未运行</h3>
2228
- <p style="color:var(--text-muted);font-size:14px;margin-bottom:16px;">记忆管理由 DeepBrain 模块提供（端口 4001）</p>
2229
- <a href="http://localhost:4001" target="_blank" class="btn btn-primary">🔗 打开记忆管理</a>
2230
- <p style="color:var(--text-dim);font-size:12px;margin-top:12px;">如果按钮无法打开，请先启动 DeepBrain 服务</p>
2231
- </div>`;
881
+ // Breadcrumb
882
+ let bcHtml = '<a onclick="wsNavigate(\'root\')">全部行业</a>';
883
+ if (wsState.industry) {
884
+ bcHtml += `<span class="sep">›</span><a onclick="wsNavigate('industry','${wsState.industry}')">${wsState.industry}</a>`;
2232
885
  }
2233
- }
2234
-
2235
- // --- Role Panel (Workstation iframe) ---
2236
- async function initRolePanel() {
2237
- const container = document.getElementById('role-module-frame');
2238
- const running = await checkModulePort(4003);
2239
- if (running) {
2240
- container.innerHTML = `<div class="module-frame-container"><iframe src="http://localhost:4003" title="Workstation 角色编辑"></iframe></div>`;
2241
- } else {
2242
- container.innerHTML = `<div class="card module-frame-fallback">
2243
- <div class="mf-icon">👤</div>
2244
- <h3 style="margin-bottom:8px;">Workstation 未运行</h3>
2245
- <p style="color:var(--text-muted);font-size:14px;margin-bottom:16px;">角色编辑由 Workstation 模块提供（端口 4003）</p>
2246
- <a href="http://localhost:4003" target="_blank" class="btn btn-primary">🔗 打开角色编辑</a>
2247
- <p style="color:var(--text-dim);font-size:12px;margin-top:12px;">如果按钮无法打开，请先启动 Workstation 服务</p>
2248
- </div>`;
886
+ if (wsState.job) {
887
+ bcHtml += `<span class="sep">›</span><span style="color:var(--text);font-weight:500;">${wsState.job}</span>`;
2249
888
  }
2250
- }
2251
-
2252
- async function checkModulePort(port) {
2253
- try {
2254
- const res = await fetch(`${API}/api/modules`);
2255
- const data = await res.json();
2256
- const mod = (data.modules || []).find(m => m.port === port);
2257
- return mod?.running || false;
2258
- } catch { return false; }
2259
- }
2260
-
2261
- // --- Status Panel ---
2262
- async function refreshStatus() {
2263
- try {
2264
- const res = await fetch(`${API}/api/settings/status`);
2265
- const data = await res.json();
889
+ bc.innerHTML = bcHtml;
2266
890
 
2267
- // Overview cards
2268
- const upHrs = Math.floor(data.uptime / 3600);
2269
- const upMins = Math.floor((data.uptime % 3600) / 60);
2270
- const memMB = Math.round((data.memory?.rss || 0) / 1048576);
891
+ if (wsState.level === 'root') {
892
+ // Show industries
893
+ const uniqueIndustries = [...new Set(templates.map(t => t.industry || t.industryZh).filter(Boolean))];
894
+ if (industries.length) uniqueIndustries.push(...industries.map(i => i.nameZh || i.name || i.id).filter(n => !uniqueIndustries.includes(n)));
2271
895
 
2272
- document.getElementById('status-overview').innerHTML = `
2273
- <div class="card-grid" style="margin-bottom:16px;">
2274
- <div class="card stat-card">
2275
- <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;">
2276
- <span class="status-dot green"></span><span style="font-size:14px;font-weight:600;">运行中</span>
2277
- </div>
2278
- <div class="stat-value">${upHrs}h ${upMins}m</div>
2279
- <div class="stat-label">运行时间</div>
2280
- </div>
2281
- <div class="card stat-card">
2282
- <div class="stat-value">${memMB} MB</div>
2283
- <div class="stat-label">内存占用</div>
2284
- </div>
2285
- <div class="card stat-card">
2286
- <div class="stat-value">${(data.modules || []).filter(m => m.running).length}/${(data.modules || []).length}</div>
2287
- <div class="stat-label">模块在线</div>
896
+ el.innerHTML = `
897
+ <div class="card" style="border-left:4px solid var(--blue);">
898
+ <div style="font-weight:600;margin-bottom:12px;">🏢 选择行业</div>
899
+ <div class="filter-row">
900
+ ${uniqueIndustries.map(i => `<div class="filter-tag" onclick="wsNavigate('industry','${i}')">${i}</div>`).join('')}
901
+ ${!uniqueIndustries.length ? '<div style="color:var(--text-dim);font-size:13px;">暂无模板</div>' : ''}
2288
902
  </div>
2289
903
  </div>
2290
- <div class="card" style="margin-bottom:16px;">
2291
- <h3 style="font-size:15px;margin-bottom:12px;">模块状态</h3>
2292
- ${(data.modules || []).map(m => `<div style="display:flex;align-items:center;gap:10px;padding:6px 0;">
2293
- <span class="status-dot ${m.running ? 'green' : 'red'}"></span>
2294
- <span>${m.icon} ${m.name}</span>
2295
- <span style="color:var(--text-dim);font-size:12px;margin-left:auto;">:${m.port}</span>
2296
- </div>`).join('')}
2297
- </div>
2298
904
  `;
905
+ } else if (wsState.level === 'industry') {
906
+ // Show jobs for selected industry
907
+ const filtered = templates.filter(t => (t.industry || t.industryZh) === wsState.industry);
908
+ const jobs = [...new Set(filtered.map(t => t.tags?.[1] || t.function || 'ΘÇÜτö¿').filter(Boolean))];
2299
909
 
2300
- // Logs
2301
- const logsEl = document.getElementById('status-logs');
2302
- if (data.logs && data.logs.length > 0) {
2303
- logsEl.textContent = data.logs.join('\n');
2304
- logsEl.scrollTop = logsEl.scrollHeight;
2305
- } else {
2306
- logsEl.textContent = '暂无日志。Agent 运行后日志会显示在这里。';
2307
- }
2308
- } catch {
2309
- document.getElementById('status-overview').innerHTML = '<div class="card"><p style="color:var(--text-muted);">无法获取状态信息</p></div>';
2310
- }
2311
- }
2312
-
2313
- // --- Usage Panel ---
2314
- async function refreshUsage() {
2315
- try {
2316
- const res = await fetch(`${API}/api/settings/usage`);
2317
- const data = await res.json();
2318
- const totalTokens = data.totalTokens || 0;
2319
- const totalCost = data.totalCost || 0;
2320
- const byModel = data.byModel || {};
2321
- const daily = data.daily || [];
2322
-
2323
- document.getElementById('usage-stats').innerHTML = `
2324
- <div class="card-grid" style="margin-bottom:24px;">
2325
- <div class="card stat-card">
2326
- <div class="stat-value">${totalTokens > 1000 ? (totalTokens/1000).toFixed(1) + 'K' : totalTokens}</div>
2327
- <div class="stat-label">总 Token 消耗</div>
2328
- </div>
2329
- <div class="card stat-card">
2330
- <div class="stat-value">$${totalCost.toFixed(4)}</div>
2331
- <div class="stat-label">估算费用</div>
2332
- </div>
2333
- <div class="card stat-card">
2334
- <div class="stat-value">${Object.keys(byModel).length || 0}</div>
2335
- <div class="stat-label">使用模型数</div>
910
+ el.innerHTML = `
911
+ <div class="card" style="border-left:4px solid var(--green);">
912
+ <div style="font-weight:600;margin-bottom:12px;">👔 ${wsState.industry} — 选择岗位</div>
913
+ <div class="filter-row">
914
+ ${jobs.map(j => `<div class="filter-tag" onclick="wsNavigate('job','${j}')">${j}</div>`).join('')}
915
+ ${!jobs.length ? '<div style="color:var(--text-dim);font-size:13px;">暂无岗位</div>' : ''}
2336
916
  </div>
2337
917
  </div>
2338
- ${Object.keys(byModel).length > 0 ? `
2339
- <div class="card" style="margin-bottom:16px;">
2340
- <h3 style="font-size:15px;margin-bottom:12px;">按模型分布</h3>
2341
- ${Object.entries(byModel).map(([m, v]) => `<div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);">
2342
- <span style="font-size:14px;">${m}</span>
2343
- <span style="font-size:13px;color:var(--text-muted);">${v.tokens || 0} tokens · $${(v.cost || 0).toFixed(4)}</span>
2344
- </div>`).join('')}
2345
- </div>
2346
- ` : ''}
2347
- ${totalTokens === 0 ? `
2348
- <div class="card" style="text-align:center;padding:40px;">
2349
- <div style="font-size:36px;margin-bottom:12px;">📊</div>
2350
- <p style="color:var(--text-muted);">还没有使用记录。开始和 Agent 聊天后，用量数据会自动记录在这里。</p>
2351
- ${modelConfig.mode === 'local' || !modelConfig.mode ? '<p style="color:var(--green);font-size:13px;margin-top:8px;">💡 使用本地模型完全免费，不产生费用</p>' : ''}
918
+ <div class="card-grid">
919
+ ${filtered.slice(0, 12).map(t => renderTemplateCard(t)).join('')}
920
+ </div>
921
+ `;
922
+ } else {
923
+ // Show specific templates
924
+ const filtered = templates.filter(t =>
925
+ (t.industry || t.industryZh) === wsState.industry &&
926
+ (t.tags?.[1] || t.function || 'ΘÇÜτö¿') === wsState.job
927
+ );
928
+ el.innerHTML = `
929
+ <div class="card" style="border-left:4px solid var(--yellow);">
930
+ <div style="font-weight:600;margin-bottom:12px;">🖥️ ${wsState.industry} › ${wsState.job} — 工位模板</div>
931
+ <div class="card-grid" style="margin:0;">
932
+ ${filtered.map(t => renderTemplateCard(t)).join('')}
933
+ ${!filtered.length ? '<div style="color:var(--text-dim);font-size:13px;">暂无模板</div>' : ''}
2352
934
  </div>
2353
- ` : ''}
935
+ </div>
936
+ <div style="background:var(--blue-light);border:1px solid var(--blue);border-radius:var(--radius-sm);padding:16px;margin-top:16px;font-size:13px;">
937
+ <strong style="color:var(--blue);">💡 Skill 自动叠加：</strong>选择工位模板后，Agent 自动获得行业 + 岗位 + 工位三层 Skill。
938
+ </div>
2354
939
  `;
2355
- } catch {
2356
- document.getElementById('usage-stats').innerHTML = '<div class="card"><p style="color:var(--text-muted);">无法获取用量数据</p></div>';
2357
940
  }
2358
941
  }
2359
942
 
2360
- // === Web Search Settings ===
2361
- async function initSearchPanel() {
2362
- try {
2363
- const res = await fetch(`${API}/api/settings/search`);
2364
- const cfg = await res.json();
2365
- document.getElementById('search-enabled').checked = cfg.enabled !== false;
2366
- document.getElementById('search-engine').value = cfg.defaultEngine || 'duckduckgo';
2367
- updateSearchEngineUI(cfg.defaultEngine || 'duckduckgo');
2368
- if (cfg.engines) {
2369
- const eng = cfg.engines[cfg.defaultEngine];
2370
- if (eng?.apiKey) document.getElementById('search-apikey').value = eng.apiKey;
2371
- if (eng?.baseUrl) document.getElementById('search-baseurl').value = eng.baseUrl;
2372
- }
2373
- } catch { /* defaults are fine */ }
2374
- }
2375
-
2376
- function updateSearchEngineUI(engine) {
2377
- const needsKey = ['brave', 'google'].includes(engine);
2378
- const needsUrl = engine === 'searxng';
2379
- document.getElementById('search-apikey-group').style.display = needsKey ? '' : 'none';
2380
- document.getElementById('search-baseurl-group').style.display = needsUrl ? '' : 'none';
2381
- if (engine === 'brave') document.getElementById('search-apikey-label').textContent = 'Brave Search API Key';
2382
- if (engine === 'google') document.getElementById('search-apikey-label').textContent = 'Google API Key:CX';
943
+ function renderTemplateCard(t) {
944
+ const skills = t.skills || [];
945
+ return `<div class="card" style="cursor:pointer;" onclick="useTemplate('${t.id}')">
946
+ <div style="font-size:24px;margin-bottom:8px;">${t.icon || '🤖'}</div>
947
+ <div style="font-weight:600;">${t.nameZh || t.name}</div>
948
+ <div style="font-size:12px;color:var(--text-muted);margin:4px 0;">${t.descriptionZh || t.description || ''}</div>
949
+ ${skills.length ? `<div style="margin:4px 0;">${skills.slice(0, 3).map(s => `<span class="tag tag-yellow">${s}</span>`).join('')}</div>` : ''}
950
+ <button class="btn-primary" style="width:100%;margin-top:8px;font-size:12px;" onclick="event.stopPropagation();useTemplate('${t.id}')">使用模板</button>
951
+ </div>`;
2383
952
  }
2384
953
 
2385
- async function updateSearchConfig() {
2386
- const engine = document.getElementById('search-engine').value;
2387
- updateSearchEngineUI(engine);
2388
- const cfg = {
2389
- enabled: document.getElementById('search-enabled').checked,
2390
- defaultEngine: engine,
2391
- engines: {}
2392
- };
2393
- cfg.engines[engine] = { enabled: true };
2394
- const apiKey = document.getElementById('search-apikey').value;
2395
- const baseUrl = document.getElementById('search-baseurl').value;
2396
- if (apiKey) cfg.engines[engine].apiKey = apiKey;
2397
- if (baseUrl) cfg.engines[engine].baseUrl = baseUrl;
2398
- cfg.engines.duckduckgo = { enabled: true };
954
+ async function useTemplate(tplId) {
2399
955
  try {
2400
- await fetch(`${API}/api/settings/search`, {
2401
- method: 'PUT', headers: { 'Content-Type': 'application/json' },
2402
- body: JSON.stringify(cfg)
2403
- });
2404
- } catch { /* silent */ }
2405
- }
2406
-
2407
- async function testSearch() {
2408
- const el = document.getElementById('search-test-result');
2409
- el.innerHTML = '<span style="color:var(--yellow);">🔍 正在搜索...</span>';
956
+ const res = await fetch(`${API}/api/templates/${tplId}`);
957
+ const tpl = await res.json();
958
+ // Pre-fill new agent form
959
+ document.getElementById('new-agent-name').value = tpl.nameZh || tpl.name || '';
960
+ document.getElementById('new-agent-desc').value = tpl.descriptionZh || tpl.description || '';
961
+ document.getElementById('new-agent-icon').value = tpl.icon || '🤖';
962
+ document.getElementById('new-agent-prompt').value = tpl.systemPrompt || '';
963
+ navigate('new-agent');
964
+ showToast(`已加载模板: ${tpl.nameZh || tpl.name}`);
965
+ } catch (e) { showToast('❌ 加载模板失败: ' + e.message); }
966
+ }
967
+
968
+ function searchTemplates(query) { /* TODO: search filter */ }
969
+
970
+ // ======================== Channels ========================
971
+ async function loadChannels() {
972
+ const el = document.getElementById('channels-content');
2410
973
  try {
2411
- const res = await fetch(`${API}/api/settings/search/test`, {
2412
- method: 'POST', headers: { 'Content-Type': 'application/json' },
2413
- body: JSON.stringify({ query: 'hello world test' })
2414
- });
2415
- const data = await res.json();
2416
- if (data.success && data.results?.length) {
2417
- el.innerHTML = `<span style="color:var(--green);">✅ 搜索成功！找到 ${data.results.length} 条结果</span><br>` +
2418
- 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('');
2419
- } else {
2420
- el.innerHTML = `<span style="color:var(--red);">❌ ${data.error || '未找到结果'}</span>`;
2421
- }
2422
- } catch (e) {
2423
- el.innerHTML = `<span style="color:var(--red);">❌ 测试失败: ${e.message}</span>`;
2424
- }
2425
- }
2426
-
2427
- // === Health Dashboard ===
2428
- async function loadHealthDashboard() {
2429
- const el = document.getElementById('health-section');
2430
- if (!el) return;
2431
- try {
2432
- const [modRes, ollamaRes] = await Promise.all([
2433
- fetch(`${API}/api/modules`),
2434
- fetch(`${API}/api/settings/models/local`),
2435
- ]);
2436
- const modData = await modRes.json();
2437
- const ollamaData = await ollamaRes.json();
2438
- const modules = modData.modules || [];
2439
- const runningCount = modules.filter(m => m.running).length;
2440
- el.innerHTML = `
2441
- <div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;">
2442
- ${modules.map(m => `
2443
- <div class="card" style="flex:1;min-width:140px;display:flex;align-items:center;gap:10px;padding:12px 14px;">
2444
- <span class="status-dot ${m.running ? 'green' : 'red'}"></span>
2445
- <span style="font-size:13px;">${m.icon} ${m.name}</span>
2446
- <span style="font-size:11px;color:var(--text-dim);margin-left:auto;">:${m.port}</span>
974
+ const res = await fetch(`${API}/api/settings/channels`);
975
+ const channels = await res.json();
976
+
977
+ const channelDefs = [
978
+ { id: 'telegram', name: 'Telegram', icon: '📱', fields: [{ key: 'token', label: 'Bot Token', placeholder: '123456:ABC-DEF...' }] },
979
+ { id: 'wechat', name: '微信', icon: '💬', fields: [{ key: 'appId', label: 'App ID' }, { key: 'appSecret', label: 'App Secret' }] },
980
+ { id: 'feishu', name: '飞书', icon: '🐦', fields: [{ key: 'appId', label: 'App ID' }, { key: 'appSecret', label: 'App Secret' }] },
981
+ { id: 'slack', name: 'Slack', icon: '💼', fields: [{ key: 'token', label: 'Bot Token' }] },
982
+ { id: 'discord', name: 'Discord', icon: '🎮', fields: [{ key: 'token', label: 'Bot Token' }] },
983
+ { id: 'email', name: 'Email', icon: '📧', fields: [{ key: 'smtp', label: 'SMTP 地址' }, { key: 'password', label: '密码' }] },
984
+ ];
985
+
986
+ el.innerHTML = `<div class="card-grid">${channelDefs.map(ch => {
987
+ const cfg = channels[ch.id] || {};
988
+ const configured = cfg.token || cfg.appId;
989
+ return `<div class="card">
990
+ <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
991
+ <span style="font-size:24px;">${ch.icon}</span>
992
+ <strong>${ch.name}</strong>
993
+ <span style="width:8px;height:8px;border-radius:50%;background:${configured ? 'var(--green)' : 'var(--border)'};display:inline-block;margin-left:auto;"></span>
994
+ </div>
995
+ ${ch.fields.map(f => `
996
+ <div class="form-group" style="margin-bottom:8px;">
997
+ <label class="form-label" style="font-size:12px;">${f.label}</label>
998
+ <input class="form-input" style="font-size:13px;" id="ch-${ch.id}-${f.key}" type="password" placeholder="${f.placeholder || ''}" value="${cfg[f.key] || ''}">
2447
999
  </div>
2448
1000
  `).join('')}
2449
- <div class="card" style="flex:1;min-width:140px;display:flex;align-items:center;gap:10px;padding:12px 14px;">
2450
- <span class="status-dot ${ollamaData.running ? 'green' : 'red'}"></span>
2451
- <span style="font-size:13px;">🦙 Ollama</span>
2452
- <span style="font-size:11px;color:var(--text-dim);margin-left:auto;">${ollamaData.running ? (ollamaData.models?.length || 0) + ' models' : 'offline'}</span>
2453
- </div>
2454
- </div>
2455
- `;
2456
- } catch {
2457
- el.innerHTML = '';
2458
- }
2459
- }
2460
-
2461
- // === First Run Wizard ===
2462
- let frStep = 1;
2463
- let frSelectedTemplate = null;
2464
- let frCreatedAgentId = null;
2465
-
2466
- async function checkFirstRun() {
2467
- // Skip first-run wizard — agents are configured via init
2468
- return;
2469
- }
2470
-
2471
- function showFirstRunWizard(data) {
2472
- frStep = 1;
2473
- const overlay = document.getElementById('first-run-overlay');
2474
- overlay.style.display = 'flex';
2475
- frRenderStep();
2476
- if (data?.ollamaDetected) {
2477
- const statusEl = document.getElementById('fr-ollama-status');
2478
- if (statusEl) {
2479
- 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>`;
2480
- const choiceEl = document.getElementById('fr-model-choice');
2481
- if (choiceEl) choiceEl.style.display = 'block';
2482
- const sel = document.getElementById('fr-model-select');
2483
- if (sel && data.ollamaModels?.length) {
2484
- 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>';
2485
- }
2486
- }
2487
- } else {
2488
- detectFrOllama();
1001
+ <button class="btn-primary" style="font-size:12px;" onclick="saveChannel('${ch.id}', [${ch.fields.map(f => `'${f.key}'`).join(',')}])">保存</button>
1002
+ </div>`;
1003
+ }).join('')}</div>`;
1004
+ } catch (e) {
1005
+ el.innerHTML = `<div style="color:var(--red);">加载失败: ${e.message}</div>`;
2489
1006
  }
2490
1007
  }
2491
1008
 
2492
- async function detectFrOllama() {
1009
+ async function saveChannel(channelId, fields) {
1010
+ const body = {};
1011
+ fields.forEach(f => { body[f] = document.getElementById(`ch-${channelId}-${f}`).value; });
2493
1012
  try {
2494
- const res = await fetch(`${API}/api/settings/models/local`);
2495
- const data = await res.json();
2496
- const statusEl = document.getElementById('fr-ollama-status');
2497
- const choiceEl = document.getElementById('fr-model-choice');
2498
- if (!statusEl) return;
2499
- if (data.running) {
2500
- 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>`;
2501
- if (choiceEl) choiceEl.style.display = 'block';
2502
- const sel = document.getElementById('fr-model-select');
2503
- if (sel && data.models?.length) {
2504
- 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>';
2505
- }
2506
- } else {
2507
- 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>`;
2508
- if (choiceEl) choiceEl.style.display = 'block';
2509
- }
2510
- } catch {}
2511
- }
2512
-
2513
- function frRenderStep() {
2514
- for (let i = 1; i <= 4; i++) {
2515
- const stepEl = document.getElementById(`fr-step-${i}`);
2516
- const panelEl = document.getElementById(`fr-panel-${i}`);
2517
- if (stepEl) stepEl.className = 'wizard-step' + (i < frStep ? ' done' : i === frStep ? ' active' : '');
2518
- if (panelEl) panelEl.className = 'wizard-panel' + (i === frStep ? ' active' : '');
2519
- }
2520
- }
2521
-
2522
- function frNext() {
2523
- if (frStep === 3 && !frSelectedTemplate) {
2524
- frSelectedTemplate = 'customer-service';
2525
- }
2526
- if (frStep === 3) {
2527
- frStep = 4;
2528
- frRenderStep();
2529
- frCreateAgent();
2530
- return;
2531
- }
2532
- if (frStep < 4) { frStep++; frRenderStep(); }
2533
- }
2534
-
2535
- function frBack() {
2536
- if (frStep > 1) { frStep--; frRenderStep(); }
1013
+ await fetch(`${API}/api/settings/channels/${channelId}`, {
1014
+ method: 'PUT', headers: { 'Content-Type': 'application/json' },
1015
+ body: JSON.stringify(body)
1016
+ });
1017
+ showToast(`✅ ${channelId} 已保存`);
1018
+ } catch (e) { showToast('❌ 保存失败: ' + e.message); }
2537
1019
  }
2538
1020
 
2539
- function frSelectTemplate(id) {
2540
- frSelectedTemplate = id;
2541
- document.querySelectorAll('#fr-template-list .card').forEach(c => {
2542
- c.style.borderColor = '';
2543
- c.style.background = '';
2544
- });
2545
- const el = document.getElementById(`fr-tpl-${id}`);
2546
- if (el) { el.style.borderColor = 'var(--accent)'; el.style.background = 'var(--accent-light)'; }
2547
- }
1021
+ // ======================== Create Agent ========================
1022
+ async function createAgent() {
1023
+ const name = document.getElementById('new-agent-name').value.trim();
1024
+ if (!name) { showToast('请输入名称'); return; }
1025
+
1026
+ const body = {
1027
+ name,
1028
+ description: document.getElementById('new-agent-desc').value,
1029
+ icon: document.getElementById('new-agent-icon').value || '🤖',
1030
+ systemPrompt: document.getElementById('new-agent-prompt').value,
1031
+ model: document.getElementById('new-agent-model').value,
1032
+ };
2548
1033
 
2549
- async function frCreateAgent() {
2550
- const model = document.getElementById('fr-model-select')?.value || 'qwen2.5:7b';
2551
1034
  try {
2552
- // Save first-run complete
2553
- await fetch(`${API}/api/first-run/complete`, {
2554
- method: 'POST',
2555
- headers: { 'Content-Type': 'application/json' },
2556
- body: JSON.stringify({ templateId: frSelectedTemplate, model }),
2557
- });
2558
- // Create the agent
2559
1035
  const res = await fetch(`${API}/api/agents`, {
2560
- method: 'POST',
2561
- headers: { 'Content-Type': 'application/json' },
2562
- body: JSON.stringify({ name: '', templateId: frSelectedTemplate || 'customer-service', model }),
1036
+ method: 'POST', headers: { 'Content-Type': 'application/json' },
1037
+ body: JSON.stringify(body)
2563
1038
  });
2564
- const agent = await res.json();
2565
- frCreatedAgentId = agent.id;
2566
- document.getElementById('fr-creating').style.display = 'none';
2567
- document.getElementById('fr-done').style.display = 'block';
1039
+ const data = await res.json();
1040
+ showToast(`✅ Agent "${name}" 已创建`);
2568
1041
  await loadAgents();
2569
- } catch(e) {
2570
- document.getElementById('fr-creating').innerHTML = `<div style="color:var(--red);">Error: ${e.message}</div>`;
2571
- }
2572
- }
2573
-
2574
- function frFinish() {
2575
- document.getElementById('first-run-overlay').style.display = 'none';
2576
- if (frCreatedAgentId) openChat(frCreatedAgentId);
2577
- else navigate('dashboard');
1042
+ navigate('agent', { id: data.id || name.toLowerCase().replace(/\s+/g, '-'), name, icon: body.icon });
1043
+ } catch (e) { showToast('❌ 创建失败: ' + e.message); }
2578
1044
  }
2579
1045
 
2580
- // === Drag & drop document upload ===
2581
- const chatArea = document.getElementById('chat-messages');
2582
- if (chatArea) {
2583
- chatArea.addEventListener('dragover', (e) => { e.preventDefault(); chatArea.style.outline = '2px dashed var(--primary)'; });
2584
- chatArea.addEventListener('dragleave', () => { chatArea.style.outline = ''; });
2585
- chatArea.addEventListener('drop', (e) => {
2586
- e.preventDefault();
2587
- chatArea.style.outline = '';
2588
- const file = e.dataTransfer?.files?.[0];
2589
- if (file) {
2590
- const dt = new DataTransfer();
2591
- dt.items.add(file);
2592
- const inp = document.getElementById('doc-upload-input');
2593
- inp.files = dt.files;
2594
- handleDocUpload(inp);
2595
- }
2596
- });
2597
- }
2598
-
2599
- // === Start ===
2600
- init();
2601
-
2602
- // =============================================
2603
- // === Schedules Management ===
2604
- // =============================================
2605
- let editingScheduleId = null;
2606
-
2607
- async function loadSchedules() {
1046
+ async function loadAvailableModels() {
1047
+ const sel = document.getElementById('new-agent-model');
1048
+ sel.innerHTML = '<option value="">使用全局默认</option>';
2608
1049
  try {
2609
- const res = await fetch('/api/schedules');
2610
- const tasks = await res.json();
2611
- const list = Array.isArray(tasks) ? tasks : [];
2612
- renderSchedules(list);
2613
- } catch(e) {
2614
- console.error('Failed to load schedules:', e);
2615
- renderSchedules([]);
2616
- }
2617
- }
2618
-
2619
- function renderSchedules(tasks) {
2620
- const listEl = document.getElementById('schedules-list');
2621
- const emptyEl = document.getElementById('schedules-empty');
2622
- if (!tasks.length) {
2623
- listEl.innerHTML = '';
2624
- emptyEl.style.display = '';
2625
- return;
2626
- }
2627
- emptyEl.style.display = 'none';
2628
- listEl.innerHTML = tasks.map(t => `
2629
- <div class="card" style="margin-bottom:12px;display:flex;align-items:center;gap:16px;">
2630
- <div style="font-size:28px;">⏰</div>
2631
- <div style="flex:1;">
2632
- <div style="font-size:15px;font-weight:600;">${esc(t.name)}</div>
2633
- <div style="font-size:12px;color:var(--text-muted);">${esc(t.description || '')}</div>
2634
- <div style="font-size:11px;color:var(--text-dim);margin-top:4px;">
2635
- ${esc(t.schedule)} · ${t.outputChannel || 'web'} · Next: ${t.nextRun ? new Date(t.nextRun).toLocaleString() : 'N/A'}
2636
- </div>
2637
- </div>
2638
- <div style="display:flex;gap:8px;align-items:center;">
2639
- <label style="position:relative;display:inline-block;width:40px;height:22px;cursor:pointer;">
2640
- <input type="checkbox" ${t.enabled ? 'checked' : ''} onchange="toggleSchedule('${t.id}', this.checked)" style="opacity:0;width:0;height:0;">
2641
- <span style="position:absolute;inset:0;border-radius:11px;background:${t.enabled ? 'var(--green)' : 'var(--border)'};transition:0.3s;"></span>
2642
- <span style="position:absolute;top:2px;left:${t.enabled ? '20px' : '2px'};width:18px;height:18px;border-radius:50%;background:white;transition:0.3s;"></span>
2643
- </label>
2644
- <button class="btn btn-sm btn-secondary" onclick="runScheduleNow('${t.id}')" title="Run now">▶️</button>
2645
- <button class="btn btn-sm btn-secondary" onclick="editSchedule('${t.id}')" title="Edit">✏️</button>
2646
- <button class="btn btn-sm btn-danger" onclick="deleteSchedule('${t.id}')" title="Delete">🗑</button>
2647
- </div>
2648
- </div>
2649
- `).join('');
2650
- }
2651
-
2652
- function esc(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
2653
-
2654
- function showScheduleForm(task) {
2655
- editingScheduleId = task ? task.id : null;
2656
- document.getElementById('schedule-form').style.display = '';
2657
- document.getElementById('schedule-form-title').textContent = task ? 'Edit Task' : 'New Scheduled Task';
2658
- document.getElementById('sched-name').value = task ? task.name : '';
2659
- document.getElementById('sched-frequency').value = task ? task.frequency : 'daily';
2660
- document.getElementById('sched-time').value = task ? (task.time || '09:00') : '09:00';
2661
- document.getElementById('sched-cron').value = task ? task.schedule : '';
2662
- document.getElementById('sched-desc').value = task ? task.description : '';
2663
- document.getElementById('sched-channel').value = task ? task.outputChannel : 'web';
2664
- onSchedFreqChange();
2665
- }
2666
-
2667
- function hideScheduleForm() {
2668
- document.getElementById('schedule-form').style.display = 'none';
2669
- editingScheduleId = null;
2670
- }
2671
-
2672
- function onSchedFreqChange() {
2673
- const freq = document.getElementById('sched-frequency').value;
2674
- document.getElementById('sched-time-group').style.display = freq === 'custom' ? 'none' : '';
2675
- document.getElementById('sched-cron-group').style.display = freq === 'custom' ? '' : 'none';
2676
- }
2677
-
2678
- async function saveSchedule() {
2679
- const data = {
2680
- name: document.getElementById('sched-name').value.trim(),
2681
- frequency: document.getElementById('sched-frequency').value,
2682
- time: document.getElementById('sched-time').value,
2683
- schedule: document.getElementById('sched-frequency').value === 'custom' ? document.getElementById('sched-cron').value.trim() : '',
2684
- description: document.getElementById('sched-desc').value.trim(),
2685
- outputChannel: document.getElementById('sched-channel').value,
2686
- enabled: true,
2687
- };
2688
- if (!data.name) { alert('Task name is required'); return; }
2689
- try {
2690
- if (editingScheduleId) {
2691
- await fetch(`/api/schedules/${editingScheduleId}`, { method: 'PUT', headers: {'Content-Type':'application/json'}, body: JSON.stringify(data) });
2692
- } else {
2693
- await fetch('/api/schedules', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify(data) });
2694
- }
2695
- hideScheduleForm();
2696
- loadSchedules();
2697
- } catch(e) { alert('Failed to save: ' + e.message); }
2698
- }
2699
-
2700
- async function toggleSchedule(id, enabled) {
2701
- await fetch(`/api/schedules/${id}`, { method: 'PUT', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ enabled }) });
2702
- loadSchedules();
2703
- }
2704
-
2705
- async function deleteSchedule(id) {
2706
- if (!confirm('Delete this task?')) return;
2707
- await fetch(`/api/schedules/${id}`, { method: 'DELETE' });
2708
- loadSchedules();
2709
- }
2710
-
2711
- async function runScheduleNow(id) {
2712
- await fetch(`/api/schedules/${id}/run`, { method: 'POST' });
2713
- alert('Task executed!');
2714
- loadSchedules();
2715
- }
2716
-
2717
- async function editSchedule(id) {
2718
- const res = await fetch('/api/schedules');
2719
- const tasks = await res.json();
2720
- const list = Array.isArray(tasks) ? tasks : [];
2721
- const task = list.find(t => t.id === id);
2722
- if (task) showScheduleForm(task);
2723
- }
2724
-
2725
- // =============================================
2726
- // === Voice Interaction ===
2727
- // =============================================
2728
- let voiceRecognition = null;
2729
- let isRecording = false;
2730
-
2731
- function toggleVoiceInput() {
2732
- if (isRecording) {
2733
- stopVoiceInput();
2734
- } else {
2735
- startVoiceInput();
2736
- }
2737
- }
2738
-
2739
- function startVoiceInput() {
2740
- const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
2741
- if (!SpeechRecognition) {
2742
- alert('Speech recognition is not supported in this browser. Try Chrome.');
2743
- return;
2744
- }
2745
- voiceRecognition = new SpeechRecognition();
2746
- voiceRecognition.continuous = false;
2747
- voiceRecognition.interimResults = true;
2748
- voiceRecognition.lang = navigator.language || 'en-US';
2749
-
2750
- voiceRecognition.onstart = () => {
2751
- isRecording = true;
2752
- const btn = document.getElementById('voice-btn');
2753
- btn.style.background = 'var(--red)';
2754
- btn.style.color = 'white';
2755
- btn.style.borderColor = 'var(--red)';
2756
- btn.textContent = '⏹';
2757
- };
2758
-
2759
- voiceRecognition.onresult = (event) => {
2760
- let transcript = '';
2761
- for (let i = event.resultIndex; i < event.results.length; i++) {
2762
- transcript += event.results[i][0].transcript;
1050
+ const [modelsRes, ollamaRes] = await Promise.all([
1051
+ fetch(`${API}/api/settings/models`),
1052
+ fetch(`${API}/api/settings/models/local`).catch(() => null)
1053
+ ]);
1054
+ const models = await modelsRes.json();
1055
+ const ollama = ollamaRes ? await ollamaRes.json() : { models: [] };
1056
+ if (ollama.models) {
1057
+ ollama.models.filter(m => !m.name?.includes('embed')).forEach(m => {
1058
+ sel.innerHTML += `<option value="ollama:${m.name}">${m.name} (Ollama)</option>`;
1059
+ });
2763
1060
  }
2764
- document.getElementById('chat-input').value = transcript;
2765
- };
2766
-
2767
- voiceRecognition.onend = () => {
2768
- isRecording = false;
2769
- const btn = document.getElementById('voice-btn');
2770
- btn.style.background = 'transparent';
2771
- btn.style.color = '';
2772
- btn.style.borderColor = 'var(--border)';
2773
- btn.textContent = '🎤';
2774
- // Auto-send if we got text
2775
- const input = document.getElementById('chat-input');
2776
- if (input.value.trim()) {
2777
- sendMessage();
1061
+ const providers = models.providers || {};
1062
+ for (const [name, cfg] of Object.entries(providers)) {
1063
+ if (cfg.verified && cfg.models) {
1064
+ cfg.models.forEach(m => { sel.innerHTML += `<option value="${name}:${m}">${m} (${name})</option>`; });
1065
+ }
2778
1066
  }
2779
- };
2780
-
2781
- voiceRecognition.onerror = (event) => {
2782
- console.error('Speech recognition error:', event.error);
2783
- isRecording = false;
2784
- const btn = document.getElementById('voice-btn');
2785
- btn.style.background = 'transparent';
2786
- btn.style.color = '';
2787
- btn.style.borderColor = 'var(--border)';
2788
- btn.textContent = '🎤';
2789
- };
2790
-
2791
- voiceRecognition.start();
2792
- }
2793
-
2794
- function stopVoiceInput() {
2795
- if (voiceRecognition) {
2796
- voiceRecognition.stop();
2797
- }
1067
+ } catch (e) { console.error('loadAvailableModels:', e); }
2798
1068
  }
2799
1069
 
2800
- function speakText(text) {
2801
- if (!window.speechSynthesis) return;
2802
- window.speechSynthesis.cancel();
2803
- const utterance = new SpeechSynthesisUtterance(text);
2804
- utterance.lang = navigator.language || 'en-US';
2805
- utterance.rate = 1.0;
2806
- window.speechSynthesis.speak(utterance);
2807
- }
1070
+ // ======================== Utils ========================
1071
+ function escapeHtml(s) { return s ? s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;') : ''; }
1072
+ function escapeAttr(s) { return s ? s.replace(/"/g, '&quot;').replace(/'/g, '&#39;') : ''; }
1073
+ function formatSize(bytes) { if (!bytes) return '?'; const gb = bytes / (1024*1024*1024); return gb >= 1 ? gb.toFixed(1) + ' GB' : (bytes / (1024*1024)).toFixed(0) + ' MB'; }
2808
1074
 
2809
- // Patch message rendering to add TTS button to assistant messages
2810
- const _origAppendMsg = typeof appendMessage === 'function' ? appendMessage : null;
2811
- if (typeof window._patchedMsgRender === 'undefined') {
2812
- window._patchedMsgRender = true;
2813
- const observer = new MutationObserver((mutations) => {
2814
- for (const m of mutations) {
2815
- for (const node of m.addedNodes) {
2816
- if (node.nodeType === 1 && node.classList?.contains('msg') && node.classList?.contains('assistant')) {
2817
- const bubble = node.querySelector('.msg-bubble');
2818
- if (bubble && !node.querySelector('.tts-btn')) {
2819
- const btn = document.createElement('button');
2820
- btn.className = 'tts-btn';
2821
- btn.textContent = '🔊';
2822
- btn.title = 'Read aloud';
2823
- 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);';
2824
- btn.onclick = () => speakText(bubble.textContent);
2825
- node.appendChild(btn);
2826
- }
2827
- }
2828
- }
2829
- }
2830
- });
2831
- const chatMsgs = document.getElementById('chat-messages');
2832
- if (chatMsgs) observer.observe(chatMsgs, { childList: true });
1075
+ function showToast(msg) {
1076
+ const el = document.getElementById('toast');
1077
+ el.textContent = msg;
1078
+ el.style.display = 'block';
1079
+ setTimeout(() => el.style.display = 'none', 3000);
2833
1080
  }
2834
1081
 
2835
- // =============================================
2836
- // === Image Generation Config ===
2837
- // =============================================
2838
- async function saveImageGenConfig() {
2839
- const data = {
2840
- openaiApiKey: document.getElementById('ig-openai-key').value.trim(),
2841
- sdApiUrl: document.getElementById('ig-sd-url').value.trim(),
2842
- replicateApiKey: document.getElementById('ig-replicate-key').value.trim(),
2843
- };
2844
- try {
2845
- await fetch('/api/image-gen/config', { method: 'PUT', headers: {'Content-Type':'application/json'}, body: JSON.stringify(data) });
2846
- document.getElementById('ig-status').textContent = '✅ Configuration saved!';
2847
- document.getElementById('ig-status').style.color = 'var(--green)';
2848
- } catch(e) {
2849
- document.getElementById('ig-status').textContent = '❌ Failed: ' + e.message;
2850
- document.getElementById('ig-status').style.color = 'var(--red)';
2851
- }
1082
+ // ======================== Init ========================
1083
+ async function init() {
1084
+ await loadAgents();
1085
+ navigate('assistant');
1086
+ // Refresh agent list every 5s
1087
+ setInterval(loadAgents, 5000);
2852
1088
  }
2853
1089
 
1090
+ init();
2854
1091
  </script>
2855
1092
  </body>
2856
1093
  </html>