pi-studio 0.5.59 → 0.6.1

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 (8) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/README.md +3 -1
  3. package/client/studio-client.js +260 -25
  4. package/client/studio.css +306 -137
  5. package/index.ts +382 -79
  6. package/package.json +8 -2
  7. package/themes/pi-studio-dark.json +78 -0
  8. package/themes/pi-studio-light.json +77 -0
package/client/studio.css CHANGED
@@ -2,19 +2,24 @@
2
2
  html, body {
3
3
  margin: 0;
4
4
  height: 100%;
5
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
5
+ font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
6
6
  background: var(--bg);
7
7
  color: var(--text);
8
8
  }
9
9
 
10
10
  body {
11
+ --studio-editor-font-size: 13px;
12
+ --studio-editor-line-number-font-size: 12px;
13
+ --studio-response-font-size: 15px;
14
+ --studio-response-raw-font-size: 13px;
15
+ --studio-working-font-size: 13px;
11
16
  display: flex;
12
17
  flex-direction: column;
13
18
  min-height: 100%;
14
19
  }
15
20
 
16
21
  body > header {
17
- border-bottom: 1px solid var(--border-muted);
22
+ border-bottom: 1px solid var(--panel-border);
18
23
  padding: 12px 16px;
19
24
  background: var(--panel);
20
25
  display: flex;
@@ -55,7 +60,7 @@
55
60
  }
56
61
 
57
62
  button, select, .file-label {
58
- border: 1px solid var(--border-muted);
63
+ border: 1px solid var(--control-border);
59
64
  background: var(--panel);
60
65
  color: var(--text);
61
66
  border-radius: 8px;
@@ -149,7 +154,7 @@
149
154
  }
150
155
 
151
156
  section {
152
- border: 1px solid var(--border-muted);
157
+ border: 1px solid var(--panel-border);
153
158
  border-radius: 10px;
154
159
  background: var(--panel);
155
160
  min-height: 0;
@@ -160,7 +165,7 @@
160
165
  }
161
166
 
162
167
  section.pane-active {
163
- border-color: var(--border);
168
+ border-color: var(--pane-active-border);
164
169
  }
165
170
 
166
171
  body.pane-focus-left main,
@@ -175,12 +180,12 @@
175
180
 
176
181
  body.pane-focus-left #leftPane,
177
182
  body.pane-focus-right #rightPane {
178
- border-color: var(--border);
183
+ border-color: var(--pane-active-border);
179
184
  }
180
185
 
181
186
  .section-header {
182
187
  padding: 10px 12px;
183
- border-bottom: 1px solid var(--border-muted);
188
+ border-bottom: 1px solid var(--panel-border);
184
189
  background: var(--panel-2);
185
190
  font-weight: 600;
186
191
  font-size: 14px;
@@ -275,7 +280,8 @@
275
280
  body[data-studio-mode="editor-only"] #copyResponseBtn,
276
281
  body[data-studio-mode="editor-only"] #compactBtn,
277
282
  body[data-studio-mode="editor-only"] .reference-meta,
278
- body[data-studio-mode="editor-only"] #responseActions {
283
+ body[data-studio-mode="editor-only"] #responseActions .history-row,
284
+ body[data-studio-mode="editor-only"] #responseActions .response-result-row {
279
285
  display: none !important;
280
286
  }
281
287
 
@@ -293,13 +299,13 @@
293
299
 
294
300
  .reference-meta {
295
301
  padding: 8px 10px;
296
- border-bottom: 1px solid var(--border-muted);
297
- background: var(--panel-2);
302
+ border-bottom: 1px solid var(--panel-border);
303
+ background: var(--reference-meta-bg, var(--panel-2));
298
304
  }
299
305
 
300
306
  textarea {
301
307
  width: 100%;
302
- border: 1px solid var(--border-muted);
308
+ border: 1px solid var(--control-border);
303
309
  border-radius: 8px;
304
310
  background: var(--panel);
305
311
  color: var(--text);
@@ -313,7 +319,7 @@
313
319
 
314
320
  .source-wrap {
315
321
  padding: 10px;
316
- border-bottom: 1px solid var(--border-muted);
322
+ border-bottom: 1px solid var(--panel-border);
317
323
  display: flex;
318
324
  flex-direction: column;
319
325
  gap: 8px;
@@ -344,7 +350,7 @@
344
350
  min-width: 280px;
345
351
  min-height: 0;
346
352
  display: flex;
347
- border: 1px solid var(--border);
353
+ border: 1px solid var(--panel-border);
348
354
  border-radius: 10px;
349
355
  background: var(--panel);
350
356
  box-shadow: var(--panel-shadow);
@@ -385,7 +391,7 @@
385
391
  }
386
392
 
387
393
  .source-badge {
388
- border: 1px solid var(--border-muted);
394
+ border: 1px solid var(--control-border);
389
395
  background: var(--panel);
390
396
  border-radius: 999px;
391
397
  padding: 4px 10px;
@@ -394,6 +400,15 @@
394
400
  white-space: nowrap;
395
401
  }
396
402
 
403
+ .reference-meta .source-badge {
404
+ background: var(--reference-badge-bg, var(--panel));
405
+ }
406
+
407
+ body.studio-ui-refresh #rightPane .reference-meta .source-badge {
408
+ border-color: var(--border-subtle);
409
+ color: color-mix(in srgb, var(--text) 58%, var(--muted));
410
+ }
411
+
397
412
  .source-badge-button {
398
413
  cursor: pointer;
399
414
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
@@ -413,7 +428,7 @@
413
428
  }
414
429
 
415
430
  .sync-badge.sync {
416
- border-color: var(--border-muted);
431
+ border-color: var(--control-border);
417
432
  color: var(--muted);
418
433
  opacity: 0.88;
419
434
  }
@@ -443,7 +458,7 @@
443
458
  .resource-dir-btn {
444
459
  padding: 4px 10px;
445
460
  font-size: 12px;
446
- border: 1px solid var(--border-muted);
461
+ border: 1px solid var(--control-border);
447
462
  border-radius: 999px;
448
463
  background: var(--card);
449
464
  color: var(--fg-muted);
@@ -478,7 +493,7 @@
478
493
  width: 260px;
479
494
  padding: 2px 6px;
480
495
  font-size: 11px;
481
- border: 1px solid var(--border-muted);
496
+ border: 1px solid var(--control-border);
482
497
  border-radius: 4px;
483
498
  background: var(--editor-bg);
484
499
  color: var(--fg);
@@ -498,7 +513,7 @@
498
513
  flex: 1 1 auto;
499
514
  min-height: 0;
500
515
  max-height: none;
501
- border: 1px solid var(--border-muted);
516
+ border: 1px solid var(--panel-border);
502
517
  border-radius: 8px;
503
518
  background: var(--editor-bg);
504
519
  overflow: hidden;
@@ -510,13 +525,13 @@
510
525
  position: absolute;
511
526
  inset: 0 auto 0 0;
512
527
  overflow: hidden;
513
- background: var(--panel-2);
528
+ background: var(--editor-gutter-bg, var(--panel-2));
514
529
  z-index: 0;
515
530
  }
516
531
 
517
532
  .editor-review-note-gutter {
518
533
  width: var(--editor-review-note-gutter-width);
519
- border-right: 1px solid var(--border-muted);
534
+ border-right: 1px solid var(--panel-border);
520
535
  z-index: 2;
521
536
  }
522
537
 
@@ -567,8 +582,8 @@
567
582
  .editor-line-number-gutter {
568
583
  left: var(--editor-review-note-gutter-width);
569
584
  width: var(--editor-line-number-gutter-width);
570
- border-right: 1px solid var(--border-muted);
571
- color: var(--muted);
585
+ border-right: 1px solid var(--panel-border);
586
+ color: color-mix(in srgb, var(--text) 50%, var(--muted));
572
587
  pointer-events: none;
573
588
  }
574
589
 
@@ -577,7 +592,7 @@
577
592
  padding: 10px 8px 10px 0;
578
593
  text-align: right;
579
594
  font-family: var(--font-mono);
580
- font-size: 12px;
595
+ font-size: var(--studio-editor-line-number-font-size);
581
596
  line-height: 1.45;
582
597
  font-variant-numeric: tabular-nums;
583
598
  white-space: nowrap;
@@ -599,7 +614,7 @@
599
614
  word-break: normal;
600
615
  overflow-wrap: break-word;
601
616
  font-family: var(--font-mono);
602
- font-size: 13px;
617
+ font-size: var(--studio-editor-font-size);
603
618
  line-height: 1.45;
604
619
  tab-size: 2;
605
620
  z-index: -1;
@@ -625,7 +640,7 @@
625
640
  overscroll-behavior: none;
626
641
  scrollbar-width: none;
627
642
  font-family: var(--font-mono);
628
- font-size: 13px;
643
+ font-size: var(--studio-editor-font-size);
629
644
  line-height: 1.45;
630
645
  tab-size: 2;
631
646
  color: var(--text);
@@ -651,6 +666,8 @@
651
666
  outline: none;
652
667
  overscroll-behavior: none;
653
668
  padding: 10px 10px 10px calc(10px + var(--editor-review-note-gutter-width) + var(--editor-line-number-gutter-width));
669
+ font-size: var(--studio-editor-font-size);
670
+ line-height: 1.45;
654
671
  }
655
672
 
656
673
  #sourceText.highlight-active {
@@ -685,7 +702,7 @@
685
702
  background: var(--accent-soft);
686
703
  border-color: var(--accent);
687
704
  color: var(--accent);
688
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
705
+ box-shadow: 0 1px 2px var(--shadow-color);
689
706
  }
690
707
 
691
708
  .editor-selection-action-btn:hover,
@@ -758,14 +775,14 @@
758
775
 
759
776
  .hl-diff-add {
760
777
  color: var(--ok);
761
- background: rgba(46, 160, 67, 0.12);
778
+ background: var(--diff-added-bg);
762
779
  display: inline-block;
763
780
  width: 100%;
764
781
  }
765
782
 
766
783
  .hl-diff-del {
767
784
  color: var(--error);
768
- background: rgba(248, 81, 73, 0.12);
785
+ background: var(--diff-removed-bg);
769
786
  display: inline-block;
770
787
  width: 100%;
771
788
  }
@@ -818,7 +835,7 @@
818
835
  .annotation-preview-marker code {
819
836
  font-family: var(--mono-font, ui-monospace, SFMono-Regular, Menlo, monospace);
820
837
  font-size: 0.95em;
821
- background: rgba(0, 0, 0, 0.08);
838
+ background: var(--inline-code-bg);
822
839
  border-radius: 3px;
823
840
  padding: 0 0.2em;
824
841
  }
@@ -827,7 +844,7 @@
827
844
  flex: 1 1 auto;
828
845
  min-height: 0;
829
846
  max-height: none;
830
- border: 1px solid var(--border-muted);
847
+ border: 1px solid var(--panel-border);
831
848
  border-radius: 8px;
832
849
  background: var(--panel);
833
850
  }
@@ -844,6 +861,7 @@
844
861
  .rendered-markdown {
845
862
  overflow-wrap: anywhere;
846
863
  line-height: 1.58;
864
+ font-family: var(--font-prose, var(--font-ui));
847
865
  font-size: 15px;
848
866
  }
849
867
 
@@ -965,7 +983,7 @@
965
983
  background: var(--accent-soft);
966
984
  border-color: var(--accent);
967
985
  color: var(--accent);
968
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
986
+ box-shadow: 0 1px 2px var(--shadow-color);
969
987
  pointer-events: auto;
970
988
  }
971
989
 
@@ -1026,7 +1044,7 @@
1026
1044
  .rendered-markdown .callout-caution {
1027
1045
  margin: 1.15em 0;
1028
1046
  padding: 0.8em 1rem 0.95em;
1029
- border: 1px solid var(--border-muted);
1047
+ border: 1px solid var(--panel-border);
1030
1048
  border-left-width: 4px;
1031
1049
  border-radius: 10px;
1032
1050
  background: var(--panel-2);
@@ -1144,7 +1162,7 @@
1144
1162
  z-index: 4;
1145
1163
  padding: 3px 8px;
1146
1164
  border-radius: 999px;
1147
- border: 1px solid var(--border-muted);
1165
+ border: 1px solid var(--control-border);
1148
1166
  background: var(--panel);
1149
1167
  color: var(--muted);
1150
1168
  font-family: var(--font-ui);
@@ -1152,7 +1170,7 @@
1152
1170
  font-weight: 700;
1153
1171
  line-height: 1.4;
1154
1172
  opacity: 0.25;
1155
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
1173
+ box-shadow: 0 2px 8px var(--shadow-color);
1156
1174
  cursor: pointer;
1157
1175
  pointer-events: auto;
1158
1176
  user-select: none;
@@ -1171,7 +1189,7 @@
1171
1189
  }
1172
1190
 
1173
1191
  .rendered-markdown :not(pre) > code {
1174
- background: rgba(127, 127, 127, 0.13);
1192
+ background: var(--inline-code-bg);
1175
1193
  border: 1px solid var(--md-codeblock-border);
1176
1194
  border-radius: 6px;
1177
1195
  padding: 0.12em 0.35em;
@@ -1235,11 +1253,11 @@
1235
1253
  /* Diff-specific overrides for pandoc code blocks */
1236
1254
  .rendered-markdown pre.sourceCode.diff code > span:has(> .va) {
1237
1255
  color: var(--ok);
1238
- background: rgba(46, 160, 67, 0.12);
1256
+ background: var(--diff-added-bg);
1239
1257
  }
1240
1258
  .rendered-markdown pre.sourceCode.diff code > span:has(> .st) {
1241
1259
  color: var(--error);
1242
- background: rgba(248, 81, 73, 0.12);
1260
+ background: var(--diff-removed-bg);
1243
1261
  }
1244
1262
  .rendered-markdown pre.sourceCode.diff code > span:has(> .dt) {
1245
1263
  color: var(--syntax-function);
@@ -1264,7 +1282,7 @@
1264
1282
 
1265
1283
  .rendered-markdown th,
1266
1284
  .rendered-markdown td {
1267
- border: 1px solid var(--border-muted);
1285
+ border: 1px solid var(--md-table-border);
1268
1286
  padding: 6px 12px;
1269
1287
  }
1270
1288
 
@@ -1415,8 +1433,8 @@
1415
1433
 
1416
1434
  .rendered-markdown .studio-algorithm-block > figcaption {
1417
1435
  padding: 0.8em 1em 0.65em;
1418
- border-bottom: 1px solid var(--border-muted);
1419
- background: rgba(127, 127, 127, 0.06);
1436
+ border-bottom: 1px solid var(--panel-border);
1437
+ background: var(--inline-code-bg);
1420
1438
  text-align: left;
1421
1439
  }
1422
1440
 
@@ -1540,6 +1558,15 @@
1540
1558
  line-height: 1.5;
1541
1559
  }
1542
1560
 
1561
+ #rightPane .rendered-markdown {
1562
+ font-size: var(--studio-response-font-size);
1563
+ }
1564
+
1565
+ #rightPane .plain-markdown,
1566
+ #rightPane .response-markdown-highlight {
1567
+ font-size: var(--studio-response-raw-font-size);
1568
+ }
1569
+
1543
1570
  .preview-loading {
1544
1571
  color: var(--muted);
1545
1572
  font-style: italic;
@@ -1606,7 +1633,7 @@
1606
1633
  }
1607
1634
 
1608
1635
  .response-wrap {
1609
- border-top: 1px solid var(--border-muted);
1636
+ border-top: 1px solid var(--panel-border);
1610
1637
  padding: 10px;
1611
1638
  display: flex;
1612
1639
  flex-direction: column;
@@ -1702,7 +1729,7 @@
1702
1729
  font-size: 11px;
1703
1730
  font-weight: 600;
1704
1731
  letter-spacing: 0.01em;
1705
- border: 1px solid var(--border);
1732
+ border: 1px solid var(--control-border);
1706
1733
  background: transparent;
1707
1734
  color: var(--muted);
1708
1735
  }
@@ -1734,13 +1761,13 @@
1734
1761
  .trace-entry-status.trace-entry-status-complete {
1735
1762
  color: var(--ok);
1736
1763
  border-color: var(--ok-border);
1737
- background: rgba(115, 209, 61, 0.08);
1764
+ background: var(--ok-soft);
1738
1765
  }
1739
1766
 
1740
1767
  .trace-entry-status.trace-entry-status-error {
1741
1768
  color: var(--error);
1742
1769
  border-color: var(--error);
1743
- background: rgba(255, 107, 107, 0.08);
1770
+ background: var(--error-soft);
1744
1771
  }
1745
1772
 
1746
1773
  .trace-summary-meta,
@@ -1760,10 +1787,10 @@
1760
1787
  flex-direction: column;
1761
1788
  gap: 8px;
1762
1789
  padding: 10px 12px;
1763
- border: 1px solid var(--border-muted);
1790
+ border: 1px solid var(--panel-border);
1764
1791
  border-radius: 10px;
1765
1792
  background: var(--panel-2);
1766
- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
1793
+ box-shadow: 0 1px 0 var(--border-subtle);
1767
1794
  }
1768
1795
 
1769
1796
  .trace-card-header {
@@ -1798,11 +1825,12 @@
1798
1825
  .trace-output {
1799
1826
  padding: 10px 11px;
1800
1827
  border-radius: 8px;
1801
- border: 1px solid var(--border-muted);
1828
+ border: 1px solid var(--panel-border);
1802
1829
  background: var(--panel);
1803
1830
  overflow-x: auto;
1804
1831
  white-space: pre-wrap;
1805
1832
  overflow-wrap: anywhere;
1833
+ font-size: var(--studio-working-font-size);
1806
1834
  }
1807
1835
 
1808
1836
  .trace-empty,
@@ -1816,7 +1844,7 @@
1816
1844
  }
1817
1845
 
1818
1846
  footer {
1819
- border-top: 1px solid var(--border-muted);
1847
+ border-top: 1px solid var(--panel-border);
1820
1848
  padding: 8px 12px;
1821
1849
  color: var(--muted);
1822
1850
  font-size: 12px;
@@ -1886,10 +1914,40 @@
1886
1914
  }
1887
1915
 
1888
1916
  .footer-meta-text {
1917
+ display: inline-flex;
1918
+ align-items: center;
1919
+ gap: 4px;
1889
1920
  min-width: 0;
1921
+ max-width: 100%;
1890
1922
  white-space: nowrap;
1891
1923
  overflow: hidden;
1924
+ }
1925
+
1926
+ .footer-meta-part {
1927
+ min-width: 0;
1928
+ overflow: hidden;
1892
1929
  text-overflow: ellipsis;
1930
+ white-space: nowrap;
1931
+ }
1932
+
1933
+ .footer-meta-model {
1934
+ flex: 0 2 auto;
1935
+ max-width: 34ch;
1936
+ }
1937
+
1938
+ .footer-meta-terminal {
1939
+ flex: 0 4 auto;
1940
+ max-width: 34ch;
1941
+ }
1942
+
1943
+ .footer-meta-context {
1944
+ flex: 0 0 auto;
1945
+ font-variant-numeric: tabular-nums;
1946
+ }
1947
+
1948
+ .footer-meta-sep {
1949
+ flex: 0 0 auto;
1950
+ opacity: 0.72;
1893
1951
  }
1894
1952
 
1895
1953
  .shortcut-hint {
@@ -1912,7 +1970,7 @@
1912
1970
  font-size: 11px;
1913
1971
  line-height: 1.2;
1914
1972
  border-radius: 999px;
1915
- border: 1px solid var(--border-muted);
1973
+ border: 1px solid var(--control-border);
1916
1974
  background: var(--panel-2);
1917
1975
  color: var(--text);
1918
1976
  white-space: nowrap;
@@ -1935,7 +1993,7 @@
1935
1993
  align-items: center;
1936
1994
  justify-content: center;
1937
1995
  padding: 24px;
1938
- background: rgba(0, 0, 0, 0.48);
1996
+ background: var(--backdrop-bg);
1939
1997
  backdrop-filter: blur(2px);
1940
1998
  }
1941
1999
 
@@ -1946,10 +2004,10 @@
1946
2004
  .scratchpad-dialog {
1947
2005
  width: min(860px, 100%);
1948
2006
  max-height: min(82vh, 900px);
1949
- border: 1px solid var(--border);
2007
+ border: 1px solid var(--panel-border);
1950
2008
  border-radius: 14px;
1951
2009
  background: var(--panel);
1952
- box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
2010
+ box-shadow: 0 18px 50px var(--shadow-color);
1953
2011
  display: flex;
1954
2012
  flex-direction: column;
1955
2013
  overflow: hidden;
@@ -1961,7 +2019,7 @@
1961
2019
  justify-content: space-between;
1962
2020
  gap: 12px;
1963
2021
  padding: 16px 18px 12px;
1964
- border-bottom: 1px solid var(--border-muted);
2022
+ border-bottom: 1px solid var(--panel-border);
1965
2023
  background: var(--panel-2);
1966
2024
  }
1967
2025
 
@@ -1995,7 +2053,7 @@
1995
2053
  min-height: 280px;
1996
2054
  flex: 1 1 auto;
1997
2055
  border: 0;
1998
- border-bottom: 1px solid var(--border-muted);
2056
+ border-bottom: 1px solid var(--panel-border);
1999
2057
  border-radius: 0;
2000
2058
  margin: 0;
2001
2059
  padding: 16px 18px;
@@ -2073,9 +2131,9 @@
2073
2131
  gap: 12px;
2074
2132
  flex-wrap: wrap;
2075
2133
  padding: 10px 14px;
2076
- border-bottom: 1px solid var(--border);
2134
+ border-bottom: 1px solid var(--panel-border);
2077
2135
  background: var(--panel-2);
2078
- box-shadow: inset 0 -1px 0 var(--border-muted);
2136
+ box-shadow: inset 0 -1px 0 var(--border-subtle);
2079
2137
  }
2080
2138
 
2081
2139
  .review-notes-empty {
@@ -2083,7 +2141,7 @@
2083
2141
  font-size: 13px;
2084
2142
  line-height: 1.5;
2085
2143
  color: var(--muted);
2086
- border-bottom: 1px solid var(--border-muted);
2144
+ border-bottom: 1px solid var(--panel-border);
2087
2145
  background: var(--panel);
2088
2146
  }
2089
2147
 
@@ -2106,14 +2164,20 @@
2106
2164
  display: flex;
2107
2165
  justify-content: flex-end;
2108
2166
  padding: 10px 14px 12px;
2109
- border-top: 1px solid var(--border);
2167
+ border-top: 1px solid var(--panel-border);
2110
2168
  background: var(--panel-2);
2111
- box-shadow: inset 0 1px 0 var(--border-muted);
2169
+ box-shadow: inset 0 1px 0 var(--border-subtle);
2112
2170
  }
2113
2171
 
2114
2172
  .review-notes-dock-footer .scratchpad-actions {
2115
2173
  width: 100%;
2116
- justify-content: space-between;
2174
+ gap: 6px;
2175
+ justify-content: flex-end;
2176
+ }
2177
+
2178
+ .review-notes-dock-footer .scratchpad-actions button {
2179
+ padding: 5px 7px;
2180
+ font-size: 11px;
2117
2181
  }
2118
2182
 
2119
2183
  .outline-list {
@@ -2137,7 +2201,7 @@
2137
2201
  border-radius: 10px;
2138
2202
  padding: 8px 10px;
2139
2203
  background: var(--panel-2);
2140
- border: 1px solid var(--border-muted);
2204
+ border: 1px solid var(--panel-border);
2141
2205
  }
2142
2206
 
2143
2207
  .outline-entry:hover,
@@ -2171,7 +2235,7 @@
2171
2235
  }
2172
2236
 
2173
2237
  .review-note-card {
2174
- border: 1px solid var(--border-muted);
2238
+ border: 1px solid var(--panel-border);
2175
2239
  border-radius: 12px;
2176
2240
  background: var(--panel-2);
2177
2241
  padding: 12px;
@@ -2230,7 +2294,7 @@
2230
2294
  line-height: 1.5;
2231
2295
  resize: vertical;
2232
2296
  outline: none;
2233
- box-shadow: inset 0 0 0 1px var(--border-muted);
2297
+ box-shadow: inset 0 0 0 1px var(--control-border);
2234
2298
  }
2235
2299
 
2236
2300
  .review-note-card textarea:focus {
@@ -2252,7 +2316,7 @@
2252
2316
 
2253
2317
  #reviewNotesAddBtn:not(:disabled) {
2254
2318
  color: var(--muted);
2255
- border-color: var(--border-muted);
2319
+ border-color: var(--control-border);
2256
2320
  background: var(--panel);
2257
2321
  font-weight: 500;
2258
2322
  }
@@ -2315,48 +2379,55 @@
2315
2379
  }
2316
2380
  }
2317
2381
 
2318
- /* Opt-in editor-side layout refresh prototype. Enabled with ?uiRefresh=1 or localStorage piStudio.uiRefresh=1. */
2382
+ /* Default refreshed Studio layout. Classic layout remains available with ?uiRefresh=0 or the footer UI switch. */
2319
2383
  body.studio-ui-refresh {
2320
- font-size: 14px;
2384
+ --studio-editor-font-size: 12px;
2385
+ --studio-editor-line-number-font-size: 11px;
2386
+ --studio-response-font-size: 13.5px;
2387
+ --studio-response-raw-font-size: 12px;
2388
+ --studio-working-font-size: 12px;
2389
+ font-size: 13px;
2321
2390
  }
2322
2391
 
2323
2392
  body.studio-ui-refresh > header {
2324
- padding: 9px 14px;
2325
- gap: 10px;
2393
+ padding: 8px 12px;
2394
+ gap: 9px;
2326
2395
  }
2327
2396
 
2328
2397
  body.studio-ui-refresh h1 {
2329
- font-size: 17px;
2398
+ font-size: 16px;
2330
2399
  }
2331
2400
 
2332
2401
  body.studio-ui-refresh .app-logo {
2333
- font-size: 20px;
2402
+ font-size: 18px;
2334
2403
  }
2335
2404
 
2336
2405
  body.studio-ui-refresh .app-subtitle {
2406
+ color: color-mix(in srgb, var(--text) 42%, var(--muted));
2337
2407
  font-size: 11px;
2408
+ font-weight: 550;
2338
2409
  }
2339
2410
 
2340
2411
  body.studio-ui-refresh > header .controls {
2341
- gap: 6px;
2412
+ gap: 5px;
2342
2413
  }
2343
2414
 
2344
2415
  body.studio-ui-refresh > header button,
2345
2416
  body.studio-ui-refresh > header .file-label,
2346
2417
  body.studio-ui-refresh #responseActions button,
2347
2418
  body.studio-ui-refresh #responseActions select {
2348
- padding: 6px 8px;
2349
- font-size: 13px;
2419
+ padding: 5px 7px;
2420
+ font-size: 12px;
2350
2421
  }
2351
2422
 
2352
2423
  body.studio-ui-refresh main {
2353
- gap: 10px;
2354
- padding: 10px;
2424
+ gap: 9px;
2425
+ padding: 9px;
2355
2426
  }
2356
2427
 
2357
2428
  body.studio-ui-refresh footer {
2358
- padding: 8px 10px;
2359
- font-size: 12px;
2429
+ padding: 7px 9px;
2430
+ font-size: 11px;
2360
2431
  }
2361
2432
 
2362
2433
  .studio-ui-refresh-toggle {
@@ -2378,9 +2449,9 @@
2378
2449
  position: relative;
2379
2450
  z-index: 30;
2380
2451
  display: grid;
2381
- gap: 7px;
2452
+ gap: 6px;
2382
2453
  background: transparent;
2383
- padding: 8px 10px 7px;
2454
+ padding: 7px 9px 6px;
2384
2455
  overflow: visible;
2385
2456
  }
2386
2457
 
@@ -2402,7 +2473,7 @@
2402
2473
  body.studio-ui-refresh .studio-refresh-action-line {
2403
2474
  display: flex;
2404
2475
  align-items: center;
2405
- gap: 7px;
2476
+ gap: 6px;
2406
2477
  min-width: 0;
2407
2478
  flex-wrap: wrap;
2408
2479
  }
@@ -2412,7 +2483,7 @@
2412
2483
  display: grid;
2413
2484
  grid-template-columns: minmax(0, 1fr) auto;
2414
2485
  align-items: center;
2415
- gap: 10px;
2486
+ gap: 9px;
2416
2487
  min-width: 0;
2417
2488
  }
2418
2489
 
@@ -2420,8 +2491,8 @@
2420
2491
  display: grid;
2421
2492
  grid-template-columns: auto minmax(0, 1fr);
2422
2493
  align-items: center;
2423
- column-gap: 10px;
2424
- row-gap: 6px;
2494
+ column-gap: 9px;
2495
+ row-gap: 5px;
2425
2496
  }
2426
2497
 
2427
2498
  body.studio-ui-refresh .studio-refresh-title-group,
@@ -2437,7 +2508,7 @@
2437
2508
  }
2438
2509
 
2439
2510
  body.studio-ui-refresh .studio-refresh-title-group {
2440
- gap: 3px;
2511
+ gap: 2px;
2441
2512
  }
2442
2513
 
2443
2514
  body.studio-ui-refresh .studio-refresh-pane-tools {
@@ -2448,15 +2519,15 @@
2448
2519
  body.studio-ui-refresh .studio-refresh-sep {
2449
2520
  display: inline-block;
2450
2521
  width: 1px;
2451
- height: 18px;
2452
- background: var(--border-muted);
2522
+ height: 16px;
2523
+ background: var(--border-subtle);
2453
2524
  margin: 0 1px;
2454
2525
  flex: 0 0 1px;
2455
2526
  }
2456
2527
 
2457
2528
  body.studio-ui-refresh .studio-refresh-icon {
2458
- width: 17px;
2459
- height: 17px;
2529
+ width: 15px;
2530
+ height: 15px;
2460
2531
  stroke: currentColor;
2461
2532
  stroke-width: 1.85;
2462
2533
  stroke-linecap: round;
@@ -2473,7 +2544,7 @@
2473
2544
  body.studio-ui-refresh .studio-refresh-toolbar select {
2474
2545
  border-color: transparent;
2475
2546
  background: transparent;
2476
- font-size: 14px;
2547
+ font-size: 13px;
2477
2548
  }
2478
2549
 
2479
2550
  body.studio-ui-refresh #leftSectionHeader select:hover,
@@ -2487,16 +2558,16 @@
2487
2558
 
2488
2559
  body.studio-ui-refresh #leftSectionHeader #editorViewSelect,
2489
2560
  body.studio-ui-refresh #rightSectionHeader #rightViewSelect {
2490
- font-size: 15px;
2491
- font-weight: 750;
2561
+ font-size: 14px;
2562
+ font-weight: 700;
2492
2563
  padding: 3px 5px;
2493
2564
  max-width: 230px;
2494
2565
  }
2495
2566
 
2496
2567
  body.studio-ui-refresh .studio-refresh-static-title {
2497
2568
  color: var(--text);
2498
- font-size: 15px;
2499
- font-weight: 700;
2569
+ font-size: 14px;
2570
+ font-weight: 650;
2500
2571
  padding: 3px 5px;
2501
2572
  max-width: 230px;
2502
2573
  white-space: nowrap;
@@ -2504,9 +2575,9 @@
2504
2575
 
2505
2576
  body.studio-ui-refresh #leftFocusBtn,
2506
2577
  body.studio-ui-refresh #rightFocusBtn {
2507
- width: 32px;
2508
- min-width: 32px;
2509
- min-height: 32px;
2578
+ width: 29px;
2579
+ min-width: 29px;
2580
+ min-height: 29px;
2510
2581
  padding: 0;
2511
2582
  color: var(--muted);
2512
2583
  align-items: center;
@@ -2518,8 +2589,8 @@
2518
2589
  body.studio-ui-refresh #resourceDirLabel {
2519
2590
  border-color: transparent;
2520
2591
  background: transparent;
2521
- padding: 4px 6px;
2522
- font-size: 14px;
2592
+ padding: 3px 5px;
2593
+ font-size: 13px;
2523
2594
  border-radius: 8px;
2524
2595
  }
2525
2596
 
@@ -2548,14 +2619,15 @@
2548
2619
  body.studio-ui-refresh #syncBadge {
2549
2620
  display: inline-flex;
2550
2621
  align-items: center;
2551
- gap: 6px;
2552
- min-height: 26px;
2622
+ gap: 5px;
2623
+ min-height: 24px;
2553
2624
  border: 0;
2554
2625
  border-radius: 999px;
2555
- padding: 3px 9px;
2556
- background: var(--panel-2);
2626
+ padding: 2px 7px;
2627
+ background: transparent;
2557
2628
  color: var(--muted);
2558
- opacity: 1;
2629
+ opacity: 0.82;
2630
+ font-weight: 450;
2559
2631
  }
2560
2632
 
2561
2633
  body.studio-ui-refresh #syncBadge[hidden] {
@@ -2564,11 +2636,11 @@
2564
2636
 
2565
2637
  body.studio-ui-refresh #syncBadge::before {
2566
2638
  content: "";
2567
- width: 7px;
2568
- height: 7px;
2639
+ width: 5px;
2640
+ height: 5px;
2569
2641
  border-radius: 999px;
2570
- background: var(--success, #22c55e);
2571
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #22c55e) 14%, transparent);
2642
+ background: currentColor;
2643
+ opacity: 0.72;
2572
2644
  }
2573
2645
 
2574
2646
  body.studio-ui-refresh #reviewNotesBtn,
@@ -2577,8 +2649,8 @@
2577
2649
  body.studio-ui-refresh #exportPdfBtn,
2578
2650
  body.studio-ui-refresh .studio-refresh-tool-tab {
2579
2651
  font-weight: 500;
2580
- padding: 6px 9px;
2581
- border-radius: 9px;
2652
+ padding: 5px 8px;
2653
+ border-radius: 8px;
2582
2654
  }
2583
2655
 
2584
2656
  body.studio-ui-refresh #exportPdfBtn {
@@ -2604,65 +2676,164 @@
2604
2676
  body.studio-ui-refresh .source-meta {
2605
2677
  display: block;
2606
2678
  padding: 0;
2607
- border-bottom: 1px solid var(--border-muted);
2679
+ border-bottom: 1px solid var(--panel-border);
2608
2680
  position: relative;
2609
2681
  z-index: 20;
2610
2682
  overflow: visible;
2611
2683
  }
2612
2684
 
2613
2685
  body.studio-ui-refresh .source-body {
2614
- padding: 8px;
2686
+ padding: 7px;
2687
+ }
2688
+
2689
+ body.studio-ui-refresh #sourceText {
2690
+ font-size: var(--studio-editor-font-size);
2691
+ line-height: 1.42;
2692
+ }
2693
+
2694
+ body.studio-ui-refresh .editor-highlight,
2695
+ body.studio-ui-refresh .editor-line-number-measure {
2696
+ font-size: var(--studio-editor-font-size);
2697
+ line-height: 1.42;
2698
+ }
2699
+
2700
+ body.studio-ui-refresh #sourceText,
2701
+ body.studio-ui-refresh .editor-highlight {
2702
+ padding: 9px 9px 9px calc(9px + var(--editor-review-note-gutter-width) + var(--editor-line-number-gutter-width));
2703
+ }
2704
+
2705
+ body.studio-ui-refresh .editor-line-number-gutter-content {
2706
+ padding: 9px 7px 9px 0;
2707
+ font-size: var(--studio-editor-line-number-font-size);
2708
+ line-height: 1.42;
2709
+ }
2710
+
2711
+ body.studio-ui-refresh .editor-review-note-gutter-content {
2712
+ padding: 9px 4px;
2713
+ }
2714
+
2715
+ body.studio-ui-refresh .panel-scroll {
2716
+ padding: 11px;
2717
+ line-height: 1.48;
2718
+ font-size: 13px;
2719
+ }
2720
+
2721
+ body.studio-ui-refresh .rendered-markdown {
2722
+ line-height: 1.52;
2723
+ font-size: 13.5px;
2724
+ }
2725
+
2726
+ body.studio-ui-refresh #rightPane .rendered-markdown {
2727
+ font-size: var(--studio-response-font-size);
2728
+ }
2729
+
2730
+ body.studio-ui-refresh .plain-markdown,
2731
+ body.studio-ui-refresh .response-markdown-highlight {
2732
+ font-size: 12px;
2733
+ line-height: 1.42;
2734
+ }
2735
+
2736
+ body.studio-ui-refresh #rightPane .plain-markdown,
2737
+ body.studio-ui-refresh #rightPane .response-markdown-highlight {
2738
+ font-size: var(--studio-response-raw-font-size);
2739
+ }
2740
+
2741
+ body.studio-ui-refresh .rendered-markdown pre {
2742
+ padding: 11px 13px;
2743
+ }
2744
+
2745
+ body.studio-ui-refresh .trace-panel,
2746
+ body.studio-ui-refresh .trace-card,
2747
+ body.studio-ui-refresh .trace-toolbar,
2748
+ body.studio-ui-refresh .trace-summary,
2749
+ body.studio-ui-refresh .trace-controls,
2750
+ body.studio-ui-refresh .trace-card-header {
2751
+ gap: 7px;
2752
+ }
2753
+
2754
+ body.studio-ui-refresh .trace-card {
2755
+ padding: 9px 11px;
2756
+ }
2757
+
2758
+ body.studio-ui-refresh .trace-output {
2759
+ padding: 9px 10px;
2760
+ font-size: var(--studio-working-font-size);
2761
+ line-height: 1.42;
2615
2762
  }
2616
2763
 
2617
2764
  body.studio-ui-refresh .studio-refresh-toolbar {
2618
2765
  position: relative;
2619
- padding: 9px 12px 10px;
2766
+ padding: 8px 10px 9px;
2620
2767
  overflow: visible;
2621
2768
  }
2622
2769
 
2623
2770
  body.studio-ui-refresh .studio-refresh-toolbar-main {
2624
2771
  display: grid;
2625
2772
  grid-template-columns: minmax(0, 1fr) auto;
2626
- gap: 12px;
2773
+ gap: 10px;
2627
2774
  align-items: start;
2628
2775
  min-width: 0;
2629
2776
  }
2630
2777
 
2631
2778
  body.studio-ui-refresh .studio-refresh-toolbar-actions {
2632
2779
  display: grid;
2633
- gap: 7px;
2780
+ gap: 6px;
2634
2781
  justify-items: start;
2635
2782
  min-width: 0;
2636
2783
  }
2637
2784
 
2638
2785
  body.studio-ui-refresh .studio-refresh-toolbar-state {
2639
2786
  display: grid;
2640
- gap: 7px;
2787
+ gap: 6px;
2641
2788
  justify-items: end;
2642
2789
  align-content: start;
2643
2790
  min-width: max-content;
2644
2791
  }
2645
2792
 
2793
+ body.studio-ui-refresh .studio-refresh-toolbar button,
2794
+ body.studio-ui-refresh .studio-refresh-toolbar select {
2795
+ font-size: 12px;
2796
+ }
2797
+
2798
+ body.studio-ui-refresh .studio-refresh-toolbar button:not(#sendRunBtn):not(#queueSteerBtn):not(.request-stop-active),
2799
+ body.studio-ui-refresh .studio-refresh-toolbar select {
2800
+ color: color-mix(in srgb, var(--text) 72%, var(--muted));
2801
+ font-weight: 500;
2802
+ }
2803
+
2804
+ body.studio-ui-refresh .studio-refresh-toolbar button:not(#sendRunBtn):not(#queueSteerBtn):not(.request-stop-active):hover,
2805
+ body.studio-ui-refresh .studio-refresh-toolbar select:not(:disabled):hover {
2806
+ color: var(--text);
2807
+ }
2808
+
2646
2809
  body.studio-ui-refresh .studio-refresh-chip {
2647
2810
  display: inline-flex;
2648
2811
  align-items: center;
2649
- gap: 6px;
2650
- border-radius: 9px;
2812
+ gap: 5px;
2813
+ border-radius: 8px;
2651
2814
  color: var(--text);
2652
2815
  white-space: nowrap;
2653
- padding: 6px 9px;
2654
- font-size: 14px;
2816
+ padding: 5px 8px;
2817
+ font-size: 13px;
2818
+ font-weight: 500;
2819
+ }
2820
+
2821
+ body.studio-ui-refresh .studio-refresh-toolbar .studio-refresh-chip {
2822
+ color: color-mix(in srgb, var(--text) 72%, var(--muted));
2823
+ font-size: 12px;
2824
+ font-weight: 500;
2655
2825
  }
2656
2826
 
2657
2827
  body.studio-ui-refresh .studio-refresh-chip::after {
2658
2828
  content: "⌄";
2659
2829
  color: var(--muted);
2660
- font-size: 15px;
2830
+ font-size: 14px;
2661
2831
  line-height: 1;
2662
2832
  transform: translateY(-1px);
2663
2833
  }
2664
2834
 
2665
- body.studio-ui-refresh .studio-refresh-chip.is-open {
2835
+ body.studio-ui-refresh .studio-refresh-chip.is-open,
2836
+ body.studio-ui-refresh .studio-refresh-chip:hover {
2666
2837
  background: var(--panel-2);
2667
2838
  color: var(--text);
2668
2839
  }
@@ -2680,10 +2851,10 @@
2680
2851
  right: 0;
2681
2852
  width: min(420px, calc(100vw - 48px));
2682
2853
  padding: 10px;
2683
- border: 1px solid var(--border);
2854
+ border: 1px solid var(--panel-border);
2684
2855
  border-radius: 12px;
2685
2856
  background: var(--panel);
2686
- box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
2857
+ box-shadow: 0 18px 46px var(--shadow-color);
2687
2858
  z-index: 100;
2688
2859
  }
2689
2860
 
@@ -2703,7 +2874,7 @@
2703
2874
 
2704
2875
  body.studio-ui-refresh .studio-refresh-menu-section {
2705
2876
  padding: 8px 0 6px;
2706
- border-top: 1px solid var(--border-muted);
2877
+ border-top: 1px solid var(--border-subtle);
2707
2878
  }
2708
2879
 
2709
2880
  body.studio-ui-refresh .studio-refresh-menu-section:first-child {
@@ -2715,9 +2886,9 @@
2715
2886
  margin: 0 6px 6px;
2716
2887
  color: var(--muted);
2717
2888
  font-size: 11px;
2718
- font-weight: 700;
2889
+ font-weight: 650;
2719
2890
  text-transform: uppercase;
2720
- letter-spacing: 0.08em;
2891
+ letter-spacing: 0.06em;
2721
2892
  }
2722
2893
 
2723
2894
  body.studio-ui-refresh .studio-refresh-menu-item {
@@ -2736,6 +2907,7 @@
2736
2907
  border-color: transparent;
2737
2908
  background: transparent;
2738
2909
  color: var(--text);
2910
+ font-weight: 450;
2739
2911
  }
2740
2912
 
2741
2913
  body.studio-ui-refresh .studio-refresh-menu #critiqueBtn {
@@ -2749,27 +2921,24 @@
2749
2921
  }
2750
2922
 
2751
2923
  body.studio-ui-refresh #copyDraftBtn:only-child {
2752
- min-height: 32px;
2753
- padding: 5px 9px;
2924
+ min-height: 29px;
2925
+ padding: 4px 8px;
2754
2926
  }
2755
2927
 
2756
2928
  body.studio-ui-refresh #sendRunBtn,
2757
2929
  body.studio-ui-refresh #queueSteerBtn,
2758
2930
  body.studio-ui-refresh #loadResponseBtn:not([hidden]) {
2759
- height: 30px;
2760
- min-height: 30px;
2761
- padding: 4px 10px;
2762
- font-size: 13px;
2931
+ height: 28px;
2932
+ min-height: 28px;
2933
+ padding: 4px 9px;
2934
+ font-size: 12px;
2763
2935
  line-height: 1.2;
2764
2936
  border-radius: 8px;
2765
2937
  }
2766
2938
 
2767
- body.studio-ui-refresh #sendRunBtn {
2768
- min-width: 9.2rem;
2769
- }
2770
-
2939
+ body.studio-ui-refresh #sendRunBtn,
2771
2940
  body.studio-ui-refresh #queueSteerBtn {
2772
- min-width: auto;
2941
+ min-width: 8.6rem;
2773
2942
  }
2774
2943
 
2775
2944
  body.studio-ui-refresh #queueSteerBtn:not(:disabled) {