opc-agent 4.0.30 → 4.0.31

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 (3) hide show
  1. package/dist/studio-ui/index.html +49 -44
  2. package/package.json +1 -1
  3. package/src/studio-ui/index.html +49 -44
package/dist/studio-ui/index.html CHANGED
@@ -7,15 +7,19 @@
7
7
  <style>
8
8
  * { margin: 0; padding: 0; box-sizing: border-box; }
9
9
  :root {
10
- --bg: #0a0a0a; --bg-card: #141414; --bg-hover: #1a1a1a; --bg-input: #1a1a1a;
11
- --border: #262626; --text: #e5e5e5; --text-muted: #737373; --text-dim: #525252;
12
- --accent: #3b82f6; --accent-hover: #2563eb; --accent-light: rgba(59,130,246,0.1);
13
- --green: #22c55e; --red: #ef4444; --yellow: #eab308; --purple: #a855f7;
14
- --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
15
- --mono: 'SF Mono', 'Fira Code', monospace;
16
- --radius: 10px; --radius-lg: 16px;
17
- }
18
- body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.5; }
10
+ --bg: #0a0a1a; --bg-card: rgba(255,255,255,0.03); --bg-hover: rgba(255,255,255,0.06); --bg-input: rgba(255,255,255,0.05);
11
+ --border: rgba(255,255,255,0.08); --text: #f0f0f8; --text-muted: #8888aa; --text-dim: #555577;
12
+ --accent: #7c5cff; --accent-hover: #6a4aee; --accent-light: rgba(124,92,255,0.12);
13
+ --green: #34d399; --red: #f87171; --yellow: #fbbf24; --purple: #a78bfa;
14
+ --gradient: linear-gradient(135deg, #7c5cff 0%, #00d4ff 100%);
15
+ --glow: 0 0 20px rgba(124,92,255,0.25);
16
+ --glow-sm: 0 0 10px rgba(124,92,255,0.15);
17
+ --card-glow: 0 4px 30px rgba(0,0,0,0.3);
18
+ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
19
+ --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
20
+ --radius: 12px; --radius-lg: 20px;
21
+ }
22
+ body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.6; background-image: radial-gradient(ellipse at top, rgba(124,92,255,0.08) 0%, transparent 50%), radial-gradient(ellipse at bottom right, rgba(0,212,255,0.05) 0%, transparent 50%); }
19
23
  a { color: var(--accent); text-decoration: none; }
20
24
  button { font-family: var(--font); cursor: pointer; border: none; }
21
25
  input, select, textarea { font-family: var(--font); }
@@ -23,18 +27,18 @@
23
27
  /* Layout */
24
28
  .app { display: flex; min-height: 100vh; }
25
29
  .sidebar {
26
- width: 260px; background: var(--bg-card); border-right: 1px solid var(--border);
27
- padding: 16px 12px; display: flex; flex-direction: column; position: fixed; height: 100vh; z-index: 100;
30
+ width: 260px; background: rgba(10,10,30,0.8); backdrop-filter: blur(20px); border-right: 1px solid var(--border);
31
+ padding: 20px 14px; display: flex; flex-direction: column; position: fixed; height: 100vh; z-index: 100;
28
32
  }
29
- .sidebar-logo { font-size: 18px; font-weight: 600; padding: 12px 12px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
30
- .sidebar-logo span { color: var(--accent); }
33
+ .sidebar-logo { font-size: 20px; font-weight: 700; padding: 12px 12px; margin-bottom: 24px; display: flex; align-items: center; gap: 10px; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
34
+ .sidebar-logo span { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
31
35
  .nav-item {
32
- display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius);
33
- cursor: pointer; color: var(--text-muted); transition: all 0.15s; font-size: 14px; margin-bottom: 2px;
36
+ display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px;
37
+ cursor: pointer; color: var(--text-muted); transition: all 0.2s ease; font-size: 14px; margin-bottom: 3px;
34
38
  }
35
- .nav-item:hover { background: var(--bg-hover); color: var(--text); }
36
- .nav-item.active { background: var(--accent-light); color: var(--accent); font-weight: 500; }
37
- .nav-item .icon { width: 20px; text-align: center; font-size: 16px; }
39
+ .nav-item:hover { background: var(--bg-hover); color: var(--text); transform: translateX(4px); }
40
+ .nav-item.active { background: var(--accent-light); color: var(--accent); font-weight: 500; box-shadow: var(--glow-sm); }
41
+ .nav-item .icon { width: 22px; text-align: center; font-size: 18px; }
38
42
  .main { flex: 1; margin-left: 260px; min-height: 100vh; }
39
43
 
40
44
  /* Mobile */
@@ -52,28 +56,28 @@
52
56
  /* Page container */
53
57
  .page { display: none; padding: 32px; max-width: 1200px; margin: 0 auto; }
54
58
  .page.active { display: block; }
55
- .page-title { font-size: 32px; font-weight: 600; margin-bottom: 8px; }
59
+ .page-title { font-size: 32px; font-weight: 700; margin-bottom: 8px; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
56
60
  .page-subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; }
57
61
 
58
62
  /* Cards */
59
- .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; transition: border-color 0.15s; }
60
- .card:hover { border-color: #333; }
63
+ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: all 0.25s ease; backdrop-filter: blur(10px); box-shadow: var(--card-glow); }
64
+ .card:hover { border-color: rgba(124,92,255,0.3); transform: translateY(-2px); box-shadow: 0 8px 40px rgba(0,0,0,0.4), var(--glow-sm); }
61
65
  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
62
66
 
63
67
  /* Buttons */
64
- .btn { padding: 6px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; transition: all 0.15s; display: inline-flex; align-items: center; gap: 8px; height: 32px; line-height: 20px; }
65
- .btn-primary { background: var(--accent); color: white; }
66
- .btn-primary:hover { background: var(--accent-hover); }
67
- .btn-secondary { background: var(--bg-hover); color: var(--text); border: 1px solid var(--border); }
68
- .btn-secondary:hover { border-color: #444; }
68
+ .btn { padding: 8px 20px; border-radius: 10px; font-size: 14px; font-weight: 500; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; height: 36px; line-height: 20px; }
69
+ .btn-primary { background: var(--gradient); color: white; box-shadow: var(--glow-sm); }
70
+ .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--glow); }
71
+ .btn-secondary { background: rgba(255,255,255,0.05); color: var(--text); border: 1px solid var(--border); backdrop-filter: blur(10px); }
72
+ .btn-secondary:hover { border-color: var(--accent); box-shadow: var(--glow-sm); }
69
73
  .btn-danger { background: rgba(239,68,68,0.1); color: var(--red); }
70
74
  .btn-danger:hover { background: rgba(239,68,68,0.2); }
71
75
  .btn-sm { padding: 6px 12px; font-size: 13px; }
72
76
  .btn-lg { padding: 14px 28px; font-size: 16px; }
73
77
 
74
78
  /* Form elements */
75
- .input { width: 100%; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 14px; outline: none; transition: border-color 0.15s; }
76
- .input:focus { border-color: var(--accent); }
79
+ .input { width: 100%; padding: 8px 14px; height: 38px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 14px; outline: none; transition: all 0.2s ease; backdrop-filter: blur(5px); }
80
+ .input:focus { border-color: var(--accent); box-shadow: var(--glow-sm); }
77
81
  .input::placeholder { color: var(--text-dim); }
78
82
  .label { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; }
79
83
  .form-group { margin-bottom: 20px; }
@@ -85,7 +89,7 @@
85
89
  .search-bar::before { content: '🔍'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; }
86
90
 
87
91
  /* Tags / Chips */
88
- .chip { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; }
92
+ .chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; }
89
93
  .chip:hover, .chip.active { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
90
94
  .chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
91
95
 
@@ -95,7 +99,7 @@
95
99
  .tpl-card .tpl-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
96
100
  .tpl-card .tpl-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
97
101
  .tpl-card .tpl-tags { display: flex; gap: 6px; flex-wrap: wrap; }
98
- .tpl-card .tpl-tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--bg-hover); color: var(--text-dim); }
102
+ .tpl-card .tpl-tag { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--bg-hover); color: var(--text-dim); }
99
103
 
100
104
  /* Wizard */
101
105
  .wizard { max-width: 640px; margin: 0 auto; }
@@ -133,8 +137,8 @@
133
137
  .msg { max-width: 75%; display: flex; flex-direction: column; gap: 4px; }
134
138
  .msg.user { align-self: flex-end; }
135
139
  .msg.assistant { align-self: flex-start; }
136
- .msg-bubble { padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
137
- .msg.user .msg-bubble { background: var(--accent); color: white; border-bottom-right-radius: 4px; }
140
+ .msg-bubble { padding: 12px 16px; border-radius: 6px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
141
+ .msg.user .msg-bubble { background: #238636; color: white; border-bottom-right-radius: 4px; }
138
142
  .msg.assistant .msg-bubble { background: var(--bg-card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
139
143
  .msg-time { font-size: 11px; color: var(--text-dim); }
140
144
  .msg.user .msg-time { text-align: right; }
@@ -146,8 +150,8 @@
146
150
  .typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; }
147
151
  @keyframes bounce { 0%,80%,100% { transform: scale(0.6); } 40% { transform: scale(1); } }
148
152
  .chat-input-bar { padding: 16px 24px; border-top: 1px solid var(--border); background: var(--bg-card); display: flex; gap: 12px; align-items: center; }
149
- .chat-input-bar .input { flex: 1; border-radius: 24px; padding: 12px 20px; }
150
- .chat-input-bar .btn { border-radius: 24px; padding: 12px 24px; }
153
+ .chat-input-bar .input { flex: 1; border-radius: 6px; padding: 5px 12px; height: 32px; }
154
+ .chat-input-bar .btn { border-radius: 6px; padding: 6px 16px; }
151
155
 
152
156
  /* Memory timeline */
153
157
  .timeline { position: relative; padding-left: 24px; }
@@ -164,9 +168,9 @@
164
168
  .empty-state .empty-desc { font-size: 14px; margin-bottom: 24px; }
165
169
 
166
170
  /* Confirm dialog */
167
- .dialog-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 200; align-items: center; justify-content: center; }
171
+ .dialog-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); z-index: 200; align-items: center; justify-content: center; }
168
172
  .dialog-overlay.show { display: flex; }
169
- .dialog { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; max-width: 400px; width: 90%; }
173
+ .dialog { background: rgba(20,20,40,0.95); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; max-width: 400px; width: 90%; backdrop-filter: blur(20px); box-shadow: 0 20px 60px rgba(0,0,0,0.5), var(--glow); }
170
174
  .dialog-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
171
175
  .dialog-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; }
172
176
  .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
@@ -196,10 +200,11 @@
196
200
  .tab-panel.active { display: block; }
197
201
 
198
202
  /* Status dot */
199
- .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
200
- .status-dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); }
201
- .status-dot.red { background: var(--red); box-shadow: 0 0 6px var(--red); }
202
- .status-dot.yellow { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
203
+ .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; animation: pulse 2s ease-in-out infinite; }
204
+ .status-dot.green { background: var(--green); box-shadow: 0 0 8px var(--green); }
205
+ .status-dot.red { background: var(--red); box-shadow: 0 0 8px var(--red); }
206
+ .status-dot.yellow { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
207
+ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
203
208
 
204
209
  /* Channel card */
205
210
  .channel-card { display: flex; align-items: center; gap: 16px; cursor: pointer; }
@@ -214,7 +219,7 @@
214
219
  .stat-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
215
220
 
216
221
  /* Log viewer */
217
- .log-viewer { background: #0d0d0d; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; font-family: var(--mono); font-size: 12px; color: var(--text-muted); max-height: 400px; overflow-y: auto; white-space: pre-wrap; line-height: 1.6; }
222
+ .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; }
218
223
 
219
224
  /* Module iframe */
220
225
  .module-frame-container { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
@@ -248,7 +253,7 @@
248
253
  /* Scrollbar */
249
254
  ::-webkit-scrollbar { width: 6px; }
250
255
  ::-webkit-scrollbar-track { background: transparent; }
251
- ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
256
+ ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
252
257
 
253
258
  /* Settings layout */
254
259
  .settings-layout { display: flex; gap: 24px; align-items: flex-start; }
@@ -266,7 +271,7 @@
266
271
  .tab-panel { display: none; }
267
272
  .tab-panel.active { display: block; }
268
273
  .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; flex-shrink: 0; }
269
- .status-dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); }
274
+ .status-dot.green { background: var(--green); }
270
275
  .status-dot.red { background: var(--red); }
271
276
  .status-dot.yellow { background: var(--yellow); animation: sdpulse 1.5s ease-in-out infinite; }
272
277
  @keyframes sdpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@@ -274,7 +279,7 @@
274
279
  .channel-card { cursor: pointer; text-align: center; padding: 20px 12px; }
275
280
  .channel-card:hover { border-color: var(--accent); }
276
281
  .channel-card.connected { border-color: var(--green); }
277
- .log-viewer { background: #080808; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; font-family: var(--mono); font-size: 12px; line-height: 1.7; overflow-y: auto; max-height: 280px; color: #86efac; white-space: pre-wrap; word-break: break-all; }
282
+ .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; }
278
283
  .bar-chart-wrap { display: flex; align-items: flex-end; gap: 6px; height: 80px; }
279
284
  .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; }
280
285
  .bar-fill { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; transition: height 0.4s ease; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "opc-agent",
3
- "version": "4.0.30",
3
+ "version": "4.0.31",
4
4
  "description": "Open Agent Framework — Build, test, and run AI Agents for business workstations",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/studio-ui/index.html CHANGED
@@ -7,15 +7,19 @@
7
7
  <style>
8
8
  * { margin: 0; padding: 0; box-sizing: border-box; }
9
9
  :root {
10
- --bg: #0a0a0a; --bg-card: #141414; --bg-hover: #1a1a1a; --bg-input: #1a1a1a;
11
- --border: #262626; --text: #e5e5e5; --text-muted: #737373; --text-dim: #525252;
12
- --accent: #3b82f6; --accent-hover: #2563eb; --accent-light: rgba(59,130,246,0.1);
13
- --green: #22c55e; --red: #ef4444; --yellow: #eab308; --purple: #a855f7;
14
- --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
15
- --mono: 'SF Mono', 'Fira Code', monospace;
16
- --radius: 10px; --radius-lg: 16px;
17
- }
18
- body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.5; }
10
+ --bg: #0a0a1a; --bg-card: rgba(255,255,255,0.03); --bg-hover: rgba(255,255,255,0.06); --bg-input: rgba(255,255,255,0.05);
11
+ --border: rgba(255,255,255,0.08); --text: #f0f0f8; --text-muted: #8888aa; --text-dim: #555577;
12
+ --accent: #7c5cff; --accent-hover: #6a4aee; --accent-light: rgba(124,92,255,0.12);
13
+ --green: #34d399; --red: #f87171; --yellow: #fbbf24; --purple: #a78bfa;
14
+ --gradient: linear-gradient(135deg, #7c5cff 0%, #00d4ff 100%);
15
+ --glow: 0 0 20px rgba(124,92,255,0.25);
16
+ --glow-sm: 0 0 10px rgba(124,92,255,0.15);
17
+ --card-glow: 0 4px 30px rgba(0,0,0,0.3);
18
+ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
19
+ --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
20
+ --radius: 12px; --radius-lg: 20px;
21
+ }
22
+ body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.6; background-image: radial-gradient(ellipse at top, rgba(124,92,255,0.08) 0%, transparent 50%), radial-gradient(ellipse at bottom right, rgba(0,212,255,0.05) 0%, transparent 50%); }
19
23
  a { color: var(--accent); text-decoration: none; }
20
24
  button { font-family: var(--font); cursor: pointer; border: none; }
21
25
  input, select, textarea { font-family: var(--font); }
@@ -23,18 +27,18 @@
23
27
  /* Layout */
24
28
  .app { display: flex; min-height: 100vh; }
25
29
  .sidebar {
26
- width: 260px; background: var(--bg-card); border-right: 1px solid var(--border);
27
- padding: 16px 12px; display: flex; flex-direction: column; position: fixed; height: 100vh; z-index: 100;
30
+ width: 260px; background: rgba(10,10,30,0.8); backdrop-filter: blur(20px); border-right: 1px solid var(--border);
31
+ padding: 20px 14px; display: flex; flex-direction: column; position: fixed; height: 100vh; z-index: 100;
28
32
  }
29
- .sidebar-logo { font-size: 18px; font-weight: 600; padding: 12px 12px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
30
- .sidebar-logo span { color: var(--accent); }
33
+ .sidebar-logo { font-size: 20px; font-weight: 700; padding: 12px 12px; margin-bottom: 24px; display: flex; align-items: center; gap: 10px; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
34
+ .sidebar-logo span { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
31
35
  .nav-item {
32
- display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius);
33
- cursor: pointer; color: var(--text-muted); transition: all 0.15s; font-size: 14px; margin-bottom: 2px;
36
+ display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px;
37
+ cursor: pointer; color: var(--text-muted); transition: all 0.2s ease; font-size: 14px; margin-bottom: 3px;
34
38
  }
35
- .nav-item:hover { background: var(--bg-hover); color: var(--text); }
36
- .nav-item.active { background: var(--accent-light); color: var(--accent); font-weight: 500; }
37
- .nav-item .icon { width: 20px; text-align: center; font-size: 16px; }
39
+ .nav-item:hover { background: var(--bg-hover); color: var(--text); transform: translateX(4px); }
40
+ .nav-item.active { background: var(--accent-light); color: var(--accent); font-weight: 500; box-shadow: var(--glow-sm); }
41
+ .nav-item .icon { width: 22px; text-align: center; font-size: 18px; }
38
42
  .main { flex: 1; margin-left: 260px; min-height: 100vh; }
39
43
 
40
44
  /* Mobile */
@@ -52,28 +56,28 @@
52
56
  /* Page container */
53
57
  .page { display: none; padding: 32px; max-width: 1200px; margin: 0 auto; }
54
58
  .page.active { display: block; }
55
- .page-title { font-size: 32px; font-weight: 600; margin-bottom: 8px; }
59
+ .page-title { font-size: 32px; font-weight: 700; margin-bottom: 8px; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
56
60
  .page-subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; }
57
61
 
58
62
  /* Cards */
59
- .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; transition: border-color 0.15s; }
60
- .card:hover { border-color: #333; }
63
+ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: all 0.25s ease; backdrop-filter: blur(10px); box-shadow: var(--card-glow); }
64
+ .card:hover { border-color: rgba(124,92,255,0.3); transform: translateY(-2px); box-shadow: 0 8px 40px rgba(0,0,0,0.4), var(--glow-sm); }
61
65
  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
62
66
 
63
67
  /* Buttons */
64
- .btn { padding: 6px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; transition: all 0.15s; display: inline-flex; align-items: center; gap: 8px; height: 32px; line-height: 20px; }
65
- .btn-primary { background: var(--accent); color: white; }
66
- .btn-primary:hover { background: var(--accent-hover); }
67
- .btn-secondary { background: var(--bg-hover); color: var(--text); border: 1px solid var(--border); }
68
- .btn-secondary:hover { border-color: #444; }
68
+ .btn { padding: 8px 20px; border-radius: 10px; font-size: 14px; font-weight: 500; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; height: 36px; line-height: 20px; }
69
+ .btn-primary { background: var(--gradient); color: white; box-shadow: var(--glow-sm); }
70
+ .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--glow); }
71
+ .btn-secondary { background: rgba(255,255,255,0.05); color: var(--text); border: 1px solid var(--border); backdrop-filter: blur(10px); }
72
+ .btn-secondary:hover { border-color: var(--accent); box-shadow: var(--glow-sm); }
69
73
  .btn-danger { background: rgba(239,68,68,0.1); color: var(--red); }
70
74
  .btn-danger:hover { background: rgba(239,68,68,0.2); }
71
75
  .btn-sm { padding: 6px 12px; font-size: 13px; }
72
76
  .btn-lg { padding: 14px 28px; font-size: 16px; }
73
77
 
74
78
  /* Form elements */
75
- .input { width: 100%; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 14px; outline: none; transition: border-color 0.15s; }
76
- .input:focus { border-color: var(--accent); }
79
+ .input { width: 100%; padding: 8px 14px; height: 38px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 14px; outline: none; transition: all 0.2s ease; backdrop-filter: blur(5px); }
80
+ .input:focus { border-color: var(--accent); box-shadow: var(--glow-sm); }
77
81
  .input::placeholder { color: var(--text-dim); }
78
82
  .label { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; }
79
83
  .form-group { margin-bottom: 20px; }
@@ -85,7 +89,7 @@
85
89
  .search-bar::before { content: '🔍'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; }
86
90
 
87
91
  /* Tags / Chips */
88
- .chip { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; }
92
+ .chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; }
89
93
  .chip:hover, .chip.active { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
90
94
  .chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
91
95
 
@@ -95,7 +99,7 @@
95
99
  .tpl-card .tpl-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
96
100
  .tpl-card .tpl-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
97
101
  .tpl-card .tpl-tags { display: flex; gap: 6px; flex-wrap: wrap; }
98
- .tpl-card .tpl-tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--bg-hover); color: var(--text-dim); }
102
+ .tpl-card .tpl-tag { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--bg-hover); color: var(--text-dim); }
99
103
 
100
104
  /* Wizard */
101
105
  .wizard { max-width: 640px; margin: 0 auto; }
@@ -133,8 +137,8 @@
133
137
  .msg { max-width: 75%; display: flex; flex-direction: column; gap: 4px; }
134
138
  .msg.user { align-self: flex-end; }
135
139
  .msg.assistant { align-self: flex-start; }
136
- .msg-bubble { padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
137
- .msg.user .msg-bubble { background: var(--accent); color: white; border-bottom-right-radius: 4px; }
140
+ .msg-bubble { padding: 12px 16px; border-radius: 6px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
141
+ .msg.user .msg-bubble { background: #238636; color: white; border-bottom-right-radius: 4px; }
138
142
  .msg.assistant .msg-bubble { background: var(--bg-card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
139
143
  .msg-time { font-size: 11px; color: var(--text-dim); }
140
144
  .msg.user .msg-time { text-align: right; }
@@ -146,8 +150,8 @@
146
150
  .typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; }
147
151
  @keyframes bounce { 0%,80%,100% { transform: scale(0.6); } 40% { transform: scale(1); } }
148
152
  .chat-input-bar { padding: 16px 24px; border-top: 1px solid var(--border); background: var(--bg-card); display: flex; gap: 12px; align-items: center; }
149
- .chat-input-bar .input { flex: 1; border-radius: 24px; padding: 12px 20px; }
150
- .chat-input-bar .btn { border-radius: 24px; padding: 12px 24px; }
153
+ .chat-input-bar .input { flex: 1; border-radius: 6px; padding: 5px 12px; height: 32px; }
154
+ .chat-input-bar .btn { border-radius: 6px; padding: 6px 16px; }
151
155
 
152
156
  /* Memory timeline */
153
157
  .timeline { position: relative; padding-left: 24px; }
@@ -164,9 +168,9 @@
164
168
  .empty-state .empty-desc { font-size: 14px; margin-bottom: 24px; }
165
169
 
166
170
  /* Confirm dialog */
167
- .dialog-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 200; align-items: center; justify-content: center; }
171
+ .dialog-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); z-index: 200; align-items: center; justify-content: center; }
168
172
  .dialog-overlay.show { display: flex; }
169
- .dialog { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; max-width: 400px; width: 90%; }
173
+ .dialog { background: rgba(20,20,40,0.95); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; max-width: 400px; width: 90%; backdrop-filter: blur(20px); box-shadow: 0 20px 60px rgba(0,0,0,0.5), var(--glow); }
170
174
  .dialog-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
171
175
  .dialog-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; }
172
176
  .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
@@ -196,10 +200,11 @@
196
200
  .tab-panel.active { display: block; }
197
201
 
198
202
  /* Status dot */
199
- .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
200
- .status-dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); }
201
- .status-dot.red { background: var(--red); box-shadow: 0 0 6px var(--red); }
202
- .status-dot.yellow { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
203
+ .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; animation: pulse 2s ease-in-out infinite; }
204
+ .status-dot.green { background: var(--green); box-shadow: 0 0 8px var(--green); }
205
+ .status-dot.red { background: var(--red); box-shadow: 0 0 8px var(--red); }
206
+ .status-dot.yellow { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
207
+ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
203
208
 
204
209
  /* Channel card */
205
210
  .channel-card { display: flex; align-items: center; gap: 16px; cursor: pointer; }
@@ -214,7 +219,7 @@
214
219
  .stat-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
215
220
 
216
221
  /* Log viewer */
217
- .log-viewer { background: #0d0d0d; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; font-family: var(--mono); font-size: 12px; color: var(--text-muted); max-height: 400px; overflow-y: auto; white-space: pre-wrap; line-height: 1.6; }
222
+ .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; }
218
223
 
219
224
  /* Module iframe */
220
225
  .module-frame-container { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
@@ -248,7 +253,7 @@
248
253
  /* Scrollbar */
249
254
  ::-webkit-scrollbar { width: 6px; }
250
255
  ::-webkit-scrollbar-track { background: transparent; }
251
- ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
256
+ ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
252
257
 
253
258
  /* Settings layout */
254
259
  .settings-layout { display: flex; gap: 24px; align-items: flex-start; }
@@ -266,7 +271,7 @@
266
271
  .tab-panel { display: none; }
267
272
  .tab-panel.active { display: block; }
268
273
  .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; flex-shrink: 0; }
269
- .status-dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); }
274
+ .status-dot.green { background: var(--green); }
270
275
  .status-dot.red { background: var(--red); }
271
276
  .status-dot.yellow { background: var(--yellow); animation: sdpulse 1.5s ease-in-out infinite; }
272
277
  @keyframes sdpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@@ -274,7 +279,7 @@
274
279
  .channel-card { cursor: pointer; text-align: center; padding: 20px 12px; }
275
280
  .channel-card:hover { border-color: var(--accent); }
276
281
  .channel-card.connected { border-color: var(--green); }
277
- .log-viewer { background: #080808; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; font-family: var(--mono); font-size: 12px; line-height: 1.7; overflow-y: auto; max-height: 280px; color: #86efac; white-space: pre-wrap; word-break: break-all; }
282
+ .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; }
278
283
  .bar-chart-wrap { display: flex; align-items: flex-end; gap: 6px; height: 80px; }
279
284
  .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; }
280
285
  .bar-fill { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; transition: height 0.4s ease; }