deepline 0.2.41 → 0.2.43

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 (11) hide show
  1. package/dist/bundling-sources/sdk/src/release.ts +1 -1
  2. package/dist/bundling-sources/shared_libs/play-runtime/receipt-sql.ts +9 -6
  3. package/dist/bundling-sources/shared_libs/play-runtime/tool-http-errors.ts +3 -1
  4. package/dist/bundling-sources/shared_libs/play-runtime/work-receipt-state-machine.ts +10 -0
  5. package/dist/cli/index.js +3 -1
  6. package/dist/cli/index.mjs +3 -1
  7. package/dist/index.js +1 -1
  8. package/dist/index.mjs +1 -1
  9. package/dist/viewer/viewer.css +366 -88
  10. package/dist/viewer/viewer.js +404 -37
  11. package/package.json +1 -1
package/dist/viewer/viewer.css CHANGED
@@ -1,24 +1,46 @@
1
1
 
2
2
  :root {
3
- --bg: var(--background);
4
- --bg-secondary: var(--background-secondary);
5
- --bg-tertiary: var(--background-tertiary);
6
- --text: var(--foreground);
7
- --text-dim: var(--foreground-secondary);
8
- --text-dimmer: var(--foreground-muted);
9
- --green: var(--status-success-foreground);
10
- --red: var(--status-error-foreground);
11
- --yellow: var(--status-warning-foreground);
12
- --blue: var(--primary-text);
13
- --purple: var(--color-silver-400);
14
- --orange: var(--status-warning-foreground);
15
- --cyan: var(--status-info-foreground);
3
+ /*
4
+ * The app renderer prepends the canonical design tokens. SDK and legacy
5
+ * CLI renderers only embed this file, so every external token needs a
6
+ * standalone fallback as well.
7
+ */
8
+ --bg: var(--background, #151318);
9
+ --bg-secondary: var(--background-secondary, #201d23);
10
+ --bg-tertiary: var(--background-tertiary, #2d2634);
11
+ --text: var(--foreground, #fcfcfd);
12
+ --text-dim: var(--foreground-secondary, #e8e8ec);
13
+ --text-dimmer: var(--foreground-muted, #e0e0e9);
14
+ --green: var(--status-success-foreground, #81e4aa);
15
+ --red: var(--status-error-foreground, #e87d7d);
16
+ --yellow: var(--status-warning-foreground, #ffd966);
17
+ --blue: var(--primary-text, #9999ff);
18
+ --purple: var(--color-silver-400, #c2c0cc);
19
+ --orange: var(--status-warning-foreground, #ffd966);
20
+ --cyan: var(--status-info-foreground, #6ce8f9);
21
+ --viewer-border: var(--border, #494156);
22
+ --viewer-duration-normal: var(--duration-normal, 150ms);
23
+ --viewer-ease-standard: var(--ease-standard, cubic-bezier(0.16, 1, 0.3, 1));
24
+ --viewer-font-base: var(--font-base, system-ui, -apple-system, sans-serif);
25
+ --viewer-font-mono: var(--font-mono, 'SFMono-Regular', Menlo, Consolas, monospace);
26
+ --viewer-primary: var(--primary, #1919ff);
27
+ --viewer-radius-control: var(--radius-control, 0.625rem);
28
+ --viewer-radius-icon: var(--radius-icon, 0.1875rem);
29
+ --viewer-radius-lg: var(--radius-lg, 0.5rem);
30
+ --viewer-radius-md: var(--radius-md, 0.375rem);
31
+ --viewer-radius-sm: var(--radius-sm, 0.25rem);
32
+ --viewer-status-error-accent: var(--status-error-accent, #e05252);
33
+ --viewer-status-success-accent: var(--status-success-accent, #57db8e);
34
+ --viewer-status-warning-accent: var(--status-warning-accent, #ffcc33);
35
+ --viewer-silver-400: var(--color-silver-400, #c2c0cc);
36
+ --viewer-foreground-muted: var(--foreground-muted, #e0e0e9);
16
37
  }
17
38
  * { margin: 0; padding: 0; box-sizing: border-box; }
18
39
  body {
19
40
  background: var(--bg);
20
41
  color: var(--text);
21
42
  font-family: var(--font-base);
43
+ font-family: var(--viewer-font-base);
22
44
  font-size: 14px;
23
45
  line-height: 1.5;
24
46
  letter-spacing: -0.011em;
@@ -26,20 +48,26 @@ body {
26
48
  -moz-osx-font-smoothing: grayscale;
27
49
  text-rendering: optimizeLegibility;
28
50
  }
29
- .layout { display: flex; height: 100vh; }
51
+ .layout { display: flex; height: 100vh; min-width: 0; }
30
52
  .sidebar {
31
- width: 260px;
53
+ width: 220px;
32
54
  background: var(--bg-secondary);
33
- border-right: 1px solid var(--border);
55
+ border-right: 1px solid var(--viewer-border);
34
56
  overflow-y: auto;
35
57
  flex-shrink: 0;
36
58
  padding: 12px 0;
37
59
  }
38
60
  .sidebar-item {
61
+ display: block;
62
+ width: 100%;
63
+ background: transparent;
64
+ color: inherit;
65
+ font-family: inherit;
66
+ text-align: left;
39
67
  padding: 10px 16px;
40
68
  cursor: pointer;
41
69
  border-left: 3px solid transparent;
42
- transition: background-color var(--duration-normal) var(--ease-standard);
70
+ transition: background-color var(--viewer-duration-normal) var(--viewer-ease-standard);
43
71
  font-size: 13px;
44
72
  }
45
73
  .sidebar-item:hover { background: var(--bg-tertiary); }
@@ -48,26 +76,78 @@ body {
48
76
  border-left-color: var(--blue);
49
77
  }
50
78
  .sidebar-item .label { font-weight: 600; color: var(--text); }
51
- .sidebar-item .sub { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
79
+ .sidebar-item .label, .sidebar-item .sub { display: block; }
80
+ .sidebar-item .sub { color: var(--text-dim); font-size: 11px; margin-top: 3px; }
52
81
  .sidebar-compare {
53
- border-bottom: 1px solid var(--border);
82
+ border-bottom: 1px solid var(--viewer-border);
54
83
  margin-bottom: 4px;
55
84
  }
56
85
  .sidebar-compare .label { color: var(--cyan); }
57
86
  .sidebar-compare kbd {
58
87
  background: var(--bg-tertiary);
59
- border: 1px solid var(--border);
60
- border-radius: var(--radius-icon);
88
+ border: 1px solid var(--viewer-border);
89
+ border-radius: var(--viewer-radius-icon);
61
90
  padding: 0 4px;
62
91
  font-size: 10px;
63
92
  font-family: inherit;
64
93
  }
65
- .main { flex: 1; overflow-y: auto; padding: 24px 32px; max-width: 1100px; }
94
+ .run-sidebar {
95
+ width: 244px;
96
+ background: color-mix(in srgb, var(--bg-secondary) 72%, var(--bg));
97
+ border-right: 1px solid var(--viewer-border);
98
+ overflow-y: auto;
99
+ flex-shrink: 0;
100
+ padding: 12px 0;
101
+ }
102
+ .rail-heading {
103
+ display: flex;
104
+ align-items: center;
105
+ justify-content: space-between;
106
+ padding: 4px 14px 10px;
107
+ color: var(--text-dimmer);
108
+ font-size: 10px;
109
+ font-weight: 700;
110
+ letter-spacing: 0.09em;
111
+ text-transform: uppercase;
112
+ }
113
+ .rail-heading strong {
114
+ border: 1px solid var(--viewer-border);
115
+ border-radius: var(--viewer-radius-control);
116
+ color: var(--text-dim);
117
+ font-size: 10px;
118
+ padding: 0 6px;
119
+ }
120
+ .run-sidebar-item {
121
+ display: block;
122
+ width: 100%;
123
+ padding: 11px 14px;
124
+ border: 0;
125
+ border-left: 3px solid transparent;
126
+ background: transparent;
127
+ color: inherit;
128
+ cursor: pointer;
129
+ font-family: inherit;
130
+ text-align: left;
131
+ }
132
+ .run-sidebar-item:hover { background: var(--bg-tertiary); }
133
+ .run-sidebar-item.active {
134
+ background: var(--bg-tertiary);
135
+ border-left-color: var(--cyan);
136
+ }
137
+ .run-number, .run-meta, .run-skill { display: block; }
138
+ .run-number { color: var(--text); font-size: 13px; font-weight: 650; }
139
+ .run-meta { color: var(--text-dim); font-size: 11px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
140
+ .run-skill { color: var(--cyan); font-family: var(--viewer-font-mono); font-size: 10px; margin-top: 4px; }
141
+ .sidebar-item:focus-visible, .run-sidebar-item:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
142
+ outline: 2px solid var(--blue);
143
+ outline-offset: -2px;
144
+ }
145
+ .main { flex: 1; min-width: 0; overflow: auto; padding: 24px 32px; max-width: 1100px; }
66
146
  .main.full-width { max-width: none; }
67
147
  .header {
68
148
  background: var(--bg-secondary);
69
- border: 1px solid var(--border);
70
- border-radius: var(--radius-lg);
149
+ border: 1px solid var(--viewer-border);
150
+ border-radius: var(--viewer-radius-lg);
71
151
  padding: 20px 24px;
72
152
  margin-bottom: 20px;
73
153
  }
@@ -94,15 +174,15 @@ body {
94
174
  gap: 6px;
95
175
  margin-top: 12px;
96
176
  padding-top: 12px;
97
- border-top: 1px solid var(--border);
177
+ border-top: 1px solid var(--viewer-border);
98
178
  }
99
179
  .tb-item {
100
180
  display: inline-flex;
101
181
  align-items: center;
102
182
  gap: 4px;
103
183
  background: var(--bg);
104
- border: 1px solid var(--border);
105
- border-radius: var(--radius-sm);
184
+ border: 1px solid var(--viewer-border);
185
+ border-radius: var(--viewer-radius-sm);
106
186
  padding: 2px 8px;
107
187
  font-size: 12px;
108
188
  }
@@ -123,7 +203,7 @@ body {
123
203
  .gap-line {
124
204
  flex: 1;
125
205
  height: 1px;
126
- background: var(--border);
206
+ background: var(--viewer-border);
127
207
  }
128
208
  .gap-label {
129
209
  font-size: 10px;
@@ -153,7 +233,7 @@ body {
153
233
  line-height: 1.6;
154
234
  white-space: pre-wrap;
155
235
  word-break: break-word;
156
- background: color-mix(in srgb, var(--status-success-accent) 4%, transparent);
236
+ background: color-mix(in srgb, var(--viewer-status-success-accent) 4%, transparent);
157
237
  }
158
238
  .user-message.collapsed { max-height: 100px; overflow: hidden; position: relative; }
159
239
  .user-message.collapsed::after {
@@ -187,7 +267,7 @@ body {
187
267
  white-space: pre-wrap;
188
268
  word-break: break-word;
189
269
  font-style: italic;
190
- background: color-mix(in srgb, var(--color-silver-400) 3%, transparent);
270
+ background: color-mix(in srgb, var(--viewer-silver-400) 3%, transparent);
191
271
  }
192
272
  .thinking.collapsed { max-height: 100px; overflow: hidden; position: relative; }
193
273
  .thinking.collapsed::after {
@@ -201,7 +281,7 @@ body {
201
281
  /* Reasoning */
202
282
  .reasoning {
203
283
  padding: 12px 16px;
204
- border-left: 3px solid var(--border);
284
+ border-left: 3px solid var(--viewer-border);
205
285
  margin-left: 8px;
206
286
  color: var(--text-dim);
207
287
  font-size: 13px;
@@ -234,10 +314,10 @@ body {
234
314
  align-items: center;
235
315
  gap: 12px;
236
316
  padding: 6px 12px;
237
- border-radius: var(--radius-md);
317
+ border-radius: var(--viewer-radius-md);
238
318
  cursor: pointer;
239
- transition: background-color var(--duration-normal) var(--ease-standard);
240
- font-family: var(--font-mono);
319
+ transition: background-color var(--viewer-duration-normal) var(--viewer-ease-standard);
320
+ font-family: var(--viewer-font-mono);
241
321
  font-size: 13px;
242
322
  }
243
323
  .tool-row:hover { background: var(--bg-secondary); }
@@ -247,15 +327,15 @@ body {
247
327
  .tool-status {
248
328
  display: inline-block;
249
329
  padding: 1px 8px;
250
- border-radius: var(--radius-control);
330
+ border-radius: var(--viewer-radius-control);
251
331
  font-size: 11px;
252
332
  font-weight: 600;
253
333
  min-width: 42px;
254
334
  text-align: center;
255
335
  }
256
- .tool-status.ok { background: color-mix(in srgb, var(--status-success-accent) 15%, transparent); color: var(--green); }
257
- .tool-status.fail { background: color-mix(in srgb, var(--status-error-accent) 15%, transparent); color: var(--red); }
258
- .tool-status.unknown { background: color-mix(in srgb, var(--foreground-muted) 15%, transparent); color: var(--text-dim); }
336
+ .tool-status.ok { background: color-mix(in srgb, var(--viewer-status-success-accent) 15%, transparent); color: var(--green); }
337
+ .tool-status.fail { background: color-mix(in srgb, var(--viewer-status-error-accent) 15%, transparent); color: var(--red); }
338
+ .tool-status.unknown { background: color-mix(in srgb, var(--viewer-foreground-muted) 15%, transparent); color: var(--text-dim); }
259
339
  .tool-name {
260
340
  font-weight: 600;
261
341
  min-width: 70px;
@@ -276,23 +356,23 @@ body {
276
356
  font-size: 10px;
277
357
  color: var(--text-dimmer);
278
358
  background: var(--bg-tertiary);
279
- border: 1px solid var(--border);
280
- border-radius: var(--radius-sm);
359
+ border: 1px solid var(--viewer-border);
360
+ border-radius: var(--viewer-radius-sm);
281
361
  padding: 0 5px;
282
362
  white-space: nowrap;
283
363
  }
284
364
  .loop-badge {
285
365
  color: var(--yellow);
286
- border-color: color-mix(in srgb, var(--status-warning-accent) 40%, transparent);
287
- background: color-mix(in srgb, var(--status-warning-accent) 8%, transparent);
366
+ border-color: color-mix(in srgb, var(--viewer-status-warning-accent) 40%, transparent);
367
+ background: color-mix(in srgb, var(--viewer-status-warning-accent) 8%, transparent);
288
368
  }
289
369
  .repeat-badge {
290
370
  margin-left: 6px;
291
371
  font-size: 10px;
292
372
  color: var(--text-dimmer);
293
- background: color-mix(in srgb, var(--color-silver-400) 8%, transparent);
294
- border: 1px solid color-mix(in srgb, var(--color-silver-400) 30%, transparent);
295
- border-radius: var(--radius-sm);
373
+ background: color-mix(in srgb, var(--viewer-silver-400) 8%, transparent);
374
+ border: 1px solid color-mix(in srgb, var(--viewer-silver-400) 30%, transparent);
375
+ border-radius: var(--viewer-radius-sm);
296
376
  padding: 0 5px;
297
377
  white-space: nowrap;
298
378
  cursor: help;
@@ -321,14 +401,14 @@ body {
321
401
  display: none;
322
402
  margin-left: 48px;
323
403
  margin-bottom: 12px;
324
- border: 1px solid var(--border);
325
- border-radius: var(--radius-md);
404
+ border: 1px solid var(--viewer-border);
405
+ border-radius: var(--viewer-radius-md);
326
406
  overflow: hidden;
327
407
  }
328
408
  .tool-detail.open { display: block; }
329
409
  .tool-detail-section {
330
410
  padding: 12px 16px;
331
- border-bottom: 1px solid var(--border);
411
+ border-bottom: 1px solid var(--viewer-border);
332
412
  }
333
413
  .tool-detail-section:last-child { border-bottom: none; }
334
414
  .tool-detail-section .label {
@@ -340,12 +420,12 @@ body {
340
420
  }
341
421
  .tool-detail-section pre {
342
422
  background: var(--bg);
343
- border-radius: var(--radius-sm);
423
+ border-radius: var(--viewer-radius-sm);
344
424
  padding: 10px 14px;
345
425
  overflow-x: auto;
346
426
  font-size: 12px;
347
427
  line-height: 1.5;
348
- font-family: var(--font-mono);
428
+ font-family: var(--viewer-font-mono);
349
429
  white-space: pre-wrap;
350
430
  word-break: break-word;
351
431
  max-height: 400px;
@@ -354,13 +434,13 @@ body {
354
434
  }
355
435
  .tool-detail-section pre.error-content {
356
436
  border: 1px solid var(--red);
357
- background: color-mix(in srgb, var(--status-error-accent) 6%, transparent);
437
+ background: color-mix(in srgb, var(--viewer-status-error-accent) 6%, transparent);
358
438
  }
359
439
  .tool-detail-toggle {
360
440
  margin-top: 8px;
361
441
  background: var(--bg-tertiary);
362
- border: 1px solid var(--border);
363
- border-radius: var(--radius-sm);
442
+ border: 1px solid var(--viewer-border);
443
+ border-radius: var(--viewer-radius-sm);
364
444
  color: var(--blue);
365
445
  cursor: pointer;
366
446
  font-size: 12px;
@@ -371,8 +451,8 @@ body {
371
451
  /* Result card */
372
452
  .result-card {
373
453
  background: var(--bg-secondary);
374
- border: 1px solid var(--border);
375
- border-radius: var(--radius-lg);
454
+ border: 1px solid var(--viewer-border);
455
+ border-radius: var(--viewer-radius-lg);
376
456
  padding: 20px 24px;
377
457
  margin-top: 20px;
378
458
  }
@@ -394,8 +474,8 @@ body {
394
474
  .search-bar input {
395
475
  flex: 1;
396
476
  background: var(--bg-secondary);
397
- border: 1px solid var(--border);
398
- border-radius: var(--radius-md);
477
+ border: 1px solid var(--viewer-border);
478
+ border-radius: var(--viewer-radius-md);
399
479
  padding: 8px 12px;
400
480
  color: var(--text);
401
481
  font-size: 13px;
@@ -406,8 +486,8 @@ body {
406
486
  .search-bar input::placeholder { color: var(--text-dimmer); }
407
487
  .filter-btn {
408
488
  background: var(--bg-secondary);
409
- border: 1px solid var(--border);
410
- border-radius: var(--radius-md);
489
+ border: 1px solid var(--viewer-border);
490
+ border-radius: var(--viewer-radius-md);
411
491
  padding: 8px 12px;
412
492
  color: var(--text-dim);
413
493
  font-size: 12px;
@@ -419,8 +499,8 @@ body {
419
499
 
420
500
  .prompt-card {
421
501
  background: var(--bg-secondary);
422
- border: 1px solid var(--border);
423
- border-radius: var(--radius-lg);
502
+ border: 1px solid var(--viewer-border);
503
+ border-radius: var(--viewer-radius-lg);
424
504
  padding: 16px 20px;
425
505
  margin-bottom: 16px;
426
506
  }
@@ -443,11 +523,11 @@ body {
443
523
  font-size: 11px;
444
524
  font-weight: 600;
445
525
  padding: 2px 8px;
446
- border-radius: var(--radius-control);
526
+ border-radius: var(--viewer-radius-control);
447
527
  vertical-align: middle;
448
528
  }
449
- .timing-badge.exact { background: color-mix(in srgb, var(--status-success-accent) 15%, transparent); color: var(--green); }
450
- .timing-badge.estimated { background: color-mix(in srgb, var(--status-warning-accent) 15%, transparent); color: var(--yellow); }
529
+ .timing-badge.exact { background: color-mix(in srgb, var(--viewer-status-success-accent) 15%, transparent); color: var(--green); }
530
+ .timing-badge.estimated { background: color-mix(in srgb, var(--viewer-status-warning-accent) 15%, transparent); color: var(--yellow); }
451
531
 
452
532
  /* Live badge */
453
533
  .live-badge {
@@ -455,8 +535,8 @@ body {
455
535
  font-size: 11px;
456
536
  font-weight: 700;
457
537
  padding: 2px 10px;
458
- border-radius: var(--radius-control);
459
- background: color-mix(in srgb, var(--status-error-accent) 15%, transparent);
538
+ border-radius: var(--viewer-radius-control);
539
+ background: color-mix(in srgb, var(--viewer-status-error-accent) 15%, transparent);
460
540
  color: var(--red);
461
541
  animation: live-pulse 2s ease-in-out infinite;
462
542
  letter-spacing: 0.5px;
@@ -464,7 +544,7 @@ body {
464
544
  user-select: none;
465
545
  }
466
546
  .live-badge.paused {
467
- background: color-mix(in srgb, var(--foreground-muted) 15%, transparent);
547
+ background: color-mix(in srgb, var(--viewer-foreground-muted) 15%, transparent);
468
548
  color: var(--text-dim);
469
549
  animation: none;
470
550
  }
@@ -475,8 +555,8 @@ body {
475
555
 
476
556
  .download-btn {
477
557
  background: var(--bg-secondary);
478
- border: 1px solid var(--border);
479
- border-radius: var(--radius-md);
558
+ border: 1px solid var(--viewer-border);
559
+ border-radius: var(--viewer-radius-md);
480
560
  padding: 4px 10px;
481
561
  color: var(--text-dim);
482
562
  font-size: 12px;
@@ -489,8 +569,8 @@ body {
489
569
  /* File touch map */
490
570
  .file-map-card {
491
571
  background: var(--bg-secondary);
492
- border: 1px solid var(--border);
493
- border-radius: var(--radius-lg);
572
+ border: 1px solid var(--viewer-border);
573
+ border-radius: var(--viewer-radius-lg);
494
574
  margin-bottom: 16px;
495
575
  overflow: hidden;
496
576
  }
@@ -503,7 +583,7 @@ body {
503
583
  font-size: 13px;
504
584
  font-weight: 600;
505
585
  color: var(--text-dim);
506
- transition: background-color var(--duration-normal) var(--ease-standard);
586
+ transition: background-color var(--viewer-duration-normal) var(--viewer-ease-standard);
507
587
  }
508
588
  .file-map-header:hover { background: var(--bg-tertiary); }
509
589
  .file-map-toggle {
@@ -513,14 +593,14 @@ body {
513
593
  }
514
594
  .file-map-body {
515
595
  display: none;
516
- border-top: 1px solid var(--border);
596
+ border-top: 1px solid var(--viewer-border);
517
597
  }
518
598
  .file-map-body.open { display: block; }
519
599
  .file-map-table {
520
600
  width: 100%;
521
601
  border-collapse: collapse;
522
602
  font-size: 12px;
523
- font-family: var(--font-mono);
603
+ font-family: var(--viewer-font-mono);
524
604
  }
525
605
  .file-map-table th {
526
606
  background: var(--bg-tertiary);
@@ -531,21 +611,21 @@ body {
531
611
  letter-spacing: 0.5px;
532
612
  padding: 6px 12px;
533
613
  text-align: left;
534
- border-bottom: 1px solid var(--border);
614
+ border-bottom: 1px solid var(--viewer-border);
535
615
  }
536
616
  .file-map-table td {
537
617
  padding: 4px 12px;
538
- border-bottom: 1px solid var(--border);
618
+ border-bottom: 1px solid var(--viewer-border);
539
619
  color: var(--text-dim);
540
620
  }
541
621
  .file-map-table td:first-child { color: var(--text); }
542
- .file-map-table tr:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }
622
+ .file-map-table tr:hover { background: color-mix(in srgb, var(--viewer-primary) 4%, transparent); }
543
623
 
544
624
  /* Comparison view */
545
625
  .comparison-table-wrap {
546
626
  background: var(--bg-secondary);
547
- border: 1px solid var(--border);
548
- border-radius: var(--radius-lg);
627
+ border: 1px solid var(--viewer-border);
628
+ border-radius: var(--viewer-radius-lg);
549
629
  overflow: hidden;
550
630
  }
551
631
  .comparison-table {
@@ -560,13 +640,13 @@ body {
560
640
  font-size: 12px;
561
641
  padding: 10px 16px;
562
642
  text-align: left;
563
- border-bottom: 1px solid var(--border);
643
+ border-bottom: 1px solid var(--viewer-border);
564
644
  position: sticky;
565
645
  top: 0;
566
646
  }
567
647
  .comparison-table td {
568
648
  padding: 8px 16px;
569
- border-bottom: 1px solid var(--border);
649
+ border-bottom: 1px solid var(--viewer-border);
570
650
  color: var(--text);
571
651
  }
572
652
  .comparison-table td:first-child {
@@ -574,7 +654,7 @@ body {
574
654
  font-weight: 500;
575
655
  min-width: 140px;
576
656
  }
577
- .comparison-table tr:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }
657
+ .comparison-table tr:hover { background: color-mix(in srgb, var(--viewer-primary) 4%, transparent); }
578
658
  .compare-dim { color: var(--text-dimmer); font-size: 11px; }
579
659
  .compare-best { color: var(--green); font-weight: 600; }
580
660
  .compare-worst { color: var(--red); }
@@ -596,20 +676,20 @@ body {
596
676
  .md-rendered p { margin-bottom: 8px; }
597
677
  .md-rendered strong { color: var(--text); font-weight: 600; }
598
678
  .md-rendered code {
599
- background: var(--bg-tertiary); border-radius: var(--radius-icon); padding: 1px 5px;
600
- font-family: var(--font-mono); font-size: 12px;
679
+ background: var(--bg-tertiary); border-radius: var(--viewer-radius-icon); padding: 1px 5px;
680
+ font-family: var(--viewer-font-mono); font-size: 12px;
601
681
  }
602
682
  .md-rendered table {
603
683
  border-collapse: collapse; margin: 8px 0; width: 100%; font-size: 12px;
604
684
  }
605
685
  .md-rendered th, .md-rendered td {
606
- border: 1px solid var(--border); padding: 6px 10px; text-align: left;
686
+ border: 1px solid var(--viewer-border); padding: 6px 10px; text-align: left;
607
687
  }
608
688
  .md-rendered th {
609
689
  background: var(--bg-tertiary); color: var(--text-dim); font-weight: 600;
610
690
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px;
611
691
  }
612
- .md-rendered tr:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }
692
+ .md-rendered tr:hover { background: color-mix(in srgb, var(--viewer-primary) 4%, transparent); }
613
693
  .md-rendered a { color: var(--blue); text-decoration: none; }
614
694
  .md-rendered a:hover { text-decoration: underline; }
615
695
  .md-rendered h1, .md-rendered h2, .md-rendered h3 {
@@ -621,11 +701,209 @@ body {
621
701
  .md-rendered ul, .md-rendered ol { margin: 4px 0 8px 20px; }
622
702
  .md-rendered li { margin-bottom: 2px; }
623
703
  .md-rendered pre {
624
- background: var(--bg); border-radius: var(--radius-sm); padding: 10px 14px;
704
+ background: var(--bg); border-radius: var(--viewer-radius-sm); padding: 10px 14px;
625
705
  font-size: 12px; line-height: 1.5; overflow-x: auto;
626
- font-family: var(--font-mono);
706
+ font-family: var(--viewer-font-mono);
627
707
  margin: 8px 0;
628
708
  white-space: pre-wrap;
629
709
  word-break: break-word;
630
710
  }
631
711
  .md-rendered pre code { background: none; padding: 0; }
712
+
713
+ /* Eval workspace: filters, slicing, and per-run scorecards */
714
+ .workspace-controls {
715
+ position: sticky;
716
+ top: -24px;
717
+ z-index: 20;
718
+ display: grid;
719
+ grid-template-columns: minmax(180px, 1.2fr) minmax(170px, 1.2fr) repeat(4, minmax(120px, .75fr)) auto auto;
720
+ gap: 8px;
721
+ align-items: end;
722
+ margin: -24px -32px 18px;
723
+ padding: 14px 20px;
724
+ border-bottom: 1px solid var(--viewer-border);
725
+ background: color-mix(in srgb, var(--bg) 94%, transparent);
726
+ backdrop-filter: blur(14px);
727
+ }
728
+ .workspace-context { min-width: 0; padding-bottom: 6px; }
729
+ .workspace-context .eyebrow {
730
+ display: block;
731
+ color: var(--text-dimmer);
732
+ font-size: 10px;
733
+ font-weight: 700;
734
+ letter-spacing: .08em;
735
+ text-transform: uppercase;
736
+ }
737
+ .workspace-context strong {
738
+ display: block;
739
+ overflow: hidden;
740
+ color: var(--text);
741
+ font-size: 13px;
742
+ text-overflow: ellipsis;
743
+ white-space: nowrap;
744
+ }
745
+ .control-field span {
746
+ display: block;
747
+ margin: 0 0 4px 2px;
748
+ color: var(--text-dimmer);
749
+ font-size: 10px;
750
+ font-weight: 650;
751
+ letter-spacing: .04em;
752
+ text-transform: uppercase;
753
+ }
754
+ .control-field input, .control-field select {
755
+ width: 100%;
756
+ height: 34px;
757
+ border: 1px solid var(--viewer-border);
758
+ border-radius: var(--viewer-radius-md);
759
+ background: var(--bg-secondary);
760
+ color: var(--text);
761
+ font-family: inherit;
762
+ font-size: 12px;
763
+ padding: 0 9px;
764
+ }
765
+ .slice-control select { border-color: color-mix(in srgb, var(--blue) 65%, var(--viewer-border)); color: var(--blue); font-weight: 650; }
766
+ .apply-filter-btn, .reset-filter-btn {
767
+ height: 34px;
768
+ border-radius: var(--viewer-radius-md);
769
+ padding: 0 12px;
770
+ font-family: inherit;
771
+ font-size: 11px;
772
+ font-weight: 650;
773
+ cursor: pointer;
774
+ }
775
+ .apply-filter-btn { border: 1px solid var(--blue); background: var(--viewer-primary); color: #fff; }
776
+ .reset-filter-btn { border: 1px solid var(--viewer-border); background: var(--bg-secondary); color: var(--text-dim); }
777
+ .timeline-filter-bar {
778
+ display: flex;
779
+ gap: 8px;
780
+ max-width: 680px;
781
+ margin-bottom: 12px;
782
+ }
783
+ .timeline-filter-bar input {
784
+ flex: 1;
785
+ min-width: 180px;
786
+ border: 1px solid var(--viewer-border);
787
+ border-radius: var(--viewer-radius-md);
788
+ background: var(--bg-secondary);
789
+ color: var(--text);
790
+ font: inherit;
791
+ padding: 8px 11px;
792
+ }
793
+ .slice-summary { display: flex; gap: 14px; margin-bottom: 12px; color: var(--text-dimmer); font-size: 11px; }
794
+ .slice-summary span + span::before { content: '/'; margin-right: 14px; color: var(--viewer-border); }
795
+ .slice-grid {
796
+ display: grid;
797
+ grid-template-columns: repeat(var(--lane-count, 1), minmax(460px, 1fr));
798
+ gap: 12px;
799
+ align-items: start;
800
+ width: max(100%, var(--slice-min-width, 100%));
801
+ padding-bottom: 24px;
802
+ }
803
+ .transcript-lane {
804
+ min-width: 0;
805
+ border: 1px solid var(--viewer-border);
806
+ border-radius: var(--viewer-radius-lg);
807
+ background: color-mix(in srgb, var(--bg-secondary) 38%, var(--bg));
808
+ overflow: clip;
809
+ }
810
+ .transcript-lane-heading {
811
+ position: sticky;
812
+ top: 76px;
813
+ z-index: 10;
814
+ display: flex;
815
+ align-items: center;
816
+ justify-content: space-between;
817
+ min-height: 42px;
818
+ padding: 9px 13px;
819
+ border-bottom: 1px solid var(--viewer-border);
820
+ background: var(--bg-tertiary);
821
+ color: var(--text);
822
+ font-size: 13px;
823
+ font-weight: 700;
824
+ }
825
+ .transcript-lane-heading strong {
826
+ border-radius: var(--viewer-radius-control);
827
+ background: var(--bg);
828
+ color: var(--text-dim);
829
+ font-size: 10px;
830
+ padding: 1px 7px;
831
+ }
832
+ .lane-session + .lane-session { border-top: 8px solid var(--bg); }
833
+ .lane-session-header { padding: 14px; border-bottom: 1px solid var(--viewer-border); background: var(--bg-secondary); }
834
+ .lane-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
835
+ .lane-title-row h3 { margin-top: 2px; font-size: 14px; font-weight: 650; }
836
+ .run-kicker { color: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
837
+ .dimension-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 12px; }
838
+ .dimension-chips span {
839
+ border: 1px solid var(--viewer-border);
840
+ border-radius: var(--viewer-radius-control);
841
+ background: var(--bg);
842
+ color: var(--text-dim);
843
+ font-family: var(--viewer-font-mono);
844
+ font-size: 10px;
845
+ padding: 2px 7px;
846
+ }
847
+ .dimension-chips .chip-error { border-color: color-mix(in srgb, var(--red) 45%, var(--viewer-border)); color: var(--red); }
848
+ .expectations-mini, .expectations-empty {
849
+ overflow: hidden;
850
+ border: 1px solid var(--viewer-border);
851
+ border-radius: var(--viewer-radius-md);
852
+ background: var(--bg);
853
+ }
854
+ .header .expectations-mini, .header .expectations-empty { margin-top: 14px; }
855
+ .expectations-mini.all-passed { border-color: color-mix(in srgb, var(--green) 40%, var(--viewer-border)); }
856
+ .expectations-mini.has-failures { border-color: color-mix(in srgb, var(--red) 50%, var(--viewer-border)); }
857
+ .expectations-mini-heading, .expectations-empty {
858
+ display: flex;
859
+ align-items: center;
860
+ justify-content: space-between;
861
+ gap: 12px;
862
+ padding: 7px 9px;
863
+ color: var(--text-dim);
864
+ font-size: 10px;
865
+ font-weight: 650;
866
+ letter-spacing: .04em;
867
+ text-transform: uppercase;
868
+ }
869
+ .expectations-mini-heading strong { color: var(--text); }
870
+ .expectations-mini.all-passed .expectations-mini-heading strong { color: var(--green); }
871
+ .expectations-mini.has-failures .expectations-mini-heading strong { color: var(--red); }
872
+ .expectations-empty strong { color: var(--text-dimmer); font-weight: 500; }
873
+ .expectations-table-wrap { max-height: 180px; overflow: auto; border-top: 1px solid var(--viewer-border); }
874
+ .expectations-mini table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 10px; }
875
+ .expectations-mini th, .expectations-mini td { padding: 5px 7px; border-bottom: 1px solid color-mix(in srgb, var(--viewer-border) 65%, transparent); text-align: left; vertical-align: top; }
876
+ .expectations-mini th { color: var(--text-dimmer); font-size: 9px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
877
+ .expectations-mini th:first-child, .expectations-mini td:first-child { width: 58%; }
878
+ .expectations-mini th:nth-child(2), .expectations-mini td:nth-child(2) { width: 25%; color: var(--text-dim); }
879
+ .expectations-mini th:last-child, .expectations-mini td:last-child { width: 17%; }
880
+ .expectation-result { font-size: 9px; font-weight: 750; letter-spacing: .04em; }
881
+ .expectation-result.pass { color: var(--green); }
882
+ .expectation-result.fail { color: var(--red); }
883
+ .expectation-result.unknown { color: var(--yellow); }
884
+ .lane-prompt, .lane-result { border-bottom: 1px solid var(--viewer-border); }
885
+ .lane-prompt summary, .lane-result summary { cursor: pointer; padding: 8px 13px; color: var(--text-dim); font-size: 11px; font-weight: 650; }
886
+ .lane-prompt .prompt-text, .lane-result .md-rendered { padding: 0 13px 12px; font-size: 12px; }
887
+ .lane-timeline { padding: 10px 7px 16px; }
888
+ .lane-timeline .tool-row { gap: 8px; padding-left: 5px; padding-right: 5px; font-size: 11px; }
889
+ .lane-timeline .tool-name { min-width: 58px; }
890
+ .lane-timeline .tool-detail { margin-left: 18px; margin-right: 4px; }
891
+ .empty-workspace { display: flex; flex-direction: column; gap: 4px; padding: 48px; border: 1px dashed var(--viewer-border); border-radius: var(--viewer-radius-lg); color: var(--text-dim); text-align: center; }
892
+ .transcript-unavailable { margin: 12px; padding: 10px 12px; border: 1px dashed var(--viewer-border); border-radius: var(--viewer-radius-md); color: var(--text-dim); font-size: 12px; }
893
+
894
+ @media (max-width: 1250px) {
895
+ .sidebar { width: 190px; }
896
+ .run-sidebar { width: 210px; }
897
+ .workspace-controls { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
898
+ .workspace-context, .control-search { grid-column: span 2; }
899
+ }
900
+
901
+ @media (max-width: 820px) {
902
+ .layout { flex-wrap: wrap; height: auto; min-height: 100vh; }
903
+ .sidebar, .run-sidebar { width: 50%; height: 190px; border-bottom: 1px solid var(--viewer-border); }
904
+ .main { width: 100%; min-height: calc(100vh - 190px); padding: 18px; }
905
+ .workspace-controls { position: static; grid-template-columns: 1fr 1fr; margin: -18px -18px 16px; }
906
+ .workspace-context, .control-search { grid-column: span 2; }
907
+ .slice-grid { grid-auto-columns: minmax(360px, calc(100vw - 36px)); }
908
+ .transcript-lane-heading { top: 0; }
909
+ }