agent-knowledge 1.0.4 → 1.0.6

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 (3) hide show
  1. package/dist/ui/app.js +953 -953
  2. package/dist/ui/styles.css +1511 -1509
  3. package/package.json +1 -1
package/dist/ui/styles.css CHANGED
@@ -1,1509 +1,1511 @@
1
- /* ═══════════════════════════════════════════════════════════════════════════
2
- agent-knowledge — Dashboard Styles (MD3 Design Language)
3
- Matches agent-comm and agent-tasks design tokens exactly.
4
- ═══════════════════════════════════════════════════════════════════════════ */
5
-
6
- /* ── Reset ─────────────────────────────────────────────────────────────── */
7
- *,
8
- *::before,
9
- *::after {
10
- box-sizing: border-box;
11
- margin: 0;
12
- padding: 0;
13
- }
14
-
15
- /* ── Design Tokens (Light) ─────────────────────────────────────────────── */
16
- :root {
17
- --bg: #ffffff;
18
- --bg-surface: #f5f7f9;
19
- --bg-elevated: #edf0f4;
20
- --bg-hover: #e4e8ed;
21
- --bg-inset: #dde3e9;
22
- --border: #c8d1da;
23
- --border-light: #dde3e9;
24
- --text: #1c2a33;
25
- --text-secondary: #3d5263;
26
- --text-muted: #5a6b78;
27
- --text-dim: #8895a0;
28
- --accent: #5d8da8;
29
- --accent-hover: #4e7a93;
30
- --accent-dim: rgba(93, 141, 168, 0.15);
31
- --accent-solid: #243742;
32
- --accent-glow: rgba(93, 141, 168, 0.35);
33
- --green: #1a7f37;
34
- --green-dim: rgba(26, 127, 55, 0.12);
35
- --yellow: #9a6700;
36
- --yellow-dim: rgba(154, 103, 0, 0.12);
37
- --orange: #bc4c00;
38
- --orange-dim: rgba(188, 76, 0, 0.12);
39
- --red: #cf222e;
40
- --red-dim: rgba(207, 34, 46, 0.12);
41
- --purple: #6e78a8;
42
- --purple-dim: rgba(110, 120, 168, 0.12);
43
- --blue: #0969da;
44
- --blue-dim: rgba(9, 105, 218, 0.12);
45
- --radius: 12px;
46
- --radius-sm: 8px;
47
- --radius-lg: 16px;
48
- --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
49
- --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
50
- --shadow-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
51
- --shadow-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
52
- --shadow-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
53
- --shadow-hover: 0px 2px 4px 0px rgba(0, 0, 0, 0.25), 0px 4px 12px 4px rgba(0, 0, 0, 0.15);
54
- --shadow-panel: -2px 0px 8px 0px rgba(0, 0, 0, 0.3), -4px 0px 16px 2px rgba(0, 0, 0, 0.15);
55
- --focus-ring: rgba(93, 141, 168, 0.35);
56
- --transition-fast: 0.15s ease;
57
- --transition-normal: 0.2s ease;
58
- --transition-slow: 0.3s ease;
59
- --panel-width: 560px;
60
- }
61
-
62
- /* ── Dark Theme ────────────────────────────────────────────────────────── */
63
- [data-theme='dark'] {
64
- --bg: #0d1117;
65
- --bg-surface: #161b22;
66
- --bg-elevated: #1c2128;
67
- --bg-hover: #262c36;
68
- --bg-inset: #2d333b;
69
- --border: #373e47;
70
- --border-light: #2d333b;
71
- --text: #e6edf3;
72
- --text-secondary: #b1bac4;
73
- --text-muted: #8b949e;
74
- --text-dim: #6e7681;
75
- --accent: #5d8da8;
76
- --accent-hover: #79a8c0;
77
- --accent-dim: rgba(93, 141, 168, 0.2);
78
- --accent-solid: #a8c8d8;
79
- --accent-glow: rgba(93, 141, 168, 0.4);
80
- --green: #3fb950;
81
- --green-dim: rgba(63, 185, 80, 0.15);
82
- --yellow: #d29922;
83
- --yellow-dim: rgba(210, 153, 34, 0.15);
84
- --orange: #db6d28;
85
- --orange-dim: rgba(219, 109, 40, 0.15);
86
- --red: #f85149;
87
- --red-dim: rgba(248, 81, 73, 0.15);
88
- --purple: #8e9ad0;
89
- --purple-dim: rgba(142, 154, 208, 0.15);
90
- --blue: #58a6ff;
91
- --blue-dim: rgba(88, 166, 255, 0.15);
92
- --shadow-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.6), 0px 1px 3px 1px rgba(0, 0, 0, 0.3);
93
- --shadow-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.6), 0px 2px 6px 2px rgba(0, 0, 0, 0.3);
94
- --shadow-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.6), 0px 4px 8px 3px rgba(0, 0, 0, 0.3);
95
- --shadow-hover: 0px 2px 4px 0px rgba(0, 0, 0, 0.5), 0px 4px 12px 4px rgba(0, 0, 0, 0.3);
96
- --shadow-panel: -2px 0px 8px 0px rgba(0, 0, 0, 0.6), -4px 0px 16px 2px rgba(0, 0, 0, 0.3);
97
- }
98
-
99
- /* ── Base ──────────────────────────────────────────────────────────────── */
100
- html {
101
- height: 100%;
102
- }
103
-
104
- body {
105
- font-family: var(--font-sans);
106
- font-size: 14px;
107
- line-height: 1.5;
108
- color: var(--text);
109
- background: var(--bg);
110
- height: 100%;
111
- overflow: hidden;
112
- -webkit-font-smoothing: antialiased;
113
- }
114
-
115
- .material-symbols-outlined {
116
- font-variation-settings:
117
- 'FILL' 0,
118
- 'wght' 400,
119
- 'GRAD' 0,
120
- 'opsz' 24;
121
- }
122
-
123
- /* ── Scrollbar ─────────────────────────────────────────────────────────── */
124
- ::-webkit-scrollbar {
125
- width: 6px;
126
- height: 6px;
127
- }
128
- ::-webkit-scrollbar-track {
129
- background: transparent;
130
- }
131
- ::-webkit-scrollbar-thumb {
132
- background: var(--border);
133
- border-radius: 3px;
134
- }
135
- ::-webkit-scrollbar-thumb:hover {
136
- background: var(--accent);
137
- }
138
-
139
- /* ── Header ────────────────────────────────────────────────────────────── */
140
- header {
141
- display: flex;
142
- align-items: center;
143
- justify-content: space-between;
144
- padding: 8px 16px;
145
- background: var(--bg-surface);
146
- border-bottom: 1px solid var(--border);
147
- flex-shrink: 0;
148
- z-index: 10;
149
- }
150
-
151
- .header-left {
152
- display: flex;
153
- align-items: center;
154
- gap: 8px;
155
- }
156
-
157
- .header-right {
158
- display: flex;
159
- align-items: center;
160
- gap: 12px;
161
- }
162
-
163
- .brand-icon {
164
- font-size: 24px;
165
- color: var(--accent);
166
- }
167
-
168
- h1 {
169
- font-family: var(--font-mono);
170
- font-size: 17px;
171
- font-weight: 700;
172
- color: var(--accent-solid);
173
- letter-spacing: -0.3px;
174
- }
175
-
176
- .version {
177
- font-family: var(--font-mono);
178
- font-size: 10px;
179
- font-weight: 500;
180
- color: var(--text-dim);
181
- background: var(--bg-elevated);
182
- padding: 2px 6px;
183
- border-radius: 10px;
184
- letter-spacing: 0.3px;
185
- }
186
-
187
- /* ── Connection Status ─────────────────────────────────────────────────── */
188
- .status-badge {
189
- display: inline-flex;
190
- align-items: center;
191
- gap: 4px;
192
- font-size: 11px;
193
- font-weight: 500;
194
- padding: 2px 8px;
195
- border-radius: 10px;
196
- }
197
-
198
- .status-badge::before {
199
- content: '';
200
- width: 6px;
201
- height: 6px;
202
- border-radius: 50%;
203
- flex-shrink: 0;
204
- }
205
-
206
- .status-badge.connected {
207
- color: var(--green);
208
- }
209
- .status-badge.connected::before {
210
- background: var(--green);
211
- }
212
- .status-badge.disconnected {
213
- color: var(--red);
214
- }
215
- .status-badge.disconnected::before {
216
- background: var(--red);
217
- }
218
-
219
- /* ── Stats ─────────────────────────────────────────────────────────────── */
220
- .stats {
221
- display: flex;
222
- gap: 8px;
223
- }
224
-
225
- .stat-badge {
226
- display: inline-flex;
227
- align-items: center;
228
- gap: 4px;
229
- font-size: 12px;
230
- font-weight: 500;
231
- color: var(--text-muted);
232
- background: var(--bg-elevated);
233
- padding: 4px 10px;
234
- border-radius: var(--radius-sm);
235
- }
236
-
237
- .stat-badge .stat-icon {
238
- font-size: 16px;
239
- color: var(--accent);
240
- }
241
-
242
- .stat-badge .stat-value {
243
- font-family: var(--font-mono);
244
- font-weight: 600;
245
- color: var(--text);
246
- }
247
-
248
- /* ── Icon Button ───────────────────────────────────────────────────────── */
249
- .icon-btn {
250
- display: inline-flex;
251
- align-items: center;
252
- justify-content: center;
253
- width: 32px;
254
- height: 32px;
255
- border: none;
256
- background: transparent;
257
- color: var(--text-muted);
258
- border-radius: var(--radius-sm);
259
- cursor: pointer;
260
- transition:
261
- background var(--transition-fast),
262
- color var(--transition-fast);
263
- }
264
-
265
- .icon-btn:hover {
266
- background: var(--bg-hover);
267
- color: var(--text);
268
- }
269
-
270
- .icon-btn:focus-visible {
271
- outline: 2px solid var(--accent);
272
- outline-offset: 1px;
273
- }
274
-
275
- /* ── Tab Bar ───────────────────────────────────────────────────────────── */
276
- .tab-bar {
277
- display: flex;
278
- background: var(--bg-surface);
279
- border-bottom: 1px solid var(--border);
280
- padding: 0 16px;
281
- gap: 0;
282
- flex-shrink: 0;
283
- }
284
-
285
- .tab {
286
- display: inline-flex;
287
- align-items: center;
288
- gap: 6px;
289
- padding: 10px 16px;
290
- font-size: 13px;
291
- font-weight: 500;
292
- color: var(--text-muted);
293
- background: none;
294
- border: none;
295
- border-bottom: 2px solid transparent;
296
- cursor: pointer;
297
- transition:
298
- color var(--transition-fast),
299
- border-color var(--transition-fast);
300
- white-space: nowrap;
301
- }
302
-
303
- .tab:hover {
304
- color: var(--text);
305
- background: var(--bg-hover);
306
- }
307
-
308
- .tab.active {
309
- color: var(--accent);
310
- border-bottom-color: var(--accent);
311
- font-weight: 600;
312
- }
313
-
314
- .tab-icon {
315
- font-size: 20px;
316
- }
317
-
318
- /* ── Content Layout ────────────────────────────────────────────────────── */
319
- .content-wrapper {
320
- display: flex;
321
- flex: 1;
322
- overflow: hidden;
323
- min-height: 0;
324
- }
325
-
326
- #content {
327
- flex: 1;
328
- overflow-y: auto;
329
- padding: 20px 24px;
330
- min-width: 0;
331
- }
332
-
333
- .view {
334
- display: none;
335
- }
336
- .view.active {
337
- display: block;
338
- }
339
-
340
- .view-header {
341
- display: flex;
342
- align-items: center;
343
- justify-content: space-between;
344
- margin-bottom: 16px;
345
- }
346
-
347
- .view-header h2 {
348
- display: flex;
349
- align-items: center;
350
- gap: 8px;
351
- font-size: 17px;
352
- font-weight: 700;
353
- color: var(--accent-solid);
354
- }
355
-
356
- .view-icon {
357
- font-size: 22px;
358
- color: var(--accent);
359
- }
360
-
361
- .view-actions {
362
- display: flex;
363
- gap: 8px;
364
- }
365
-
366
- /* ── Filter Chips ──────────────────────────────────────────────────────── */
367
- .filter-chips {
368
- display: flex;
369
- flex-wrap: wrap;
370
- gap: 6px;
371
- margin-bottom: 16px;
372
- }
373
-
374
- .chip {
375
- display: inline-flex;
376
- align-items: center;
377
- gap: 4px;
378
- padding: 5px 12px;
379
- font-size: 12px;
380
- font-weight: 500;
381
- color: var(--text-muted);
382
- background: var(--bg-elevated);
383
- border: 1px solid transparent;
384
- border-radius: var(--radius-sm);
385
- cursor: pointer;
386
- transition: all var(--transition-fast);
387
- white-space: nowrap;
388
- }
389
-
390
- .chip:hover {
391
- background: var(--bg-hover);
392
- color: var(--text);
393
- }
394
-
395
- .chip.active {
396
- background: var(--accent-dim);
397
- color: var(--accent);
398
- border-color: var(--accent);
399
- font-weight: 600;
400
- }
401
-
402
- .chip-icon {
403
- font-size: 16px;
404
- }
405
-
406
- /* ── Search Input ──────────────────────────────────────────────────────── */
407
- .search-bar {
408
- position: relative;
409
- margin-bottom: 16px;
410
- }
411
-
412
- .search-input-icon {
413
- position: absolute;
414
- left: 12px;
415
- top: 50%;
416
- transform: translateY(-50%);
417
- font-size: 20px;
418
- color: var(--text-dim);
419
- pointer-events: none;
420
- }
421
-
422
- .search-input {
423
- width: 100%;
424
- height: 40px;
425
- padding: 0 12px 0 40px;
426
- font-size: 14px;
427
- font-family: var(--font-sans);
428
- color: var(--text);
429
- background: var(--bg-elevated);
430
- border: 1px solid var(--border-light);
431
- border-radius: var(--radius-sm);
432
- outline: none;
433
- transition:
434
- border-color var(--transition-fast),
435
- box-shadow var(--transition-fast);
436
- }
437
-
438
- .search-input::placeholder {
439
- color: var(--text-dim);
440
- }
441
-
442
- .search-input:focus {
443
- border-color: var(--accent);
444
- box-shadow: 0 0 0 3px var(--focus-ring);
445
- }
446
-
447
- /* ── Search Controls ───────────────────────────────────────────────────── */
448
- .search-controls {
449
- display: flex;
450
- align-items: center;
451
- margin-bottom: 16px;
452
- flex-wrap: wrap;
453
- gap: 8px;
454
- }
455
- .search-controls .mode-toggle {
456
- margin-left: auto;
457
- }
458
-
459
- .mode-toggle {
460
- display: flex;
461
- gap: 0;
462
- border: 1px solid var(--border);
463
- border-radius: var(--radius-sm);
464
- overflow: hidden;
465
- }
466
-
467
- .mode-btn {
468
- display: inline-flex;
469
- align-items: center;
470
- gap: 4px;
471
- padding: 5px 12px;
472
- font-size: 12px;
473
- font-weight: 500;
474
- color: var(--text-muted);
475
- background: var(--bg-elevated);
476
- border: none;
477
- cursor: pointer;
478
- transition: all var(--transition-fast);
479
- }
480
-
481
- .mode-btn:hover {
482
- background: var(--bg-hover);
483
- color: var(--text);
484
- }
485
-
486
- .mode-btn.active {
487
- background: var(--accent-dim);
488
- color: var(--accent);
489
- font-weight: 600;
490
- }
491
-
492
- .mode-btn .material-symbols-outlined {
493
- font-size: 16px;
494
- }
495
-
496
- /* ── Card Grid ─────────────────────────────────────────────────────────── */
497
- .card-grid {
498
- display: grid;
499
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
500
- gap: 12px;
501
- }
502
-
503
- /* ── Knowledge Card ────────────────────────────────────────────────────── */
504
- .knowledge-card {
505
- background: var(--bg-elevated);
506
- border: 1px solid transparent;
507
- border-radius: var(--radius);
508
- padding: 14px 16px;
509
- cursor: pointer;
510
- box-shadow: var(--shadow-1);
511
- transition:
512
- transform var(--transition-fast),
513
- box-shadow var(--transition-fast),
514
- border-color var(--transition-fast);
515
- }
516
-
517
- .knowledge-card:hover {
518
- transform: translateY(-1px);
519
- box-shadow: var(--shadow-hover);
520
- border-color: var(--accent);
521
- }
522
-
523
- .knowledge-card .card-title {
524
- font-size: 14px;
525
- font-weight: 600;
526
- color: var(--text);
527
- margin-bottom: 6px;
528
- line-height: 1.3;
529
- }
530
-
531
- .knowledge-card .card-category {
532
- display: inline-flex;
533
- align-items: center;
534
- gap: 3px;
535
- font-size: 11px;
536
- font-weight: 500;
537
- padding: 2px 8px;
538
- border-radius: 10px;
539
- margin-bottom: 8px;
540
- }
541
-
542
- .card-category[data-cat='projects'] {
543
- background: var(--blue-dim);
544
- color: var(--blue);
545
- }
546
- .card-category[data-cat='people'] {
547
- background: var(--purple-dim);
548
- color: var(--purple);
549
- }
550
- .card-category[data-cat='decisions'] {
551
- background: var(--orange-dim);
552
- color: var(--orange);
553
- }
554
- .card-category[data-cat='workflows'] {
555
- background: var(--green-dim);
556
- color: var(--green);
557
- }
558
- .card-category[data-cat='notes'] {
559
- background: var(--yellow-dim);
560
- color: var(--yellow);
561
- }
562
-
563
- .knowledge-card .card-tags {
564
- display: flex;
565
- flex-wrap: wrap;
566
- gap: 4px;
567
- margin-bottom: 6px;
568
- }
569
-
570
- .card-tag {
571
- font-size: 10px;
572
- font-weight: 500;
573
- padding: 1px 6px;
574
- border-radius: 6px;
575
- background: var(--bg-hover);
576
- color: var(--text-muted);
577
- }
578
-
579
- .knowledge-card .card-date {
580
- font-size: 11px;
581
- color: var(--text-dim);
582
- font-family: var(--font-mono);
583
- }
584
-
585
- /* ── Results List ──────────────────────────────────────────────────────── */
586
- .results-list {
587
- display: flex;
588
- flex-direction: column;
589
- gap: 0;
590
- }
591
-
592
- .result-item {
593
- padding: 12px 16px;
594
- border-bottom: 1px solid var(--border-light);
595
- cursor: pointer;
596
- transition: background var(--transition-fast);
597
- }
598
-
599
- .result-item:hover {
600
- background: var(--bg-hover);
601
- }
602
-
603
- .result-item:last-child {
604
- border-bottom: none;
605
- }
606
-
607
- .result-meta {
608
- display: flex;
609
- align-items: center;
610
- gap: 8px;
611
- margin-bottom: 6px;
612
- flex-wrap: wrap;
613
- }
614
-
615
- .result-project {
616
- font-size: 11px;
617
- font-weight: 600;
618
- font-family: var(--font-mono);
619
- color: var(--accent);
620
- background: var(--accent-dim);
621
- padding: 1px 6px;
622
- border-radius: 6px;
623
- }
624
-
625
- .result-date {
626
- font-size: 11px;
627
- color: var(--text-dim);
628
- font-family: var(--font-mono);
629
- }
630
-
631
- /* ── Role Badge ────────────────────────────────────────────────────────── */
632
- .role-badge {
633
- display: inline-flex;
634
- align-items: center;
635
- gap: 2px;
636
- font-size: 10px;
637
- font-weight: 600;
638
- padding: 1px 6px;
639
- border-radius: 6px;
640
- text-transform: uppercase;
641
- letter-spacing: 0.3px;
642
- }
643
-
644
- .role-badge[data-role='user'] {
645
- background: var(--accent-dim);
646
- color: var(--accent);
647
- }
648
- .role-badge[data-role='assistant'] {
649
- background: var(--purple-dim);
650
- color: var(--purple);
651
- }
652
- .role-badge[data-role='tool_use'] {
653
- background: var(--orange-dim);
654
- color: var(--orange);
655
- }
656
- .role-badge[data-role='tool_result'] {
657
- background: var(--orange-dim);
658
- color: var(--orange);
659
- }
660
-
661
- /* ── Score Bar ─────────────────────────────────────────────────────────── */
662
- .score-container {
663
- display: flex;
664
- align-items: center;
665
- gap: 6px;
666
- }
667
-
668
- .score-bar {
669
- width: 60px;
670
- height: 4px;
671
- background: var(--bg-inset);
672
- border-radius: 2px;
673
- overflow: hidden;
674
- }
675
-
676
- .score-bar-fill {
677
- height: 100%;
678
- background: var(--green);
679
- border-radius: 2px;
680
- transition: width var(--transition-normal);
681
- }
682
-
683
- .score-value {
684
- font-size: 10px;
685
- font-weight: 600;
686
- font-family: var(--font-mono);
687
- color: var(--text-dim);
688
- }
689
-
690
- /* ── Recency Tag ──────────────────────────────────────────────────────── */
691
- .recency-tag {
692
- font-size: 9px;
693
- font-weight: 500;
694
- margin-left: 4px;
695
- padding: 0 3px;
696
- border-radius: 3px;
697
- background: var(--orange-dim);
698
- color: var(--orange);
699
- vertical-align: middle;
700
- }
701
-
702
- /* ── Scope Badge ───────────────────────────────────────────────────────── */
703
- .scope-badge {
704
- font-size: 10px;
705
- font-weight: 600;
706
- padding: 1px 6px;
707
- border-radius: 6px;
708
- text-transform: uppercase;
709
- letter-spacing: 0.3px;
710
- }
711
-
712
- .scope-badge[data-scope='errors'] {
713
- background: var(--red-dim);
714
- color: var(--red);
715
- }
716
- .scope-badge[data-scope='plans'] {
717
- background: var(--blue-dim);
718
- color: var(--blue);
719
- }
720
- .scope-badge[data-scope='configs'] {
721
- background: var(--orange-dim);
722
- color: var(--orange);
723
- }
724
- .scope-badge[data-scope='tools'] {
725
- background: var(--purple-dim);
726
- color: var(--purple);
727
- }
728
- .scope-badge[data-scope='files'] {
729
- background: var(--green-dim);
730
- color: var(--green);
731
- }
732
- .scope-badge[data-scope='decisions'] {
733
- background: var(--yellow-dim);
734
- color: var(--yellow);
735
- }
736
-
737
- /* ── Excerpt ───────────────────────────────────────────────────────────── */
738
- .result-excerpt {
739
- font-size: 13px;
740
- font-family: var(--font-mono);
741
- color: var(--text-secondary);
742
- line-height: 1.5;
743
- white-space: pre-wrap;
744
- word-break: break-word;
745
- background: var(--bg-surface);
746
- padding: 8px 12px;
747
- border-radius: var(--radius-sm);
748
- margin-top: 6px;
749
- border-left: 3px solid var(--accent);
750
- }
751
-
752
- .result-excerpt mark {
753
- background: var(--yellow-dim);
754
- color: var(--yellow);
755
- padding: 0 2px;
756
- border-radius: 2px;
757
- }
758
-
759
- /* ── Session Cards ─────────────────────────────────────────────────────── */
760
- .sessions-list {
761
- display: flex;
762
- flex-direction: column;
763
- gap: 8px;
764
- }
765
-
766
- .session-card {
767
- background: var(--bg-elevated);
768
- border: 1px solid transparent;
769
- border-radius: var(--radius);
770
- padding: 12px 16px;
771
- cursor: pointer;
772
- box-shadow: var(--shadow-1);
773
- transition:
774
- transform var(--transition-fast),
775
- box-shadow var(--transition-fast),
776
- border-color var(--transition-fast);
777
- }
778
-
779
- .session-card:hover {
780
- transform: translateY(-1px);
781
- box-shadow: var(--shadow-hover);
782
- border-color: var(--accent);
783
- }
784
-
785
- .session-card .session-header {
786
- display: flex;
787
- align-items: center;
788
- justify-content: space-between;
789
- margin-bottom: 6px;
790
- }
791
-
792
- .session-card .session-project {
793
- font-size: 12px;
794
- font-weight: 600;
795
- font-family: var(--font-mono);
796
- color: var(--accent);
797
- }
798
-
799
- .session-card .session-date {
800
- font-size: 11px;
801
- color: var(--text-dim);
802
- font-family: var(--font-mono);
803
- }
804
-
805
- .session-card .session-meta {
806
- display: flex;
807
- gap: 12px;
808
- margin-bottom: 6px;
809
- }
810
-
811
- .session-card .session-meta-item {
812
- display: flex;
813
- align-items: center;
814
- gap: 4px;
815
- font-size: 11px;
816
- color: var(--text-muted);
817
- }
818
-
819
- .session-card .session-meta-item .material-symbols-outlined {
820
- font-size: 14px;
821
- }
822
-
823
- .session-card .session-preview {
824
- font-size: 12px;
825
- color: var(--text-secondary);
826
- line-height: 1.4;
827
- overflow: hidden;
828
- text-overflow: ellipsis;
829
- white-space: nowrap;
830
- }
831
-
832
- /* ── Filter Select ─────────────────────────────────────────────────────── */
833
- .filter-select {
834
- height: 32px;
835
- padding: 0 28px 0 10px;
836
- font-size: 12px;
837
- font-family: var(--font-sans);
838
- color: var(--text);
839
- background: var(--bg-elevated);
840
- border: 1px solid var(--border-light);
841
- border-radius: var(--radius-sm);
842
- outline: none;
843
- cursor: pointer;
844
- appearance: none;
845
- 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' fill='none' stroke='%235a6b78' stroke-width='1.5'/%3E%3C/svg%3E");
846
- background-repeat: no-repeat;
847
- background-position: right 8px center;
848
- }
849
-
850
- .filter-select:focus {
851
- border-color: var(--accent);
852
- box-shadow: 0 0 0 3px var(--focus-ring);
853
- }
854
-
855
- /* ── Side Panel ────────────────────────────────────────────────────────── */
856
- .side-panel {
857
- width: 0;
858
- min-width: 0;
859
- overflow: hidden;
860
- background: var(--bg-surface);
861
- border-left: 1px solid var(--border);
862
- box-shadow: var(--shadow-panel);
863
- transition:
864
- width var(--transition-slow),
865
- min-width var(--transition-slow);
866
- flex-shrink: 0;
867
- display: flex;
868
- flex-direction: column;
869
- position: relative;
870
- }
871
-
872
- .side-panel.open {
873
- width: var(--panel-width);
874
- min-width: 320px;
875
- }
876
-
877
- /* ── Panel Resize Handle ───────────────────────────────────────────────── */
878
- .panel-resize-handle {
879
- position: absolute;
880
- top: 0;
881
- left: -4px;
882
- width: 8px;
883
- height: 100%;
884
- cursor: col-resize;
885
- z-index: 10;
886
- }
887
-
888
- .panel-resize-handle::after {
889
- content: '';
890
- position: absolute;
891
- top: 50%;
892
- left: 2px;
893
- transform: translateY(-50%);
894
- width: 4px;
895
- height: 40px;
896
- border-radius: 2px;
897
- background: var(--border);
898
- opacity: 0;
899
- transition: opacity 0.2s;
900
- }
901
-
902
- .panel-resize-handle:hover::after,
903
- .panel-resize-handle:active::after {
904
- opacity: 1;
905
- background: var(--accent);
906
- }
907
-
908
- .panel-header {
909
- display: flex;
910
- align-items: center;
911
- justify-content: space-between;
912
- padding: 12px 16px;
913
- border-bottom: 1px solid var(--border);
914
- flex-shrink: 0;
915
- }
916
-
917
- .panel-title {
918
- font-size: 14px;
919
- font-weight: 600;
920
- color: var(--text);
921
- overflow: hidden;
922
- text-overflow: ellipsis;
923
- white-space: nowrap;
924
- flex: 1;
925
- margin-right: 8px;
926
- }
927
-
928
- .panel-body {
929
- flex: 1;
930
- overflow-y: auto;
931
- padding: 16px;
932
- }
933
-
934
- /* ── Chat Bubbles ──────────────────────────────────────────────────────── */
935
- .chat-messages {
936
- display: flex;
937
- flex-direction: column;
938
- gap: 12px;
939
- }
940
-
941
- .chat-msg {
942
- max-width: 85%;
943
- padding: 10px 14px;
944
- border-radius: var(--radius);
945
- font-size: 13px;
946
- line-height: 1.5;
947
- word-break: break-word;
948
- }
949
-
950
- .chat-msg.user {
951
- align-self: flex-end;
952
- background: var(--accent);
953
- color: #ffffff;
954
- border-bottom-right-radius: 4px;
955
- }
956
-
957
- .chat-msg.assistant {
958
- align-self: flex-start;
959
- background: var(--bg-elevated);
960
- color: var(--text);
961
- border-bottom-left-radius: 4px;
962
- }
963
-
964
- .chat-msg.tool {
965
- align-self: flex-start;
966
- background: var(--bg-inset);
967
- color: var(--text-muted);
968
- font-family: var(--font-mono);
969
- font-size: 11px;
970
- border-bottom-left-radius: 4px;
971
- max-height: 100px;
972
- overflow: hidden;
973
- position: relative;
974
- cursor: pointer;
975
- }
976
-
977
- .chat-msg.tool.expanded {
978
- max-height: none;
979
- }
980
-
981
- .chat-msg.tool::after {
982
- content: 'Click to expand';
983
- position: absolute;
984
- bottom: 0;
985
- left: 0;
986
- right: 0;
987
- padding: 4px;
988
- text-align: center;
989
- font-size: 10px;
990
- background: linear-gradient(transparent, var(--bg-inset));
991
- }
992
-
993
- .chat-msg.tool.expanded::after {
994
- display: none;
995
- }
996
-
997
- .chat-msg-role {
998
- font-size: 10px;
999
- font-weight: 600;
1000
- text-transform: uppercase;
1001
- letter-spacing: 0.3px;
1002
- margin-bottom: 4px;
1003
- opacity: 0.7;
1004
- }
1005
-
1006
- .chat-msg-time {
1007
- font-size: 10px;
1008
- opacity: 0.5;
1009
- margin-top: 4px;
1010
- font-family: var(--font-mono);
1011
- }
1012
-
1013
- /* ── Markdown / Prose ──────────────────────────────────────────────────── */
1014
- .prose h1,
1015
- .prose h2,
1016
- .prose h3 {
1017
- color: var(--text);
1018
- margin: 16px 0 8px;
1019
- line-height: 1.3;
1020
- }
1021
-
1022
- .prose h1 {
1023
- font-size: 20px;
1024
- font-weight: 700;
1025
- }
1026
- .prose h2 {
1027
- font-size: 16px;
1028
- font-weight: 600;
1029
- }
1030
- .prose h3 {
1031
- font-size: 14px;
1032
- font-weight: 600;
1033
- }
1034
-
1035
- .prose p {
1036
- margin: 8px 0;
1037
- }
1038
-
1039
- .prose code {
1040
- font-family: var(--font-mono);
1041
- font-size: 12px;
1042
- background: var(--bg-inset);
1043
- padding: 1px 4px;
1044
- border-radius: 4px;
1045
- }
1046
-
1047
- .prose pre {
1048
- background: var(--bg-inset);
1049
- padding: 12px;
1050
- border-radius: var(--radius-sm);
1051
- overflow-x: auto;
1052
- margin: 12px 0;
1053
- font-size: 12px;
1054
- line-height: 1.5;
1055
- }
1056
-
1057
- .prose pre code {
1058
- background: none;
1059
- padding: 0;
1060
- }
1061
-
1062
- .prose a {
1063
- color: var(--accent);
1064
- text-decoration: underline;
1065
- }
1066
-
1067
- .prose ul,
1068
- .prose ol {
1069
- padding-left: 20px;
1070
- margin: 8px 0;
1071
- }
1072
-
1073
- .prose li {
1074
- margin: 2px 0;
1075
- }
1076
-
1077
- .prose blockquote {
1078
- border-left: 3px solid var(--accent);
1079
- margin: 12px 0;
1080
- padding: 4px 12px;
1081
- background: var(--bg-elevated);
1082
- border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
1083
- color: var(--text-secondary);
1084
- }
1085
-
1086
- .prose table {
1087
- width: 100%;
1088
- border-collapse: collapse;
1089
- margin: 12px 0;
1090
- font-size: 13px;
1091
- }
1092
-
1093
- .prose th,
1094
- .prose td {
1095
- padding: 6px 10px;
1096
- border: 1px solid var(--border-light);
1097
- text-align: left;
1098
- }
1099
-
1100
- .prose th {
1101
- background: var(--bg-elevated);
1102
- font-weight: 600;
1103
- font-size: 11px;
1104
- text-transform: uppercase;
1105
- letter-spacing: 0.3px;
1106
- }
1107
-
1108
- .prose hr {
1109
- border: none;
1110
- border-top: 1px solid var(--border-light);
1111
- margin: 16px 0;
1112
- }
1113
-
1114
- /* ── Empty State ───────────────────────────────────────────────────────── */
1115
- .empty-state {
1116
- display: flex;
1117
- flex-direction: column;
1118
- align-items: center;
1119
- justify-content: center;
1120
- padding: 48px 24px;
1121
- text-align: center;
1122
- }
1123
-
1124
- .empty-state.hidden {
1125
- display: none;
1126
- }
1127
-
1128
- .empty-icon {
1129
- font-size: 48px;
1130
- color: var(--text-dim);
1131
- margin-bottom: 12px;
1132
- }
1133
-
1134
- .empty-text {
1135
- font-size: 15px;
1136
- font-weight: 600;
1137
- color: var(--text-muted);
1138
- margin-bottom: 4px;
1139
- }
1140
-
1141
- .empty-hint {
1142
- font-size: 12px;
1143
- color: var(--text-dim);
1144
- }
1145
-
1146
- /* ── Loading Overlay ───────────────────────────────────────────────────── */
1147
- .loading-overlay {
1148
- position: fixed;
1149
- inset: 0;
1150
- display: flex;
1151
- flex-direction: column;
1152
- align-items: center;
1153
- justify-content: center;
1154
- background: var(--bg);
1155
- z-index: 100;
1156
- gap: 16px;
1157
- transition: opacity var(--transition-slow);
1158
- }
1159
-
1160
- .loading-overlay.hidden {
1161
- opacity: 0;
1162
- pointer-events: none;
1163
- }
1164
-
1165
- .loading-spinner {
1166
- width: 32px;
1167
- height: 32px;
1168
- border: 3px solid var(--border);
1169
- border-top-color: var(--accent);
1170
- border-radius: 50%;
1171
- animation: spin 0.8s linear infinite;
1172
- }
1173
-
1174
- .loading-text {
1175
- font-size: 13px;
1176
- color: var(--text-muted);
1177
- }
1178
-
1179
- /* ── Toast ─────────────────────────────────────────────────────────────── */
1180
- .toast-container {
1181
- position: fixed;
1182
- top: 16px;
1183
- right: 16px;
1184
- z-index: 200;
1185
- display: flex;
1186
- flex-direction: column;
1187
- gap: 8px;
1188
- max-width: 340px;
1189
- }
1190
-
1191
- .toast {
1192
- display: flex;
1193
- align-items: flex-start;
1194
- gap: 8px;
1195
- padding: 10px 14px;
1196
- background: var(--bg-surface);
1197
- border: 1px solid var(--border);
1198
- border-radius: var(--radius-sm);
1199
- box-shadow: var(--shadow-2);
1200
- animation: toastIn 0.3s ease;
1201
- font-size: 13px;
1202
- color: var(--text);
1203
- }
1204
-
1205
- .toast.fade-out {
1206
- animation: toastOut 0.3s ease forwards;
1207
- }
1208
-
1209
- .toast-icon {
1210
- font-size: 18px;
1211
- flex-shrink: 0;
1212
- }
1213
-
1214
- .toast.success .toast-icon {
1215
- color: var(--green);
1216
- }
1217
- .toast.error .toast-icon {
1218
- color: var(--red);
1219
- }
1220
-
1221
- /* ── Skeleton Loading ──────────────────────────────────────────────────── */
1222
- .skeleton-line {
1223
- height: 12px;
1224
- background: var(--bg-hover);
1225
- border-radius: 6px;
1226
- animation: pulse 1.5s ease-in-out infinite;
1227
- }
1228
-
1229
- .skeleton-line + .skeleton-line {
1230
- margin-top: 8px;
1231
- }
1232
-
1233
- .skeleton-line.w-75 {
1234
- width: 75%;
1235
- }
1236
- .skeleton-line.w-50 {
1237
- width: 50%;
1238
- }
1239
- .skeleton-line.w-25 {
1240
- width: 25%;
1241
- }
1242
-
1243
- /* ── Animations ────────────────────────────────────────────────────────── */
1244
- @keyframes spin {
1245
- to {
1246
- transform: rotate(360deg);
1247
- }
1248
- }
1249
-
1250
- @keyframes toastIn {
1251
- from {
1252
- opacity: 0;
1253
- transform: translateX(30px);
1254
- }
1255
- to {
1256
- opacity: 1;
1257
- transform: translateX(0);
1258
- }
1259
- }
1260
-
1261
- @keyframes toastOut {
1262
- from {
1263
- opacity: 1;
1264
- transform: translateX(0);
1265
- }
1266
- to {
1267
- opacity: 0;
1268
- transform: translateX(30px);
1269
- }
1270
- }
1271
-
1272
- @keyframes pulse {
1273
- 0%,
1274
- 100% {
1275
- opacity: 0.4;
1276
- }
1277
- 50% {
1278
- opacity: 0.8;
1279
- }
1280
- }
1281
-
1282
- @keyframes fadeInUp {
1283
- from {
1284
- opacity: 0;
1285
- transform: translateY(8px);
1286
- }
1287
- to {
1288
- opacity: 1;
1289
- transform: translateY(0);
1290
- }
1291
- }
1292
-
1293
- /* ── Panel Metadata ────────────────────────────────────────────────────── */
1294
- .panel-meta {
1295
- display: flex;
1296
- flex-wrap: wrap;
1297
- align-items: center;
1298
- gap: 8px;
1299
- padding: 0 0 12px;
1300
- border-bottom: 1px solid var(--border-light);
1301
- margin-bottom: 16px;
1302
- }
1303
-
1304
- .panel-meta-item {
1305
- display: inline-flex;
1306
- align-items: center;
1307
- gap: 4px;
1308
- font-size: 12px;
1309
- color: var(--text-muted);
1310
- }
1311
-
1312
- .panel-meta-date {
1313
- font-size: 11px;
1314
- font-family: var(--font-mono);
1315
- color: var(--text-dim);
1316
- }
1317
-
1318
- .panel-icon {
1319
- font-size: 18px;
1320
- color: var(--accent);
1321
- vertical-align: middle;
1322
- margin-right: 4px;
1323
- }
1324
-
1325
- .panel-section {
1326
- margin-bottom: 16px;
1327
- }
1328
-
1329
- .panel-section-title {
1330
- font-size: 12px;
1331
- font-weight: 600;
1332
- text-transform: uppercase;
1333
- letter-spacing: 0.5px;
1334
- color: var(--text-muted);
1335
- margin-bottom: 8px;
1336
- }
1337
-
1338
- .panel-topics {
1339
- padding-left: 16px;
1340
- font-size: 12px;
1341
- color: var(--text-secondary);
1342
- line-height: 1.6;
1343
- }
1344
-
1345
- .panel-topics li {
1346
- margin-bottom: 4px;
1347
- }
1348
-
1349
- .panel-visible .side-panel {
1350
- width: var(--panel-width);
1351
- min-width: var(--panel-width);
1352
- }
1353
-
1354
- /* ── Loading Inline ────────────────────────────────────────────────────── */
1355
- .loading-inline {
1356
- display: flex;
1357
- align-items: center;
1358
- justify-content: center;
1359
- gap: 8px;
1360
- padding: 24px;
1361
- color: var(--text-muted);
1362
- font-size: 13px;
1363
- }
1364
-
1365
- .loading-spinner.small {
1366
- width: 18px;
1367
- height: 18px;
1368
- border-width: 2px;
1369
- }
1370
-
1371
- /* ── Semantic Toggle ───────────────────────────────────────────────────── */
1372
- .semantic-toggle {
1373
- display: inline-flex;
1374
- align-items: center;
1375
- gap: 4px;
1376
- font-size: 0.8rem;
1377
- cursor: pointer;
1378
- color: var(--text-secondary);
1379
- user-select: none;
1380
- margin-bottom: 16px;
1381
- }
1382
- .semantic-toggle input[type='checkbox'] {
1383
- accent-color: var(--accent);
1384
- }
1385
- .semantic-toggle .toggle-icon {
1386
- font-size: 16px;
1387
- }
1388
-
1389
- /* ── Embeddings Dashboard ─────────────────────────────────────────────── */
1390
- .embeddings-dashboard {
1391
- padding: 1rem 0;
1392
- }
1393
- .embedding-stats-grid {
1394
- display: grid;
1395
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
1396
- gap: 1rem;
1397
- }
1398
- .embedding-stat-card {
1399
- background: var(--bg-elevated);
1400
- border: 1px solid var(--border-light);
1401
- border-radius: var(--radius-sm);
1402
- padding: 1rem;
1403
- display: flex;
1404
- flex-direction: column;
1405
- gap: 0.25rem;
1406
- }
1407
- .embedding-stat-card .stat-label {
1408
- font-size: 0.75rem;
1409
- color: var(--text-secondary);
1410
- text-transform: uppercase;
1411
- letter-spacing: 0.5px;
1412
- }
1413
- .embedding-stat-card .stat-number {
1414
- font-size: 1.5rem;
1415
- font-weight: 600;
1416
- color: var(--text);
1417
- font-family: var(--font-mono);
1418
- }
1419
- .embedding-stat-card .stat-detail {
1420
- font-size: 0.8rem;
1421
- color: var(--text-muted);
1422
- }
1423
-
1424
- /* ── Score Type Indicator ─────────────────────────────────────────────── */
1425
- .score-type {
1426
- font-size: 0.65rem;
1427
- padding: 1px 4px;
1428
- border-radius: 3px;
1429
- margin-left: 4px;
1430
- font-weight: 500;
1431
- }
1432
- .score-type.hybrid {
1433
- background: var(--accent-dim);
1434
- color: var(--accent);
1435
- }
1436
- .score-type.tfidf {
1437
- background: rgba(128, 128, 128, 0.15);
1438
- color: var(--text-secondary);
1439
- }
1440
-
1441
- /* ── Responsive ────────────────────────────────────────────────────────── */
1442
- @media (max-width: 1024px) {
1443
- .side-panel.open {
1444
- position: fixed;
1445
- right: 0;
1446
- top: 0;
1447
- bottom: 0;
1448
- z-index: 50;
1449
- }
1450
- }
1451
-
1452
- @media (max-width: 768px) {
1453
- #content {
1454
- padding: 12px 16px;
1455
- }
1456
- .card-grid {
1457
- grid-template-columns: 1fr;
1458
- }
1459
- .tab {
1460
- padding: 8px 12px;
1461
- font-size: 12px;
1462
- }
1463
- .tab-icon {
1464
- font-size: 18px;
1465
- }
1466
- .side-panel.open {
1467
- width: 100vw;
1468
- min-width: 100vw;
1469
- }
1470
- .search-controls {
1471
- flex-direction: column;
1472
- align-items: stretch;
1473
- }
1474
- header {
1475
- padding: 6px 12px;
1476
- }
1477
- .stats {
1478
- display: none;
1479
- }
1480
- }
1481
-
1482
- @media (max-width: 480px) {
1483
- .tab {
1484
- padding: 8px 10px;
1485
- gap: 4px;
1486
- }
1487
- }
1488
-
1489
- /* ── Reduced Motion ────────────────────────────────────────────────────── */
1490
- @media (prefers-reduced-motion: reduce) {
1491
- *,
1492
- *::before,
1493
- *::after {
1494
- animation-duration: 0.01ms !important;
1495
- transition-duration: 0.01ms !important;
1496
- }
1497
- }
1498
-
1499
- /* ── Focus Visible ─────────────────────────────────────────────────────── */
1500
- :focus-visible {
1501
- outline: 2px solid var(--accent);
1502
- outline-offset: 1px;
1503
- }
1504
-
1505
- /* ── Selection ─────────────────────────────────────────────────────────── */
1506
- ::selection {
1507
- background: var(--accent-dim);
1508
- color: var(--text);
1509
- }
1
+ /* ═══════════════════════════════════════════════════════════════════════════
2
+ agent-knowledge — Dashboard Styles (MD3 Design Language)
3
+ Matches agent-comm and agent-tasks design tokens exactly.
4
+ ═══════════════════════════════════════════════════════════════════════════ */
5
+
6
+ /* ── Reset ─────────────────────────────────────────────────────────────── */
7
+ *,
8
+ *::before,
9
+ *::after {
10
+ box-sizing: border-box;
11
+ margin: 0;
12
+ padding: 0;
13
+ }
14
+
15
+ /* ── Design Tokens (Light) ─────────────────────────────────────────────── */
16
+ :root {
17
+ --bg: #ffffff;
18
+ --bg-surface: #f5f7f9;
19
+ --bg-elevated: #edf0f4;
20
+ --bg-hover: #e4e8ed;
21
+ --bg-inset: #dde3e9;
22
+ --border: #c8d1da;
23
+ --border-light: #dde3e9;
24
+ --text: #1c2a33;
25
+ --text-secondary: #3d5263;
26
+ --text-muted: #5a6b78;
27
+ --text-dim: #8895a0;
28
+ --accent: #5d8da8;
29
+ --accent-hover: #4e7a93;
30
+ --accent-dim: rgba(93, 141, 168, 0.15);
31
+ --accent-solid: #243742;
32
+ --accent-glow: rgba(93, 141, 168, 0.35);
33
+ --green: #1a7f37;
34
+ --green-dim: rgba(26, 127, 55, 0.12);
35
+ --yellow: #9a6700;
36
+ --yellow-dim: rgba(154, 103, 0, 0.12);
37
+ --orange: #bc4c00;
38
+ --orange-dim: rgba(188, 76, 0, 0.12);
39
+ --red: #cf222e;
40
+ --red-dim: rgba(207, 34, 46, 0.12);
41
+ --purple: #6e78a8;
42
+ --purple-dim: rgba(110, 120, 168, 0.12);
43
+ --blue: #0969da;
44
+ --blue-dim: rgba(9, 105, 218, 0.12);
45
+ --radius: 12px;
46
+ --radius-sm: 8px;
47
+ --radius-lg: 16px;
48
+ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
49
+ --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
50
+ --shadow-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
51
+ --shadow-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
52
+ --shadow-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
53
+ --shadow-hover: 0px 2px 4px 0px rgba(0, 0, 0, 0.25), 0px 4px 12px 4px rgba(0, 0, 0, 0.15);
54
+ --shadow-panel: -2px 0px 8px 0px rgba(0, 0, 0, 0.3), -4px 0px 16px 2px rgba(0, 0, 0, 0.15);
55
+ --focus-ring: rgba(93, 141, 168, 0.35);
56
+ --transition-fast: 0.15s ease;
57
+ --transition-normal: 0.2s ease;
58
+ --transition-slow: 0.3s ease;
59
+ --panel-width: 560px;
60
+ }
61
+
62
+ /* ── Dark Theme ────────────────────────────────────────────────────────── */
63
+ [data-theme='dark'] {
64
+ --bg: #0d1117;
65
+ --bg-surface: #161b22;
66
+ --bg-elevated: #1c2128;
67
+ --bg-hover: #262c36;
68
+ --bg-inset: #2d333b;
69
+ --border: #373e47;
70
+ --border-light: #2d333b;
71
+ --text: #e6edf3;
72
+ --text-secondary: #b1bac4;
73
+ --text-muted: #8b949e;
74
+ --text-dim: #6e7681;
75
+ --accent: #5d8da8;
76
+ --accent-hover: #79a8c0;
77
+ --accent-dim: rgba(93, 141, 168, 0.2);
78
+ --accent-solid: #a8c8d8;
79
+ --accent-glow: rgba(93, 141, 168, 0.4);
80
+ --green: #3fb950;
81
+ --green-dim: rgba(63, 185, 80, 0.15);
82
+ --yellow: #d29922;
83
+ --yellow-dim: rgba(210, 153, 34, 0.15);
84
+ --orange: #db6d28;
85
+ --orange-dim: rgba(219, 109, 40, 0.15);
86
+ --red: #f85149;
87
+ --red-dim: rgba(248, 81, 73, 0.15);
88
+ --purple: #8e9ad0;
89
+ --purple-dim: rgba(142, 154, 208, 0.15);
90
+ --blue: #58a6ff;
91
+ --blue-dim: rgba(88, 166, 255, 0.15);
92
+ --shadow-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.6), 0px 1px 3px 1px rgba(0, 0, 0, 0.3);
93
+ --shadow-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.6), 0px 2px 6px 2px rgba(0, 0, 0, 0.3);
94
+ --shadow-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.6), 0px 4px 8px 3px rgba(0, 0, 0, 0.3);
95
+ --shadow-hover: 0px 2px 4px 0px rgba(0, 0, 0, 0.5), 0px 4px 12px 4px rgba(0, 0, 0, 0.3);
96
+ --shadow-panel: -2px 0px 8px 0px rgba(0, 0, 0, 0.6), -4px 0px 16px 2px rgba(0, 0, 0, 0.3);
97
+ }
98
+
99
+ /* ── Base ──────────────────────────────────────────────────────────────── */
100
+ html {
101
+ height: 100%;
102
+ }
103
+
104
+ body {
105
+ font-family: var(--font-sans);
106
+ font-size: 14px;
107
+ line-height: 1.5;
108
+ color: var(--text);
109
+ background: var(--bg);
110
+ height: 100%;
111
+ overflow: hidden;
112
+ -webkit-font-smoothing: antialiased;
113
+ }
114
+
115
+ .material-symbols-outlined {
116
+ font-variation-settings:
117
+ 'FILL' 0,
118
+ 'wght' 400,
119
+ 'GRAD' 0,
120
+ 'opsz' 24;
121
+ }
122
+
123
+ /* ── Scrollbar ─────────────────────────────────────────────────────────── */
124
+ ::-webkit-scrollbar {
125
+ width: 6px;
126
+ height: 6px;
127
+ }
128
+ ::-webkit-scrollbar-track {
129
+ background: transparent;
130
+ }
131
+ ::-webkit-scrollbar-thumb {
132
+ background: var(--border);
133
+ border-radius: 3px;
134
+ }
135
+ ::-webkit-scrollbar-thumb:hover {
136
+ background: var(--accent);
137
+ }
138
+
139
+ /* ── Header ────────────────────────────────────────────────────────────── */
140
+ header {
141
+ display: flex;
142
+ align-items: center;
143
+ justify-content: space-between;
144
+ padding: 8px 16px;
145
+ background: var(--bg-surface);
146
+ border-bottom: 1px solid var(--border);
147
+ flex-shrink: 0;
148
+ z-index: 10;
149
+ }
150
+
151
+ .header-left {
152
+ display: flex;
153
+ align-items: center;
154
+ gap: 8px;
155
+ }
156
+
157
+ .header-right {
158
+ display: flex;
159
+ align-items: center;
160
+ gap: 12px;
161
+ }
162
+
163
+ .brand-icon {
164
+ font-size: 24px;
165
+ color: var(--accent);
166
+ }
167
+
168
+ h1 {
169
+ font-family: var(--font-mono);
170
+ font-size: 17px;
171
+ font-weight: 700;
172
+ color: var(--accent-solid);
173
+ letter-spacing: -0.3px;
174
+ }
175
+
176
+ .version {
177
+ font-family: var(--font-mono);
178
+ font-size: 10px;
179
+ font-weight: 500;
180
+ color: var(--text-dim);
181
+ background: var(--bg-elevated);
182
+ padding: 2px 6px;
183
+ border-radius: 10px;
184
+ letter-spacing: 0.3px;
185
+ }
186
+
187
+ /* ── Connection Status ─────────────────────────────────────────────────── */
188
+ .status-badge {
189
+ display: inline-flex;
190
+ align-items: center;
191
+ gap: 4px;
192
+ font-size: 11px;
193
+ font-weight: 500;
194
+ padding: 2px 8px;
195
+ border-radius: 10px;
196
+ }
197
+
198
+ .status-badge::before {
199
+ content: '';
200
+ width: 6px;
201
+ height: 6px;
202
+ border-radius: 50%;
203
+ flex-shrink: 0;
204
+ }
205
+
206
+ .status-badge.connected {
207
+ color: var(--green);
208
+ }
209
+ .status-badge.connected::before {
210
+ background: var(--green);
211
+ }
212
+ .status-badge.disconnected {
213
+ color: var(--red);
214
+ }
215
+ .status-badge.disconnected::before {
216
+ background: var(--red);
217
+ }
218
+
219
+ /* ── Stats ─────────────────────────────────────────────────────────────── */
220
+ .stats {
221
+ display: flex;
222
+ gap: 8px;
223
+ }
224
+
225
+ .stat-badge {
226
+ display: inline-flex;
227
+ align-items: center;
228
+ gap: 4px;
229
+ font-size: 12px;
230
+ font-weight: 500;
231
+ color: var(--text-muted);
232
+ background: var(--bg-elevated);
233
+ padding: 4px 10px;
234
+ border-radius: var(--radius-sm);
235
+ }
236
+
237
+ .stat-badge .stat-icon {
238
+ font-size: 16px;
239
+ color: var(--accent);
240
+ }
241
+
242
+ .stat-badge .stat-value {
243
+ font-family: var(--font-mono);
244
+ font-weight: 600;
245
+ color: var(--text);
246
+ }
247
+
248
+ /* ── Icon Button ───────────────────────────────────────────────────────── */
249
+ .icon-btn {
250
+ display: inline-flex;
251
+ align-items: center;
252
+ justify-content: center;
253
+ width: 32px;
254
+ height: 32px;
255
+ border: none;
256
+ background: transparent;
257
+ color: var(--text-muted);
258
+ border-radius: var(--radius-sm);
259
+ cursor: pointer;
260
+ transition:
261
+ background var(--transition-fast),
262
+ color var(--transition-fast);
263
+ }
264
+
265
+ .icon-btn:hover {
266
+ background: var(--bg-hover);
267
+ color: var(--text);
268
+ }
269
+
270
+ .icon-btn:focus-visible {
271
+ outline: 2px solid var(--accent);
272
+ outline-offset: 1px;
273
+ }
274
+
275
+ /* ── Tab Bar ───────────────────────────────────────────────────────────── */
276
+ .tab-bar {
277
+ display: flex;
278
+ background: var(--bg-surface);
279
+ border-bottom: 1px solid var(--border);
280
+ padding: 0 16px;
281
+ gap: 0;
282
+ flex-shrink: 0;
283
+ }
284
+
285
+ .tab {
286
+ display: inline-flex;
287
+ align-items: center;
288
+ gap: 6px;
289
+ padding: 10px 16px;
290
+ font-size: 13px;
291
+ font-weight: 500;
292
+ color: var(--text-muted);
293
+ background: none;
294
+ border: none;
295
+ border-bottom: 2px solid transparent;
296
+ cursor: pointer;
297
+ transition:
298
+ color var(--transition-fast),
299
+ border-color var(--transition-fast);
300
+ white-space: nowrap;
301
+ }
302
+
303
+ .tab:hover {
304
+ color: var(--text);
305
+ background: var(--bg-hover);
306
+ }
307
+
308
+ .tab.active {
309
+ color: var(--accent);
310
+ border-bottom-color: var(--accent);
311
+ font-weight: 600;
312
+ }
313
+
314
+ .tab-icon {
315
+ font-size: 20px;
316
+ }
317
+
318
+ /* ── Content Layout ────────────────────────────────────────────────────── */
319
+ .content-wrapper {
320
+ display: flex;
321
+ flex: 1;
322
+ overflow: hidden;
323
+ min-height: 0;
324
+ }
325
+
326
+ #content {
327
+ flex: 1;
328
+ overflow-y: auto;
329
+ padding: 20px 24px;
330
+ min-width: 0;
331
+ }
332
+
333
+ .view {
334
+ display: none;
335
+ }
336
+ .view.active {
337
+ display: block;
338
+ }
339
+
340
+ .view-header {
341
+ display: flex;
342
+ align-items: center;
343
+ justify-content: space-between;
344
+ margin-bottom: 16px;
345
+ }
346
+
347
+ .view-header h2 {
348
+ display: flex;
349
+ align-items: center;
350
+ gap: 8px;
351
+ font-size: 17px;
352
+ font-weight: 700;
353
+ color: var(--accent-solid);
354
+ }
355
+
356
+ .view-icon {
357
+ font-size: 22px;
358
+ color: var(--accent);
359
+ }
360
+
361
+ .view-actions {
362
+ display: flex;
363
+ gap: 8px;
364
+ }
365
+
366
+ /* ── Filter Chips ──────────────────────────────────────────────────────── */
367
+ .filter-chips {
368
+ display: flex;
369
+ flex-wrap: wrap;
370
+ gap: 6px;
371
+ margin-bottom: 16px;
372
+ }
373
+
374
+ .chip {
375
+ display: inline-flex;
376
+ align-items: center;
377
+ gap: 4px;
378
+ padding: 5px 12px;
379
+ font-size: 12px;
380
+ font-weight: 500;
381
+ color: var(--text-muted);
382
+ background: var(--bg-elevated);
383
+ border: 1px solid transparent;
384
+ border-radius: var(--radius-sm);
385
+ cursor: pointer;
386
+ transition: all var(--transition-fast);
387
+ white-space: nowrap;
388
+ }
389
+
390
+ .chip:hover {
391
+ background: var(--bg-hover);
392
+ color: var(--text);
393
+ }
394
+
395
+ .chip.active {
396
+ background: var(--accent-dim);
397
+ color: var(--accent);
398
+ border-color: var(--accent);
399
+ font-weight: 600;
400
+ }
401
+
402
+ .chip-icon {
403
+ font-size: 16px;
404
+ }
405
+
406
+ /* ── Search Input ──────────────────────────────────────────────────────── */
407
+ .search-bar {
408
+ position: relative;
409
+ margin-bottom: 16px;
410
+ }
411
+
412
+ .search-input-icon {
413
+ position: absolute;
414
+ left: 12px;
415
+ top: 50%;
416
+ transform: translateY(-50%);
417
+ font-size: 20px;
418
+ color: var(--text-dim);
419
+ pointer-events: none;
420
+ }
421
+
422
+ .search-input {
423
+ width: 100%;
424
+ height: 40px;
425
+ padding: 0 12px 0 40px;
426
+ font-size: 14px;
427
+ font-family: var(--font-sans);
428
+ color: var(--text);
429
+ background: var(--bg-elevated);
430
+ border: 1px solid var(--border-light);
431
+ border-radius: var(--radius-sm);
432
+ outline: none;
433
+ transition:
434
+ border-color var(--transition-fast),
435
+ box-shadow var(--transition-fast);
436
+ }
437
+
438
+ .search-input::placeholder {
439
+ color: var(--text-dim);
440
+ }
441
+
442
+ .search-input:focus {
443
+ border-color: var(--accent);
444
+ box-shadow: 0 0 0 3px var(--focus-ring);
445
+ }
446
+
447
+ /* ── Search Controls ───────────────────────────────────────────────────── */
448
+ .search-controls {
449
+ display: flex;
450
+ align-items: center;
451
+ justify-content: space-between;
452
+ margin-bottom: 16px;
453
+ flex-wrap: nowrap;
454
+ gap: 8px;
455
+ overflow-x: auto;
456
+ }
457
+
458
+ .mode-toggle {
459
+ display: flex;
460
+ gap: 0;
461
+ border: 1px solid var(--border);
462
+ border-radius: var(--radius-sm);
463
+ overflow: hidden;
464
+ }
465
+
466
+ .mode-btn {
467
+ display: inline-flex;
468
+ align-items: center;
469
+ gap: 4px;
470
+ padding: 5px 12px;
471
+ font-size: 12px;
472
+ font-weight: 500;
473
+ color: var(--text-muted);
474
+ background: var(--bg-elevated);
475
+ border: none;
476
+ cursor: pointer;
477
+ transition: all var(--transition-fast);
478
+ }
479
+
480
+ .mode-btn:hover {
481
+ background: var(--bg-hover);
482
+ color: var(--text);
483
+ }
484
+
485
+ .mode-btn.active {
486
+ background: var(--accent-dim);
487
+ color: var(--accent);
488
+ font-weight: 600;
489
+ }
490
+
491
+ .mode-btn .material-symbols-outlined {
492
+ font-size: 16px;
493
+ }
494
+
495
+ /* ── Card Grid ─────────────────────────────────────────────────────────── */
496
+ .card-grid {
497
+ display: grid;
498
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
499
+ gap: 12px;
500
+ }
501
+
502
+ /* ── Knowledge Card ────────────────────────────────────────────────────── */
503
+ .knowledge-card {
504
+ background: var(--bg-elevated);
505
+ border: 1px solid transparent;
506
+ border-radius: var(--radius);
507
+ padding: 14px 16px;
508
+ cursor: pointer;
509
+ box-shadow: var(--shadow-1);
510
+ transition:
511
+ transform var(--transition-fast),
512
+ box-shadow var(--transition-fast),
513
+ border-color var(--transition-fast);
514
+ }
515
+
516
+ .knowledge-card:hover {
517
+ transform: translateY(-1px);
518
+ box-shadow: var(--shadow-hover);
519
+ border-color: var(--accent);
520
+ }
521
+
522
+ .knowledge-card .card-title {
523
+ font-size: 14px;
524
+ font-weight: 600;
525
+ color: var(--text);
526
+ margin-bottom: 6px;
527
+ line-height: 1.3;
528
+ }
529
+
530
+ .knowledge-card .card-category {
531
+ display: inline-flex;
532
+ align-items: center;
533
+ gap: 3px;
534
+ font-size: 11px;
535
+ font-weight: 500;
536
+ padding: 2px 8px;
537
+ border-radius: 10px;
538
+ margin-bottom: 8px;
539
+ }
540
+
541
+ .card-category[data-cat='projects'] {
542
+ background: var(--blue-dim);
543
+ color: var(--blue);
544
+ }
545
+ .card-category[data-cat='people'] {
546
+ background: var(--purple-dim);
547
+ color: var(--purple);
548
+ }
549
+ .card-category[data-cat='decisions'] {
550
+ background: var(--orange-dim);
551
+ color: var(--orange);
552
+ }
553
+ .card-category[data-cat='workflows'] {
554
+ background: var(--green-dim);
555
+ color: var(--green);
556
+ }
557
+ .card-category[data-cat='notes'] {
558
+ background: var(--yellow-dim);
559
+ color: var(--yellow);
560
+ }
561
+
562
+ .knowledge-card .card-tags {
563
+ display: flex;
564
+ flex-wrap: wrap;
565
+ gap: 4px;
566
+ margin-bottom: 6px;
567
+ }
568
+
569
+ .card-tag {
570
+ font-size: 10px;
571
+ font-weight: 500;
572
+ padding: 1px 6px;
573
+ border-radius: 6px;
574
+ background: var(--bg-hover);
575
+ color: var(--text-muted);
576
+ }
577
+
578
+ .knowledge-card .card-date {
579
+ font-size: 11px;
580
+ color: var(--text-dim);
581
+ font-family: var(--font-mono);
582
+ }
583
+
584
+ /* ── Results List ──────────────────────────────────────────────────────── */
585
+ .results-list {
586
+ display: flex;
587
+ flex-direction: column;
588
+ gap: 0;
589
+ }
590
+
591
+ .result-item {
592
+ padding: 12px 16px;
593
+ border-bottom: 1px solid var(--border-light);
594
+ cursor: pointer;
595
+ transition: background var(--transition-fast);
596
+ }
597
+
598
+ .result-item:hover {
599
+ background: var(--bg-hover);
600
+ }
601
+
602
+ .result-item:last-child {
603
+ border-bottom: none;
604
+ }
605
+
606
+ .result-meta {
607
+ display: flex;
608
+ align-items: center;
609
+ gap: 8px;
610
+ margin-bottom: 6px;
611
+ flex-wrap: wrap;
612
+ }
613
+
614
+ .result-project {
615
+ font-size: 11px;
616
+ font-weight: 600;
617
+ font-family: var(--font-mono);
618
+ color: var(--accent);
619
+ background: var(--accent-dim);
620
+ padding: 1px 6px;
621
+ border-radius: 6px;
622
+ }
623
+
624
+ .result-date {
625
+ font-size: 11px;
626
+ color: var(--text-dim);
627
+ font-family: var(--font-mono);
628
+ }
629
+
630
+ /* ── Role Badge ────────────────────────────────────────────────────────── */
631
+ .role-badge {
632
+ display: inline-flex;
633
+ align-items: center;
634
+ gap: 2px;
635
+ font-size: 10px;
636
+ font-weight: 600;
637
+ padding: 1px 6px;
638
+ border-radius: 6px;
639
+ text-transform: uppercase;
640
+ letter-spacing: 0.3px;
641
+ }
642
+
643
+ .role-badge[data-role='user'] {
644
+ background: var(--accent-dim);
645
+ color: var(--accent);
646
+ }
647
+ .role-badge[data-role='assistant'] {
648
+ background: var(--purple-dim);
649
+ color: var(--purple);
650
+ }
651
+ .role-badge[data-role='tool_use'] {
652
+ background: var(--orange-dim);
653
+ color: var(--orange);
654
+ }
655
+ .role-badge[data-role='tool_result'] {
656
+ background: var(--orange-dim);
657
+ color: var(--orange);
658
+ }
659
+
660
+ /* ── Score Bar ─────────────────────────────────────────────────────────── */
661
+ .score-container {
662
+ display: flex;
663
+ align-items: center;
664
+ gap: 6px;
665
+ }
666
+
667
+ .score-bar {
668
+ width: 60px;
669
+ height: 4px;
670
+ background: var(--bg-inset);
671
+ border-radius: 2px;
672
+ overflow: hidden;
673
+ }
674
+
675
+ .score-bar-fill {
676
+ height: 100%;
677
+ background: var(--green);
678
+ border-radius: 2px;
679
+ transition: width var(--transition-normal);
680
+ }
681
+
682
+ .score-value {
683
+ font-size: 10px;
684
+ font-weight: 600;
685
+ font-family: var(--font-mono);
686
+ color: var(--text-dim);
687
+ }
688
+
689
+ /* ── Recency Tag ──────────────────────────────────────────────────────── */
690
+ .recency-tag {
691
+ font-size: 9px;
692
+ font-weight: 500;
693
+ margin-left: 4px;
694
+ padding: 0 3px;
695
+ border-radius: 3px;
696
+ background: var(--orange-dim);
697
+ color: var(--orange);
698
+ vertical-align: middle;
699
+ }
700
+
701
+ /* ── Scope Badge ───────────────────────────────────────────────────────── */
702
+ .scope-badge {
703
+ font-size: 10px;
704
+ font-weight: 600;
705
+ padding: 1px 6px;
706
+ border-radius: 6px;
707
+ text-transform: uppercase;
708
+ letter-spacing: 0.3px;
709
+ }
710
+
711
+ .scope-badge[data-scope='errors'] {
712
+ background: var(--red-dim);
713
+ color: var(--red);
714
+ }
715
+ .scope-badge[data-scope='plans'] {
716
+ background: var(--blue-dim);
717
+ color: var(--blue);
718
+ }
719
+ .scope-badge[data-scope='configs'] {
720
+ background: var(--orange-dim);
721
+ color: var(--orange);
722
+ }
723
+ .scope-badge[data-scope='tools'] {
724
+ background: var(--purple-dim);
725
+ color: var(--purple);
726
+ }
727
+ .scope-badge[data-scope='files'] {
728
+ background: var(--green-dim);
729
+ color: var(--green);
730
+ }
731
+ .scope-badge[data-scope='decisions'] {
732
+ background: var(--yellow-dim);
733
+ color: var(--yellow);
734
+ }
735
+
736
+ /* ── Excerpt ───────────────────────────────────────────────────────────── */
737
+ .result-excerpt {
738
+ font-size: 13px;
739
+ font-family: var(--font-mono);
740
+ color: var(--text-secondary);
741
+ line-height: 1.5;
742
+ white-space: pre-wrap;
743
+ word-break: break-word;
744
+ background: var(--bg-surface);
745
+ padding: 8px 12px;
746
+ border-radius: var(--radius-sm);
747
+ margin-top: 6px;
748
+ border-left: 3px solid var(--accent);
749
+ }
750
+
751
+ .result-excerpt mark {
752
+ background: var(--yellow-dim);
753
+ color: var(--yellow);
754
+ padding: 0 2px;
755
+ border-radius: 2px;
756
+ }
757
+
758
+ /* ── Session Cards ─────────────────────────────────────────────────────── */
759
+ .sessions-list {
760
+ display: flex;
761
+ flex-direction: column;
762
+ gap: 8px;
763
+ }
764
+
765
+ .session-card {
766
+ background: var(--bg-elevated);
767
+ border: 1px solid transparent;
768
+ border-radius: var(--radius);
769
+ padding: 12px 16px;
770
+ cursor: pointer;
771
+ box-shadow: var(--shadow-1);
772
+ transition:
773
+ transform var(--transition-fast),
774
+ box-shadow var(--transition-fast),
775
+ border-color var(--transition-fast);
776
+ }
777
+
778
+ .session-card:hover {
779
+ transform: translateY(-1px);
780
+ box-shadow: var(--shadow-hover);
781
+ border-color: var(--accent);
782
+ }
783
+
784
+ .session-card .session-header {
785
+ display: flex;
786
+ align-items: center;
787
+ justify-content: space-between;
788
+ margin-bottom: 6px;
789
+ }
790
+
791
+ .session-card .session-project {
792
+ font-size: 12px;
793
+ font-weight: 600;
794
+ font-family: var(--font-mono);
795
+ color: var(--accent);
796
+ }
797
+
798
+ .session-card .session-date {
799
+ font-size: 11px;
800
+ color: var(--text-dim);
801
+ font-family: var(--font-mono);
802
+ }
803
+
804
+ .session-card .session-meta {
805
+ display: flex;
806
+ gap: 12px;
807
+ margin-bottom: 6px;
808
+ }
809
+
810
+ .session-card .session-meta-item {
811
+ display: flex;
812
+ align-items: center;
813
+ gap: 4px;
814
+ font-size: 11px;
815
+ color: var(--text-muted);
816
+ }
817
+
818
+ .session-card .session-meta-item .material-symbols-outlined {
819
+ font-size: 14px;
820
+ }
821
+
822
+ .session-card .session-preview {
823
+ font-size: 12px;
824
+ color: var(--text-secondary);
825
+ line-height: 1.4;
826
+ overflow: hidden;
827
+ text-overflow: ellipsis;
828
+ white-space: nowrap;
829
+ }
830
+
831
+ /* ── Filter Select ─────────────────────────────────────────────────────── */
832
+ .filter-select {
833
+ height: 32px;
834
+ padding: 0 28px 0 10px;
835
+ font-size: 12px;
836
+ font-family: var(--font-sans);
837
+ color: var(--text);
838
+ background: var(--bg-elevated);
839
+ border: 1px solid var(--border-light);
840
+ border-radius: var(--radius-sm);
841
+ outline: none;
842
+ cursor: pointer;
843
+ appearance: none;
844
+ 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' fill='none' stroke='%235a6b78' stroke-width='1.5'/%3E%3C/svg%3E");
845
+ background-repeat: no-repeat;
846
+ background-position: right 8px center;
847
+ }
848
+
849
+ .filter-select:focus {
850
+ border-color: var(--accent);
851
+ box-shadow: 0 0 0 3px var(--focus-ring);
852
+ }
853
+
854
+ /* ── Side Panel ────────────────────────────────────────────────────────── */
855
+ .side-panel {
856
+ width: 0;
857
+ min-width: 0;
858
+ overflow: hidden;
859
+ background: var(--bg-surface);
860
+ border-left: 1px solid var(--border);
861
+ box-shadow: var(--shadow-panel);
862
+ transition:
863
+ width var(--transition-slow),
864
+ min-width var(--transition-slow);
865
+ flex-shrink: 0;
866
+ display: flex;
867
+ flex-direction: column;
868
+ position: relative;
869
+ height: 100%;
870
+ }
871
+
872
+ .side-panel.open {
873
+ width: var(--panel-width);
874
+ min-width: 320px;
875
+ overflow: visible;
876
+ }
877
+
878
+ .panel-body {
879
+ flex: 1;
880
+ overflow-y: auto;
881
+ min-height: 0;
882
+ padding: 16px;
883
+ }
884
+
885
+ /* ── Panel Resize Handle ───────────────────────────────────────────────── */
886
+ .panel-resize-handle {
887
+ position: absolute;
888
+ top: 0;
889
+ left: -4px;
890
+ width: 8px;
891
+ height: 100%;
892
+ cursor: col-resize;
893
+ z-index: 10;
894
+ }
895
+
896
+ .panel-resize-handle::after {
897
+ content: '';
898
+ position: absolute;
899
+ top: 50%;
900
+ left: 2px;
901
+ transform: translateY(-50%);
902
+ width: 4px;
903
+ height: 40px;
904
+ border-radius: 2px;
905
+ background: var(--border);
906
+ opacity: 0;
907
+ transition: opacity 0.2s;
908
+ }
909
+
910
+ .panel-resize-handle:hover::after,
911
+ .panel-resize-handle:active::after {
912
+ opacity: 1;
913
+ background: var(--accent);
914
+ }
915
+
916
+ .panel-header {
917
+ display: flex;
918
+ align-items: center;
919
+ justify-content: space-between;
920
+ padding: 12px 16px;
921
+ border-bottom: 1px solid var(--border);
922
+ flex-shrink: 0;
923
+ }
924
+
925
+ .panel-title {
926
+ font-size: 14px;
927
+ font-weight: 600;
928
+ color: var(--text);
929
+ overflow: hidden;
930
+ text-overflow: ellipsis;
931
+ white-space: nowrap;
932
+ flex: 1;
933
+ margin-right: 8px;
934
+ }
935
+
936
+ /* ── Chat Bubbles ──────────────────────────────────────────────────────── */
937
+ .chat-messages {
938
+ display: flex;
939
+ flex-direction: column;
940
+ gap: 12px;
941
+ }
942
+
943
+ .chat-msg {
944
+ max-width: 85%;
945
+ padding: 10px 14px;
946
+ border-radius: var(--radius);
947
+ font-size: 13px;
948
+ line-height: 1.5;
949
+ word-break: break-word;
950
+ }
951
+
952
+ .chat-msg.user {
953
+ align-self: flex-end;
954
+ background: var(--accent);
955
+ color: #ffffff;
956
+ border-bottom-right-radius: 4px;
957
+ }
958
+
959
+ .chat-msg.assistant {
960
+ align-self: flex-start;
961
+ background: var(--bg-elevated);
962
+ color: var(--text);
963
+ border-bottom-left-radius: 4px;
964
+ }
965
+
966
+ .chat-msg.tool {
967
+ align-self: flex-start;
968
+ background: var(--bg-inset);
969
+ color: var(--text-muted);
970
+ font-family: var(--font-mono);
971
+ font-size: 11px;
972
+ border-bottom-left-radius: 4px;
973
+ max-height: 100px;
974
+ overflow: hidden;
975
+ position: relative;
976
+ cursor: pointer;
977
+ }
978
+
979
+ .chat-msg.tool.expanded {
980
+ max-height: none;
981
+ }
982
+
983
+ .chat-msg.tool::after {
984
+ content: 'Click to expand';
985
+ position: absolute;
986
+ bottom: 0;
987
+ left: 0;
988
+ right: 0;
989
+ padding: 4px;
990
+ text-align: center;
991
+ font-size: 10px;
992
+ background: linear-gradient(transparent, var(--bg-inset));
993
+ }
994
+
995
+ .chat-msg.tool.expanded::after {
996
+ display: none;
997
+ }
998
+
999
+ .chat-msg-role {
1000
+ font-size: 10px;
1001
+ font-weight: 600;
1002
+ text-transform: uppercase;
1003
+ letter-spacing: 0.3px;
1004
+ margin-bottom: 4px;
1005
+ opacity: 0.7;
1006
+ }
1007
+
1008
+ .chat-msg-time {
1009
+ font-size: 10px;
1010
+ opacity: 0.5;
1011
+ margin-top: 4px;
1012
+ font-family: var(--font-mono);
1013
+ }
1014
+
1015
+ /* ── Markdown / Prose ──────────────────────────────────────────────────── */
1016
+ .prose h1,
1017
+ .prose h2,
1018
+ .prose h3 {
1019
+ color: var(--text);
1020
+ margin: 16px 0 8px;
1021
+ line-height: 1.3;
1022
+ }
1023
+
1024
+ .prose h1 {
1025
+ font-size: 20px;
1026
+ font-weight: 700;
1027
+ }
1028
+ .prose h2 {
1029
+ font-size: 16px;
1030
+ font-weight: 600;
1031
+ }
1032
+ .prose h3 {
1033
+ font-size: 14px;
1034
+ font-weight: 600;
1035
+ }
1036
+
1037
+ .prose p {
1038
+ margin: 8px 0;
1039
+ }
1040
+
1041
+ .prose code {
1042
+ font-family: var(--font-mono);
1043
+ font-size: 12px;
1044
+ background: var(--bg-inset);
1045
+ padding: 1px 4px;
1046
+ border-radius: 4px;
1047
+ }
1048
+
1049
+ .prose pre {
1050
+ background: var(--bg-inset);
1051
+ padding: 12px;
1052
+ border-radius: var(--radius-sm);
1053
+ overflow-x: auto;
1054
+ margin: 12px 0;
1055
+ font-size: 12px;
1056
+ line-height: 1.5;
1057
+ }
1058
+
1059
+ .prose pre code {
1060
+ background: none;
1061
+ padding: 0;
1062
+ }
1063
+
1064
+ .prose a {
1065
+ color: var(--accent);
1066
+ text-decoration: underline;
1067
+ }
1068
+
1069
+ .prose ul,
1070
+ .prose ol {
1071
+ padding-left: 20px;
1072
+ margin: 8px 0;
1073
+ }
1074
+
1075
+ .prose li {
1076
+ margin: 2px 0;
1077
+ }
1078
+
1079
+ .prose blockquote {
1080
+ border-left: 3px solid var(--accent);
1081
+ margin: 12px 0;
1082
+ padding: 4px 12px;
1083
+ background: var(--bg-elevated);
1084
+ border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
1085
+ color: var(--text-secondary);
1086
+ }
1087
+
1088
+ .prose table {
1089
+ width: 100%;
1090
+ border-collapse: collapse;
1091
+ margin: 12px 0;
1092
+ font-size: 13px;
1093
+ }
1094
+
1095
+ .prose th,
1096
+ .prose td {
1097
+ padding: 6px 10px;
1098
+ border: 1px solid var(--border-light);
1099
+ text-align: left;
1100
+ }
1101
+
1102
+ .prose th {
1103
+ background: var(--bg-elevated);
1104
+ font-weight: 600;
1105
+ font-size: 11px;
1106
+ text-transform: uppercase;
1107
+ letter-spacing: 0.3px;
1108
+ }
1109
+
1110
+ .prose hr {
1111
+ border: none;
1112
+ border-top: 1px solid var(--border-light);
1113
+ margin: 16px 0;
1114
+ }
1115
+
1116
+ /* ── Empty State ───────────────────────────────────────────────────────── */
1117
+ .empty-state {
1118
+ display: flex;
1119
+ flex-direction: column;
1120
+ align-items: center;
1121
+ justify-content: center;
1122
+ padding: 48px 24px;
1123
+ text-align: center;
1124
+ }
1125
+
1126
+ .empty-state.hidden {
1127
+ display: none;
1128
+ }
1129
+
1130
+ .empty-icon {
1131
+ font-size: 48px;
1132
+ color: var(--text-dim);
1133
+ margin-bottom: 12px;
1134
+ }
1135
+
1136
+ .empty-text {
1137
+ font-size: 15px;
1138
+ font-weight: 600;
1139
+ color: var(--text-muted);
1140
+ margin-bottom: 4px;
1141
+ }
1142
+
1143
+ .empty-hint {
1144
+ font-size: 12px;
1145
+ color: var(--text-dim);
1146
+ }
1147
+
1148
+ /* ── Loading Overlay ───────────────────────────────────────────────────── */
1149
+ .loading-overlay {
1150
+ position: fixed;
1151
+ inset: 0;
1152
+ display: flex;
1153
+ flex-direction: column;
1154
+ align-items: center;
1155
+ justify-content: center;
1156
+ background: var(--bg);
1157
+ z-index: 100;
1158
+ gap: 16px;
1159
+ transition: opacity var(--transition-slow);
1160
+ }
1161
+
1162
+ .loading-overlay.hidden {
1163
+ opacity: 0;
1164
+ pointer-events: none;
1165
+ }
1166
+
1167
+ .loading-spinner {
1168
+ width: 32px;
1169
+ height: 32px;
1170
+ border: 3px solid var(--border);
1171
+ border-top-color: var(--accent);
1172
+ border-radius: 50%;
1173
+ animation: spin 0.8s linear infinite;
1174
+ }
1175
+
1176
+ .loading-text {
1177
+ font-size: 13px;
1178
+ color: var(--text-muted);
1179
+ }
1180
+
1181
+ /* ── Toast ─────────────────────────────────────────────────────────────── */
1182
+ .toast-container {
1183
+ position: fixed;
1184
+ top: 16px;
1185
+ right: 16px;
1186
+ z-index: 200;
1187
+ display: flex;
1188
+ flex-direction: column;
1189
+ gap: 8px;
1190
+ max-width: 340px;
1191
+ }
1192
+
1193
+ .toast {
1194
+ display: flex;
1195
+ align-items: flex-start;
1196
+ gap: 8px;
1197
+ padding: 10px 14px;
1198
+ background: var(--bg-surface);
1199
+ border: 1px solid var(--border);
1200
+ border-radius: var(--radius-sm);
1201
+ box-shadow: var(--shadow-2);
1202
+ animation: toastIn 0.3s ease;
1203
+ font-size: 13px;
1204
+ color: var(--text);
1205
+ }
1206
+
1207
+ .toast.fade-out {
1208
+ animation: toastOut 0.3s ease forwards;
1209
+ }
1210
+
1211
+ .toast-icon {
1212
+ font-size: 18px;
1213
+ flex-shrink: 0;
1214
+ }
1215
+
1216
+ .toast.success .toast-icon {
1217
+ color: var(--green);
1218
+ }
1219
+ .toast.error .toast-icon {
1220
+ color: var(--red);
1221
+ }
1222
+
1223
+ /* ── Skeleton Loading ──────────────────────────────────────────────────── */
1224
+ .skeleton-line {
1225
+ height: 12px;
1226
+ background: var(--bg-hover);
1227
+ border-radius: 6px;
1228
+ animation: pulse 1.5s ease-in-out infinite;
1229
+ }
1230
+
1231
+ .skeleton-line + .skeleton-line {
1232
+ margin-top: 8px;
1233
+ }
1234
+
1235
+ .skeleton-line.w-75 {
1236
+ width: 75%;
1237
+ }
1238
+ .skeleton-line.w-50 {
1239
+ width: 50%;
1240
+ }
1241
+ .skeleton-line.w-25 {
1242
+ width: 25%;
1243
+ }
1244
+
1245
+ /* ── Animations ────────────────────────────────────────────────────────── */
1246
+ @keyframes spin {
1247
+ to {
1248
+ transform: rotate(360deg);
1249
+ }
1250
+ }
1251
+
1252
+ @keyframes toastIn {
1253
+ from {
1254
+ opacity: 0;
1255
+ transform: translateX(30px);
1256
+ }
1257
+ to {
1258
+ opacity: 1;
1259
+ transform: translateX(0);
1260
+ }
1261
+ }
1262
+
1263
+ @keyframes toastOut {
1264
+ from {
1265
+ opacity: 1;
1266
+ transform: translateX(0);
1267
+ }
1268
+ to {
1269
+ opacity: 0;
1270
+ transform: translateX(30px);
1271
+ }
1272
+ }
1273
+
1274
+ @keyframes pulse {
1275
+ 0%,
1276
+ 100% {
1277
+ opacity: 0.4;
1278
+ }
1279
+ 50% {
1280
+ opacity: 0.8;
1281
+ }
1282
+ }
1283
+
1284
+ @keyframes fadeInUp {
1285
+ from {
1286
+ opacity: 0;
1287
+ transform: translateY(8px);
1288
+ }
1289
+ to {
1290
+ opacity: 1;
1291
+ transform: translateY(0);
1292
+ }
1293
+ }
1294
+
1295
+ /* ── Panel Metadata ────────────────────────────────────────────────────── */
1296
+ .panel-meta {
1297
+ display: flex;
1298
+ flex-wrap: wrap;
1299
+ align-items: center;
1300
+ gap: 8px;
1301
+ padding: 0 0 12px;
1302
+ border-bottom: 1px solid var(--border-light);
1303
+ margin-bottom: 16px;
1304
+ }
1305
+
1306
+ .panel-meta-item {
1307
+ display: inline-flex;
1308
+ align-items: center;
1309
+ gap: 4px;
1310
+ font-size: 12px;
1311
+ color: var(--text-muted);
1312
+ }
1313
+
1314
+ .panel-meta-date {
1315
+ font-size: 11px;
1316
+ font-family: var(--font-mono);
1317
+ color: var(--text-dim);
1318
+ }
1319
+
1320
+ .panel-icon {
1321
+ font-size: 18px;
1322
+ color: var(--accent);
1323
+ vertical-align: middle;
1324
+ margin-right: 4px;
1325
+ }
1326
+
1327
+ .panel-section {
1328
+ margin-bottom: 16px;
1329
+ }
1330
+
1331
+ .panel-section-title {
1332
+ font-size: 12px;
1333
+ font-weight: 600;
1334
+ text-transform: uppercase;
1335
+ letter-spacing: 0.5px;
1336
+ color: var(--text-muted);
1337
+ margin-bottom: 8px;
1338
+ }
1339
+
1340
+ .panel-topics {
1341
+ padding-left: 16px;
1342
+ font-size: 12px;
1343
+ color: var(--text-secondary);
1344
+ line-height: 1.6;
1345
+ }
1346
+
1347
+ .panel-topics li {
1348
+ margin-bottom: 4px;
1349
+ }
1350
+
1351
+ .panel-visible .side-panel {
1352
+ width: var(--panel-width);
1353
+ min-width: var(--panel-width);
1354
+ }
1355
+
1356
+ /* ── Loading Inline ────────────────────────────────────────────────────── */
1357
+ .loading-inline {
1358
+ display: flex;
1359
+ align-items: center;
1360
+ justify-content: center;
1361
+ gap: 8px;
1362
+ padding: 24px;
1363
+ color: var(--text-muted);
1364
+ font-size: 13px;
1365
+ }
1366
+
1367
+ .loading-spinner.small {
1368
+ width: 18px;
1369
+ height: 18px;
1370
+ border-width: 2px;
1371
+ }
1372
+
1373
+ /* ── Semantic Toggle ───────────────────────────────────────────────────── */
1374
+ .semantic-toggle {
1375
+ display: inline-flex;
1376
+ align-items: center;
1377
+ gap: 4px;
1378
+ font-size: 0.8rem;
1379
+ cursor: pointer;
1380
+ color: var(--text-secondary);
1381
+ user-select: none;
1382
+ margin-bottom: 16px;
1383
+ }
1384
+ .semantic-toggle input[type='checkbox'] {
1385
+ accent-color: var(--accent);
1386
+ }
1387
+ .semantic-toggle .toggle-icon {
1388
+ font-size: 16px;
1389
+ }
1390
+
1391
+ /* ── Embeddings Dashboard ─────────────────────────────────────────────── */
1392
+ .embeddings-dashboard {
1393
+ padding: 1rem 0;
1394
+ }
1395
+ .embedding-stats-grid {
1396
+ display: grid;
1397
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
1398
+ gap: 1rem;
1399
+ }
1400
+ .embedding-stat-card {
1401
+ background: var(--bg-elevated);
1402
+ border: 1px solid var(--border-light);
1403
+ border-radius: var(--radius-sm);
1404
+ padding: 1rem;
1405
+ display: flex;
1406
+ flex-direction: column;
1407
+ gap: 0.25rem;
1408
+ }
1409
+ .embedding-stat-card .stat-label {
1410
+ font-size: 0.75rem;
1411
+ color: var(--text-secondary);
1412
+ text-transform: uppercase;
1413
+ letter-spacing: 0.5px;
1414
+ }
1415
+ .embedding-stat-card .stat-number {
1416
+ font-size: 1.5rem;
1417
+ font-weight: 600;
1418
+ color: var(--text);
1419
+ font-family: var(--font-mono);
1420
+ }
1421
+ .embedding-stat-card .stat-detail {
1422
+ font-size: 0.8rem;
1423
+ color: var(--text-muted);
1424
+ }
1425
+
1426
+ /* ── Score Type Indicator ─────────────────────────────────────────────── */
1427
+ .score-type {
1428
+ font-size: 0.65rem;
1429
+ padding: 1px 4px;
1430
+ border-radius: 3px;
1431
+ margin-left: 4px;
1432
+ font-weight: 500;
1433
+ }
1434
+ .score-type.hybrid {
1435
+ background: var(--accent-dim);
1436
+ color: var(--accent);
1437
+ }
1438
+ .score-type.tfidf {
1439
+ background: rgba(128, 128, 128, 0.15);
1440
+ color: var(--text-secondary);
1441
+ }
1442
+
1443
+ /* ── Responsive ────────────────────────────────────────────────────────── */
1444
+ @media (max-width: 1024px) {
1445
+ .side-panel.open {
1446
+ position: fixed;
1447
+ right: 0;
1448
+ top: 0;
1449
+ bottom: 0;
1450
+ z-index: 50;
1451
+ }
1452
+ }
1453
+
1454
+ @media (max-width: 768px) {
1455
+ #content {
1456
+ padding: 12px 16px;
1457
+ }
1458
+ .card-grid {
1459
+ grid-template-columns: 1fr;
1460
+ }
1461
+ .tab {
1462
+ padding: 8px 12px;
1463
+ font-size: 12px;
1464
+ }
1465
+ .tab-icon {
1466
+ font-size: 18px;
1467
+ }
1468
+ .side-panel.open {
1469
+ width: 100vw;
1470
+ min-width: 100vw;
1471
+ }
1472
+ .search-controls {
1473
+ flex-direction: column;
1474
+ align-items: stretch;
1475
+ }
1476
+ header {
1477
+ padding: 6px 12px;
1478
+ }
1479
+ .stats {
1480
+ display: none;
1481
+ }
1482
+ }
1483
+
1484
+ @media (max-width: 480px) {
1485
+ .tab {
1486
+ padding: 8px 10px;
1487
+ gap: 4px;
1488
+ }
1489
+ }
1490
+
1491
+ /* ── Reduced Motion ────────────────────────────────────────────────────── */
1492
+ @media (prefers-reduced-motion: reduce) {
1493
+ *,
1494
+ *::before,
1495
+ *::after {
1496
+ animation-duration: 0.01ms !important;
1497
+ transition-duration: 0.01ms !important;
1498
+ }
1499
+ }
1500
+
1501
+ /* ── Focus Visible ─────────────────────────────────────────────────────── */
1502
+ :focus-visible {
1503
+ outline: 2px solid var(--accent);
1504
+ outline-offset: 1px;
1505
+ }
1506
+
1507
+ /* ── Selection ─────────────────────────────────────────────────────────── */
1508
+ ::selection {
1509
+ background: var(--accent-dim);
1510
+ color: var(--text);
1511
+ }