runtime-memory 3.0.0__py3-none-any.whl

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 (54) hide show
  1. runtime_memory/__init__.py +28 -0
  2. runtime_memory/claude_code/__init__.py +48 -0
  3. runtime_memory/claude_code/commands.py +698 -0
  4. runtime_memory/claude_code/daemon.py +852 -0
  5. runtime_memory/claude_code/hooks.py +722 -0
  6. runtime_memory/cli/__init__.py +8 -0
  7. runtime_memory/cli/main.py +1936 -0
  8. runtime_memory/core/__init__.py +216 -0
  9. runtime_memory/core/config.py +473 -0
  10. runtime_memory/core/embeddings.py +908 -0
  11. runtime_memory/core/engine.py +1007 -0
  12. runtime_memory/core/exceptions.py +547 -0
  13. runtime_memory/core/legacy_env.py +39 -0
  14. runtime_memory/core/logging.py +160 -0
  15. runtime_memory/core/models.py +1051 -0
  16. runtime_memory/core/observability.py +725 -0
  17. runtime_memory/core/paths.py +30 -0
  18. runtime_memory/core/resilience.py +511 -0
  19. runtime_memory/core/retrieval.py +819 -0
  20. runtime_memory/core/storage.py +1105 -0
  21. runtime_memory/extraction/__init__.py +36 -0
  22. runtime_memory/extraction/extractor.py +1143 -0
  23. runtime_memory/hermes/__init__.py +39 -0
  24. runtime_memory/hermes/_base.py +154 -0
  25. runtime_memory/hermes/bridge.py +119 -0
  26. runtime_memory/hermes/plugin.yaml +13 -0
  27. runtime_memory/hermes/provider.py +536 -0
  28. runtime_memory/hermes/tools.py +230 -0
  29. runtime_memory/hermes/trace.py +177 -0
  30. runtime_memory/plugin/__init__.py +646 -0
  31. runtime_memory/sdk/__init__.py +97 -0
  32. runtime_memory/sdk/client.py +1577 -0
  33. runtime_memory/server/__init__.py +75 -0
  34. runtime_memory/server/api.py +1665 -0
  35. runtime_memory/server/mcp.py +1574 -0
  36. runtime_memory/server/static/css/styles.css +1110 -0
  37. runtime_memory/server/static/index.html +264 -0
  38. runtime_memory/server/static/js/api.js +294 -0
  39. runtime_memory/server/static/js/app.js +771 -0
  40. runtime_memory/tasks/__init__.py +114 -0
  41. runtime_memory/tasks/adapter.py +501 -0
  42. runtime_memory/tasks/claude_code_adapter.py +495 -0
  43. runtime_memory/tasks/claude_code_parser.py +339 -0
  44. runtime_memory/tasks/cli_bridge.py +415 -0
  45. runtime_memory/tasks/linking.py +397 -0
  46. runtime_memory/tasks/models.py +520 -0
  47. runtime_memory/tasks/outcomes.py +320 -0
  48. runtime_memory/tasks/parser.py +305 -0
  49. runtime_memory/tasks/unified_adapter.py +661 -0
  50. runtime_memory-3.0.0.dist-info/METADATA +497 -0
  51. runtime_memory-3.0.0.dist-info/RECORD +54 -0
  52. runtime_memory-3.0.0.dist-info/WHEEL +4 -0
  53. runtime_memory-3.0.0.dist-info/entry_points.txt +6 -0
  54. runtime_memory-3.0.0.dist-info/licenses/LICENSE +21 -0
@@ -0,0 +1,1110 @@
1
+ /* Runtime Memory Web UI - Styles */
2
+
3
+ /* =============================================================================
4
+ CSS Variables - Theme Support
5
+ ============================================================================= */
6
+
7
+ :root {
8
+ /* Light theme */
9
+ --bg-primary: #ffffff;
10
+ --bg-secondary: #f5f5f5;
11
+ --bg-tertiary: #e8e8e8;
12
+ --text-primary: #1a1a1a;
13
+ --text-secondary: #666666;
14
+ --text-muted: #999999;
15
+ --border-color: #e0e0e0;
16
+ --accent-color: #6366f1;
17
+ --accent-hover: #4f46e5;
18
+ --success-color: #10b981;
19
+ --warning-color: #f59e0b;
20
+ --danger-color: #ef4444;
21
+ --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
22
+ --modal-overlay: rgba(0, 0, 0, 0.5);
23
+ }
24
+
25
+ [data-theme="dark"] {
26
+ --bg-primary: #1a1a2e;
27
+ --bg-secondary: #16213e;
28
+ --bg-tertiary: #0f3460;
29
+ --text-primary: #eaeaea;
30
+ --text-secondary: #b0b0b0;
31
+ --text-muted: #707070;
32
+ --border-color: #2a2a4a;
33
+ --accent-color: #818cf8;
34
+ --accent-hover: #6366f1;
35
+ --success-color: #34d399;
36
+ --warning-color: #fbbf24;
37
+ --danger-color: #f87171;
38
+ --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
39
+ --modal-overlay: rgba(0, 0, 0, 0.7);
40
+ }
41
+
42
+ /* =============================================================================
43
+ Base Styles
44
+ ============================================================================= */
45
+
46
+ * {
47
+ box-sizing: border-box;
48
+ margin: 0;
49
+ padding: 0;
50
+ }
51
+
52
+ body {
53
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
54
+ background-color: var(--bg-primary);
55
+ color: var(--text-primary);
56
+ line-height: 1.6;
57
+ min-height: 100vh;
58
+ }
59
+
60
+ #app {
61
+ display: flex;
62
+ flex-direction: column;
63
+ min-height: 100vh;
64
+ }
65
+
66
+ /* =============================================================================
67
+ Header
68
+ ============================================================================= */
69
+
70
+ .header {
71
+ background-color: var(--bg-secondary);
72
+ border-bottom: 1px solid var(--border-color);
73
+ position: sticky;
74
+ top: 0;
75
+ z-index: 100;
76
+ }
77
+
78
+ .header-inner {
79
+ display: flex;
80
+ align-items: center;
81
+ justify-content: space-between;
82
+ padding: 0.75rem 1.5rem;
83
+ max-width: 1400px;
84
+ margin: 0 auto;
85
+ width: 100%;
86
+ box-sizing: border-box;
87
+ }
88
+
89
+ .header-brand {
90
+ display: flex;
91
+ align-items: baseline;
92
+ gap: 0.5rem;
93
+ }
94
+
95
+ .header-brand h1 {
96
+ font-size: 1.25rem;
97
+ font-weight: 600;
98
+ color: var(--accent-color);
99
+ }
100
+
101
+ .version {
102
+ font-size: 0.75rem;
103
+ color: var(--text-muted);
104
+ }
105
+
106
+ .nav {
107
+ display: flex;
108
+ gap: 0.25rem;
109
+ }
110
+
111
+ .nav-btn {
112
+ padding: 0.5rem 1rem;
113
+ background: transparent;
114
+ border: none;
115
+ color: var(--text-secondary);
116
+ cursor: pointer;
117
+ border-radius: 0.375rem;
118
+ font-size: 0.875rem;
119
+ transition: all 0.15s ease;
120
+ }
121
+
122
+ .nav-btn:hover {
123
+ background-color: var(--bg-tertiary);
124
+ color: var(--text-primary);
125
+ }
126
+
127
+ .nav-btn.active {
128
+ background-color: var(--accent-color);
129
+ color: white;
130
+ }
131
+
132
+ .header-actions {
133
+ display: flex;
134
+ gap: 0.5rem;
135
+ }
136
+
137
+ .icon-btn {
138
+ width: 2rem;
139
+ height: 2rem;
140
+ display: flex;
141
+ align-items: center;
142
+ justify-content: center;
143
+ background: transparent;
144
+ border: 1px solid var(--border-color);
145
+ border-radius: 0.375rem;
146
+ cursor: pointer;
147
+ color: var(--text-secondary);
148
+ font-size: 1rem;
149
+ transition: all 0.15s ease;
150
+ }
151
+
152
+ .icon-btn:hover {
153
+ background-color: var(--bg-tertiary);
154
+ color: var(--text-primary);
155
+ }
156
+
157
+ /* =============================================================================
158
+ Main Content
159
+ ============================================================================= */
160
+
161
+ .main {
162
+ flex: 1;
163
+ padding: 1.5rem;
164
+ max-width: 1400px;
165
+ margin: 0 auto;
166
+ width: 100%;
167
+ }
168
+
169
+ .view {
170
+ display: none;
171
+ }
172
+
173
+ .view.active {
174
+ display: block;
175
+ }
176
+
177
+ .view h2 {
178
+ margin-bottom: 1.5rem;
179
+ font-size: 1.5rem;
180
+ font-weight: 600;
181
+ }
182
+
183
+ /* =============================================================================
184
+ Dashboard
185
+ ============================================================================= */
186
+
187
+ .stats-grid {
188
+ display: grid;
189
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
190
+ gap: 1rem;
191
+ margin-bottom: 1.5rem;
192
+ }
193
+
194
+ .stat-card {
195
+ background-color: var(--bg-secondary);
196
+ border: 1px solid var(--border-color);
197
+ border-radius: 0.5rem;
198
+ padding: 1.25rem;
199
+ text-align: center;
200
+ box-shadow: var(--card-shadow);
201
+ }
202
+
203
+ .stat-value {
204
+ font-size: 2rem;
205
+ font-weight: 700;
206
+ color: var(--accent-color);
207
+ }
208
+
209
+ .stat-label {
210
+ font-size: 0.875rem;
211
+ color: var(--text-secondary);
212
+ margin-top: 0.25rem;
213
+ }
214
+
215
+ .dashboard-grid {
216
+ display: grid;
217
+ grid-template-columns: 1fr 1fr;
218
+ gap: 1.5rem;
219
+ margin-bottom: 1.5rem;
220
+ }
221
+
222
+ @media (max-width: 768px) {
223
+ .dashboard-grid {
224
+ grid-template-columns: 1fr;
225
+ }
226
+ }
227
+
228
+ .card {
229
+ background-color: var(--bg-secondary);
230
+ border: 1px solid var(--border-color);
231
+ border-radius: 0.5rem;
232
+ padding: 1.25rem;
233
+ box-shadow: var(--card-shadow);
234
+ }
235
+
236
+ .card h3 {
237
+ font-size: 1rem;
238
+ font-weight: 600;
239
+ margin-bottom: 1rem;
240
+ color: var(--text-primary);
241
+ }
242
+
243
+ .chart-container {
244
+ min-height: 200px;
245
+ }
246
+
247
+ .category-bars {
248
+ display: flex;
249
+ flex-direction: column;
250
+ gap: 0.5rem;
251
+ }
252
+
253
+ .category-bar {
254
+ display: flex;
255
+ align-items: center;
256
+ gap: 0.75rem;
257
+ }
258
+
259
+ .category-bar .label {
260
+ width: 100px;
261
+ font-size: 0.75rem;
262
+ color: var(--text-secondary);
263
+ text-transform: capitalize;
264
+ }
265
+
266
+ .category-bar .bar-container {
267
+ flex: 1;
268
+ height: 1.25rem;
269
+ background-color: var(--bg-tertiary);
270
+ border-radius: 0.25rem;
271
+ overflow: hidden;
272
+ }
273
+
274
+ .category-bar .bar {
275
+ height: 100%;
276
+ background-color: var(--accent-color);
277
+ border-radius: 0.25rem;
278
+ transition: width 0.3s ease;
279
+ }
280
+
281
+ .category-bar .count {
282
+ width: 40px;
283
+ font-size: 0.75rem;
284
+ color: var(--text-muted);
285
+ text-align: right;
286
+ }
287
+
288
+ .recent-list {
289
+ max-height: 250px;
290
+ overflow-y: auto;
291
+ }
292
+
293
+ .recent-item {
294
+ padding: 0.75rem;
295
+ border-bottom: 1px solid var(--border-color);
296
+ cursor: pointer;
297
+ transition: background-color 0.15s ease;
298
+ }
299
+
300
+ .recent-item:last-child {
301
+ border-bottom: none;
302
+ }
303
+
304
+ .recent-item:hover {
305
+ background-color: var(--bg-tertiary);
306
+ }
307
+
308
+ .recent-item .content {
309
+ font-size: 0.875rem;
310
+ color: var(--text-primary);
311
+ white-space: nowrap;
312
+ overflow: hidden;
313
+ text-overflow: ellipsis;
314
+ }
315
+
316
+ .recent-item .meta {
317
+ display: flex;
318
+ gap: 0.75rem;
319
+ margin-top: 0.25rem;
320
+ font-size: 0.75rem;
321
+ color: var(--text-muted);
322
+ }
323
+
324
+ .quick-actions {
325
+ display: flex;
326
+ gap: 0.75rem;
327
+ flex-wrap: wrap;
328
+ }
329
+
330
+ /* =============================================================================
331
+ Buttons
332
+ ============================================================================= */
333
+
334
+ .btn {
335
+ display: inline-flex;
336
+ align-items: center;
337
+ justify-content: center;
338
+ padding: 0.5rem 1rem;
339
+ font-size: 0.875rem;
340
+ font-weight: 500;
341
+ border-radius: 0.375rem;
342
+ border: none;
343
+ cursor: pointer;
344
+ transition: all 0.15s ease;
345
+ }
346
+
347
+ .btn-primary {
348
+ background-color: var(--accent-color);
349
+ color: white;
350
+ }
351
+
352
+ .btn-primary:hover {
353
+ background-color: var(--accent-hover);
354
+ }
355
+
356
+ .btn-secondary {
357
+ background-color: var(--bg-tertiary);
358
+ color: var(--text-primary);
359
+ border: 1px solid var(--border-color);
360
+ }
361
+
362
+ .btn-secondary:hover {
363
+ background-color: var(--border-color);
364
+ }
365
+
366
+ .btn-success {
367
+ background-color: var(--success-color);
368
+ color: white;
369
+ }
370
+
371
+ .btn-warning {
372
+ background-color: var(--warning-color);
373
+ color: white;
374
+ }
375
+
376
+ .btn-danger {
377
+ background-color: var(--danger-color);
378
+ color: white;
379
+ }
380
+
381
+ .btn-sm {
382
+ padding: 0.25rem 0.5rem;
383
+ font-size: 0.75rem;
384
+ }
385
+
386
+ /* =============================================================================
387
+ Memories List
388
+ ============================================================================= */
389
+
390
+ .view-header {
391
+ display: flex;
392
+ justify-content: space-between;
393
+ align-items: center;
394
+ margin-bottom: 1rem;
395
+ flex-wrap: wrap;
396
+ gap: 1rem;
397
+ }
398
+
399
+ .filters {
400
+ display: flex;
401
+ gap: 0.5rem;
402
+ flex-wrap: wrap;
403
+ }
404
+
405
+ .filter-select, .filter-input {
406
+ padding: 0.5rem 0.75rem;
407
+ font-size: 0.875rem;
408
+ border: 1px solid var(--border-color);
409
+ border-radius: 0.375rem;
410
+ background-color: var(--bg-secondary);
411
+ color: var(--text-primary);
412
+ }
413
+
414
+ .filter-input {
415
+ width: 200px;
416
+ }
417
+
418
+ .table-container {
419
+ overflow-x: auto;
420
+ background-color: var(--bg-secondary);
421
+ border: 1px solid var(--border-color);
422
+ border-radius: 0.5rem;
423
+ }
424
+
425
+ .memory-table {
426
+ width: 100%;
427
+ border-collapse: collapse;
428
+ }
429
+
430
+ .memory-table th,
431
+ .memory-table td {
432
+ padding: 0.75rem 1rem;
433
+ text-align: left;
434
+ border-bottom: 1px solid var(--border-color);
435
+ }
436
+
437
+ .memory-table th {
438
+ background-color: var(--bg-tertiary);
439
+ font-size: 0.75rem;
440
+ font-weight: 600;
441
+ text-transform: uppercase;
442
+ color: var(--text-secondary);
443
+ }
444
+
445
+ .memory-table tbody tr {
446
+ transition: background-color 0.15s ease;
447
+ }
448
+
449
+ .memory-table tbody tr:hover {
450
+ background-color: var(--bg-tertiary);
451
+ cursor: pointer;
452
+ }
453
+
454
+ .memory-table .content-cell {
455
+ max-width: 400px;
456
+ white-space: nowrap;
457
+ overflow: hidden;
458
+ text-overflow: ellipsis;
459
+ }
460
+
461
+ .memory-table .score-cell {
462
+ font-weight: 600;
463
+ }
464
+
465
+ .memory-table .score-cell.positive {
466
+ color: var(--success-color);
467
+ }
468
+
469
+ .memory-table .score-cell.negative {
470
+ color: var(--danger-color);
471
+ }
472
+
473
+ .memory-table .actions-cell {
474
+ white-space: nowrap;
475
+ }
476
+
477
+ .category-badge {
478
+ display: inline-block;
479
+ padding: 0.25rem 0.5rem;
480
+ font-size: 0.75rem;
481
+ font-weight: 500;
482
+ border-radius: 0.25rem;
483
+ background-color: var(--accent-color);
484
+ color: white;
485
+ text-transform: capitalize;
486
+ }
487
+
488
+ /* Category colors */
489
+ .category-badge.architecture { background-color: #3b82f6; } /* blue */
490
+ .category-badge.convention { background-color: #8b5cf6; } /* purple */
491
+ .category-badge.decision { background-color: #06b6d4; } /* cyan */
492
+ .category-badge.pattern { background-color: var(--success-color); } /* green */
493
+ .category-badge.gotcha { background-color: var(--danger-color); } /* red */
494
+ .category-badge.workaround { background-color: #f97316; } /* orange */
495
+ .category-badge.troubleshooting { background-color: var(--warning-color); } /* amber */
496
+ .category-badge.command { background-color: #64748b; } /* slate */
497
+ .category-badge.preference { background-color: #ec4899; } /* pink */
498
+ .category-badge.general { background-color: #6b7280; } /* gray */
499
+
500
+ .pagination {
501
+ display: flex;
502
+ justify-content: center;
503
+ gap: 0.5rem;
504
+ margin-top: 1rem;
505
+ }
506
+
507
+ .pagination button {
508
+ padding: 0.5rem 0.75rem;
509
+ background-color: var(--bg-secondary);
510
+ border: 1px solid var(--border-color);
511
+ border-radius: 0.375rem;
512
+ cursor: pointer;
513
+ color: var(--text-primary);
514
+ }
515
+
516
+ .pagination button.active {
517
+ background-color: var(--accent-color);
518
+ color: white;
519
+ border-color: var(--accent-color);
520
+ }
521
+
522
+ /* =============================================================================
523
+ Search View
524
+ ============================================================================= */
525
+
526
+ .search-box {
527
+ display: flex;
528
+ gap: 0.5rem;
529
+ margin-bottom: 1rem;
530
+ }
531
+
532
+ .search-input {
533
+ flex: 1;
534
+ padding: 0.75rem 1rem;
535
+ font-size: 1rem;
536
+ border: 1px solid var(--border-color);
537
+ border-radius: 0.375rem;
538
+ background-color: var(--bg-secondary);
539
+ color: var(--text-primary);
540
+ }
541
+
542
+ .search-input:focus {
543
+ outline: none;
544
+ border-color: var(--accent-color);
545
+ }
546
+
547
+ .search-filters {
548
+ display: flex;
549
+ gap: 1rem;
550
+ margin-bottom: 1.5rem;
551
+ flex-wrap: wrap;
552
+ }
553
+
554
+ .search-filters label {
555
+ display: flex;
556
+ align-items: center;
557
+ gap: 0.375rem;
558
+ font-size: 0.875rem;
559
+ color: var(--text-secondary);
560
+ cursor: pointer;
561
+ }
562
+
563
+ .search-results {
564
+ display: flex;
565
+ flex-direction: column;
566
+ gap: 0.75rem;
567
+ }
568
+
569
+ .search-result {
570
+ background-color: var(--bg-secondary);
571
+ border: 1px solid var(--border-color);
572
+ border-radius: 0.5rem;
573
+ padding: 1rem;
574
+ cursor: pointer;
575
+ transition: all 0.15s ease;
576
+ }
577
+
578
+ .search-result:hover {
579
+ border-color: var(--accent-color);
580
+ box-shadow: 0 0 0 1px var(--accent-color);
581
+ }
582
+
583
+ .search-result .header {
584
+ display: flex;
585
+ justify-content: space-between;
586
+ align-items: center;
587
+ margin-bottom: 0.5rem;
588
+ }
589
+
590
+ .search-result .content {
591
+ font-size: 0.9375rem;
592
+ color: var(--text-primary);
593
+ margin-bottom: 0.5rem;
594
+ }
595
+
596
+ .search-result .meta {
597
+ display: flex;
598
+ gap: 1rem;
599
+ font-size: 0.75rem;
600
+ color: var(--text-muted);
601
+ }
602
+
603
+ .relevance-score {
604
+ font-size: 0.75rem;
605
+ font-weight: 600;
606
+ color: var(--accent-color);
607
+ }
608
+
609
+ /* =============================================================================
610
+ Add Memory Form
611
+ ============================================================================= */
612
+
613
+ .memory-form {
614
+ max-width: 600px;
615
+ background-color: var(--bg-secondary);
616
+ border: 1px solid var(--border-color);
617
+ border-radius: 0.5rem;
618
+ padding: 1.5rem;
619
+ }
620
+
621
+ .form-group {
622
+ margin-bottom: 1.25rem;
623
+ }
624
+
625
+ .form-group label {
626
+ display: block;
627
+ margin-bottom: 0.5rem;
628
+ font-size: 0.875rem;
629
+ font-weight: 500;
630
+ color: var(--text-primary);
631
+ }
632
+
633
+ .form-group textarea,
634
+ .form-group input,
635
+ .form-group select {
636
+ width: 100%;
637
+ padding: 0.75rem;
638
+ font-size: 0.9375rem;
639
+ border: 1px solid var(--border-color);
640
+ border-radius: 0.375rem;
641
+ background-color: var(--bg-primary);
642
+ color: var(--text-primary);
643
+ }
644
+
645
+ .form-group textarea:focus,
646
+ .form-group input:focus,
647
+ .form-group select:focus {
648
+ outline: none;
649
+ border-color: var(--accent-color);
650
+ }
651
+
652
+ .form-row {
653
+ display: grid;
654
+ grid-template-columns: 1fr 1fr;
655
+ gap: 1rem;
656
+ }
657
+
658
+ @media (max-width: 600px) {
659
+ .form-row {
660
+ grid-template-columns: 1fr;
661
+ }
662
+ }
663
+
664
+ .form-actions {
665
+ display: flex;
666
+ gap: 0.75rem;
667
+ margin-top: 1.5rem;
668
+ }
669
+
670
+ /* =============================================================================
671
+ Modal
672
+ ============================================================================= */
673
+
674
+ .modal {
675
+ display: none;
676
+ position: fixed;
677
+ top: 0;
678
+ left: 0;
679
+ width: 100%;
680
+ height: 100%;
681
+ background-color: var(--modal-overlay);
682
+ z-index: 1000;
683
+ align-items: center;
684
+ justify-content: center;
685
+ }
686
+
687
+ .modal.active {
688
+ display: flex;
689
+ }
690
+
691
+ .modal-content {
692
+ background-color: var(--bg-secondary);
693
+ border: 1px solid var(--border-color);
694
+ border-radius: 0.5rem;
695
+ width: 90%;
696
+ max-width: 600px;
697
+ max-height: 90vh;
698
+ overflow: hidden;
699
+ display: flex;
700
+ flex-direction: column;
701
+ }
702
+
703
+ .modal-header {
704
+ display: flex;
705
+ justify-content: space-between;
706
+ align-items: center;
707
+ padding: 1rem 1.25rem;
708
+ border-bottom: 1px solid var(--border-color);
709
+ }
710
+
711
+ .modal-header h3 {
712
+ font-size: 1.125rem;
713
+ font-weight: 600;
714
+ }
715
+
716
+ .close-btn {
717
+ width: 2rem;
718
+ height: 2rem;
719
+ display: flex;
720
+ align-items: center;
721
+ justify-content: center;
722
+ background: transparent;
723
+ border: none;
724
+ font-size: 1.5rem;
725
+ cursor: pointer;
726
+ color: var(--text-secondary);
727
+ border-radius: 0.25rem;
728
+ }
729
+
730
+ .close-btn:hover {
731
+ background-color: var(--bg-tertiary);
732
+ color: var(--text-primary);
733
+ }
734
+
735
+ .modal-body {
736
+ padding: 1.25rem;
737
+ overflow-y: auto;
738
+ flex: 1;
739
+ }
740
+
741
+ .modal-body .detail-row {
742
+ margin-bottom: 1rem;
743
+ }
744
+
745
+ .modal-body .detail-label {
746
+ font-size: 0.75rem;
747
+ font-weight: 600;
748
+ text-transform: uppercase;
749
+ color: var(--text-muted);
750
+ margin-bottom: 0.25rem;
751
+ }
752
+
753
+ .modal-body .detail-value {
754
+ font-size: 0.9375rem;
755
+ color: var(--text-primary);
756
+ }
757
+
758
+ .modal-body .detail-content {
759
+ background-color: var(--bg-primary);
760
+ padding: 1rem;
761
+ border-radius: 0.375rem;
762
+ font-size: 0.9375rem;
763
+ line-height: 1.6;
764
+ white-space: pre-wrap;
765
+ }
766
+
767
+ .modal-footer {
768
+ display: flex;
769
+ justify-content: space-between;
770
+ align-items: center;
771
+ padding: 1rem 1.25rem;
772
+ border-top: 1px solid var(--border-color);
773
+ flex-wrap: wrap;
774
+ gap: 0.75rem;
775
+ }
776
+
777
+ .outcome-buttons {
778
+ display: flex;
779
+ align-items: center;
780
+ gap: 0.5rem;
781
+ }
782
+
783
+ .outcome-buttons span {
784
+ font-size: 0.875rem;
785
+ color: var(--text-secondary);
786
+ }
787
+
788
+ .modal-actions {
789
+ display: flex;
790
+ gap: 0.5rem;
791
+ }
792
+
793
+ /* =============================================================================
794
+ Toast Notifications
795
+ ============================================================================= */
796
+
797
+ .toast-container {
798
+ position: fixed;
799
+ bottom: 1.5rem;
800
+ right: 1.5rem;
801
+ display: flex;
802
+ flex-direction: column;
803
+ gap: 0.5rem;
804
+ z-index: 2000;
805
+ }
806
+
807
+ .toast {
808
+ padding: 0.75rem 1rem;
809
+ border-radius: 0.375rem;
810
+ font-size: 0.875rem;
811
+ color: white;
812
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
813
+ animation: slideIn 0.3s ease;
814
+ }
815
+
816
+ .toast.success { background-color: var(--success-color); }
817
+ .toast.warning { background-color: var(--warning-color); }
818
+ .toast.error { background-color: var(--danger-color); }
819
+ .toast.info { background-color: var(--accent-color); }
820
+
821
+ @keyframes slideIn {
822
+ from {
823
+ transform: translateX(100%);
824
+ opacity: 0;
825
+ }
826
+ to {
827
+ transform: translateX(0);
828
+ opacity: 1;
829
+ }
830
+ }
831
+
832
+ /* =============================================================================
833
+ Empty States
834
+ ============================================================================= */
835
+
836
+ .empty-state {
837
+ text-align: center;
838
+ padding: 3rem 1rem;
839
+ color: var(--text-muted);
840
+ }
841
+
842
+ .empty-state .icon {
843
+ font-size: 3rem;
844
+ margin-bottom: 1rem;
845
+ }
846
+
847
+ .empty-state h3 {
848
+ font-size: 1.125rem;
849
+ color: var(--text-secondary);
850
+ margin-bottom: 0.5rem;
851
+ }
852
+
853
+ .empty-state p {
854
+ font-size: 0.875rem;
855
+ }
856
+
857
+ /* =============================================================================
858
+ Loading State
859
+ ============================================================================= */
860
+
861
+ .loading {
862
+ display: flex;
863
+ justify-content: center;
864
+ align-items: center;
865
+ padding: 2rem;
866
+ }
867
+
868
+ .spinner {
869
+ width: 2rem;
870
+ height: 2rem;
871
+ border: 3px solid var(--border-color);
872
+ border-top-color: var(--accent-color);
873
+ border-radius: 50%;
874
+ animation: spin 0.8s linear infinite;
875
+ }
876
+
877
+ @keyframes spin {
878
+ to { transform: rotate(360deg); }
879
+ }
880
+
881
+ /* =============================================================================
882
+ Beads/Tasks View
883
+ ============================================================================= */
884
+
885
+ .beads-stats-grid {
886
+ display: grid;
887
+ grid-template-columns: repeat(4, 1fr);
888
+ gap: 1rem;
889
+ margin-bottom: 1.5rem;
890
+ }
891
+
892
+ .task-list {
893
+ display: flex;
894
+ flex-direction: column;
895
+ gap: 0.5rem;
896
+ }
897
+
898
+ .task-item {
899
+ display: flex;
900
+ align-items: center;
901
+ gap: 1rem;
902
+ padding: 1rem;
903
+ background-color: var(--bg-secondary);
904
+ border: 1px solid var(--border-color);
905
+ border-radius: 0.5rem;
906
+ cursor: pointer;
907
+ transition: all 0.2s ease;
908
+ }
909
+
910
+ .task-item:hover {
911
+ border-color: var(--accent-color);
912
+ background-color: var(--bg-tertiary);
913
+ }
914
+
915
+ .task-item.done {
916
+ opacity: 0.7;
917
+ }
918
+
919
+ .task-status {
920
+ flex-shrink: 0;
921
+ }
922
+
923
+ .task-source {
924
+ flex-shrink: 0;
925
+ }
926
+
927
+ .source-badge {
928
+ display: inline-flex;
929
+ align-items: center;
930
+ justify-content: center;
931
+ width: 1.5rem;
932
+ height: 1.5rem;
933
+ font-size: 0.75rem;
934
+ font-weight: 600;
935
+ border-radius: 0.25rem;
936
+ background-color: var(--bg-tertiary);
937
+ color: var(--text-secondary);
938
+ }
939
+
940
+ .source-badge.source-beads {
941
+ background-color: rgba(99, 102, 241, 0.2);
942
+ color: #6366f1;
943
+ }
944
+
945
+ .source-badge.source-claude {
946
+ background-color: rgba(217, 119, 6, 0.2);
947
+ color: #d97706;
948
+ }
949
+
950
+ .task-source-badge {
951
+ padding: 0.25rem 0.5rem;
952
+ font-size: 0.75rem;
953
+ border-radius: 0.25rem;
954
+ background-color: var(--bg-tertiary);
955
+ color: var(--text-secondary);
956
+ }
957
+
958
+ #tasks-sources {
959
+ font-size: 0.875rem;
960
+ color: var(--text-secondary);
961
+ margin-top: 0.5rem;
962
+ }
963
+
964
+ .status-icon {
965
+ display: flex;
966
+ align-items: center;
967
+ justify-content: center;
968
+ width: 2rem;
969
+ height: 2rem;
970
+ border-radius: 50%;
971
+ font-size: 0.875rem;
972
+ font-weight: bold;
973
+ }
974
+
975
+ .status-icon.success {
976
+ background-color: var(--success-color);
977
+ color: white;
978
+ }
979
+
980
+ .status-icon.warning {
981
+ background-color: var(--warning-color);
982
+ color: white;
983
+ }
984
+
985
+ .status-icon.secondary {
986
+ background-color: var(--bg-tertiary);
987
+ color: var(--text-secondary);
988
+ border: 2px solid var(--border-color);
989
+ }
990
+
991
+ .task-info {
992
+ flex: 1;
993
+ min-width: 0;
994
+ }
995
+
996
+ .task-title {
997
+ font-weight: 500;
998
+ color: var(--text-primary);
999
+ margin-bottom: 0.25rem;
1000
+ }
1001
+
1002
+ .task-meta {
1003
+ display: flex;
1004
+ gap: 1rem;
1005
+ font-size: 0.8rem;
1006
+ color: var(--text-muted);
1007
+ }
1008
+
1009
+ .task-id {
1010
+ font-family: monospace;
1011
+ }
1012
+
1013
+ .task-status-text {
1014
+ text-transform: capitalize;
1015
+ }
1016
+
1017
+ .task-actions {
1018
+ flex-shrink: 0;
1019
+ }
1020
+
1021
+ /* Task Context */
1022
+ .task-context-header {
1023
+ display: flex;
1024
+ justify-content: space-between;
1025
+ align-items: center;
1026
+ margin-bottom: 1rem;
1027
+ }
1028
+
1029
+ .task-context-content {
1030
+ padding: 1rem 0;
1031
+ }
1032
+
1033
+ .context-header {
1034
+ display: flex;
1035
+ gap: 1rem;
1036
+ align-items: center;
1037
+ margin-bottom: 1rem;
1038
+ padding-bottom: 1rem;
1039
+ border-bottom: 1px solid var(--border-color);
1040
+ }
1041
+
1042
+ .task-status-badge {
1043
+ display: inline-block;
1044
+ padding: 0.25rem 0.75rem;
1045
+ border-radius: 1rem;
1046
+ font-size: 0.75rem;
1047
+ font-weight: 500;
1048
+ text-transform: capitalize;
1049
+ }
1050
+
1051
+ .task-status-badge.done {
1052
+ background-color: var(--success-color);
1053
+ color: white;
1054
+ }
1055
+
1056
+ .task-status-badge.in_progress {
1057
+ background-color: var(--warning-color);
1058
+ color: white;
1059
+ }
1060
+
1061
+ .task-status-badge.pending {
1062
+ background-color: var(--bg-tertiary);
1063
+ color: var(--text-secondary);
1064
+ }
1065
+
1066
+ .memories-count {
1067
+ font-size: 0.875rem;
1068
+ color: var(--text-secondary);
1069
+ }
1070
+
1071
+ .context-memories {
1072
+ display: flex;
1073
+ flex-direction: column;
1074
+ gap: 0.75rem;
1075
+ }
1076
+
1077
+ .context-memory {
1078
+ display: flex;
1079
+ gap: 0.75rem;
1080
+ align-items: flex-start;
1081
+ padding: 0.75rem;
1082
+ background-color: var(--bg-secondary);
1083
+ border-radius: 0.375rem;
1084
+ }
1085
+
1086
+ .context-memory .category-badge {
1087
+ flex-shrink: 0;
1088
+ }
1089
+
1090
+ .context-memory .memory-content {
1091
+ flex: 1;
1092
+ font-size: 0.875rem;
1093
+ color: var(--text-primary);
1094
+ }
1095
+
1096
+ /* Responsive adjustments for beads */
1097
+ @media (max-width: 768px) {
1098
+ .beads-stats-grid {
1099
+ grid-template-columns: repeat(2, 1fr);
1100
+ }
1101
+
1102
+ .task-item {
1103
+ flex-wrap: wrap;
1104
+ }
1105
+
1106
+ .task-actions {
1107
+ width: 100%;
1108
+ margin-top: 0.5rem;
1109
+ }
1110
+ }