@echothink-ui/task 0.1.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.
Files changed (64) hide show
  1. package/README.md +5 -0
  2. package/dist/components/BackendThinkingChain.d.ts +2 -0
  3. package/dist/components/BlockingReasonPanel.d.ts +2 -0
  4. package/dist/components/DAGEdge.d.ts +2 -0
  5. package/dist/components/DAGLegend.d.ts +2 -0
  6. package/dist/components/DAGNode.d.ts +4 -0
  7. package/dist/components/DecisionRequiredPanel.d.ts +2 -0
  8. package/dist/components/HumanInterventionPanel.d.ts +2 -0
  9. package/dist/components/MobileTaskShell.d.ts +12 -0
  10. package/dist/components/TaskApprovalPanel.d.ts +2 -0
  11. package/dist/components/TaskCard.d.ts +2 -0
  12. package/dist/components/TaskDependencyList.d.ts +2 -0
  13. package/dist/components/TaskDetailPanel.d.ts +2 -0
  14. package/dist/components/TaskHandoffPanel.d.ts +2 -0
  15. package/dist/components/TaskProgressIndicator.d.ts +2 -0
  16. package/dist/components/TaskRetryPanel.d.ts +2 -0
  17. package/dist/components/TaskRunLog.d.ts +2 -0
  18. package/dist/components/TaskStatusBadge.d.ts +2 -0
  19. package/dist/components/TaskTable.d.ts +5 -0
  20. package/dist/components/TaskTimeline.d.ts +2 -0
  21. package/dist/components/TaskWaveDAG.d.ts +2 -0
  22. package/dist/components/TaskWaveHeader.d.ts +2 -0
  23. package/dist/components/TaskWaveTable.d.ts +2 -0
  24. package/dist/components/utils.d.ts +13 -0
  25. package/dist/index.cjs +2434 -0
  26. package/dist/index.cjs.map +1 -0
  27. package/dist/index.css +2402 -0
  28. package/dist/index.css.map +1 -0
  29. package/dist/index.d.ts +27 -0
  30. package/dist/index.js +2388 -0
  31. package/dist/index.js.map +1 -0
  32. package/dist/types.d.ts +249 -0
  33. package/package.json +45 -0
  34. package/src/components/BackendThinkingChain.tsx +129 -0
  35. package/src/components/BlockingReasonPanel.tsx +67 -0
  36. package/src/components/DAGEdge.tsx +97 -0
  37. package/src/components/DAGLegend.tsx +86 -0
  38. package/src/components/DAGNode.tsx +103 -0
  39. package/src/components/DecisionRequiredPanel.tsx +166 -0
  40. package/src/components/HumanInterventionPanel.tsx +82 -0
  41. package/src/components/MobileTaskShell.tsx +52 -0
  42. package/src/components/TaskApprovalPanel.tsx +159 -0
  43. package/src/components/TaskCard.tsx +71 -0
  44. package/src/components/TaskDependencyList.test.tsx +54 -0
  45. package/src/components/TaskDependencyList.tsx +105 -0
  46. package/src/components/TaskDetailPanel.test.tsx +49 -0
  47. package/src/components/TaskDetailPanel.tsx +139 -0
  48. package/src/components/TaskHandoffPanel.tsx +125 -0
  49. package/src/components/TaskProgressIndicator.tsx +70 -0
  50. package/src/components/TaskRetryPanel.test.tsx +29 -0
  51. package/src/components/TaskRetryPanel.tsx +103 -0
  52. package/src/components/TaskRunLog.tsx +156 -0
  53. package/src/components/TaskStatusBadge.tsx +29 -0
  54. package/src/components/TaskTable.tsx +294 -0
  55. package/src/components/TaskTimeline.tsx +98 -0
  56. package/src/components/TaskWaveDAG.tsx +202 -0
  57. package/src/components/TaskWaveHeader.tsx +82 -0
  58. package/src/components/TaskWaveTable.tsx +151 -0
  59. package/src/components/css.d.ts +1 -0
  60. package/src/components/utils.ts +116 -0
  61. package/src/index.test.tsx +316 -0
  62. package/src/index.tsx +90 -0
  63. package/src/styles.css +2889 -0
  64. package/src/types.ts +289 -0
package/dist/index.css ADDED
@@ -0,0 +1,2402 @@
1
+ @import "@echothink-ui/data/styles.css";
2
+
3
+ /* src/styles.css */
4
+ .eth-task-card,
5
+ .eth-task-detail-panel,
6
+ .eth-task-wave-dag,
7
+ .eth-task-wave-table,
8
+ .eth-dag-legend,
9
+ .eth-task-wave-header,
10
+ .eth-task-timeline,
11
+ .eth-task-progress,
12
+ .eth-task-approval-panel,
13
+ .eth-task-decision-panel,
14
+ .eth-decision-required,
15
+ .eth-task-status-badge,
16
+ .eth-mobile-task-shell,
17
+ .eth-task-thinking-chain,
18
+ .eth-task-handoff-panel,
19
+ .eth-task-run-log,
20
+ .eth-task-dependencies {
21
+ color: var(--eth-color-text-primary);
22
+ font-family: var(--eth-font-family);
23
+ }
24
+ .eth-task-status-badge.eth-badge {
25
+ --eth-task-status-background: #e0e0e0;
26
+ --eth-task-status-border: transparent;
27
+ --eth-task-status-color: var(--eth-color-text-primary);
28
+ --eth-task-status-indicator: var(--eth-color-text-secondary);
29
+ align-items: center;
30
+ background-color: var(--eth-task-status-background);
31
+ border: 1px solid var(--eth-task-status-border);
32
+ color: var(--eth-task-status-color);
33
+ display: inline-flex;
34
+ font-weight: 500;
35
+ letter-spacing: 0;
36
+ min-block-size: 1.5rem;
37
+ padding-inline: var(--eth-space-sm);
38
+ vertical-align: middle;
39
+ }
40
+ .eth-task-status-badge.eth-badge .cds--tag__label {
41
+ align-items: center;
42
+ display: inline-flex;
43
+ gap: var(--eth-space-xs);
44
+ min-inline-size: 0;
45
+ }
46
+ .eth-task-status-badge__indicator {
47
+ background: var(--eth-task-status-indicator);
48
+ block-size: 0.4375rem;
49
+ border: 1px solid color-mix(in srgb, var(--eth-task-status-indicator) 22%, #ffffff);
50
+ border-radius: 50%;
51
+ flex: 0 0 0.4375rem;
52
+ inline-size: 0.4375rem;
53
+ }
54
+ .eth-task-status-badge__label {
55
+ min-inline-size: 0;
56
+ overflow: hidden;
57
+ text-overflow: ellipsis;
58
+ white-space: nowrap;
59
+ }
60
+ .eth-task-status-badge--queued.eth-badge {
61
+ --eth-task-status-background: #dde1e6;
62
+ --eth-task-status-color: #343a3f;
63
+ --eth-task-status-indicator: var(--eth-color-text-secondary);
64
+ }
65
+ .eth-task-status-badge--running.eth-badge,
66
+ .eth-task-status-badge--in-progress.eth-badge {
67
+ --eth-task-status-background: #d0e2ff;
68
+ --eth-task-status-color: #0043ce;
69
+ --eth-task-status-indicator: var(--eth-color-info);
70
+ }
71
+ .eth-task-status-badge--approval-required.eth-badge,
72
+ .eth-task-status-badge--pending-approval.eth-badge,
73
+ .eth-task-status-badge--warning.eth-badge {
74
+ --eth-task-status-background: #fcf4d6;
75
+ --eth-task-status-color: #684e00;
76
+ --eth-task-status-indicator: var(--eth-color-warning);
77
+ --eth-task-status-border: rgba(178, 134, 0, 0.2);
78
+ }
79
+ .eth-task-status-badge--blocked.eth-badge {
80
+ --eth-task-status-background: #fff1f1;
81
+ --eth-task-status-color: #a2191f;
82
+ --eth-task-status-indicator: #fa4d56;
83
+ --eth-task-status-border: rgba(218, 30, 40, 0.18);
84
+ }
85
+ .eth-task-status-badge--failed.eth-badge {
86
+ --eth-task-status-background: #ffd7d9;
87
+ --eth-task-status-color: #750e13;
88
+ --eth-task-status-indicator: var(--eth-color-danger);
89
+ --eth-task-status-border: rgba(218, 30, 40, 0.24);
90
+ }
91
+ .eth-task-status-badge--completed.eth-badge,
92
+ .eth-task-status-badge--succeeded.eth-badge,
93
+ .eth-task-status-badge--synced.eth-badge {
94
+ --eth-task-status-background: #defbe6;
95
+ --eth-task-status-color: #0e6027;
96
+ --eth-task-status-indicator: var(--eth-color-success);
97
+ }
98
+ .eth-task-card {
99
+ background: var(--eth-color-layer-01);
100
+ border: 1px solid var(--eth-color-border-subtle);
101
+ border-radius: 0;
102
+ box-shadow: none;
103
+ gap: var(--eth-space-md);
104
+ inline-size: min(100%, 40rem);
105
+ max-inline-size: 100%;
106
+ min-inline-size: 0;
107
+ padding: var(--eth-space-lg);
108
+ transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
109
+ }
110
+ .eth-task-card > .eth-surface__header {
111
+ align-items: flex-start;
112
+ gap: var(--eth-space-md);
113
+ }
114
+ .eth-task-card .eth-surface__heading {
115
+ display: grid;
116
+ gap: var(--eth-space-xs);
117
+ min-inline-size: 0;
118
+ }
119
+ .eth-task-card .eth-surface__heading h2 {
120
+ font-size: calc(1rem * var(--eth-text-scale, 1));
121
+ font-weight: 600;
122
+ line-height: 1.375;
123
+ overflow-wrap: anywhere;
124
+ }
125
+ .eth-task-card .eth-surface__subtitle,
126
+ .eth-task-card .eth-surface__description {
127
+ margin: 0;
128
+ }
129
+ .eth-task-card .eth-surface__subtitle {
130
+ color: var(--eth-color-text-secondary);
131
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
132
+ line-height: 1rem;
133
+ }
134
+ .eth-task-card .eth-surface__description {
135
+ color: var(--eth-color-text-secondary);
136
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
137
+ line-height: 1.2857;
138
+ max-inline-size: 34rem;
139
+ }
140
+ .eth-task-card .eth-surface__header-actions {
141
+ align-items: flex-start;
142
+ flex: 0 0 auto;
143
+ gap: var(--eth-space-sm);
144
+ }
145
+ .eth-task-card .eth-actions {
146
+ gap: var(--eth-space-sm);
147
+ }
148
+ .eth-task-timeline {
149
+ display: grid;
150
+ gap: var(--eth-space-lg);
151
+ inline-size: min(100%, 44rem);
152
+ max-inline-size: 100%;
153
+ min-inline-size: 0;
154
+ }
155
+ .eth-task-card .eth-button {
156
+ --eth-button-padding-inline: var(--eth-space-md);
157
+ min-block-size: 2rem;
158
+ }
159
+ .eth-task-card .eth-meta-grid {
160
+ background: var(--eth-color-layer-02);
161
+ grid-template-columns: repeat(3, minmax(0, 1fr));
162
+ }
163
+ .eth-task-card .eth-meta-grid div {
164
+ min-inline-size: 0;
165
+ padding: var(--eth-space-sm) var(--eth-space-md);
166
+ }
167
+ .eth-task-card .eth-meta-grid div:last-child {
168
+ border-inline-end: 0;
169
+ }
170
+ .eth-task-card .eth-meta-grid dt {
171
+ margin-block-end: var(--eth-space-xs);
172
+ }
173
+ .eth-task-card .eth-meta-grid dd {
174
+ align-items: center;
175
+ display: flex;
176
+ flex-wrap: wrap;
177
+ gap: var(--eth-space-xs);
178
+ min-block-size: 1.5rem;
179
+ min-inline-size: 0;
180
+ }
181
+ .eth-task-card__assignee {
182
+ align-items: center;
183
+ background: var(--eth-color-layer-02);
184
+ border: 1px solid var(--eth-color-border-subtle);
185
+ color: var(--eth-color-text-primary);
186
+ display: inline-flex;
187
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
188
+ font-weight: 600;
189
+ inline-size: fit-content;
190
+ line-height: 1rem;
191
+ max-inline-size: 100%;
192
+ min-block-size: 1.5rem;
193
+ min-inline-size: 1.5rem;
194
+ overflow: hidden;
195
+ padding-inline: var(--eth-space-sm);
196
+ text-overflow: ellipsis;
197
+ white-space: nowrap;
198
+ }
199
+ .eth-task-card--selectable {
200
+ cursor: pointer;
201
+ }
202
+ .eth-task-card--selectable:hover {
203
+ background: var(--eth-color-layer-hover);
204
+ }
205
+ .eth-task-card--selectable:focus-visible {
206
+ outline: 2px solid var(--eth-color-focus);
207
+ outline-offset: -2px;
208
+ }
209
+ .eth-task-card__tags,
210
+ .eth-task-wave-header__counts,
211
+ .eth-task-wave-header__summary {
212
+ align-items: center;
213
+ display: flex;
214
+ flex-wrap: wrap;
215
+ gap: var(--eth-space-sm);
216
+ }
217
+ .eth-task-card__tags {
218
+ border-block-start: 1px solid var(--eth-color-border-subtle);
219
+ padding-block-start: var(--eth-space-md);
220
+ }
221
+ .eth-task-card__tags .cds--tag {
222
+ margin: 0;
223
+ max-inline-size: 100%;
224
+ }
225
+ .eth-task-card__tags .cds--tag__label {
226
+ overflow: hidden;
227
+ text-overflow: ellipsis;
228
+ }
229
+ .eth-task-wave-header {
230
+ background: var(--eth-color-layer-01);
231
+ border: 1px solid var(--eth-color-border-subtle);
232
+ border-radius: 0;
233
+ box-shadow: none;
234
+ gap: var(--eth-space-lg);
235
+ inline-size: 100%;
236
+ max-inline-size: 100%;
237
+ min-inline-size: 0;
238
+ padding: var(--eth-space-lg);
239
+ }
240
+ .eth-task-wave-header > .eth-surface__header {
241
+ align-items: flex-start;
242
+ gap: var(--eth-space-lg);
243
+ min-inline-size: 0;
244
+ }
245
+ .eth-task-wave-header .eth-surface__heading {
246
+ display: grid;
247
+ gap: var(--eth-space-xs);
248
+ min-inline-size: 0;
249
+ }
250
+ .eth-task-wave-header .eth-surface__heading h2 {
251
+ font-size: calc(1.25rem * var(--eth-text-scale, 1));
252
+ font-weight: 600;
253
+ line-height: 1.4;
254
+ overflow-wrap: anywhere;
255
+ }
256
+ .eth-task-wave-header .eth-surface__subtitle,
257
+ .eth-task-wave-header .eth-surface__description {
258
+ margin: 0;
259
+ }
260
+ .eth-task-wave-header .eth-surface__subtitle {
261
+ color: var(--eth-color-text-secondary);
262
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
263
+ line-height: 1rem;
264
+ }
265
+ .eth-task-wave-header .eth-surface__header-actions {
266
+ align-items: flex-start;
267
+ flex: 0 0 auto;
268
+ justify-content: flex-end;
269
+ max-inline-size: 100%;
270
+ min-inline-size: 0;
271
+ }
272
+ .eth-task-wave-header .eth-actions {
273
+ gap: var(--eth-space-sm);
274
+ }
275
+ .eth-task-wave-header .eth-button {
276
+ --eth-button-padding-inline: var(--eth-space-md);
277
+ block-size: 2rem;
278
+ inline-size: auto;
279
+ min-block-size: 2rem;
280
+ min-inline-size: max-content;
281
+ }
282
+ .eth-task-wave-header__summary {
283
+ color: var(--eth-color-text-secondary);
284
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
285
+ line-height: 1.2857;
286
+ min-inline-size: 0;
287
+ }
288
+ .eth-task-wave-header__summary span,
289
+ .eth-task-wave-header__summary strong {
290
+ overflow-wrap: anywhere;
291
+ }
292
+ @media (width <= 42rem) {
293
+ .eth-task-card {
294
+ inline-size: 100%;
295
+ }
296
+ .eth-task-card > .eth-surface__header {
297
+ align-items: stretch;
298
+ flex-direction: column;
299
+ }
300
+ .eth-task-card .eth-surface__header-actions {
301
+ justify-content: flex-start;
302
+ }
303
+ .eth-task-card .eth-meta-grid {
304
+ grid-template-columns: 1fr;
305
+ }
306
+ .eth-task-card .eth-meta-grid div {
307
+ border-block-end: 1px solid var(--eth-color-border-subtle);
308
+ border-inline-end: 0;
309
+ }
310
+ .eth-task-card .eth-meta-grid div:last-child {
311
+ border-block-end: 0;
312
+ }
313
+ .eth-task-wave-header {
314
+ padding: var(--eth-space-md);
315
+ }
316
+ .eth-task-wave-header > .eth-surface__header {
317
+ align-items: stretch;
318
+ flex-direction: column;
319
+ }
320
+ .eth-task-wave-header .eth-surface__header-actions {
321
+ justify-content: flex-start;
322
+ }
323
+ .eth-task-wave-header .eth-actions,
324
+ .eth-task-wave-header .eth-button {
325
+ inline-size: 100%;
326
+ }
327
+ }
328
+ .eth-task-wave-header__summary strong {
329
+ color: var(--eth-color-text-primary);
330
+ }
331
+ .eth-task-wave-header .eth-task-progress {
332
+ gap: var(--eth-space-xs);
333
+ min-inline-size: 0;
334
+ }
335
+ .eth-task-wave-header .eth-task-progress__label {
336
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
337
+ line-height: 1rem;
338
+ }
339
+ .eth-task-wave-header .eth-task-progress__label strong,
340
+ .eth-task-wave-header__summary strong,
341
+ .eth-task-wave-header__count-value {
342
+ font-variant-numeric: tabular-nums;
343
+ }
344
+ .eth-task-wave-header .eth-task-progress progress {
345
+ block-size: var(--eth-space-xs);
346
+ }
347
+ .eth-task-wave-header__counts {
348
+ min-inline-size: 0;
349
+ }
350
+ .eth-task-wave-header__count.cds--tag {
351
+ margin: 0;
352
+ max-inline-size: 100%;
353
+ }
354
+ .eth-task-wave-header__count.cds--tag .cds--tag__label {
355
+ align-items: center;
356
+ display: inline-flex;
357
+ gap: var(--eth-space-2xs);
358
+ }
359
+ .eth-task-wave-header__count-value {
360
+ font-weight: 600;
361
+ }
362
+ .eth-task-wave-header__count--queued.cds--tag {
363
+ background-color: #e0e0e0;
364
+ color: #393939;
365
+ }
366
+ .eth-task-wave-header__count--approval-required.cds--tag,
367
+ .eth-task-wave-header__count--pending-approval.cds--tag {
368
+ background-color: #fcf4d6;
369
+ color: #684e00;
370
+ }
371
+ .eth-task-wave-dag {
372
+ background: var(--eth-color-layer-01);
373
+ border: 1px solid var(--eth-color-border-subtle);
374
+ border-radius: 0;
375
+ gap: var(--eth-space-md);
376
+ }
377
+ .eth-task-wave-dag > .eth-surface__header {
378
+ gap: var(--eth-space-md);
379
+ }
380
+ .eth-task-wave-dag .eth-surface__heading h2 {
381
+ font-size: calc(1rem * var(--eth-text-scale, 1));
382
+ font-weight: 600;
383
+ line-height: 1.375;
384
+ }
385
+ .eth-task-wave-dag .eth-surface__description {
386
+ max-inline-size: 42rem;
387
+ }
388
+ .eth-task-wave-dag__viewport {
389
+ background: var(--eth-color-layer-02);
390
+ border: 1px solid var(--eth-color-border-subtle);
391
+ inline-size: 100%;
392
+ min-inline-size: 0;
393
+ overflow-x: auto;
394
+ overflow-y: hidden;
395
+ }
396
+ .eth-task-wave-dag .eth-dag {
397
+ background: transparent;
398
+ border-radius: 0;
399
+ block-size: auto;
400
+ display: block;
401
+ inline-size: 100%;
402
+ min-block-size: 0;
403
+ min-inline-size: 42rem;
404
+ }
405
+ .eth-dag__canvas {
406
+ fill: var(--eth-color-layer-02);
407
+ }
408
+ .eth-task-wave-dag__fallback {
409
+ block-size: 1px;
410
+ clip: rect(0 0 0 0);
411
+ clip-path: inset(50%);
412
+ inline-size: 1px;
413
+ overflow: hidden;
414
+ position: absolute;
415
+ white-space: nowrap;
416
+ }
417
+ .eth-dag-node {
418
+ pointer-events: visiblePainted;
419
+ }
420
+ .eth-dag-node--interactive {
421
+ cursor: pointer;
422
+ }
423
+ .eth-dag-node__body {
424
+ fill: var(--eth-color-layer-01);
425
+ rx: 0;
426
+ stroke: var(--eth-color-border-subtle);
427
+ stroke-width: 1.25px;
428
+ transition: fill 110ms cubic-bezier(0.2, 0, 0.38, 0.9), stroke 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
429
+ }
430
+ .eth-dag-node--interactive:hover .eth-dag-node__body,
431
+ .eth-dag-node:focus-visible .eth-dag-node__body {
432
+ fill: var(--eth-color-layer-hover);
433
+ stroke: var(--eth-color-border-strong);
434
+ }
435
+ .eth-dag-node__selection {
436
+ fill: none;
437
+ opacity: 0;
438
+ pointer-events: none;
439
+ stroke: var(--eth-color-focus);
440
+ stroke-width: 2px;
441
+ transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
442
+ }
443
+ .eth-dag-node--selected .eth-dag-node__selection,
444
+ .eth-dag-node:focus-visible .eth-dag-node__selection {
445
+ opacity: 1;
446
+ }
447
+ .eth-dag-node__status-strip {
448
+ pointer-events: none;
449
+ }
450
+ .eth-dag-node__status-dot {
451
+ pointer-events: none;
452
+ stroke: var(--eth-color-layer-01);
453
+ stroke-width: 2px;
454
+ }
455
+ .eth-dag-node__port {
456
+ fill: var(--eth-color-layer-01);
457
+ pointer-events: none;
458
+ stroke: var(--eth-color-border-strong);
459
+ stroke-width: 1px;
460
+ }
461
+ .eth-dag-node:focus-visible {
462
+ outline: none;
463
+ }
464
+ .eth-dag-node__label {
465
+ fill: var(--eth-color-text-primary);
466
+ font-size: calc(0.8125rem * var(--eth-text-scale, 1));
467
+ font-weight: 600;
468
+ }
469
+ .eth-dag-node__status {
470
+ fill: var(--eth-color-text-secondary);
471
+ font-size: calc(0.6875rem * var(--eth-text-scale, 1));
472
+ text-transform: none;
473
+ }
474
+ .eth-dag-edge path[data-eth-component=DAGEdge] {
475
+ stroke-linecap: round;
476
+ stroke-linejoin: round;
477
+ stroke: var(--eth-color-border-strong);
478
+ transition: stroke 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
479
+ }
480
+ .eth-dag-edge marker path {
481
+ fill: var(--eth-color-border-strong);
482
+ }
483
+ .eth-dag-edge text {
484
+ fill: var(--eth-color-text-secondary);
485
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
486
+ paint-order: stroke;
487
+ stroke: var(--eth-color-layer-01);
488
+ stroke-width: 3px;
489
+ }
490
+ .eth-dag-edge__label rect {
491
+ fill: var(--eth-color-layer-01);
492
+ stroke: var(--eth-color-border-subtle);
493
+ }
494
+ .eth-dag-edge__label text {
495
+ fill: var(--eth-color-text-primary);
496
+ font-size: calc(0.6875rem * var(--eth-text-scale, 1));
497
+ font-weight: 600;
498
+ paint-order: normal;
499
+ stroke: none;
500
+ stroke-width: 0;
501
+ }
502
+ .eth-dag-edge--completed path[data-eth-component=DAGEdge],
503
+ .eth-dag-edge--succeeded path[data-eth-component=DAGEdge],
504
+ .eth-dag-edge--synced path[data-eth-component=DAGEdge],
505
+ .eth-dag-edge--active path[data-eth-component=DAGEdge] {
506
+ stroke: var(--eth-color-success);
507
+ }
508
+ .eth-dag-edge--completed marker path,
509
+ .eth-dag-edge--succeeded marker path,
510
+ .eth-dag-edge--synced marker path,
511
+ .eth-dag-edge--active marker path {
512
+ fill: var(--eth-color-success);
513
+ }
514
+ .eth-dag-edge--running path[data-eth-component=DAGEdge],
515
+ .eth-dag-edge--in-progress path[data-eth-component=DAGEdge],
516
+ .eth-dag-edge--queued path[data-eth-component=DAGEdge] {
517
+ stroke: var(--eth-color-info);
518
+ }
519
+ .eth-dag-edge--running path[data-eth-component=DAGEdge],
520
+ .eth-dag-edge--in-progress path[data-eth-component=DAGEdge],
521
+ .eth-dag-edge--queued path[data-eth-component=DAGEdge],
522
+ .eth-dag-edge--pending-approval path[data-eth-component=DAGEdge],
523
+ .eth-dag-edge--warning path[data-eth-component=DAGEdge] {
524
+ stroke-dasharray: 7 5;
525
+ }
526
+ .eth-dag-edge--running marker path,
527
+ .eth-dag-edge--in-progress marker path,
528
+ .eth-dag-edge--queued marker path {
529
+ fill: var(--eth-color-info);
530
+ }
531
+ .eth-dag-edge--blocked path[data-eth-component=DAGEdge],
532
+ .eth-dag-edge--failed path[data-eth-component=DAGEdge],
533
+ .eth-dag-edge--approval-required path[data-eth-component=DAGEdge] {
534
+ stroke: var(--eth-color-danger);
535
+ }
536
+ .eth-dag-edge--blocked path[data-eth-component=DAGEdge],
537
+ .eth-dag-edge--failed path[data-eth-component=DAGEdge],
538
+ .eth-dag-edge--approval-required path[data-eth-component=DAGEdge] {
539
+ stroke-dasharray: 3 5;
540
+ }
541
+ .eth-dag-edge--blocked marker path,
542
+ .eth-dag-edge--failed marker path,
543
+ .eth-dag-edge--approval-required marker path {
544
+ fill: var(--eth-color-danger);
545
+ }
546
+ .eth-dag-edge--pending-approval path[data-eth-component=DAGEdge],
547
+ .eth-dag-edge--warning path[data-eth-component=DAGEdge] {
548
+ stroke: var(--eth-color-warning);
549
+ }
550
+ .eth-dag-edge--pending-approval marker path,
551
+ .eth-dag-edge--warning marker path {
552
+ fill: var(--eth-color-warning);
553
+ }
554
+ .eth-dag-legend {
555
+ align-items: flex-start;
556
+ border-block-start: 1px solid var(--eth-color-border-subtle);
557
+ color: var(--eth-color-text-secondary);
558
+ display: flex;
559
+ flex-wrap: wrap;
560
+ gap: var(--eth-space-md) var(--eth-space-xl);
561
+ inline-size: 100%;
562
+ padding-block-start: var(--eth-space-sm);
563
+ }
564
+ .eth-dag-legend__group {
565
+ align-items: center;
566
+ display: flex;
567
+ flex-wrap: wrap;
568
+ gap: var(--eth-space-sm) var(--eth-space-md);
569
+ min-inline-size: 0;
570
+ }
571
+ .eth-dag-legend__heading,
572
+ .eth-dag-legend__item {
573
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
574
+ line-height: 1.333;
575
+ }
576
+ .eth-dag-legend__heading {
577
+ color: var(--eth-color-text-helper);
578
+ flex: 0 0 auto;
579
+ font-weight: 600;
580
+ }
581
+ .eth-dag-legend__list {
582
+ align-items: center;
583
+ display: flex;
584
+ flex-wrap: wrap;
585
+ gap: var(--eth-space-sm) var(--eth-space-md);
586
+ list-style: none;
587
+ margin: 0;
588
+ min-inline-size: 0;
589
+ padding: 0;
590
+ }
591
+ .eth-dag-legend__item {
592
+ align-items: center;
593
+ display: inline-flex;
594
+ gap: var(--eth-space-xs);
595
+ min-block-size: var(--eth-space-lg);
596
+ white-space: nowrap;
597
+ }
598
+ .eth-dag-legend__label {
599
+ display: inline-block;
600
+ max-inline-size: 12rem;
601
+ overflow: hidden;
602
+ text-overflow: ellipsis;
603
+ }
604
+ .eth-dag-legend__swatch {
605
+ --eth-dag-legend-color: var(--eth-color-border-strong);
606
+ background: var(--eth-dag-legend-color);
607
+ block-size: 0.625rem;
608
+ border: 1px solid var(--eth-dag-legend-color);
609
+ border-radius: 50%;
610
+ flex: 0 0 auto;
611
+ inline-size: 0.625rem;
612
+ }
613
+ .eth-dag-legend__swatch--queued,
614
+ .eth-dag-legend__swatch--pending-approval,
615
+ .eth-dag-legend__swatch--warning {
616
+ background: transparent;
617
+ }
618
+ .eth-dag-legend__swatch--pending-approval,
619
+ .eth-dag-legend__swatch--warning {
620
+ border-color: var(--eth-color-border-strong);
621
+ }
622
+ @media (width <= 42rem) {
623
+ .eth-task-wave-dag > .eth-surface__header {
624
+ align-items: stretch;
625
+ flex-direction: column;
626
+ }
627
+ .eth-task-wave-dag .eth-dag {
628
+ min-inline-size: 40rem;
629
+ }
630
+ }
631
+ .eth-dag-legend__edge {
632
+ --eth-dag-legend-color: var(--eth-color-border-strong);
633
+ align-items: center;
634
+ block-size: var(--eth-space-lg);
635
+ display: inline-flex;
636
+ flex: 0 0 auto;
637
+ inline-size: var(--eth-space-2xl);
638
+ position: relative;
639
+ }
640
+ .eth-dag-legend__edge::before {
641
+ border-block-start: 2px solid var(--eth-dag-legend-color);
642
+ content: "";
643
+ inline-size: 100%;
644
+ }
645
+ .eth-dag-legend__edge::after {
646
+ border-block: 0.25rem solid transparent;
647
+ border-inline-start: 0.375rem solid var(--eth-dag-legend-color);
648
+ content: "";
649
+ inset-block-start: 50%;
650
+ inset-inline-end: 0;
651
+ position: absolute;
652
+ transform: translateY(-50%);
653
+ }
654
+ .eth-dag-legend__edge--critical::before {
655
+ border-block-start-width: 3px;
656
+ }
657
+ .eth-dag-legend__edge--conditional::before {
658
+ border-block-start-style: dashed;
659
+ }
660
+ .eth-task-timeline__list {
661
+ display: grid;
662
+ gap: 0;
663
+ list-style: none;
664
+ margin: 0;
665
+ min-inline-size: 0;
666
+ padding: 0;
667
+ }
668
+ .eth-task-timeline__event {
669
+ --eth-task-timeline-accent: var(--eth-color-interactive-primary);
670
+ display: grid;
671
+ gap: 0 var(--eth-space-md);
672
+ grid-template-columns: minmax(7.5rem, max-content) 1rem minmax(0, 1fr);
673
+ min-inline-size: 0;
674
+ }
675
+ .eth-task-timeline__event--comment {
676
+ --eth-task-timeline-accent: var(--eth-color-border-strong);
677
+ }
678
+ .eth-task-timeline__event--assignment {
679
+ --eth-task-timeline-accent: var(--eth-color-info);
680
+ }
681
+ .eth-task-timeline__event--attachment {
682
+ --eth-task-timeline-accent: var(--eth-color-success);
683
+ }
684
+ .eth-task-timeline__event--system {
685
+ --eth-task-timeline-accent: var(--eth-color-text-secondary);
686
+ }
687
+ .eth-task-timeline__time {
688
+ color: var(--eth-color-text-secondary);
689
+ font-family: var(--eth-font-mono, "IBM Plex Mono", monospace);
690
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
691
+ font-variant-numeric: tabular-nums;
692
+ justify-self: end;
693
+ line-height: 1.3333;
694
+ padding-block-start: var(--eth-space-2xs);
695
+ white-space: nowrap;
696
+ }
697
+ .eth-task-timeline__rail {
698
+ display: flex;
699
+ justify-content: center;
700
+ min-block-size: 100%;
701
+ position: relative;
702
+ }
703
+ .eth-task-timeline__rail::after {
704
+ background: var(--eth-color-border-subtle);
705
+ block-size: calc(100% - var(--eth-space-xs));
706
+ content: "";
707
+ inline-size: 1px;
708
+ inset-block-start: 0.875rem;
709
+ inset-inline-start: calc(50% - 0.5px);
710
+ position: absolute;
711
+ }
712
+ .eth-task-timeline__event:last-child .eth-task-timeline__rail::after {
713
+ display: none;
714
+ }
715
+ .eth-task-timeline__marker {
716
+ background: var(--eth-task-timeline-accent);
717
+ block-size: 0.625rem;
718
+ border: 2px solid var(--eth-color-layer-01);
719
+ border-radius: 50%;
720
+ box-shadow: 0 0 0 1px var(--eth-task-timeline-accent);
721
+ inline-size: 0.625rem;
722
+ margin-block-start: var(--eth-space-xs);
723
+ position: relative;
724
+ z-index: 1;
725
+ }
726
+ .eth-task-timeline__body {
727
+ border-block-end: 1px solid var(--eth-color-border-subtle);
728
+ display: grid;
729
+ gap: var(--eth-space-xs);
730
+ min-inline-size: 0;
731
+ padding-block-end: var(--eth-space-lg);
732
+ }
733
+ .eth-task-timeline__event + .eth-task-timeline__event .eth-task-timeline__time,
734
+ .eth-task-timeline__event + .eth-task-timeline__event .eth-task-timeline__rail,
735
+ .eth-task-timeline__event + .eth-task-timeline__event .eth-task-timeline__body {
736
+ padding-block-start: var(--eth-space-lg);
737
+ }
738
+ .eth-task-timeline__event:last-child .eth-task-timeline__body {
739
+ border-block-end: 0;
740
+ padding-block-end: 0;
741
+ }
742
+ .eth-task-timeline__event-header {
743
+ align-items: center;
744
+ display: flex;
745
+ flex-wrap: wrap;
746
+ gap: var(--eth-space-sm);
747
+ min-inline-size: 0;
748
+ }
749
+ .eth-task-timeline__actor {
750
+ color: var(--eth-color-text-secondary);
751
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
752
+ line-height: 1.3333;
753
+ min-inline-size: 0;
754
+ overflow-wrap: anywhere;
755
+ }
756
+ .eth-task-timeline__summary {
757
+ color: var(--eth-color-text-primary);
758
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
759
+ font-weight: 600;
760
+ line-height: 1.4286;
761
+ min-inline-size: 0;
762
+ overflow-wrap: anywhere;
763
+ }
764
+ .eth-task-timeline__details {
765
+ color: var(--eth-color-text-secondary);
766
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
767
+ line-height: 1.4286;
768
+ margin: 0;
769
+ min-inline-size: 0;
770
+ overflow-wrap: anywhere;
771
+ }
772
+ .eth-task-progress {
773
+ display: grid;
774
+ gap: var(--eth-space-sm);
775
+ }
776
+ .eth-task-progress__label {
777
+ align-items: center;
778
+ color: var(--eth-color-text-secondary);
779
+ display: flex;
780
+ gap: var(--eth-space-md);
781
+ justify-content: space-between;
782
+ }
783
+ .eth-task-progress__label strong {
784
+ color: var(--eth-color-text-primary);
785
+ }
786
+ .eth-task-progress progress {
787
+ block-size: var(--eth-space-sm);
788
+ border: 0;
789
+ inline-size: 100%;
790
+ }
791
+ .eth-task-progress progress::-webkit-progress-bar {
792
+ background: var(--eth-color-layer-02);
793
+ }
794
+ .eth-task-progress progress::-webkit-progress-value {
795
+ background: var(--eth-color-interactive-primary);
796
+ }
797
+ .eth-task-progress progress::-moz-progress-bar {
798
+ background: var(--eth-color-interactive-primary);
799
+ }
800
+ .eth-task-progress__steps {
801
+ align-items: stretch;
802
+ display: flex;
803
+ gap: 0;
804
+ list-style: none;
805
+ margin: 0;
806
+ overflow-x: auto;
807
+ padding: 0 0 var(--eth-space-xs);
808
+ }
809
+ .eth-task-progress__step {
810
+ color: var(--eth-color-text-secondary);
811
+ display: grid;
812
+ flex: 1 0 9.5rem;
813
+ gap: var(--eth-space-sm);
814
+ grid-template-rows: auto 1fr;
815
+ min-inline-size: 9.5rem;
816
+ padding-inline-end: var(--eth-space-sm);
817
+ }
818
+ .eth-task-progress__step-track {
819
+ align-items: center;
820
+ display: grid;
821
+ gap: var(--eth-space-sm);
822
+ grid-template-columns: var(--eth-space-lg) minmax(0, 1fr);
823
+ min-block-size: var(--eth-space-lg);
824
+ }
825
+ .eth-task-progress__circle {
826
+ align-items: center;
827
+ background: var(--eth-color-layer-01);
828
+ border: 1px solid var(--eth-color-border-strong);
829
+ border-radius: 50%;
830
+ block-size: var(--eth-space-lg);
831
+ display: inline-flex;
832
+ flex: 0 0 auto;
833
+ inline-size: var(--eth-space-lg);
834
+ justify-content: center;
835
+ }
836
+ .eth-task-progress__connector {
837
+ background: var(--eth-color-border-subtle);
838
+ block-size: 1px;
839
+ display: block;
840
+ inline-size: 100%;
841
+ }
842
+ .eth-task-progress__step-copy {
843
+ display: grid;
844
+ gap: var(--eth-space-2xs);
845
+ min-inline-size: 0;
846
+ }
847
+ .eth-task-progress__step-label {
848
+ color: var(--eth-color-text-primary);
849
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
850
+ font-weight: 600;
851
+ line-height: 1.125rem;
852
+ min-inline-size: 0;
853
+ overflow: hidden;
854
+ text-overflow: ellipsis;
855
+ white-space: nowrap;
856
+ }
857
+ .eth-task-progress__step--completed .eth-task-progress__circle,
858
+ .eth-task-progress__step--succeeded .eth-task-progress__circle,
859
+ .eth-task-progress__step--synced .eth-task-progress__circle {
860
+ background: var(--eth-color-success);
861
+ border-color: var(--eth-color-success);
862
+ }
863
+ .eth-task-progress__step--completed .eth-task-progress__circle::after,
864
+ .eth-task-progress__step--succeeded .eth-task-progress__circle::after,
865
+ .eth-task-progress__step--synced .eth-task-progress__circle::after {
866
+ block-size: 0.5rem;
867
+ border-block-end: 1.5px solid var(--eth-color-layer-01);
868
+ border-inline-end: 1.5px solid var(--eth-color-layer-01);
869
+ content: "";
870
+ inline-size: 0.25rem;
871
+ transform: rotate(45deg) translate(-0.0625rem, -0.0625rem);
872
+ }
873
+ .eth-task-progress__step--completed .eth-task-progress__connector,
874
+ .eth-task-progress__step--succeeded .eth-task-progress__connector,
875
+ .eth-task-progress__step--synced .eth-task-progress__connector {
876
+ background: var(--eth-color-success);
877
+ }
878
+ .eth-task-progress__step--running .eth-task-progress__circle,
879
+ .eth-task-progress__step--in-progress .eth-task-progress__circle,
880
+ .eth-task-progress__step--active .eth-task-progress__circle,
881
+ .eth-task-progress__step--queued .eth-task-progress__circle {
882
+ background: var(--eth-color-info);
883
+ border-color: var(--eth-color-info);
884
+ }
885
+ .eth-task-progress__step--blocked .eth-task-progress__circle,
886
+ .eth-task-progress__step--failed .eth-task-progress__circle,
887
+ .eth-task-progress__step--approval-required .eth-task-progress__circle {
888
+ background: var(--eth-color-danger);
889
+ border-color: var(--eth-color-danger);
890
+ }
891
+ .eth-task-progress__step--pending-approval .eth-task-progress__circle,
892
+ .eth-task-progress__step--warning .eth-task-progress__circle {
893
+ background: var(--eth-color-warning);
894
+ border-color: var(--eth-color-warning);
895
+ }
896
+ .eth-task-progress__step--not-started .eth-task-progress__step-label,
897
+ .eth-task-progress__step--inactive .eth-task-progress__step-label {
898
+ color: var(--eth-color-text-secondary);
899
+ font-weight: 400;
900
+ }
901
+ .eth-task-progress__step-status {
902
+ color: var(--eth-color-text-secondary);
903
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
904
+ line-height: 1rem;
905
+ min-inline-size: 0;
906
+ overflow: hidden;
907
+ text-overflow: ellipsis;
908
+ white-space: nowrap;
909
+ }
910
+ .eth-mobile-task-shell {
911
+ background: var(--eth-color-background);
912
+ color: var(--eth-color-text-primary);
913
+ display: grid;
914
+ grid-template-rows: auto minmax(0, 1fr) auto;
915
+ min-block-size: 100vh;
916
+ min-block-size: 100dvh;
917
+ }
918
+ .eth-mobile-task-shell__header {
919
+ background: var(--eth-color-layer-01);
920
+ border-block-end: 1px solid var(--eth-color-border-subtle);
921
+ display: grid;
922
+ gap: var(--eth-space-md);
923
+ padding: calc(var(--eth-space-lg) + env(safe-area-inset-top)) var(--eth-space-lg) var(--eth-space-lg);
924
+ position: sticky;
925
+ top: 0;
926
+ z-index: 2;
927
+ }
928
+ .eth-mobile-task-shell__title-block {
929
+ display: grid;
930
+ gap: var(--eth-space-xs);
931
+ }
932
+ .eth-mobile-task-shell__title {
933
+ font-size: calc(1.25rem * var(--eth-text-scale, 1));
934
+ line-height: 1.2;
935
+ margin: 0;
936
+ }
937
+ .eth-mobile-task-shell__subtitle,
938
+ .eth-mobile-task-shell__identity {
939
+ color: var(--eth-color-text-secondary);
940
+ }
941
+ .eth-mobile-task-shell__subtitle {
942
+ margin: 0;
943
+ }
944
+ .eth-mobile-task-shell__progress,
945
+ .eth-mobile-task-shell__footer-main {
946
+ min-inline-size: 0;
947
+ }
948
+ .eth-mobile-task-shell__main {
949
+ display: grid;
950
+ gap: var(--eth-space-lg);
951
+ overflow: auto;
952
+ padding: var(--eth-space-lg);
953
+ }
954
+ .eth-mobile-task-shell__footer {
955
+ background: var(--eth-color-layer-01);
956
+ border-block-start: 1px solid var(--eth-color-border-subtle);
957
+ bottom: 0;
958
+ display: grid;
959
+ gap: var(--eth-space-md);
960
+ padding: var(--eth-space-md) var(--eth-space-lg) calc(var(--eth-space-md) + env(safe-area-inset-bottom));
961
+ position: sticky;
962
+ z-index: 2;
963
+ }
964
+ .eth-mobile-task-shell__identity {
965
+ border-block-start: 1px solid var(--eth-color-border-subtle);
966
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
967
+ padding-block-start: var(--eth-space-md);
968
+ }
969
+ .eth-task-decision-panel {
970
+ inline-size: min(100%, 72rem);
971
+ }
972
+ .eth-decision-required {
973
+ border-inline-start: 4px solid var(--eth-color-warning);
974
+ }
975
+ .eth-decision-required--low {
976
+ border-inline-start-color: var(--eth-color-info);
977
+ }
978
+ .eth-decision-required--medium {
979
+ border-inline-start-color: var(--eth-color-warning);
980
+ }
981
+ .eth-decision-required--high,
982
+ .eth-decision-required--critical {
983
+ border-inline-start-color: var(--eth-color-danger);
984
+ }
985
+ .eth-task-decision-panel--low {
986
+ box-shadow: inset 4px 0 0 var(--eth-color-info);
987
+ }
988
+ .eth-task-decision-panel--medium {
989
+ box-shadow: inset 4px 0 0 var(--eth-color-warning);
990
+ }
991
+ .eth-task-decision-panel--high,
992
+ .eth-task-decision-panel--critical {
993
+ box-shadow: inset 4px 0 0 var(--eth-color-danger);
994
+ }
995
+ .eth-task-decision-panel .cds--inline-notification {
996
+ margin: 0;
997
+ max-inline-size: none;
998
+ }
999
+ .eth-task-decision-panel__summary,
1000
+ .eth-task-approval-panel__body {
1001
+ display: grid;
1002
+ gap: var(--eth-space-md);
1003
+ }
1004
+ .eth-task-decision-panel__summary {
1005
+ background: var(--eth-color-layer-02);
1006
+ border: 1px solid var(--eth-color-border-subtle);
1007
+ padding: var(--eth-space-lg);
1008
+ }
1009
+ .eth-task-decision-panel__section-label,
1010
+ .eth-task-decision-panel__section-header span,
1011
+ .eth-task-decision-panel__option-state {
1012
+ color: var(--eth-color-text-secondary);
1013
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1014
+ font-weight: 600;
1015
+ letter-spacing: 0;
1016
+ line-height: 1.333;
1017
+ text-transform: uppercase;
1018
+ }
1019
+ .eth-task-decision-panel__summary-body {
1020
+ color: var(--eth-color-text-primary);
1021
+ line-height: 1.5;
1022
+ }
1023
+ .eth-task-decision-panel__summary-body > :first-child {
1024
+ margin-block-start: 0;
1025
+ }
1026
+ .eth-task-decision-panel__summary-body > :last-child {
1027
+ margin-block-end: 0;
1028
+ }
1029
+ .eth-task-decision-panel__evidence {
1030
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1031
+ padding-block-start: var(--eth-space-md);
1032
+ }
1033
+ .eth-task-decision-panel__section-header {
1034
+ align-items: baseline;
1035
+ display: flex;
1036
+ gap: var(--eth-space-md);
1037
+ justify-content: space-between;
1038
+ }
1039
+ .eth-task-decision-panel__section-header h3 {
1040
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1041
+ font-weight: 600;
1042
+ line-height: 1.2857;
1043
+ margin: 0;
1044
+ }
1045
+ .eth-task-decision-panel__evidence ul {
1046
+ display: grid;
1047
+ gap: var(--eth-space-sm);
1048
+ list-style: none;
1049
+ margin: var(--eth-space-md) 0 0;
1050
+ padding: 0;
1051
+ }
1052
+ .eth-task-decision-panel__evidence li {
1053
+ border: 1px solid var(--eth-color-border-subtle);
1054
+ display: grid;
1055
+ gap: var(--eth-space-xs);
1056
+ grid-template-columns: minmax(9rem, 0.35fr) minmax(0, 1fr);
1057
+ padding: var(--eth-space-md);
1058
+ }
1059
+ .eth-task-decision-panel__evidence-label {
1060
+ min-inline-size: 0;
1061
+ }
1062
+ .eth-task-decision-panel__evidence-link {
1063
+ color: var(--eth-color-link);
1064
+ font-weight: 600;
1065
+ text-decoration: none;
1066
+ }
1067
+ .eth-task-decision-panel__evidence-link:hover {
1068
+ text-decoration: underline;
1069
+ }
1070
+ .eth-task-decision-panel__evidence-link:focus-visible {
1071
+ outline: 2px solid var(--eth-color-focus);
1072
+ outline-offset: 2px;
1073
+ }
1074
+ .eth-task-decision-panel__evidence-preview {
1075
+ color: var(--eth-color-text-secondary);
1076
+ min-inline-size: 0;
1077
+ overflow-wrap: anywhere;
1078
+ }
1079
+ .eth-task-decision-panel__options {
1080
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1081
+ display: grid;
1082
+ gap: var(--eth-space-sm);
1083
+ padding-block-start: var(--eth-space-md);
1084
+ }
1085
+ .eth-task-decision-panel__option {
1086
+ align-items: center;
1087
+ background: var(--eth-color-layer-01);
1088
+ border: 1px solid var(--eth-color-border-subtle);
1089
+ border-inline-start: 4px solid var(--eth-color-border-strong);
1090
+ color: var(--eth-color-text-primary);
1091
+ cursor: pointer;
1092
+ display: grid;
1093
+ font: inherit;
1094
+ gap: var(--eth-space-lg);
1095
+ grid-template-columns: minmax(0, 1fr) auto;
1096
+ inline-size: 100%;
1097
+ min-block-size: 4rem;
1098
+ padding: var(--eth-space-md);
1099
+ text-align: start;
1100
+ transition:
1101
+ background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
1102
+ border-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
1103
+ outline-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
1104
+ }
1105
+ .eth-task-decision-panel__option:hover:not(:disabled) {
1106
+ background: var(--eth-color-layer-hover);
1107
+ border-color: var(--eth-color-border-strong);
1108
+ }
1109
+ .eth-task-decision-panel__option:focus-visible {
1110
+ outline: 2px solid var(--eth-color-focus);
1111
+ outline-offset: -2px;
1112
+ }
1113
+ .eth-task-decision-panel__option:disabled {
1114
+ color: var(--eth-color-text-secondary);
1115
+ cursor: not-allowed;
1116
+ opacity: 0.55;
1117
+ }
1118
+ .eth-task-decision-panel__option:disabled .eth-task-decision-panel__option-state {
1119
+ color: currentcolor;
1120
+ }
1121
+ .eth-task-decision-panel__option[aria-pressed=true] {
1122
+ background: var(--eth-color-layer-selected);
1123
+ border-color: var(--eth-color-border-strong);
1124
+ }
1125
+ .eth-task-decision-panel__option--primary {
1126
+ border-inline-start-color: var(--eth-color-focus);
1127
+ }
1128
+ .eth-task-decision-panel__option--success {
1129
+ border-inline-start-color: var(--eth-color-success);
1130
+ }
1131
+ .eth-task-decision-panel__option--danger {
1132
+ border-inline-start-color: var(--eth-color-danger);
1133
+ }
1134
+ .eth-task-decision-panel__option--secondary,
1135
+ .eth-task-decision-panel__option--tertiary,
1136
+ .eth-task-decision-panel__option--ghost {
1137
+ border-inline-start-color: var(--eth-color-focus);
1138
+ }
1139
+ .eth-task-decision-panel__option-main {
1140
+ display: grid;
1141
+ gap: var(--eth-space-xs);
1142
+ min-inline-size: 0;
1143
+ }
1144
+ .eth-task-decision-panel__option-label {
1145
+ font-weight: 600;
1146
+ line-height: 1.2857;
1147
+ }
1148
+ .eth-task-decision-panel__option-description {
1149
+ color: var(--eth-color-text-secondary);
1150
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1151
+ line-height: 1.333;
1152
+ overflow-wrap: anywhere;
1153
+ }
1154
+ .eth-task-decision-panel__option-state {
1155
+ color: var(--eth-color-link);
1156
+ white-space: nowrap;
1157
+ }
1158
+ .eth-task-decision-panel__decision {
1159
+ color: var(--eth-color-text-secondary);
1160
+ }
1161
+ @media (max-width: 42rem) {
1162
+ .eth-task-decision-panel__evidence li,
1163
+ .eth-task-decision-panel__option {
1164
+ grid-template-columns: 1fr;
1165
+ }
1166
+ .eth-task-decision-panel__option-state {
1167
+ justify-self: start;
1168
+ }
1169
+ }
1170
+ .eth-task-table-shell,
1171
+ .eth-task-wave-table {
1172
+ display: grid;
1173
+ gap: var(--eth-space-lg);
1174
+ }
1175
+ .eth-task-table-shell {
1176
+ color: var(--eth-color-text-primary);
1177
+ font-family: var(--eth-font-family);
1178
+ inline-size: 100%;
1179
+ min-inline-size: 0;
1180
+ }
1181
+ .eth-task-table-shell__header {
1182
+ align-items: start;
1183
+ display: grid;
1184
+ gap: var(--eth-space-md);
1185
+ grid-template-columns: minmax(0, 1fr) auto;
1186
+ }
1187
+ .eth-task-table-shell__heading {
1188
+ display: grid;
1189
+ gap: var(--eth-space-xs);
1190
+ min-inline-size: 0;
1191
+ }
1192
+ .eth-task-table-shell__header h2,
1193
+ .eth-task-table-shell__header p {
1194
+ margin: 0;
1195
+ }
1196
+ .eth-task-table-shell__header h2 {
1197
+ color: var(--eth-color-text-primary);
1198
+ font-size: calc(1.25rem * var(--eth-text-scale, 1));
1199
+ font-weight: 600;
1200
+ line-height: 1.3;
1201
+ }
1202
+ .eth-task-table-shell__header p {
1203
+ color: var(--eth-color-text-secondary);
1204
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1205
+ line-height: 1.4286;
1206
+ max-inline-size: 44rem;
1207
+ }
1208
+ .eth-task-table-shell__toolbar {
1209
+ align-items: end;
1210
+ background: var(--eth-color-layer-02);
1211
+ border: 1px solid var(--eth-color-border-subtle);
1212
+ display: flex;
1213
+ flex-wrap: wrap;
1214
+ gap: var(--eth-space-md);
1215
+ justify-content: space-between;
1216
+ min-block-size: 3rem;
1217
+ padding: var(--eth-space-md) var(--eth-space-lg);
1218
+ }
1219
+ .eth-task-table-shell__filters {
1220
+ align-items: end;
1221
+ display: flex;
1222
+ flex-wrap: wrap;
1223
+ gap: var(--eth-space-md);
1224
+ min-inline-size: 0;
1225
+ }
1226
+ .eth-task-table-shell__filter {
1227
+ inline-size: min(100%, 14rem);
1228
+ }
1229
+ .eth-task-table-shell__summary {
1230
+ color: var(--eth-color-text-secondary);
1231
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1232
+ line-height: 1.333;
1233
+ white-space: nowrap;
1234
+ }
1235
+ .eth-task-table {
1236
+ min-inline-size: 65rem;
1237
+ table-layout: fixed;
1238
+ }
1239
+ .eth-task-table__task {
1240
+ display: grid;
1241
+ gap: var(--eth-space-2xs);
1242
+ min-inline-size: 0;
1243
+ }
1244
+ .eth-task-table__task-title,
1245
+ .eth-task-table__task-description,
1246
+ .eth-task-table__date {
1247
+ display: block;
1248
+ min-inline-size: 0;
1249
+ overflow: hidden;
1250
+ text-overflow: ellipsis;
1251
+ white-space: nowrap;
1252
+ }
1253
+ .eth-task-table__task-title {
1254
+ color: var(--eth-color-text-primary);
1255
+ font-weight: 600;
1256
+ }
1257
+ .eth-task-table__task-description {
1258
+ color: var(--eth-color-text-secondary);
1259
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1260
+ font-weight: 400;
1261
+ line-height: 1.333;
1262
+ }
1263
+ .eth-task-table__priority {
1264
+ max-inline-size: 100%;
1265
+ }
1266
+ .eth-task-table__empty-value {
1267
+ color: var(--eth-color-text-secondary);
1268
+ }
1269
+ @media (width <= 42rem) {
1270
+ .eth-task-table-shell__header {
1271
+ grid-template-columns: 1fr;
1272
+ }
1273
+ .eth-task-table-shell__toolbar,
1274
+ .eth-task-table-shell__filters {
1275
+ align-items: stretch;
1276
+ flex-direction: column;
1277
+ }
1278
+ .eth-task-table-shell__summary {
1279
+ white-space: normal;
1280
+ }
1281
+ }
1282
+ .eth-task-wave-table {
1283
+ inline-size: 100%;
1284
+ }
1285
+ .eth-task-wave-table .eth-surface__heading h2 {
1286
+ font-size: calc(1.25rem * var(--eth-text-scale, 1));
1287
+ line-height: 1.75rem;
1288
+ }
1289
+ .eth-task-wave-table .eth-surface__subtitle {
1290
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1291
+ line-height: 1rem;
1292
+ }
1293
+ .eth-task-wave-table .eth-data-table-wrap {
1294
+ border-color: var(--eth-color-border-subtle);
1295
+ box-shadow: none;
1296
+ }
1297
+ .eth-task-wave-table__table {
1298
+ min-inline-size: 60rem;
1299
+ table-layout: fixed;
1300
+ }
1301
+ .eth-task-wave-table__table th {
1302
+ background: var(--eth-color-layer-02);
1303
+ color: var(--eth-color-text-secondary);
1304
+ white-space: nowrap;
1305
+ }
1306
+ .eth-task-wave-table__table th:nth-child(1),
1307
+ .eth-task-wave-table__table td:nth-child(1) {
1308
+ inline-size: 4.5rem;
1309
+ }
1310
+ .eth-task-wave-table__table th:nth-child(2),
1311
+ .eth-task-wave-table__table td:nth-child(2) {
1312
+ inline-size: 22rem;
1313
+ }
1314
+ .eth-task-wave-table__table th:nth-child(3),
1315
+ .eth-task-wave-table__table td:nth-child(3) {
1316
+ inline-size: 12rem;
1317
+ }
1318
+ .eth-task-wave-table__table th:nth-child(4),
1319
+ .eth-task-wave-table__table td:nth-child(4) {
1320
+ inline-size: 8rem;
1321
+ }
1322
+ .eth-task-wave-table__table th:nth-child(5),
1323
+ .eth-task-wave-table__table td:nth-child(5),
1324
+ .eth-task-wave-table__table th:nth-child(6),
1325
+ .eth-task-wave-table__table td:nth-child(6) {
1326
+ inline-size: 7rem;
1327
+ }
1328
+ .eth-task-wave-table__order,
1329
+ .eth-task-wave-table__duration {
1330
+ color: var(--eth-color-text-secondary);
1331
+ font-variant-numeric: tabular-nums;
1332
+ }
1333
+ .eth-task-wave-table__task-title,
1334
+ .eth-task-wave-table__assignee,
1335
+ .eth-task-wave-table__duration {
1336
+ display: block;
1337
+ min-inline-size: 0;
1338
+ overflow: hidden;
1339
+ text-overflow: ellipsis;
1340
+ white-space: nowrap;
1341
+ }
1342
+ .eth-task-wave-table__task-title {
1343
+ color: var(--eth-color-text-primary);
1344
+ font-weight: 600;
1345
+ }
1346
+ .eth-task-wave-table__task-button {
1347
+ max-inline-size: 100%;
1348
+ }
1349
+ .eth-task-wave-table__task-button .eth-task-wave-table__task-title {
1350
+ color: inherit;
1351
+ }
1352
+ .eth-task-wave-table__status {
1353
+ background: var(--eth-color-layer-01);
1354
+ border: 1px solid var(--eth-color-border-subtle);
1355
+ border-radius: 1rem;
1356
+ min-block-size: 1.5rem;
1357
+ padding: 0 var(--eth-space-sm) 0 var(--eth-space-xs);
1358
+ }
1359
+ .eth-task-wave-table__status .eth-status-dot__label {
1360
+ max-inline-size: 9rem;
1361
+ }
1362
+ .eth-task-wave-table__dependency-count {
1363
+ justify-content: center;
1364
+ min-inline-size: 2rem;
1365
+ }
1366
+ .eth-task-wave-table__empty {
1367
+ color: var(--eth-color-text-secondary);
1368
+ }
1369
+ .eth-task-dependencies,
1370
+ .eth-task-dependencies__group {
1371
+ display: grid;
1372
+ gap: var(--eth-space-lg);
1373
+ }
1374
+ .eth-task-detail-panel__stack {
1375
+ display: grid;
1376
+ gap: 0;
1377
+ }
1378
+ .eth-task-detail-panel__section {
1379
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1380
+ padding-block: var(--eth-space-lg);
1381
+ }
1382
+ .eth-task-detail-panel__section summary {
1383
+ align-items: center;
1384
+ cursor: pointer;
1385
+ display: flex;
1386
+ gap: var(--eth-space-sm);
1387
+ font-weight: 600;
1388
+ inline-size: fit-content;
1389
+ list-style: none;
1390
+ min-block-size: var(--eth-space-xl);
1391
+ min-inline-size: min(100%, 12rem);
1392
+ outline-offset: 2px;
1393
+ }
1394
+ .eth-task-detail-panel__section summary::-webkit-details-marker {
1395
+ display: none;
1396
+ }
1397
+ .eth-task-detail-panel__section summary::marker {
1398
+ content: "";
1399
+ }
1400
+ .eth-task-detail-panel__section summary::before {
1401
+ border-block: 0.25rem solid transparent;
1402
+ border-inline-start: 0.3125rem solid var(--eth-color-text-secondary);
1403
+ content: "";
1404
+ flex: 0 0 auto;
1405
+ transform-origin: 35% 50%;
1406
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
1407
+ }
1408
+ .eth-task-detail-panel__section[open] summary::before {
1409
+ transform: rotate(90deg);
1410
+ }
1411
+ .eth-task-detail-panel__section summary:focus-visible {
1412
+ outline: 2px solid var(--eth-color-focus);
1413
+ }
1414
+ .eth-task-detail-panel__summary-label {
1415
+ color: var(--eth-color-text-primary);
1416
+ }
1417
+ .eth-task-detail-panel__summary-meta {
1418
+ color: var(--eth-color-text-secondary);
1419
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1420
+ font-weight: 400;
1421
+ line-height: 1.333;
1422
+ }
1423
+ .eth-task-detail-panel__section-body {
1424
+ margin-block-start: var(--eth-space-md);
1425
+ }
1426
+ .eth-task-detail-panel__metadata {
1427
+ background: var(--eth-color-layer-01);
1428
+ grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
1429
+ max-inline-size: 72rem;
1430
+ }
1431
+ .eth-task-detail-panel__description {
1432
+ color: var(--eth-color-text-secondary);
1433
+ line-height: 1.5;
1434
+ max-inline-size: 56rem;
1435
+ }
1436
+ .eth-task-detail-panel__actions .eth-actions {
1437
+ align-items: center;
1438
+ }
1439
+ .eth-task-detail-panel__actions .eth-button {
1440
+ min-inline-size: 7rem;
1441
+ }
1442
+ .eth-task-dependencies {
1443
+ gap: var(--eth-space-xl);
1444
+ }
1445
+ .eth-task-dependencies__group {
1446
+ gap: var(--eth-space-sm);
1447
+ }
1448
+ .eth-task-dependencies__group-header {
1449
+ align-items: flex-end;
1450
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1451
+ display: flex;
1452
+ gap: var(--eth-space-md);
1453
+ justify-content: space-between;
1454
+ min-inline-size: 0;
1455
+ padding-block-end: var(--eth-space-sm);
1456
+ }
1457
+ .eth-task-dependencies__group-heading {
1458
+ display: grid;
1459
+ gap: var(--eth-space-xs);
1460
+ min-inline-size: 0;
1461
+ }
1462
+ .eth-task-dependencies__group h4,
1463
+ .eth-task-dependencies__group p {
1464
+ margin: 0;
1465
+ }
1466
+ .eth-task-dependencies__group h4 {
1467
+ color: var(--eth-color-text-primary);
1468
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1469
+ font-weight: 600;
1470
+ line-height: 1.125rem;
1471
+ }
1472
+ .eth-task-dependencies__group p {
1473
+ color: var(--eth-color-text-secondary);
1474
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1475
+ line-height: 1rem;
1476
+ }
1477
+ .eth-task-dependencies__list {
1478
+ background: var(--eth-color-border-subtle);
1479
+ border: 1px solid var(--eth-color-border-subtle);
1480
+ display: grid;
1481
+ gap: 1px;
1482
+ list-style: none;
1483
+ margin: 0;
1484
+ padding: 0;
1485
+ }
1486
+ .eth-task-dependencies__item {
1487
+ align-items: center;
1488
+ background: var(--eth-color-layer-01);
1489
+ border-inline-start: 3px solid var(--eth-color-border-subtle);
1490
+ display: grid;
1491
+ gap: var(--eth-space-lg);
1492
+ grid-template-columns: minmax(0, 1fr) auto;
1493
+ min-block-size: 4rem;
1494
+ padding: var(--eth-space-md) var(--eth-space-lg);
1495
+ }
1496
+ .eth-task-dependencies__item--approval-required,
1497
+ .eth-task-dependencies__item--blocked,
1498
+ .eth-task-dependencies__item--failed {
1499
+ border-inline-start-color: var(--eth-color-danger);
1500
+ }
1501
+ .eth-task-dependencies__item--pending-approval,
1502
+ .eth-task-dependencies__item--stale,
1503
+ .eth-task-dependencies__item--warning {
1504
+ border-inline-start-color: var(--eth-color-warning);
1505
+ }
1506
+ .eth-task-dependencies__item--in-progress,
1507
+ .eth-task-dependencies__item--queued,
1508
+ .eth-task-dependencies__item--running {
1509
+ border-inline-start-color: var(--eth-color-info);
1510
+ }
1511
+ .eth-task-dependencies__item--active,
1512
+ .eth-task-dependencies__item--completed,
1513
+ .eth-task-dependencies__item--succeeded,
1514
+ .eth-task-dependencies__item--synced {
1515
+ border-inline-start-color: var(--eth-color-success);
1516
+ }
1517
+ .eth-task-dependencies__item-main {
1518
+ display: grid;
1519
+ gap: var(--eth-space-xs);
1520
+ min-inline-size: 0;
1521
+ }
1522
+ .eth-task-dependencies__relationship {
1523
+ color: var(--eth-color-text-secondary);
1524
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1525
+ line-height: 1rem;
1526
+ }
1527
+ .eth-task-dependencies__title {
1528
+ color: var(--eth-color-text-primary);
1529
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1530
+ font-weight: 600;
1531
+ line-height: 1.125rem;
1532
+ overflow-wrap: anywhere;
1533
+ }
1534
+ .eth-task-dependencies__id {
1535
+ color: var(--eth-color-text-secondary);
1536
+ font-family: var(--eth-font-mono, monospace);
1537
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1538
+ line-height: 1.333;
1539
+ overflow-wrap: anywhere;
1540
+ }
1541
+ .eth-task-dependencies__item .eth-task-status-badge {
1542
+ justify-self: end;
1543
+ max-inline-size: 100%;
1544
+ }
1545
+ .eth-task-approval-panel,
1546
+ .eth-task-human-intervention-panel,
1547
+ .eth-task-blocking-reason-panel,
1548
+ .eth-task-handoff-panel,
1549
+ .eth-task-run-log,
1550
+ .eth-task-retry-panel,
1551
+ .eth-task-thinking-chain {
1552
+ display: grid;
1553
+ gap: var(--eth-space-lg);
1554
+ }
1555
+ .eth-task-retry-panel {
1556
+ inline-size: min(100%, 64rem);
1557
+ }
1558
+ .eth-task-retry-panel .eth-inline-notification.cds--inline-notification {
1559
+ max-inline-size: none;
1560
+ }
1561
+ .eth-task-run-log {
1562
+ gap: 0;
1563
+ overflow: hidden;
1564
+ padding: 0;
1565
+ }
1566
+ .eth-task-run-log > .eth-surface__header {
1567
+ align-items: flex-start;
1568
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1569
+ padding: var(--eth-space-lg);
1570
+ }
1571
+ .eth-task-run-log > .eth-surface__header h2 {
1572
+ font-size: calc(1.25rem * var(--eth-text-scale, 1));
1573
+ font-weight: 400;
1574
+ line-height: 1.4;
1575
+ }
1576
+ .eth-task-approval-panel__summary {
1577
+ color: var(--eth-color-text-secondary);
1578
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1579
+ line-height: 1.4286;
1580
+ max-inline-size: 48rem;
1581
+ }
1582
+ .eth-task-approval-panel__state.cds--inline-notification,
1583
+ .eth-task-approval-panel__state.eth-inline-notification {
1584
+ inline-size: 100%;
1585
+ }
1586
+ .eth-task-approval-panel__reason .cds--text-area {
1587
+ min-block-size: 6rem;
1588
+ resize: vertical;
1589
+ }
1590
+ .eth-task-human-intervention-panel {
1591
+ gap: var(--eth-space-md);
1592
+ }
1593
+ .eth-task-human-intervention-panel .eth-surface__header {
1594
+ align-items: center;
1595
+ }
1596
+ .eth-task-human-intervention-panel .eth-inline-notification {
1597
+ max-inline-size: min(100%, 52rem);
1598
+ }
1599
+ .eth-task-human-intervention-panel__details {
1600
+ background: var(--eth-color-border-subtle);
1601
+ border: 1px solid var(--eth-color-border-subtle);
1602
+ display: grid;
1603
+ gap: 1px;
1604
+ grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
1605
+ margin: 0;
1606
+ }
1607
+ .eth-task-human-intervention-panel__details div {
1608
+ background: var(--eth-color-layer-01);
1609
+ min-inline-size: 0;
1610
+ padding: var(--eth-space-md);
1611
+ }
1612
+ .eth-task-human-intervention-panel__details dt {
1613
+ color: var(--eth-color-text-secondary);
1614
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1615
+ line-height: 1.333;
1616
+ margin: 0 0 var(--eth-space-xs);
1617
+ }
1618
+ .eth-task-human-intervention-panel__details dd {
1619
+ align-items: center;
1620
+ color: var(--eth-color-text-primary);
1621
+ display: flex;
1622
+ flex-wrap: wrap;
1623
+ gap: var(--eth-space-sm);
1624
+ margin: 0;
1625
+ min-inline-size: 0;
1626
+ }
1627
+ .eth-task-human-intervention-panel__task-title {
1628
+ font-weight: 600;
1629
+ min-inline-size: 0;
1630
+ overflow-wrap: anywhere;
1631
+ }
1632
+ .eth-task-human-intervention-panel__task-id {
1633
+ color: var(--eth-color-text-secondary);
1634
+ font-family: var(--eth-font-mono, monospace);
1635
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1636
+ line-height: 1.333;
1637
+ }
1638
+ .eth-task-human-intervention-panel__actions {
1639
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1640
+ display: flex;
1641
+ justify-content: flex-start;
1642
+ padding-block-start: var(--eth-space-md);
1643
+ }
1644
+ .eth-task-approval-panel__audit,
1645
+ .eth-task-retry-panel__policy {
1646
+ border: 1px solid var(--eth-color-border-subtle);
1647
+ display: grid;
1648
+ grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
1649
+ margin: 0;
1650
+ }
1651
+ .eth-task-approval-panel__audit {
1652
+ background: var(--eth-color-border-subtle);
1653
+ gap: 1px;
1654
+ grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
1655
+ }
1656
+ .eth-task-approval-panel__audit div,
1657
+ .eth-task-retry-panel__policy div {
1658
+ border-inline-end: 1px solid var(--eth-color-border-subtle);
1659
+ padding: var(--eth-space-md);
1660
+ }
1661
+ .eth-task-approval-panel__audit div {
1662
+ background: var(--eth-color-layer-01);
1663
+ border-inline-end: 0;
1664
+ }
1665
+ .eth-task-approval-panel__audit dt,
1666
+ .eth-task-retry-panel__policy dt {
1667
+ color: var(--eth-color-text-secondary);
1668
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1669
+ margin: 0 0 var(--eth-space-xs);
1670
+ }
1671
+ .eth-task-approval-panel__audit dd,
1672
+ .eth-task-retry-panel__policy dd {
1673
+ margin: 0;
1674
+ }
1675
+ .eth-task-approval-panel__audit dd {
1676
+ color: var(--eth-color-text-primary);
1677
+ font-weight: 600;
1678
+ overflow-wrap: anywhere;
1679
+ }
1680
+ .eth-task-approval-panel__footer {
1681
+ display: grid;
1682
+ gap: var(--eth-space-md);
1683
+ }
1684
+ .eth-task-approval-panel__actions {
1685
+ align-items: center;
1686
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1687
+ display: flex;
1688
+ flex-wrap: wrap;
1689
+ gap: var(--eth-space-sm);
1690
+ padding-block-start: var(--eth-space-md);
1691
+ }
1692
+ .eth-task-approval-panel__actions .eth-button {
1693
+ min-inline-size: 8.5rem;
1694
+ }
1695
+ .eth-task-approval-panel__custom-footer {
1696
+ color: var(--eth-color-text-secondary);
1697
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1698
+ line-height: 1.4286;
1699
+ }
1700
+ @media (max-width: 42rem) {
1701
+ .eth-task-approval-panel__actions .eth-button {
1702
+ inline-size: 100%;
1703
+ }
1704
+ }
1705
+ .eth-task-retry-panel__policy {
1706
+ background: var(--eth-color-border-subtle);
1707
+ border: 1px solid var(--eth-color-border-subtle);
1708
+ gap: 1px;
1709
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1710
+ overflow: hidden;
1711
+ }
1712
+ .eth-task-retry-panel__policy div {
1713
+ background: var(--eth-color-layer-01);
1714
+ border-inline-end: 0;
1715
+ min-block-size: 4.75rem;
1716
+ min-inline-size: 0;
1717
+ }
1718
+ .eth-task-retry-panel__policy dt {
1719
+ line-height: 1.333;
1720
+ }
1721
+ .eth-task-retry-panel__policy dd {
1722
+ color: var(--eth-color-text-primary);
1723
+ display: grid;
1724
+ font-size: calc(0.9375rem * var(--eth-text-scale, 1));
1725
+ font-weight: 600;
1726
+ gap: var(--eth-space-xs);
1727
+ line-height: 1.333;
1728
+ min-inline-size: 0;
1729
+ overflow-wrap: anywhere;
1730
+ }
1731
+ .eth-task-retry-panel__attempts--exhausted dd {
1732
+ color: var(--eth-color-danger);
1733
+ }
1734
+ .eth-task-retry-panel__policy-note {
1735
+ color: var(--eth-color-text-secondary);
1736
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1737
+ font-weight: 400;
1738
+ line-height: 1.333;
1739
+ }
1740
+ .eth-task-retry-panel__controls {
1741
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1742
+ display: grid;
1743
+ gap: var(--eth-space-md);
1744
+ padding-block-start: var(--eth-space-lg);
1745
+ }
1746
+ .eth-task-retry-panel__reason-field {
1747
+ inline-size: min(100%, 40rem);
1748
+ }
1749
+ .eth-task-retry-panel__reason-field .cds--text-area__wrapper,
1750
+ .eth-task-retry-panel__reason-field .cds--text-area {
1751
+ inline-size: 100%;
1752
+ }
1753
+ .eth-task-retry-panel__reason-field .cds--text-area {
1754
+ min-block-size: 6rem;
1755
+ resize: vertical;
1756
+ }
1757
+ .eth-task-retry-panel__actions {
1758
+ align-items: center;
1759
+ display: flex;
1760
+ flex-wrap: wrap;
1761
+ gap: var(--eth-space-md);
1762
+ }
1763
+ .eth-task-retry-panel__actions p {
1764
+ color: var(--eth-color-text-secondary);
1765
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1766
+ line-height: 1.333;
1767
+ margin: 0;
1768
+ max-inline-size: 28rem;
1769
+ }
1770
+ .eth-task-blocking-reason-panel__list {
1771
+ background: var(--eth-color-layer-01);
1772
+ border: 1px solid var(--eth-color-border-subtle);
1773
+ list-style: none;
1774
+ margin: 0;
1775
+ padding: 0;
1776
+ }
1777
+ .eth-task-blocking-reason-panel__item {
1778
+ align-items: start;
1779
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1780
+ display: grid;
1781
+ gap: var(--eth-space-lg);
1782
+ grid-template-columns: minmax(0, 1fr) auto;
1783
+ min-block-size: 4rem;
1784
+ padding: var(--eth-space-lg);
1785
+ }
1786
+ .eth-task-blocking-reason-panel__item:last-child {
1787
+ border-block-end: 0;
1788
+ }
1789
+ .eth-task-blocking-reason-panel__content {
1790
+ display: grid;
1791
+ gap: var(--eth-space-sm);
1792
+ min-inline-size: 0;
1793
+ }
1794
+ .eth-task-blocking-reason-panel__reason {
1795
+ color: var(--eth-color-text-primary);
1796
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1797
+ font-weight: 600;
1798
+ line-height: 1.4286;
1799
+ overflow-wrap: anywhere;
1800
+ }
1801
+ .eth-task-blocking-reason-panel__meta {
1802
+ align-items: center;
1803
+ color: var(--eth-color-text-secondary);
1804
+ display: flex;
1805
+ flex-wrap: wrap;
1806
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1807
+ gap: var(--eth-space-sm);
1808
+ line-height: 1.3333;
1809
+ }
1810
+ .eth-task-blocking-reason-panel__actions {
1811
+ justify-self: end;
1812
+ }
1813
+ .eth-task-blocking-reason-panel__actions .eth-actions {
1814
+ justify-content: flex-end;
1815
+ }
1816
+ .eth-task-handoff-panel__body {
1817
+ display: grid;
1818
+ gap: var(--eth-space-lg);
1819
+ inline-size: min(100%, 48rem);
1820
+ }
1821
+ .eth-task-handoff-panel__target-field {
1822
+ display: grid;
1823
+ gap: var(--eth-space-sm);
1824
+ }
1825
+ .eth-task-handoff-panel__target-heading {
1826
+ color: var(--eth-color-text-secondary);
1827
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1828
+ line-height: 1.333;
1829
+ margin: 0;
1830
+ }
1831
+ .eth-task-handoff-panel__list {
1832
+ background: var(--eth-color-layer-01);
1833
+ border: 1px solid var(--eth-color-border-subtle);
1834
+ display: grid;
1835
+ }
1836
+ .eth-task-handoff-panel__option {
1837
+ align-items: center;
1838
+ background: var(--eth-color-layer-01);
1839
+ border: 0;
1840
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1841
+ color: var(--eth-color-text-primary);
1842
+ cursor: pointer;
1843
+ display: grid;
1844
+ font: inherit;
1845
+ gap: var(--eth-space-lg);
1846
+ grid-template-columns: minmax(0, 1fr) auto;
1847
+ min-block-size: 4rem;
1848
+ padding: var(--eth-space-md);
1849
+ text-align: start;
1850
+ touch-action: manipulation;
1851
+ transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), border-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
1852
+ }
1853
+ .eth-task-handoff-panel__option:last-child {
1854
+ border-block-end: 0;
1855
+ }
1856
+ .eth-task-handoff-panel__option:hover {
1857
+ background: var(--eth-color-layer-hover);
1858
+ }
1859
+ .eth-task-handoff-panel__option:focus-visible {
1860
+ outline: 2px solid var(--eth-color-focus);
1861
+ outline-offset: -2px;
1862
+ }
1863
+ .eth-task-handoff-panel__option--selected {
1864
+ background: var(--eth-color-layer-selected);
1865
+ border-inline-start: 4px solid var(--eth-color-interactive-primary);
1866
+ padding-inline-start: calc(var(--eth-space-md) - 4px);
1867
+ }
1868
+ .eth-task-handoff-panel__option-copy {
1869
+ display: grid;
1870
+ gap: var(--eth-space-xs);
1871
+ min-inline-size: 0;
1872
+ }
1873
+ .eth-task-handoff-panel__option-label {
1874
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1875
+ font-weight: 600;
1876
+ line-height: 1.2857;
1877
+ overflow-wrap: anywhere;
1878
+ }
1879
+ .eth-task-handoff-panel__option-meta {
1880
+ align-items: center;
1881
+ display: flex;
1882
+ flex: 0 0 auto;
1883
+ flex-wrap: wrap;
1884
+ gap: var(--eth-space-xs);
1885
+ justify-content: flex-end;
1886
+ }
1887
+ .eth-task-handoff-panel__reason-field,
1888
+ .eth-task-handoff-panel__reason-field .cds--text-area__wrapper,
1889
+ .eth-task-handoff-panel__reason-field .cds--text-area,
1890
+ .eth-task-handoff-panel__reason {
1891
+ inline-size: 100%;
1892
+ }
1893
+ .eth-task-handoff-panel__reason-field .cds--text-area,
1894
+ .eth-task-handoff-panel__reason {
1895
+ min-block-size: 7rem;
1896
+ resize: vertical;
1897
+ }
1898
+ .eth-task-handoff-panel__actions {
1899
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1900
+ display: flex;
1901
+ justify-content: flex-start;
1902
+ padding-block-start: var(--eth-space-md);
1903
+ }
1904
+ .eth-task-run-log__toolbar {
1905
+ align-items: flex-end;
1906
+ background: var(--eth-color-layer-02);
1907
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1908
+ display: flex;
1909
+ flex-wrap: wrap;
1910
+ gap: var(--eth-space-md);
1911
+ justify-content: space-between;
1912
+ padding: var(--eth-space-md) var(--eth-space-lg);
1913
+ }
1914
+ .eth-task-run-log__stream-state {
1915
+ align-items: center;
1916
+ display: flex;
1917
+ flex: 0 1 auto;
1918
+ flex-wrap: wrap;
1919
+ gap: var(--eth-space-sm);
1920
+ min-block-size: var(--eth-space-2xl);
1921
+ }
1922
+ .eth-task-run-log__stream-state .cds--tag {
1923
+ margin: 0;
1924
+ }
1925
+ .eth-task-run-log__buffer-count {
1926
+ color: var(--eth-color-text-secondary);
1927
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1928
+ line-height: 1.3333;
1929
+ white-space: nowrap;
1930
+ }
1931
+ .eth-task-run-log__filters {
1932
+ border: 0;
1933
+ display: grid;
1934
+ gap: var(--eth-space-xs);
1935
+ margin: 0;
1936
+ min-inline-size: 0;
1937
+ padding: 0;
1938
+ }
1939
+ .eth-task-run-log__filters legend {
1940
+ color: var(--eth-color-text-secondary);
1941
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1942
+ font-weight: 600;
1943
+ line-height: 1.3333;
1944
+ margin: 0;
1945
+ }
1946
+ .eth-task-run-log__filter-options {
1947
+ align-items: center;
1948
+ display: flex;
1949
+ flex-wrap: wrap;
1950
+ gap: var(--eth-space-sm) var(--eth-space-md);
1951
+ }
1952
+ .eth-task-run-log__summary {
1953
+ background: var(--eth-color-layer-01);
1954
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1955
+ display: grid;
1956
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1957
+ margin: 0;
1958
+ }
1959
+ .eth-task-run-log__summary div {
1960
+ display: grid;
1961
+ gap: var(--eth-space-xs);
1962
+ min-inline-size: 0;
1963
+ padding: var(--eth-space-md) var(--eth-space-lg);
1964
+ }
1965
+ .eth-task-run-log__summary div + div {
1966
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
1967
+ }
1968
+ .eth-task-run-log__summary dt {
1969
+ color: var(--eth-color-text-secondary);
1970
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1971
+ font-weight: 600;
1972
+ line-height: 1.3333;
1973
+ margin: 0;
1974
+ }
1975
+ .eth-task-run-log__summary dd {
1976
+ color: var(--eth-color-text-primary);
1977
+ font-family: var(--eth-font-mono);
1978
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1979
+ font-variant-numeric: tabular-nums;
1980
+ font-weight: 600;
1981
+ line-height: 1.4286;
1982
+ margin: 0;
1983
+ }
1984
+ .eth-task-run-log__viewport {
1985
+ background: var(--eth-color-layer-01);
1986
+ color: var(--eth-color-text-primary);
1987
+ max-block-size: 24rem;
1988
+ min-block-size: 10rem;
1989
+ min-inline-size: 0;
1990
+ overflow: auto;
1991
+ }
1992
+ .eth-task-run-log__columns,
1993
+ .eth-task-run-log__entry {
1994
+ display: grid;
1995
+ gap: var(--eth-space-md);
1996
+ grid-template-columns: minmax(6.5rem, 8rem) minmax(4.5rem, 5rem) minmax(0, 1fr);
1997
+ }
1998
+ .eth-task-run-log__columns {
1999
+ background: var(--eth-color-layer-02);
2000
+ border-block-end: 1px solid var(--eth-color-border-subtle);
2001
+ color: var(--eth-color-text-secondary);
2002
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
2003
+ font-weight: 600;
2004
+ inset-block-start: 0;
2005
+ line-height: 1.3333;
2006
+ padding: var(--eth-space-sm) var(--eth-space-lg);
2007
+ position: sticky;
2008
+ z-index: 1;
2009
+ }
2010
+ .eth-task-run-log__entry {
2011
+ border-block-end: 1px solid var(--eth-color-border-subtle);
2012
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2013
+ line-height: 1.4286;
2014
+ padding: var(--eth-space-sm) var(--eth-space-lg);
2015
+ }
2016
+ .eth-task-run-log__entry:last-child {
2017
+ border-block-end: 0;
2018
+ }
2019
+ .eth-task-run-log__entry:hover {
2020
+ background: var(--eth-color-layer-hover);
2021
+ }
2022
+ .eth-task-run-log__time,
2023
+ .eth-task-run-log__level,
2024
+ .eth-task-run-log__message {
2025
+ font-family: var(--eth-font-mono);
2026
+ min-inline-size: 0;
2027
+ }
2028
+ .eth-task-run-log__time {
2029
+ color: var(--eth-color-text-secondary);
2030
+ font-variant-numeric: tabular-nums;
2031
+ white-space: nowrap;
2032
+ }
2033
+ .eth-task-run-log__level {
2034
+ color: var(--eth-color-text-secondary);
2035
+ font-weight: 600;
2036
+ }
2037
+ .eth-task-run-log__level--error {
2038
+ color: var(--eth-color-danger);
2039
+ }
2040
+ .eth-task-run-log__level--warn {
2041
+ color: var(--eth-color-warning);
2042
+ }
2043
+ .eth-task-run-log__level--info {
2044
+ color: var(--eth-color-info);
2045
+ }
2046
+ .eth-task-run-log__message {
2047
+ color: var(--eth-color-text-primary);
2048
+ overflow-wrap: anywhere;
2049
+ }
2050
+ .eth-task-run-log__message--redacted {
2051
+ color: var(--eth-color-text-secondary);
2052
+ font-style: italic;
2053
+ }
2054
+ .eth-task-thinking-chain__list,
2055
+ .eth-task-thinking-chain__children {
2056
+ display: grid;
2057
+ gap: 0;
2058
+ list-style: none;
2059
+ margin: 0;
2060
+ padding: 0;
2061
+ }
2062
+ .eth-task-thinking-chain__children {
2063
+ margin-block-start: var(--eth-space-md);
2064
+ }
2065
+ .eth-task-thinking-chain__step > .eth-task-thinking-chain__children {
2066
+ margin-block-start: 0;
2067
+ padding: 0 var(--eth-space-md) var(--eth-space-md);
2068
+ }
2069
+ .eth-task-thinking-chain__item {
2070
+ --eth-task-thinking-chain-accent: var(--eth-color-text-secondary);
2071
+ display: grid;
2072
+ gap: var(--eth-space-sm);
2073
+ grid-template-columns: var(--eth-space-lg) minmax(0, 1fr);
2074
+ min-inline-size: 0;
2075
+ padding-block-end: var(--eth-space-md);
2076
+ position: relative;
2077
+ }
2078
+ .eth-task-thinking-chain__item::before {
2079
+ background: var(--eth-color-border-subtle);
2080
+ block-size: calc(100% - var(--eth-space-2xl));
2081
+ content: "";
2082
+ inline-size: 1px;
2083
+ inset-block-start: var(--eth-space-2xl);
2084
+ inset-inline-start: calc(var(--eth-space-lg) / 2 - 0.0313rem);
2085
+ position: absolute;
2086
+ }
2087
+ .eth-task-thinking-chain__item:last-child {
2088
+ padding-block-end: 0;
2089
+ }
2090
+ .eth-task-thinking-chain__item:last-child::before {
2091
+ content: none;
2092
+ }
2093
+ .eth-task-thinking-chain__item--completed,
2094
+ .eth-task-thinking-chain__item--succeeded,
2095
+ .eth-task-thinking-chain__item--synced,
2096
+ .eth-task-thinking-chain__item--active {
2097
+ --eth-task-thinking-chain-accent: var(--eth-color-success);
2098
+ }
2099
+ .eth-task-thinking-chain__item--running,
2100
+ .eth-task-thinking-chain__item--in-progress,
2101
+ .eth-task-thinking-chain__item--queued {
2102
+ --eth-task-thinking-chain-accent: var(--eth-color-info);
2103
+ }
2104
+ .eth-task-thinking-chain__item--pending-approval,
2105
+ .eth-task-thinking-chain__item--warning,
2106
+ .eth-task-thinking-chain__item--stale,
2107
+ .eth-task-thinking-chain__item--redacted {
2108
+ --eth-task-thinking-chain-accent: var(--eth-color-warning);
2109
+ }
2110
+ .eth-task-thinking-chain__item--approval-required,
2111
+ .eth-task-thinking-chain__item--blocked,
2112
+ .eth-task-thinking-chain__item--failed {
2113
+ --eth-task-thinking-chain-accent: var(--eth-color-danger);
2114
+ }
2115
+ .eth-task-thinking-chain__marker {
2116
+ align-self: start;
2117
+ background: var(--eth-color-layer-01);
2118
+ block-size: 0.75rem;
2119
+ border: 2px solid var(--eth-task-thinking-chain-accent);
2120
+ border-radius: 50%;
2121
+ box-shadow: 0 0 0 2px var(--eth-color-layer-01);
2122
+ inline-size: 0.75rem;
2123
+ margin-block-start: var(--eth-space-lg);
2124
+ margin-inline: auto;
2125
+ position: relative;
2126
+ z-index: 1;
2127
+ }
2128
+ .eth-task-thinking-chain__step {
2129
+ background: var(--eth-color-layer-01);
2130
+ border: 1px solid var(--eth-color-border-subtle);
2131
+ border-radius: 0;
2132
+ display: grid;
2133
+ min-inline-size: 0;
2134
+ }
2135
+ .eth-task-thinking-chain__item--running > .eth-task-thinking-chain__step,
2136
+ .eth-task-thinking-chain__item--in-progress > .eth-task-thinking-chain__step {
2137
+ background: var(--eth-color-layer-02);
2138
+ border-inline-start: 3px solid var(--eth-color-interactive-primary);
2139
+ }
2140
+ .eth-task-thinking-chain__item--pending-approval > .eth-task-thinking-chain__step,
2141
+ .eth-task-thinking-chain__item--warning > .eth-task-thinking-chain__step,
2142
+ .eth-task-thinking-chain__item--stale > .eth-task-thinking-chain__step,
2143
+ .eth-task-thinking-chain__item--redacted > .eth-task-thinking-chain__step {
2144
+ border-inline-start: 3px solid var(--eth-color-warning);
2145
+ }
2146
+ .eth-task-thinking-chain__item--approval-required > .eth-task-thinking-chain__step,
2147
+ .eth-task-thinking-chain__item--blocked > .eth-task-thinking-chain__step,
2148
+ .eth-task-thinking-chain__item--failed > .eth-task-thinking-chain__step {
2149
+ border-inline-start: 3px solid var(--eth-color-danger);
2150
+ }
2151
+ .eth-task-thinking-chain__step-header {
2152
+ align-items: center;
2153
+ cursor: pointer;
2154
+ display: grid;
2155
+ gap: var(--eth-space-sm);
2156
+ grid-template-columns: 1rem minmax(0, 1fr);
2157
+ list-style: none;
2158
+ min-block-size: var(--eth-space-2xl);
2159
+ padding: var(--eth-space-md);
2160
+ }
2161
+ .eth-task-thinking-chain__step-header::-webkit-details-marker {
2162
+ display: none;
2163
+ }
2164
+ .eth-task-thinking-chain__step-header::marker {
2165
+ content: "";
2166
+ }
2167
+ .eth-task-thinking-chain__step-header:focus-visible {
2168
+ outline: 2px solid var(--eth-color-focus);
2169
+ outline-offset: -2px;
2170
+ }
2171
+ .eth-task-thinking-chain__disclosure-icon {
2172
+ block-size: 1rem;
2173
+ display: grid;
2174
+ inline-size: 1rem;
2175
+ place-items: center;
2176
+ }
2177
+ .eth-task-thinking-chain__disclosure-icon::before {
2178
+ border-block: 0.25rem solid transparent;
2179
+ border-inline-start: 0.3125rem solid var(--eth-color-text-secondary);
2180
+ content: "";
2181
+ transform-origin: 35% 50%;
2182
+ transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
2183
+ }
2184
+ .eth-task-thinking-chain__step[open] .eth-task-thinking-chain__disclosure-icon::before {
2185
+ transform: rotate(90deg);
2186
+ }
2187
+ .eth-task-thinking-chain__step-header-inner {
2188
+ align-items: flex-start;
2189
+ display: flex;
2190
+ flex-wrap: wrap;
2191
+ gap: var(--eth-space-sm) var(--eth-space-lg);
2192
+ justify-content: space-between;
2193
+ min-inline-size: 0;
2194
+ }
2195
+ .eth-task-thinking-chain__step-heading,
2196
+ .eth-task-thinking-chain__step-meta {
2197
+ align-items: center;
2198
+ display: flex;
2199
+ flex-wrap: wrap;
2200
+ gap: var(--eth-space-xs) var(--eth-space-sm);
2201
+ min-inline-size: 0;
2202
+ }
2203
+ .eth-task-thinking-chain__step-meta {
2204
+ justify-content: flex-end;
2205
+ }
2206
+ .eth-task-thinking-chain__step-meta .eth-status-dot,
2207
+ .eth-task-thinking-chain__step-meta .cds--tag {
2208
+ margin: 0;
2209
+ }
2210
+ .eth-task-thinking-chain__step-title {
2211
+ color: var(--eth-color-text-primary);
2212
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2213
+ line-height: 1.2857;
2214
+ overflow-wrap: anywhere;
2215
+ }
2216
+ .eth-task-thinking-chain__branch-count,
2217
+ .eth-task-thinking-chain__duration,
2218
+ .eth-task-thinking-chain__streaming {
2219
+ color: var(--eth-color-text-secondary);
2220
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
2221
+ line-height: 1.333;
2222
+ white-space: nowrap;
2223
+ }
2224
+ .eth-task-thinking-chain__branch-count {
2225
+ background: var(--eth-color-layer-02);
2226
+ display: inline-flex;
2227
+ padding: var(--eth-space-2xs) var(--eth-space-sm);
2228
+ }
2229
+ .eth-task-thinking-chain__streaming {
2230
+ align-items: center;
2231
+ color: var(--eth-color-info);
2232
+ display: inline-flex;
2233
+ gap: var(--eth-space-xs);
2234
+ }
2235
+ .eth-task-thinking-chain__summary,
2236
+ .eth-task-thinking-chain__redacted {
2237
+ color: var(--eth-color-text-secondary);
2238
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2239
+ line-height: 1.4286;
2240
+ margin: 0;
2241
+ padding: 0 var(--eth-space-md) var(--eth-space-md);
2242
+ }
2243
+ .eth-task-thinking-chain__redacted {
2244
+ background: var(--eth-color-layer-02);
2245
+ border-block-start: 1px solid var(--eth-color-border-subtle);
2246
+ padding-block-start: var(--eth-space-sm);
2247
+ }
2248
+ .eth-task-thinking-chain__pulse {
2249
+ animation: eth-task-pulse 1s cubic-bezier(0.2, 0, 0.38, 0.9) infinite;
2250
+ background: var(--eth-color-info);
2251
+ border-radius: 50%;
2252
+ block-size: var(--eth-space-sm);
2253
+ inline-size: var(--eth-space-sm);
2254
+ }
2255
+ @keyframes eth-task-pulse {
2256
+ 0%, 100% {
2257
+ opacity: 0.35;
2258
+ }
2259
+ 50% {
2260
+ opacity: 1;
2261
+ }
2262
+ }
2263
+ @media (width <= 42rem) {
2264
+ .eth-task-run-log > .eth-surface__header,
2265
+ .eth-task-run-log__toolbar {
2266
+ padding-inline: var(--eth-space-md);
2267
+ }
2268
+ .eth-task-run-log__toolbar,
2269
+ .eth-task-run-log__stream-state {
2270
+ align-items: flex-start;
2271
+ }
2272
+ .eth-task-run-log__summary {
2273
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2274
+ }
2275
+ .eth-task-run-log__summary div:nth-child(odd) {
2276
+ border-inline-start: 0;
2277
+ }
2278
+ .eth-task-run-log__summary div:nth-child(n+3) {
2279
+ border-block-start: 1px solid var(--eth-color-border-subtle);
2280
+ }
2281
+ .eth-task-run-log__viewport {
2282
+ overflow-x: auto;
2283
+ }
2284
+ .eth-task-run-log__columns,
2285
+ .eth-task-run-log__entry {
2286
+ grid-template-columns: 6.5rem 4.5rem minmax(14rem, 1fr);
2287
+ min-inline-size: 28rem;
2288
+ padding-inline: var(--eth-space-md);
2289
+ }
2290
+ .eth-task-thinking-chain__item {
2291
+ grid-template-columns: var(--eth-space-md) minmax(0, 1fr);
2292
+ }
2293
+ .eth-task-thinking-chain__item::before {
2294
+ inset-inline-start: calc(var(--eth-space-md) / 2 - 0.0313rem);
2295
+ }
2296
+ .eth-task-thinking-chain__step-header-inner,
2297
+ .eth-task-thinking-chain__step-meta {
2298
+ justify-content: flex-start;
2299
+ }
2300
+ .eth-task-progress__steps {
2301
+ align-items: stretch;
2302
+ flex-direction: column;
2303
+ overflow-x: visible;
2304
+ padding-block-end: 0;
2305
+ }
2306
+ .eth-task-progress__step {
2307
+ flex-basis: auto;
2308
+ gap: 0 var(--eth-space-sm);
2309
+ grid-template-columns: var(--eth-space-lg) minmax(0, 1fr);
2310
+ grid-template-rows: auto;
2311
+ min-inline-size: 0;
2312
+ padding-inline-end: 0;
2313
+ }
2314
+ .eth-task-progress__step-track {
2315
+ align-self: stretch;
2316
+ gap: var(--eth-space-xs);
2317
+ grid-template-columns: var(--eth-space-lg);
2318
+ grid-template-rows: var(--eth-space-lg) minmax(var(--eth-space-lg), 1fr);
2319
+ }
2320
+ .eth-task-progress__connector {
2321
+ block-size: 100%;
2322
+ inline-size: 1px;
2323
+ justify-self: center;
2324
+ }
2325
+ .eth-task-progress__step-copy {
2326
+ padding-block-end: var(--eth-space-lg);
2327
+ }
2328
+ .eth-task-progress__step:last-child .eth-task-progress__step-copy {
2329
+ padding-block-end: 0;
2330
+ }
2331
+ .eth-task-blocking-reason-panel__item {
2332
+ align-items: stretch;
2333
+ grid-template-columns: 1fr;
2334
+ }
2335
+ .eth-task-dependencies__item {
2336
+ align-items: start;
2337
+ grid-template-columns: 1fr;
2338
+ }
2339
+ .eth-task-handoff-panel__option {
2340
+ grid-template-columns: 1fr;
2341
+ }
2342
+ .eth-task-handoff-panel__option-meta {
2343
+ justify-content: flex-start;
2344
+ }
2345
+ .eth-task-dependencies__group-header {
2346
+ align-items: flex-start;
2347
+ flex-direction: column;
2348
+ }
2349
+ .eth-task-dependencies__item .eth-task-status-badge {
2350
+ justify-self: start;
2351
+ }
2352
+ .eth-task-timeline__event {
2353
+ grid-template-columns: 1rem minmax(0, 1fr);
2354
+ }
2355
+ .eth-task-timeline__time {
2356
+ grid-column: 2;
2357
+ justify-self: start;
2358
+ padding-block-start: 0;
2359
+ }
2360
+ .eth-task-timeline__rail {
2361
+ grid-column: 1;
2362
+ grid-row: 1 / span 2;
2363
+ }
2364
+ .eth-task-timeline__body {
2365
+ grid-column: 2;
2366
+ grid-template-columns: 1fr;
2367
+ }
2368
+ .eth-task-blocking-reason-panel__actions {
2369
+ justify-self: stretch;
2370
+ }
2371
+ .eth-task-blocking-reason-panel__actions .eth-actions {
2372
+ align-items: stretch;
2373
+ justify-content: flex-start;
2374
+ }
2375
+ .eth-task-detail-panel__actions .eth-actions {
2376
+ align-items: stretch;
2377
+ }
2378
+ .eth-task-detail-panel__actions .eth-button {
2379
+ inline-size: 100%;
2380
+ }
2381
+ }
2382
+ @media (width <= 50rem) {
2383
+ .eth-task-retry-panel__policy {
2384
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2385
+ }
2386
+ }
2387
+ @media (width <= 36rem) {
2388
+ .eth-task-retry-panel {
2389
+ inline-size: 100%;
2390
+ }
2391
+ .eth-task-retry-panel__policy {
2392
+ grid-template-columns: 1fr;
2393
+ }
2394
+ .eth-task-retry-panel__actions {
2395
+ align-items: stretch;
2396
+ flex-direction: column;
2397
+ }
2398
+ .eth-task-retry-panel__actions .eth-button {
2399
+ inline-size: 100%;
2400
+ }
2401
+ }
2402
+ /*# sourceMappingURL=index.css.map */