@pheem49/mint 1.5.1 → 1.5.2

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 (33) hide show
  1. package/README.md +8 -0
  2. package/mint-cli.js +148 -921
  3. package/models/Shiroko_Model/Shiroko/Shiroko_Core//345/221/206/347/214/253.exp3.json +31 -1
  4. package/models/Shiroko_Model/Shiroko/Shiroko_Core//347/202/271/344/270/200/344/270/213.exp3.json +6 -1
  5. package/package.json +18 -20
  6. package/src/AI_Brain/proactive_engine.js +12 -2
  7. package/src/Automation_Layer/browser_automation.js +26 -24
  8. package/src/CLI/approval_handler.js +42 -0
  9. package/src/CLI/chat_ui.js +192 -7
  10. package/src/CLI/cli_colors.js +32 -0
  11. package/src/CLI/cli_formatters.js +89 -0
  12. package/src/CLI/code_agent.js +166 -57
  13. package/src/CLI/intent_detectors.js +181 -0
  14. package/src/CLI/interactive_chat.js +479 -0
  15. package/src/CLI/list_features.js +3 -0
  16. package/src/CLI/repo_summarizer.js +282 -0
  17. package/src/CLI/semantic_code_search.js +312 -0
  18. package/src/CLI/skill_manager.js +41 -0
  19. package/src/CLI/slash_command_handler.js +418 -0
  20. package/src/CLI/symbol_indexer.js +231 -0
  21. package/src/Channels/discord_bridge.js +11 -13
  22. package/src/Channels/line_bridge.js +10 -10
  23. package/src/Channels/slack_bridge.js +7 -12
  24. package/src/Channels/telegram_bridge.js +6 -14
  25. package/src/Channels/whatsapp_bridge.js +11 -9
  26. package/src/System/chat_history_manager.js +20 -12
  27. package/src/System/optional_require.js +23 -0
  28. package/src/UI/live2d_manager.js +211 -13
  29. package/src/UI/renderer.js +163 -3
  30. package/src/UI/settings.css +655 -420
  31. package/src/UI/settings.html +478 -432
  32. package/src/UI/settings.js +10 -8
  33. package/src/UI/styles.css +89 -25
package/src/UI/settings.css CHANGED
@@ -1,39 +1,62 @@
1
1
  :root {
2
- --bg-color: #0f172a;
3
- --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
4
- --panel-bg: rgba(30, 41, 59, 0.7);
2
+ --bg-color: #0d1224;
3
+ --bg-gradient: linear-gradient(145deg, #0b1020 0%, #121932 48%, #241642 100%);
4
+ --panel-bg: rgba(17, 24, 48, 0.92);
5
+ --sidebar-bg: rgba(8, 13, 30, 0.72);
6
+ --chrome-bg: rgba(10, 15, 32, 0.72);
7
+ --surface-bg: rgba(255, 255, 255, 0.045);
8
+ --surface-strong: rgba(255, 255, 255, 0.075);
9
+ --input-bg: rgba(6, 10, 24, 0.72);
10
+ --input-focus-bg: rgba(8, 12, 28, 0.92);
5
11
  --text-main: #f8fafc;
6
12
  --text-muted: #94a3b8;
13
+ --text-soft: #cbd5e1;
7
14
  --accent: #8b5cf6;
8
15
  --accent-hover: #a78bfa;
16
+ --accent-soft: rgba(139, 92, 246, 0.16);
9
17
  --border: rgba(255, 255, 255, 0.1);
10
- --shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
11
- --glass-blur: blur(12px);
12
- --card-bg: rgba(30, 41, 59, 0.5);
13
- --input-bg: rgba(0, 0, 0, 0.3);
18
+ --border-strong: rgba(255, 255, 255, 0.16);
19
+ --danger: #ef4444;
20
+ --placeholder: #717b91;
21
+ --shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
22
+ --glass-blur: blur(16px);
14
23
  }
15
24
 
16
25
  [data-theme="light"] {
17
- --bg-color: #f1f5f9;
18
- --bg-gradient: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
19
- --panel-bg: rgba(255, 255, 255, 0.8);
26
+ --bg-color: #eef2f7;
27
+ --bg-gradient: linear-gradient(145deg, #f8fafc 0%, #e8edf5 100%);
28
+ --panel-bg: rgba(255, 255, 255, 0.94);
29
+ --sidebar-bg: rgba(241, 245, 249, 0.82);
30
+ --chrome-bg: rgba(255, 255, 255, 0.82);
31
+ --surface-bg: rgba(15, 23, 42, 0.035);
32
+ --surface-strong: rgba(15, 23, 42, 0.065);
33
+ --input-bg: rgba(15, 23, 42, 0.045);
34
+ --input-focus-bg: #ffffff;
20
35
  --text-main: #0f172a;
21
36
  --text-muted: #64748b;
22
- --border: rgba(0, 0, 0, 0.12);
23
- --shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
24
- --card-bg: rgba(255, 255, 255, 0.7);
25
- --input-bg: rgba(0, 0, 0, 0.05);
37
+ --text-soft: #334155;
38
+ --border: rgba(15, 23, 42, 0.12);
39
+ --border-strong: rgba(15, 23, 42, 0.18);
40
+ --placeholder: #8590a2;
41
+ --shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
26
42
  }
27
43
 
28
44
  [data-theme="midnight"] {
29
45
  --bg-color: #020617;
30
- --bg-gradient: linear-gradient(135deg, #020617 0%, #0c0a2e 100%);
31
- --panel-bg: rgba(10, 10, 40, 0.8);
46
+ --bg-gradient: linear-gradient(145deg, #020617 0%, #080a22 55%, #120828 100%);
47
+ --panel-bg: rgba(5, 8, 24, 0.94);
48
+ --sidebar-bg: rgba(2, 6, 23, 0.82);
49
+ --chrome-bg: rgba(2, 6, 23, 0.78);
50
+ --surface-bg: rgba(99, 102, 241, 0.055);
51
+ --surface-strong: rgba(99, 102, 241, 0.085);
52
+ --input-bg: rgba(0, 0, 0, 0.46);
53
+ --input-focus-bg: rgba(0, 0, 0, 0.64);
32
54
  --text-main: #e2e8f0;
33
- --text-muted: #64748b;
34
- --border: rgba(99, 102, 241, 0.2);
35
- --card-bg: rgba(10, 10, 40, 0.6);
36
- --input-bg: rgba(0, 0, 0, 0.5);
55
+ --text-muted: #74809a;
56
+ --text-soft: #bac4d6;
57
+ --border: rgba(99, 102, 241, 0.16);
58
+ --border-strong: rgba(99, 102, 241, 0.26);
59
+ --placeholder: #68708a;
37
60
  }
38
61
 
39
62
  * {
@@ -43,161 +66,203 @@
43
66
  }
44
67
 
45
68
  body {
46
- font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
47
- background: var(--bg-gradient);
48
- color: var(--text-main);
49
69
  height: 100vh;
50
70
  overflow: hidden;
71
+ background: var(--bg-gradient);
72
+ color: var(--text-main);
73
+ font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
51
74
  user-select: none;
52
- transition: background 0.3s, color 0.3s;
75
+ }
76
+
77
+ button,
78
+ input,
79
+ select,
80
+ textarea {
81
+ font: inherit;
82
+ }
83
+
84
+ button {
85
+ -webkit-app-region: no-drag;
53
86
  }
54
87
 
55
88
  .settings-container {
56
- height: 100vh;
57
89
  display: flex;
58
90
  flex-direction: column;
59
- border-radius: 16px;
91
+ height: 100vh;
92
+ overflow: hidden;
93
+ background: var(--panel-bg);
60
94
  border: 1px solid var(--border);
95
+ border-radius: 16px;
61
96
  box-shadow: var(--shadow);
62
- overflow: hidden;
63
- animation: appEntrance 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
64
97
  opacity: 0;
98
+ animation: appEntrance 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
65
99
  }
66
100
 
67
101
  @keyframes appEntrance {
68
102
  from {
69
103
  opacity: 0;
70
- transform: scale(0.97) translateY(10px);
71
- filter: blur(10px);
104
+ transform: scale(0.985) translateY(8px);
72
105
  }
73
106
  to {
74
107
  opacity: 1;
75
108
  transform: scale(1) translateY(0);
76
- filter: blur(0);
77
109
  }
78
110
  }
79
111
 
80
- /* Header */
81
- .settings-header {
82
- -webkit-app-region: drag;
83
- padding: 16px 20px;
112
+ .settings-header,
113
+ .settings-footer {
84
114
  display: flex;
85
- justify-content: space-between;
86
115
  align-items: center;
87
- background: rgba(0, 0, 0, 0.2);
116
+ background: var(--chrome-bg);
117
+ border-color: var(--border);
88
118
  backdrop-filter: var(--glass-blur);
119
+ }
120
+
121
+ .settings-header {
122
+ -webkit-app-region: drag;
123
+ justify-content: space-between;
124
+ min-height: 66px;
125
+ padding: 14px 20px;
89
126
  border-bottom: 1px solid var(--border);
90
127
  }
91
128
 
92
129
  .header-left {
93
130
  display: flex;
94
131
  align-items: center;
95
- gap: 10px;
132
+ gap: 12px;
96
133
  }
97
134
 
98
135
  .settings-icon {
99
- font-size: 1.2rem;
136
+ display: grid;
137
+ place-items: center;
138
+ width: 34px;
139
+ height: 34px;
140
+ border: 1px solid var(--border-strong);
141
+ border-radius: 10px;
142
+ background: var(--surface-strong);
143
+ color: var(--accent-hover);
144
+ font-size: 1rem;
100
145
  }
101
146
 
102
147
  h1 {
103
- font-size: 1.05rem;
104
- font-weight: 500;
105
- background: linear-gradient(90deg, var(--text-main), var(--accent));
106
- background-clip: text;
107
- -webkit-background-clip: text;
108
- -webkit-text-fill-color: transparent;
148
+ color: var(--text-main);
149
+ font-size: 1.02rem;
150
+ font-weight: 600;
151
+ letter-spacing: 0;
152
+ }
153
+
154
+ .header-left p {
155
+ margin-top: 2px;
156
+ color: var(--text-muted);
157
+ font-size: 0.78rem;
109
158
  }
110
159
 
111
160
  .close-btn {
112
- -webkit-app-region: no-drag;
161
+ display: grid;
162
+ place-items: center;
163
+ width: 32px;
164
+ height: 32px;
165
+ border: 1px solid transparent;
166
+ border-radius: 8px;
113
167
  background: transparent;
114
- border: none;
115
168
  color: var(--text-muted);
116
169
  cursor: pointer;
117
- padding: 4px;
118
- border-radius: 6px;
119
- display: flex;
120
- align-items: center;
121
- justify-content: center;
122
- transition: all 0.2s;
170
+ transition: background 0.15s, border-color 0.15s, color 0.15s;
123
171
  }
124
172
 
125
173
  .close-btn:hover {
126
- background: rgba(239, 68, 68, 0.2);
127
- color: #ef4444;
174
+ background: rgba(239, 68, 68, 0.12);
175
+ border-color: rgba(239, 68, 68, 0.28);
176
+ color: var(--danger);
128
177
  }
129
178
 
130
- /* Body */
131
179
  .settings-body {
132
- flex: 1;
133
180
  display: flex;
181
+ flex: 1;
182
+ min-height: 0;
134
183
  overflow: hidden;
135
184
  }
136
185
 
137
- /* Sidebar */
138
186
  .settings-sidebar {
139
- width: 160px;
140
- min-width: 160px;
141
- padding: 16px 10px;
142
- display: flex;
143
- flex-direction: column;
144
- gap: 4px;
145
- border-right: 1px solid var(--border);
146
- background: rgba(0, 0, 0, 0.15);
187
+ width: 178px;
188
+ min-width: 178px;
189
+ padding: 14px 10px;
147
190
  overflow-y: auto;
191
+ background: var(--sidebar-bg);
192
+ border-right: 1px solid var(--border);
148
193
  }
149
194
 
150
195
  .tab-btn {
151
- -webkit-app-region: no-drag;
152
196
  display: flex;
153
197
  align-items: center;
154
- gap: 8px;
198
+ width: 100%;
199
+ min-height: 42px;
200
+ gap: 10px;
155
201
  padding: 10px 12px;
202
+ border: 1px solid transparent;
156
203
  border-radius: 10px;
157
204
  background: transparent;
158
- border: none;
159
205
  color: var(--text-muted);
160
- font-family: inherit;
161
- font-size: 0.82rem;
162
- font-weight: 500;
163
206
  cursor: pointer;
164
207
  text-align: left;
165
- transition: all 0.2s;
208
+ transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.16s;
209
+ }
210
+
211
+ .tab-btn + .tab-btn {
212
+ margin-top: 5px;
213
+ }
214
+
215
+ .tab-btn span {
216
+ display: grid;
217
+ place-items: center;
218
+ width: 22px;
219
+ min-width: 22px;
220
+ color: var(--text-soft);
221
+ }
222
+
223
+ .tab-btn strong {
224
+ font-size: 0.86rem;
225
+ font-weight: 500;
226
+ line-height: 1.2;
166
227
  }
167
228
 
168
229
  .tab-btn:hover {
169
- background: rgba(139, 92, 246, 0.1);
230
+ background: var(--surface-bg);
170
231
  color: var(--text-main);
232
+ transform: translateX(1px);
171
233
  }
172
234
 
173
235
  .tab-btn.active {
174
- background: rgba(139, 92, 246, 0.18);
175
- color: var(--accent);
236
+ background: var(--accent-soft);
237
+ border-color: rgba(139, 92, 246, 0.32);
238
+ color: var(--text-main);
176
239
  box-shadow: inset 3px 0 0 var(--accent);
177
240
  }
178
241
 
179
- /* Content area */
180
242
  .settings-content {
181
243
  flex: 1;
182
- padding: 24px;
244
+ min-width: 0;
183
245
  overflow-y: auto;
246
+ padding: 22px 24px 28px;
184
247
  }
185
248
 
186
- .settings-content::-webkit-scrollbar {
187
- width: 4px;
249
+ .settings-content::-webkit-scrollbar,
250
+ .settings-sidebar::-webkit-scrollbar {
251
+ width: 6px;
188
252
  }
189
253
 
190
- .settings-content::-webkit-scrollbar-thumb {
191
- background: var(--border);
254
+ .settings-content::-webkit-scrollbar-thumb,
255
+ .settings-sidebar::-webkit-scrollbar-thumb {
256
+ background: var(--border-strong);
192
257
  border-radius: 10px;
193
258
  }
194
259
 
195
- /* Tab panes */
196
260
  .tab-pane {
197
261
  display: none;
198
262
  flex-direction: column;
199
- gap: 8px;
200
- animation: fadeTab 0.2s ease;
263
+ gap: 18px;
264
+ max-width: 900px;
265
+ animation: fadeTab 0.18s ease;
201
266
  }
202
267
 
203
268
  .tab-pane.active {
@@ -205,501 +270,671 @@ h1 {
205
270
  }
206
271
 
207
272
  @keyframes fadeTab {
208
- from { opacity: 0; transform: translateX(8px); }
209
- to { opacity: 1; transform: translateX(0); }
273
+ from {
274
+ opacity: 0;
275
+ transform: translateY(4px);
276
+ }
277
+ to {
278
+ opacity: 1;
279
+ transform: translateY(0);
280
+ }
210
281
  }
211
282
 
212
- .setting-section h2.section-title {
213
- font-size: 0.85rem;
214
- font-weight: 500;
215
- color: var(--text-main);
216
- opacity: 0.7;
217
- margin-bottom: 14px;
218
- letter-spacing: 0.5px;
283
+ .setting-section {
284
+ padding: 18px 18px 19px;
285
+ border: 1px solid var(--border);
286
+ border-radius: 12px;
287
+ background: var(--surface-bg);
288
+ }
289
+
290
+ .section-heading {
291
+ display: flex;
292
+ justify-content: space-between;
293
+ gap: 22px;
294
+ margin-bottom: 17px;
295
+ padding-bottom: 14px;
296
+ border-bottom: 1px solid var(--border);
297
+ }
298
+
299
+ .section-kicker {
300
+ margin-bottom: 4px;
301
+ color: var(--accent-hover);
302
+ font-size: 0.72rem;
303
+ font-weight: 600;
304
+ letter-spacing: 0.08em;
219
305
  text-transform: uppercase;
220
306
  }
221
307
 
222
- .divider {
223
- border: none;
224
- border-top: 1px solid var(--border);
225
- margin: 4px 0;
308
+ .section-title {
309
+ color: var(--text-main);
310
+ font-size: 1.08rem;
311
+ font-weight: 600;
226
312
  }
227
313
 
228
- /* API Key */
229
- .input-group {
230
- display: flex;
231
- gap: 8px;
232
- margin-bottom: 6px;
314
+ .section-description {
315
+ max-width: 360px;
316
+ color: var(--text-muted);
317
+ font-size: 0.82rem;
318
+ line-height: 1.45;
233
319
  }
234
320
 
235
- .input-group input,
236
- #api-key-input {
237
- flex: 1;
238
- background: var(--input-bg);
321
+ .form-grid {
322
+ display: grid;
323
+ grid-template-columns: repeat(2, minmax(0, 1fr));
324
+ gap: 14px;
325
+ }
326
+
327
+ .form-grid.compact {
328
+ grid-template-columns: repeat(3, minmax(0, 1fr));
329
+ }
330
+
331
+ .form-grid.single {
332
+ grid-template-columns: minmax(0, 1fr);
333
+ max-width: 540px;
334
+ }
335
+
336
+ .setting-row {
337
+ min-width: 0;
338
+ }
339
+
340
+ .setting-row.wide {
341
+ grid-column: 1 / -1;
342
+ }
343
+
344
+ .setting-row label,
345
+ .color-section label,
346
+ .toggle-row label {
347
+ display: block;
348
+ margin-bottom: 7px;
349
+ color: var(--text-soft);
350
+ font-size: 0.83rem;
351
+ font-weight: 500;
352
+ }
353
+
354
+ input[type="text"],
355
+ input[type="password"],
356
+ input[type="email"],
357
+ input[type="url"],
358
+ select,
359
+ textarea {
360
+ width: 100%;
361
+ min-height: 40px;
362
+ padding: 10px 12px;
239
363
  border: 1px solid var(--border);
240
- border-radius: 10px;
241
- padding: 10px 14px;
242
- color: var(--text-main);
243
- font-family: inherit;
244
- font-size: 0.9rem;
364
+ border-radius: 9px;
245
365
  outline: none;
246
- transition: border-color 0.2s;
366
+ background: var(--input-bg);
367
+ color: var(--text-main);
368
+ font-size: 0.88rem;
247
369
  user-select: text;
370
+ transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
248
371
  }
249
372
 
250
- .input-group input:focus,
251
- #api-key-input:focus {
252
- border-color: var(--accent);
373
+ select {
374
+ cursor: pointer;
253
375
  }
254
376
 
255
- .toggle-visibility {
256
- background: var(--input-bg);
257
- border: 1px solid var(--border);
258
- border-radius: 10px;
259
- padding: 0 12px;
260
- cursor: pointer;
261
- font-size: 1rem;
262
- color: var(--text-muted);
263
- transition: all 0.2s;
264
- -webkit-app-region: no-drag;
377
+ textarea {
378
+ min-height: 74px;
379
+ resize: vertical;
380
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
381
+ font-size: 0.8rem;
382
+ line-height: 1.45;
265
383
  }
266
384
 
267
- .toggle-visibility:hover {
385
+ input:focus,
386
+ select:focus,
387
+ textarea:focus {
388
+ background: var(--input-focus-bg);
268
389
  border-color: var(--accent);
390
+ box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.13);
269
391
  }
270
392
 
271
- .api-actions {
272
- display: flex;
273
- align-items: center;
274
- gap: 10px;
275
- margin-bottom: 6px;
393
+ input::placeholder,
394
+ textarea::placeholder {
395
+ color: var(--placeholder);
276
396
  }
277
397
 
278
- .api-save-btn {
279
- -webkit-app-region: no-drag;
280
- padding: 8px 14px;
281
- border-radius: 10px;
282
- font-family: inherit;
283
- font-size: 0.85rem;
284
- font-weight: 500;
398
+ input[type="color"] {
399
+ width: 44px;
400
+ height: 34px;
401
+ padding: 3px;
402
+ border: 1px solid var(--border);
403
+ border-radius: 9px;
404
+ background: var(--input-bg);
285
405
  cursor: pointer;
286
- background: var(--accent);
287
- color: white;
288
- border: none;
289
- transition: all 0.2s;
290
406
  }
291
407
 
292
- .api-save-btn:hover {
293
- background: var(--accent-hover);
294
- transform: translateY(-1px);
408
+ .input-group {
409
+ display: flex;
410
+ align-items: stretch;
411
+ gap: 8px;
295
412
  }
296
413
 
297
- .api-save-status {
298
- font-size: 0.8rem;
414
+ .toggle-visibility {
415
+ display: grid;
416
+ place-items: center;
417
+ width: 42px;
418
+ min-width: 42px;
419
+ border: 1px solid var(--border);
420
+ border-radius: 9px;
421
+ background: var(--input-bg);
299
422
  color: var(--text-muted);
423
+ cursor: pointer;
424
+ transition: background 0.15s, border-color 0.15s, color 0.15s;
425
+ }
426
+
427
+ .toggle-visibility:hover {
428
+ background: var(--accent-soft);
429
+ border-color: rgba(139, 92, 246, 0.36);
430
+ color: var(--text-main);
431
+ }
432
+
433
+ .hidden-row {
434
+ display: none;
300
435
  }
301
436
 
302
437
  .hint {
303
- font-size: 0.8rem;
304
438
  color: var(--text-muted);
439
+ font-size: 0.78rem;
440
+ line-height: 1.45;
305
441
  }
306
442
 
307
443
  .hint a {
308
- color: var(--accent);
444
+ color: var(--accent-hover);
309
445
  text-decoration: none;
310
- cursor: pointer;
311
446
  }
312
447
 
313
- /* Theme Cards */
314
- .theme-grid {
315
- display: grid;
316
- grid-template-columns: repeat(3, 1fr);
317
- gap: 12px;
448
+ .hint a:hover {
449
+ text-decoration: underline;
318
450
  }
319
451
 
320
- .theme-card {
321
- -webkit-app-region: no-drag;
452
+ .toggle-row {
322
453
  display: flex;
323
- flex-direction: column;
324
454
  align-items: center;
325
- gap: 8px;
326
- padding: 12px 8px;
327
- background: var(--card-bg);
328
- border: 2px solid var(--border);
329
- border-radius: 12px;
330
- cursor: pointer;
455
+ justify-content: space-between;
456
+ gap: 20px;
457
+ padding: 14px;
458
+ border: 1px solid var(--border);
459
+ border-radius: 11px;
460
+ background: var(--surface-strong);
461
+ }
462
+
463
+ .toggle-row label {
464
+ margin-bottom: 4px;
331
465
  color: var(--text-main);
332
- font-family: inherit;
333
- font-size: 0.85rem;
334
- transition: all 0.2s;
335
466
  }
336
467
 
337
- .theme-card:hover {
338
- border-color: var(--accent);
339
- transform: translateY(-2px);
468
+ .toggle-switch {
469
+ position: relative;
470
+ display: inline-block;
471
+ width: 46px;
472
+ min-width: 46px;
473
+ height: 26px;
340
474
  }
341
475
 
342
- .theme-card.active {
343
- border-color: var(--accent);
344
- box-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
476
+ .toggle-switch input {
477
+ width: 0;
478
+ height: 0;
479
+ opacity: 0;
345
480
  }
346
481
 
347
- .theme-preview {
348
- width: 100%;
349
- height: 44px;
350
- border-radius: 8px;
482
+ .toggle-slider {
483
+ position: absolute;
484
+ inset: 0;
485
+ cursor: pointer;
486
+ background: var(--input-bg);
487
+ border: 1px solid var(--border-strong);
488
+ border-radius: 999px;
489
+ transition: background 0.18s, border-color 0.18s;
351
490
  }
352
491
 
353
- .dark-preview { background: linear-gradient(135deg, #090e17 0%, #1e1b4b 100%); }
492
+ .toggle-slider::before {
493
+ position: absolute;
494
+ content: "";
495
+ width: 18px;
496
+ height: 18px;
497
+ left: 3px;
498
+ bottom: 3px;
499
+ border-radius: 50%;
500
+ background: var(--text-muted);
501
+ transition: transform 0.18s, background 0.18s;
502
+ }
354
503
 
355
- .light-preview { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); }
356
- .midnight-preview { background: linear-gradient(135deg, #02040a 0%, #08061f 100%); }
357
- .custom-preview {
358
- background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
359
- border: 1px dashed rgba(255,255,255,0.3);
504
+ input:checked + .toggle-slider {
505
+ background: var(--accent);
506
+ border-color: var(--accent);
360
507
  }
361
508
 
362
- /* Accent Colors */
363
- .accent-row {
364
- display: flex;
365
- align-items: center;
366
- justify-content: space-between;
509
+ input:checked + .toggle-slider::before {
510
+ transform: translateX(20px);
511
+ background: #ffffff;
367
512
  }
368
513
 
369
- .color-presets {
370
- display: flex;
371
- gap: 10px;
514
+ .slider-stack {
515
+ display: grid;
516
+ gap: 16px;
517
+ max-width: 660px;
372
518
  }
373
519
 
374
- .color-dot {
375
- -webkit-app-region: no-drag;
376
- width: 32px;
377
- height: 32px;
378
- border-radius: 50%;
379
- border: 3px solid transparent;
380
- cursor: pointer;
381
- transition: all 0.2s;
520
+ .slider-group {
521
+ display: flex;
522
+ align-items: center;
523
+ gap: 12px;
382
524
  }
383
525
 
384
- .color-dot:hover {
385
- transform: scale(1.15);
526
+ .range-slider {
527
+ flex: 1;
528
+ min-height: 22px;
529
+ -webkit-appearance: none;
530
+ appearance: none;
531
+ background: transparent;
532
+ cursor: pointer;
386
533
  }
387
534
 
388
- .color-dot.active {
389
- border-color: white;
390
- box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
535
+ .range-slider::-webkit-slider-runnable-track {
536
+ height: 6px;
537
+ border-radius: 999px;
538
+ background: var(--border-strong);
391
539
  }
392
540
 
393
- .custom-color {
394
- display: flex;
395
- align-items: center;
396
- gap: 8px;
397
- color: var(--text-muted);
398
- font-size: 0.85rem;
541
+ .range-slider::-webkit-slider-thumb {
542
+ width: 18px;
543
+ height: 18px;
544
+ margin-top: -6px;
545
+ -webkit-appearance: none;
546
+ appearance: none;
547
+ border: 3px solid var(--panel-bg);
548
+ border-radius: 50%;
549
+ background: var(--accent);
550
+ box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.5), 0 6px 16px rgba(0, 0, 0, 0.25);
399
551
  }
400
552
 
401
- #custom-color {
402
- -webkit-app-region: no-drag;
403
- width: 40px;
404
- height: 32px;
553
+ .range-value {
554
+ min-width: 68px;
555
+ padding: 5px 9px;
556
+ border: 1px solid rgba(139, 92, 246, 0.3);
405
557
  border-radius: 8px;
406
- border: 1px solid var(--border);
407
- background: transparent;
408
- cursor: pointer;
409
- padding: 2px;
558
+ background: var(--accent-soft);
559
+ color: var(--accent-hover);
560
+ font-size: 0.78rem;
561
+ font-weight: 600;
562
+ text-align: center;
563
+ white-space: nowrap;
410
564
  }
411
565
 
412
- /* Footer */
413
- .settings-footer {
414
- padding: 16px 24px;
566
+ .button-row,
567
+ .footer-actions {
415
568
  display: flex;
416
- justify-content: flex-end;
417
- gap: 12px;
418
- border-top: 1px solid var(--border);
419
- background: rgba(0, 0, 0, 0.1);
569
+ align-items: center;
570
+ gap: 10px;
420
571
  }
421
572
 
422
573
  .btn-primary,
423
- .btn-secondary {
424
- -webkit-app-region: no-drag;
425
- padding: 10px 20px;
426
- border-radius: 10px;
427
- font-family: inherit;
428
- font-size: 0.9rem;
429
- font-weight: 500;
574
+ .btn-secondary,
575
+ .btn-danger,
576
+ .btn-connect,
577
+ .btn-disconnect {
578
+ min-height: 38px;
579
+ padding: 9px 15px;
580
+ border-radius: 9px;
430
581
  cursor: pointer;
431
- transition: all 0.2s;
582
+ font-size: 0.86rem;
583
+ font-weight: 600;
584
+ transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
585
+ }
586
+
587
+ .btn-small {
588
+ min-height: 32px;
589
+ padding: 6px 11px;
590
+ font-size: 0.78rem;
432
591
  }
433
592
 
434
593
  .btn-primary {
435
- background: var(--accent);
436
- color: white;
437
- border: none;
594
+ border: 1px solid transparent;
595
+ background: linear-gradient(135deg, var(--accent), var(--accent-hover));
596
+ color: #ffffff;
597
+ box-shadow: 0 10px 22px rgba(139, 92, 246, 0.24);
438
598
  }
439
599
 
440
- .btn-primary:hover {
441
- background: var(--accent-hover);
600
+ .btn-primary:hover,
601
+ .btn-secondary:hover,
602
+ .btn-danger:hover,
603
+ .btn-connect:hover,
604
+ .btn-disconnect:hover {
442
605
  transform: translateY(-1px);
443
606
  }
444
607
 
445
608
  .btn-secondary {
446
- background: transparent;
447
- color: var(--text-muted);
448
609
  border: 1px solid var(--border);
610
+ background: var(--surface-bg);
611
+ color: var(--text-soft);
449
612
  }
450
613
 
451
614
  .btn-secondary:hover {
452
- border-color: var(--text-muted);
615
+ border-color: var(--border-strong);
453
616
  color: var(--text-main);
454
617
  }
455
618
 
456
- .btn-danger {
457
- -webkit-app-region: no-drag;
458
- padding: 10px 20px;
459
- border-radius: 10px;
460
- font-family: inherit;
461
- font-size: 0.9rem;
462
- font-weight: 500;
463
- cursor: pointer;
619
+ .btn-danger,
620
+ .btn-disconnect {
621
+ border: 1px solid rgba(239, 68, 68, 0.36);
464
622
  background: rgba(239, 68, 68, 0.1);
465
- color: #ef4444;
466
- border: 1px solid rgba(239, 68, 68, 0.4);
467
- transition: all 0.2s;
623
+ color: var(--danger);
468
624
  }
469
625
 
470
- .btn-danger:hover {
471
- background: #ef4444;
472
- color: white;
473
- transform: translateY(-1px);
474
- box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
626
+ .btn-danger:hover,
627
+ .btn-disconnect:hover {
628
+ background: var(--danger);
629
+ color: #ffffff;
475
630
  }
476
631
 
477
- /* Range Slider (Proactive Settings) */
478
- .slider-group {
479
- display: flex;
480
- align-items: center;
632
+ .btn-connect {
633
+ border: 1px solid transparent;
634
+ background: var(--accent);
635
+ color: #ffffff;
636
+ }
637
+
638
+ .full-width {
639
+ width: 100%;
640
+ }
641
+
642
+ .theme-grid {
643
+ display: grid;
644
+ grid-template-columns: repeat(4, minmax(0, 1fr));
481
645
  gap: 12px;
482
- margin-bottom: 6px;
483
646
  }
484
647
 
485
- .range-slider {
486
- -webkit-app-region: no-drag;
487
- flex: 1;
488
- -webkit-appearance: none;
489
- appearance: none;
490
- height: 5px;
491
- border-radius: 10px;
492
- background: var(--border);
493
- outline: none;
648
+ .theme-card {
649
+ display: flex;
650
+ flex-direction: column;
651
+ gap: 9px;
652
+ padding: 10px;
653
+ border: 1px solid var(--border);
654
+ border-radius: 11px;
655
+ background: var(--surface-bg);
656
+ color: var(--text-soft);
494
657
  cursor: pointer;
495
- transition: background 0.2s;
658
+ text-align: left;
496
659
  }
497
660
 
498
- .range-slider::-webkit-slider-thumb {
499
- -webkit-appearance: none;
500
- appearance: none;
501
- width: 16px;
502
- height: 16px;
503
- border-radius: 50%;
504
- background: var(--accent);
505
- cursor: pointer;
506
- box-shadow: 0 0 6px rgba(139, 92, 246, 0.5);
507
- transition: transform 0.15s, box-shadow 0.15s;
661
+ .theme-card:hover,
662
+ .theme-card.active {
663
+ border-color: rgba(139, 92, 246, 0.42);
664
+ color: var(--text-main);
508
665
  }
509
666
 
510
- .range-slider::-webkit-slider-thumb:hover {
511
- transform: scale(1.2);
512
- box-shadow: 0 0 10px rgba(139, 92, 246, 0.7);
667
+ .theme-card.active {
668
+ box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.24);
513
669
  }
514
670
 
515
- .range-value {
516
- font-size: 0.82rem;
517
- font-weight: 600;
518
- color: var(--accent);
519
- background: rgba(139, 92, 246, 0.12);
520
- border: 1px solid rgba(139, 92, 246, 0.3);
671
+ .theme-preview {
672
+ width: 100%;
673
+ height: 54px;
521
674
  border-radius: 8px;
522
- padding: 3px 10px;
523
- min-width: 60px;
524
- text-align: center;
525
- white-space: nowrap;
526
675
  }
527
676
 
528
- .setting-row label {
529
- display: block;
530
- font-size: 0.88rem;
531
- font-weight: 500;
532
- color: var(--text-main);
533
- margin-bottom: 8px;
677
+ .dark-preview {
678
+ background: linear-gradient(135deg, #0b1020 0%, #241642 100%);
534
679
  }
535
680
 
536
- /* Shortcuts Guide */
537
- .shortcut-list {
681
+ .light-preview {
682
+ background: linear-gradient(135deg, #f8fafc 0%, #dbe5f0 100%);
683
+ }
684
+
685
+ .midnight-preview {
686
+ background: linear-gradient(135deg, #020617 0%, #100626 100%);
687
+ }
688
+
689
+ .custom-preview {
690
+ background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
691
+ border: 1px dashed rgba(255, 255, 255, 0.28);
692
+ }
693
+
694
+ .custom-theme-panel {
695
+ margin-top: 14px;
696
+ padding: 14px;
697
+ border: 1px dashed var(--border-strong);
698
+ border-radius: 11px;
699
+ background: var(--surface-bg);
700
+ }
701
+
702
+ .custom-theme-panel .setting-row + .setting-row {
703
+ margin-top: 12px;
704
+ }
705
+
706
+ .color-range,
707
+ .color-inputs {
538
708
  display: flex;
539
- flex-direction: column;
540
- gap: 12px;
541
- background: rgba(0, 0, 0, 0.15);
542
- padding: 16px;
543
- border-radius: 12px;
544
- border: 1px solid var(--border);
709
+ align-items: center;
710
+ gap: 10px;
545
711
  }
546
712
 
547
- .shortcut-item {
713
+ .color-section {
548
714
  display: flex;
715
+ align-items: flex-end;
549
716
  justify-content: space-between;
550
- align-items: center;
551
- font-size: 0.88rem;
552
- color: var(--text-main);
717
+ gap: 20px;
553
718
  }
554
719
 
555
- .keys {
720
+ .color-presets {
556
721
  display: flex;
557
- gap: 4px;
558
- align-items: center;
559
- color: var(--text-muted);
560
- font-size: 0.75rem;
722
+ flex-wrap: wrap;
723
+ gap: 10px;
561
724
  }
562
725
 
563
- kbd {
564
- background: rgba(255, 255, 255, 0.1);
565
- border: 1px solid var(--border);
566
- border-radius: 4px;
567
- padding: 2px 6px;
568
- font-family: 'Outfit', sans-serif;
569
- font-size: 0.75rem;
570
- font-weight: 600;
571
- color: var(--accent);
572
- box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
726
+ .color-dot {
727
+ width: 32px;
728
+ height: 32px;
729
+ border: 3px solid transparent;
730
+ border-radius: 50%;
731
+ cursor: pointer;
732
+ transition: transform 0.15s, border-color 0.15s;
573
733
  }
574
734
 
575
- /* Toggle Switch */
576
- .toggle-switch {
577
- position: relative;
578
- display: inline-block;
579
- width: 44px;
580
- height: 24px;
581
- -webkit-app-region: no-drag;
735
+ .color-dot:hover {
736
+ transform: scale(1.08);
582
737
  }
583
738
 
584
- .toggle-switch input {
585
- opacity: 0;
586
- width: 0;
587
- height: 0;
739
+ .color-dot.active {
740
+ border-color: #ffffff;
741
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
588
742
  }
589
743
 
590
- .toggle-slider {
591
- position: absolute;
592
- cursor: pointer;
593
- top: 0;
594
- left: 0;
595
- right: 0;
596
- bottom: 0;
597
- background-color: var(--input-bg);
744
+ .accent-purple { background: #8b5cf6; }
745
+ .accent-cyan { background: #06b6d4; }
746
+ .accent-green { background: #10b981; }
747
+ .accent-amber { background: #f59e0b; }
748
+ .accent-red { background: #ef4444; }
749
+ .accent-pink { background: #ec4899; }
750
+
751
+ .plugin-list {
752
+ display: grid;
753
+ gap: 10px;
754
+ }
755
+
756
+ .plugin-card {
757
+ display: grid;
758
+ grid-template-columns: 38px minmax(0, 1fr) auto;
759
+ align-items: center;
760
+ gap: 12px;
761
+ padding: 12px;
598
762
  border: 1px solid var(--border);
599
- transition: .3s;
600
- border-radius: 24px;
763
+ border-radius: 11px;
764
+ background: var(--surface-bg);
601
765
  }
602
766
 
603
- .toggle-slider:before {
604
- position: absolute;
605
- content: "";
606
- height: 16px;
607
- width: 16px;
608
- left: 3px;
609
- bottom: 3px;
610
- background-color: var(--text-muted);
611
- transition: .3s;
612
- border-radius: 50%;
767
+ .plugin-icon {
768
+ display: grid;
769
+ place-items: center;
770
+ width: 38px;
771
+ height: 38px;
772
+ border: 1px solid var(--border);
773
+ border-radius: 10px;
774
+ background: var(--surface-strong);
613
775
  }
614
776
 
615
- input:checked + .toggle-slider {
616
- background-color: var(--accent);
617
- border-color: var(--accent);
777
+ .plugin-name {
778
+ margin-bottom: 3px;
779
+ color: var(--text-main);
780
+ font-size: 0.92rem;
781
+ font-weight: 600;
618
782
  }
619
783
 
620
- input:checked + .toggle-slider:before {
621
- transform: translateX(19px);
622
- background-color: white;
623
- box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
784
+ .plugin-desc {
785
+ color: var(--text-muted);
786
+ font-size: 0.78rem;
787
+ line-height: 1.35;
624
788
  }
625
789
 
626
- /* Plugin Manager */
627
- .plugin-list {
628
- display: flex;
629
- flex-direction: column;
630
- gap: 12px;
790
+ .mcp-list {
791
+ display: grid;
792
+ gap: 10px;
793
+ margin-bottom: 16px;
631
794
  }
632
795
 
633
- .plugin-card {
634
- -webkit-app-region: no-drag;
796
+ .mcp-empty {
797
+ padding: 16px;
798
+ border: 1px dashed var(--border);
799
+ border-radius: 11px;
800
+ color: var(--text-muted);
801
+ font-size: 0.82rem;
802
+ text-align: center;
803
+ }
804
+
805
+ .mcp-item {
635
806
  display: flex;
636
807
  align-items: center;
637
- background: rgba(0, 0, 0, 0.2);
808
+ justify-content: space-between;
809
+ gap: 14px;
810
+ padding: 12px;
638
811
  border: 1px solid var(--border);
639
- border-radius: 12px;
640
- padding: 14px;
641
- transition: all 0.2s;
812
+ border-radius: 11px;
813
+ background: var(--surface-bg);
642
814
  }
643
815
 
644
- .plugin-card:hover {
645
- border-color: var(--accent);
816
+ .mcp-info {
817
+ min-width: 0;
646
818
  }
647
819
 
648
- .plugin-icon {
649
- font-size: 2rem;
650
- margin-right: 14px;
820
+ .mcp-name {
821
+ margin-bottom: 4px;
822
+ color: var(--text-main);
823
+ font-size: 0.9rem;
824
+ font-weight: 600;
651
825
  }
652
826
 
653
- .plugin-info {
654
- flex: 1;
827
+ .mcp-command {
828
+ overflow: hidden;
829
+ color: var(--text-muted);
830
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
831
+ font-size: 0.74rem;
832
+ text-overflow: ellipsis;
833
+ white-space: nowrap;
655
834
  }
656
835
 
657
- .plugin-name {
658
- font-size: 0.95rem;
659
- font-weight: 500;
660
- color: var(--text-main);
661
- margin-bottom: 4px;
836
+ .add-mcp-box {
837
+ display: grid;
838
+ gap: 10px;
839
+ padding: 14px;
840
+ border: 1px dashed var(--border-strong);
841
+ border-radius: 11px;
842
+ background: var(--surface-bg);
662
843
  }
663
844
 
664
- .plugin-desc {
665
- font-size: 0.8rem;
666
- color: var(--text-muted);
845
+ .add-mcp-box h3 {
846
+ color: var(--accent-hover);
847
+ font-size: 0.94rem;
848
+ font-weight: 600;
667
849
  }
668
850
 
669
- .plugin-actions {
851
+ .shortcut-list {
852
+ display: grid;
853
+ gap: 10px;
854
+ }
855
+
856
+ .shortcut-item {
670
857
  display: flex;
671
- gap: 8px;
858
+ align-items: center;
859
+ justify-content: space-between;
860
+ gap: 16px;
861
+ padding: 13px 14px;
862
+ border: 1px solid var(--border);
863
+ border-radius: 11px;
864
+ background: var(--surface-bg);
865
+ color: var(--text-soft);
866
+ font-size: 0.88rem;
672
867
  }
673
868
 
674
- .btn-connect {
675
- padding: 6px 14px;
676
- border-radius: 8px;
677
- font-size: 0.8rem;
678
- font-weight: 500;
679
- cursor: pointer;
680
- background: var(--accent);
681
- color: white;
682
- border: none;
683
- transition: all 0.2s;
869
+ .keys {
870
+ display: flex;
871
+ align-items: center;
872
+ gap: 6px;
684
873
  }
685
874
 
686
- .btn-connect:hover {
687
- background: var(--accent-hover);
688
- transform: translateY(-1px);
875
+ kbd {
876
+ min-width: 30px;
877
+ padding: 4px 8px;
878
+ border: 1px solid var(--border-strong);
879
+ border-radius: 7px;
880
+ background: var(--input-bg);
881
+ color: var(--accent-hover);
882
+ font-family: 'Outfit', sans-serif;
883
+ font-size: 0.76rem;
884
+ font-weight: 700;
885
+ text-align: center;
689
886
  }
690
887
 
691
- .btn-disconnect {
692
- padding: 6px 14px;
693
- border-radius: 8px;
694
- font-size: 0.8rem;
695
- font-weight: 500;
696
- cursor: pointer;
697
- background: transparent;
698
- color: #ef4444;
699
- border: 1px solid rgba(239, 68, 68, 0.4);
700
- transition: all 0.2s;
888
+ .settings-footer {
889
+ justify-content: space-between;
890
+ gap: 14px;
891
+ min-height: 72px;
892
+ padding: 14px 20px;
893
+ border-top: 1px solid var(--border);
701
894
  }
702
895
 
703
- .btn-disconnect:hover {
704
- background: rgba(239, 68, 68, 0.1);
896
+ .settings-footer .btn-danger {
897
+ min-width: 150px;
898
+ }
899
+
900
+ .footer-actions {
901
+ margin-left: auto;
902
+ }
903
+
904
+ @media (max-width: 620px) {
905
+ .settings-sidebar {
906
+ width: 64px;
907
+ min-width: 64px;
908
+ padding: 12px 8px;
909
+ }
910
+
911
+ .tab-btn {
912
+ justify-content: center;
913
+ padding: 10px;
914
+ }
915
+
916
+ .tab-btn strong {
917
+ display: none;
918
+ }
919
+
920
+ .settings-content {
921
+ padding: 18px;
922
+ }
923
+
924
+ .section-heading,
925
+ .color-section,
926
+ .settings-footer {
927
+ align-items: stretch;
928
+ flex-direction: column;
929
+ }
930
+
931
+ .footer-actions {
932
+ margin-left: 0;
933
+ }
934
+
935
+ .form-grid,
936
+ .form-grid.compact,
937
+ .theme-grid {
938
+ grid-template-columns: minmax(0, 1fr);
939
+ }
705
940
  }