taskode 0.4.0

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,821 @@
1
+ :root {
2
+ --bg: #f4f7fb;
3
+ --surface: #ffffff;
4
+ --surface-soft: #f7f9fc;
5
+ --surface-muted: #eef3f8;
6
+ --border: #d9e2ec;
7
+ --border-strong: #c8d4e2;
8
+ --text: #172230;
9
+ --muted: #68788c;
10
+ --accent: #2d6cdf;
11
+ --accent-soft: #edf3ff;
12
+ --success: #19a364;
13
+ --success-soft: #eaf8f1;
14
+ --warning: #d9941a;
15
+ --warning-soft: #fff5df;
16
+ --danger: #da5c5c;
17
+ --danger-soft: #fff0f0;
18
+ --blocked: #9b6dd6;
19
+ --blocked-soft: #f3ecff;
20
+ --done: #1f9d68;
21
+ --shadow: 0 1px 2px rgba(18, 38, 63, 0.04);
22
+ --radius-lg: 18px;
23
+ --radius-md: 14px;
24
+ --radius-sm: 10px;
25
+ --font-base: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
26
+ }
27
+
28
+ * {
29
+ box-sizing: border-box;
30
+ }
31
+
32
+ html {
33
+ background: var(--bg);
34
+ }
35
+
36
+ body {
37
+ margin: 0;
38
+ min-height: 100vh;
39
+ font-family: var(--font-base);
40
+ color: var(--text);
41
+ background:
42
+ linear-gradient(180deg, rgba(45, 108, 223, 0.04), transparent 160px),
43
+ var(--bg);
44
+ }
45
+
46
+ a {
47
+ color: var(--accent);
48
+ text-decoration: none;
49
+ }
50
+
51
+ button,
52
+ input,
53
+ select,
54
+ textarea {
55
+ font: inherit;
56
+ }
57
+
58
+ button {
59
+ cursor: pointer;
60
+ }
61
+
62
+ .app-shell {
63
+ min-height: 100vh;
64
+ }
65
+
66
+ .topbar {
67
+ position: sticky;
68
+ top: 0;
69
+ z-index: 20;
70
+ display: flex;
71
+ align-items: flex-start;
72
+ justify-content: space-between;
73
+ gap: 24px;
74
+ padding: 22px 28px 18px;
75
+ background: rgba(244, 247, 251, 0.94);
76
+ border-bottom: 1px solid rgba(201, 212, 226, 0.78);
77
+ backdrop-filter: blur(10px);
78
+ }
79
+
80
+ .brand-block h1,
81
+ .board-header h2,
82
+ .inspector-empty h2,
83
+ .inspector-header h2 {
84
+ margin: 0;
85
+ font-size: 28px;
86
+ line-height: 1.1;
87
+ letter-spacing: -0.03em;
88
+ }
89
+
90
+ .section-kicker {
91
+ margin: 0 0 6px;
92
+ font-size: 11px;
93
+ font-weight: 700;
94
+ letter-spacing: 0.16em;
95
+ text-transform: uppercase;
96
+ color: var(--accent);
97
+ }
98
+
99
+ .topbar-note,
100
+ .inline-hint,
101
+ .column-note,
102
+ .empty-column,
103
+ .task-meta-line,
104
+ .run-empty,
105
+ .utility-empty,
106
+ .inspector-empty p,
107
+ .inspector-muted {
108
+ margin: 0;
109
+ color: var(--muted);
110
+ }
111
+
112
+ .topbar-actions {
113
+ display: flex;
114
+ align-items: flex-start;
115
+ gap: 14px;
116
+ }
117
+
118
+ .toolbar-button,
119
+ .ghost-button,
120
+ .run-action,
121
+ .inline-button,
122
+ .chip-button {
123
+ display: inline-flex;
124
+ align-items: center;
125
+ justify-content: center;
126
+ min-height: 44px;
127
+ padding: 0 16px;
128
+ border-radius: 12px;
129
+ border: 1px solid var(--border);
130
+ background: var(--surface);
131
+ color: var(--text);
132
+ transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
133
+ }
134
+
135
+ .toolbar-button {
136
+ border-color: rgba(45, 108, 223, 0.28);
137
+ background: var(--accent);
138
+ color: #fff;
139
+ }
140
+
141
+ .toolbar-button:hover,
142
+ .ghost-button:hover,
143
+ .run-action:hover,
144
+ .inline-button:hover,
145
+ .chip-button:hover {
146
+ transform: translateY(-1px);
147
+ }
148
+
149
+ .toolbar-button:disabled,
150
+ .ghost-button:disabled,
151
+ .run-action:disabled,
152
+ .inline-button:disabled,
153
+ .chip-button:disabled {
154
+ cursor: not-allowed;
155
+ opacity: 0.6;
156
+ transform: none;
157
+ }
158
+
159
+ .ghost-button {
160
+ background: var(--surface-soft);
161
+ }
162
+
163
+ .token-box,
164
+ .metric-card,
165
+ .kanban-column,
166
+ .inspector,
167
+ .utility-panel,
168
+ .task-card,
169
+ .composer-card,
170
+ .task-composer-form,
171
+ .run-record,
172
+ .compact-run {
173
+ background: var(--surface);
174
+ border: 1px solid var(--border);
175
+ border-radius: var(--radius-lg);
176
+ box-shadow: var(--shadow);
177
+ }
178
+
179
+ .token-box {
180
+ width: 360px;
181
+ padding: 12px 14px;
182
+ }
183
+
184
+ .token-label {
185
+ display: block;
186
+ margin-bottom: 8px;
187
+ font-size: 12px;
188
+ font-weight: 600;
189
+ color: var(--muted);
190
+ }
191
+
192
+ .token-row {
193
+ display: flex;
194
+ gap: 10px;
195
+ }
196
+
197
+ .token-row input {
198
+ flex: 1;
199
+ }
200
+
201
+ input,
202
+ select,
203
+ textarea {
204
+ width: 100%;
205
+ min-height: 44px;
206
+ padding: 11px 14px;
207
+ border-radius: 12px;
208
+ border: 1px solid var(--border);
209
+ background: #fff;
210
+ color: var(--text);
211
+ outline: none;
212
+ transition: border-color 160ms ease, box-shadow 160ms ease;
213
+ }
214
+
215
+ textarea {
216
+ min-height: 92px;
217
+ resize: vertical;
218
+ }
219
+
220
+ input:focus,
221
+ select:focus,
222
+ textarea:focus {
223
+ border-color: rgba(45, 108, 223, 0.55);
224
+ box-shadow: 0 0 0 4px rgba(45, 108, 223, 0.08);
225
+ }
226
+
227
+ .workspace-layout {
228
+ display: grid;
229
+ grid-template-columns: minmax(0, 1fr) 360px;
230
+ gap: 18px;
231
+ padding: 22px 28px 12px;
232
+ }
233
+
234
+ .board-section {
235
+ min-width: 0;
236
+ }
237
+
238
+ .board-header {
239
+ display: flex;
240
+ align-items: flex-end;
241
+ justify-content: space-between;
242
+ gap: 18px;
243
+ margin-bottom: 18px;
244
+ }
245
+
246
+ .metric-strip {
247
+ display: grid;
248
+ grid-template-columns: repeat(4, minmax(92px, 1fr));
249
+ gap: 10px;
250
+ }
251
+
252
+ .metric-card {
253
+ padding: 12px 14px;
254
+ border-radius: var(--radius-md);
255
+ }
256
+
257
+ .metric-card span {
258
+ display: block;
259
+ margin-bottom: 6px;
260
+ font-size: 12px;
261
+ color: var(--muted);
262
+ }
263
+
264
+ .metric-card strong {
265
+ font-size: 24px;
266
+ letter-spacing: -0.04em;
267
+ }
268
+
269
+ .kanban-board {
270
+ display: grid;
271
+ grid-auto-flow: column;
272
+ grid-auto-columns: minmax(280px, 1fr);
273
+ gap: 14px;
274
+ overflow-x: auto;
275
+ padding-bottom: 10px;
276
+ }
277
+
278
+ .kanban-board::-webkit-scrollbar {
279
+ height: 10px;
280
+ }
281
+
282
+ .kanban-board::-webkit-scrollbar-thumb {
283
+ background: #d6dee8;
284
+ border-radius: 999px;
285
+ }
286
+
287
+ .kanban-column {
288
+ display: flex;
289
+ flex-direction: column;
290
+ min-height: 72vh;
291
+ padding: 14px;
292
+ background: var(--surface-soft);
293
+ }
294
+
295
+ .kanban-column.is-drop-target {
296
+ border-color: rgba(45, 108, 223, 0.45);
297
+ background: #f2f7ff;
298
+ }
299
+
300
+ .column-head {
301
+ display: flex;
302
+ align-items: flex-start;
303
+ justify-content: space-between;
304
+ gap: 10px;
305
+ margin-bottom: 12px;
306
+ }
307
+
308
+ .column-title-row {
309
+ display: flex;
310
+ align-items: center;
311
+ gap: 10px;
312
+ }
313
+
314
+ .column-dot {
315
+ width: 10px;
316
+ height: 10px;
317
+ border-radius: 999px;
318
+ }
319
+
320
+ .column-dot.todo {
321
+ background: #8ea0b5;
322
+ }
323
+
324
+ .column-dot.in_progress {
325
+ background: var(--accent);
326
+ }
327
+
328
+ .column-dot.review {
329
+ background: var(--warning);
330
+ }
331
+
332
+ .column-dot.blocked {
333
+ background: var(--blocked);
334
+ }
335
+
336
+ .column-dot.failed {
337
+ background: var(--danger);
338
+ }
339
+
340
+ .column-dot.done {
341
+ background: var(--done);
342
+ }
343
+
344
+ .column-dot.cancelled {
345
+ background: #a0acba;
346
+ }
347
+
348
+ .column-title {
349
+ margin: 0;
350
+ font-size: 16px;
351
+ }
352
+
353
+ .column-count {
354
+ display: inline-flex;
355
+ align-items: center;
356
+ justify-content: center;
357
+ min-width: 30px;
358
+ min-height: 30px;
359
+ padding: 0 10px;
360
+ border-radius: 999px;
361
+ background: var(--surface);
362
+ color: var(--muted);
363
+ font-size: 12px;
364
+ font-weight: 700;
365
+ }
366
+
367
+ .column-body {
368
+ display: grid;
369
+ gap: 10px;
370
+ min-height: 100px;
371
+ align-content: start;
372
+ }
373
+
374
+ .composer-card {
375
+ padding: 0;
376
+ border-style: dashed;
377
+ background: #fcfdff;
378
+ }
379
+
380
+ .composer-trigger,
381
+ .composer-disabled {
382
+ display: flex;
383
+ align-items: center;
384
+ justify-content: center;
385
+ min-height: 72px;
386
+ padding: 18px;
387
+ border: 0;
388
+ background: transparent;
389
+ color: var(--muted);
390
+ font-weight: 600;
391
+ }
392
+
393
+ .composer-trigger:hover {
394
+ color: var(--accent);
395
+ }
396
+
397
+ .task-composer-form {
398
+ display: grid;
399
+ gap: 10px;
400
+ padding: 14px;
401
+ }
402
+
403
+ .task-composer-grid {
404
+ display: grid;
405
+ grid-template-columns: repeat(2, minmax(0, 1fr));
406
+ gap: 10px;
407
+ }
408
+
409
+ .composer-actions {
410
+ display: flex;
411
+ gap: 10px;
412
+ }
413
+
414
+ .task-card {
415
+ padding: 14px;
416
+ border-radius: 16px;
417
+ background: var(--surface);
418
+ transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
419
+ touch-action: manipulation;
420
+ }
421
+
422
+ .task-card:hover {
423
+ border-color: rgba(45, 108, 223, 0.32);
424
+ transform: translateY(-1px);
425
+ }
426
+
427
+ .task-card:focus-visible,
428
+ .composer-trigger:focus-visible,
429
+ .composer-disabled:focus-visible,
430
+ .toolbar-button:focus-visible,
431
+ .ghost-button:focus-visible,
432
+ .run-action:focus-visible,
433
+ .inline-button:focus-visible,
434
+ .chip-button:focus-visible {
435
+ outline: 0;
436
+ box-shadow: 0 0 0 4px rgba(45, 108, 223, 0.12);
437
+ border-color: rgba(45, 108, 223, 0.5);
438
+ }
439
+
440
+ .task-card.is-selected {
441
+ border-color: rgba(45, 108, 223, 0.54);
442
+ background: var(--accent-soft);
443
+ }
444
+
445
+ .task-card.is-dragging {
446
+ opacity: 0.45;
447
+ }
448
+
449
+ .task-card-header {
450
+ display: flex;
451
+ align-items: flex-start;
452
+ justify-content: space-between;
453
+ gap: 12px;
454
+ margin-bottom: 10px;
455
+ }
456
+
457
+ .task-card-title {
458
+ margin: 0;
459
+ font-size: 15px;
460
+ line-height: 1.35;
461
+ }
462
+
463
+ .task-card-body {
464
+ margin: 0 0 10px;
465
+ font-size: 13px;
466
+ line-height: 1.55;
467
+ color: var(--muted);
468
+ display: -webkit-box;
469
+ -webkit-line-clamp: 3;
470
+ -webkit-box-orient: vertical;
471
+ overflow: hidden;
472
+ }
473
+
474
+ .inspector-copy {
475
+ margin: 0 0 10px;
476
+ font-size: 13px;
477
+ line-height: 1.65;
478
+ color: var(--muted);
479
+ white-space: pre-wrap;
480
+ }
481
+
482
+ .task-card-footer {
483
+ display: flex;
484
+ flex-wrap: wrap;
485
+ gap: 6px;
486
+ }
487
+
488
+ .status-pill,
489
+ .meta-pill {
490
+ display: inline-flex;
491
+ align-items: center;
492
+ min-height: 28px;
493
+ padding: 0 10px;
494
+ border-radius: 999px;
495
+ font-size: 12px;
496
+ font-weight: 600;
497
+ }
498
+
499
+ .meta-pill {
500
+ background: var(--surface-muted);
501
+ color: var(--muted);
502
+ }
503
+
504
+ .status-pill.todo {
505
+ background: #eef2f6;
506
+ color: #68788c;
507
+ }
508
+
509
+ .status-pill.in_progress {
510
+ background: var(--accent-soft);
511
+ color: var(--accent);
512
+ }
513
+
514
+ .status-pill.review {
515
+ background: var(--warning-soft);
516
+ color: #b97808;
517
+ }
518
+
519
+ .status-pill.blocked {
520
+ background: var(--blocked-soft);
521
+ color: var(--blocked);
522
+ }
523
+
524
+ .status-pill.failed {
525
+ background: var(--danger-soft);
526
+ color: var(--danger);
527
+ }
528
+
529
+ .status-pill.done {
530
+ background: var(--success-soft);
531
+ color: var(--success);
532
+ }
533
+
534
+ .status-pill.cancelled {
535
+ background: #eff3f7;
536
+ color: #7f8b99;
537
+ }
538
+
539
+ .drag-hint {
540
+ font-size: 12px;
541
+ color: var(--muted);
542
+ }
543
+
544
+ .inspector {
545
+ position: sticky;
546
+ top: 94px;
547
+ align-self: start;
548
+ min-height: 72vh;
549
+ max-height: calc(100vh - 112px);
550
+ overflow: auto;
551
+ padding: 18px;
552
+ }
553
+
554
+ .inspector-empty {
555
+ display: grid;
556
+ gap: 10px;
557
+ min-height: 240px;
558
+ align-content: center;
559
+ }
560
+
561
+ .inspector-header {
562
+ display: flex;
563
+ align-items: flex-start;
564
+ justify-content: space-between;
565
+ gap: 12px;
566
+ margin-bottom: 14px;
567
+ }
568
+
569
+ .inspector-section + .inspector-section {
570
+ margin-top: 16px;
571
+ padding-top: 16px;
572
+ border-top: 1px solid var(--border);
573
+ }
574
+
575
+ .inspector-grid {
576
+ display: grid;
577
+ grid-template-columns: repeat(2, minmax(0, 1fr));
578
+ gap: 10px;
579
+ }
580
+
581
+ .inspector-stat {
582
+ padding: 10px 12px;
583
+ border-radius: 12px;
584
+ background: var(--surface-soft);
585
+ }
586
+
587
+ .inspector-stat span {
588
+ display: block;
589
+ margin-bottom: 6px;
590
+ font-size: 12px;
591
+ color: var(--muted);
592
+ }
593
+
594
+ .inspector-stat strong {
595
+ font-size: 14px;
596
+ }
597
+
598
+ .inspector-actions,
599
+ .run-actions,
600
+ .compact-run-actions {
601
+ display: flex;
602
+ flex-wrap: wrap;
603
+ gap: 8px;
604
+ }
605
+
606
+ .inline-button,
607
+ .chip-button,
608
+ .run-action {
609
+ min-height: 38px;
610
+ padding: 0 12px;
611
+ border-radius: 10px;
612
+ }
613
+
614
+ .inline-button.primary,
615
+ .run-action.primary {
616
+ border-color: rgba(45, 108, 223, 0.28);
617
+ background: var(--accent);
618
+ color: #fff;
619
+ }
620
+
621
+ .inline-button.danger,
622
+ .run-action.danger {
623
+ border-color: rgba(218, 92, 92, 0.2);
624
+ background: var(--danger-soft);
625
+ color: var(--danger);
626
+ }
627
+
628
+ .run-list {
629
+ display: grid;
630
+ gap: 10px;
631
+ }
632
+
633
+ .run-record,
634
+ .compact-run {
635
+ padding: 12px 14px;
636
+ border-radius: 14px;
637
+ }
638
+
639
+ .run-record summary,
640
+ .utility-panel summary {
641
+ list-style: none;
642
+ cursor: pointer;
643
+ }
644
+
645
+ .run-record summary::-webkit-details-marker,
646
+ .utility-panel summary::-webkit-details-marker {
647
+ display: none;
648
+ }
649
+
650
+ .run-summary-row,
651
+ .compact-run-row {
652
+ display: flex;
653
+ align-items: flex-start;
654
+ justify-content: space-between;
655
+ gap: 12px;
656
+ }
657
+
658
+ .run-summary-title,
659
+ .compact-run-title {
660
+ margin: 0 0 4px;
661
+ font-size: 14px;
662
+ }
663
+
664
+ .run-meta,
665
+ .compact-run-meta {
666
+ font-size: 12px;
667
+ color: var(--muted);
668
+ }
669
+
670
+ .run-detail-body {
671
+ display: grid;
672
+ gap: 12px;
673
+ padding-top: 12px;
674
+ }
675
+
676
+ .file-list {
677
+ display: grid;
678
+ gap: 6px;
679
+ margin: 0;
680
+ padding: 0;
681
+ list-style: none;
682
+ }
683
+
684
+ .file-list li {
685
+ display: flex;
686
+ align-items: center;
687
+ gap: 8px;
688
+ min-height: 34px;
689
+ padding: 0 10px;
690
+ border-radius: 10px;
691
+ background: var(--surface-soft);
692
+ color: var(--muted);
693
+ }
694
+
695
+ pre {
696
+ margin: 0;
697
+ padding: 12px;
698
+ overflow: auto;
699
+ border-radius: 12px;
700
+ border: 1px solid var(--border);
701
+ background: #fbfcfe;
702
+ white-space: pre-wrap;
703
+ color: #334155;
704
+ font-size: 12px;
705
+ line-height: 1.6;
706
+ }
707
+
708
+ .diff-block:empty {
709
+ display: none;
710
+ }
711
+
712
+ .utility-area {
713
+ display: grid;
714
+ gap: 12px;
715
+ grid-template-columns: repeat(3, minmax(0, 1fr));
716
+ padding: 0 28px 28px;
717
+ }
718
+
719
+ .utility-panel {
720
+ overflow: hidden;
721
+ }
722
+
723
+ .utility-panel summary {
724
+ display: flex;
725
+ align-items: center;
726
+ justify-content: space-between;
727
+ gap: 14px;
728
+ min-height: 58px;
729
+ padding: 0 16px;
730
+ font-weight: 600;
731
+ }
732
+
733
+ .summary-meta {
734
+ font-size: 12px;
735
+ color: var(--muted);
736
+ }
737
+
738
+ .utility-body {
739
+ display: grid;
740
+ gap: 10px;
741
+ padding: 0 16px 16px;
742
+ }
743
+
744
+ .utility-panel pre {
745
+ margin: 0 16px 16px;
746
+ }
747
+
748
+ .compact-run-actions {
749
+ margin-top: 10px;
750
+ }
751
+
752
+ .task-card[draggable="true"] {
753
+ cursor: grab;
754
+ }
755
+
756
+ .task-card[draggable="true"]:active {
757
+ cursor: grabbing;
758
+ }
759
+
760
+ @media (max-width: 1280px) {
761
+ .workspace-layout {
762
+ grid-template-columns: 1fr;
763
+ }
764
+
765
+ .inspector {
766
+ position: static;
767
+ min-height: auto;
768
+ }
769
+
770
+ .utility-area {
771
+ grid-template-columns: 1fr;
772
+ }
773
+ }
774
+
775
+ @media (max-width: 980px) {
776
+ .topbar,
777
+ .board-header {
778
+ flex-direction: column;
779
+ align-items: stretch;
780
+ }
781
+
782
+ .topbar-actions {
783
+ flex-direction: column;
784
+ }
785
+
786
+ .token-box {
787
+ width: 100%;
788
+ }
789
+
790
+ .metric-strip {
791
+ grid-template-columns: repeat(2, minmax(0, 1fr));
792
+ }
793
+ }
794
+
795
+ @media (max-width: 720px) {
796
+ .topbar,
797
+ .workspace-layout,
798
+ .utility-area {
799
+ padding-left: 16px;
800
+ padding-right: 16px;
801
+ }
802
+
803
+ .kanban-board {
804
+ grid-auto-flow: row;
805
+ grid-auto-columns: unset;
806
+ grid-template-columns: 1fr;
807
+ }
808
+
809
+ .kanban-column {
810
+ min-height: auto;
811
+ }
812
+
813
+ .task-composer-grid,
814
+ .inspector-grid {
815
+ grid-template-columns: 1fr;
816
+ }
817
+
818
+ .token-row {
819
+ flex-direction: column;
820
+ }
821
+ }