agent-knowledge 1.0.6 → 1.0.8

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 (17) hide show
  1. package/dist/dashboard.d.ts.map +1 -1
  2. package/dist/dashboard.js +1 -7
  3. package/dist/dashboard.js.map +1 -1
  4. package/dist/embeddings/local.d.ts +0 -7
  5. package/dist/embeddings/local.d.ts.map +1 -1
  6. package/dist/embeddings/local.js +0 -8
  7. package/dist/embeddings/local.js.map +1 -1
  8. package/dist/sessions/summary.d.ts +0 -4
  9. package/dist/sessions/summary.d.ts.map +1 -1
  10. package/dist/sessions/summary.js +88 -14
  11. package/dist/sessions/summary.js.map +1 -1
  12. package/dist/ui/app.js +967 -953
  13. package/dist/ui/styles.css +1522 -1511
  14. package/dist/vectorstore/store.d.ts.map +1 -1
  15. package/dist/vectorstore/store.js +12 -1
  16. package/dist/vectorstore/store.js.map +1 -1
  17. package/package.json +2 -2
package/dist/ui/styles.css CHANGED
@@ -1,1511 +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
- -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
- }
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
+ }