@echothink-ui/agent 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 (56) hide show
  1. package/README.md +5 -0
  2. package/dist/components/AgentApprovalGate.d.ts +10 -0
  3. package/dist/components/AgentContextViewer.d.ts +7 -0
  4. package/dist/components/AgentGeneratedArtifactPanel.d.ts +8 -0
  5. package/dist/components/AgentHandoffPanel.d.ts +22 -0
  6. package/dist/components/AgentInterruptionPanel.d.ts +13 -0
  7. package/dist/components/AgentMemoryPanel.d.ts +9 -0
  8. package/dist/components/AgentMessageList.d.ts +8 -0
  9. package/dist/components/AgentPlanDiff.d.ts +7 -0
  10. package/dist/components/AgentPlanPreview.d.ts +6 -0
  11. package/dist/components/AgentPromptBox.d.ts +15 -0
  12. package/dist/components/AgentRunControls.d.ts +10 -0
  13. package/dist/components/AgentSafetyPanel.d.ts +6 -0
  14. package/dist/components/AgentStateBadge.d.ts +6 -0
  15. package/dist/components/AgentThinkingChain.d.ts +8 -0
  16. package/dist/components/AgentThinkingPanel.d.ts +8 -0
  17. package/dist/components/AgentToolCallLog.d.ts +7 -0
  18. package/dist/components/AgentTraceViewer.d.ts +6 -0
  19. package/dist/components/AppDomainAgentPanel.d.ts +17 -0
  20. package/dist/components/ChatAgentRail.d.ts +24 -0
  21. package/dist/components/ScopeAttachmentPanel.d.ts +7 -0
  22. package/dist/components/utils.d.ts +20 -0
  23. package/dist/index.cjs +2709 -0
  24. package/dist/index.cjs.map +1 -0
  25. package/dist/index.css +2433 -0
  26. package/dist/index.css.map +1 -0
  27. package/dist/index.d.ts +44 -0
  28. package/dist/index.js +2666 -0
  29. package/dist/index.js.map +1 -0
  30. package/dist/types.d.ts +128 -0
  31. package/package.json +45 -0
  32. package/src/components/AgentApprovalGate.tsx +165 -0
  33. package/src/components/AgentContextViewer.tsx +161 -0
  34. package/src/components/AgentGeneratedArtifactPanel.tsx +224 -0
  35. package/src/components/AgentHandoffPanel.tsx +154 -0
  36. package/src/components/AgentInterruptionPanel.tsx +85 -0
  37. package/src/components/AgentMemoryPanel.tsx +167 -0
  38. package/src/components/AgentMessageList.tsx +209 -0
  39. package/src/components/AgentPlanDiff.tsx +149 -0
  40. package/src/components/AgentPlanPreview.tsx +106 -0
  41. package/src/components/AgentPromptBox.tsx +163 -0
  42. package/src/components/AgentRunControls.tsx +221 -0
  43. package/src/components/AgentSafetyPanel.tsx +113 -0
  44. package/src/components/AgentStateBadge.tsx +30 -0
  45. package/src/components/AgentThinkingChain.tsx +151 -0
  46. package/src/components/AgentThinkingPanel.tsx +56 -0
  47. package/src/components/AgentToolCallLog.tsx +262 -0
  48. package/src/components/AgentTraceViewer.tsx +218 -0
  49. package/src/components/AppDomainAgentPanel.tsx +66 -0
  50. package/src/components/ChatAgentRail.tsx +192 -0
  51. package/src/components/ScopeAttachmentPanel.tsx +130 -0
  52. package/src/components/utils.ts +186 -0
  53. package/src/index.test.tsx +212 -0
  54. package/src/index.tsx +88 -0
  55. package/src/styles.css +2902 -0
  56. package/src/types.ts +158 -0
package/src/styles.css ADDED
@@ -0,0 +1,2902 @@
1
+ @import "@echothink-ui/core/styles.css";
2
+
3
+ .eth-agent-app-panel,
4
+ .eth-agent-chat-rail,
5
+ .eth-agent-left-rail,
6
+ .eth-chat-rail,
7
+ .eth-left-agent-rail,
8
+ [data-eth-component="AppDomainAgentPanel"] {
9
+ background: var(--eth-color-layer-01);
10
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
11
+ color: var(--eth-color-text-primary);
12
+ display: grid;
13
+ grid-template-rows: auto minmax(0, 1fr) auto;
14
+ block-size: 100%;
15
+ inline-size: clamp(320px, 28vw, 420px);
16
+ min-block-size: 0;
17
+ }
18
+
19
+ .eth-agent-left-rail,
20
+ .eth-left-agent-rail {
21
+ border-inline-end: 1px solid var(--eth-color-border-subtle);
22
+ border-inline-start: 0;
23
+ }
24
+
25
+ .eth-chat-rail__header,
26
+ .eth-chat-rail__footer {
27
+ background: var(--eth-color-layer-01);
28
+ display: grid;
29
+ gap: var(--eth-space-md);
30
+ padding: var(--eth-space-lg);
31
+ }
32
+
33
+ .eth-chat-rail__header {
34
+ border-bottom: 1px solid var(--eth-color-border-subtle);
35
+ }
36
+
37
+ .eth-agent-app-domain-panel__header {
38
+ display: grid;
39
+ gap: var(--eth-space-xs);
40
+ min-inline-size: 0;
41
+ }
42
+
43
+ .eth-agent-app-domain-panel__eyebrow {
44
+ color: var(--eth-color-text-secondary);
45
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
46
+ font-weight: 600;
47
+ letter-spacing: 0;
48
+ line-height: 1.3333;
49
+ margin: 0;
50
+ text-transform: uppercase;
51
+ }
52
+
53
+ .eth-agent-app-domain-panel__title {
54
+ color: var(--eth-color-text-primary);
55
+ font-size: calc(1rem * var(--eth-text-scale, 1));
56
+ font-weight: 600;
57
+ line-height: 1.375;
58
+ margin: 0;
59
+ min-inline-size: 0;
60
+ overflow: hidden;
61
+ text-overflow: ellipsis;
62
+ white-space: nowrap;
63
+ }
64
+
65
+ .eth-agent-app-domain-panel__meta {
66
+ color: var(--eth-color-text-secondary);
67
+ display: flex;
68
+ flex-wrap: wrap;
69
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
70
+ gap: var(--eth-space-xs) var(--eth-space-md);
71
+ line-height: 1.3333;
72
+ min-inline-size: 0;
73
+ }
74
+
75
+ .eth-agent-app-domain-panel__meta span {
76
+ min-inline-size: 0;
77
+ overflow: hidden;
78
+ text-overflow: ellipsis;
79
+ white-space: nowrap;
80
+ }
81
+
82
+ .eth-agent-app-domain-panel__slot {
83
+ margin-block-start: var(--eth-space-xs);
84
+ min-inline-size: 0;
85
+ }
86
+
87
+ .eth-chat-rail__footer {
88
+ border-top: 1px solid var(--eth-color-border-subtle);
89
+ }
90
+
91
+ .eth-chat-rail__header-main {
92
+ align-items: flex-start;
93
+ display: flex;
94
+ gap: var(--eth-space-md);
95
+ justify-content: space-between;
96
+ min-inline-size: 0;
97
+ }
98
+
99
+ .eth-chat-rail__header-main > div {
100
+ min-inline-size: 0;
101
+ }
102
+
103
+ .eth-chat-rail__title {
104
+ color: var(--eth-color-text-primary);
105
+ font-size: calc(1rem * var(--eth-text-scale, 1));
106
+ font-weight: 600;
107
+ line-height: 1.375;
108
+ margin: 0;
109
+ }
110
+
111
+ .eth-chat-rail__meta {
112
+ color: var(--eth-color-text-secondary);
113
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
114
+ line-height: 1.2857;
115
+ margin: var(--eth-space-xs) 0 0;
116
+ overflow-wrap: anywhere;
117
+ }
118
+
119
+ .eth-chat-rail__run-controls {
120
+ min-inline-size: 0;
121
+ }
122
+
123
+ .eth-agent-message-list,
124
+ .eth-message-list {
125
+ background: var(--eth-color-layer-01);
126
+ display: flex;
127
+ flex: 1 1 auto;
128
+ flex-direction: column;
129
+ gap: var(--eth-space-lg);
130
+ min-block-size: 0;
131
+ overflow-y: auto;
132
+ padding: var(--eth-space-lg);
133
+ }
134
+
135
+ .eth-agent-message,
136
+ .eth-message-list__item {
137
+ background: transparent;
138
+ border: 0;
139
+ border-radius: 0;
140
+ display: grid;
141
+ gap: var(--eth-space-sm);
142
+ inline-size: auto;
143
+ max-inline-size: min(100%, 42rem);
144
+ padding: 0;
145
+ }
146
+
147
+ .eth-agent-message__header {
148
+ align-items: center;
149
+ color: var(--eth-color-text-secondary);
150
+ display: flex;
151
+ flex-wrap: wrap;
152
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
153
+ gap: var(--eth-space-sm);
154
+ line-height: 1.3333;
155
+ }
156
+
157
+ .eth-agent-message__header strong {
158
+ color: var(--eth-color-text-primary);
159
+ }
160
+
161
+ .eth-agent-message__avatar {
162
+ align-items: center;
163
+ background: var(--eth-color-layer-02);
164
+ border: 1px solid var(--eth-color-border-subtle);
165
+ border-radius: 0;
166
+ color: var(--eth-color-text-primary);
167
+ display: inline-flex;
168
+ flex: 0 0 auto;
169
+ font-weight: 600;
170
+ block-size: var(--eth-space-xl);
171
+ inline-size: var(--eth-space-xl);
172
+ justify-content: center;
173
+ }
174
+
175
+ .eth-agent-message--user .eth-agent-message__avatar {
176
+ background: var(--eth-color-interactive-primary);
177
+ border-color: var(--eth-color-interactive-primary);
178
+ color: var(--eth-color-background);
179
+ }
180
+
181
+ .eth-agent-message--system .eth-agent-message__avatar {
182
+ background: transparent;
183
+ border-style: dashed;
184
+ }
185
+
186
+ .eth-agent-message--tool .eth-agent-message__avatar {
187
+ font-family: var(--eth-font-mono);
188
+ }
189
+
190
+ .eth-agent-message__bubble {
191
+ background: var(--eth-color-layer-02);
192
+ border: 1px solid var(--eth-color-border-subtle);
193
+ border-radius: 0;
194
+ color: var(--eth-color-text-primary);
195
+ line-height: 1.5;
196
+ min-inline-size: 0;
197
+ overflow-wrap: anywhere;
198
+ padding: var(--eth-space-md) var(--eth-space-lg);
199
+ }
200
+
201
+ .eth-agent-message--agent .eth-agent-message__bubble {
202
+ border-inline-start: 3px solid var(--eth-color-interactive-primary);
203
+ }
204
+
205
+ .eth-agent-message--user .eth-agent-message__bubble {
206
+ background: var(--eth-color-text-primary);
207
+ border-color: var(--eth-color-text-primary);
208
+ color: var(--eth-color-background);
209
+ }
210
+
211
+ .eth-agent-message--system .eth-agent-message__bubble {
212
+ background: var(--eth-color-layer-02);
213
+ border-style: dashed;
214
+ color: var(--eth-color-text-secondary);
215
+ }
216
+
217
+ .eth-agent-message--streaming .eth-agent-message__bubble {
218
+ border-inline-end: 3px solid var(--eth-color-interactive-primary);
219
+ }
220
+
221
+ .eth-agent-message--tool .eth-agent-message__bubble {
222
+ background: var(--eth-color-layer-02);
223
+ border-inline-start: 3px solid var(--eth-color-border-strong);
224
+ font-family: var(--eth-font-mono);
225
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
226
+ }
227
+
228
+ .eth-agent-message__citations {
229
+ align-items: center;
230
+ display: flex;
231
+ flex-wrap: wrap;
232
+ gap: var(--eth-space-xs);
233
+ }
234
+
235
+ .eth-agent-message__citations .cds--tag {
236
+ margin: 0;
237
+ }
238
+
239
+ .eth-agent-message__citation-link {
240
+ align-items: center;
241
+ background: var(--eth-color-layer-01);
242
+ border: 1px solid var(--eth-color-border-subtle);
243
+ border-radius: 0;
244
+ color: var(--eth-color-link);
245
+ display: inline-flex;
246
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
247
+ font-weight: 400;
248
+ min-block-size: var(--eth-space-xl);
249
+ padding: 0 var(--eth-space-sm);
250
+ text-decoration: none;
251
+ }
252
+
253
+ .eth-agent-message__citation-link:hover {
254
+ background: var(--eth-color-layer-03);
255
+ color: var(--eth-color-link);
256
+ text-decoration: underline;
257
+ }
258
+
259
+ .eth-agent-message__citation-link:focus-visible {
260
+ outline: 2px solid var(--eth-color-focus);
261
+ outline-offset: -2px;
262
+ }
263
+
264
+ .eth-agent-message__cursor {
265
+ color: var(--eth-color-interactive-primary);
266
+ }
267
+
268
+ @keyframes eth-pulse {
269
+ 0%,
270
+ 100% {
271
+ opacity: 1;
272
+ }
273
+
274
+ 50% {
275
+ opacity: 0.28;
276
+ }
277
+ }
278
+
279
+ .eth-agent-prompt-box {
280
+ background: var(--eth-color-layer-02);
281
+ border: 1px solid var(--eth-color-border-subtle) !important;
282
+ border-radius: 0 !important;
283
+ color: var(--eth-color-text-primary);
284
+ display: grid;
285
+ gap: 0;
286
+ inline-size: 100%;
287
+ min-inline-size: 0;
288
+ overflow: hidden;
289
+ padding: 0 !important;
290
+ }
291
+
292
+ .eth-agent-prompt-box:focus-within {
293
+ border-color: var(--eth-color-focus) !important;
294
+ outline: 2px solid var(--eth-color-focus);
295
+ outline-offset: -2px;
296
+ }
297
+
298
+ .eth-agent-prompt-box__context {
299
+ align-items: center;
300
+ background: var(--eth-color-layer-01);
301
+ border-block-end: 1px solid var(--eth-color-border-subtle);
302
+ display: flex;
303
+ flex-wrap: wrap;
304
+ gap: var(--eth-space-sm);
305
+ min-inline-size: 0;
306
+ padding: var(--eth-space-sm) var(--eth-space-md);
307
+ }
308
+
309
+ .eth-agent-prompt-box__scope {
310
+ align-items: center;
311
+ color: var(--eth-color-text-secondary);
312
+ display: inline-flex;
313
+ flex: 0 0 auto;
314
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
315
+ gap: var(--eth-space-xs);
316
+ line-height: 1.3333;
317
+ }
318
+
319
+ .eth-agent-prompt-box__scope strong {
320
+ color: var(--eth-color-text-primary);
321
+ font-weight: 600;
322
+ }
323
+
324
+ .eth-agent-prompt-box__attachments {
325
+ align-items: center;
326
+ display: flex;
327
+ flex: 1 1 auto;
328
+ flex-wrap: wrap;
329
+ gap: var(--eth-space-xs);
330
+ min-inline-size: 0;
331
+ }
332
+
333
+ .eth-agent-prompt-box__attachments .cds--tag {
334
+ margin: 0;
335
+ max-inline-size: 100%;
336
+ }
337
+
338
+ .eth-agent-prompt-box__attachment-kind {
339
+ color: var(--eth-color-text-secondary);
340
+ font-weight: 600;
341
+ }
342
+
343
+ .eth-agent-prompt-box__attachment-label {
344
+ min-inline-size: 0;
345
+ overflow: hidden;
346
+ text-overflow: ellipsis;
347
+ white-space: nowrap;
348
+ }
349
+
350
+ .eth-agent-prompt-box__attachment-status {
351
+ background: var(--eth-color-text-helper);
352
+ block-size: 0.5rem;
353
+ border-radius: 50%;
354
+ flex: 0 0 auto;
355
+ inline-size: 0.5rem;
356
+ }
357
+
358
+ .eth-agent-prompt-box__attachment-status[data-status="active"],
359
+ .eth-agent-prompt-box__attachment-status[data-status="in-progress"],
360
+ .eth-agent-prompt-box__attachment-status[data-status="running"] {
361
+ background: var(--eth-color-info);
362
+ }
363
+
364
+ .eth-agent-prompt-box__attachment-status[data-status="completed"],
365
+ .eth-agent-prompt-box__attachment-status[data-status="succeeded"],
366
+ .eth-agent-prompt-box__attachment-status[data-status="synced"] {
367
+ background: var(--eth-color-success);
368
+ }
369
+
370
+ .eth-agent-prompt-box__attachment-status[data-status="approval-required"],
371
+ .eth-agent-prompt-box__attachment-status[data-status="blocked"],
372
+ .eth-agent-prompt-box__attachment-status[data-status="failed"] {
373
+ background: var(--eth-color-danger);
374
+ }
375
+
376
+ .eth-agent-prompt-box__attachment-status[data-status="pending-approval"],
377
+ .eth-agent-prompt-box__attachment-status[data-status="warning"] {
378
+ background: var(--eth-color-warning);
379
+ }
380
+
381
+ .eth-agent-prompt-box__input {
382
+ background: var(--eth-color-layer-02);
383
+ color: var(--eth-color-text-primary);
384
+ display: block;
385
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
386
+ line-height: 1.4286;
387
+ min-block-size: 5.25rem;
388
+ resize: vertical;
389
+ }
390
+
391
+ .eth-agent-prompt-box__input.cds--text-area,
392
+ .eth-agent-prompt-box__input .cds--text-area,
393
+ .eth-agent-prompt-box__input textarea {
394
+ background: var(--eth-color-layer-02);
395
+ block-size: 5.25rem;
396
+ border-block-end-color: var(--eth-color-border-strong);
397
+ color: var(--eth-color-text-primary);
398
+ max-block-size: 8rem;
399
+ min-block-size: 5.25rem;
400
+ resize: vertical;
401
+ }
402
+
403
+ .eth-agent-prompt-box__input .cds--form__helper-text,
404
+ .eth-agent-prompt-box__input .cds--label {
405
+ display: none;
406
+ }
407
+
408
+ .eth-agent-prompt-box__input::placeholder,
409
+ .eth-agent-prompt-box__input .cds--text-area::placeholder,
410
+ .eth-agent-prompt-box__input textarea::placeholder {
411
+ color: var(--eth-color-text-helper);
412
+ }
413
+
414
+ .eth-agent-prompt-box__actions {
415
+ align-items: center;
416
+ background: var(--eth-color-layer-02);
417
+ display: flex;
418
+ gap: var(--eth-space-xs);
419
+ min-block-size: var(--eth-space-3xl);
420
+ padding: var(--eth-space-sm) var(--eth-space-md);
421
+ }
422
+
423
+ .eth-agent-prompt-box__tools {
424
+ align-items: center;
425
+ display: flex;
426
+ gap: var(--eth-space-xs);
427
+ }
428
+
429
+ .eth-agent-prompt-box__spacer {
430
+ flex: 1 1 auto;
431
+ }
432
+
433
+ .eth-agent-prompt-box__command-icon {
434
+ font-family: var(--eth-font-mono);
435
+ font-size: calc(1rem * var(--eth-text-scale, 1));
436
+ line-height: 1;
437
+ }
438
+
439
+ .eth-agent-prompt-box__submit {
440
+ flex: 0 0 auto;
441
+ }
442
+
443
+ .eth-agent-thinking-chain,
444
+ .eth-agent-thinking-panel,
445
+ .eth-agent-tool-call-log,
446
+ .eth-agent-trace-viewer,
447
+ .eth-agent-plan-diff,
448
+ .eth-agent-plan-preview,
449
+ .eth-agent-memory-panel,
450
+ .eth-agent-safety-panel,
451
+ .eth-agent-approval-gate,
452
+ .eth-agent-interruption-panel,
453
+ .eth-agent-handoff-panel,
454
+ .eth-agent-generated-artifact,
455
+ .eth-agent-generated-artifact-panel,
456
+ .eth-agent-context-viewer {
457
+ background: var(--eth-color-layer-01);
458
+ border: 1px solid var(--eth-color-border-subtle);
459
+ border-radius: 0;
460
+ color: var(--eth-color-text-primary);
461
+ }
462
+
463
+ .eth-agent-thinking-chain__steps,
464
+ .eth-agent-tool-call-log__drawer,
465
+ .eth-agent-plan-preview__steps,
466
+ .eth-agent-context-viewer {
467
+ display: grid;
468
+ gap: var(--eth-space-md);
469
+ }
470
+
471
+ .eth-agent-tool-call-log {
472
+ inline-size: 100%;
473
+ overflow: hidden;
474
+ }
475
+
476
+ .eth-agent-tool-call-log .eth-data-table-wrap {
477
+ background: var(--eth-color-layer-01);
478
+ border: 1px solid var(--eth-color-border-subtle);
479
+ inline-size: 100%;
480
+ overflow-x: auto;
481
+ }
482
+
483
+ .eth-agent-tool-call-log__table {
484
+ border-collapse: collapse;
485
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
486
+ inline-size: 100%;
487
+ line-height: 1.2857;
488
+ min-inline-size: 58rem;
489
+ table-layout: fixed;
490
+ }
491
+
492
+ .eth-agent-tool-call-log__table th,
493
+ .eth-agent-tool-call-log__table td {
494
+ border-block-end: 1px solid var(--eth-color-border-subtle);
495
+ min-inline-size: 0;
496
+ padding: var(--eth-space-sm) var(--eth-space-lg);
497
+ vertical-align: middle;
498
+ }
499
+
500
+ .eth-agent-tool-call-log__table th {
501
+ background: var(--eth-color-layer-02);
502
+ color: var(--eth-color-text-primary);
503
+ font-weight: 600;
504
+ text-align: start;
505
+ white-space: nowrap;
506
+ }
507
+
508
+ .eth-agent-tool-call-log__table tbody tr:hover {
509
+ background: var(--eth-color-layer-hover);
510
+ }
511
+
512
+ .eth-agent-tool-call-log__table td:last-child,
513
+ .eth-agent-tool-call-log__table th:last-child {
514
+ text-align: end;
515
+ }
516
+
517
+ .eth-agent-tool-call-log__time,
518
+ .eth-agent-tool-call-log__tool,
519
+ .eth-agent-tool-call-log__preview {
520
+ font-family: var(--eth-font-mono);
521
+ }
522
+
523
+ .eth-agent-tool-call-log__time,
524
+ .eth-agent-tool-call-log__tool,
525
+ .eth-agent-tool-call-log__preview {
526
+ display: block;
527
+ min-inline-size: 0;
528
+ overflow: hidden;
529
+ text-overflow: ellipsis;
530
+ white-space: nowrap;
531
+ }
532
+
533
+ .eth-agent-tool-call-log__tool {
534
+ color: var(--eth-color-text-primary);
535
+ }
536
+
537
+ .eth-agent-tool-call-log__preview {
538
+ color: var(--eth-color-text-secondary);
539
+ }
540
+
541
+ .eth-agent-tool-call-log__preview--empty {
542
+ color: var(--eth-color-text-helper);
543
+ }
544
+
545
+ .eth-agent-tool-call-log__preview--error {
546
+ color: var(--eth-color-danger);
547
+ font-weight: 600;
548
+ }
549
+
550
+ .eth-agent-tool-call-log__preview--redacted,
551
+ .eth-agent-tool-call-log__redaction-note {
552
+ background: var(--eth-color-layer-02);
553
+ color: var(--eth-color-text-secondary);
554
+ display: inline-flex;
555
+ font-family: var(--eth-font-family);
556
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
557
+ font-weight: 600;
558
+ inline-size: fit-content;
559
+ letter-spacing: 0;
560
+ line-height: 1.333;
561
+ padding: var(--eth-space-2xs) var(--eth-space-sm);
562
+ }
563
+
564
+ .eth-agent-tool-call-log__inspect {
565
+ margin-inline-start: auto;
566
+ }
567
+
568
+ .eth-agent-tool-call-log .eth-status-dot {
569
+ margin: 0;
570
+ max-inline-size: 100%;
571
+ }
572
+
573
+ .eth-agent-tool-call-log__drawer-status {
574
+ align-items: center;
575
+ display: flex;
576
+ flex-wrap: wrap;
577
+ gap: var(--eth-space-sm);
578
+ }
579
+
580
+ .eth-agent-tool-call-log__meta {
581
+ background: var(--eth-color-layer-02);
582
+ border: 1px solid var(--eth-color-border-subtle);
583
+ display: grid;
584
+ grid-template-columns: repeat(2, minmax(0, 1fr));
585
+ margin: 0;
586
+ }
587
+
588
+ .eth-agent-tool-call-log__meta > div {
589
+ display: grid;
590
+ gap: var(--eth-space-xs);
591
+ min-inline-size: 0;
592
+ padding: var(--eth-space-md);
593
+ }
594
+
595
+ .eth-agent-tool-call-log__meta > div:nth-child(2n) {
596
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
597
+ }
598
+
599
+ .eth-agent-tool-call-log__meta > div:nth-child(n + 3) {
600
+ border-block-start: 1px solid var(--eth-color-border-subtle);
601
+ }
602
+
603
+ .eth-agent-tool-call-log__meta dt {
604
+ color: var(--eth-color-text-secondary);
605
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
606
+ line-height: 1.333;
607
+ margin: 0;
608
+ }
609
+
610
+ .eth-agent-tool-call-log__meta dd {
611
+ color: var(--eth-color-text-primary);
612
+ font-weight: 600;
613
+ line-height: 1.375;
614
+ margin: 0;
615
+ min-inline-size: 0;
616
+ overflow-wrap: anywhere;
617
+ }
618
+
619
+ .eth-agent-tool-call-log__error,
620
+ .eth-agent-tool-call-log__json {
621
+ display: grid;
622
+ gap: var(--eth-space-sm);
623
+ }
624
+
625
+ .eth-agent-tool-call-log__error h3,
626
+ .eth-agent-tool-call-log__json h3 {
627
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
628
+ font-weight: 600;
629
+ line-height: 1.2857;
630
+ margin: 0;
631
+ }
632
+
633
+ .eth-agent-thinking-chain {
634
+ inline-size: 100%;
635
+ }
636
+
637
+ .eth-agent-thinking-chain .eth-surface__heading h2 {
638
+ font-size: calc(1.25rem * var(--eth-text-scale, 1));
639
+ line-height: 1.4;
640
+ }
641
+
642
+ .eth-agent-thinking-chain__steps,
643
+ .eth-agent-thinking-chain__children {
644
+ display: grid;
645
+ gap: 0;
646
+ list-style: none;
647
+ margin: 0;
648
+ padding: 0;
649
+ }
650
+
651
+ .eth-agent-thinking-chain__children {
652
+ margin-block-start: var(--eth-space-md);
653
+ }
654
+
655
+ .eth-agent-thinking-chain__item {
656
+ --eth-agent-thinking-chain-accent: var(--eth-color-text-secondary);
657
+
658
+ display: grid;
659
+ gap: var(--eth-space-sm);
660
+ grid-template-columns: var(--eth-space-lg) minmax(0, 1fr);
661
+ margin-inline-start: var(--eth-agent-thinking-chain-depth-offset, 0);
662
+ min-inline-size: 0;
663
+ padding-block-end: var(--eth-space-md);
664
+ position: relative;
665
+ }
666
+
667
+ .eth-agent-thinking-chain__item::before {
668
+ background: var(--eth-color-border-subtle);
669
+ block-size: calc(100% - var(--eth-space-2xl));
670
+ content: "";
671
+ inline-size: 1px;
672
+ inset-block-start: var(--eth-space-2xl);
673
+ inset-inline-start: calc(var(--eth-space-lg) / 2 - 0.03125rem);
674
+ position: absolute;
675
+ }
676
+
677
+ .eth-agent-thinking-chain__item:last-child {
678
+ padding-block-end: 0;
679
+ }
680
+
681
+ .eth-agent-thinking-chain__item:last-child::before {
682
+ content: none;
683
+ }
684
+
685
+ .eth-agent-thinking-chain__item--completed,
686
+ .eth-agent-thinking-chain__item--succeeded,
687
+ .eth-agent-thinking-chain__item--synced,
688
+ .eth-agent-thinking-chain__item--active {
689
+ --eth-agent-thinking-chain-accent: var(--eth-color-success);
690
+ }
691
+
692
+ .eth-agent-thinking-chain__item--running,
693
+ .eth-agent-thinking-chain__item--in-progress {
694
+ --eth-agent-thinking-chain-accent: var(--eth-color-info);
695
+ }
696
+
697
+ .eth-agent-thinking-chain__item--pending-approval,
698
+ .eth-agent-thinking-chain__item--warning,
699
+ .eth-agent-thinking-chain__item--stale {
700
+ --eth-agent-thinking-chain-accent: var(--eth-color-warning);
701
+ }
702
+
703
+ .eth-agent-thinking-chain__item--approval-required,
704
+ .eth-agent-thinking-chain__item--blocked,
705
+ .eth-agent-thinking-chain__item--failed,
706
+ .eth-agent-thinking-chain__item--error {
707
+ --eth-agent-thinking-chain-accent: var(--eth-color-danger);
708
+ }
709
+
710
+ .eth-agent-thinking-chain__marker {
711
+ align-self: start;
712
+ background: var(--eth-color-layer-01);
713
+ block-size: 0.75rem;
714
+ border: 2px solid var(--eth-agent-thinking-chain-accent);
715
+ border-radius: 50%;
716
+ box-shadow: 0 0 0 2px var(--eth-color-layer-01);
717
+ inline-size: 0.75rem;
718
+ margin-block-start: var(--eth-space-md);
719
+ margin-inline: auto;
720
+ position: relative;
721
+ z-index: 1;
722
+ }
723
+
724
+ .eth-agent-thinking-chain__item-body {
725
+ min-inline-size: 0;
726
+ }
727
+
728
+ .eth-agent-thinking-chain__step {
729
+ background: var(--eth-color-layer-01);
730
+ border: 1px solid var(--eth-color-border-subtle) !important;
731
+ border-radius: 0 !important;
732
+ display: grid;
733
+ gap: var(--eth-space-md);
734
+ min-inline-size: 0;
735
+ padding: var(--eth-space-md) !important;
736
+ }
737
+
738
+ .eth-agent-thinking-chain__item--running .eth-agent-thinking-chain__step,
739
+ .eth-agent-thinking-chain__item--in-progress .eth-agent-thinking-chain__step {
740
+ background: var(--eth-color-layer-02);
741
+ border-inline-start: 3px solid var(--eth-color-interactive-primary) !important;
742
+ }
743
+
744
+ .eth-agent-thinking-chain__item--pending-approval .eth-agent-thinking-chain__step,
745
+ .eth-agent-thinking-chain__item--warning .eth-agent-thinking-chain__step,
746
+ .eth-agent-thinking-chain__item--stale .eth-agent-thinking-chain__step {
747
+ border-inline-start: 3px solid var(--eth-color-warning) !important;
748
+ }
749
+
750
+ .eth-agent-thinking-chain__item--approval-required .eth-agent-thinking-chain__step,
751
+ .eth-agent-thinking-chain__item--blocked .eth-agent-thinking-chain__step,
752
+ .eth-agent-thinking-chain__item--failed .eth-agent-thinking-chain__step,
753
+ .eth-agent-thinking-chain__item--error .eth-agent-thinking-chain__step {
754
+ border-inline-start: 3px solid var(--eth-color-danger) !important;
755
+ }
756
+
757
+ .eth-agent-thinking-chain__step-header {
758
+ align-items: flex-start;
759
+ display: flex;
760
+ flex-wrap: wrap;
761
+ gap: var(--eth-space-sm) var(--eth-space-lg);
762
+ justify-content: space-between;
763
+ min-inline-size: 0;
764
+ }
765
+
766
+ .eth-agent-thinking-chain__step-heading,
767
+ .eth-agent-thinking-chain__step-meta {
768
+ align-items: center;
769
+ display: flex;
770
+ flex-wrap: wrap;
771
+ gap: var(--eth-space-xs) var(--eth-space-sm);
772
+ min-inline-size: 0;
773
+ }
774
+
775
+ .eth-agent-thinking-chain__step-meta {
776
+ justify-content: flex-end;
777
+ }
778
+
779
+ .eth-agent-thinking-chain__step-meta .eth-status-dot,
780
+ .eth-agent-thinking-chain__step-meta .cds--tag {
781
+ margin: 0;
782
+ }
783
+
784
+ .eth-agent-thinking-chain__step-title {
785
+ color: var(--eth-color-text-primary);
786
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
787
+ line-height: 1.2857;
788
+ overflow-wrap: anywhere;
789
+ }
790
+
791
+ .eth-agent-thinking-chain__branch-count,
792
+ .eth-agent-thinking-chain__duration {
793
+ color: var(--eth-color-text-secondary);
794
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
795
+ line-height: 1.333;
796
+ white-space: nowrap;
797
+ }
798
+
799
+ .eth-agent-thinking-chain__branch-count {
800
+ background: var(--eth-color-layer-02);
801
+ display: inline-flex;
802
+ padding: var(--eth-space-2xs) var(--eth-space-sm);
803
+ }
804
+
805
+ .eth-agent-thinking-chain__fields {
806
+ display: grid;
807
+ gap: var(--eth-space-sm);
808
+ margin: 0;
809
+ }
810
+
811
+ .eth-agent-thinking-chain__field {
812
+ display: grid;
813
+ gap: var(--eth-space-2xs);
814
+ min-inline-size: 0;
815
+ }
816
+
817
+ .eth-agent-thinking-chain__field dt {
818
+ color: var(--eth-color-text-secondary);
819
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
820
+ font-weight: 600;
821
+ line-height: 1.333;
822
+ margin: 0;
823
+ }
824
+
825
+ .eth-agent-thinking-chain__field dd {
826
+ color: var(--eth-color-text-primary);
827
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
828
+ line-height: 1.4286;
829
+ margin: 0;
830
+ overflow-wrap: anywhere;
831
+ }
832
+
833
+ .eth-agent-thinking-chain__field-value--mono {
834
+ font-family: var(--eth-font-mono);
835
+ font-size: calc(0.8125rem * var(--eth-text-scale, 1));
836
+ }
837
+
838
+ .eth-agent-thinking-chain__field--blocker {
839
+ background: color-mix(in srgb, var(--eth-color-danger) 6%, transparent);
840
+ border-inline-start: 3px solid var(--eth-color-danger);
841
+ padding: var(--eth-space-sm);
842
+ }
843
+
844
+ .eth-agent-thinking-chain__field--blocker dt {
845
+ color: var(--eth-color-danger);
846
+ }
847
+
848
+ .eth-agent-thinking-chain__empty-detail,
849
+ .eth-agent-thinking-chain__redacted {
850
+ color: var(--eth-color-text-secondary);
851
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
852
+ line-height: 1.4286;
853
+ margin: 0;
854
+ }
855
+
856
+ .eth-agent-thinking-chain__redacted {
857
+ background: var(--eth-color-layer-02);
858
+ border: 1px solid var(--eth-color-border-subtle);
859
+ padding: var(--eth-space-sm);
860
+ }
861
+
862
+ @media (max-width: 42rem) {
863
+ .eth-agent-thinking-chain__item {
864
+ gap: var(--eth-space-xs);
865
+ grid-template-columns: var(--eth-space-md) minmax(0, 1fr);
866
+ margin-inline-start: 0;
867
+ }
868
+
869
+ .eth-agent-thinking-chain__item::before {
870
+ inset-inline-start: calc(var(--eth-space-md) / 2 - 0.03125rem);
871
+ }
872
+
873
+ .eth-agent-thinking-chain__step-header,
874
+ .eth-agent-thinking-chain__step-meta {
875
+ justify-content: flex-start;
876
+ }
877
+ }
878
+
879
+ .eth-agent-thinking-panel__summary {
880
+ color: var(--eth-color-text-secondary);
881
+ line-height: 1.5;
882
+ margin: 0;
883
+ max-inline-size: 52rem;
884
+ }
885
+
886
+ .eth-agent-thinking-panel__progress {
887
+ display: grid;
888
+ gap: var(--eth-space-sm);
889
+ max-inline-size: 52rem;
890
+ }
891
+
892
+ .eth-agent-thinking-panel__progress-label {
893
+ align-items: center;
894
+ color: var(--eth-color-text-secondary);
895
+ display: flex;
896
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
897
+ gap: var(--eth-space-md);
898
+ justify-content: space-between;
899
+ line-height: 1.2857;
900
+ }
901
+
902
+ .eth-agent-thinking-panel__progress-label strong {
903
+ color: var(--eth-color-text-primary);
904
+ font-weight: 600;
905
+ }
906
+
907
+ .eth-agent-thinking-panel__progress progress {
908
+ appearance: none;
909
+ background: transparent;
910
+ block-size: var(--eth-space-sm);
911
+ border: 0;
912
+ inline-size: 100%;
913
+ }
914
+
915
+ .eth-agent-thinking-panel__progress progress::-webkit-progress-bar {
916
+ background: var(--eth-color-layer-02);
917
+ }
918
+
919
+ .eth-agent-thinking-panel__progress progress::-webkit-progress-value {
920
+ background: var(--eth-color-interactive-primary);
921
+ }
922
+
923
+ .eth-agent-thinking-panel__progress progress::-moz-progress-bar {
924
+ background: var(--eth-color-interactive-primary);
925
+ }
926
+
927
+ .eth-agent-tool-call-log__json pre,
928
+ .eth-agent-tool-call-log__drawer pre,
929
+ .eth-agent-generated-artifact-panel__preview pre {
930
+ background: var(--eth-color-layer-02) !important;
931
+ border-radius: 0 !important;
932
+ font-family: var(--eth-font-mono);
933
+ font-size: calc(0.8125rem * var(--eth-text-scale, 1));
934
+ line-height: 1.4615;
935
+ overflow: auto;
936
+ padding: var(--eth-space-md) !important;
937
+ white-space: pre-wrap;
938
+ }
939
+
940
+ .eth-trace__summary {
941
+ background: var(--eth-color-layer-02);
942
+ border: 1px solid var(--eth-color-border-subtle);
943
+ display: grid;
944
+ grid-template-columns: repeat(3, minmax(0, 1fr));
945
+ margin: 0;
946
+ }
947
+
948
+ .eth-trace__summary > div {
949
+ display: grid;
950
+ gap: var(--eth-space-xs);
951
+ min-inline-size: 0;
952
+ padding: var(--eth-space-md);
953
+ }
954
+
955
+ .eth-trace__summary > div + div {
956
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
957
+ }
958
+
959
+ .eth-trace__summary dt,
960
+ .eth-trace__detail-grid dt {
961
+ color: var(--eth-color-text-secondary);
962
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
963
+ line-height: 1.333;
964
+ margin: 0;
965
+ }
966
+
967
+ .eth-trace__summary dd,
968
+ .eth-trace__detail-grid dd {
969
+ color: var(--eth-color-text-primary);
970
+ font-weight: 600;
971
+ line-height: 1.375;
972
+ margin: 0;
973
+ min-inline-size: 0;
974
+ overflow-wrap: anywhere;
975
+ }
976
+
977
+ .eth-trace__layout {
978
+ display: grid;
979
+ gap: var(--eth-space-lg);
980
+ grid-template-columns: minmax(28rem, 1fr) minmax(18rem, 24rem);
981
+ }
982
+
983
+ .eth-trace__timeline-panel {
984
+ display: grid;
985
+ gap: var(--eth-space-sm);
986
+ min-inline-size: 0;
987
+ }
988
+
989
+ .eth-trace__axis {
990
+ color: var(--eth-color-text-secondary);
991
+ display: grid;
992
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
993
+ grid-template-columns: repeat(3, 1fr);
994
+ line-height: 1.333;
995
+ padding-inline-start: calc(18rem + var(--eth-space-md));
996
+ }
997
+
998
+ .eth-trace__axis span:nth-child(2) {
999
+ justify-self: center;
1000
+ }
1001
+
1002
+ .eth-trace__axis span:last-child {
1003
+ justify-self: end;
1004
+ }
1005
+
1006
+ .eth-trace__timeline {
1007
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1008
+ display: grid;
1009
+ }
1010
+
1011
+ .eth-trace__row {
1012
+ align-items: stretch;
1013
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1014
+ display: grid;
1015
+ grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
1016
+ min-block-size: 4rem;
1017
+ min-inline-size: 0;
1018
+ }
1019
+
1020
+ .eth-trace__row--selected {
1021
+ background: var(--eth-color-layer-selected);
1022
+ }
1023
+
1024
+ .eth-trace__span-label {
1025
+ align-items: stretch;
1026
+ background: transparent;
1027
+ border: 0;
1028
+ border-inline-start: 3px solid transparent;
1029
+ color: var(--eth-color-text-primary);
1030
+ cursor: pointer;
1031
+ display: grid;
1032
+ gap: var(--eth-space-xs);
1033
+ min-inline-size: 0;
1034
+ padding: var(--eth-space-sm) var(--eth-space-md);
1035
+ padding-inline-start: calc(var(--eth-space-md) + var(--eth-trace-indent, 0rem));
1036
+ text-align: start;
1037
+ }
1038
+
1039
+ .eth-trace__span-label:hover,
1040
+ .eth-trace__span-label--selected {
1041
+ background: var(--eth-color-layer-hover) !important;
1042
+ }
1043
+
1044
+ .eth-trace__span-label--selected {
1045
+ border-inline-start-color: var(--eth-color-interactive-primary);
1046
+ }
1047
+
1048
+ .eth-trace__span-title {
1049
+ align-items: center;
1050
+ display: flex;
1051
+ flex-wrap: wrap;
1052
+ gap: var(--eth-space-xs);
1053
+ min-inline-size: 0;
1054
+ }
1055
+
1056
+ .eth-trace__span-title .eth-status-dot {
1057
+ margin: 0;
1058
+ }
1059
+
1060
+ .eth-trace__span-name {
1061
+ flex: 1 1 8rem;
1062
+ font-weight: 600;
1063
+ min-inline-size: 0;
1064
+ overflow: hidden;
1065
+ text-overflow: ellipsis;
1066
+ white-space: nowrap;
1067
+ }
1068
+
1069
+ .eth-trace__span-meta {
1070
+ color: var(--eth-color-text-secondary);
1071
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1072
+ line-height: 1.333;
1073
+ padding-inline-start: var(--eth-trace-indent, 0);
1074
+ }
1075
+
1076
+ .eth-trace__span-label:focus-visible,
1077
+ .eth-trace__bar:focus-visible,
1078
+ .eth-agent-handoff-panel__target:focus-visible,
1079
+ .eth-agent-generated-artifact-panel__item:focus-visible,
1080
+ .eth-agent-context-viewer__source:focus-visible {
1081
+ outline: 2px solid var(--eth-color-focus);
1082
+ outline-offset: -2px;
1083
+ }
1084
+
1085
+ .eth-trace__track {
1086
+ align-self: center;
1087
+ background:
1088
+ repeating-linear-gradient(
1089
+ to right,
1090
+ transparent 0,
1091
+ transparent calc(25% - 1px),
1092
+ var(--eth-color-border-subtle) calc(25% - 1px),
1093
+ var(--eth-color-border-subtle) 25%
1094
+ ),
1095
+ var(--eth-color-layer-02) !important;
1096
+ block-size: var(--eth-space-lg);
1097
+ margin-inline: var(--eth-space-md);
1098
+ min-inline-size: 8rem;
1099
+ overflow: hidden;
1100
+ position: relative;
1101
+ }
1102
+
1103
+ .eth-trace__bar {
1104
+ background: var(--eth-color-interactive-primary) !important;
1105
+ block-size: 100%;
1106
+ border: 0;
1107
+ cursor: pointer;
1108
+ inline-size: var(--eth-trace-width);
1109
+ inset-block-start: 0;
1110
+ inset-inline-start: var(--eth-trace-left);
1111
+ max-inline-size: calc(100% - var(--eth-trace-left));
1112
+ min-inline-size: var(--eth-space-sm);
1113
+ position: absolute;
1114
+ }
1115
+
1116
+ .eth-trace__bar:hover,
1117
+ .eth-trace__bar--selected {
1118
+ filter: brightness(0.92);
1119
+ }
1120
+
1121
+ .eth-trace__bar--selected {
1122
+ box-shadow: inset 0 0 0 2px var(--eth-color-focus);
1123
+ }
1124
+
1125
+ .eth-trace__bar--completed,
1126
+ .eth-trace__bar--succeeded,
1127
+ .eth-trace__bar--synced {
1128
+ background: var(--eth-color-success) !important;
1129
+ }
1130
+
1131
+ .eth-trace__bar--warning,
1132
+ .eth-trace__bar--pending-approval,
1133
+ .eth-trace__bar--approval-required {
1134
+ background: var(--eth-color-warning) !important;
1135
+ }
1136
+
1137
+ .eth-trace__bar--failed,
1138
+ .eth-trace__bar--blocked {
1139
+ background: var(--eth-color-danger) !important;
1140
+ }
1141
+
1142
+ .eth-trace__bar--queued,
1143
+ .eth-trace__bar--paused,
1144
+ .eth-trace__bar--not-started,
1145
+ .eth-trace__bar--inactive,
1146
+ .eth-trace__bar--stale {
1147
+ background: var(--eth-color-border-strong) !important;
1148
+ }
1149
+
1150
+ .eth-trace__details {
1151
+ align-content: start;
1152
+ background: var(--eth-color-layer-02);
1153
+ border: 1px solid var(--eth-color-border-subtle) !important;
1154
+ border-radius: 0 !important;
1155
+ display: grid;
1156
+ gap: var(--eth-space-lg);
1157
+ min-inline-size: 0;
1158
+ padding: var(--eth-space-lg) !important;
1159
+ }
1160
+
1161
+ .eth-trace__details-header {
1162
+ align-items: flex-start;
1163
+ display: flex;
1164
+ gap: var(--eth-space-md);
1165
+ justify-content: space-between;
1166
+ min-inline-size: 0;
1167
+ }
1168
+
1169
+ .eth-trace__details-header h3,
1170
+ .eth-trace__attributes h4 {
1171
+ margin: 0;
1172
+ }
1173
+
1174
+ .eth-trace__details-header h3 {
1175
+ font-size: calc(1.25rem * var(--eth-text-scale, 1));
1176
+ font-weight: 400;
1177
+ line-height: 1.4;
1178
+ overflow-wrap: anywhere;
1179
+ }
1180
+
1181
+ .eth-trace__details-eyebrow {
1182
+ color: var(--eth-color-text-secondary);
1183
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1184
+ line-height: 1.333;
1185
+ margin: 0 0 var(--eth-space-xs);
1186
+ }
1187
+
1188
+ .eth-trace__detail-grid {
1189
+ border: 1px solid var(--eth-color-border-subtle);
1190
+ display: grid;
1191
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1192
+ margin: 0;
1193
+ }
1194
+
1195
+ .eth-trace__detail-grid > div {
1196
+ display: grid;
1197
+ gap: var(--eth-space-xs);
1198
+ min-inline-size: 0;
1199
+ padding: var(--eth-space-sm);
1200
+ }
1201
+
1202
+ .eth-trace__detail-grid > div:nth-child(2n) {
1203
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
1204
+ }
1205
+
1206
+ .eth-trace__detail-grid > div:nth-child(n + 3) {
1207
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1208
+ }
1209
+
1210
+ .eth-trace__attributes {
1211
+ display: grid;
1212
+ gap: var(--eth-space-sm);
1213
+ min-inline-size: 0;
1214
+ }
1215
+
1216
+ .eth-trace__attributes-header {
1217
+ align-items: center;
1218
+ display: flex;
1219
+ gap: var(--eth-space-sm);
1220
+ justify-content: space-between;
1221
+ }
1222
+
1223
+ .eth-trace__attributes pre,
1224
+ .eth-trace__attributes p {
1225
+ background: var(--eth-color-layer-01) !important;
1226
+ border: 1px solid var(--eth-color-border-subtle);
1227
+ color: var(--eth-color-text-primary);
1228
+ font-family: var(--eth-font-mono);
1229
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1230
+ line-height: 1.5;
1231
+ margin: 0;
1232
+ max-block-size: 16rem;
1233
+ overflow: auto;
1234
+ padding: var(--eth-space-md) !important;
1235
+ white-space: pre-wrap;
1236
+ }
1237
+
1238
+ .eth-agent-plan-diff__list,
1239
+ .eth-agent-generated-artifact-panel__list {
1240
+ display: grid;
1241
+ gap: var(--eth-space-sm);
1242
+ }
1243
+
1244
+ .eth-agent-plan-diff {
1245
+ inline-size: min(100%, 64rem);
1246
+ }
1247
+
1248
+ .eth-agent-plan-diff__body {
1249
+ display: grid;
1250
+ gap: var(--eth-space-lg);
1251
+ }
1252
+
1253
+ .eth-agent-plan-diff__summary {
1254
+ background: var(--eth-color-layer-02);
1255
+ border: 1px solid var(--eth-color-border-subtle);
1256
+ display: grid;
1257
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1258
+ margin: 0;
1259
+ }
1260
+
1261
+ .eth-agent-plan-diff__summary-item {
1262
+ min-inline-size: 0;
1263
+ padding: var(--eth-space-md);
1264
+ }
1265
+
1266
+ .eth-agent-plan-diff__summary-item + .eth-agent-plan-diff__summary-item {
1267
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
1268
+ }
1269
+
1270
+ .eth-agent-plan-diff__summary-item dt {
1271
+ color: var(--eth-color-text-secondary);
1272
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1273
+ font-weight: 600;
1274
+ line-height: 1.3333;
1275
+ margin: 0 0 var(--eth-space-xs);
1276
+ }
1277
+
1278
+ .eth-agent-plan-diff__summary-item dd {
1279
+ color: var(--eth-color-text-primary);
1280
+ font-size: calc(1.25rem * var(--eth-text-scale, 1));
1281
+ font-weight: 400;
1282
+ line-height: 1.4;
1283
+ margin: 0;
1284
+ }
1285
+
1286
+ .eth-agent-plan-diff__summary-item--added {
1287
+ box-shadow: inset 0 3px 0 var(--eth-color-success);
1288
+ }
1289
+
1290
+ .eth-agent-plan-diff__summary-item--modified {
1291
+ box-shadow: inset 0 3px 0 var(--eth-color-warning);
1292
+ }
1293
+
1294
+ .eth-agent-plan-diff__summary-item--removed {
1295
+ box-shadow: inset 0 3px 0 var(--eth-color-danger);
1296
+ }
1297
+
1298
+ .eth-agent-plan-diff__summary-item--unchanged {
1299
+ box-shadow: inset 0 3px 0 var(--eth-color-border-strong);
1300
+ }
1301
+
1302
+ .eth-agent-plan-diff__list {
1303
+ background: var(--eth-color-layer-01);
1304
+ border: 1px solid var(--eth-color-border-subtle);
1305
+ gap: 0;
1306
+ list-style: none;
1307
+ margin: 0;
1308
+ padding: 0;
1309
+ }
1310
+
1311
+ .eth-agent-plan-diff__entry {
1312
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1313
+ margin: 0;
1314
+ }
1315
+
1316
+ .eth-agent-plan-diff__entry:last-child {
1317
+ border-block-end: 0;
1318
+ }
1319
+
1320
+ .eth-agent-plan-diff__item {
1321
+ background: var(--eth-color-layer-01) !important;
1322
+ border: 0 !important;
1323
+ border-inline-start: 4px solid var(--eth-color-border-strong) !important;
1324
+ border-radius: 0 !important;
1325
+ color: var(--eth-color-text-primary);
1326
+ display: grid;
1327
+ gap: var(--eth-space-md);
1328
+ min-inline-size: 0;
1329
+ padding: var(--eth-space-md) var(--eth-space-lg) !important;
1330
+ }
1331
+
1332
+ .eth-agent-plan-diff__item--added {
1333
+ border-inline-start: 4px solid var(--eth-color-success) !important;
1334
+ }
1335
+
1336
+ .eth-agent-plan-diff__item--removed {
1337
+ border-inline-start: 4px solid var(--eth-color-danger) !important;
1338
+ }
1339
+
1340
+ .eth-agent-plan-diff__item--modified {
1341
+ border-inline-start: 4px solid var(--eth-color-warning) !important;
1342
+ }
1343
+
1344
+ .eth-agent-plan-diff__item--unchanged {
1345
+ border-inline-start-color: var(--eth-color-border-subtle) !important;
1346
+ }
1347
+
1348
+ .eth-agent-plan-diff__item-header {
1349
+ align-items: center;
1350
+ display: flex;
1351
+ gap: var(--eth-space-md);
1352
+ justify-content: space-between;
1353
+ min-inline-size: 0;
1354
+ }
1355
+
1356
+ .eth-agent-plan-diff__item-heading {
1357
+ align-items: center;
1358
+ display: flex;
1359
+ flex-wrap: wrap;
1360
+ gap: var(--eth-space-sm);
1361
+ min-inline-size: 0;
1362
+ }
1363
+
1364
+ .eth-agent-plan-diff__step-id {
1365
+ color: var(--eth-color-text-primary);
1366
+ font-family: var(--eth-font-mono);
1367
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1368
+ font-weight: 600;
1369
+ line-height: 1.4286;
1370
+ }
1371
+
1372
+ .eth-agent-plan-diff__comparison {
1373
+ background: var(--eth-color-layer-02);
1374
+ border: 1px solid var(--eth-color-border-subtle);
1375
+ display: grid;
1376
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1377
+ min-inline-size: 0;
1378
+ }
1379
+
1380
+ .eth-agent-plan-diff__comparison .eth-agent-plan-diff__snapshot {
1381
+ background: var(--eth-color-layer-01);
1382
+ padding: var(--eth-space-md);
1383
+ }
1384
+
1385
+ .eth-agent-plan-diff__comparison .eth-agent-plan-diff__snapshot + .eth-agent-plan-diff__snapshot {
1386
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
1387
+ }
1388
+
1389
+ .eth-agent-plan-diff__snapshot {
1390
+ display: grid;
1391
+ gap: var(--eth-space-sm);
1392
+ min-inline-size: 0;
1393
+ }
1394
+
1395
+ .eth-agent-plan-diff__snapshot-label {
1396
+ color: var(--eth-color-text-secondary);
1397
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1398
+ font-weight: 600;
1399
+ letter-spacing: 0;
1400
+ line-height: 1.3333;
1401
+ margin: 0;
1402
+ text-transform: uppercase;
1403
+ }
1404
+
1405
+ .eth-agent-plan-diff__snapshot-description {
1406
+ color: var(--eth-color-text-primary);
1407
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1408
+ line-height: 1.4286;
1409
+ margin: 0;
1410
+ overflow-wrap: anywhere;
1411
+ }
1412
+
1413
+ .eth-agent-plan-diff__snapshot-meta {
1414
+ align-items: center;
1415
+ display: flex;
1416
+ flex-wrap: wrap;
1417
+ gap: var(--eth-space-xs);
1418
+ }
1419
+
1420
+ .eth-agent-plan-diff .cds--tag {
1421
+ margin: 0;
1422
+ max-inline-size: 100%;
1423
+ }
1424
+
1425
+ .eth-agent-plan-diff__empty {
1426
+ background: var(--eth-color-layer-02);
1427
+ border: 1px solid var(--eth-color-border-subtle);
1428
+ color: var(--eth-color-text-secondary);
1429
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1430
+ line-height: 1.4286;
1431
+ margin: 0;
1432
+ padding: var(--eth-space-md);
1433
+ }
1434
+
1435
+ .eth-agent-plan-preview__body {
1436
+ display: grid;
1437
+ gap: var(--eth-space-lg);
1438
+ }
1439
+
1440
+ .eth-agent-plan-preview__summary {
1441
+ align-items: end;
1442
+ border-block: 1px solid var(--eth-color-border-subtle);
1443
+ display: flex;
1444
+ gap: var(--eth-space-lg);
1445
+ justify-content: space-between;
1446
+ padding-block: var(--eth-space-md);
1447
+ }
1448
+
1449
+ .eth-agent-plan-preview__summary-label {
1450
+ color: var(--eth-color-text-secondary);
1451
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1452
+ font-weight: 600;
1453
+ letter-spacing: 0;
1454
+ line-height: 1.3333;
1455
+ margin: 0 0 var(--eth-space-xs);
1456
+ text-transform: uppercase;
1457
+ }
1458
+
1459
+ .eth-agent-plan-preview__summary-title {
1460
+ color: var(--eth-color-text-primary);
1461
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1462
+ line-height: 1.4286;
1463
+ margin: 0;
1464
+ }
1465
+
1466
+ .eth-agent-plan-preview__summary-count {
1467
+ color: var(--eth-color-text-secondary);
1468
+ flex: 0 0 auto;
1469
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1470
+ line-height: 1.3333;
1471
+ }
1472
+
1473
+ .eth-agent-plan-preview__steps {
1474
+ background: var(--eth-color-layer-01);
1475
+ border: 1px solid var(--eth-color-border-subtle);
1476
+ display: grid;
1477
+ gap: 0;
1478
+ list-style: none;
1479
+ margin: 0;
1480
+ padding: 0;
1481
+ }
1482
+
1483
+ .eth-agent-plan-preview__step {
1484
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1485
+ margin: 0;
1486
+ }
1487
+
1488
+ .eth-agent-plan-preview__step:last-child {
1489
+ border-block-end: 0;
1490
+ }
1491
+
1492
+ .eth-agent-plan-preview__step--risk {
1493
+ box-shadow: inset 4px 0 0 var(--eth-color-warning);
1494
+ }
1495
+
1496
+ .eth-agent-plan-preview__step-card {
1497
+ align-items: flex-start;
1498
+ background: var(--eth-color-layer-01);
1499
+ color: var(--eth-color-text-primary);
1500
+ display: grid;
1501
+ gap: var(--eth-space-md);
1502
+ grid-template-columns: 2rem minmax(0, 1fr);
1503
+ min-block-size: 4rem;
1504
+ padding: var(--eth-space-md);
1505
+ transition:
1506
+ background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
1507
+ border-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
1508
+ }
1509
+
1510
+ .eth-agent-plan-preview__step:hover .eth-agent-plan-preview__step-card {
1511
+ background: var(--eth-color-layer-hover);
1512
+ }
1513
+
1514
+ .eth-agent-plan-preview__step-index {
1515
+ color: var(--eth-color-text-secondary);
1516
+ font-family: var(--eth-font-mono);
1517
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1518
+ line-height: 1.3333;
1519
+ }
1520
+
1521
+ .eth-agent-plan-preview__step-main {
1522
+ display: grid;
1523
+ gap: var(--eth-space-sm);
1524
+ min-inline-size: 0;
1525
+ }
1526
+
1527
+ .eth-agent-plan-preview__step-description {
1528
+ color: var(--eth-color-text-primary);
1529
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1530
+ line-height: 1.4286;
1531
+ margin: 0;
1532
+ }
1533
+
1534
+ .eth-agent-plan-preview__step-meta {
1535
+ align-items: center;
1536
+ display: flex;
1537
+ flex-wrap: wrap;
1538
+ gap: var(--eth-space-xs);
1539
+ }
1540
+
1541
+ .eth-agent-plan-preview__empty {
1542
+ background: var(--eth-color-layer-02);
1543
+ border: 1px solid var(--eth-color-border-subtle);
1544
+ color: var(--eth-color-text-secondary);
1545
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1546
+ line-height: 1.4286;
1547
+ margin: 0;
1548
+ padding: var(--eth-space-md);
1549
+ }
1550
+
1551
+ .eth-agent-plan-preview__supporting {
1552
+ display: grid;
1553
+ gap: var(--eth-space-lg);
1554
+ grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
1555
+ }
1556
+
1557
+ .eth-agent-plan-preview__note-section {
1558
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1559
+ padding-block-start: var(--eth-space-md);
1560
+ }
1561
+
1562
+ .eth-agent-plan-preview__note-title {
1563
+ color: var(--eth-color-text-primary);
1564
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1565
+ font-weight: 600;
1566
+ line-height: 1.2857;
1567
+ margin: 0 0 var(--eth-space-sm);
1568
+ }
1569
+
1570
+ .eth-agent-plan-preview__note-list {
1571
+ display: grid;
1572
+ gap: var(--eth-space-sm);
1573
+ list-style: none;
1574
+ margin: 0;
1575
+ padding: 0;
1576
+ }
1577
+
1578
+ .eth-agent-plan-preview__note-list li {
1579
+ color: var(--eth-color-text-secondary);
1580
+ display: grid;
1581
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1582
+ gap: var(--eth-space-sm);
1583
+ grid-template-columns: var(--eth-space-sm) minmax(0, 1fr);
1584
+ line-height: 1.4286;
1585
+ }
1586
+
1587
+ .eth-agent-plan-preview__note-marker {
1588
+ background: var(--eth-color-interactive-primary);
1589
+ block-size: var(--eth-space-sm);
1590
+ inline-size: var(--eth-space-sm);
1591
+ margin-block-start: 0.375rem;
1592
+ }
1593
+
1594
+ .eth-agent-plan-preview__note-section--risk .eth-agent-plan-preview__note-marker {
1595
+ background: var(--eth-color-warning);
1596
+ }
1597
+
1598
+ .eth-agent-memory-panel__body {
1599
+ display: grid;
1600
+ gap: var(--eth-space-lg);
1601
+ }
1602
+
1603
+ .eth-agent-memory-panel__summary {
1604
+ background: var(--eth-color-layer-02);
1605
+ border: 1px solid var(--eth-color-border-subtle);
1606
+ display: grid;
1607
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1608
+ margin: 0;
1609
+ }
1610
+
1611
+ .eth-agent-memory-panel__summary-item {
1612
+ display: grid;
1613
+ gap: var(--eth-space-xs);
1614
+ min-inline-size: 0;
1615
+ padding: var(--eth-space-md);
1616
+ }
1617
+
1618
+ .eth-agent-memory-panel__summary-item + .eth-agent-memory-panel__summary-item {
1619
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
1620
+ }
1621
+
1622
+ .eth-agent-memory-panel__summary dt {
1623
+ color: var(--eth-color-text-secondary);
1624
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1625
+ font-weight: 600;
1626
+ line-height: 1.3333;
1627
+ margin: 0;
1628
+ }
1629
+
1630
+ .eth-agent-memory-panel__summary dd {
1631
+ color: var(--eth-color-text-primary);
1632
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1633
+ font-weight: 600;
1634
+ line-height: 1.4286;
1635
+ margin: 0;
1636
+ min-inline-size: 0;
1637
+ }
1638
+
1639
+ .eth-agent-memory-panel__group {
1640
+ display: grid;
1641
+ gap: var(--eth-space-sm);
1642
+ }
1643
+
1644
+ .eth-agent-memory-panel__group-header {
1645
+ align-items: center;
1646
+ border-block-end: 1px solid var(--eth-color-border-subtle);
1647
+ display: flex;
1648
+ gap: var(--eth-space-sm);
1649
+ justify-content: space-between;
1650
+ padding-block-end: var(--eth-space-sm);
1651
+ }
1652
+
1653
+ .eth-agent-memory-panel__entries {
1654
+ display: grid;
1655
+ gap: var(--eth-space-sm);
1656
+ }
1657
+
1658
+ .eth-agent-memory-panel__entry,
1659
+ .eth-agent-context-viewer__source,
1660
+ .eth-agent-generated-artifact-panel__item,
1661
+ .eth-agent-generated-artifact-panel__preview {
1662
+ background: var(--eth-color-layer-01) !important;
1663
+ border: 1px solid var(--eth-color-border-subtle) !important;
1664
+ border-radius: 0 !important;
1665
+ color: var(--eth-color-text-primary);
1666
+ padding: var(--eth-space-md) !important;
1667
+ transition:
1668
+ background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
1669
+ border-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
1670
+ }
1671
+
1672
+ .eth-agent-memory-panel__entry {
1673
+ display: grid;
1674
+ gap: var(--eth-space-sm);
1675
+ min-inline-size: 0;
1676
+ }
1677
+
1678
+ .eth-agent-memory-panel__entry--pinned {
1679
+ box-shadow: inset 3px 0 0 var(--eth-color-interactive-primary);
1680
+ }
1681
+
1682
+ .eth-agent-memory-panel__entry:hover,
1683
+ .eth-agent-context-viewer__source--interactive:hover,
1684
+ .eth-agent-generated-artifact-panel__item:hover {
1685
+ background: var(--eth-color-layer-hover) !important;
1686
+ }
1687
+
1688
+ .eth-agent-context-viewer__sources {
1689
+ border: 1px solid var(--eth-color-border-subtle);
1690
+ display: grid;
1691
+ list-style: none;
1692
+ margin: 0;
1693
+ padding: 0;
1694
+ }
1695
+
1696
+ .eth-agent-context-viewer__sources > li + li {
1697
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1698
+ }
1699
+
1700
+ .eth-agent-context-viewer__source {
1701
+ align-items: start;
1702
+ background: var(--eth-color-layer-01) !important;
1703
+ border: 0 !important;
1704
+ color: var(--eth-color-text-primary);
1705
+ display: grid !important;
1706
+ font: inherit;
1707
+ gap: var(--eth-space-md);
1708
+ grid-template-columns: 2rem minmax(0, 1fr) max-content;
1709
+ min-inline-size: 0;
1710
+ padding: var(--eth-space-md) var(--eth-space-lg) !important;
1711
+ text-align: start;
1712
+ text-decoration: none;
1713
+ width: 100%;
1714
+ }
1715
+
1716
+ .eth-agent-context-viewer__source--interactive {
1717
+ cursor: pointer;
1718
+ }
1719
+
1720
+ .eth-agent-context-viewer__kind-icon {
1721
+ align-items: center;
1722
+ background: var(--eth-color-layer-02);
1723
+ block-size: 2rem;
1724
+ border: 1px solid var(--eth-color-border-subtle);
1725
+ color: var(--eth-color-text-secondary);
1726
+ display: inline-flex;
1727
+ inline-size: 2rem;
1728
+ justify-content: center;
1729
+ }
1730
+
1731
+ .eth-agent-context-viewer__main,
1732
+ .eth-agent-context-viewer__topline,
1733
+ .eth-agent-context-viewer__aside {
1734
+ min-inline-size: 0;
1735
+ }
1736
+
1737
+ .eth-agent-context-viewer__main {
1738
+ display: grid;
1739
+ gap: var(--eth-space-xs);
1740
+ }
1741
+
1742
+ .eth-agent-context-viewer__topline {
1743
+ align-items: center;
1744
+ display: flex;
1745
+ flex-wrap: wrap;
1746
+ gap: var(--eth-space-sm);
1747
+ }
1748
+
1749
+ .eth-agent-context-viewer__label {
1750
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1751
+ line-height: 1.2857;
1752
+ overflow-wrap: anywhere;
1753
+ }
1754
+
1755
+ .eth-agent-context-viewer__excerpt {
1756
+ color: var(--eth-color-text-secondary);
1757
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1758
+ line-height: 1.4286;
1759
+ margin: 0;
1760
+ overflow-wrap: anywhere;
1761
+ }
1762
+
1763
+ .eth-agent-context-viewer__aside {
1764
+ align-items: center;
1765
+ color: var(--eth-color-text-secondary);
1766
+ display: flex;
1767
+ gap: var(--eth-space-md);
1768
+ justify-content: end;
1769
+ min-inline-size: 8rem;
1770
+ }
1771
+
1772
+ .eth-agent-context-viewer__relevance {
1773
+ display: grid;
1774
+ gap: var(--eth-space-xs);
1775
+ inline-size: 7rem;
1776
+ }
1777
+
1778
+ .eth-agent-context-viewer__relevance-value,
1779
+ .eth-agent-context-viewer__unranked {
1780
+ color: var(--eth-color-text-secondary);
1781
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1782
+ line-height: 1.3333;
1783
+ text-align: end;
1784
+ white-space: nowrap;
1785
+ }
1786
+
1787
+ .eth-agent-context-viewer__relevance-meter {
1788
+ background: var(--eth-color-layer-02);
1789
+ block-size: 0.25rem;
1790
+ display: block;
1791
+ inline-size: 100%;
1792
+ }
1793
+
1794
+ .eth-agent-context-viewer__relevance-meter > span {
1795
+ background: var(--eth-color-interactive-primary);
1796
+ block-size: 100%;
1797
+ display: block;
1798
+ }
1799
+
1800
+ .eth-agent-context-viewer__indicator {
1801
+ color: var(--eth-color-text-secondary);
1802
+ flex: 0 0 auto;
1803
+ }
1804
+
1805
+ .eth-agent-context-viewer__source--interactive:hover .eth-agent-context-viewer__kind-icon {
1806
+ border-color: var(--eth-color-border-strong);
1807
+ color: var(--eth-color-text-primary);
1808
+ }
1809
+
1810
+ @media (width <= 640px) {
1811
+ .eth-agent-context-viewer__source {
1812
+ grid-template-columns: 2rem minmax(0, 1fr);
1813
+ }
1814
+
1815
+ .eth-agent-context-viewer__aside {
1816
+ grid-column: 2;
1817
+ justify-content: space-between;
1818
+ min-inline-size: 0;
1819
+ }
1820
+
1821
+ .eth-agent-context-viewer__relevance {
1822
+ inline-size: min(100%, 8rem);
1823
+ }
1824
+ }
1825
+
1826
+ .eth-agent-scope-attachments {
1827
+ display: grid;
1828
+ gap: var(--eth-space-md);
1829
+ inline-size: 100%;
1830
+ min-inline-size: 0;
1831
+ }
1832
+
1833
+ .eth-agent-scope-attachments .eth-surface__header {
1834
+ align-items: flex-start;
1835
+ gap: var(--eth-space-md);
1836
+ }
1837
+
1838
+ .eth-agent-scope-attachments__list {
1839
+ border: 1px solid var(--eth-color-border-subtle);
1840
+ display: grid;
1841
+ list-style: none;
1842
+ margin: 0;
1843
+ min-inline-size: 0;
1844
+ padding: 0;
1845
+ }
1846
+
1847
+ .eth-agent-scope-attachments__item {
1848
+ align-items: center;
1849
+ background: var(--eth-color-layer-01);
1850
+ color: var(--eth-color-text-primary);
1851
+ display: grid;
1852
+ gap: var(--eth-space-sm);
1853
+ grid-template-columns: 1.75rem minmax(0, 1fr) max-content;
1854
+ min-inline-size: 0;
1855
+ padding: var(--eth-space-xs) var(--eth-space-sm);
1856
+ }
1857
+
1858
+ .eth-agent-scope-attachments__item + .eth-agent-scope-attachments__item {
1859
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1860
+ }
1861
+
1862
+ .eth-agent-scope-attachments__icon {
1863
+ align-items: center;
1864
+ background: var(--eth-color-layer-02);
1865
+ block-size: 1.75rem;
1866
+ border: 1px solid var(--eth-color-border-subtle);
1867
+ color: var(--eth-color-text-secondary);
1868
+ display: inline-flex;
1869
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1870
+ font-weight: 600;
1871
+ inline-size: 1.75rem;
1872
+ justify-content: center;
1873
+ line-height: 1;
1874
+ }
1875
+
1876
+ .eth-agent-scope-attachments__main,
1877
+ .eth-agent-scope-attachments__topline,
1878
+ .eth-agent-scope-attachments__aside {
1879
+ min-inline-size: 0;
1880
+ }
1881
+
1882
+ .eth-agent-scope-attachments__main {
1883
+ display: grid;
1884
+ gap: var(--eth-space-xs);
1885
+ }
1886
+
1887
+ .eth-agent-scope-attachments__topline,
1888
+ .eth-agent-scope-attachments__aside {
1889
+ align-items: center;
1890
+ display: flex;
1891
+ flex-wrap: wrap;
1892
+ gap: var(--eth-space-sm);
1893
+ }
1894
+
1895
+ .eth-agent-scope-attachments__label {
1896
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1897
+ line-height: 1.2857;
1898
+ min-inline-size: 0;
1899
+ overflow-wrap: anywhere;
1900
+ }
1901
+
1902
+ .eth-agent-scope-attachments__meta,
1903
+ .eth-agent-scope-attachments__untracked {
1904
+ color: var(--eth-color-text-secondary);
1905
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1906
+ line-height: 1.3333;
1907
+ }
1908
+
1909
+ .eth-agent-scope-attachments__aside {
1910
+ justify-content: flex-end;
1911
+ }
1912
+
1913
+ .eth-agent-scope-attachments .cds--tag {
1914
+ margin: 0;
1915
+ max-inline-size: 100%;
1916
+ }
1917
+
1918
+ .eth-agent-scope-attachments .eth-button {
1919
+ flex: 0 0 auto;
1920
+ }
1921
+
1922
+ @media (width <= 640px) {
1923
+ .eth-agent-scope-attachments__item {
1924
+ align-items: start;
1925
+ grid-template-columns: 1.75rem minmax(0, 1fr);
1926
+ }
1927
+
1928
+ .eth-agent-scope-attachments__aside {
1929
+ grid-column: 2;
1930
+ justify-content: flex-start;
1931
+ }
1932
+ }
1933
+
1934
+ .eth-agent-memory-panel__group h3 {
1935
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1936
+ font-weight: 600;
1937
+ line-height: 1.2857;
1938
+ margin: 0;
1939
+ }
1940
+
1941
+ .eth-agent-memory-panel .cds--tag {
1942
+ margin: 0;
1943
+ max-inline-size: 100%;
1944
+ }
1945
+
1946
+ .eth-agent-memory-panel__entry-header,
1947
+ .eth-agent-memory-panel__actions {
1948
+ align-items: center;
1949
+ display: flex;
1950
+ flex-wrap: wrap;
1951
+ gap: var(--eth-space-sm);
1952
+ justify-content: space-between;
1953
+ }
1954
+
1955
+ .eth-agent-memory-panel__entry-title {
1956
+ align-items: center;
1957
+ display: inline-flex;
1958
+ flex: 1 1 auto;
1959
+ flex-wrap: wrap;
1960
+ gap: var(--eth-space-sm);
1961
+ min-inline-size: 0;
1962
+ }
1963
+
1964
+ .eth-agent-memory-panel__entry-title strong {
1965
+ color: var(--eth-color-text-primary);
1966
+ font-family: var(--eth-font-mono);
1967
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1968
+ font-weight: 600;
1969
+ line-height: 1.4286;
1970
+ overflow-wrap: anywhere;
1971
+ }
1972
+
1973
+ .eth-agent-memory-panel__updated-at {
1974
+ color: var(--eth-color-text-secondary);
1975
+ flex: 0 0 auto;
1976
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
1977
+ line-height: 1.3333;
1978
+ }
1979
+
1980
+ .eth-agent-memory-panel__value {
1981
+ color: var(--eth-color-text-secondary);
1982
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
1983
+ line-height: 1.5;
1984
+ overflow-wrap: anywhere;
1985
+ }
1986
+
1987
+ .eth-agent-memory-panel__actions {
1988
+ border-block-start: 1px solid var(--eth-color-border-subtle);
1989
+ justify-content: flex-end;
1990
+ padding-block-start: var(--eth-space-sm);
1991
+ }
1992
+
1993
+ .eth-agent-safety-panel {
1994
+ display: grid;
1995
+ gap: var(--eth-space-lg);
1996
+ }
1997
+
1998
+ .eth-agent-safety-panel__body {
1999
+ display: grid;
2000
+ gap: var(--eth-space-md);
2001
+ }
2002
+
2003
+ .eth-agent-safety-panel__summary {
2004
+ background: var(--eth-color-layer-02);
2005
+ border: 1px solid var(--eth-color-border-subtle);
2006
+ display: grid;
2007
+ grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
2008
+ margin: 0;
2009
+ }
2010
+
2011
+ .eth-agent-safety-panel__summary-item {
2012
+ border-inline-end: 1px solid var(--eth-color-border-subtle);
2013
+ display: grid;
2014
+ gap: var(--eth-space-xs);
2015
+ min-inline-size: 0;
2016
+ padding: var(--eth-space-md);
2017
+ }
2018
+
2019
+ .eth-agent-safety-panel__summary-item:last-child {
2020
+ border-inline-end: 0;
2021
+ }
2022
+
2023
+ .eth-agent-safety-panel__summary-item dt {
2024
+ color: var(--eth-color-text-secondary);
2025
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
2026
+ font-weight: 600;
2027
+ line-height: 1.3333;
2028
+ margin: 0;
2029
+ }
2030
+
2031
+ .eth-agent-safety-panel__summary-item dd {
2032
+ color: var(--eth-color-text-primary);
2033
+ font-size: calc(1.25rem * var(--eth-text-scale, 1));
2034
+ font-weight: 400;
2035
+ line-height: 1.4;
2036
+ margin: 0;
2037
+ }
2038
+
2039
+ .eth-agent-safety-panel__summary-item--pass {
2040
+ box-shadow: inset 0 3px 0 var(--eth-color-success);
2041
+ }
2042
+
2043
+ .eth-agent-safety-panel__summary-item--warn {
2044
+ box-shadow: inset 0 3px 0 var(--eth-color-warning);
2045
+ }
2046
+
2047
+ .eth-agent-safety-panel__summary-item--fail {
2048
+ box-shadow: inset 0 3px 0 var(--eth-color-danger);
2049
+ }
2050
+
2051
+ .eth-agent-safety-panel__list {
2052
+ border: 1px solid var(--eth-color-border-subtle);
2053
+ display: grid;
2054
+ }
2055
+
2056
+ .eth-agent-safety-panel__check {
2057
+ align-items: start;
2058
+ background: var(--eth-color-layer-01);
2059
+ border-block-end: 1px solid var(--eth-color-border-subtle);
2060
+ border-inline-start: 4px solid var(--eth-color-border-strong);
2061
+ display: grid;
2062
+ gap: var(--eth-space-md);
2063
+ grid-template-columns: 0.75rem minmax(0, 1fr);
2064
+ min-block-size: 4rem;
2065
+ padding: var(--eth-space-md) var(--eth-space-lg);
2066
+ }
2067
+
2068
+ .eth-agent-safety-panel__check:last-child {
2069
+ border-block-end: 0;
2070
+ }
2071
+
2072
+ .eth-agent-safety-panel__check--pass {
2073
+ border-inline-start-color: var(--eth-color-success);
2074
+ }
2075
+
2076
+ .eth-agent-safety-panel__check--warn {
2077
+ border-inline-start-color: var(--eth-color-warning);
2078
+ }
2079
+
2080
+ .eth-agent-safety-panel__check--fail {
2081
+ border-inline-start-color: var(--eth-color-danger);
2082
+ }
2083
+
2084
+ .eth-agent-safety-panel__indicator {
2085
+ background: var(--eth-color-border-strong);
2086
+ border-radius: 50%;
2087
+ block-size: 0.5rem;
2088
+ inline-size: 0.5rem;
2089
+ margin-block-start: 0.375rem;
2090
+ }
2091
+
2092
+ .eth-agent-safety-panel__check--pass .eth-agent-safety-panel__indicator {
2093
+ background: var(--eth-color-success);
2094
+ }
2095
+
2096
+ .eth-agent-safety-panel__check--warn .eth-agent-safety-panel__indicator {
2097
+ background: var(--eth-color-warning);
2098
+ }
2099
+
2100
+ .eth-agent-safety-panel__check--fail .eth-agent-safety-panel__indicator {
2101
+ background: var(--eth-color-danger);
2102
+ }
2103
+
2104
+ .eth-agent-safety-panel__check-content {
2105
+ min-inline-size: 0;
2106
+ }
2107
+
2108
+ .eth-agent-safety-panel__check-main {
2109
+ align-items: flex-start;
2110
+ display: flex;
2111
+ flex-wrap: wrap;
2112
+ gap: var(--eth-space-sm);
2113
+ justify-content: space-between;
2114
+ min-inline-size: 0;
2115
+ }
2116
+
2117
+ .eth-agent-safety-panel__check-main h3 {
2118
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2119
+ font-weight: 600;
2120
+ line-height: 1.2857;
2121
+ margin: 0;
2122
+ min-inline-size: 0;
2123
+ }
2124
+
2125
+ .eth-agent-safety-panel__check-main .cds--tag {
2126
+ flex: 0 0 auto;
2127
+ margin: 0;
2128
+ }
2129
+
2130
+ .eth-agent-safety-panel__check p {
2131
+ color: var(--eth-color-text-secondary);
2132
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2133
+ line-height: 1.4286;
2134
+ margin: var(--eth-space-xs) 0 0;
2135
+ }
2136
+
2137
+ .eth-agent-approval-gate {
2138
+ border-inline-start: 0;
2139
+ inline-size: min(100%, 56rem);
2140
+ }
2141
+
2142
+ .eth-agent-approval-gate__layout {
2143
+ display: grid;
2144
+ gap: var(--eth-space-lg);
2145
+ }
2146
+
2147
+ .eth-agent-approval-gate__summary {
2148
+ background: var(--eth-color-layer-02);
2149
+ border: 1px solid var(--eth-color-border-subtle);
2150
+ display: grid;
2151
+ grid-template-columns: repeat(3, minmax(0, 1fr));
2152
+ margin: 0;
2153
+ }
2154
+
2155
+ .eth-agent-approval-gate__summary > div {
2156
+ min-inline-size: 0;
2157
+ padding: var(--eth-space-md);
2158
+ }
2159
+
2160
+ .eth-agent-approval-gate__summary > div + div {
2161
+ border-inline-start: 1px solid var(--eth-color-border-subtle);
2162
+ }
2163
+
2164
+ .eth-agent-approval-gate__summary dt {
2165
+ color: var(--eth-color-text-secondary);
2166
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
2167
+ font-weight: 600;
2168
+ line-height: 1.3333;
2169
+ margin: 0 0 var(--eth-space-xs);
2170
+ }
2171
+
2172
+ .eth-agent-approval-gate__summary dd {
2173
+ color: var(--eth-color-text-primary);
2174
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2175
+ line-height: 1.2857;
2176
+ margin: 0;
2177
+ overflow-wrap: anywhere;
2178
+ }
2179
+
2180
+ .eth-agent-approval-gate__evidence {
2181
+ display: grid;
2182
+ gap: var(--eth-space-sm);
2183
+ }
2184
+
2185
+ .eth-agent-approval-gate__section-header {
2186
+ align-items: baseline;
2187
+ display: flex;
2188
+ gap: var(--eth-space-sm);
2189
+ justify-content: space-between;
2190
+ }
2191
+
2192
+ .eth-agent-approval-gate__section-header h3 {
2193
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2194
+ font-weight: 600;
2195
+ line-height: 1.2857;
2196
+ margin: 0;
2197
+ }
2198
+
2199
+ .eth-agent-approval-gate__section-header span {
2200
+ color: var(--eth-color-text-secondary);
2201
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
2202
+ line-height: 1.3333;
2203
+ }
2204
+
2205
+ .eth-agent-approval-gate__evidence-list {
2206
+ display: grid;
2207
+ gap: var(--eth-space-xs);
2208
+ }
2209
+
2210
+ .eth-agent-approval-gate__evidence-item {
2211
+ align-items: center;
2212
+ background: var(--eth-color-layer-02);
2213
+ border: 1px solid var(--eth-color-border-subtle);
2214
+ color: var(--eth-color-text-primary);
2215
+ display: grid;
2216
+ gap: var(--eth-space-sm);
2217
+ grid-template-columns: minmax(0, 1fr) auto auto;
2218
+ min-block-size: 2.5rem;
2219
+ padding: var(--eth-space-sm) var(--eth-space-md);
2220
+ text-decoration: none;
2221
+ }
2222
+
2223
+ .eth-agent-approval-gate__evidence-item--link:hover {
2224
+ background: var(--eth-color-layer-hover);
2225
+ border-color: var(--eth-color-border-strong);
2226
+ }
2227
+
2228
+ .eth-agent-approval-gate__evidence-item:focus-visible {
2229
+ outline: 2px solid var(--eth-color-focus);
2230
+ outline-offset: -2px;
2231
+ }
2232
+
2233
+ .eth-agent-approval-gate__evidence-copy {
2234
+ min-inline-size: 0;
2235
+ }
2236
+
2237
+ .eth-agent-approval-gate__evidence-label {
2238
+ display: block;
2239
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2240
+ font-weight: 600;
2241
+ line-height: 1.2857;
2242
+ overflow-wrap: anywhere;
2243
+ }
2244
+
2245
+ .eth-agent-approval-gate__evidence-description {
2246
+ color: var(--eth-color-text-secondary);
2247
+ display: block;
2248
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
2249
+ line-height: 1.3333;
2250
+ margin-block-start: var(--eth-space-2xs);
2251
+ }
2252
+
2253
+ .eth-agent-approval-gate__evidence-meta {
2254
+ color: var(--eth-color-text-secondary);
2255
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
2256
+ line-height: 1.3333;
2257
+ white-space: nowrap;
2258
+ }
2259
+
2260
+ .eth-agent-approval-gate__evidence-icon {
2261
+ color: var(--eth-color-text-secondary);
2262
+ }
2263
+
2264
+ .eth-agent-approval-gate__reason textarea {
2265
+ min-block-size: 5rem;
2266
+ }
2267
+
2268
+ .eth-agent-approval-gate__actions {
2269
+ display: flex;
2270
+ flex-wrap: wrap;
2271
+ gap: var(--eth-space-sm);
2272
+ }
2273
+
2274
+ @media (width <= 42rem) {
2275
+ .eth-agent-approval-gate__summary {
2276
+ grid-template-columns: 1fr;
2277
+ }
2278
+
2279
+ .eth-agent-approval-gate__summary > div + div {
2280
+ border-block-start: 1px solid var(--eth-color-border-subtle);
2281
+ border-inline-start: 0;
2282
+ }
2283
+
2284
+ .eth-agent-approval-gate__evidence-item {
2285
+ grid-template-columns: minmax(0, 1fr) auto;
2286
+ }
2287
+
2288
+ .eth-agent-approval-gate__evidence-meta {
2289
+ grid-column: 1 / -1;
2290
+ white-space: normal;
2291
+ }
2292
+ }
2293
+
2294
+ .eth-agent-interruption-panel {
2295
+ border-inline-start: 4px solid var(--eth-color-warning);
2296
+ inline-size: min(100%, 52rem);
2297
+ }
2298
+
2299
+ .eth-agent-interruption-panel .cds--inline-notification {
2300
+ inline-size: 100%;
2301
+ margin: 0;
2302
+ max-inline-size: none;
2303
+ }
2304
+
2305
+ .eth-agent-interruption-panel__body {
2306
+ display: grid;
2307
+ gap: var(--eth-space-md);
2308
+ }
2309
+
2310
+ .eth-agent-interruption-panel__prompt textarea,
2311
+ textarea.eth-agent-interruption-panel__prompt {
2312
+ min-block-size: 6rem;
2313
+ }
2314
+
2315
+ .eth-agent-interruption-panel__actions {
2316
+ align-items: center;
2317
+ display: flex;
2318
+ flex-wrap: wrap;
2319
+ gap: var(--eth-space-sm);
2320
+ }
2321
+
2322
+ .eth-agent-interruption-panel__actions .eth-button {
2323
+ min-inline-size: 11rem;
2324
+ }
2325
+
2326
+ .eth-agent-handoff-panel__body {
2327
+ display: grid;
2328
+ gap: var(--eth-space-lg);
2329
+ }
2330
+
2331
+ .eth-agent-handoff-panel__target-list {
2332
+ border: 1px solid var(--eth-color-border-subtle);
2333
+ display: grid;
2334
+ }
2335
+
2336
+ .eth-agent-handoff-panel__target {
2337
+ background: var(--eth-color-layer-01);
2338
+ border: 0;
2339
+ border-block-end: 1px solid var(--eth-color-border-subtle);
2340
+ color: var(--eth-color-text-primary);
2341
+ cursor: pointer;
2342
+ display: grid;
2343
+ font: inherit;
2344
+ min-block-size: 4.5rem;
2345
+ padding: var(--eth-space-md);
2346
+ text-align: start;
2347
+ transition:
2348
+ background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
2349
+ border-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
2350
+ }
2351
+
2352
+ .eth-agent-handoff-panel__target:last-child {
2353
+ border-block-end: 0;
2354
+ }
2355
+
2356
+ .eth-agent-handoff-panel__target:hover {
2357
+ background: var(--eth-color-layer-hover);
2358
+ }
2359
+
2360
+ .eth-agent-handoff-panel__target:disabled {
2361
+ color: var(--eth-color-text-secondary);
2362
+ cursor: not-allowed;
2363
+ }
2364
+
2365
+ .eth-agent-handoff-panel__target--selected {
2366
+ background: var(--eth-color-layer-selected);
2367
+ border-inline-start: 4px solid var(--eth-color-interactive-primary);
2368
+ padding-inline-start: calc(var(--eth-space-md) - 4px);
2369
+ }
2370
+
2371
+ .eth-agent-handoff-panel__target-main {
2372
+ align-items: flex-start;
2373
+ display: flex;
2374
+ gap: var(--eth-space-lg);
2375
+ justify-content: space-between;
2376
+ min-inline-size: 0;
2377
+ }
2378
+
2379
+ .eth-agent-handoff-panel__target-copy {
2380
+ display: grid;
2381
+ gap: var(--eth-space-xs);
2382
+ min-inline-size: 0;
2383
+ }
2384
+
2385
+ .eth-agent-handoff-panel__target-label {
2386
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2387
+ font-weight: 600;
2388
+ line-height: 1.2857;
2389
+ overflow-wrap: anywhere;
2390
+ }
2391
+
2392
+ .eth-agent-handoff-panel__target-description {
2393
+ color: var(--eth-color-text-secondary);
2394
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2395
+ line-height: 1.4286;
2396
+ overflow-wrap: anywhere;
2397
+ }
2398
+
2399
+ .eth-agent-handoff-panel__target-meta {
2400
+ align-items: center;
2401
+ display: flex;
2402
+ flex: 0 0 auto;
2403
+ flex-wrap: wrap;
2404
+ gap: var(--eth-space-xs);
2405
+ justify-content: flex-end;
2406
+ }
2407
+
2408
+ .eth-agent-handoff-panel__target-meta .cds--tag {
2409
+ margin: 0;
2410
+ }
2411
+
2412
+ .eth-agent-handoff-panel__reason {
2413
+ min-block-size: 6rem;
2414
+ }
2415
+
2416
+ .eth-agent-handoff-panel__actions {
2417
+ align-items: center;
2418
+ display: flex;
2419
+ gap: var(--eth-space-sm);
2420
+ }
2421
+
2422
+ .eth-agent-run-controls {
2423
+ --eth-agent-run-controls-accent: var(--eth-color-border-strong);
2424
+
2425
+ background: var(--eth-color-layer-01);
2426
+ border: 1px solid var(--eth-color-border-subtle);
2427
+ border-inline-start: 3px solid var(--eth-agent-run-controls-accent);
2428
+ color: var(--eth-color-text-primary);
2429
+ display: grid;
2430
+ gap: var(--eth-space-md);
2431
+ inline-size: 100%;
2432
+ max-inline-size: 48rem;
2433
+ padding: var(--eth-space-md);
2434
+ }
2435
+
2436
+ .eth-agent-run-controls[data-state="running"] {
2437
+ --eth-agent-run-controls-accent: var(--eth-color-info);
2438
+ }
2439
+
2440
+ .eth-agent-run-controls[data-state="paused"] {
2441
+ --eth-agent-run-controls-accent: var(--eth-color-warning);
2442
+ }
2443
+
2444
+ .eth-agent-run-controls[data-state="failed"] {
2445
+ --eth-agent-run-controls-accent: var(--eth-color-danger);
2446
+ }
2447
+
2448
+ .eth-agent-run-controls[data-state="completed"] {
2449
+ --eth-agent-run-controls-accent: var(--eth-color-success);
2450
+ }
2451
+
2452
+ .eth-agent-run-controls .cds--tag {
2453
+ margin: 0;
2454
+ }
2455
+
2456
+ .eth-agent-run-controls__summary {
2457
+ align-items: flex-start;
2458
+ display: grid;
2459
+ gap: var(--eth-space-sm);
2460
+ }
2461
+
2462
+ .eth-agent-run-controls__heading {
2463
+ align-items: center;
2464
+ display: flex;
2465
+ flex-wrap: wrap;
2466
+ gap: var(--eth-space-sm);
2467
+ min-inline-size: 0;
2468
+ }
2469
+
2470
+ .eth-agent-run-controls__state-dot {
2471
+ background: var(--eth-agent-run-controls-accent);
2472
+ block-size: 0.625rem;
2473
+ box-shadow:
2474
+ 0 0 0 1px var(--eth-color-layer-01),
2475
+ 0 0 0 2px var(--eth-agent-run-controls-accent);
2476
+ flex: 0 0 auto;
2477
+ inline-size: 0.625rem;
2478
+ }
2479
+
2480
+ .eth-agent-run-controls__title {
2481
+ color: var(--eth-color-text-primary);
2482
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2483
+ font-weight: 600;
2484
+ line-height: 1.2857;
2485
+ }
2486
+
2487
+ .eth-agent-run-controls__description {
2488
+ color: var(--eth-color-text-secondary);
2489
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2490
+ line-height: 1.4286;
2491
+ margin: 0;
2492
+ max-inline-size: 38rem;
2493
+ }
2494
+
2495
+ .eth-agent-run-controls__actions,
2496
+ .eth-agent-run-controls__interrupt-actions {
2497
+ align-items: center;
2498
+ display: flex;
2499
+ flex-wrap: wrap;
2500
+ gap: var(--eth-space-xs);
2501
+ }
2502
+
2503
+ .eth-agent-run-controls__actions .eth-button {
2504
+ min-inline-size: 5.5rem;
2505
+ }
2506
+
2507
+ .eth-agent-run-controls__actions .eth-button--danger {
2508
+ min-inline-size: 5rem;
2509
+ }
2510
+
2511
+ .eth-agent-run-controls__interrupt {
2512
+ background: var(--eth-color-layer-02);
2513
+ border: 1px solid var(--eth-color-border-subtle);
2514
+ border-inline-start: 4px solid var(--eth-color-warning);
2515
+ display: grid;
2516
+ gap: var(--eth-space-sm);
2517
+ padding: var(--eth-space-md);
2518
+ }
2519
+
2520
+ .eth-agent-run-controls__interrupt textarea {
2521
+ min-block-size: 5rem;
2522
+ }
2523
+
2524
+ .eth-agent-state-badge {
2525
+ --eth-agent-state-accent: var(--eth-color-text-secondary);
2526
+ --eth-agent-state-background: var(--eth-color-layer-01);
2527
+ --eth-agent-state-border: var(--eth-color-border-subtle);
2528
+ --eth-agent-state-color: var(--eth-color-text-primary);
2529
+
2530
+ align-items: center;
2531
+ background: var(--eth-agent-state-background);
2532
+ border: 1px solid var(--eth-agent-state-border);
2533
+ border-radius: 999px;
2534
+ color: var(--eth-agent-state-color);
2535
+ display: inline-flex;
2536
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
2537
+ font-weight: 400;
2538
+ gap: var(--eth-space-xs);
2539
+ line-height: 1.3333;
2540
+ max-inline-size: 100%;
2541
+ min-block-size: var(--eth-space-xl);
2542
+ padding: 0 var(--eth-space-sm);
2543
+ vertical-align: middle;
2544
+ white-space: nowrap;
2545
+ }
2546
+
2547
+ .eth-agent-state-badge--idle {
2548
+ --eth-agent-state-accent: var(--eth-color-text-secondary);
2549
+ --eth-agent-state-background: var(--eth-color-layer-01);
2550
+ --eth-agent-state-border: var(--eth-color-border-subtle);
2551
+ }
2552
+
2553
+ .eth-agent-state-badge--listening,
2554
+ .eth-agent-state-badge--thinking,
2555
+ .eth-agent-state-badge--tool-calling {
2556
+ --eth-agent-state-accent: var(--eth-color-info);
2557
+ --eth-agent-state-background: color-mix(
2558
+ in srgb,
2559
+ var(--eth-color-info) 12%,
2560
+ var(--eth-color-layer-01)
2561
+ );
2562
+ --eth-agent-state-border: color-mix(
2563
+ in srgb,
2564
+ var(--eth-color-info) 32%,
2565
+ var(--eth-color-border-subtle)
2566
+ );
2567
+ }
2568
+
2569
+ .eth-agent-state-badge--waiting-for-user,
2570
+ .eth-agent-state-badge--interrupted {
2571
+ --eth-agent-state-accent: var(--eth-color-warning);
2572
+ --eth-agent-state-background: color-mix(
2573
+ in srgb,
2574
+ var(--eth-color-warning) 22%,
2575
+ var(--eth-color-layer-01)
2576
+ );
2577
+ --eth-agent-state-border: color-mix(
2578
+ in srgb,
2579
+ var(--eth-color-warning) 46%,
2580
+ var(--eth-color-border-subtle)
2581
+ );
2582
+ }
2583
+
2584
+ .eth-agent-state-badge--failed {
2585
+ --eth-agent-state-accent: var(--eth-color-danger);
2586
+ --eth-agent-state-background: color-mix(
2587
+ in srgb,
2588
+ var(--eth-color-danger) 12%,
2589
+ var(--eth-color-layer-01)
2590
+ );
2591
+ --eth-agent-state-border: color-mix(
2592
+ in srgb,
2593
+ var(--eth-color-danger) 34%,
2594
+ var(--eth-color-border-subtle)
2595
+ );
2596
+ }
2597
+
2598
+ .eth-agent-state-badge--completed {
2599
+ --eth-agent-state-accent: var(--eth-color-success);
2600
+ --eth-agent-state-background: color-mix(
2601
+ in srgb,
2602
+ var(--eth-color-success) 14%,
2603
+ var(--eth-color-layer-01)
2604
+ );
2605
+ --eth-agent-state-border: color-mix(
2606
+ in srgb,
2607
+ var(--eth-color-success) 34%,
2608
+ var(--eth-color-border-subtle)
2609
+ );
2610
+ }
2611
+
2612
+ .eth-agent-state-badge__dot {
2613
+ background: var(--eth-agent-state-accent);
2614
+ block-size: var(--eth-space-sm);
2615
+ border-radius: 50%;
2616
+ box-shadow: inset 0 0 0 1px rgb(22 22 22 / 14%);
2617
+ flex: 0 0 auto;
2618
+ inline-size: var(--eth-space-sm);
2619
+ position: relative;
2620
+ }
2621
+
2622
+ .eth-agent-state-badge--active .eth-agent-state-badge__dot::after {
2623
+ animation: eth-agent-state-pulse 1.6s
2624
+ var(--eth-motion-easing) infinite;
2625
+ border: 1px solid var(--eth-agent-state-accent);
2626
+ border-radius: inherit;
2627
+ content: "";
2628
+ inset: -0.25rem;
2629
+ opacity: 0;
2630
+ position: absolute;
2631
+ }
2632
+
2633
+ .eth-agent-state-badge__label {
2634
+ min-inline-size: 0;
2635
+ overflow: hidden;
2636
+ text-overflow: ellipsis;
2637
+ }
2638
+
2639
+ @keyframes eth-agent-state-pulse {
2640
+ 0% {
2641
+ opacity: 0.56;
2642
+ transform: scale(0.72);
2643
+ }
2644
+
2645
+ 100% {
2646
+ opacity: 0;
2647
+ transform: scale(1.28);
2648
+ }
2649
+ }
2650
+
2651
+ @media (prefers-reduced-motion: reduce) {
2652
+ .eth-agent-state-badge--active .eth-agent-state-badge__dot::after {
2653
+ animation: none;
2654
+ opacity: 0;
2655
+ transform: none;
2656
+ }
2657
+ }
2658
+
2659
+ .eth-agent-generated-artifact-panel__layout {
2660
+ display: grid;
2661
+ gap: var(--eth-space-lg);
2662
+ grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
2663
+ }
2664
+
2665
+ .eth-agent-generated-artifact-panel__list {
2666
+ display: grid;
2667
+ gap: var(--eth-space-sm);
2668
+ }
2669
+
2670
+ .eth-agent-generated-artifact-panel__item {
2671
+ border-inline-start: 4px solid transparent !important;
2672
+ cursor: pointer;
2673
+ display: grid;
2674
+ gap: var(--eth-space-xs);
2675
+ inline-size: 100%;
2676
+ min-block-size: 5rem;
2677
+ text-align: start;
2678
+ }
2679
+
2680
+ .eth-agent-generated-artifact-panel__item--selected {
2681
+ background: var(--eth-color-layer-selected) !important;
2682
+ border-color: var(--eth-color-border-subtle) !important;
2683
+ border-inline-start-color: var(--eth-color-interactive-primary) !important;
2684
+ }
2685
+
2686
+ .eth-agent-generated-artifact-panel__item-topline {
2687
+ align-items: flex-start;
2688
+ display: flex;
2689
+ gap: var(--eth-space-sm);
2690
+ justify-content: space-between;
2691
+ min-inline-size: 0;
2692
+ }
2693
+
2694
+ .eth-agent-generated-artifact-panel__item-title {
2695
+ color: var(--eth-color-text-primary);
2696
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2697
+ font-weight: 600;
2698
+ line-height: 1.4286;
2699
+ min-inline-size: 0;
2700
+ overflow-wrap: anywhere;
2701
+ }
2702
+
2703
+ .eth-agent-generated-artifact-panel__kind {
2704
+ background: var(--eth-color-layer-02);
2705
+ border: 1px solid var(--eth-color-border-subtle);
2706
+ color: var(--eth-color-text-secondary);
2707
+ flex: 0 0 auto;
2708
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
2709
+ line-height: 1.3333;
2710
+ padding: var(--eth-space-2xs) var(--eth-space-xs);
2711
+ }
2712
+
2713
+ .eth-agent-generated-artifact-panel__item-meta,
2714
+ .eth-agent-generated-artifact-panel__item-status,
2715
+ .eth-agent-generated-artifact-panel__preview-meta,
2716
+ .eth-agent-generated-artifact-panel__empty-description {
2717
+ color: var(--eth-color-text-secondary);
2718
+ font-size: calc(0.75rem * var(--eth-text-scale, 1));
2719
+ line-height: 1.3333;
2720
+ }
2721
+
2722
+ .eth-agent-generated-artifact-panel__item-status {
2723
+ color: var(--eth-color-text-helper);
2724
+ }
2725
+
2726
+ .eth-agent-generated-artifact-panel__preview {
2727
+ display: grid;
2728
+ gap: var(--eth-space-md);
2729
+ grid-template-rows: auto minmax(0, 1fr);
2730
+ min-block-size: 17.5rem;
2731
+ overflow: hidden;
2732
+ }
2733
+
2734
+ .eth-agent-generated-artifact-panel__preview-header {
2735
+ align-items: flex-start;
2736
+ border-block-end: 1px solid var(--eth-color-border-subtle);
2737
+ display: flex;
2738
+ gap: var(--eth-space-md);
2739
+ justify-content: space-between;
2740
+ padding-block-end: var(--eth-space-md);
2741
+ }
2742
+
2743
+ .eth-agent-generated-artifact-panel__preview-heading {
2744
+ display: grid;
2745
+ gap: var(--eth-space-xs);
2746
+ min-inline-size: 0;
2747
+ }
2748
+
2749
+ .eth-agent-generated-artifact-panel__preview h3 {
2750
+ font-size: calc(1rem * var(--eth-text-scale, 1));
2751
+ font-weight: 400;
2752
+ line-height: 1.5;
2753
+ margin: 0;
2754
+ overflow-wrap: anywhere;
2755
+ }
2756
+
2757
+ .eth-agent-generated-artifact-panel__preview-meta {
2758
+ display: flex;
2759
+ flex-wrap: wrap;
2760
+ gap: var(--eth-space-sm);
2761
+ }
2762
+
2763
+ .eth-agent-generated-artifact-panel__preview-body {
2764
+ display: grid;
2765
+ min-block-size: 14rem;
2766
+ min-inline-size: 0;
2767
+ }
2768
+
2769
+ .eth-agent-generated-artifact-panel__preview img,
2770
+ .eth-agent-generated-artifact-panel__preview iframe {
2771
+ background: var(--eth-color-layer-02);
2772
+ border: 1px solid var(--eth-color-border-subtle);
2773
+ display: block;
2774
+ inline-size: 100%;
2775
+ }
2776
+
2777
+ .eth-agent-generated-artifact-panel__preview img {
2778
+ block-size: 100%;
2779
+ max-block-size: 26rem;
2780
+ object-fit: contain;
2781
+ }
2782
+
2783
+ .eth-agent-generated-artifact-panel__preview iframe {
2784
+ block-size: 26rem;
2785
+ }
2786
+
2787
+ .eth-agent-generated-artifact-panel__text-preview {
2788
+ background: var(--eth-color-layer-02);
2789
+ border: 1px solid var(--eth-color-border-subtle);
2790
+ color: var(--eth-color-text-primary);
2791
+ font-size: calc(0.875rem * var(--eth-text-scale, 1));
2792
+ line-height: 1.5;
2793
+ overflow: auto;
2794
+ padding: var(--eth-space-lg);
2795
+ white-space: pre-wrap;
2796
+ }
2797
+
2798
+ .eth-agent-generated-artifact-panel__preview pre {
2799
+ border: 1px solid var(--eth-color-border-subtle);
2800
+ font-size: calc(0.8125rem * var(--eth-text-scale, 1));
2801
+ line-height: 1.5385;
2802
+ margin: 0;
2803
+ max-block-size: 26rem;
2804
+ }
2805
+
2806
+ .eth-agent-generated-artifact-panel__empty-preview {
2807
+ align-content: center;
2808
+ background: var(--eth-color-layer-02);
2809
+ border: 1px solid var(--eth-color-border-subtle);
2810
+ display: grid;
2811
+ gap: var(--eth-space-xs);
2812
+ min-block-size: 14rem;
2813
+ padding: var(--eth-space-xl);
2814
+ text-align: center;
2815
+ }
2816
+
2817
+ .eth-agent-generated-artifact-panel__empty-title {
2818
+ font-size: calc(1rem * var(--eth-text-scale, 1));
2819
+ line-height: 1.5;
2820
+ margin: 0;
2821
+ }
2822
+
2823
+ .eth-agent-generated-artifact-panel__empty-description {
2824
+ margin: 0;
2825
+ }
2826
+
2827
+ @media (width <= 48rem) {
2828
+ .eth-agent-app-panel,
2829
+ .eth-agent-chat-rail,
2830
+ .eth-chat-rail,
2831
+ [data-eth-component="AppDomainAgentPanel"] {
2832
+ inline-size: 100%;
2833
+ }
2834
+
2835
+ .eth-trace__layout,
2836
+ .eth-agent-generated-artifact-panel__layout {
2837
+ grid-template-columns: 1fr;
2838
+ }
2839
+
2840
+ .eth-trace__summary {
2841
+ grid-template-columns: 1fr;
2842
+ }
2843
+
2844
+ .eth-trace__summary > div + div {
2845
+ border-block-start: 1px solid var(--eth-color-border-subtle);
2846
+ border-inline-start: 0;
2847
+ }
2848
+
2849
+ .eth-trace__axis {
2850
+ padding-inline-start: 0;
2851
+ }
2852
+
2853
+ .eth-agent-memory-panel__summary {
2854
+ grid-template-columns: 1fr;
2855
+ }
2856
+
2857
+ .eth-agent-plan-diff__summary,
2858
+ .eth-agent-plan-diff__comparison {
2859
+ grid-template-columns: 1fr;
2860
+ }
2861
+
2862
+ .eth-agent-memory-panel__summary-item + .eth-agent-memory-panel__summary-item {
2863
+ border-block-start: 1px solid var(--eth-color-border-subtle);
2864
+ border-inline-start: 0;
2865
+ }
2866
+
2867
+ .eth-agent-plan-diff__summary-item + .eth-agent-plan-diff__summary-item,
2868
+ .eth-agent-plan-diff__comparison .eth-agent-plan-diff__snapshot + .eth-agent-plan-diff__snapshot {
2869
+ border-block-start: 1px solid var(--eth-color-border-subtle);
2870
+ border-inline-start: 0;
2871
+ }
2872
+
2873
+ .eth-trace__row {
2874
+ grid-template-columns: 1fr;
2875
+ }
2876
+
2877
+ .eth-trace__track {
2878
+ margin-block: 0 var(--eth-space-md);
2879
+ }
2880
+
2881
+ .eth-trace__detail-grid {
2882
+ grid-template-columns: 1fr;
2883
+ }
2884
+
2885
+ .eth-trace__detail-grid > div:nth-child(2n) {
2886
+ border-inline-start: 0;
2887
+ }
2888
+
2889
+ .eth-trace__detail-grid > div:nth-child(n + 2) {
2890
+ border-block-start: 1px solid var(--eth-color-border-subtle);
2891
+ }
2892
+
2893
+ .eth-agent-handoff-panel__target-main {
2894
+ align-items: flex-start;
2895
+ flex-direction: column;
2896
+ gap: var(--eth-space-sm);
2897
+ }
2898
+
2899
+ .eth-agent-handoff-panel__target-meta {
2900
+ justify-content: flex-start;
2901
+ }
2902
+ }