openclacky 0.9.2 → 0.9.4
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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +32 -0
- data/docs/security-design.md +109 -0
- data/lib/clacky/agent/message_compressor_helper.rb +82 -69
- data/lib/clacky/agent/session_serializer.rb +9 -1
- data/lib/clacky/agent/skill_manager.rb +7 -0
- data/lib/clacky/agent.rb +11 -3
- data/lib/clacky/banner.rb +65 -0
- data/lib/clacky/block_font.rb +331 -0
- data/lib/clacky/brand_config.rb +73 -5
- data/lib/clacky/client.rb +129 -633
- data/lib/clacky/default_skills/activate-license/SKILL.md +118 -0
- data/lib/clacky/default_skills/channel-setup/SKILL.md +10 -20
- data/lib/clacky/message_format/anthropic.rb +241 -0
- data/lib/clacky/message_format/open_ai.rb +135 -0
- data/lib/clacky/server/channel/adapters/wecom/adapter.rb +2 -0
- data/lib/clacky/server/channel/adapters/wecom/ws_client.rb +13 -0
- data/lib/clacky/server/http_server.rb +12 -2
- data/lib/clacky/session_manager.rb +7 -2
- data/lib/clacky/tools/browser.rb +109 -280
- data/lib/clacky/ui2/block_font.rb +10 -0
- data/lib/clacky/ui2/components/welcome_banner.rb +23 -22
- data/lib/clacky/version.rb +1 -1
- data/lib/clacky/web/app.css +588 -6
- data/lib/clacky/web/app.js +30 -15
- data/lib/clacky/web/brand.js +141 -9
- data/lib/clacky/web/i18n.js +28 -2
- data/lib/clacky/web/index.html +142 -127
- data/lib/clacky/web/onboard.js +192 -225
- data/lib/clacky/web/sessions.js +12 -8
- data/lib/clacky/web/settings.js +57 -4
- data/lib/clacky.rb +2 -0
- data/scripts/install.sh +60 -15
- metadata +8 -1
data/lib/clacky/web/index.html
CHANGED
|
@@ -27,7 +27,11 @@
|
|
|
27
27
|
<path d="M9 3v18"/>
|
|
28
28
|
</svg>
|
|
29
29
|
</button>
|
|
30
|
-
<
|
|
30
|
+
<div id="header-brand">
|
|
31
|
+
<img class="header-logo-img" id="header-logo-img" src="" alt="" style="display:none">
|
|
32
|
+
<span class="header-logo-divider"></span>
|
|
33
|
+
<span class="header-logo" id="header-logo">{{BRAND_NAME}}</span>
|
|
34
|
+
</div>
|
|
31
35
|
</div>
|
|
32
36
|
<div id="header-right">
|
|
33
37
|
<button id="theme-toggle-header" class="theme-toggle-btn" title="Toggle theme">
|
|
@@ -122,114 +126,9 @@
|
|
|
122
126
|
<!-- ── MAIN ─────────────────────────────────────────────────────────── -->
|
|
123
127
|
<main id="main">
|
|
124
128
|
|
|
125
|
-
<!-- Onboard panel (shown on first run) -->
|
|
126
|
-
<div id="onboard-panel" style="display:none">
|
|
127
|
-
<div id="onboard-inner">
|
|
128
|
-
<div class="onboard-logo"></div>
|
|
129
|
-
<h1 class="onboard-title" id="onboard-title" data-i18n="onboard.title" data-i18n-vars="brand={{BRAND_NAME}}">Welcome to {{BRAND_NAME}}</h1>
|
|
130
|
-
<p class="onboard-subtitle" id="onboard-subtitle" data-i18n="onboard.subtitle">Let's get you set up in a minute.</p>
|
|
131
|
-
|
|
132
|
-
<!-- Phase 0: Language selection -->
|
|
133
|
-
<div id="onboard-phase-lang">
|
|
134
|
-
<p class="onboard-phase-title" data-i18n="onboard.lang.prompt">Choose your language</p>
|
|
135
|
-
<div class="onboard-lang-btns">
|
|
136
|
-
<button id="onboard-btn-lang-en" class="onboard-lang-btn active">English</button>
|
|
137
|
-
<button id="onboard-btn-lang-zh" class="onboard-lang-btn">中文</button>
|
|
138
|
-
</div>
|
|
139
|
-
<div class="onboard-actions">
|
|
140
|
-
<button id="onboard-btn-lang-next" class="onboard-btn-primary" data-i18n="onboard.key.btn.test" style="margin-top:8px">Continue →</button>
|
|
141
|
-
</div>
|
|
142
|
-
</div>
|
|
143
|
-
|
|
144
|
-
<!-- Step indicators -->
|
|
145
|
-
<div id="onboard-steps" style="display:none">
|
|
146
|
-
<div class="onboard-step active" id="step-dot-1">1</div>
|
|
147
|
-
<div class="onboard-step-line"></div>
|
|
148
|
-
<div class="onboard-step" id="step-dot-2">2</div>
|
|
149
|
-
</div>
|
|
150
|
-
|
|
151
|
-
<!-- Phase 1: Key setup -->
|
|
152
|
-
<div id="onboard-phase-key" style="display:none">
|
|
153
|
-
<p class="onboard-phase-title" data-i18n="onboard.key.title">Connect your AI model</p>
|
|
154
|
-
|
|
155
|
-
<!-- Provider quick-select -->
|
|
156
|
-
<div class="onboard-field">
|
|
157
|
-
<label class="onboard-label" data-i18n="onboard.key.provider">Provider</label>
|
|
158
|
-
<div class="custom-select-wrapper" id="onboard-provider-wrapper">
|
|
159
|
-
<div class="custom-select-trigger">
|
|
160
|
-
<span class="custom-select-value placeholder">— Choose provider —</span>
|
|
161
|
-
<svg class="custom-select-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
162
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
163
|
-
</svg>
|
|
164
|
-
</div>
|
|
165
|
-
<div class="custom-select-dropdown" id="onboard-provider-dropdown">
|
|
166
|
-
<div class="custom-select-option" data-value="">— Choose provider —</div>
|
|
167
|
-
</div>
|
|
168
|
-
</div>
|
|
169
|
-
</div>
|
|
170
|
-
<div class="onboard-field">
|
|
171
|
-
<label class="onboard-label" data-i18n="onboard.key.model">Model</label>
|
|
172
|
-
<input id="onboard-model" type="text" class="onboard-input" data-i18n-placeholder="settings.models.placeholder.model" placeholder="e.g. claude-sonnet-4-5">
|
|
173
|
-
</div>
|
|
174
|
-
<div class="onboard-field">
|
|
175
|
-
<label class="onboard-label" data-i18n="onboard.key.baseurl">Base URL</label>
|
|
176
|
-
<input id="onboard-base-url" type="text" class="onboard-input" data-i18n-placeholder="settings.models.placeholder.baseurl" placeholder="https://api.anthropic.com">
|
|
177
|
-
</div>
|
|
178
|
-
<div class="onboard-field">
|
|
179
|
-
<label class="onboard-label" data-i18n="onboard.key.apikey">API Key</label>
|
|
180
|
-
<div class="onboard-input-row">
|
|
181
|
-
<input id="onboard-api-key" type="password" class="onboard-input" data-i18n-placeholder="settings.models.placeholder.apikey" placeholder="sk-…">
|
|
182
|
-
<button id="onboard-toggle-key" class="btn-toggle-key" title="Show/hide">
|
|
183
|
-
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
184
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
185
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
|
186
|
-
</svg>
|
|
187
|
-
</button>
|
|
188
|
-
</div>
|
|
189
|
-
</div>
|
|
190
|
-
|
|
191
|
-
<div id="onboard-test-result" class="onboard-test-result"></div>
|
|
192
|
-
|
|
193
|
-
<div class="onboard-actions">
|
|
194
|
-
<button id="onboard-btn-test" class="onboard-btn-primary" data-i18n="onboard.key.btn.test">Test & Continue →</button>
|
|
195
|
-
</div>
|
|
196
|
-
</div>
|
|
197
|
-
|
|
198
|
-
<!-- Phase 2: Soul setup -->
|
|
199
|
-
<div id="onboard-phase-soul" style="display:none">
|
|
200
|
-
<p class="onboard-phase-title" data-i18n="onboard.soul.title">Personalize your assistant</p>
|
|
201
|
-
<p class="onboard-phase-desc" data-i18n="onboard.soul.desc">
|
|
202
|
-
Takes about 30 seconds. You'll be asked two quick questions via interactive cards.
|
|
203
|
-
</p>
|
|
204
|
-
<div class="onboard-actions onboard-actions-split">
|
|
205
|
-
<button id="onboard-btn-start-soul" class="onboard-btn-primary" data-i18n="onboard.soul.btn.start">Let's go →</button>
|
|
206
|
-
<button id="onboard-btn-skip" class="onboard-btn-secondary" data-i18n="onboard.soul.btn.skip">Skip for now</button>
|
|
207
|
-
</div>
|
|
208
|
-
</div>
|
|
209
|
-
</div>
|
|
210
|
-
</div>
|
|
211
|
-
|
|
212
|
-
<!-- Brand activation panel (shown when branded but not yet activated) -->
|
|
213
|
-
<div id="brand-panel" style="display:none">
|
|
214
|
-
<div id="brand-inner">
|
|
215
|
-
<h1 class="onboard-title" id="brand-title" data-i18n="brand.title">Activate Your License</h1>
|
|
216
|
-
<p class="onboard-subtitle" id="brand-subtitle" data-i18n="brand.subtitle">Enter your license key to get started.</p>
|
|
217
|
-
|
|
218
|
-
<div class="onboard-field">
|
|
219
|
-
<label class="onboard-label" data-i18n="brand.key.label">License Key</label>
|
|
220
|
-
<input id="brand-license-key" type="text" class="onboard-input"
|
|
221
|
-
placeholder="XXXXXXXX-XXXXXXXX-XXXXXXXX-XXXXXXXX-XXXXXXXX"
|
|
222
|
-
autocomplete="off" spellcheck="false">
|
|
223
|
-
</div>
|
|
224
|
-
|
|
225
|
-
<div id="brand-activate-result" class="onboard-test-result"></div>
|
|
226
129
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
<button id="brand-btn-skip" class="onboard-btn-secondary" data-i18n="brand.btn.skip">Skip for now</button>
|
|
230
|
-
</div>
|
|
231
|
-
</div>
|
|
232
|
-
</div>
|
|
130
|
+
<!-- Onboard panel: kept as empty shell (soul_setup auto-launches /onboard session) -->
|
|
131
|
+
<div id="onboard-panel" style="display:none"></div>
|
|
233
132
|
|
|
234
133
|
<!-- Welcome screen -->
|
|
235
134
|
<div id="welcome" class="centered">
|
|
@@ -273,17 +172,21 @@
|
|
|
273
172
|
<div id="messages"></div>
|
|
274
173
|
<!-- Session info bar — mirrors CLI bottom status bar -->
|
|
275
174
|
<div id="session-info-bar" style="display:none">
|
|
175
|
+
<!-- Always visible: status | id | model | cost -->
|
|
276
176
|
<span id="sib-status"></span>
|
|
277
177
|
<span class="sib-sep">│</span>
|
|
278
178
|
<span id="sib-id"></span>
|
|
279
|
-
<span class="sib-sep">│</span>
|
|
280
|
-
<span id="sib-dir"></span>
|
|
281
|
-
<span id="sib-mode-wrap"><span class="sib-sep">│</span><span id="sib-mode"></span></span>
|
|
282
179
|
<span id="sib-model-wrap"><span class="sib-sep">│</span><span id="sib-model"></span></span>
|
|
283
180
|
<span class="sib-sep">│</span>
|
|
284
|
-
<span id="sib-tasks"></span>
|
|
285
|
-
<span class="sib-sep">│</span>
|
|
286
181
|
<span id="sib-cost"></span>
|
|
182
|
+
<!-- Detail fields: hidden by default, revealed on hover -->
|
|
183
|
+
<span class="sib-detail">
|
|
184
|
+
<span class="sib-sep">│</span>
|
|
185
|
+
<span id="sib-dir"></span>
|
|
186
|
+
<span id="sib-mode-wrap"><span class="sib-sep">│</span><span id="sib-mode"></span></span>
|
|
187
|
+
<span class="sib-sep">│</span>
|
|
188
|
+
<span id="sib-tasks"></span>
|
|
189
|
+
</span>
|
|
287
190
|
</div>
|
|
288
191
|
|
|
289
192
|
<div id="input-area">
|
|
@@ -422,20 +325,48 @@
|
|
|
422
325
|
|
|
423
326
|
<!-- Current brand status (shown when already activated) -->
|
|
424
327
|
<div id="brand-status-card" class="brand-status-card" style="display:none">
|
|
425
|
-
<div class="brand-status-
|
|
426
|
-
<
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
328
|
+
<div class="brand-status-main">
|
|
329
|
+
<div class="brand-status-fields">
|
|
330
|
+
<div class="brand-status-row">
|
|
331
|
+
<span class="brand-status-label" data-i18n="settings.brand.label.brand">Brand</span>
|
|
332
|
+
<span class="brand-status-value" id="brand-status-name">—</span>
|
|
333
|
+
</div>
|
|
334
|
+
<div class="brand-status-row">
|
|
335
|
+
<span class="brand-status-label" data-i18n="settings.brand.label.status">Status</span>
|
|
336
|
+
<span class="brand-status-value" id="brand-status-badge">—</span>
|
|
337
|
+
</div>
|
|
338
|
+
<div class="brand-status-row">
|
|
339
|
+
<span class="brand-status-label" data-i18n="settings.brand.label.expires">Expires</span>
|
|
340
|
+
<span class="brand-status-value" id="brand-status-expires">—</span>
|
|
341
|
+
</div>
|
|
342
|
+
<div class="brand-status-actions">
|
|
343
|
+
<button id="btn-rebind-license" class="btn-settings-action" data-i18n="settings.brand.btn.change">Change License Key</button>
|
|
344
|
+
</div>
|
|
345
|
+
</div>
|
|
346
|
+
<!-- Support QR code (shown when support_qr_url is available) -->
|
|
347
|
+
<div id="brand-support-qr" class="brand-support-qr" style="display:none">
|
|
348
|
+
<button class="brand-support-qr-btn" id="brand-support-qr-btn" title="Click to enlarge" aria-label="View QR code larger">
|
|
349
|
+
<img id="brand-support-qr-img" src="" alt="Support QR Code" class="brand-support-qr-img">
|
|
350
|
+
<span class="brand-support-qr-zoom-hint">
|
|
351
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
|
|
352
|
+
Click to enlarge
|
|
353
|
+
</span>
|
|
354
|
+
</button>
|
|
355
|
+
<span class="brand-support-qr-label" data-i18n="settings.brand.label.supportQr">Tech Support</span>
|
|
356
|
+
</div>
|
|
357
|
+
|
|
358
|
+
<!-- QR code lightbox modal -->
|
|
359
|
+
<div id="qr-lightbox" class="qr-lightbox" style="display:none" role="dialog" aria-modal="true" aria-label="QR Code enlarged view">
|
|
360
|
+
<div class="qr-lightbox-backdrop" id="qr-lightbox-backdrop"></div>
|
|
361
|
+
<div class="qr-lightbox-content">
|
|
362
|
+
<img id="qr-lightbox-img" src="" alt="Support QR Code" class="qr-lightbox-img">
|
|
363
|
+
<p class="qr-lightbox-label" id="qr-lightbox-label">Tech Support</p>
|
|
364
|
+
<p class="qr-lightbox-hint" data-i18n="settings.brand.label.qrHint">Scan with your phone camera</p>
|
|
365
|
+
<button class="qr-lightbox-close" id="qr-lightbox-close" aria-label="Close">
|
|
366
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|
367
|
+
</button>
|
|
368
|
+
</div>
|
|
369
|
+
</div>
|
|
439
370
|
</div>
|
|
440
371
|
</div>
|
|
441
372
|
|
|
@@ -464,6 +395,90 @@
|
|
|
464
395
|
|
|
465
396
|
</div><!-- end #app -->
|
|
466
397
|
|
|
398
|
+
<!-- Setup panel: first-run mandatory setup (language + API key).
|
|
399
|
+
Rendered as a fixed full-screen overlay so the sidebar is hidden. -->
|
|
400
|
+
<div id="setup-panel" style="display:none">
|
|
401
|
+
<div id="setup-card">
|
|
402
|
+
|
|
403
|
+
<!-- Header: logo + brand + subtitle -->
|
|
404
|
+
<div id="setup-header">
|
|
405
|
+
<div id="setup-logo">✦</div>
|
|
406
|
+
<h1 id="setup-title" data-i18n="onboard.title" data-i18n-vars="brand={{BRAND_NAME}}">Welcome to {{BRAND_NAME}}</h1>
|
|
407
|
+
<p id="setup-subtitle" data-i18n="onboard.subtitle">Let's get you set up in a minute.</p>
|
|
408
|
+
</div>
|
|
409
|
+
|
|
410
|
+
<!-- Step indicators -->
|
|
411
|
+
<div id="setup-steps">
|
|
412
|
+
<div class="setup-step active" id="setup-dot-1"><span>1</span></div>
|
|
413
|
+
<div class="setup-step-line"></div>
|
|
414
|
+
<div class="setup-step" id="setup-dot-2"><span>2</span></div>
|
|
415
|
+
</div>
|
|
416
|
+
|
|
417
|
+
<!-- Step 1: Language selection -->
|
|
418
|
+
<div id="setup-phase-lang">
|
|
419
|
+
<p class="setup-phase-label" data-i18n="onboard.lang.prompt">Choose your language</p>
|
|
420
|
+
<div id="setup-lang-row">
|
|
421
|
+
<div id="setup-lang-btns">
|
|
422
|
+
<button id="setup-btn-lang-en" class="setup-lang-btn">English</button>
|
|
423
|
+
<button id="setup-btn-lang-zh" class="setup-lang-btn active">中文</button>
|
|
424
|
+
</div>
|
|
425
|
+
<button id="setup-btn-lang-next" class="setup-next-btn" data-i18n="onboard.lang.next">Continue →</button>
|
|
426
|
+
</div>
|
|
427
|
+
</div>
|
|
428
|
+
|
|
429
|
+
<!-- Step 2: API Key setup -->
|
|
430
|
+
<div id="setup-phase-key" style="display:none">
|
|
431
|
+
<p class="setup-phase-label" data-i18n="onboard.key.title">Connect your AI model</p>
|
|
432
|
+
|
|
433
|
+
<div class="setup-field">
|
|
434
|
+
<label class="setup-label" data-i18n="onboard.key.provider">Provider</label>
|
|
435
|
+
<div class="custom-select-wrapper" id="setup-provider-wrapper">
|
|
436
|
+
<div class="custom-select-trigger">
|
|
437
|
+
<span class="custom-select-value placeholder">— Choose provider —</span>
|
|
438
|
+
<svg class="custom-select-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
439
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
440
|
+
</svg>
|
|
441
|
+
</div>
|
|
442
|
+
<div class="custom-select-dropdown" id="setup-provider-dropdown">
|
|
443
|
+
<div class="custom-select-option" data-value="">— Choose provider —</div>
|
|
444
|
+
</div>
|
|
445
|
+
</div>
|
|
446
|
+
</div>
|
|
447
|
+
|
|
448
|
+
<div class="setup-field">
|
|
449
|
+
<label class="setup-label" data-i18n="onboard.key.model">Model</label>
|
|
450
|
+
<input id="setup-model" type="text" class="setup-input" data-i18n-placeholder="settings.models.placeholder.model" placeholder="e.g. claude-sonnet-4-5">
|
|
451
|
+
</div>
|
|
452
|
+
|
|
453
|
+
<div class="setup-field">
|
|
454
|
+
<label class="setup-label" data-i18n="onboard.key.baseurl">Base URL</label>
|
|
455
|
+
<input id="setup-base-url" type="text" class="setup-input" data-i18n-placeholder="settings.models.placeholder.baseurl" placeholder="https://api.anthropic.com">
|
|
456
|
+
</div>
|
|
457
|
+
|
|
458
|
+
<div class="setup-field">
|
|
459
|
+
<label class="setup-label" data-i18n="onboard.key.apikey">API Key</label>
|
|
460
|
+
<div class="setup-input-row">
|
|
461
|
+
<input id="setup-api-key" type="password" class="setup-input" data-i18n-placeholder="settings.models.placeholder.apikey" placeholder="sk-…">
|
|
462
|
+
<button id="setup-toggle-key" class="btn-toggle-key" title="Show/hide">
|
|
463
|
+
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
464
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
465
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
|
466
|
+
</svg>
|
|
467
|
+
</button>
|
|
468
|
+
</div>
|
|
469
|
+
</div>
|
|
470
|
+
|
|
471
|
+
<div id="setup-test-result" class="setup-test-result"></div>
|
|
472
|
+
|
|
473
|
+
<div class="setup-key-actions">
|
|
474
|
+
<button id="setup-btn-back" class="setup-back-btn" data-i18n="onboard.key.btn.back">← Back</button>
|
|
475
|
+
<button id="setup-btn-test" class="setup-submit-btn" data-i18n="onboard.key.btn.test">Test & Continue →</button>
|
|
476
|
+
</div>
|
|
477
|
+
</div>
|
|
478
|
+
|
|
479
|
+
</div>
|
|
480
|
+
</div>
|
|
481
|
+
|
|
467
482
|
<!-- ── CONFIRMATION MODAL ────────────────────────────────────────────────── -->
|
|
468
483
|
<div id="modal-overlay" class="modal-overlay" style="display:none">
|
|
469
484
|
<div class="modal-box sm">
|