agent-knowledge 1.0.0 → 1.0.2

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