agent-knowledge 1.0.7 → 1.0.9

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