@teamclaws/teamclaw 2026.3.21

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.
@@ -0,0 +1,1281 @@
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ :root {
8
+ --bg-primary: #0f1117;
9
+ --bg-secondary: #1a1d27;
10
+ --bg-tertiary: #252836;
11
+ --text-primary: #e4e4e7;
12
+ --text-secondary: #a1a1aa;
13
+ --text-muted: #71717a;
14
+ --accent: #6366f1;
15
+ --accent-hover: #818cf8;
16
+ --success: #22c55e;
17
+ --warning: #eab308;
18
+ --danger: #ef4444;
19
+ --info: #3b82f6;
20
+ --border: #2e3140;
21
+ --radius: 8px;
22
+ --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
23
+ }
24
+
25
+ body {
26
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
27
+ background: var(--bg-primary);
28
+ color: var(--text-primary);
29
+ height: 100vh;
30
+ display: flex;
31
+ flex-direction: column;
32
+ overflow: hidden;
33
+ }
34
+
35
+ .header {
36
+ display: flex;
37
+ align-items: center;
38
+ justify-content: space-between;
39
+ padding: 12px 20px;
40
+ background: var(--bg-secondary);
41
+ border-bottom: 1px solid var(--border);
42
+ }
43
+
44
+ .header-title {
45
+ font-size: 18px;
46
+ font-weight: 700;
47
+ color: var(--accent);
48
+ }
49
+
50
+ .header-status {
51
+ display: flex;
52
+ align-items: center;
53
+ gap: 8px;
54
+ font-size: 14px;
55
+ color: var(--text-secondary);
56
+ }
57
+
58
+ .status-dot {
59
+ width: 8px;
60
+ height: 8px;
61
+ border-radius: 50%;
62
+ display: inline-block;
63
+ }
64
+
65
+ .status-dot.connected { background: var(--success); }
66
+ .status-dot.disconnected { background: var(--danger); }
67
+ .status-dot.connecting { background: var(--warning); animation: pulse 1s infinite; }
68
+
69
+ @keyframes pulse {
70
+ 0%, 100% { opacity: 1; }
71
+ 50% { opacity: 0.4; }
72
+ }
73
+
74
+ .main {
75
+ flex: 1;
76
+ display: flex;
77
+ overflow: hidden;
78
+ }
79
+
80
+ .sidebar {
81
+ width: 260px;
82
+ background: var(--bg-secondary);
83
+ border-right: 1px solid var(--border);
84
+ overflow-y: auto;
85
+ flex-shrink: 0;
86
+ }
87
+
88
+ .sidebar-section {
89
+ padding: 16px;
90
+ border-bottom: 1px solid var(--border);
91
+ }
92
+
93
+ .sidebar-heading {
94
+ font-size: 12px;
95
+ font-weight: 600;
96
+ text-transform: uppercase;
97
+ letter-spacing: 0.05em;
98
+ color: var(--text-muted);
99
+ margin-bottom: 12px;
100
+ }
101
+
102
+ .workers-list {
103
+ display: flex;
104
+ flex-direction: column;
105
+ gap: 6px;
106
+ }
107
+
108
+ .worker-card {
109
+ display: flex;
110
+ align-items: center;
111
+ gap: 8px;
112
+ padding: 8px 10px;
113
+ background: var(--bg-tertiary);
114
+ border-radius: var(--radius);
115
+ font-size: 13px;
116
+ }
117
+
118
+ .worker-card .worker-icon { font-size: 16px; }
119
+ .worker-card .worker-label { flex: 1; font-weight: 500; }
120
+ .worker-card .worker-status {
121
+ font-size: 11px;
122
+ padding: 2px 6px;
123
+ border-radius: 4px;
124
+ text-transform: uppercase;
125
+ font-weight: 600;
126
+ }
127
+
128
+ .worker-status.idle { background: var(--success); color: #000; }
129
+ .worker-status.busy { background: var(--warning); color: #000; }
130
+ .worker-status.offline { background: var(--text-muted); color: #fff; }
131
+
132
+ .roles-list {
133
+ display: flex;
134
+ flex-direction: column;
135
+ gap: 4px;
136
+ }
137
+
138
+ .role-chip {
139
+ display: flex;
140
+ align-items: center;
141
+ gap: 6px;
142
+ padding: 4px 8px;
143
+ font-size: 12px;
144
+ color: var(--text-secondary);
145
+ border-radius: 4px;
146
+ }
147
+
148
+ .role-chip:hover { background: var(--bg-tertiary); }
149
+
150
+ .content {
151
+ flex: 1;
152
+ display: flex;
153
+ flex-direction: column;
154
+ overflow: hidden;
155
+ }
156
+
157
+ .tabs {
158
+ display: flex;
159
+ border-bottom: 1px solid var(--border);
160
+ background: var(--bg-secondary);
161
+ }
162
+
163
+ .tab {
164
+ padding: 10px 20px;
165
+ background: none;
166
+ border: none;
167
+ color: var(--text-secondary);
168
+ cursor: pointer;
169
+ font-size: 14px;
170
+ border-bottom: 2px solid transparent;
171
+ transition: all 0.15s;
172
+ }
173
+
174
+ .tab:hover { color: var(--text-primary); }
175
+ .tab.active {
176
+ color: var(--accent);
177
+ border-bottom-color: var(--accent);
178
+ }
179
+
180
+ .tab-badge {
181
+ display: inline-flex;
182
+ align-items: center;
183
+ justify-content: center;
184
+ min-width: 18px;
185
+ height: 18px;
186
+ margin-left: 6px;
187
+ padding: 0 6px;
188
+ border-radius: 999px;
189
+ background: var(--bg-tertiary);
190
+ color: var(--text-secondary);
191
+ font-size: 11px;
192
+ font-weight: 700;
193
+ }
194
+
195
+ .tab-badge.has-items {
196
+ background: var(--danger);
197
+ color: #fff;
198
+ }
199
+
200
+ .tab-content {
201
+ flex: 1;
202
+ overflow-y: auto;
203
+ padding: 16px 20px;
204
+ }
205
+
206
+ .tab-panel { display: none; }
207
+ .tab-panel.active { display: block; }
208
+
209
+ .panel-note {
210
+ margin-bottom: 14px;
211
+ padding: 10px 12px;
212
+ border: 1px solid var(--border);
213
+ border-radius: var(--radius);
214
+ background: var(--bg-secondary);
215
+ color: var(--text-secondary);
216
+ font-size: 13px;
217
+ line-height: 1.5;
218
+ }
219
+
220
+ .task-filters {
221
+ display: flex;
222
+ gap: 6px;
223
+ margin-bottom: 16px;
224
+ flex-wrap: wrap;
225
+ }
226
+
227
+ .filter-btn {
228
+ padding: 4px 12px;
229
+ background: var(--bg-tertiary);
230
+ border: 1px solid var(--border);
231
+ border-radius: 16px;
232
+ color: var(--text-secondary);
233
+ cursor: pointer;
234
+ font-size: 12px;
235
+ transition: all 0.15s;
236
+ }
237
+
238
+ .filter-btn:hover { color: var(--text-primary); }
239
+ .filter-btn.active {
240
+ background: var(--accent);
241
+ border-color: var(--accent);
242
+ color: #fff;
243
+ }
244
+
245
+ .tasks-board {
246
+ display: flex;
247
+ flex-direction: column;
248
+ gap: 8px;
249
+ }
250
+
251
+ .task-card {
252
+ background: var(--bg-secondary);
253
+ border: 1px solid var(--border);
254
+ border-radius: var(--radius);
255
+ padding: 12px 16px;
256
+ display: flex;
257
+ align-items: flex-start;
258
+ gap: 12px;
259
+ }
260
+
261
+ .task-card:hover { border-color: var(--accent); }
262
+
263
+ .task-priority {
264
+ font-size: 11px;
265
+ font-weight: 700;
266
+ padding: 2px 8px;
267
+ border-radius: 4px;
268
+ text-transform: uppercase;
269
+ flex-shrink: 0;
270
+ }
271
+
272
+ .task-priority.low { background: var(--info); color: #fff; }
273
+ .task-priority.medium { background: var(--accent); color: #fff; }
274
+ .task-priority.high { background: var(--warning); color: #000; }
275
+ .task-priority.critical { background: var(--danger); color: #fff; }
276
+
277
+ .task-body { flex: 1; min-width: 0; }
278
+ .task-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
279
+ .task-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
280
+ .task-note {
281
+ font-size: 12px;
282
+ color: var(--warning);
283
+ margin-bottom: 6px;
284
+ line-height: 1.5;
285
+ }
286
+ .task-meta { display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); }
287
+
288
+ .task-status-badge {
289
+ font-size: 11px;
290
+ padding: 2px 8px;
291
+ border-radius: 4px;
292
+ font-weight: 600;
293
+ }
294
+
295
+ .task-status-badge.pending { background: var(--bg-tertiary); color: var(--text-secondary); }
296
+ .task-status-badge.assigned { background: #1e3a5f; color: var(--info); }
297
+ .task-status-badge.in_progress { background: #422006; color: var(--warning); }
298
+ .task-status-badge.blocked { background: #581c87; color: #e9d5ff; }
299
+ .task-status-badge.completed { background: #14532d; color: var(--success); }
300
+ .task-status-badge.failed { background: #450a0a; color: var(--danger); }
301
+
302
+ .clarifications-list {
303
+ display: flex;
304
+ flex-direction: column;
305
+ gap: 12px;
306
+ }
307
+
308
+ .clarification-card {
309
+ background: var(--bg-secondary);
310
+ border: 1px solid var(--border);
311
+ border-radius: var(--radius);
312
+ padding: 14px 16px;
313
+ display: flex;
314
+ flex-direction: column;
315
+ gap: 10px;
316
+ }
317
+
318
+ .clarification-card:hover {
319
+ border-color: var(--accent);
320
+ }
321
+
322
+ .clarification-header {
323
+ display: flex;
324
+ align-items: center;
325
+ justify-content: space-between;
326
+ gap: 12px;
327
+ }
328
+
329
+ .clarification-status {
330
+ font-size: 11px;
331
+ font-weight: 700;
332
+ text-transform: uppercase;
333
+ padding: 3px 8px;
334
+ border-radius: 999px;
335
+ }
336
+
337
+ .clarification-status.pending {
338
+ background: #422006;
339
+ color: var(--warning);
340
+ }
341
+
342
+ .clarification-status.answered {
343
+ background: #14532d;
344
+ color: var(--success);
345
+ }
346
+
347
+ .clarification-time {
348
+ font-size: 12px;
349
+ color: var(--text-muted);
350
+ }
351
+
352
+ .clarification-question {
353
+ font-size: 16px;
354
+ font-weight: 600;
355
+ color: var(--text-primary);
356
+ }
357
+
358
+ .clarification-meta {
359
+ display: flex;
360
+ flex-wrap: wrap;
361
+ gap: 10px 16px;
362
+ font-size: 12px;
363
+ color: var(--text-secondary);
364
+ }
365
+
366
+ .clarification-reason,
367
+ .clarification-context,
368
+ .clarification-answer {
369
+ font-size: 13px;
370
+ color: var(--text-primary);
371
+ line-height: 1.5;
372
+ }
373
+
374
+ .clarification-answer-meta {
375
+ color: var(--text-secondary);
376
+ font-size: 12px;
377
+ }
378
+
379
+ .clarification-answer-form {
380
+ display: flex;
381
+ flex-direction: column;
382
+ gap: 8px;
383
+ }
384
+
385
+ .clarification-label {
386
+ font-size: 13px;
387
+ font-weight: 600;
388
+ color: var(--text-secondary);
389
+ }
390
+
391
+ .clarification-answer-form textarea {
392
+ width: 100%;
393
+ padding: 10px 12px;
394
+ background: var(--bg-tertiary);
395
+ border: 1px solid var(--border);
396
+ border-radius: var(--radius);
397
+ color: var(--text-primary);
398
+ font-size: 14px;
399
+ font-family: inherit;
400
+ resize: vertical;
401
+ }
402
+
403
+ .clarification-answer-form textarea:focus {
404
+ outline: none;
405
+ border-color: var(--accent);
406
+ }
407
+
408
+ .clarification-actions {
409
+ display: flex;
410
+ justify-content: flex-end;
411
+ }
412
+
413
+ .messages-feed {
414
+ display: flex;
415
+ flex-direction: column;
416
+ gap: 8px;
417
+ }
418
+
419
+ .message-card {
420
+ background: var(--bg-secondary);
421
+ border: 1px solid var(--border);
422
+ border-radius: var(--radius);
423
+ padding: 10px 14px;
424
+ }
425
+
426
+ .message-header {
427
+ display: flex;
428
+ justify-content: space-between;
429
+ margin-bottom: 4px;
430
+ font-size: 12px;
431
+ }
432
+
433
+ .message-from { font-weight: 600; color: var(--accent); }
434
+ .message-type {
435
+ font-size: 10px;
436
+ padding: 1px 6px;
437
+ border-radius: 3px;
438
+ text-transform: uppercase;
439
+ font-weight: 600;
440
+ }
441
+
442
+ .message-type.direct { background: var(--info); color: #fff; }
443
+ .message-type.broadcast { background: var(--warning); color: #000; }
444
+ .message-type.review-request { background: #7c3aed; color: #fff; }
445
+
446
+ .message-content { font-size: 13px; color: var(--text-primary); line-height: 1.5; }
447
+
448
+ .create-task-form {
449
+ max-width: 500px;
450
+ }
451
+
452
+ .form-group {
453
+ margin-bottom: 14px;
454
+ }
455
+
456
+ .form-group label {
457
+ display: block;
458
+ font-size: 13px;
459
+ font-weight: 600;
460
+ color: var(--text-secondary);
461
+ margin-bottom: 4px;
462
+ }
463
+
464
+ .form-group input,
465
+ .form-group textarea,
466
+ .form-group select {
467
+ width: 100%;
468
+ padding: 8px 12px;
469
+ background: var(--bg-tertiary);
470
+ border: 1px solid var(--border);
471
+ border-radius: var(--radius);
472
+ color: var(--text-primary);
473
+ font-size: 14px;
474
+ font-family: inherit;
475
+ }
476
+
477
+ .form-group input:focus,
478
+ .form-group textarea:focus,
479
+ .form-group select:focus {
480
+ outline: none;
481
+ border-color: var(--accent);
482
+ }
483
+
484
+ .form-row {
485
+ display: flex;
486
+ gap: 12px;
487
+ }
488
+
489
+ .form-row .form-group { flex: 1; }
490
+
491
+ .btn {
492
+ padding: 8px 16px;
493
+ border: none;
494
+ border-radius: var(--radius);
495
+ cursor: pointer;
496
+ font-size: 14px;
497
+ font-weight: 600;
498
+ transition: all 0.15s;
499
+ }
500
+
501
+ .btn-primary {
502
+ background: var(--accent);
503
+ color: #fff;
504
+ }
505
+
506
+ .btn-primary:hover { background: var(--accent-hover); }
507
+
508
+ .btn-small {
509
+ padding: 6px 12px;
510
+ background: var(--accent);
511
+ color: #fff;
512
+ }
513
+
514
+ .btn-small:hover { background: var(--accent-hover); }
515
+
516
+ .empty-state {
517
+ text-align: center;
518
+ color: var(--text-muted);
519
+ font-size: 14px;
520
+ padding: 40px 20px;
521
+ }
522
+
523
+ .hidden {
524
+ display: none !important;
525
+ }
526
+
527
+ .workspace-browser {
528
+ display: grid;
529
+ grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
530
+ gap: 16px;
531
+ min-height: calc(100vh - 220px);
532
+ }
533
+
534
+ .workspace-sidebar-panel,
535
+ .workspace-viewer-panel {
536
+ min-height: 0;
537
+ background: var(--bg-secondary);
538
+ border: 1px solid var(--border);
539
+ border-radius: 14px;
540
+ overflow: hidden;
541
+ display: flex;
542
+ flex-direction: column;
543
+ }
544
+
545
+ .workspace-panel-header {
546
+ display: flex;
547
+ align-items: flex-start;
548
+ justify-content: space-between;
549
+ gap: 16px;
550
+ padding: 14px 16px;
551
+ border-bottom: 1px solid var(--border);
552
+ }
553
+
554
+ .workspace-panel-header h3 {
555
+ font-size: 18px;
556
+ line-height: 1.25;
557
+ }
558
+
559
+ .workspace-panel-kicker {
560
+ color: var(--text-muted);
561
+ font-size: 11px;
562
+ font-weight: 700;
563
+ letter-spacing: 0.08em;
564
+ text-transform: uppercase;
565
+ margin-bottom: 6px;
566
+ }
567
+
568
+ .workspace-tree {
569
+ flex: 1;
570
+ min-height: 0;
571
+ overflow: auto;
572
+ padding: 12px;
573
+ }
574
+
575
+ .workspace-tree-list {
576
+ list-style: none;
577
+ display: flex;
578
+ flex-direction: column;
579
+ gap: 4px;
580
+ }
581
+
582
+ .workspace-tree-folder {
583
+ display: block;
584
+ }
585
+
586
+ .workspace-tree-summary,
587
+ .workspace-tree-file {
588
+ width: 100%;
589
+ min-height: 40px;
590
+ display: flex;
591
+ align-items: center;
592
+ gap: 10px;
593
+ padding: 8px 10px;
594
+ border: 1px solid transparent;
595
+ border-radius: 10px;
596
+ background: transparent;
597
+ color: var(--text-primary);
598
+ font-size: 13px;
599
+ text-align: left;
600
+ cursor: pointer;
601
+ transition: background 0.18s, border-color 0.18s, color 0.18s;
602
+ }
603
+
604
+ .workspace-tree-summary {
605
+ list-style: none;
606
+ }
607
+
608
+ .workspace-tree-summary::-webkit-details-marker {
609
+ display: none;
610
+ }
611
+
612
+ .workspace-tree-summary:hover,
613
+ .workspace-tree-file:hover {
614
+ background: var(--bg-tertiary);
615
+ border-color: var(--border);
616
+ }
617
+
618
+ .workspace-tree-summary:focus-visible,
619
+ .workspace-tree-file:focus-visible,
620
+ .workspace-view-tab:focus-visible {
621
+ outline: 2px solid var(--accent-hover);
622
+ outline-offset: 2px;
623
+ }
624
+
625
+ .workspace-tree-file.is-selected {
626
+ background: rgba(99, 102, 241, 0.16);
627
+ border-color: rgba(99, 102, 241, 0.4);
628
+ color: #fff;
629
+ }
630
+
631
+ .workspace-tree-icon {
632
+ flex-shrink: 0;
633
+ color: var(--text-secondary);
634
+ font-size: 12px;
635
+ }
636
+
637
+ .workspace-tree-file.is-selected .workspace-tree-icon {
638
+ color: var(--accent-hover);
639
+ }
640
+
641
+ .workspace-tree-label {
642
+ min-width: 0;
643
+ overflow: hidden;
644
+ text-overflow: ellipsis;
645
+ white-space: nowrap;
646
+ }
647
+
648
+ .workspace-tree-children {
649
+ margin-left: 14px;
650
+ padding-left: 10px;
651
+ border-left: 1px solid var(--border);
652
+ }
653
+
654
+ .workspace-file-meta {
655
+ margin-top: 6px;
656
+ color: var(--text-secondary);
657
+ font-size: 12px;
658
+ line-height: 1.5;
659
+ }
660
+
661
+ .workspace-viewer-actions {
662
+ display: flex;
663
+ gap: 8px;
664
+ }
665
+
666
+ .workspace-view-tabs {
667
+ display: flex;
668
+ gap: 8px;
669
+ padding: 12px 16px;
670
+ border-bottom: 1px solid var(--border);
671
+ background: rgba(255, 255, 255, 0.01);
672
+ }
673
+
674
+ .workspace-view-tab {
675
+ min-height: 36px;
676
+ padding: 8px 14px;
677
+ border: 1px solid var(--border);
678
+ border-radius: 999px;
679
+ background: var(--bg-tertiary);
680
+ color: var(--text-secondary);
681
+ cursor: pointer;
682
+ font-size: 13px;
683
+ font-weight: 600;
684
+ transition: background 0.18s, border-color 0.18s, color 0.18s;
685
+ }
686
+
687
+ .workspace-view-tab.active {
688
+ background: var(--accent);
689
+ border-color: var(--accent);
690
+ color: #fff;
691
+ }
692
+
693
+ .workspace-view-tab:disabled {
694
+ cursor: default;
695
+ opacity: 0.55;
696
+ }
697
+
698
+ .workspace-view-body {
699
+ flex: 1;
700
+ min-height: 0;
701
+ }
702
+
703
+ .workspace-view-panel {
704
+ display: none;
705
+ height: 100%;
706
+ overflow: auto;
707
+ padding: 16px;
708
+ }
709
+
710
+ .workspace-view-panel.active {
711
+ display: block;
712
+ }
713
+
714
+ .workspace-source-shell,
715
+ .workspace-preview-empty,
716
+ .workspace-markdown-preview {
717
+ border: 1px solid var(--border);
718
+ border-radius: 12px;
719
+ background: var(--bg-tertiary);
720
+ }
721
+
722
+ .workspace-source-warning {
723
+ padding: 10px 14px;
724
+ border-bottom: 1px solid var(--border);
725
+ color: var(--warning);
726
+ font-size: 12px;
727
+ line-height: 1.5;
728
+ }
729
+
730
+ .workspace-source-lines {
731
+ padding: 10px 0;
732
+ overflow: auto;
733
+ }
734
+
735
+ .workspace-source-line {
736
+ display: grid;
737
+ grid-template-columns: 56px minmax(0, 1fr);
738
+ gap: 16px;
739
+ padding: 0 16px;
740
+ min-height: 22px;
741
+ }
742
+
743
+ .workspace-source-line-number {
744
+ color: var(--text-muted);
745
+ text-align: right;
746
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
747
+ font-size: 12px;
748
+ line-height: 1.7;
749
+ user-select: none;
750
+ }
751
+
752
+ .workspace-source-line-text {
753
+ color: #d7def8;
754
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
755
+ font-size: 12px;
756
+ line-height: 1.7;
757
+ white-space: pre;
758
+ overflow-x: auto;
759
+ }
760
+
761
+ .workspace-preview-empty {
762
+ padding: 28px 20px;
763
+ color: var(--text-secondary);
764
+ font-size: 14px;
765
+ line-height: 1.6;
766
+ }
767
+
768
+ .workspace-markdown-preview {
769
+ padding: 24px;
770
+ }
771
+
772
+ .markdown-body {
773
+ color: var(--text-primary);
774
+ line-height: 1.7;
775
+ }
776
+
777
+ .markdown-body > * + * {
778
+ margin-top: 16px;
779
+ }
780
+
781
+ .markdown-body h1,
782
+ .markdown-body h2,
783
+ .markdown-body h3,
784
+ .markdown-body h4,
785
+ .markdown-body h5,
786
+ .markdown-body h6 {
787
+ line-height: 1.3;
788
+ }
789
+
790
+ .markdown-body h1 { font-size: 22px; }
791
+ .markdown-body h2 { font-size: 18px; }
792
+ .markdown-body h3 { font-size: 16px; }
793
+
794
+ .workspace-markdown-preview.markdown-body h1 { font-size: 28px; }
795
+ .workspace-markdown-preview.markdown-body h2 { font-size: 24px; }
796
+ .workspace-markdown-preview.markdown-body h3 { font-size: 20px; }
797
+
798
+ .markdown-body p,
799
+ .markdown-body li,
800
+ .markdown-body blockquote,
801
+ .markdown-body td,
802
+ .markdown-body th {
803
+ color: var(--text-primary);
804
+ }
805
+
806
+ .markdown-body ul,
807
+ .markdown-body ol {
808
+ padding-left: 20px;
809
+ }
810
+
811
+ .markdown-body li + li {
812
+ margin-top: 6px;
813
+ }
814
+
815
+ .markdown-body pre,
816
+ .markdown-body code,
817
+ .markdown-body table {
818
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
819
+ }
820
+
821
+ .markdown-body pre {
822
+ overflow: auto;
823
+ padding: 14px 16px;
824
+ background: #0c0e14;
825
+ border: 1px solid var(--border);
826
+ border-radius: 10px;
827
+ color: #d7def8;
828
+ }
829
+
830
+ .markdown-body code {
831
+ padding: 2px 6px;
832
+ border-radius: 6px;
833
+ background: rgba(255, 255, 255, 0.08);
834
+ color: #d7def8;
835
+ }
836
+
837
+ .markdown-body pre code {
838
+ padding: 0;
839
+ background: transparent;
840
+ }
841
+
842
+ .markdown-body blockquote {
843
+ padding: 12px 16px;
844
+ border-left: 3px solid var(--accent);
845
+ background: rgba(99, 102, 241, 0.1);
846
+ border-radius: 0 10px 10px 0;
847
+ }
848
+
849
+ .markdown-body table {
850
+ width: 100%;
851
+ border-collapse: collapse;
852
+ overflow: hidden;
853
+ }
854
+
855
+ .markdown-body th,
856
+ .markdown-body td {
857
+ border: 1px solid var(--border);
858
+ padding: 10px 12px;
859
+ vertical-align: top;
860
+ }
861
+
862
+ .markdown-body th {
863
+ background: rgba(255, 255, 255, 0.04);
864
+ text-align: left;
865
+ }
866
+
867
+ .markdown-body a {
868
+ color: var(--info);
869
+ }
870
+
871
+ .markdown-body hr {
872
+ border: 0;
873
+ border-top: 1px solid var(--border);
874
+ }
875
+
876
+ .markdown-body strong {
877
+ color: #fff;
878
+ }
879
+
880
+ .workspace-preview-frame {
881
+ width: 100%;
882
+ min-height: 100%;
883
+ border: 1px solid var(--border);
884
+ border-radius: 12px;
885
+ background: #fff;
886
+ }
887
+
888
+ .footer {
889
+ padding: 10px 20px;
890
+ background: var(--bg-secondary);
891
+ border-top: 1px solid var(--border);
892
+ }
893
+
894
+ .command-bar {
895
+ display: flex;
896
+ gap: 8px;
897
+ }
898
+
899
+ .command-bar input {
900
+ flex: 1;
901
+ padding: 8px 12px;
902
+ background: var(--bg-tertiary);
903
+ border: 1px solid var(--border);
904
+ border-radius: var(--radius);
905
+ color: var(--text-primary);
906
+ font-size: 14px;
907
+ }
908
+
909
+ .command-bar input:focus {
910
+ outline: none;
911
+ border-color: var(--accent);
912
+ }
913
+
914
+ .task-card {
915
+ cursor: pointer;
916
+ transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
917
+ }
918
+
919
+ .task-card:hover {
920
+ box-shadow: var(--shadow);
921
+ transform: translateY(-1px);
922
+ }
923
+
924
+ .task-card.is-live {
925
+ border-color: var(--warning);
926
+ }
927
+
928
+ .task-detail-modal {
929
+ position: fixed;
930
+ inset: 0;
931
+ display: none;
932
+ z-index: 1000;
933
+ }
934
+
935
+ .task-detail-modal.open {
936
+ display: block;
937
+ }
938
+
939
+ .task-detail-backdrop {
940
+ position: absolute;
941
+ inset: 0;
942
+ background: rgba(0, 0, 0, 0.55);
943
+ }
944
+
945
+ .task-detail-panel {
946
+ position: absolute;
947
+ top: 24px;
948
+ right: 24px;
949
+ bottom: 24px;
950
+ width: min(980px, calc(100vw - 48px));
951
+ display: flex;
952
+ flex-direction: column;
953
+ background: var(--bg-secondary);
954
+ border: 1px solid var(--border);
955
+ border-radius: 14px;
956
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
957
+ overflow: hidden;
958
+ }
959
+
960
+ .task-detail-header,
961
+ .task-detail-toolbar,
962
+ .task-detail-tabs {
963
+ padding: 14px 18px;
964
+ border-bottom: 1px solid var(--border);
965
+ }
966
+
967
+ .task-detail-header {
968
+ display: flex;
969
+ align-items: flex-start;
970
+ justify-content: space-between;
971
+ gap: 16px;
972
+ }
973
+
974
+ .task-detail-heading {
975
+ min-width: 0;
976
+ }
977
+
978
+ .task-detail-kicker {
979
+ color: var(--text-muted);
980
+ font-size: 11px;
981
+ font-weight: 700;
982
+ letter-spacing: 0.08em;
983
+ text-transform: uppercase;
984
+ margin-bottom: 6px;
985
+ }
986
+
987
+ .task-detail-header h2 {
988
+ font-size: 22px;
989
+ line-height: 1.2;
990
+ margin-bottom: 6px;
991
+ }
992
+
993
+ .task-detail-subtitle {
994
+ color: var(--text-secondary);
995
+ font-size: 13px;
996
+ line-height: 1.5;
997
+ }
998
+
999
+ .task-detail-actions {
1000
+ display: flex;
1001
+ gap: 8px;
1002
+ }
1003
+
1004
+ .task-detail-toolbar {
1005
+ display: flex;
1006
+ align-items: center;
1007
+ justify-content: space-between;
1008
+ gap: 16px;
1009
+ background: rgba(255, 255, 255, 0.01);
1010
+ }
1011
+
1012
+ .task-detail-follow {
1013
+ display: inline-flex;
1014
+ align-items: center;
1015
+ gap: 8px;
1016
+ font-size: 13px;
1017
+ color: var(--text-secondary);
1018
+ }
1019
+
1020
+ .task-detail-follow input {
1021
+ accent-color: var(--accent);
1022
+ }
1023
+
1024
+ .task-detail-live-badge {
1025
+ display: inline-flex;
1026
+ align-items: center;
1027
+ min-height: 26px;
1028
+ padding: 0 10px;
1029
+ border-radius: 999px;
1030
+ font-size: 12px;
1031
+ font-weight: 700;
1032
+ text-transform: uppercase;
1033
+ letter-spacing: 0.04em;
1034
+ background: var(--bg-tertiary);
1035
+ color: var(--text-secondary);
1036
+ }
1037
+
1038
+ .task-detail-live-badge.is-live {
1039
+ background: #422006;
1040
+ color: var(--warning);
1041
+ }
1042
+
1043
+ .task-detail-tabs {
1044
+ display: flex;
1045
+ gap: 8px;
1046
+ }
1047
+
1048
+ .task-detail-tab {
1049
+ border: 1px solid var(--border);
1050
+ background: var(--bg-tertiary);
1051
+ color: var(--text-secondary);
1052
+ border-radius: 999px;
1053
+ padding: 6px 12px;
1054
+ cursor: pointer;
1055
+ font-size: 13px;
1056
+ }
1057
+
1058
+ .task-detail-tab.active {
1059
+ border-color: var(--accent);
1060
+ color: #fff;
1061
+ background: var(--accent);
1062
+ }
1063
+
1064
+ .task-detail-body {
1065
+ flex: 1;
1066
+ min-height: 0;
1067
+ }
1068
+
1069
+ .task-detail-panel-content {
1070
+ display: none;
1071
+ height: 100%;
1072
+ overflow: auto;
1073
+ padding: 18px;
1074
+ }
1075
+
1076
+ .task-detail-panel-content.active {
1077
+ display: block;
1078
+ }
1079
+
1080
+ .task-detail-grid {
1081
+ display: grid;
1082
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
1083
+ gap: 12px;
1084
+ margin-bottom: 18px;
1085
+ }
1086
+
1087
+ .task-detail-stat {
1088
+ padding: 12px 14px;
1089
+ background: var(--bg-tertiary);
1090
+ border: 1px solid var(--border);
1091
+ border-radius: var(--radius);
1092
+ }
1093
+
1094
+ .task-detail-stat-label {
1095
+ color: var(--text-muted);
1096
+ font-size: 11px;
1097
+ font-weight: 700;
1098
+ text-transform: uppercase;
1099
+ letter-spacing: 0.06em;
1100
+ margin-bottom: 6px;
1101
+ }
1102
+
1103
+ .task-detail-stat-value {
1104
+ font-size: 14px;
1105
+ color: var(--text-primary);
1106
+ line-height: 1.45;
1107
+ word-break: break-word;
1108
+ }
1109
+
1110
+ .task-detail-section {
1111
+ margin-bottom: 18px;
1112
+ }
1113
+
1114
+ .task-detail-section h3 {
1115
+ font-size: 13px;
1116
+ font-weight: 700;
1117
+ text-transform: uppercase;
1118
+ letter-spacing: 0.06em;
1119
+ color: var(--text-muted);
1120
+ margin-bottom: 10px;
1121
+ }
1122
+
1123
+ .task-detail-card {
1124
+ background: var(--bg-tertiary);
1125
+ border: 1px solid var(--border);
1126
+ border-radius: var(--radius);
1127
+ padding: 14px;
1128
+ color: var(--text-primary);
1129
+ line-height: 1.6;
1130
+ word-break: break-word;
1131
+ overflow-wrap: anywhere;
1132
+ }
1133
+
1134
+ .task-detail-timeline {
1135
+ display: flex;
1136
+ flex-direction: column;
1137
+ gap: 10px;
1138
+ }
1139
+
1140
+ .timeline-entry {
1141
+ border: 1px solid var(--border);
1142
+ border-radius: var(--radius);
1143
+ background: var(--bg-tertiary);
1144
+ padding: 12px 14px;
1145
+ }
1146
+
1147
+ .timeline-entry.execution { border-left: 3px solid var(--accent); }
1148
+ .timeline-entry.message { border-left: 3px solid var(--info); }
1149
+ .timeline-entry.clarification { border-left: 3px solid var(--warning); }
1150
+
1151
+ .timeline-entry-header {
1152
+ display: flex;
1153
+ align-items: center;
1154
+ justify-content: space-between;
1155
+ gap: 10px;
1156
+ margin-bottom: 8px;
1157
+ }
1158
+
1159
+ .timeline-entry-label {
1160
+ font-size: 12px;
1161
+ font-weight: 700;
1162
+ text-transform: uppercase;
1163
+ letter-spacing: 0.05em;
1164
+ }
1165
+
1166
+ .timeline-entry.execution .timeline-entry-label { color: var(--accent-hover); }
1167
+ .timeline-entry.message .timeline-entry-label { color: var(--info); }
1168
+ .timeline-entry.clarification .timeline-entry-label { color: var(--warning); }
1169
+
1170
+ .timeline-entry-meta {
1171
+ color: var(--text-muted);
1172
+ font-size: 12px;
1173
+ }
1174
+
1175
+ .timeline-entry-body {
1176
+ color: var(--text-primary);
1177
+ font-size: 13px;
1178
+ line-height: 1.6;
1179
+ word-break: break-word;
1180
+ overflow-wrap: anywhere;
1181
+ }
1182
+
1183
+ .task-detail-output-stream {
1184
+ display: flex;
1185
+ flex-direction: column;
1186
+ gap: 12px;
1187
+ }
1188
+
1189
+ .task-output-entry {
1190
+ background: #0c0e14;
1191
+ border: 1px solid var(--border);
1192
+ border-radius: var(--radius);
1193
+ padding: 14px 16px;
1194
+ }
1195
+
1196
+ .task-output-entry.is-error {
1197
+ border-left: 3px solid var(--danger);
1198
+ }
1199
+
1200
+ .task-output-header {
1201
+ display: flex;
1202
+ align-items: flex-start;
1203
+ justify-content: space-between;
1204
+ gap: 12px;
1205
+ margin-bottom: 10px;
1206
+ }
1207
+
1208
+ .task-output-label {
1209
+ font-size: 11px;
1210
+ font-weight: 700;
1211
+ text-transform: uppercase;
1212
+ letter-spacing: 0.05em;
1213
+ color: #c7d2fe;
1214
+ }
1215
+
1216
+ .task-output-meta {
1217
+ color: var(--text-muted);
1218
+ font-size: 12px;
1219
+ }
1220
+
1221
+ .task-output-body {
1222
+ min-height: 100%;
1223
+ font-size: 13px;
1224
+ line-height: 1.7;
1225
+ color: #d7def8;
1226
+ }
1227
+
1228
+ .task-output-body.markdown-body p,
1229
+ .task-output-body.markdown-body li,
1230
+ .task-output-body.markdown-body blockquote,
1231
+ .task-output-body.markdown-body td,
1232
+ .task-output-body.markdown-body th,
1233
+ .task-output-body.markdown-body strong {
1234
+ color: inherit;
1235
+ }
1236
+
1237
+ .task-output-body.markdown-body a {
1238
+ color: #93c5fd;
1239
+ }
1240
+
1241
+ .task-output-body.markdown-body blockquote {
1242
+ background: rgba(147, 197, 253, 0.08);
1243
+ border-left-color: #60a5fa;
1244
+ }
1245
+
1246
+ .task-detail-empty {
1247
+ border: 1px dashed var(--border);
1248
+ border-radius: var(--radius);
1249
+ padding: 20px;
1250
+ color: var(--text-muted);
1251
+ text-align: center;
1252
+ }
1253
+
1254
+ @media (max-width: 900px) {
1255
+ .workspace-browser {
1256
+ grid-template-columns: 1fr;
1257
+ min-height: auto;
1258
+ }
1259
+
1260
+ .workspace-tree {
1261
+ max-height: 280px;
1262
+ }
1263
+
1264
+ .task-detail-panel {
1265
+ top: 12px;
1266
+ right: 12px;
1267
+ bottom: 12px;
1268
+ left: 12px;
1269
+ width: auto;
1270
+ }
1271
+
1272
+ .task-detail-header,
1273
+ .task-detail-toolbar {
1274
+ flex-direction: column;
1275
+ align-items: stretch;
1276
+ }
1277
+
1278
+ .task-detail-actions {
1279
+ justify-content: flex-end;
1280
+ }
1281
+ }