@harborgroup/my-team 0.1.0 → 0.2.0

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.
@@ -2,22 +2,39 @@
2
2
  color-scheme: light dark;
3
3
  --fg: #1a1a1a;
4
4
  --bg: #ffffff;
5
- --muted: #666;
6
- --border: #ddd;
7
- --accent: #2563eb;
8
- --banner-bg: #fff7e6;
9
- --banner-fg: #7a4a00;
5
+ --bg-subtle: #f7f7f9;
6
+ --muted: #6b6b76;
7
+ --border: #e6e6ea;
8
+ --accent: #5b52f0;
9
+ --accent-hover: #4a41e0;
10
+ --accent-fg: #ffffff;
11
+ --banner-bg: #fff6e0;
12
+ --banner-fg: #7a5200;
13
+ --rail-bg: #100f1c;
14
+ --sidebar-bg: #17162a;
15
+ --sidebar-fg: #cfcfe6;
16
+ --sidebar-muted: #8c8ba8;
17
+ --sidebar-hover: rgba(255, 255, 255, 0.06);
18
+ --sidebar-active: rgba(255, 255, 255, 0.12);
19
+ --rail-muted: #8987a3;
20
+ --online: #29b874;
21
+ --typing: #e8ab2e;
22
+ --offline: #6b6c80;
23
+ --shadow: 0 1px 2px rgba(16, 15, 28, 0.04), 0 8px 24px rgba(16, 15, 28, 0.06);
10
24
  }
11
25
 
12
26
  @media (prefers-color-scheme: dark) {
13
27
  :root {
14
- --fg: #eee;
15
- --bg: #1a1a1a;
16
- --muted: #999;
17
- --border: #333;
18
- --accent: #60a5fa;
19
- --banner-bg: #3a2e0f;
20
- --banner-fg: #f0c979;
28
+ --fg: #eceef3;
29
+ --bg: #14141d;
30
+ --bg-subtle: #191a24;
31
+ --muted: #93939f;
32
+ --border: #2a2b38;
33
+ --accent: #7c74ff;
34
+ --accent-hover: #948dff;
35
+ --banner-bg: #352a0c;
36
+ --banner-fg: #f0c063;
37
+ --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.35);
21
38
  }
22
39
  }
23
40
 
@@ -25,106 +42,664 @@
25
42
  box-sizing: border-box;
26
43
  }
27
44
 
45
+ html, body {
46
+ height: 100%;
47
+ }
48
+
28
49
  body {
29
50
  margin: 0;
30
- font-family: system-ui, -apple-system, sans-serif;
51
+ font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
31
52
  color: var(--fg);
32
53
  background: var(--bg);
54
+ font-size: 14.5px;
55
+ -webkit-font-smoothing: antialiased;
33
56
  }
34
57
 
35
- #app {
36
- max-width: 720px;
37
- margin: 0 auto;
38
- padding: 2rem 1rem;
39
- height: 100vh;
40
- display: flex;
41
- flex-direction: column;
58
+ /*
59
+ * Several elements below set an explicit `display` (flex, etc.) that would
60
+ * otherwise beat the UA stylesheet's `[hidden] { display: none }` rule on
61
+ * specificity, silently un-hiding them. This one global override keeps
62
+ * `hidden` authoritative regardless of what any other rule sets.
63
+ */
64
+ [hidden] {
65
+ display: none !important;
66
+ }
67
+
68
+ #loading,
69
+ #onboarding {
70
+ max-width: 480px;
71
+ margin: 4rem auto;
72
+ padding: 0 1rem;
73
+ text-align: center;
42
74
  }
43
75
 
44
- pre {
45
- background: color-mix(in srgb, var(--fg) 6%, transparent);
76
+ #onboarding pre {
77
+ background: var(--bg-subtle);
46
78
  padding: 0.75rem 1rem;
47
- border-radius: 6px;
79
+ border-radius: 8px;
48
80
  overflow-x: auto;
81
+ text-align: left;
49
82
  }
50
83
 
51
- .banner {
52
- background: var(--banner-bg);
53
- color: var(--banner-fg);
54
- padding: 0.6rem 0.9rem;
55
- border-radius: 6px;
84
+ /* ---------- App shell ---------- */
85
+
86
+ #app-shell {
87
+ display: flex;
88
+ flex-direction: column;
89
+ height: 100vh;
90
+ width: 100%;
91
+ }
92
+
93
+ #update-banner {
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: center;
97
+ gap: 1rem;
98
+ padding: 0.55rem 1.25rem;
99
+ background: var(--accent);
100
+ color: #fff;
56
101
  font-size: 0.85rem;
57
- margin-bottom: 1rem;
102
+ flex-shrink: 0;
58
103
  }
59
104
 
60
- #dashboard {
105
+ .update-banner-actions {
61
106
  display: flex;
62
- flex-direction: column;
107
+ align-items: center;
108
+ gap: 0.5rem;
109
+ }
110
+
111
+ #update-banner-button {
112
+ background: #fff;
113
+ color: var(--accent);
114
+ padding: 0.3rem 0.85rem;
115
+ font-size: 0.82rem;
116
+ }
117
+
118
+ #update-banner-button:hover {
119
+ background: #f0f0ff;
120
+ }
121
+
122
+ #update-banner-dismiss {
123
+ background: transparent;
124
+ color: #fff;
125
+ padding: 0.2rem 0.5rem;
126
+ font-size: 1rem;
127
+ line-height: 1;
128
+ }
129
+
130
+ #update-banner-dismiss:hover {
131
+ background: rgba(255, 255, 255, 0.15);
132
+ }
133
+
134
+ #app-shell-body {
63
135
  flex: 1;
64
136
  min-height: 0;
137
+ display: flex;
65
138
  }
66
139
 
67
- header {
68
- margin-bottom: 0.5rem;
140
+ #icon-rail {
141
+ width: 76px;
142
+ flex-shrink: 0;
143
+ background: var(--rail-bg);
144
+ display: flex;
145
+ flex-direction: column;
146
+ align-items: center;
147
+ padding: 0.9rem 0 0.6rem;
148
+ gap: 0.3rem;
149
+ }
150
+
151
+ #rail-logo {
152
+ width: 34px;
153
+ height: 34px;
154
+ border-radius: 10px;
155
+ background: linear-gradient(135deg, var(--accent), #b45cff);
156
+ margin-bottom: 0.85rem;
157
+ flex-shrink: 0;
158
+ }
159
+
160
+ .rail-item {
161
+ width: 58px;
162
+ display: flex;
163
+ flex-direction: column;
164
+ align-items: center;
165
+ justify-content: center;
166
+ gap: 0.22rem;
167
+ padding: 0.5rem 0.2rem 0.4rem;
168
+ border-radius: 12px;
169
+ background: transparent;
170
+ border: none;
171
+ color: var(--rail-muted);
172
+ font-size: 0.66rem;
173
+ font-weight: 500;
174
+ cursor: pointer;
175
+ transition: background 0.12s ease, color 0.12s ease;
176
+ }
177
+
178
+ .rail-item svg {
179
+ width: 21px;
180
+ height: 21px;
181
+ }
182
+
183
+ .rail-item:hover {
184
+ background: rgba(255, 255, 255, 0.07);
185
+ color: #fff;
186
+ }
187
+
188
+ .rail-item.active {
189
+ background: rgba(255, 255, 255, 0.13);
190
+ color: #fff;
191
+ }
192
+
193
+ /* ---------- Generic page layout ---------- */
194
+
195
+ .page {
196
+ flex: 1;
197
+ min-width: 0;
198
+ display: flex;
199
+ flex-direction: column;
200
+ background: var(--bg);
201
+ }
202
+
203
+ .page-header {
204
+ padding: 1.15rem 1.75rem 1rem;
205
+ border-bottom: 1px solid var(--border);
206
+ flex-shrink: 0;
207
+ }
208
+
209
+ .page-header h1 {
210
+ margin: 0;
211
+ font-size: 1.15rem;
212
+ font-weight: 700;
213
+ letter-spacing: -0.01em;
214
+ }
215
+
216
+ .page-body {
217
+ flex: 1;
218
+ overflow-y: auto;
219
+ padding: 1.75rem;
220
+ }
221
+
222
+ .muted {
69
223
  color: var(--muted);
224
+ }
225
+
226
+ /* ---------- Home page ---------- */
227
+
228
+ .home-hero {
229
+ display: flex;
230
+ flex-direction: column;
231
+ align-items: center;
232
+ justify-content: center;
233
+ text-align: center;
234
+ gap: 0.4rem;
235
+ height: 100%;
236
+ max-width: 420px;
237
+ margin: 0 auto;
238
+ }
239
+
240
+ .avatar-lg {
241
+ width: 60px;
242
+ height: 60px;
243
+ font-size: 1.5rem;
244
+ margin-bottom: 0.4rem;
245
+ }
246
+
247
+ .home-hero h2 {
248
+ margin: 0;
249
+ font-size: 1.4rem;
250
+ font-weight: 700;
251
+ }
252
+
253
+ .home-hero p {
254
+ margin: 0 0 0.75rem;
255
+ line-height: 1.5;
256
+ }
257
+
258
+ /* ---------- Messages page ---------- */
259
+
260
+ #page-messages {
261
+ flex-direction: row;
262
+ }
263
+
264
+ #sidebar {
265
+ width: 260px;
266
+ flex-shrink: 0;
267
+ background: var(--sidebar-bg);
268
+ color: var(--sidebar-fg);
269
+ display: flex;
270
+ flex-direction: column;
271
+ padding: 0.5rem 0;
272
+ border-right: 1px solid rgba(255, 255, 255, 0.06);
273
+ }
274
+
275
+ #workspace-header {
276
+ padding: 0.85rem 1.1rem 0.75rem;
277
+ font-weight: 700;
278
+ font-size: 1rem;
279
+ color: #fff;
280
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
281
+ margin-bottom: 0.5rem;
282
+ letter-spacing: -0.01em;
283
+ }
284
+
285
+ #nav {
286
+ display: flex;
287
+ flex-direction: column;
288
+ padding: 0 0.6rem;
289
+ gap: 0.1rem;
290
+ }
291
+
292
+ .nav-section-label {
293
+ font-size: 0.7rem;
294
+ text-transform: uppercase;
295
+ letter-spacing: 0.05em;
296
+ font-weight: 600;
297
+ color: var(--sidebar-muted);
298
+ padding: 0.9rem 0.6rem 0.35rem;
299
+ }
300
+
301
+ .nav-item {
302
+ display: flex;
303
+ align-items: center;
304
+ gap: 0.6rem;
305
+ width: 100%;
306
+ padding: 0.4rem 0.6rem;
307
+ border: none;
308
+ border-radius: 7px;
309
+ background: transparent;
310
+ color: var(--sidebar-fg);
70
311
  font-size: 0.9rem;
312
+ text-align: left;
313
+ cursor: pointer;
314
+ transition: background 0.12s ease;
315
+ }
316
+
317
+ .nav-item:hover {
318
+ background: var(--sidebar-hover);
319
+ }
320
+
321
+ .nav-item.active {
322
+ background: var(--sidebar-active);
323
+ color: #fff;
324
+ font-weight: 600;
325
+ }
326
+
327
+ .nav-hash {
328
+ color: var(--sidebar-muted);
329
+ font-weight: 600;
330
+ width: 1rem;
331
+ text-align: center;
332
+ }
333
+
334
+ .avatar-wrap {
335
+ position: relative;
336
+ flex-shrink: 0;
337
+ display: inline-flex;
338
+ }
339
+
340
+ .avatar {
341
+ width: 26px;
342
+ height: 26px;
343
+ border-radius: 50%;
344
+ background: linear-gradient(135deg, var(--accent), #b45cff);
345
+ color: #fff;
346
+ font-weight: 700;
347
+ font-size: 0.72rem;
348
+ display: flex;
349
+ align-items: center;
350
+ justify-content: center;
351
+ flex-shrink: 0;
352
+ }
353
+
354
+ #channel-ceo .avatar,
355
+ #typing-indicator .avatar {
356
+ width: 34px;
357
+ height: 34px;
358
+ font-size: 0.92rem;
359
+ }
360
+
361
+ .status-dot {
362
+ position: absolute;
363
+ bottom: -1px;
364
+ right: -1px;
365
+ width: 11px;
366
+ height: 11px;
367
+ border-radius: 50%;
368
+ background: var(--offline);
369
+ border: 2.5px solid var(--sidebar-bg);
370
+ }
371
+
372
+ .status-dot.online {
373
+ background: var(--online);
374
+ }
375
+
376
+ .status-dot.typing {
377
+ background: var(--typing);
378
+ animation: pulse 1.1s ease-in-out infinite;
379
+ }
380
+
381
+ @keyframes pulse {
382
+ 0%, 100% { opacity: 1; }
383
+ 50% { opacity: 0.45; }
384
+ }
385
+
386
+ #main-pane {
387
+ flex: 1;
388
+ min-width: 0;
389
+ display: flex;
390
+ flex-direction: column;
391
+ background: var(--bg);
392
+ }
393
+
394
+ #main-header {
395
+ display: flex;
396
+ align-items: center;
397
+ justify-content: space-between;
398
+ padding: 0.9rem 1.5rem;
399
+ border-bottom: 1px solid var(--border);
400
+ flex-shrink: 0;
401
+ }
402
+
403
+ #header-title-group {
404
+ display: flex;
405
+ flex-direction: column;
406
+ line-height: 1.3;
407
+ }
408
+
409
+ #channel-title {
410
+ font-weight: 700;
411
+ font-size: 1rem;
412
+ letter-spacing: -0.01em;
413
+ }
414
+
415
+ #channel-subtitle {
416
+ font-size: 0.78rem;
417
+ color: var(--muted);
418
+ }
419
+
420
+ #channel-general,
421
+ #channel-ceo {
422
+ flex: 1;
423
+ min-height: 0;
424
+ display: flex;
425
+ flex-direction: column;
426
+ }
427
+
428
+ .empty-state {
429
+ margin: auto;
430
+ color: var(--muted);
431
+ text-align: center;
71
432
  }
72
433
 
73
434
  #messages {
74
435
  flex: 1;
75
436
  overflow-y: auto;
76
- border: 1px solid var(--border);
437
+ padding: 0.5rem 1.5rem 1rem;
438
+ }
439
+
440
+ .msg-row {
441
+ display: flex;
442
+ gap: 0.85rem;
443
+ padding: 0.5rem 0.5rem;
444
+ margin: 0 -0.5rem;
77
445
  border-radius: 8px;
78
- padding: 1rem;
79
- margin-bottom: 1rem;
446
+ transition: background 0.1s ease;
447
+ }
448
+
449
+ .msg-row:hover {
450
+ background: var(--bg-subtle);
80
451
  }
81
452
 
82
- .msg {
83
- margin-bottom: 0.75rem;
453
+ .msg-content {
454
+ flex: 1;
455
+ min-width: 0;
456
+ }
457
+
458
+ .msg-meta {
459
+ font-weight: 700;
460
+ font-size: 0.88rem;
461
+ }
462
+
463
+ .msg-meta .msg-time {
464
+ font-weight: 400;
465
+ color: var(--muted);
466
+ font-size: 0.72rem;
467
+ margin-left: 0.4rem;
468
+ }
469
+
470
+ .msg-text {
84
471
  white-space: pre-wrap;
85
- line-height: 1.4;
472
+ line-height: 1.5;
86
473
  }
87
474
 
88
- .msg.user {
89
- font-weight: 600;
475
+ .msg-text code {
476
+ background: var(--bg-subtle);
477
+ padding: 0.1rem 0.35rem;
478
+ border-radius: 4px;
479
+ font-size: 0.9em;
90
480
  }
91
481
 
92
- .msg.tool {
482
+ .msg-text pre {
483
+ background: var(--bg-subtle);
484
+ padding: 0.75rem 1rem;
485
+ border-radius: 8px;
486
+ overflow-x: auto;
487
+ margin: 0.4rem 0;
488
+ }
489
+
490
+ .msg-text pre code {
491
+ background: none;
492
+ padding: 0;
493
+ }
494
+
495
+ .msg-row.tool .msg-text {
93
496
  color: var(--muted);
94
497
  font-style: italic;
95
498
  font-size: 0.85rem;
96
499
  }
97
500
 
98
- .msg.error {
99
- color: #d33;
501
+ .msg-row.error .msg-text {
502
+ color: #e5484d;
100
503
  }
101
504
 
102
- #chat-form {
505
+ #typing-indicator {
506
+ display: flex;
507
+ align-items: center;
508
+ gap: 0.75rem;
509
+ padding: 0.3rem 1.5rem 0.75rem;
510
+ }
511
+
512
+ .typing-dots {
513
+ display: inline-flex;
514
+ gap: 0.25rem;
515
+ padding: 0.5rem 0.75rem;
516
+ border-radius: 14px;
517
+ background: var(--bg-subtle);
518
+ }
519
+
520
+ .typing-dots i {
521
+ width: 6px;
522
+ height: 6px;
523
+ border-radius: 50%;
524
+ background: var(--muted);
525
+ display: inline-block;
526
+ animation: typing-bounce 1.2s ease-in-out infinite;
527
+ }
528
+
529
+ .typing-dots i:nth-child(2) { animation-delay: 0.15s; }
530
+ .typing-dots i:nth-child(3) { animation-delay: 0.3s; }
531
+
532
+ @keyframes typing-bounce {
533
+ 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
534
+ 30% { transform: translateY(-4px); opacity: 1; }
535
+ }
536
+
537
+ .banner {
538
+ background: var(--banner-bg);
539
+ color: var(--banner-fg);
540
+ padding: 0.6rem 1rem;
541
+ border-radius: 8px;
542
+ font-size: 0.82rem;
543
+ margin: 1rem 1.5rem 0.25rem;
544
+ }
545
+
546
+ #chat-options {
103
547
  display: flex;
104
548
  gap: 0.5rem;
549
+ padding: 0 1.5rem 0.6rem;
550
+ flex-shrink: 0;
551
+ }
552
+
553
+ select {
554
+ padding: 0.35rem 0.6rem;
555
+ border-radius: 7px;
556
+ border: 1px solid var(--border);
557
+ background: var(--bg-subtle);
558
+ color: var(--muted);
559
+ font-size: 0.78rem;
560
+ font-family: inherit;
561
+ cursor: pointer;
562
+ }
563
+
564
+ select:focus {
565
+ outline: none;
566
+ border-color: var(--accent);
567
+ }
568
+
569
+ .msg-model-badge {
570
+ color: var(--muted);
571
+ font-weight: 400;
572
+ font-size: 0.72rem;
573
+ margin-left: 0.4rem;
574
+ }
575
+
576
+ #chat-form {
577
+ display: flex;
578
+ gap: 0.6rem;
579
+ padding: 0.9rem 1.5rem;
580
+ border-top: 1px solid var(--border);
581
+ flex-shrink: 0;
105
582
  }
106
583
 
107
584
  #chat-input {
108
585
  flex: 1;
109
- padding: 0.6rem 0.8rem;
110
- border-radius: 6px;
586
+ padding: 0.65rem 0.9rem;
587
+ border-radius: 8px;
111
588
  border: 1px solid var(--border);
112
589
  background: var(--bg);
113
590
  color: var(--fg);
114
- font-size: 1rem;
591
+ font-size: 0.95rem;
592
+ }
593
+
594
+ #chat-input:focus {
595
+ outline: none;
596
+ border-color: var(--accent);
115
597
  }
116
598
 
117
599
  button {
118
- padding: 0.6rem 1.2rem;
119
- border-radius: 6px;
600
+ padding: 0.6rem 1.1rem;
601
+ border-radius: 8px;
120
602
  border: none;
121
603
  background: var(--accent);
122
- color: white;
123
- font-size: 1rem;
604
+ color: var(--accent-fg);
605
+ font-size: 0.92rem;
606
+ font-weight: 600;
124
607
  cursor: pointer;
608
+ transition: background 0.12s ease;
609
+ }
610
+
611
+ button:hover {
612
+ background: var(--accent-hover);
125
613
  }
126
614
 
127
615
  button:disabled {
128
616
  opacity: 0.5;
129
617
  cursor: default;
130
618
  }
619
+
620
+ /* ---------- Profile page ---------- */
621
+
622
+ #page-profile .page-body {
623
+ max-width: 460px;
624
+ }
625
+
626
+ #profile-form {
627
+ display: flex;
628
+ flex-direction: column;
629
+ gap: 0.4rem;
630
+ }
631
+
632
+ #profile-form label {
633
+ font-size: 0.83rem;
634
+ font-weight: 600;
635
+ color: var(--muted);
636
+ margin-top: 0.65rem;
637
+ }
638
+
639
+ #profile-form input,
640
+ #profile-form select,
641
+ #profile-form textarea {
642
+ padding: 0.65rem 0.85rem;
643
+ border-radius: 8px;
644
+ border: 1px solid var(--border);
645
+ background: var(--bg);
646
+ color: var(--fg);
647
+ font-size: 0.95rem;
648
+ font-family: inherit;
649
+ }
650
+
651
+ #profile-form input:focus,
652
+ #profile-form select:focus,
653
+ #profile-form textarea:focus {
654
+ outline: none;
655
+ border-color: var(--accent);
656
+ }
657
+
658
+ #profile-form textarea {
659
+ min-height: 5.5rem;
660
+ resize: vertical;
661
+ }
662
+
663
+ .profile-form-buttons {
664
+ display: flex;
665
+ align-items: center;
666
+ gap: 0.75rem;
667
+ margin-top: 1.1rem;
668
+ }
669
+
670
+ #profile-saved-hint {
671
+ color: var(--online);
672
+ font-size: 0.85rem;
673
+ font-weight: 600;
674
+ }
675
+
676
+ /* ---------- Settings page ---------- */
677
+
678
+ .settings-row {
679
+ display: flex;
680
+ justify-content: space-between;
681
+ align-items: baseline;
682
+ gap: 1.5rem;
683
+ padding: 0.95rem 0;
684
+ border-bottom: 1px solid var(--border);
685
+ }
686
+
687
+ .settings-label {
688
+ color: var(--muted);
689
+ font-size: 0.88rem;
690
+ flex-shrink: 0;
691
+ }
692
+
693
+ .settings-value {
694
+ font-size: 0.88rem;
695
+ text-align: right;
696
+ word-break: break-all;
697
+ }
698
+
699
+ code.settings-value {
700
+ font-family: ui-monospace, "SF Mono", Consolas, monospace;
701
+ font-size: 0.78rem;
702
+ background: var(--bg-subtle);
703
+ padding: 0.3rem 0.5rem;
704
+ border-radius: 6px;
705
+ }