hovclaw 0.1.0 → 0.1.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.
@@ -1,34 +1,143 @@
1
- /* ============================================================
2
- HOVClaw Gateway UI — Tailwind overrides & custom components
3
- Only things Tailwind CDN can't handle inline.
4
- ============================================================ */
1
+ :root {
2
+ --bg: #0b0d12;
3
+ --surface: #141822;
4
+ --surface-2: #1b2130;
5
+ --surface-3: #212a3d;
6
+ --border: #2b3650;
7
+ --border-soft: #212a3d;
8
+ --text: #e4e9f7;
9
+ --text-muted: #9aa8cc;
10
+ --accent: #6cc4a1;
11
+ --accent-strong: #7ee4b9;
12
+ --danger: #f07474;
13
+ --shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
14
+ }
5
15
 
6
- /* ---- Connection indicator ---- */
16
+ * {
17
+ box-sizing: border-box;
18
+ }
7
19
 
8
- .indicator {
9
- width: 8px;
10
- height: 8px;
11
- border-radius: 50%;
12
- flex-shrink: 0;
20
+ html,
21
+ body {
22
+ height: 100%;
23
+ margin: 0;
13
24
  }
14
25
 
15
- .indicator--off {
16
- background: #f05b5b;
17
- box-shadow: 0 0 6px #f05b5b;
26
+ body {
27
+ background:
28
+ radial-gradient(circle at 10% 5%, rgba(108, 196, 161, 0.14), transparent 40%),
29
+ radial-gradient(circle at 100% 0%, rgba(122, 146, 255, 0.14), transparent 35%),
30
+ var(--bg);
31
+ color: var(--text);
32
+ font-family: "SF Pro Text", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
18
33
  }
19
34
 
20
- .indicator--on {
21
- background: #3dd68c;
22
- box-shadow: 0 0 6px #3dd68c;
23
- animation: pulse-glow 2.5s ease-in-out infinite;
35
+ button,
36
+ input,
37
+ select {
38
+ font: inherit;
39
+ color: inherit;
24
40
  }
25
41
 
26
- @keyframes pulse-glow {
27
- 0%, 100% { box-shadow: 0 0 6px #3dd68c; }
28
- 50% { box-shadow: 0 0 12px #3dd68c; }
42
+ input,
43
+ select {
44
+ width: 100%;
45
+ border: 1px solid var(--border);
46
+ background: var(--surface-2);
47
+ color: var(--text);
48
+ border-radius: 8px;
49
+ min-height: 36px;
50
+ padding: 7px 10px;
51
+ outline: none;
52
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
53
+ }
54
+
55
+ input:focus,
56
+ select:focus {
57
+ border-color: var(--accent);
58
+ box-shadow: 0 0 0 3px rgba(108, 196, 161, 0.16);
59
+ }
60
+
61
+ input::placeholder {
62
+ color: #7885a8;
63
+ }
64
+
65
+ .app-shell {
66
+ display: flex;
67
+ flex-direction: column;
68
+ min-height: 100%;
29
69
  }
30
70
 
31
- /* ---- Drawer toggle ---- */
71
+ .topbar {
72
+ height: 52px;
73
+ display: flex;
74
+ align-items: center;
75
+ justify-content: space-between;
76
+ padding: 0 16px;
77
+ background: rgba(20, 24, 34, 0.94);
78
+ border-bottom: 1px solid var(--border);
79
+ backdrop-filter: blur(10px);
80
+ }
81
+
82
+ .topbar-brand {
83
+ display: flex;
84
+ align-items: center;
85
+ gap: 10px;
86
+ }
87
+
88
+ .brand-name {
89
+ font-family: "SF Mono", "Menlo", "Consolas", monospace;
90
+ font-size: 14px;
91
+ font-weight: 650;
92
+ letter-spacing: 0.02em;
93
+ }
94
+
95
+ .brand-badge {
96
+ font-family: "SF Mono", "Menlo", "Consolas", monospace;
97
+ font-size: 11px;
98
+ color: var(--text-muted);
99
+ border: 1px solid var(--border);
100
+ border-radius: 999px;
101
+ padding: 2px 8px;
102
+ }
103
+
104
+ .topbar-connection {
105
+ display: inline-flex;
106
+ align-items: center;
107
+ gap: 8px;
108
+ }
109
+
110
+ .connection-label {
111
+ font-family: "SF Mono", "Menlo", "Consolas", monospace;
112
+ font-size: 12px;
113
+ color: var(--text-muted);
114
+ }
115
+
116
+ .connection-drawer {
117
+ background: rgba(20, 24, 34, 0.95);
118
+ border-bottom: 1px solid var(--border);
119
+ }
120
+
121
+ .drawer-toggle {
122
+ width: 100%;
123
+ border: 0;
124
+ background: transparent;
125
+ color: var(--text-muted);
126
+ text-transform: uppercase;
127
+ letter-spacing: 0.14em;
128
+ font-size: 11px;
129
+ font-weight: 700;
130
+ display: flex;
131
+ align-items: center;
132
+ gap: 8px;
133
+ padding: 10px 16px;
134
+ text-align: left;
135
+ cursor: pointer;
136
+ }
137
+
138
+ .drawer-toggle:hover {
139
+ color: var(--text);
140
+ }
32
141
 
33
142
  .drawer-chevron {
34
143
  display: inline-block;
@@ -37,7 +146,7 @@
37
146
  border-left: 4px solid currentColor;
38
147
  border-top: 3px solid transparent;
39
148
  border-bottom: 3px solid transparent;
40
- transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
149
+ transition: transform 0.2s ease;
41
150
  }
42
151
 
43
152
  .drawer--open .drawer-chevron {
@@ -52,157 +161,442 @@
52
161
  display: block;
53
162
  }
54
163
 
55
- /* ---- Panel accordion chevron ---- */
164
+ .connection-form {
165
+ padding: 0 16px 14px;
166
+ }
167
+
168
+ .connection-grid {
169
+ display: grid;
170
+ grid-template-columns: repeat(3, minmax(0, 1fr));
171
+ gap: 10px;
172
+ }
173
+
174
+ .field {
175
+ display: flex;
176
+ flex-direction: column;
177
+ gap: 6px;
178
+ min-width: 0;
179
+ }
180
+
181
+ .field--inline {
182
+ flex: 1;
183
+ }
184
+
185
+ .field-label {
186
+ color: var(--text-muted);
187
+ font-family: "SF Mono", "Menlo", "Consolas", monospace;
188
+ text-transform: uppercase;
189
+ letter-spacing: 0.1em;
190
+ font-weight: 650;
191
+ font-size: 10px;
192
+ }
193
+
194
+ .button-row {
195
+ margin-top: 10px;
196
+ display: flex;
197
+ gap: 8px;
198
+ }
199
+
200
+ .btn {
201
+ border: 1px solid var(--border);
202
+ background: var(--surface-2);
203
+ color: var(--text);
204
+ min-height: 36px;
205
+ padding: 0 12px;
206
+ border-radius: 8px;
207
+ cursor: pointer;
208
+ font-family: "SF Mono", "Menlo", "Consolas", monospace;
209
+ font-size: 12px;
210
+ font-weight: 650;
211
+ transition: background 0.2s ease, border-color 0.2s ease;
212
+ }
213
+
214
+ .btn:hover {
215
+ background: var(--surface-3);
216
+ border-color: #3a4665;
217
+ }
218
+
219
+ .btn:disabled {
220
+ opacity: 0.45;
221
+ cursor: not-allowed;
222
+ }
223
+
224
+ .btn--primary {
225
+ background: var(--accent);
226
+ border-color: var(--accent);
227
+ color: #0e1118;
228
+ }
229
+
230
+ .btn--primary:hover {
231
+ background: var(--accent-strong);
232
+ border-color: var(--accent-strong);
233
+ }
234
+
235
+ .btn--icon {
236
+ width: 42px;
237
+ min-width: 42px;
238
+ padding: 0;
239
+ display: inline-flex;
240
+ align-items: center;
241
+ justify-content: center;
242
+ }
243
+
244
+ .main-layout {
245
+ flex: 1;
246
+ min-height: 0;
247
+ display: grid;
248
+ grid-template-columns: 360px minmax(0, 1fr);
249
+ }
250
+
251
+ .sidebar {
252
+ background: rgba(20, 24, 34, 0.86);
253
+ border-right: 1px solid var(--border);
254
+ overflow-y: auto;
255
+ }
256
+
257
+ .panel {
258
+ border-bottom: 1px solid var(--border-soft);
259
+ }
260
+
261
+ .panel-header {
262
+ width: 100%;
263
+ border: 0;
264
+ background: transparent;
265
+ cursor: pointer;
266
+ padding: 10px 14px;
267
+ display: flex;
268
+ align-items: center;
269
+ gap: 8px;
270
+ }
271
+
272
+ .panel-header:hover {
273
+ background: rgba(255, 255, 255, 0.02);
274
+ }
275
+
276
+ .panel-title {
277
+ flex: 1;
278
+ font-family: "SF Mono", "Menlo", "Consolas", monospace;
279
+ color: var(--text-muted);
280
+ text-transform: uppercase;
281
+ letter-spacing: 0.11em;
282
+ font-size: 11px;
283
+ font-weight: 700;
284
+ text-align: left;
285
+ }
56
286
 
57
287
  .panel-chevron {
58
288
  display: inline-block;
59
289
  width: 0;
60
290
  height: 0;
61
- border-left: 4px solid #5f656e;
291
+ border-left: 4px solid var(--text-muted);
62
292
  border-top: 3px solid transparent;
63
293
  border-bottom: 3px solid transparent;
64
- transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
294
+ transition: transform 0.2s ease;
65
295
  }
66
296
 
67
297
  .panel-header[aria-expanded="true"] .panel-chevron {
68
298
  transform: rotate(90deg);
69
299
  }
70
300
 
71
- /* ---- Output pre blocks ---- */
301
+ .panel-body {
302
+ padding: 0 14px 12px;
303
+ }
72
304
 
73
305
  .output {
74
- font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
75
- font-size: 0.75rem;
76
- line-height: 1.55;
77
- color: #9aa0a8;
78
- background: #0c0d0f;
79
- border: 1px solid #1f2128;
80
- border-radius: 5px;
81
- padding: 10px 12px;
82
306
  margin: 0;
83
- max-height: 180px;
307
+ border-radius: 8px;
308
+ border: 1px solid var(--border-soft);
309
+ background: #0f131c;
310
+ color: var(--text-muted);
311
+ font-family: "SF Mono", "Menlo", "Consolas", monospace;
312
+ font-size: 12px;
313
+ line-height: 1.55;
314
+ padding: 10px 11px;
315
+ max-height: 190px;
84
316
  overflow: auto;
85
317
  white-space: pre-wrap;
86
318
  word-break: break-word;
87
319
  }
88
320
 
89
321
  .output--logs {
90
- max-height: 140px;
91
- color: #5f656e;
322
+ max-height: 150px;
323
+ color: #8893b4;
92
324
  }
93
325
 
94
- /* ---- Select chevron ---- */
326
+ .count-badge {
327
+ min-width: 22px;
328
+ text-align: center;
329
+ border-radius: 999px;
330
+ border: 1px solid var(--border);
331
+ background: var(--surface-3);
332
+ color: var(--text-muted);
333
+ font-size: 11px;
334
+ font-family: "SF Mono", "Menlo", "Consolas", monospace;
335
+ padding: 1px 7px;
336
+ }
337
+
338
+ .send-form {
339
+ display: grid;
340
+ grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.5fr) auto;
341
+ gap: 8px;
342
+ align-items: end;
343
+ }
344
+
345
+ .chat-pane {
346
+ min-height: 0;
347
+ display: flex;
348
+ flex-direction: column;
349
+ }
350
+
351
+ .chat-toolbar {
352
+ border-bottom: 1px solid var(--border);
353
+ background: rgba(20, 24, 34, 0.9);
354
+ padding: 10px 14px;
355
+ display: flex;
356
+ gap: 8px;
357
+ align-items: end;
358
+ }
359
+
360
+ .chat-output {
361
+ flex: 1;
362
+ min-height: 0;
363
+ overflow-y: auto;
364
+ display: flex;
365
+ flex-direction: column;
366
+ gap: 6px;
367
+ padding: 14px;
368
+ }
369
+
370
+ .chat-empty {
371
+ margin: auto;
372
+ color: var(--text-muted);
373
+ font-size: 14px;
374
+ text-align: center;
375
+ }
376
+
377
+ .chat-form {
378
+ border-top: 1px solid var(--border);
379
+ background: rgba(20, 24, 34, 0.94);
380
+ display: flex;
381
+ gap: 8px;
382
+ padding: 12px 14px;
383
+ }
95
384
 
96
385
  .select-chevron {
97
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%235f656e' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
386
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%239aa8cc' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
98
387
  background-repeat: no-repeat;
99
- background-position: right 8px center;
388
+ background-position: right 9px center;
389
+ padding-right: 28px;
390
+ appearance: none;
100
391
  }
101
392
 
102
- /* ---- Chat message bubbles ---- */
103
-
104
393
  .msg {
105
- max-width: 85%;
106
- padding: 8px 14px;
107
- border-radius: 12px;
108
- font-size: 0.88rem;
109
- line-height: 1.55;
110
- white-space: pre-wrap;
394
+ max-width: min(84%, 820px);
395
+ border-radius: 14px;
396
+ padding: 9px 12px;
397
+ font-size: 14px;
398
+ line-height: 1.5;
111
399
  word-break: break-word;
112
- animation: msg-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
400
+ white-space: pre-wrap;
401
+ animation: msg-in 0.18s ease;
113
402
  }
114
403
 
115
404
  @keyframes msg-in {
116
- from { opacity: 0; transform: translateY(6px); }
117
- to { opacity: 1; transform: translateY(0); }
405
+ from {
406
+ opacity: 0;
407
+ transform: translateY(6px);
408
+ }
409
+ to {
410
+ opacity: 1;
411
+ transform: translateY(0);
412
+ }
118
413
  }
119
414
 
120
415
  .msg--user {
121
416
  align-self: flex-end;
122
- background: #5b8af0;
123
- color: #0c0d0f;
124
- border-bottom-right-radius: 4px;
417
+ background: #6cc4a1;
418
+ color: #0d1118;
419
+ border-bottom-right-radius: 5px;
125
420
  }
126
421
 
127
422
  .msg--assistant {
128
423
  align-self: flex-start;
129
- background: #1a1c20;
130
- color: #e8eaed;
131
- border: 1px solid #1f2128;
132
- border-bottom-left-radius: 4px;
424
+ background: var(--surface-2);
425
+ border: 1px solid var(--border);
426
+ color: var(--text);
427
+ border-bottom-left-radius: 5px;
133
428
  }
134
429
 
135
430
  .msg--system {
136
431
  align-self: center;
137
- font-family: "IBM Plex Mono", ui-monospace, monospace;
138
- font-size: 0.75rem;
139
- color: #5f656e;
140
- padding: 4px 12px;
141
- background: #141518;
142
- border-radius: 20px;
432
+ background: rgba(24, 31, 45, 0.95);
433
+ border: 1px solid var(--border);
434
+ color: var(--text-muted);
435
+ font-family: "SF Mono", "Menlo", "Consolas", monospace;
436
+ font-size: 12px;
437
+ border-radius: 999px;
438
+ padding: 5px 12px;
143
439
  }
144
440
 
145
441
  .msg-role {
146
- font-family: "IBM Plex Mono", ui-monospace, monospace;
147
- font-size: 0.68rem;
148
- font-weight: 600;
149
- text-transform: uppercase;
150
- letter-spacing: 0.04em;
151
- margin-bottom: 2px;
152
442
  display: block;
443
+ margin-bottom: 3px;
444
+ font-family: "SF Mono", "Menlo", "Consolas", monospace;
445
+ font-size: 10px;
446
+ text-transform: uppercase;
447
+ letter-spacing: 0.1em;
448
+ font-weight: 700;
153
449
  }
154
450
 
155
- .msg--user .msg-role { color: rgba(255, 255, 255, 0.6); }
156
- .msg--assistant .msg-role { color: #5f656e; }
451
+ .msg--user .msg-role {
452
+ color: rgba(0, 0, 0, 0.52);
453
+ }
454
+
455
+ .msg--assistant .msg-role {
456
+ color: var(--text-muted);
457
+ }
157
458
 
158
- /* ---- Toasts ---- */
459
+ .toast-container {
460
+ position: fixed;
461
+ right: 14px;
462
+ bottom: 14px;
463
+ display: flex;
464
+ flex-direction: column;
465
+ gap: 8px;
466
+ z-index: 60;
467
+ pointer-events: none;
468
+ }
159
469
 
160
470
  .toast {
161
- font-family: "IBM Plex Mono", ui-monospace, monospace;
162
- font-size: 0.78rem;
163
- padding: 8px 14px;
164
- border-radius: 5px;
165
- background: #1a1c20;
166
- color: #e8eaed;
167
- border: 1px solid #2a2d33;
168
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
169
471
  pointer-events: auto;
170
- animation: toast-in 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
472
+ border-radius: 8px;
473
+ border: 1px solid var(--border);
474
+ background: var(--surface-2);
475
+ box-shadow: var(--shadow);
476
+ padding: 10px 12px;
477
+ font-family: "SF Mono", "Menlo", "Consolas", monospace;
478
+ font-size: 12px;
479
+ color: var(--text);
480
+ animation: toast-in 0.2s ease;
171
481
  }
172
482
 
173
483
  .toast--error {
174
- border-color: #f05b5b;
175
- background: rgba(240, 91, 91, 0.1);
176
- color: #f05b5b;
484
+ border-color: rgba(240, 116, 116, 0.6);
485
+ color: #ff9e9e;
177
486
  }
178
487
 
179
488
  .toast--success {
180
- border-color: #3dd68c;
181
- background: rgba(61, 214, 140, 0.1);
182
- color: #3dd68c;
489
+ border-color: rgba(108, 196, 161, 0.6);
490
+ color: #9bf0cd;
183
491
  }
184
492
 
185
493
  @keyframes toast-in {
186
- from { opacity: 0; transform: translateY(10px) scale(0.97); }
187
- to { opacity: 1; transform: translateY(0) scale(1); }
494
+ from {
495
+ opacity: 0;
496
+ transform: translateY(8px);
497
+ }
498
+ to {
499
+ opacity: 1;
500
+ transform: translateY(0);
501
+ }
188
502
  }
189
503
 
190
504
  @keyframes toast-out {
191
- to { opacity: 0; transform: translateY(-8px) scale(0.97); }
505
+ to {
506
+ opacity: 0;
507
+ transform: translateY(-8px);
508
+ }
192
509
  }
193
510
 
194
- /* ---- Scrollbar ---- */
511
+ .indicator {
512
+ width: 9px;
513
+ height: 9px;
514
+ border-radius: 50%;
515
+ flex-shrink: 0;
516
+ }
195
517
 
196
- .scrollbar-thin {
518
+ .indicator--off {
519
+ background: var(--danger);
520
+ box-shadow: 0 0 8px rgba(240, 116, 116, 0.9);
521
+ }
522
+
523
+ .indicator--on {
524
+ background: var(--accent);
525
+ box-shadow: 0 0 8px rgba(108, 196, 161, 0.9);
526
+ animation: pulse-glow 2.2s ease-in-out infinite;
527
+ }
528
+
529
+ @keyframes pulse-glow {
530
+ 0%,
531
+ 100% {
532
+ box-shadow: 0 0 8px rgba(108, 196, 161, 0.9);
533
+ }
534
+ 50% {
535
+ box-shadow: 0 0 14px rgba(108, 196, 161, 0.9);
536
+ }
537
+ }
538
+
539
+ .chat-output,
540
+ .sidebar,
541
+ .output {
197
542
  scrollbar-width: thin;
198
- scrollbar-color: #2a2d33 transparent;
543
+ scrollbar-color: #394669 transparent;
544
+ }
545
+
546
+ .chat-output::-webkit-scrollbar,
547
+ .sidebar::-webkit-scrollbar,
548
+ .output::-webkit-scrollbar {
549
+ width: 7px;
550
+ height: 7px;
199
551
  }
200
552
 
201
- .scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
202
- .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
203
- .scrollbar-thin::-webkit-scrollbar-thumb { background: #2a2d33; border-radius: 3px; }
204
- .scrollbar-thin::-webkit-scrollbar-thumb:hover { background: #5f656e; }
553
+ .chat-output::-webkit-scrollbar-thumb,
554
+ .sidebar::-webkit-scrollbar-thumb,
555
+ .output::-webkit-scrollbar-thumb {
556
+ background: #394669;
557
+ border-radius: 4px;
558
+ }
205
559
 
206
- .output::-webkit-scrollbar { width: 5px; }
207
- .output::-webkit-scrollbar-track { background: transparent; }
208
- .output::-webkit-scrollbar-thumb { background: #2a2d33; border-radius: 3px; }
560
+ @media (max-width: 1100px) {
561
+ .connection-grid {
562
+ grid-template-columns: 1fr;
563
+ }
564
+
565
+ .main-layout {
566
+ grid-template-columns: 1fr;
567
+ grid-template-rows: minmax(0, 44vh) minmax(0, 56vh);
568
+ }
569
+
570
+ .sidebar {
571
+ border-right: 0;
572
+ border-bottom: 1px solid var(--border);
573
+ }
574
+
575
+ .send-form {
576
+ grid-template-columns: 1fr;
577
+ }
578
+
579
+ .chat-toolbar {
580
+ flex-wrap: wrap;
581
+ }
582
+
583
+ .field--inline {
584
+ width: 100%;
585
+ flex: 1 0 100%;
586
+ }
587
+ }
588
+
589
+ @media (max-width: 640px) {
590
+ .topbar {
591
+ padding: 0 12px;
592
+ }
593
+
594
+ .connection-form,
595
+ .panel-body,
596
+ .chat-toolbar,
597
+ .chat-output,
598
+ .chat-form {
599
+ padding-left: 12px;
600
+ padding-right: 12px;
601
+ }
602
+ }