amicus 1.4.0 → 1.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/.claude-plugin/plugin.json +1 -1
  2. package/CHANGELOG.md +39 -0
  3. package/bin/amicus.js +11 -0
  4. package/electron/fold.js +17 -7
  5. package/electron/setup-ui-aliases.js +3 -3
  6. package/electron/setup-ui-styles.js +203 -143
  7. package/electron/setup-ui.js +2 -2
  8. package/electron/toolbar.js +29 -25
  9. package/package.json +1 -1
  10. package/skills/second-opinion/SKILL.md +1 -1
  11. package/src/cli-handlers-council.js +11 -4
  12. package/src/cli.js +1 -0
  13. package/src/council/report-html.js +39 -9
  14. package/src/design/fonts/IBMPlexMono-400.ttf +0 -0
  15. package/src/design/fonts/IBMPlexMono-500.ttf +0 -0
  16. package/src/design/fonts/IBMPlexMono-600.ttf +0 -0
  17. package/src/design/fonts/Outfit-300.ttf +0 -0
  18. package/src/design/fonts/Outfit-400.ttf +0 -0
  19. package/src/design/fonts/Outfit-500.ttf +0 -0
  20. package/src/design/fonts/Outfit-600.ttf +0 -0
  21. package/src/design/fonts/Outfit-700.ttf +0 -0
  22. package/src/design/fonts/Outfit-800.ttf +0 -0
  23. package/src/design/tokens.css +134 -0
  24. package/src/design/tokens.js +51 -0
  25. package/src/mcp-server.js +5 -1
  26. package/src/sidecar/conversation-mirror.js +27 -0
  27. package/src/utils/config.js +29 -0
package/electron/setup-ui-styles.js CHANGED
@@ -1,10 +1,13 @@
1
- /** Setup UI - Shared CSS Styles */
2
- function buildWizardCSS() {
1
+ /** Setup UI - Shared CSS Styles (clay/gold token-driven) */
2
+ const { tokenCss } = require('../src/design/tokens');
3
+
4
+ /** The wizard's own rules, token-var-driven. No :root here — tokenCss() supplies it. */
5
+ function __rawWizardCSS() {
3
6
  return `
4
7
  * { margin: 0; padding: 0; box-sizing: border-box; }
5
8
  body {
6
- background: #2D2B2A; color: #E8E0D8;
7
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
9
+ background: var(--bg); color: var(--text);
10
+ font-family: var(--font-sans);
8
11
  display: flex; flex-direction: column; height: 100vh; user-select: none;
9
12
  overflow: hidden;
10
13
  }
@@ -12,38 +15,39 @@ function buildWizardCSS() {
12
15
  /* Header */
13
16
  .header {
14
17
  display: flex; align-items: center; gap: 10px;
15
- padding: 10px 20px; border-bottom: 1px solid #3D3A38;
18
+ padding: 10px 20px; border-bottom: 1px solid var(--border);
16
19
  }
17
20
  .header svg { flex-shrink: 0; }
21
+ .header svg path { stroke: var(--accent); }
18
22
  .header-title {
19
- color: #D97757; font-size: 12px; font-weight: 600;
23
+ color: var(--accent); font-size: 12px; font-weight: 600;
20
24
  letter-spacing: 0.8px; text-transform: uppercase;
21
25
  }
22
26
 
23
- /* Progress bar */
27
+ /* Progress bar / stepper */
24
28
  .progress-bar {
25
29
  display: flex; align-items: center; justify-content: center;
26
- gap: 14px; padding: 10px 20px; border-bottom: 1px solid #3D3A38;
30
+ gap: 14px; padding: 10px 20px; border-bottom: 1px solid var(--border);
27
31
  }
28
32
  .progress-step {
29
33
  display: flex; align-items: center; gap: 5px;
30
- font-size: 11px; color: #7A756F;
34
+ font-size: 11px; color: var(--text-faint);
31
35
  }
32
- .progress-step.active { color: #D97757; }
33
- .progress-step.done { color: #6BBF6B; }
36
+ .progress-step.active { color: var(--accent); }
37
+ .progress-step.done { color: var(--ok); }
34
38
  .progress-dot {
35
39
  width: 18px; height: 18px; border-radius: 50%;
36
- border: 2px solid #5A5550; display: flex;
40
+ border: 2px solid var(--border-strong); display: flex;
37
41
  align-items: center; justify-content: center;
38
42
  font-size: 9px; font-weight: 600;
39
43
  }
40
44
  .progress-step.active .progress-dot {
41
- border-color: #D97757; background: #D97757; color: #fff;
45
+ border-color: var(--accent); background: var(--accent); color: var(--accent-text);
42
46
  }
43
47
  .progress-step.done .progress-dot {
44
- border-color: #6BBF6B; background: #6BBF6B; color: #fff;
48
+ border-color: var(--ok); background: var(--ok); color: var(--accent-text);
45
49
  }
46
- .progress-connector { width: 24px; height: 2px; background: #3D3A38; }
50
+ .progress-connector { width: 24px; height: 2px; background: var(--border); }
47
51
 
48
52
  /* Content area */
49
53
  .content { flex: 1; padding: 16px 20px; overflow-y: auto; }
@@ -51,26 +55,36 @@ function buildWizardCSS() {
51
55
  .wizard-step.visible { display: block; }
52
56
 
53
57
  /* Shared typography */
54
- h1 { font-size: 18px; font-weight: 600; margin-bottom: 4px; color: #E8E0D8; }
55
- .subtitle { color: #A09B96; font-size: 13px; margin-bottom: 14px; }
58
+ h1 { font-size: 18px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
59
+ .subtitle { color: var(--text-muted); font-size: 13px; margin-bottom: 14px; }
56
60
 
57
61
  /* Provider picker (Step 1) */
58
62
  .provider-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
59
63
  .provider-btn {
60
64
  display: flex; flex-direction: column; gap: 1px; position: relative;
61
- padding: 8px 12px; background: #1E1C1B; border: 1px solid #3D3A38;
62
- border-radius: 6px; cursor: pointer; text-align: left; transition: all 0.15s;
65
+ padding: 8px 12px; background: var(--surface); border: 1px solid var(--border);
66
+ border-radius: var(--r-6); cursor: pointer; text-align: left;
67
+ transition: border-color var(--dur-fast), background var(--dur-fast);
63
68
  }
64
- .provider-btn:hover { border-color: #5A5550; } .provider-btn.selected { border-color: #D97757; background: #352E2B; }
69
+ .provider-btn:hover { border-color: var(--border-strong); }
70
+ .provider-btn.selected { border-color: var(--accent); background: var(--surface-sel); }
65
71
  .provider-name {
66
- color: #E8E0D8; font-size: 13px; font-weight: 500;
72
+ color: var(--text); font-size: 13px; font-weight: 500;
67
73
  display: flex; align-items: center; gap: 6px;
68
74
  }
69
- .provider-desc { color: #7A756F; font-size: 11px; }
70
- .provider-check { position: absolute; top: 8px; right: 12px; font-size: 13px; color: #6BBF6B; }
75
+ .provider-desc { color: var(--text-faint); font-size: 11px; }
76
+ .provider-check {
77
+ position: absolute; top: 9px; right: 12px;
78
+ min-width: 16px; height: 16px; padding: 0 2px;
79
+ display: inline-flex; align-items: center; justify-content: center;
80
+ border-radius: 50%; font-size: 10px; line-height: 1;
81
+ color: var(--accent-text); background: transparent;
82
+ }
83
+ .provider-btn.selected .provider-check,
84
+ .provider-check:not(:empty) { background: var(--ok); }
71
85
  .badge {
72
- font-size: 9px; background: #D97757; color: #fff; padding: 1px 5px;
73
- border-radius: 3px; font-weight: 500; text-transform: uppercase;
86
+ font-size: 9px; background: var(--accent); color: var(--accent-text); padding: 1px 5px;
87
+ border-radius: var(--r-3); font-weight: 500; text-transform: uppercase;
74
88
  letter-spacing: 0.3px;
75
89
  }
76
90
 
@@ -78,255 +92,301 @@ function buildWizardCSS() {
78
92
  .key-section { display: none; }
79
93
  .key-section.visible { display: block; }
80
94
  .field-label {
81
- display: block; color: #A09B96; font-size: 11px; font-weight: 500;
95
+ display: block; color: var(--text-muted); font-size: 11px; font-weight: 500;
82
96
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
83
97
  }
84
98
  .input-row { display: flex; gap: 6px; margin-bottom: 6px; }
85
99
  .input-row input {
86
- flex: 1; padding: 7px 10px; background: #1E1C1B; border: 1px solid #3D3A38;
87
- border-radius: 6px; color: #E8E0D8; font-size: 13px;
88
- font-family: 'SF Mono', Menlo, Monaco, monospace; outline: none;
89
- transition: border-color 0.15s;
100
+ flex: 1; padding: 7px 10px; background: var(--surface); border: 1px solid var(--border);
101
+ border-radius: var(--r-6); color: var(--text); font-size: 13px;
102
+ font-family: var(--font-mono); outline: none;
103
+ transition: border-color var(--dur-fast);
90
104
  }
91
- .input-row input:focus { border-color: #D97757; }
92
- .input-row input::placeholder { color: #5A5550; }
105
+ .input-row input:focus { border-color: var(--accent); }
106
+ .input-row input::placeholder { color: var(--text-faint); }
93
107
  .input-wrap {
94
108
  flex: 1; position: relative; display: flex; align-items: center;
95
109
  }
96
110
  .input-wrap input { width: 100%; padding-right: 34px; }
97
111
  .eye-btn {
98
112
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
99
- background: none; border: none; cursor: pointer; color: #5A5550;
100
- padding: 2px; display: flex; align-items: center; transition: color 0.15s;
113
+ background: none; border: none; cursor: pointer; color: var(--text-faint);
114
+ padding: 2px; display: flex; align-items: center; transition: color var(--dur-fast);
101
115
  }
102
- .eye-btn:hover { color: #A09B96; }
103
- .eye-btn.active { color: #D97757; }
116
+ .eye-btn:hover { color: var(--text-muted); }
117
+ .eye-btn.active { color: var(--accent); }
104
118
  .key-actions {
105
119
  display: flex; align-items: center; justify-content: space-between;
106
120
  min-height: 18px; margin-bottom: 8px;
107
121
  }
108
122
  .remove-btn {
109
- background: none; border: none; color: #E05252; font-size: 11px;
110
- cursor: pointer; padding: 0; opacity: 0.8; transition: opacity 0.15s;
123
+ background: none; border: none; color: var(--danger); font-size: 11px;
124
+ cursor: pointer; padding: 0; opacity: 0.8; transition: opacity var(--dur-fast);
111
125
  }
112
126
  .remove-btn:hover { opacity: 1; text-decoration: underline; }
113
127
  .test-btn {
114
- padding: 7px 12px; background: transparent; border: 1px solid #3D3A38;
115
- border-radius: 6px; color: #A09B96; font-size: 12px; cursor: pointer;
116
- white-space: nowrap; transition: all 0.15s;
128
+ padding: 7px 12px; background: transparent; border: 1px solid var(--border);
129
+ border-radius: var(--r-6); color: var(--text-muted); font-size: 12px; cursor: pointer;
130
+ white-space: nowrap; transition: border-color var(--dur-fast), color var(--dur-fast);
117
131
  }
118
- .test-btn:hover { border-color: #D97757; color: #D97757; }
132
+ .test-btn:hover { border-color: var(--accent); color: var(--accent); }
119
133
  .test-btn:disabled { opacity: 0.5; cursor: default; }
120
134
  .input-row input.input-valid {
121
- border-color: #6BBF6B; background: #1E2B1E;
135
+ border-color: var(--ok); background: var(--accent-soft);
122
136
  }
123
137
  .input-row input.input-invalid {
124
- border-color: #E05252; background: #2B1E1E;
138
+ border-color: var(--danger); background: var(--accent-soft);
125
139
  }
126
140
  .input-row input.input-testing {
127
- border-color: #D97757;
141
+ border-color: var(--accent);
128
142
  }
129
143
  #status-msg { font-size: 12px; min-height: 16px; margin-bottom: 8px; }
130
- .status-valid { color: #6BBF6B; }
131
- .status-invalid { color: #E05252; }
132
- .status-testing { color: #A09B96; }
133
- .help-link { color: #7A756F; font-size: 12px; }
134
- .help-link a { color: #D97757; text-decoration: none; }
144
+ .status-valid { color: var(--ok); }
145
+ .status-invalid { color: var(--danger); }
146
+ .status-testing { color: var(--text-muted); }
147
+ .help-link { color: var(--text-faint); font-size: 12px; }
148
+ .help-link a { color: var(--accent); text-decoration: none; }
135
149
  .help-link a:hover { text-decoration: underline; }
136
150
 
137
151
  /* Model cards (Step 2) */
138
152
  .model-list { display: flex; flex-direction: column; gap: 4px; }
139
153
  .model-card {
140
154
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
141
- padding: 9px 12px; background: #1E1C1B; border: 1px solid #3D3A38;
142
- border-radius: 6px; cursor: pointer; transition: all 0.15s;
155
+ padding: 9px 12px; background: var(--surface); border: 1px solid var(--border);
156
+ border-radius: var(--r-6); cursor: pointer;
157
+ transition: border-color var(--dur-fast), background var(--dur-fast);
143
158
  }
144
- .model-card:hover { border-color: #5A5550; }
145
- .model-card:has(input:checked) { border-color: #D97757; background: #352E2B; }
159
+ .model-card:hover { border-color: var(--border-strong); }
160
+ .model-card:has(input:checked) { border-color: var(--accent); background: var(--surface-sel); }
146
161
  .model-card.model-unavailable {
147
- opacity: 0.45; cursor: not-allowed; border-color: #2A2826;
162
+ opacity: 0.45; cursor: not-allowed; border-color: var(--border);
148
163
  }
149
- .model-card.model-unavailable:hover { border-color: #2A2826; }
150
- .model-card input[type="radio"] { accent-color: #D97757; }
151
- .model-alias { color: #E8E0D8; font-weight: 500; font-size: 13px; min-width: 80px; }
152
- .model-label { color: #A09B96; font-size: 12px; }
164
+ .model-card.model-unavailable:hover { border-color: var(--border); }
165
+ .model-card input[type="radio"] { accent-color: var(--accent); }
166
+ .model-alias { color: var(--text); font-weight: 500; font-size: 13px; min-width: 80px; font-family: var(--font-mono); }
167
+ .model-label { color: var(--text-muted); font-size: 12px; }
153
168
  .no-key-hint {
154
- margin-left: auto; font-size: 10px; color: #7A756F; font-style: italic;
169
+ margin-left: auto; font-size: 10px; color: var(--text-faint); font-style: italic;
155
170
  }
156
171
 
157
- /* Route toggle (Step 2) */
172
+ /* Route toggle / RoutePill (Step 2) */
158
173
  .route-toggle {
159
174
  display: flex; gap: 0; margin-left: auto;
160
175
  }
161
176
  .route-pill {
162
177
  padding: 3px 8px; font-size: 10px; font-weight: 500;
163
- background: #1E1C1B; border: 1px solid #3D3A38;
164
- color: #7A756F; cursor: pointer; transition: all 0.15s;
165
- }
166
- .route-pill:first-child { border-radius: 4px 0 0 4px; }
167
- .route-pill:last-child { border-radius: 0 4px 4px 0; border-left: none; }
168
- .route-pill:only-child { border-radius: 4px; }
178
+ font-family: var(--font-sans);
179
+ background: var(--surface); border: 1px solid var(--border);
180
+ color: var(--text-faint); cursor: pointer;
181
+ transition: background var(--dur-fast), color var(--dur-fast);
182
+ }
183
+ .route-pill:first-child { border-radius: var(--r-4) 0 0 var(--r-4); }
184
+ .route-pill:last-child { border-radius: 0 var(--r-4) var(--r-4) 0; border-left: none; }
185
+ .route-pill:only-child { border-radius: var(--r-4); }
169
186
  .route-pill.active {
170
- background: #D97757; color: #fff; border-color: #D97757;
187
+ background: var(--accent); color: var(--accent-text); border-color: var(--accent);
171
188
  }
172
- .route-pill:hover:not(.active) { border-color: #5A5550; color: #A09B96; }
189
+ .route-pill:hover:not(.active) { border-color: var(--border-strong); color: var(--text-muted); }
173
190
  .route-static {
174
- margin-left: auto; font-size: 11px; color: #5A5550; font-style: italic;
191
+ margin-left: auto; font-size: 11px; color: var(--text-faint); font-style: italic;
175
192
  }
176
193
 
177
194
  /* Routing example */
178
195
  .routing-example {
179
- background: #1E1C1B; border: 1px solid #3D3A38; border-radius: 8px;
196
+ background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-8);
180
197
  padding: 12px 16px; margin-bottom: 12px;
181
198
  }
182
199
  .example-label {
183
- font-size: 10px; color: #5A5550; text-transform: uppercase;
200
+ font-size: 10px; color: var(--text-faint); text-transform: uppercase;
184
201
  letter-spacing: 0.5px; margin-bottom: 10px; font-weight: 600;
185
202
  }
186
203
  .example-flow { display: flex; flex-direction: column; align-items: center; gap: 4px; }
187
204
  .example-step {
188
205
  display: flex; align-items: center; gap: 6px; width: 100%;
189
- background: #2D2B2A; border: 1px solid #3D3A38;
190
- border-radius: 6px; padding: 6px 10px;
206
+ background: var(--surface-hover); border: 1px solid var(--border);
207
+ border-radius: var(--r-6); padding: 6px 10px;
191
208
  }
192
209
  .example-step svg { flex-shrink: 0; }
193
210
  .example-connector { display: flex; align-items: center; transform: rotate(90deg); }
194
211
  .example-cmd {
195
- font-family: 'SF Mono', Menlo, Monaco, monospace; font-size: 12px;
196
- color: #A09B96; overflow: hidden; text-overflow: ellipsis;
212
+ font-family: var(--font-mono); font-size: 12px;
213
+ color: var(--text-muted); overflow: hidden; text-overflow: ellipsis;
197
214
  }
198
- .example-cmd strong { color: #D97757; }
215
+ .example-cmd strong { color: var(--accent); }
199
216
  .example-model {
200
- font-family: 'SF Mono', Menlo, Monaco, monospace; font-size: 11px;
201
- color: #6BBF6B; overflow: hidden; text-overflow: ellipsis;
217
+ font-family: var(--font-mono); font-size: 11px;
218
+ color: var(--ok); overflow: hidden; text-overflow: ellipsis;
202
219
  }
203
220
 
204
221
  /* Alias editor (Step 3) */
205
222
  .alias-editor { margin-top: 16px; }
206
223
  .alias-divider {
207
- text-align: center; color: #5A5550; font-size: 11px;
224
+ text-align: center; color: var(--text-faint); font-size: 11px;
208
225
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px;
209
- border-top: 1px solid #3D3A38; padding-top: 12px;
226
+ border-top: 1px solid var(--border); padding-top: 12px;
210
227
  }
211
228
  .alias-search {
212
- width: 100%; padding: 7px 10px; background: #1E1C1B;
213
- border: 1px solid #3D3A38; border-radius: 6px; color: #E8E0D8;
214
- font-size: 12px; font-family: 'SF Mono', Menlo, Monaco, monospace;
215
- outline: none; margin-bottom: 8px; transition: border-color 0.15s;
229
+ width: 100%; padding: 7px 10px; background: var(--surface);
230
+ border: 1px solid var(--border); border-radius: var(--r-6); color: var(--text);
231
+ font-size: 12px; font-family: var(--font-mono);
232
+ outline: none; margin-bottom: 8px; transition: border-color var(--dur-fast);
216
233
  }
217
- .alias-search:focus { border-color: #D97757; }
218
- .alias-search::placeholder { color: #5A5550; }
234
+ .alias-search:focus { border-color: var(--accent); }
235
+ .alias-search::placeholder { color: var(--text-faint); }
219
236
  .alias-group { margin-bottom: 2px; }
220
237
  .alias-group summary {
221
238
  display: flex; align-items: center; gap: 6px; padding: 5px 8px;
222
- cursor: pointer; font-size: 12px; font-weight: 500; color: #A09B96;
223
- border-radius: 4px; transition: color 0.15s; list-style: none;
239
+ cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text-muted);
240
+ border-radius: var(--r-4); transition: color var(--dur-fast); list-style: none;
224
241
  }
225
- .alias-group summary::-webkit-details-marker { display: none; } .alias-group summary::before {
226
- content: '\\25B6'; font-size: 8px; color: #5A5550; transition: transform 0.15s;
242
+ .alias-group summary::-webkit-details-marker { display: none; }
243
+ .alias-group summary::before {
244
+ content: '\\25B6'; font-size: 8px; color: var(--text-faint); transition: transform var(--dur-fast);
227
245
  }
228
246
  .alias-group[open] summary::before { transform: rotate(90deg); }
229
- .alias-group summary:hover { color: #D97757; }
230
- .alias-group summary .alias-count { color: #5A5550; font-weight: 400; }
247
+ .alias-group summary:hover { color: var(--accent); }
248
+ .alias-group summary .alias-count { color: var(--text-faint); font-weight: 400; }
231
249
  .alias-row {
232
250
  display: flex; align-items: center; gap: 6px;
233
251
  padding: 3px 8px 3px 22px; font-size: 12px;
234
252
  }
235
253
  .alias-name {
236
- font-family: 'SF Mono', Menlo, Monaco, monospace;
237
- color: #E8E0D8; min-width: 90px; cursor: pointer;
254
+ font-family: var(--font-mono);
255
+ color: var(--text); min-width: 90px; cursor: pointer;
238
256
  }
239
- .alias-arrow { color: #5A5550; font-size: 11px; }
257
+ .alias-arrow { color: var(--text-faint); font-size: 11px; }
240
258
  .alias-model {
241
- flex: 1; font-family: 'SF Mono', Menlo, Monaco, monospace;
242
- color: #7A756F; font-size: 11px; overflow: hidden;
259
+ flex: 1; font-family: var(--font-mono);
260
+ color: var(--text-faint); font-size: 11px; overflow: hidden;
243
261
  text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
244
262
  }
245
263
  .alias-delete {
246
- background: none; border: none; color: #5A5550; cursor: pointer;
247
- font-size: 14px; padding: 0 4px; transition: color 0.15s;
264
+ background: none; border: none; color: var(--text-faint); cursor: pointer;
265
+ font-size: 14px; padding: 0 4px; transition: color var(--dur-fast);
248
266
  }
249
- .alias-delete:hover { color: #E05252; }
267
+ .alias-delete:hover { color: var(--danger); }
250
268
  .alias-name-input, .alias-model-input {
251
- padding: 2px 6px; background: #1E1C1B; border: 1px solid #D97757;
252
- border-radius: 3px; color: #E8E0D8; font-size: 12px;
253
- font-family: 'SF Mono', Menlo, Monaco, monospace; outline: none;
269
+ padding: 2px 6px; background: var(--surface); border: 1px solid var(--accent);
270
+ border-radius: var(--r-3); color: var(--text); font-size: 12px;
271
+ font-family: var(--font-mono); outline: none;
254
272
  }
255
- .alias-name-input { width: 90px; } .alias-model-input { flex: 1; }
273
+ .alias-name-input { width: 90px; }
274
+ .alias-model-input { flex: 1; }
256
275
  .alias-model-select {
257
- flex: 1; padding: 2px 4px; background: #1E1C1B;
258
- border: 1px solid #D97757; border-radius: 3px;
259
- color: #E8E0D8; font-size: 11px;
260
- font-family: 'SF Mono', Menlo, Monaco, monospace;
276
+ flex: 1; padding: 2px 4px; background: var(--surface);
277
+ border: 1px solid var(--accent); border-radius: var(--r-3);
278
+ color: var(--text); font-size: 11px;
279
+ font-family: var(--font-mono);
261
280
  outline: none; cursor: pointer; max-width: 340px;
262
281
  }
263
- .alias-model-select:focus { border-color: #D97757; }
264
- .alias-model-select option { background: #1E1C1B; color: #E8E0D8; } .alias-model-select optgroup { color: #A09B96; font-style: normal; }
282
+ .alias-model-select:focus { border-color: var(--accent); }
283
+ .alias-model-select option { background: var(--surface); color: var(--text); }
284
+ .alias-model-select optgroup { color: var(--text-muted); font-style: normal; }
265
285
  .alias-add-btn {
266
286
  display: block; width: 100%; padding: 6px; margin-top: 8px;
267
- background: transparent; border: 1px dashed #3D3A38;
268
- border-radius: 6px; color: #7A756F; font-size: 12px;
269
- cursor: pointer; transition: all 0.15s;
287
+ background: transparent; border: 1px dashed var(--border);
288
+ border-radius: var(--r-6); color: var(--text-faint); font-size: 12px;
289
+ cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast);
270
290
  }
271
- .alias-add-btn:hover { border-color: #D97757; color: #D97757; }
291
+ .alias-add-btn:hover { border-color: var(--accent); color: var(--accent); }
272
292
  .alias-row.alias-deleted { text-decoration: line-through; opacity: 0.4; pointer-events: none; }
273
293
  .alias-row.alias-no-key { opacity: 0.45; }
274
294
  .alias-row.alias-no-key .alias-model::after {
275
- content: ' (no key)'; color: #7A756F; font-style: italic; font-size: 10px;
295
+ content: ' (no key)'; color: var(--text-faint); font-style: italic; font-size: 10px;
276
296
  }
277
297
 
278
298
  /* Import notice banner */
279
299
  .import-notice {
280
- background: #3D3A38; border: 1px solid #D97757; border-radius: 6px;
300
+ background: var(--surface-hover); border: 1px solid var(--accent); border-radius: var(--r-6);
281
301
  padding: 8px 12px; margin-bottom: 12px; font-size: 11px;
282
- color: #D97757; display: flex; align-items: center; gap: 8px;
302
+ color: var(--accent); display: flex; align-items: center; gap: 8px;
283
303
  }
284
304
  .import-notice .dismiss { cursor: pointer; margin-left: auto; opacity: 0.6; }
285
305
  .import-notice .dismiss:hover { opacity: 1; }
286
306
 
287
307
  /* Review (Step 4) */
288
308
  .review-section { margin-bottom: 14px; }
289
- .review-label { color: #A09B96; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
290
- .review-value { color: #E8E0D8; font-size: 13px; line-height: 1.5; }
309
+ .review-label { color: var(--text-muted); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
310
+ .review-value { color: var(--text); font-size: 13px; line-height: 1.5; }
291
311
 
292
312
  /* Footer */
293
313
  .footer {
294
314
  display: flex; align-items: center; justify-content: space-between;
295
- padding: 8px 20px; border-top: 1px solid #3D3A38;
315
+ padding: 8px 20px; border-top: 1px solid var(--border);
296
316
  }
297
317
  .footer-brand {
298
- color: #D97757; font-size: 10px; font-weight: 600;
318
+ color: var(--accent); font-size: 10px; font-weight: 600;
299
319
  letter-spacing: 0.8px; text-transform: uppercase;
300
320
  display: flex; align-items: center; gap: 6px;
301
321
  }
322
+ .footer-brand svg path { stroke: var(--accent); }
302
323
  .footer-nav { display: flex; gap: 6px; }
303
324
  .nav-btn {
304
- padding: 6px 16px; border: 1px solid #3D3A38;
305
- border-radius: 6px; font-size: 12px; font-weight: 500;
306
- cursor: pointer; transition: all 0.15s;
307
- background: transparent; color: #A09B96;
308
- }
309
- .nav-btn:hover { border-color: #D97757; color: #D97757; } .nav-btn.primary { background: #D97757; color: #FFF; border-color: #D97757; }
310
- .nav-btn.primary:hover { background: #C4623F; } .nav-btn:disabled { opacity: 0.4; cursor: default; }
325
+ padding: 6px 16px; border: 1px solid var(--border);
326
+ border-radius: var(--r-6); font-size: 12px; font-weight: 500;
327
+ cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
328
+ background: transparent; color: var(--text-muted);
329
+ }
330
+ .nav-btn:hover { border-color: var(--accent); color: var(--accent); }
331
+ .nav-btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
332
+ .nav-btn.primary:hover { background: var(--accent-hover); }
333
+ .nav-btn:disabled { opacity: 0.4; cursor: default; }
311
334
 
335
+ /* Catalog search (Step 2) */
312
336
  .search-head { display: flex; gap: 8px; margin: 18px 0 8px; }
313
- #model-search-input { flex: 1; background: #1F1D1C; color: #D4D0CC; border: 1px solid #3D3A38; border-radius: 6px; padding: 8px 10px; font-size: 13px; }
314
- .search-meta { color: #7A756F; font-size: 11px; margin-bottom: 6px; }
315
- .search-results { max-height: 220px; overflow-y: auto; border: 1px solid #3D3A38; border-radius: 6px; }
337
+ #model-search-input { flex: 1; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-6); padding: 8px 10px; font-size: 13px; font-family: var(--font-mono); }
338
+ .search-meta { color: var(--text-faint); font-size: 11px; margin-bottom: 6px; }
339
+ .search-results { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-6); }
316
340
  .search-results:empty { border: none; }
317
- .search-row { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid #2D2B2A; }
318
- .search-row:hover { background: #34312F; }
319
- .search-row.selected { background: #4A3328; outline: 1px solid #D97757; }
320
- .search-row-id { color: #D4D0CC; font-size: 12px; font-family: 'SF Mono', Menlo, Consolas, monospace; }
321
- .search-row-sub { color: #A09B96; font-size: 11px; margin-top: 2px; }
322
- .icon-btn { background: none; border: 1px solid #3D3A38; border-radius: 6px; color: #A09B96; cursor: pointer; font-size: 14px; padding: 6px 10px; }
323
- .icon-btn:hover { border-color: #D97757; color: #D97757; }
341
+ .search-row { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--border); }
342
+ .search-row:hover { background: var(--surface-hover); }
343
+ .search-row.selected { background: var(--surface-sel); outline: 1px solid var(--accent); }
344
+ .search-row-id { color: var(--text); font-size: 12px; font-family: var(--font-mono); }
345
+ .search-row-sub { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
346
+ .icon-btn { background: none; border: 1px solid var(--border); border-radius: var(--r-6); color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 6px 10px; }
347
+ .icon-btn:hover { border-color: var(--accent); color: var(--accent); }
324
348
  .icon-btn:disabled { opacity: 0.5; cursor: default; }
325
349
  .search-label { margin: 14px 0 6px; font-size: 12px; opacity: 0.75; }
326
- .pick-badge { font-size: 10px; padding: 1px 5px; border-radius: 3px; background: #5a4a35; margin-left: 6px; }
327
- .model-resolved { display: block; font-size: 11px; opacity: 0.6; font-family: monospace; }
350
+ .pick-badge { font-size: 10px; padding: 1px 5px; border-radius: var(--r-3); background: var(--surface-hover); color: var(--text-muted); margin-left: 6px; }
351
+ .model-resolved { display: block; font-size: 11px; opacity: 0.6; font-family: var(--font-mono); }
328
352
  .write-preview { display: none; font-size: 11px; margin-top: 4px; }
329
- .write-preview-active { display: block; }`;
353
+ .write-preview-active { display: block; }
354
+
355
+ /* Free council picker (Step 2) */
356
+ .council-section { margin-top: 14px; }
357
+ .council-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
358
+ .council-results { max-height: 160px; overflow-y: auto; margin-top: 6px; }
359
+ .council-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; color: var(--text); font-family: var(--font-mono); }
360
+ .council-row input[type="checkbox"] { accent-color: var(--accent); }
361
+ .council-note { font-size: 10px; color: var(--text-faint); margin-top: 6px; line-height: 1.4; }
362
+
363
+ /* Alias example-icon strokes — driven by class rules (var() is invalid as an SVG attribute) */
364
+ .alias-icon-accent path { stroke: var(--accent); }
365
+ .alias-icon-accent rect { stroke: var(--accent); }
366
+ .alias-icon-accent .alias-icon-faint-path { stroke: var(--text-faint); }
367
+ .alias-icon-faint-path { stroke: var(--text-faint); }
368
+ .alias-icon-ok path { stroke: var(--ok); }
369
+ .alias-icon-ok circle { stroke: var(--ok); }
370
+
371
+ /* StatusDot — shared run-state pulse (kit parity; consumed by toolbar/fold too) */
372
+ @keyframes amicusPulse {
373
+ 0% { transform: scale(1); opacity: 0.6; }
374
+ 70% { transform: scale(2.6); opacity: 0; }
375
+ 100% { opacity: 0; }
376
+ }
377
+ .live-dot {
378
+ position: relative; display: inline-block;
379
+ width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
380
+ }
381
+ .live-dot::after {
382
+ content: ''; position: absolute; inset: 0;
383
+ border-radius: 50%; background: var(--ok);
384
+ animation: amicusPulse 1.6s var(--ease-out) infinite;
385
+ }`;
386
+ }
387
+
388
+ function buildWizardCSS() {
389
+ return tokenCss({ absoluteFontUrls: true }) + __rawWizardCSS();
330
390
  }
331
391
 
332
- module.exports = { buildWizardCSS };
392
+ module.exports = { buildWizardCSS, __rawWizardCSS };
package/electron/setup-ui.js CHANGED
@@ -33,7 +33,7 @@ function buildSetupHTML(options = {}) {
33
33
  return `<!DOCTYPE html>
34
34
  <html><head><meta charset="utf-8"><title>Amicus Setup</title>
35
35
  <style>${css}</style></head><body>
36
- <div class="header"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 2v12" stroke="#D97757" stroke-width="2" stroke-linecap="round"/><path d="M10 2v5c0 2-3 3-7 5" stroke="#D97757" stroke-width="2" stroke-linecap="round" stroke-opacity="0.6"/></svg><span class="header-title">${brandName} Setup</span></div>
36
+ <div class="header"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 2v12" stroke-width="2" stroke-linecap="round"/><path d="M10 2v5c0 2-3 3-7 5" stroke-width="2" stroke-linecap="round" stroke-opacity="0.6"/></svg><span class="header-title">${brandName} Setup</span></div>
37
37
  <div class="progress-bar"><div class="progress-step active" id="step-1"><span class="progress-dot">1</span><span>API Keys</span></div><div class="progress-connector"></div><div class="progress-step" id="step-2"><span class="progress-dot">2</span><span>Models</span></div><div class="progress-connector"></div><div class="progress-step" id="step-3"><span class="progress-dot">3</span><span>Routing</span></div><div class="progress-connector"></div><div class="progress-step" id="step-4"><span class="progress-dot">4</span><span>Review</span></div></div>
38
38
  <div class="content">
39
39
  <div class="wizard-step visible" id="wizard-step-1"><div id="import-notice"></div>${keysHtml}</div>
@@ -50,7 +50,7 @@ function buildSetupHTML(options = {}) {
50
50
  </div>
51
51
  </div>
52
52
  </div>
53
- <div class="footer"><div class="footer-brand"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 2v12" stroke="#D97757" stroke-width="2" stroke-linecap="round"/><path d="M10 2v5c0 2-3 3-7 5" stroke="#D97757" stroke-width="2" stroke-linecap="round" stroke-opacity="0.6"/></svg> ${brandName}</div><div class="footer-nav"><button class="nav-btn" id="back-btn" style="display:none">Back</button><button class="nav-btn primary" id="next-btn" disabled>Next</button><button class="nav-btn primary" id="finish-btn" style="display:none">Finish</button></div></div>
53
+ <div class="footer"><div class="footer-brand"><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 2v12" stroke-width="2" stroke-linecap="round"/><path d="M10 2v5c0 2-3 3-7 5" stroke-width="2" stroke-linecap="round" stroke-opacity="0.6"/></svg> ${brandName}</div><div class="footer-nav"><button class="nav-btn" id="back-btn" style="display:none">Back</button><button class="nav-btn primary" id="next-btn" disabled>Next</button><button class="nav-btn primary" id="finish-btn" style="display:none">Finish</button></div></div>
54
54
  ${buildWizardScript(providersJson, modelChoicesJson, providerNamesJson, defaultAliasesJson)}
55
55
  </body></html>`;
56
56
  }