@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
@@ -4,7 +4,7 @@
4
4
  <head>
5
5
  <meta charset="UTF-8">
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Mint Settings</title>
7
+ <title>Mint - Settings</title>
8
8
  <link rel="stylesheet" href="settings.css">
9
9
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&family=Mali:wght@400;500;600&family=Prompt:wght@400;500&family=Sarabun:wght@400;500&display=swap" rel="stylesheet">
10
10
  </head>
@@ -13,8 +13,11 @@
13
13
  <div class="settings-container">
14
14
  <header class="settings-header drag-region">
15
15
  <div class="header-left">
16
- <span class="settings-icon">⚙️</span>
17
- <h1>Settings</h1>
16
+ <span class="settings-icon">⚙</span>
17
+ <div>
18
+ <h1>Settings</h1>
19
+ <p>Configure Mint assistant behavior and integrations.</p>
20
+ </div>
18
21
  </div>
19
22
  <button class="close-btn" id="close-btn" aria-label="Close">
20
23
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
@@ -26,61 +29,157 @@
26
29
  </header>
27
30
 
28
31
  <main class="settings-body">
29
-
30
- <nav class="settings-sidebar" id="settings-sidebar">
31
- <button class="tab-btn active" data-target="sect-general">⚙️ General</button>
32
- <button class="tab-btn" data-target="sect-audio">🔊 Audio & Voice</button>
33
- <button class="tab-btn" data-target="sect-automation">🤖 Automation</button>
34
- <button class="tab-btn" data-target="sect-theme">🎨 Theme & UI</button>
35
- <button class="tab-btn" data-target="sect-plugins">🧩 Plugins</button>
36
- <button class="tab-btn" data-target="sect-shortcuts">⌨️ Shortcuts</button>
32
+ <nav class="settings-sidebar" id="settings-sidebar" aria-label="Settings sections">
33
+ <button class="tab-btn active" data-target="sect-general"><span>⚙</span><strong>General</strong></button>
34
+ <button class="tab-btn" data-target="sect-audio"><span>🔊</span><strong>Audio & Voice</strong></button>
35
+ <button class="tab-btn" data-target="sect-automation"><span>🤖</span><strong>Automation</strong></button>
36
+ <button class="tab-btn" data-target="sect-theme"><span>🎨</span><strong>Theme & UI</strong></button>
37
+ <button class="tab-btn" data-target="sect-plugins"><span>🧩</span><strong>Plugins</strong></button>
38
+ <button class="tab-btn" data-target="sect-shortcuts"><span>⌨</span><strong>Shortcuts</strong></button>
37
39
  </nav>
38
- <div class="settings-content" id="settings-content">
39
40
 
41
+ <div class="settings-content" id="settings-content">
40
42
  <div class="tab-pane active" id="sect-general">
41
- <!-- API Keys & Hosts -->
42
43
  <section class="setting-section">
43
- <h2 class="section-title">🔑 API Keys & Hosts</h2>
44
- <div class="setting-row">
45
- <label for="api-key-input">Gemini API Key</label>
46
- <div class="input-group">
47
- <input type="password" id="api-key-input" placeholder="Enter Gemini API Key..." autocomplete="off">
48
- <button class="toggle-visibility" onclick="const i = document.getElementById('api-key-input'); i.type = i.type === 'password' ? 'text' : 'password';" title="Show/Hide">👁</button>
44
+ <div class="section-heading">
45
+ <div>
46
+ <p class="section-kicker">AI routing</p>
47
+ <h2 class="section-title">Provider & Model</h2>
49
48
  </div>
49
+ <p class="section-description">Choose which AI backend Mint uses, then set the default model for each provider.</p>
50
50
  </div>
51
- <div class="setting-row" style="margin-top: 10px;">
52
- <label for="openai-api-key-input">OpenAI API Key</label>
53
- <div class="input-group">
54
- <input type="password" id="openai-api-key-input" placeholder="Enter OpenAI API Key..." autocomplete="off">
55
- <button class="toggle-visibility" onclick="const i = document.getElementById('openai-api-key-input'); i.type = i.type === 'password' ? 'text' : 'password';" title="Show/Hide">👁</button>
51
+
52
+ <div class="form-grid compact">
53
+ <div class="setting-row wide">
54
+ <label for="ai-provider-select">Active Provider</label>
55
+ <select id="ai-provider-select">
56
+ <option value="gemini">Google Gemini (Cloud)</option>
57
+ <option value="anthropic">Anthropic Claude</option>
58
+ <option value="openai">OpenAI</option>
59
+ <option value="ollama">Ollama (Local / Private)</option>
60
+ <option value="huggingface">Hugging Face (Inference API)</option>
61
+ <option value="local_openai">Local (LM Studio / OpenAI Compatible)</option>
62
+ </select>
56
63
  </div>
57
- </div>
58
- <div class="setting-row" style="margin-top: 10px;">
59
- <label for="anthropic-api-key-input">Anthropic API Key</label>
60
- <div class="input-group">
61
- <input type="password" id="anthropic-api-key-input" placeholder="Enter Anthropic API Key..." autocomplete="off">
62
- <button class="toggle-visibility" onclick="const i = document.getElementById('anthropic-api-key-input'); i.type = i.type === 'password' ? 'text' : 'password';" title="Show/Hide">👁</button>
64
+
65
+ <div class="setting-row">
66
+ <label for="gemini-model-select">Gemini Model</label>
67
+ <select id="gemini-model-select">
68
+ <option value="gemini-2.5-flash">gemini-2.5-flash</option>
69
+ <option value="gemini-3.1-flash-lite">gemini-3.1-flash-lite</option>
70
+ <option value="gemini-3.1-flash-lite-preview">gemini-3.1-flash-lite-preview</option>
71
+ <option value="custom">Custom...</option>
72
+ </select>
73
+ </div>
74
+ <div class="setting-row hidden-row" id="gemini-model-custom-row">
75
+ <label for="gemini-model-custom">Custom Gemini Model</label>
76
+ <input type="text" id="gemini-model-custom" placeholder="e.g. gemini-3.1-flash-lite-preview">
77
+ </div>
78
+
79
+ <div class="setting-row">
80
+ <label for="openai-model-select">OpenAI Model</label>
81
+ <select id="openai-model-select">
82
+ <option value="gpt-4o">gpt-4o</option>
83
+ <option value="gpt-4o-mini">gpt-4o-mini</option>
84
+ <option value="o1-preview">o1-preview</option>
85
+ <option value="o1-mini">o1-mini</option>
86
+ <option value="custom">Custom...</option>
87
+ </select>
88
+ </div>
89
+ <div class="setting-row hidden-row" id="openai-model-custom-row">
90
+ <label for="openai-model-custom">Custom OpenAI Model</label>
91
+ <input type="text" id="openai-model-custom" placeholder="e.g. gpt-4o">
92
+ </div>
93
+
94
+ <div class="setting-row">
95
+ <label for="anthropic-model-select">Anthropic Model</label>
96
+ <select id="anthropic-model-select">
97
+ <option value="claude-3-5-sonnet-latest">claude-3-5-sonnet-latest</option>
98
+ <option value="claude-3-opus-latest">claude-3-opus-latest</option>
99
+ <option value="claude-3-5-haiku-latest">claude-3-5-haiku-latest</option>
100
+ <option value="custom">Custom...</option>
101
+ </select>
102
+ </div>
103
+ <div class="setting-row hidden-row" id="anthropic-model-custom-row">
104
+ <label for="anthropic-model-custom">Custom Anthropic Model</label>
105
+ <input type="text" id="anthropic-model-custom" placeholder="e.g. claude-3-5-sonnet-latest">
106
+ </div>
107
+
108
+ <div class="setting-row">
109
+ <label for="hf-model-name">Hugging Face Model</label>
110
+ <input type="text" id="hf-model-name" placeholder="e.g. meta-llama/Meta-Llama-3-8B-Instruct">
111
+ </div>
112
+ <div class="setting-row">
113
+ <label for="local-model-name">LM Studio Model</label>
114
+ <input type="text" id="local-model-name" placeholder="e.g. local-model">
115
+ </div>
116
+ <div class="setting-row">
117
+ <label for="ollama-model-input">Ollama Model</label>
118
+ <input type="text" id="ollama-model-input" placeholder="e.g. llama3:latest">
63
119
  </div>
64
120
  </div>
65
- <div class="setting-row" style="margin-top: 10px;">
66
- <label for="hf-api-key">Hugging Face API Key</label>
67
- <div class="input-group">
68
- <input type="password" id="hf-api-key" placeholder="Enter Hugging Face API Key..." autocomplete="off">
69
- <button class="toggle-visibility" onclick="const i = document.getElementById('hf-api-key'); i.type = i.type === 'password' ? 'text' : 'password';" title="Show/Hide">👁</button>
121
+ </section>
122
+
123
+ <section class="setting-section">
124
+ <div class="section-heading">
125
+ <div>
126
+ <p class="section-kicker">Credentials</p>
127
+ <h2 class="section-title">API Keys & Hosts</h2>
70
128
  </div>
129
+ <p class="section-description">Cloud providers need API keys. Local providers need host URLs.</p>
71
130
  </div>
72
- <div class="setting-row" style="margin-top: 10px;">
73
- <label for="local-api-base-url">LM Studio Base URL</label>
74
- <input type="text" id="local-api-base-url" placeholder="e.g. http://localhost:1234/v1">
131
+
132
+ <div class="form-grid">
133
+ <div class="setting-row">
134
+ <label for="api-key-input">Gemini API Key</label>
135
+ <div class="input-group">
136
+ <input type="password" id="api-key-input" placeholder="Enter Gemini API Key..." autocomplete="off">
137
+ <button class="toggle-visibility" onclick="const i = document.getElementById('api-key-input'); i.type = i.type === 'password' ? 'text' : 'password';" title="Show/Hide">👁</button>
138
+ </div>
139
+ </div>
140
+ <div class="setting-row">
141
+ <label for="openai-api-key-input">OpenAI API Key</label>
142
+ <div class="input-group">
143
+ <input type="password" id="openai-api-key-input" placeholder="Enter OpenAI API Key..." autocomplete="off">
144
+ <button class="toggle-visibility" onclick="const i = document.getElementById('openai-api-key-input'); i.type = i.type === 'password' ? 'text' : 'password';" title="Show/Hide">👁</button>
145
+ </div>
146
+ </div>
147
+ <div class="setting-row">
148
+ <label for="anthropic-api-key-input">Anthropic API Key</label>
149
+ <div class="input-group">
150
+ <input type="password" id="anthropic-api-key-input" placeholder="Enter Anthropic API Key..." autocomplete="off">
151
+ <button class="toggle-visibility" onclick="const i = document.getElementById('anthropic-api-key-input'); i.type = i.type === 'password' ? 'text' : 'password';" title="Show/Hide">👁</button>
152
+ </div>
153
+ </div>
154
+ <div class="setting-row">
155
+ <label for="hf-api-key">Hugging Face API Key</label>
156
+ <div class="input-group">
157
+ <input type="password" id="hf-api-key" placeholder="Enter Hugging Face API Key..." autocomplete="off">
158
+ <button class="toggle-visibility" onclick="const i = document.getElementById('hf-api-key'); i.type = i.type === 'password' ? 'text' : 'password';" title="Show/Hide">👁</button>
159
+ </div>
160
+ </div>
161
+ <div class="setting-row">
162
+ <label for="local-api-base-url">LM Studio Base URL</label>
163
+ <input type="text" id="local-api-base-url" placeholder="e.g. http://localhost:1234/v1">
164
+ </div>
165
+ <div class="setting-row">
166
+ <label for="ollama-host-input">Ollama Host</label>
167
+ <input type="text" id="ollama-host-input" placeholder="e.g. http://localhost:11434">
168
+ </div>
75
169
  </div>
76
- <div class="setting-row" style="margin-top: 10px;">
77
- <label for="ollama-host-input">Ollama Host</label>
78
- <input type="text" id="ollama-host-input" placeholder="e.g. http://localhost:11434">
170
+ </section>
171
+
172
+ <section class="setting-section">
173
+ <div class="section-heading">
174
+ <div>
175
+ <p class="section-kicker">Desktop</p>
176
+ <h2 class="section-title">Assistant Presence</h2>
177
+ </div>
79
178
  </div>
80
- <div class="setting-row" style="display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding: 12px; background: rgba(139, 92, 246, 0.1); border-radius: 12px; border: 1px solid rgba(139, 92, 246, 0.2);">
81
- <div style="display: flex; flex-direction: column; gap: 4px;">
82
- <label for="show-desktop-widget" style="margin-bottom: 0; font-weight: 500;">Show Desktop AI Candidate</label>
83
- <span class="hint" style="font-size: 0.75rem;">Show the mini AI character on your desktop</span>
179
+ <div class="toggle-row">
180
+ <div>
181
+ <label for="show-desktop-widget">Show Desktop AI Candidate</label>
182
+ <p class="hint">Show the mini AI character on your desktop.</p>
84
183
  </div>
85
184
  <label class="toggle-switch">
86
185
  <input type="checkbox" id="show-desktop-widget">
@@ -88,431 +187,378 @@
88
187
  </label>
89
188
  </div>
90
189
  </section>
190
+ </div>
91
191
 
92
- <!-- Models Configuration -->
192
+ <div class="tab-pane" id="sect-audio">
93
193
  <section class="setting-section">
94
- <h2 class="section-title">🧠 AI Engine & Default Models</h2>
95
- <div class="setting-row">
96
- <label for="ai-provider-select">Active Provider</label>
97
- <div class="input-group">
98
- <select id="ai-provider-select" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; cursor: pointer;">
99
- <option value="gemini" style="background: var(--bg-color)">Google Gemini (Cloud)</option>
100
- <option value="anthropic" style="background: var(--bg-color)">Anthropic Claude</option>
101
- <option value="openai" style="background: var(--bg-color)">OpenAI</option>
102
- <option value="ollama" style="background: var(--bg-color)">Ollama (Local / Private)</option>
103
- <option value="huggingface" style="background: var(--bg-color)">Hugging Face (Inference API)</option>
104
- <option value="local_openai" style="background: var(--bg-color)">Local (LM Studio / OpenAI Compatible)</option>
105
- </select>
194
+ <div class="section-heading">
195
+ <div>
196
+ <p class="section-kicker">Speech</p>
197
+ <h2 class="section-title">Voice Reply</h2>
106
198
  </div>
199
+ <p class="section-description">Control spoken responses and TTS behavior.</p>
107
200
  </div>
108
201
 
109
- <div class="setting-row" style="margin-top: 14px;">
110
- <label for="gemini-model-select">Gemini Model</label>
111
- <div class="input-group">
112
- <select id="gemini-model-select" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; cursor: pointer;">
113
- <option value="gemini-2.5-flash" style="background: var(--bg-color)">gemini-2.5-flash</option>
114
- <option value="gemini-3.1-flash-lite" style="background: var(--bg-color)">gemini-3.1-flash-lite</option>
115
- <option value="gemini-3.1-flash-lite-preview" style="background: var(--bg-color)">gemini-3.1-flash-lite-preview</option>
116
- <option value="custom" style="background: var(--bg-color)">Custom...</option>
117
- </select>
202
+ <div class="toggle-row">
203
+ <div>
204
+ <label for="enable-voice-reply">Enable Voice Reply</label>
205
+ <p class="hint">Mint will speak responses out loud when this is enabled.</p>
118
206
  </div>
119
- </div>
120
- <div class="setting-row" id="gemini-model-custom-row" style="display: none; margin-top: 10px;">
121
- <label for="gemini-model-custom">Custom Gemini Model</label>
122
- <input type="text" id="gemini-model-custom" placeholder="e.g. gemini-3.1-flash-lite-preview">
207
+ <label class="toggle-switch">
208
+ <input type="checkbox" id="enable-voice-reply">
209
+ <span class="toggle-slider"></span>
210
+ </label>
123
211
  </div>
124
212
 
125
- <div class="setting-row" style="margin-top: 14px;">
126
- <label for="openai-model-select">OpenAI Model</label>
127
- <div class="input-group">
128
- <select id="openai-model-select" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; cursor: pointer;">
129
- <option value="gpt-4o" style="background: var(--bg-color)">gpt-4o</option>
130
- <option value="gpt-4o-mini" style="background: var(--bg-color)">gpt-4o-mini</option>
131
- <option value="o1-preview" style="background: var(--bg-color)">o1-preview</option>
132
- <option value="o1-mini" style="background: var(--bg-color)">o1-mini</option>
133
- <option value="custom" style="background: var(--bg-color)">Custom...</option>
213
+ <div class="form-grid single">
214
+ <div class="setting-row">
215
+ <label for="tts-provider-select">Voice Engine</label>
216
+ <select id="tts-provider-select">
217
+ <option value="google">Google Cloud (Natural, Auto Lang)</option>
218
+ <option value="native">OS Native (Supports Pitch)</option>
134
219
  </select>
135
220
  </div>
136
221
  </div>
137
- <div class="setting-row" id="openai-model-custom-row" style="display: none; margin-top: 10px;">
138
- <label for="openai-model-custom">Custom OpenAI Model</label>
139
- <input type="text" id="openai-model-custom" placeholder="e.g. gpt-4o">
222
+
223
+ <div class="slider-stack">
224
+ <div class="setting-row">
225
+ <label for="tts-volume">Volume</label>
226
+ <div class="slider-group">
227
+ <input type="range" id="tts-volume" class="range-slider" min="0" max="1" step="0.1" value="1">
228
+ <span class="range-value" id="tts-volume-val">100%</span>
229
+ </div>
230
+ </div>
231
+ <div class="setting-row">
232
+ <label for="tts-speed">Speed</label>
233
+ <div class="slider-group">
234
+ <input type="range" id="tts-speed" class="range-slider" min="0.5" max="2" step="0.1" value="1">
235
+ <span class="range-value" id="tts-speed-val">1.0x</span>
236
+ </div>
237
+ </div>
238
+ <div class="setting-row">
239
+ <label for="tts-pitch">Pitch</label>
240
+ <div class="slider-group">
241
+ <input type="range" id="tts-pitch" class="range-slider" min="0" max="2" step="0.1" value="1">
242
+ <span class="range-value" id="tts-pitch-val">1.0</span>
243
+ </div>
244
+ <p class="hint">Pitch applies to OS native voice only.</p>
245
+ </div>
140
246
  </div>
247
+ </section>
248
+ </div>
141
249
 
142
- <div class="setting-row" style="margin-top: 14px;">
143
- <label for="anthropic-model-select">Anthropic Model</label>
144
- <div class="input-group">
145
- <select id="anthropic-model-select" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; cursor: pointer;">
146
- <option value="claude-3-5-sonnet-latest" style="background: var(--bg-color)">claude-3-5-sonnet-latest</option>
147
- <option value="claude-3-opus-latest" style="background: var(--bg-color)">claude-3-opus-latest</option>
148
- <option value="claude-3-5-haiku-latest" style="background: var(--bg-color)">claude-3-5-haiku-latest</option>
149
- <option value="custom" style="background: var(--bg-color)">Custom...</option>
150
- </select>
250
+ <div class="tab-pane" id="sect-automation">
251
+ <section class="setting-section">
252
+ <div class="section-heading">
253
+ <div>
254
+ <p class="section-kicker">Browser</p>
255
+ <h2 class="section-title">Automation Engine</h2>
151
256
  </div>
152
257
  </div>
153
- <div class="setting-row" id="anthropic-model-custom-row" style="display: none; margin-top: 10px;">
154
- <label for="anthropic-model-custom">Custom Anthropic Model</label>
155
- <input type="text" id="anthropic-model-custom" placeholder="e.g. claude-3-5-sonnet-latest">
258
+ <div class="form-grid single">
259
+ <div class="setting-row">
260
+ <label for="automation-browser-select">Browser Engine</label>
261
+ <select id="automation-browser-select">
262
+ <option value="chromium">Chromium (Bundled)</option>
263
+ <option value="/usr/bin/firefox">Firefox (System - Linux)</option>
264
+ </select>
265
+ </div>
156
266
  </div>
267
+ </section>
157
268
 
158
- <div class="setting-row" style="margin-top: 14px;">
159
- <label for="hf-model-name">Hugging Face Model</label>
160
- <input type="text" id="hf-model-name" placeholder="e.g. meta-llama/Meta-Llama-3-8B-Instruct">
269
+ <section class="setting-section">
270
+ <div class="section-heading">
271
+ <div>
272
+ <p class="section-kicker">Awareness</p>
273
+ <h2 class="section-title">Proactive Assistant</h2>
274
+ </div>
275
+ <p class="section-description">Tune screen analysis frequency and suggestion timing.</p>
276
+ </div>
277
+ <div class="slider-stack">
278
+ <div class="setting-row">
279
+ <label for="proactive-interval">Screen Capture Frequency</label>
280
+ <div class="slider-group">
281
+ <input type="range" id="proactive-interval" min="30" max="300" step="30" value="60" class="range-slider">
282
+ <span class="range-value" id="proactive-interval-display">60 sec</span>
283
+ </div>
284
+ <p class="hint">Lower values respond faster but use more API calls.</p>
285
+ </div>
286
+ <div class="setting-row">
287
+ <label for="proactive-cooldown">Suggestion Cooldown</label>
288
+ <div class="slider-group">
289
+ <input type="range" id="proactive-cooldown" min="60" max="600" step="60" value="120" class="range-slider">
290
+ <span class="range-value" id="proactive-cooldown-display">2 min</span>
291
+ </div>
292
+ <p class="hint">Minimum time between repeat suggestions.</p>
293
+ </div>
161
294
  </div>
295
+ </section>
162
296
 
163
- <div class="setting-row" style="margin-top: 14px;">
164
- <label for="local-model-name">Local (LM Studio) Model</label>
165
- <input type="text" id="local-model-name" placeholder="e.g. local-model">
297
+ <section class="setting-section">
298
+ <div class="section-heading">
299
+ <div>
300
+ <p class="section-kicker">Rules</p>
301
+ <h2 class="section-title">Custom Workflows</h2>
302
+ </div>
303
+ </div>
304
+ <div class="toggle-row">
305
+ <div>
306
+ <label for="enable-custom-workflows">Enable Custom Workflows</label>
307
+ <p class="hint">Run "If This Then Mint" rules from the workflow JSON file.</p>
308
+ </div>
309
+ <label class="toggle-switch">
310
+ <input type="checkbox" id="enable-custom-workflows">
311
+ <span class="toggle-slider"></span>
312
+ </label>
166
313
  </div>
314
+ <div class="button-row">
315
+ <button class="btn-secondary" id="open-workflows-btn">Open workflows.json</button>
316
+ <button class="btn-primary" id="reload-workflows-btn">Reload Rules</button>
317
+ </div>
318
+ </section>
167
319
 
168
- <div class="setting-row" style="margin-top: 14px;">
169
- <label for="ollama-model-input">Ollama Model</label>
170
- <input type="text" id="ollama-model-input" placeholder="e.g. llama3:latest">
320
+ <section class="setting-section">
321
+ <div class="section-heading">
322
+ <div>
323
+ <p class="section-kicker">Code mode</p>
324
+ <h2 class="section-title">Agent Collaboration</h2>
325
+ </div>
326
+ </div>
327
+ <div class="toggle-row">
328
+ <div>
329
+ <label for="enable-agent-collaboration">Enable Multi-Agent Review</label>
330
+ <p class="hint">Allow a secondary model to review code written by the primary model.</p>
331
+ </div>
332
+ <label class="toggle-switch">
333
+ <input type="checkbox" id="enable-agent-collaboration">
334
+ <span class="toggle-slider"></span>
335
+ </label>
171
336
  </div>
172
337
  </section>
173
338
  </div>
174
- <div class="tab-pane" id="sect-audio">
175
- <!-- Audio & Voice -->
176
- <section class="setting-section">
177
- <h2 class="section-title">🔊 Audio & Voice</h2>
178
- <div class="setting-row" style="display: flex; align-items: center; justify-content: space-between;">
179
- <label for="enable-voice-reply" style="margin-bottom: 0;">Enable Voice Reply</label>
180
- <label class="toggle-switch">
181
- <input type="checkbox" id="enable-voice-reply">
182
- <span class="toggle-slider"></span>
183
- </label>
184
- </div>
185
- <p class="hint" style="margin-top: 8px;">If enabled, Mint will speak the responses out loud.</p>
186
-
187
- <div class="setting-row" style="margin-top: 16px;">
188
- <label for="tts-provider-select">Voice Engine</label>
189
- <div class="input-group">
190
- <select id="tts-provider-select" style="flex: 1; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s;">
191
- <option value="google" style="background: var(--bg-color)">Google Cloud (Natural, Auto Lang)</option>
192
- <option value="native" style="background: var(--bg-color)">OS Native (Supports Pitch)</option>
193
- </select>
194
- </div>
195
- </div>
196
339
 
197
- <div class="setting-row" style="margin-top: 12px;">
198
- <label for="tts-volume">Volume</label>
199
- <div class="slider-group">
200
- <input type="range" id="tts-volume" class="range-slider" min="0" max="1" step="0.1" value="1">
201
- <span class="range-value" id="tts-volume-val">100%</span>
202
- </div>
203
- </div>
340
+ <div class="tab-pane" id="sect-theme">
341
+ <section class="setting-section">
342
+ <div class="section-heading">
343
+ <div>
344
+ <p class="section-kicker">Appearance</p>
345
+ <h2 class="section-title">Theme</h2>
346
+ </div>
347
+ </div>
348
+ <div class="theme-grid">
349
+ <button class="theme-card" data-theme="dark" id="theme-dark">
350
+ <div class="theme-preview dark-preview"></div>
351
+ <span>Dark</span>
352
+ </button>
353
+ <button class="theme-card" data-theme="light" id="theme-light">
354
+ <div class="theme-preview light-preview"></div>
355
+ <span>Light</span>
356
+ </button>
357
+ <button class="theme-card" data-theme="midnight" id="theme-midnight">
358
+ <div class="theme-preview midnight-preview"></div>
359
+ <span>Midnight</span>
360
+ </button>
361
+ <button class="theme-card" data-theme="custom" id="theme-custom">
362
+ <div class="theme-preview custom-preview" id="custom-theme-preview-box"></div>
363
+ <span>Custom</span>
364
+ </button>
365
+ </div>
204
366
 
205
- <div class="setting-row">
206
- <label for="tts-speed">Speed (Rate)</label>
207
- <div class="slider-group">
208
- <input type="range" id="tts-speed" class="range-slider" min="0.5" max="2" step="0.1" value="1">
209
- <span class="range-value" id="tts-speed-val">1.0x</span>
210
- </div>
211
- </div>
367
+ <div id="custom-theme-controls" class="custom-theme-panel hidden-row">
368
+ <div class="setting-row">
369
+ <label>Background Gradient</label>
370
+ <div class="color-range">
371
+ <input type="color" id="custom-bg-start" title="Start Color">
372
+ <span>→</span>
373
+ <input type="color" id="custom-bg-end" title="End Color">
374
+ </div>
375
+ </div>
376
+ <div class="setting-row">
377
+ <label for="custom-panel-bg">Panel Background</label>
378
+ <input type="color" id="custom-panel-bg">
379
+ </div>
380
+ </div>
381
+ </section>
212
382
 
213
- <div class="setting-row">
214
- <label for="tts-pitch">Pitch (OS Native Only)</label>
215
- <div class="slider-group">
216
- <input type="range" id="tts-pitch" class="range-slider" min="0" max="2" step="0.1" value="1">
217
- <span class="range-value" id="tts-pitch-val">1.0</span>
218
- </div>
219
- </div>
220
- </section>
221
- </div>
222
- <div class="tab-pane" id="sect-automation">
223
- <!-- Automation Browser -->
224
- <section class="setting-section">
225
- <h2 class="section-title">🌐 Automation Browser</h2>
226
- <div class="setting-row">
227
- <label for="automation-browser-select">Browser Engine</label>
228
- <div class="input-group">
229
- <select id="automation-browser-select" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; cursor: pointer;">
230
- <option value="chromium" style="background: var(--bg-color)">Chromium (Bundled)</option>
231
- <option value="/usr/bin/firefox" style="background: var(--bg-color)">Firefox (System - Linux)</option>
232
- </select>
233
- </div>
234
- </div>
235
- </section>
236
- <!-- Proactive Assistant -->
237
- <section class="setting-section">
238
- <h2 class="section-title">✨ Proactive Assistant</h2>
239
-
240
- <div class="setting-row">
241
- <label for="proactive-interval">Screen Capture Frequency</label>
242
- <div class="slider-group">
243
- <input type="range" id="proactive-interval"
244
- min="30" max="300" step="30" value="60"
245
- class="range-slider">
246
- <span class="range-value" id="proactive-interval-display">60 sec</span>
247
- </div>
248
- <p class="hint">Interval for AI screen analysis (lower = faster response, but higher API usage)</p>
249
- </div>
383
+ <section class="setting-section">
384
+ <div class="section-heading">
385
+ <div>
386
+ <p class="section-kicker">Color</p>
387
+ <h2 class="section-title">Accent & Text</h2>
388
+ </div>
389
+ </div>
390
+ <div class="color-section">
391
+ <div>
392
+ <label>Accent Color</label>
393
+ <div class="color-presets">
394
+ <button class="color-dot accent-purple" data-color="#8b5cf6" title="Purple"></button>
395
+ <button class="color-dot accent-cyan" data-color="#06b6d4" title="Cyan"></button>
396
+ <button class="color-dot accent-green" data-color="#10b981" title="Green"></button>
397
+ <button class="color-dot accent-amber" data-color="#f59e0b" title="Amber"></button>
398
+ <button class="color-dot accent-red" data-color="#ef4444" title="Red"></button>
399
+ <button class="color-dot accent-pink" data-color="#ec4899" title="Pink"></button>
400
+ </div>
401
+ </div>
402
+ <div class="color-inputs">
403
+ <label for="custom-color">Custom Accent</label>
404
+ <input type="color" id="custom-color" value="#8b5cf6">
405
+ <label for="system-text-color">System Text</label>
406
+ <input type="color" id="system-text-color" value="#f8fafc">
407
+ </div>
408
+ </div>
409
+ </section>
250
410
 
251
- <div class="setting-row" style="margin-top: 14px;">
252
- <label for="proactive-cooldown">Suggestion Cooldown</label>
253
- <div class="slider-group">
254
- <input type="range" id="proactive-cooldown"
255
- min="60" max="600" step="60" value="120"
256
- class="range-slider">
257
- <span class="range-value" id="proactive-cooldown-display">2 min</span>
258
- </div>
259
- <p class="hint">Min time between repeat suggestions (higher = less intrusive)</p>
260
- </div>
261
- </section>
262
- <!-- Custom Workflows -->
263
- <section class="setting-section">
264
- <h2 class="section-title">⚙️ Custom Workflows</h2>
265
- <div class="setting-row" style="display: flex; align-items: center; justify-content: space-between;">
266
- <label for="enable-custom-workflows" style="margin-bottom: 0;">Enable Custom Workflows</label>
267
- <label class="toggle-switch">
268
- <input type="checkbox" id="enable-custom-workflows">
269
- <span class="toggle-slider"></span>
270
- </label>
271
- </div>
272
- <div class="setting-row" style="margin-top: 10px;">
273
- <p class="hint">Edit "If This Then Mint" rules (e.g. "If I open Zoom, check mic") directly via the JSON configuration file.</p>
274
- </div>
275
- <div class="setting-row" style="margin-top: 10px; display: flex; gap: 10px;">
276
- <button class="btn-secondary" id="open-workflows-btn">Open workflows.json</button>
277
- <button class="btn-primary" id="reload-workflows-btn">Reload Rules</button>
278
- </div>
279
- </section>
280
- <!-- Agent Collaboration -->
281
- <section class="setting-section">
282
- <h2 class="section-title">🤝 Agent Collaboration</h2>
283
- <div class="setting-row" style="display: flex; align-items: center; justify-content: space-between;">
284
- <label for="enable-agent-collaboration" style="margin-bottom: 0;">Enable Multi-Agent Review</label>
285
- <label class="toggle-switch">
286
- <input type="checkbox" id="enable-agent-collaboration">
287
- <span class="toggle-slider"></span>
288
- </label>
289
- </div>
290
- <div class="setting-row" style="margin-top: 10px;">
291
- <p class="hint">When in Code Mode, allow a secondary AI model to automatically review the code written by the primary model. (Requires multiple API keys. Costs API credits for both models.)</p>
292
- </div>
293
- </section>
294
- </div>
295
- <div class="tab-pane" id="sect-theme">
296
- <!-- Theme -->
297
- <section class="setting-section">
298
- <h2 class="section-title">🎨 Theme</h2>
299
- <div class="theme-grid">
300
- <button class="theme-card" data-theme="dark" id="theme-dark">
301
- <div class="theme-preview dark-preview"></div>
302
- <span>Dark</span>
303
- </button>
304
- <button class="theme-card" data-theme="light" id="theme-light">
305
- <div class="theme-preview light-preview"></div>
306
- <span>Light</span>
307
- </button>
308
- <button class="theme-card" data-theme="midnight" id="theme-midnight">
309
- <div class="theme-preview midnight-preview"></div>
310
- <span>Midnight</span>
311
- </button>
312
- <button class="theme-card" data-theme="custom" id="theme-custom">
313
- <div class="theme-preview custom-preview" id="custom-theme-preview-box"></div>
314
- <span>Custom</span>
315
- </button>
411
+ <section class="setting-section">
412
+ <div class="section-heading">
413
+ <div>
414
+ <p class="section-kicker">Surface</p>
415
+ <h2 class="section-title">Interface Style</h2>
416
+ </div>
417
+ </div>
418
+ <div class="form-grid">
419
+ <div class="setting-row">
420
+ <label for="glass-blur-select">Glass Blur</label>
421
+ <select id="glass-blur-select">
422
+ <option value="blur(4px)">Low (4px)</option>
423
+ <option value="blur(16px)">Medium (16px) - Default</option>
424
+ <option value="blur(32px)">High (32px)</option>
425
+ <option value="none">Off (Solid)</option>
426
+ </select>
427
+ </div>
428
+ <div class="setting-row">
429
+ <label for="font-family-select">Font Family</label>
430
+ <select id="font-family-select">
431
+ <option value="'Outfit', sans-serif">Outfit (Default)</option>
432
+ <option value="'Mali', cursive">Mali (Cute Thai Font)</option>
433
+ <option value="'Prompt', sans-serif">Prompt (Modern Thai)</option>
434
+ <option value="'Sarabun', sans-serif">Sarabun (Formal Thai)</option>
435
+ </select>
436
+ </div>
437
+ </div>
438
+ </section>
316
439
  </div>
317
440
 
318
- <div id="custom-theme-controls" style="display: none; margin-top: 16px; padding: 16px; background: rgba(0,0,0,0.2); border-radius: 12px; border: 1px dashed var(--border);">
319
- <div class="setting-row" style="margin-bottom: 12px;">
320
- <label>Background Gradient</label>
321
- <div style="display: flex; gap: 10px; align-items: center;">
322
- <input type="color" id="custom-bg-start" title="Start Color">
323
- <span style="font-size: 1.2rem;">→</span>
324
- <input type="color" id="custom-bg-end" title="End Color">
325
- </div>
326
- </div>
327
- <div class="setting-row">
328
- <label for="custom-panel-bg">Panel Background</label>
329
- <input type="color" id="custom-panel-bg">
330
- </div>
331
- </div>
332
- </section>
333
- <!-- Accent Color -->
334
- <section class="setting-section">
335
- <h2 class="section-title">🖌️ Accent Color</h2>
336
- <div class="setting-row accent-row">
337
- <div class="color-presets">
338
- <button class="color-dot" data-color="#8b5cf6" style="background:#8b5cf6"
339
- title="Purple"></button>
340
- <button class="color-dot" data-color="#06b6d4" style="background:#06b6d4" title="Cyan"></button>
341
- <button class="color-dot" data-color="#10b981" style="background:#10b981"
342
- title="Green"></button>
343
- <button class="color-dot" data-color="#f59e0b" style="background:#f59e0b"
344
- title="Amber"></button>
345
- <button class="color-dot" data-color="#ef4444" style="background:#ef4444" title="Red"></button>
346
- <button class="color-dot" data-color="#ec4899" style="background:#ec4899" title="Pink"></button>
347
- </div>
348
- <div class="custom-color">
349
- <label for="custom-color">Custom:</label>
350
- <input type="color" id="custom-color" value="#8b5cf6">
351
- </div>
352
- </div>
353
- </section>
354
- <!-- UI Customizations (Glassmorphism & Font) -->
355
- <div class="setting-row" style="margin-bottom: 12px;">
356
- <label for="glass-blur-select">Glassmorphism (Blur)</label>
357
- <div class="input-group">
358
- <select id="glass-blur-select" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; cursor: pointer;">
359
- <option value="blur(4px)" style="background: var(--bg-color)">Low (4px)</option>
360
- <option value="blur(16px)" style="background: var(--bg-color)">Medium (16px) - Default</option>
361
- <option value="blur(32px)" style="background: var(--bg-color)">High (32px)</option>
362
- <option value="none" style="background: var(--bg-color)">Off (Solid)</option>
363
- </select>
364
- </div>
365
- </div>
366
- <div class="setting-row">
367
- <label for="font-family-select">Font Family</label>
368
- <div class="input-group">
369
- <select id="font-family-select" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; cursor: pointer;">
370
- <option value="'Outfit', sans-serif" style="background: var(--bg-color)">Outfit (Default)</option>
371
- <option value="'Mali', cursive" style="background: var(--bg-color)">Mali (Cute Thai Font)</option>
372
- <option value="'Prompt', sans-serif" style="background: var(--bg-color)">Prompt (Modern Thai)</option>
373
- <option value="'Sarabun', sans-serif" style="background: var(--bg-color)">Sarabun (Formal Thai)</option>
374
- </select>
375
- </div>
376
- <p class="hint" style="margin-top: 8px;">Mint supports beautiful Google Fonts!</p>
377
- </div>
378
- </section>
379
- <!-- System Text Color -->
380
- <section class="setting-section">
381
- <h2 class="section-title">✍️ System Text Color</h2>
382
- <div class="setting-row">
383
- <div class="custom-color" style="justify-content: flex-start; gap: 12px;">
384
- <label for="system-text-color">Choose Color:</label>
385
- <input type="color" id="system-text-color" value="#f8fafc">
386
- </div>
387
- <p class="hint" style="margin-top: 8px;">Adjust system text color (menu, headers) excluding chat messages.</p>
388
- </div>
389
- </section>
390
- </div>
391
441
  <div class="tab-pane" id="sect-plugins">
392
- <!-- Plugins & Integrations -->
393
- <section class="setting-section">
394
- <h2 class="section-title">🧩 Plugins & Integrations</h2>
395
- <div class="plugin-list">
396
- <!-- Spotify -->
397
- <div class="plugin-card">
398
- <div class="plugin-icon">🎵</div>
399
- <div class="plugin-info">
400
- <div class="plugin-name">Spotify</div>
401
- <div class="plugin-desc">Control playback with AI (req: playerctl)</div>
402
- </div>
403
- <div class="plugin-actions">
404
- <button class="btn-connect" id="btn-plugin-spotify" data-plugin="spotify">Connect</button>
405
- </div>
406
- </div>
407
-
408
- <!-- Google Calendar -->
409
- <div class="plugin-card">
410
- <div class="plugin-icon">📅</div>
411
- <div class="plugin-info">
412
- <div class="plugin-name">Google Calendar</div>
413
- <div class="plugin-desc">Read and schedule your events via Gemini</div>
414
- </div>
415
- <div class="plugin-actions">
416
- <button class="btn-connect" id="btn-plugin-calendar" data-plugin="calendar">Connect</button>
417
- </div>
418
- </div>
419
-
420
- <!-- Gmail -->
421
- <div class="plugin-card">
422
- <div class="plugin-icon">✉️</div>
423
- <div class="plugin-info">
424
- <div class="plugin-name">Gmail</div>
425
- <div class="plugin-desc">Read email and create drafts safely</div>
426
- </div>
427
- <div class="plugin-actions">
428
- <button class="btn-connect" id="btn-plugin-gmail" data-plugin="gmail">Connect</button>
429
- </div>
430
- </div>
431
-
432
- <!-- Notion -->
433
- <div class="plugin-card">
434
- <div class="plugin-icon">📝</div>
435
- <div class="plugin-info">
436
- <div class="plugin-name">Notion</div>
437
- <div class="plugin-desc">Create notes, pages, and read databases</div>
438
- </div>
439
- <div class="plugin-actions">
440
- <button class="btn-connect" id="btn-plugin-notion" data-plugin="notion">Connect</button>
441
- </div>
442
- </div>
443
-
444
- <!-- Discord -->
445
- <div class="plugin-card">
446
- <div class="plugin-icon">💬</div>
447
- <div class="plugin-info">
448
- <div class="plugin-name">Discord RPC</div>
449
- <div class="plugin-desc">Show "Using Mint Assistant" on your Discord status</div>
450
- </div>
451
- <div class="plugin-actions">
452
- <button class="btn-connect" id="btn-plugin-discord" data-plugin="discord">Connect</button>
453
- </div>
454
- </div>
455
- </div>
456
- </section>
457
-
458
- <!-- MCP Servers Management -->
459
- <section class="setting-section" style="margin-top: 30px;">
460
- <h2 class="section-title">🌐 MCP Servers (Model Context Protocol)</h2>
461
- <p class="hint" style="margin-bottom: 16px;">Connect Mint to external tools like Google Search, GitHub, or Filesystem.</p>
462
-
463
- <div class="mcp-list" id="mcp-server-list" style="display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px;">
464
- <!-- MCP items will be injected here -->
465
- </div>
442
+ <section class="setting-section">
443
+ <div class="section-heading">
444
+ <div>
445
+ <p class="section-kicker">Integrations</p>
446
+ <h2 class="section-title">Built-in Plugins</h2>
447
+ </div>
448
+ </div>
449
+ <div class="plugin-list">
450
+ <div class="plugin-card">
451
+ <div class="plugin-icon">🎵</div>
452
+ <div class="plugin-info">
453
+ <div class="plugin-name">Spotify</div>
454
+ <div class="plugin-desc">Control playback with AI. Requires playerctl.</div>
455
+ </div>
456
+ <div class="plugin-actions">
457
+ <button class="btn-connect" id="btn-plugin-spotify" data-plugin="spotify">Connect</button>
458
+ </div>
459
+ </div>
460
+ <div class="plugin-card">
461
+ <div class="plugin-icon">📅</div>
462
+ <div class="plugin-info">
463
+ <div class="plugin-name">Google Calendar</div>
464
+ <div class="plugin-desc">Read and schedule events.</div>
465
+ </div>
466
+ <div class="plugin-actions">
467
+ <button class="btn-connect" id="btn-plugin-calendar" data-plugin="calendar">Connect</button>
468
+ </div>
469
+ </div>
470
+ <div class="plugin-card">
471
+ <div class="plugin-icon">✉</div>
472
+ <div class="plugin-info">
473
+ <div class="plugin-name">Gmail</div>
474
+ <div class="plugin-desc">Read email and create drafts safely.</div>
475
+ </div>
476
+ <div class="plugin-actions">
477
+ <button class="btn-connect" id="btn-plugin-gmail" data-plugin="gmail">Connect</button>
478
+ </div>
479
+ </div>
480
+ <div class="plugin-card">
481
+ <div class="plugin-icon">📝</div>
482
+ <div class="plugin-info">
483
+ <div class="plugin-name">Notion</div>
484
+ <div class="plugin-desc">Create notes, pages, and read databases.</div>
485
+ </div>
486
+ <div class="plugin-actions">
487
+ <button class="btn-connect" id="btn-plugin-notion" data-plugin="notion">Connect</button>
488
+ </div>
489
+ </div>
490
+ <div class="plugin-card">
491
+ <div class="plugin-icon">💬</div>
492
+ <div class="plugin-info">
493
+ <div class="plugin-name">Discord RPC</div>
494
+ <div class="plugin-desc">Show "Using Mint Assistant" on Discord status.</div>
495
+ </div>
496
+ <div class="plugin-actions">
497
+ <button class="btn-connect" id="btn-plugin-discord" data-plugin="discord">Connect</button>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </section>
466
502
 
467
- <div class="add-mcp-box" style="padding: 16px; background: rgba(255,255,255,0.05); border-radius: 12px; border: 1px dashed var(--border);">
468
- <h3 style="font-size: 1rem; margin-bottom: 12px; color: var(--accent);">+ Add New MCP Server</h3>
469
- <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;">
470
- <input type="text" id="mcp-new-name" placeholder="Server Name (e.g. google-search)">
471
- <input type="text" id="mcp-new-command" placeholder="Command (e.g. npx)">
472
- </div>
473
- <input type="text" id="mcp-new-args" placeholder="Arguments (e.g. -y @modelcontextprotocol/server-brave-search)" style="width: 100%; margin-bottom: 10px;">
474
- <textarea id="mcp-new-env" placeholder='Env (JSON format, e.g. {"BRAVE_API_KEY": "..."})' style="width: 100%; min-height: 60px; background: var(--input-bg); color: var(--text-main); border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-family: monospace; font-size: 0.8rem;"></textarea>
475
-
476
- <button class="btn-primary" id="btn-add-mcp" style="margin-top: 10px; width: 100%;">Add MCP Server</button>
477
- </div>
478
-
479
- <p class="hint" style="margin-top: 12px;">Browse more servers at <a href="https://github.com/modelcontextprotocol/servers" target="_blank">MCP Servers Registry</a></p>
480
- </section>
503
+ <section class="setting-section">
504
+ <div class="section-heading">
505
+ <div>
506
+ <p class="section-kicker">External tools</p>
507
+ <h2 class="section-title">MCP Servers</h2>
508
+ </div>
509
+ <p class="section-description">Connect Mint to tools like search, GitHub, or filesystem servers.</p>
510
+ </div>
511
+
512
+ <div class="mcp-list" id="mcp-server-list"></div>
513
+
514
+ <div class="add-mcp-box">
515
+ <h3>Add MCP Server</h3>
516
+ <div class="form-grid">
517
+ <input type="text" id="mcp-new-name" placeholder="Server Name (e.g. google-search)">
518
+ <input type="text" id="mcp-new-command" placeholder="Command (e.g. npx)">
519
+ </div>
520
+ <input type="text" id="mcp-new-args" placeholder="Arguments (e.g. -y @modelcontextprotocol/server-brave-search)">
521
+ <textarea id="mcp-new-env" placeholder='Env JSON, e.g. {"BRAVE_API_KEY": "..."}'></textarea>
522
+ <button class="btn-primary full-width" id="btn-add-mcp">Add MCP Server</button>
523
+ </div>
524
+
525
+ <p class="hint">Browse more servers at <a href="https://github.com/modelcontextprotocol/servers" target="_blank">MCP Servers Registry</a></p>
526
+ </section>
481
527
  </div>
528
+
482
529
  <div class="tab-pane" id="sect-shortcuts">
483
- <!-- Keyboard Shortcuts -->
484
- <section class="setting-section">
485
- <h2 class="section-title">⌨️ Keyboard Shortcuts</h2>
486
- <div class="shortcut-list">
487
- <div class="shortcut-item">
488
- <span>Show/Hide Mint Window</span>
489
- <div class="keys">
490
- <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Space</kbd>
491
- </div>
492
- </div>
493
- <div class="shortcut-item">
494
- <span>Open Spotlight</span>
495
- <div class="keys">
496
- <kbd>Alt</kbd>+<kbd>Space</kbd>
497
- </div>
498
- </div>
499
- <div class="shortcut-item">
500
- <span>Close / Dismiss</span>
501
- <div class="keys">
502
- <kbd>Esc</kbd>
503
- </div>
504
- </div>
505
- </div>
506
- </section>
530
+ <section class="setting-section">
531
+ <div class="section-heading">
532
+ <div>
533
+ <p class="section-kicker">Keyboard</p>
534
+ <h2 class="section-title">Shortcuts</h2>
535
+ </div>
536
+ </div>
537
+ <div class="shortcut-list">
538
+ <div class="shortcut-item">
539
+ <span>Show / Hide Mint Window</span>
540
+ <div class="keys"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>Space</kbd></div>
541
+ </div>
542
+ <div class="shortcut-item">
543
+ <span>Open Spotlight</span>
544
+ <div class="keys"><kbd>Alt</kbd><kbd>Space</kbd></div>
545
+ </div>
546
+ <div class="shortcut-item">
547
+ <span>Close / Dismiss</span>
548
+ <div class="keys"><kbd>Esc</kbd></div>
549
+ </div>
550
+ </div>
551
+ </section>
507
552
  </div>
508
- </div> <!-- end settings-content -->
509
-
553
+ </div>
510
554
  </main>
511
555
 
512
556
  <footer class="settings-footer">
513
- <button class="btn-danger" id="quit-btn" style="margin-right: auto;">Quit Application</button>
514
- <button class="btn-secondary" id="reset-btn">Reset to Default</button>
515
- <button class="btn-primary" id="save-btn">Save Settings</button>
557
+ <button class="btn-danger" id="quit-btn">Quit Application</button>
558
+ <div class="footer-actions">
559
+ <button class="btn-secondary" id="reset-btn">Reset to Default</button>
560
+ <button class="btn-primary" id="save-btn">Save Settings</button>
561
+ </div>
516
562
  </footer>
517
563
  </div>
518
564