pi-studio 0.6.0 → 0.6.2

package/client/studio.css

@@ -2,19 +2,24 @@
     html, body {
       margin: 0;
       height: 100%;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
       background: var(--bg);
       color: var(--text);
     }
 
     body {
+      --studio-editor-font-size: 13px;
+      --studio-editor-line-number-font-size: 12px;
+      --studio-response-font-size: 15px;
+      --studio-response-raw-font-size: 13px;
+      --studio-working-font-size: 13px;
       display: flex;
       flex-direction: column;
       min-height: 100%;
     }
 
     body > header {
-      border-bottom: 1px solid var(--border-muted);
+      border-bottom: 1px solid var(--panel-border);
       padding: 12px 16px;
       background: var(--panel);
       display: flex;
@@ -55,7 +60,7 @@
     }
 
     button, select, .file-label {
-      border: 1px solid var(--border-muted);
+      border: 1px solid var(--control-border);
       background: var(--panel);
       color: var(--text);
       border-radius: 8px;
@@ -149,7 +154,7 @@
     }
 
     section {
-      border: 1px solid var(--border-muted);
+      border: 1px solid var(--panel-border);
       border-radius: 10px;
       background: var(--panel);
       min-height: 0;
@@ -160,7 +165,7 @@
     }
 
     section.pane-active {
-      border-color: var(--border);
+      border-color: var(--pane-active-border);
     }
 
     body.pane-focus-left main,
@@ -175,12 +180,12 @@
 
     body.pane-focus-left #leftPane,
     body.pane-focus-right #rightPane {
-      border-color: var(--border);
+      border-color: var(--pane-active-border);
     }
 
     .section-header {
       padding: 10px 12px;
-      border-bottom: 1px solid var(--border-muted);
+      border-bottom: 1px solid var(--panel-border);
       background: var(--panel-2);
       font-weight: 600;
       font-size: 14px;
@@ -275,7 +280,8 @@
     body[data-studio-mode="editor-only"] #copyResponseBtn,
     body[data-studio-mode="editor-only"] #compactBtn,
     body[data-studio-mode="editor-only"] .reference-meta,
-    body[data-studio-mode="editor-only"] #responseActions {
+    body[data-studio-mode="editor-only"] #responseActions .history-row,
+    body[data-studio-mode="editor-only"] #responseActions .response-result-row {
       display: none !important;
     }
 
@@ -293,13 +299,13 @@
 
     .reference-meta {
       padding: 8px 10px;
-      border-bottom: 1px solid var(--border-muted);
-      background: var(--panel-2);
+      border-bottom: 1px solid var(--panel-border);
+      background: var(--reference-meta-bg, var(--panel-2));
     }
 
     textarea {
       width: 100%;
-      border: 1px solid var(--border-muted);
+      border: 1px solid var(--control-border);
       border-radius: 8px;
       background: var(--panel);
       color: var(--text);
@@ -313,7 +319,7 @@
 
     .source-wrap {
       padding: 10px;
-      border-bottom: 1px solid var(--border-muted);
+      border-bottom: 1px solid var(--panel-border);
       display: flex;
       flex-direction: column;
       gap: 8px;
@@ -344,7 +350,7 @@
       min-width: 280px;
       min-height: 0;
       display: flex;
-      border: 1px solid var(--border);
+      border: 1px solid var(--panel-border);
       border-radius: 10px;
       background: var(--panel);
       box-shadow: var(--panel-shadow);
@@ -385,7 +391,7 @@
     }
 
     .source-badge {
-      border: 1px solid var(--border-muted);
+      border: 1px solid var(--control-border);
       background: var(--panel);
       border-radius: 999px;
       padding: 4px 10px;
@@ -394,6 +400,15 @@
       white-space: nowrap;
     }
 
+    .reference-meta .source-badge {
+      background: var(--reference-badge-bg, var(--panel));
+    }
+
+    body.studio-ui-refresh #rightPane .reference-meta .source-badge {
+      border-color: var(--border-subtle);
+      color: color-mix(in srgb, var(--text) 58%, var(--muted));
+    }
+
     .source-badge-button {
       cursor: pointer;
       transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
@@ -413,7 +428,7 @@
     }
 
     .sync-badge.sync {
-      border-color: var(--border-muted);
+      border-color: var(--control-border);
       color: var(--muted);
       opacity: 0.88;
     }
@@ -443,7 +458,7 @@
     .resource-dir-btn {
       padding: 4px 10px;
       font-size: 12px;
-      border: 1px solid var(--border-muted);
+      border: 1px solid var(--control-border);
       border-radius: 999px;
       background: var(--card);
       color: var(--fg-muted);
@@ -478,7 +493,7 @@
       width: 260px;
       padding: 2px 6px;
       font-size: 11px;
-      border: 1px solid var(--border-muted);
+      border: 1px solid var(--control-border);
       border-radius: 4px;
       background: var(--editor-bg);
       color: var(--fg);
@@ -498,7 +513,7 @@
       flex: 1 1 auto;
       min-height: 0;
       max-height: none;
-      border: 1px solid var(--border-muted);
+      border: 1px solid var(--panel-border);
       border-radius: 8px;
       background: var(--editor-bg);
       overflow: hidden;
@@ -510,13 +525,13 @@
       position: absolute;
       inset: 0 auto 0 0;
       overflow: hidden;
-      background: var(--panel-2);
+      background: var(--editor-gutter-bg, var(--panel-2));
       z-index: 0;
     }
 
     .editor-review-note-gutter {
       width: var(--editor-review-note-gutter-width);
-      border-right: 1px solid var(--border-muted);
+      border-right: 1px solid var(--panel-border);
       z-index: 2;
     }
 
@@ -567,8 +582,8 @@
     .editor-line-number-gutter {
       left: var(--editor-review-note-gutter-width);
       width: var(--editor-line-number-gutter-width);
-      border-right: 1px solid var(--border-muted);
-      color: var(--muted);
+      border-right: 1px solid var(--panel-border);
+      color: color-mix(in srgb, var(--text) 50%, var(--muted));
       pointer-events: none;
     }
 
@@ -577,7 +592,7 @@
       padding: 10px 8px 10px 0;
       text-align: right;
       font-family: var(--font-mono);
-      font-size: 12px;
+      font-size: var(--studio-editor-line-number-font-size);
       line-height: 1.45;
       font-variant-numeric: tabular-nums;
       white-space: nowrap;
@@ -599,7 +614,7 @@
       word-break: normal;
       overflow-wrap: break-word;
       font-family: var(--font-mono);
-      font-size: 13px;
+      font-size: var(--studio-editor-font-size);
       line-height: 1.45;
       tab-size: 2;
       z-index: -1;
@@ -625,7 +640,7 @@
       overscroll-behavior: none;
       scrollbar-width: none;
       font-family: var(--font-mono);
-      font-size: 13px;
+      font-size: var(--studio-editor-font-size);
       line-height: 1.45;
       tab-size: 2;
       color: var(--text);
@@ -651,6 +666,8 @@
       outline: none;
       overscroll-behavior: none;
       padding: 10px 10px 10px calc(10px + var(--editor-review-note-gutter-width) + var(--editor-line-number-gutter-width));
+      font-size: var(--studio-editor-font-size);
+      line-height: 1.45;
     }
 
     #sourceText.highlight-active {
@@ -685,7 +702,7 @@
       background: var(--accent-soft);
       border-color: var(--accent);
       color: var(--accent);
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+      box-shadow: 0 1px 2px var(--shadow-color);
     }
 
     .editor-selection-action-btn:hover,
@@ -758,14 +775,14 @@
 
     .hl-diff-add {
       color: var(--ok);
-      background: rgba(46, 160, 67, 0.12);
+      background: var(--diff-added-bg);
       display: inline-block;
       width: 100%;
     }
 
     .hl-diff-del {
       color: var(--error);
-      background: rgba(248, 81, 73, 0.12);
+      background: var(--diff-removed-bg);
       display: inline-block;
       width: 100%;
     }
@@ -818,7 +835,7 @@
     .annotation-preview-marker code {
       font-family: var(--mono-font, ui-monospace, SFMono-Regular, Menlo, monospace);
       font-size: 0.95em;
-      background: rgba(0, 0, 0, 0.08);
+      background: var(--inline-code-bg);
       border-radius: 3px;
       padding: 0 0.2em;
     }
@@ -827,7 +844,7 @@
       flex: 1 1 auto;
       min-height: 0;
       max-height: none;
-      border: 1px solid var(--border-muted);
+      border: 1px solid var(--panel-border);
       border-radius: 8px;
       background: var(--panel);
     }
@@ -844,6 +861,7 @@
     .rendered-markdown {
       overflow-wrap: anywhere;
       line-height: 1.58;
+      font-family: var(--font-prose, var(--font-ui));
       font-size: 15px;
     }
 
@@ -965,7 +983,7 @@
       background: var(--accent-soft);
       border-color: var(--accent);
       color: var(--accent);
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+      box-shadow: 0 1px 2px var(--shadow-color);
       pointer-events: auto;
     }
 
@@ -1026,7 +1044,7 @@
     .rendered-markdown .callout-caution {
       margin: 1.15em 0;
       padding: 0.8em 1rem 0.95em;
-      border: 1px solid var(--border-muted);
+      border: 1px solid var(--panel-border);
       border-left-width: 4px;
       border-radius: 10px;
       background: var(--panel-2);
@@ -1144,7 +1162,7 @@
       z-index: 4;
       padding: 3px 8px;
       border-radius: 999px;
-      border: 1px solid var(--border-muted);
+      border: 1px solid var(--control-border);
       background: var(--panel);
       color: var(--muted);
       font-family: var(--font-ui);
@@ -1152,7 +1170,7 @@
       font-weight: 700;
       line-height: 1.4;
       opacity: 0.25;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
+      box-shadow: 0 2px 8px var(--shadow-color);
       cursor: pointer;
       pointer-events: auto;
       user-select: none;
@@ -1171,7 +1189,7 @@
     }
 
     .rendered-markdown :not(pre) > code {
-      background: rgba(127, 127, 127, 0.13);
+      background: var(--inline-code-bg);
       border: 1px solid var(--md-codeblock-border);
       border-radius: 6px;
       padding: 0.12em 0.35em;
@@ -1235,11 +1253,11 @@
     /* Diff-specific overrides for pandoc code blocks */
     .rendered-markdown pre.sourceCode.diff code > span:has(> .va) {
       color: var(--ok);
-      background: rgba(46, 160, 67, 0.12);
+      background: var(--diff-added-bg);
     }
     .rendered-markdown pre.sourceCode.diff code > span:has(> .st) {
       color: var(--error);
-      background: rgba(248, 81, 73, 0.12);
+      background: var(--diff-removed-bg);
     }
     .rendered-markdown pre.sourceCode.diff code > span:has(> .dt) {
       color: var(--syntax-function);
@@ -1264,7 +1282,7 @@
 
     .rendered-markdown th,
     .rendered-markdown td {
-      border: 1px solid var(--border-muted);
+      border: 1px solid var(--md-table-border);
       padding: 6px 12px;
     }
 
@@ -1415,8 +1433,8 @@
 
     .rendered-markdown .studio-algorithm-block > figcaption {
       padding: 0.8em 1em 0.65em;
-      border-bottom: 1px solid var(--border-muted);
-      background: rgba(127, 127, 127, 0.06);
+      border-bottom: 1px solid var(--panel-border);
+      background: var(--inline-code-bg);
       text-align: left;
     }
 
@@ -1540,6 +1558,15 @@
       line-height: 1.5;
     }
 
+    #rightPane .rendered-markdown {
+      font-size: var(--studio-response-font-size);
+    }
+
+    #rightPane .plain-markdown,
+    #rightPane .response-markdown-highlight {
+      font-size: var(--studio-response-raw-font-size);
+    }
+
     .preview-loading {
       color: var(--muted);
       font-style: italic;
@@ -1606,7 +1633,7 @@
     }
 
     .response-wrap {
-      border-top: 1px solid var(--border-muted);
+      border-top: 1px solid var(--panel-border);
       padding: 10px;
       display: flex;
       flex-direction: column;
@@ -1702,7 +1729,7 @@
       font-size: 11px;
       font-weight: 600;
       letter-spacing: 0.01em;
-      border: 1px solid var(--border);
+      border: 1px solid var(--control-border);
       background: transparent;
       color: var(--muted);
     }
@@ -1734,13 +1761,13 @@
     .trace-entry-status.trace-entry-status-complete {
       color: var(--ok);
       border-color: var(--ok-border);
-      background: rgba(115, 209, 61, 0.08);
+      background: var(--ok-soft);
     }
 
     .trace-entry-status.trace-entry-status-error {
       color: var(--error);
       border-color: var(--error);
-      background: rgba(255, 107, 107, 0.08);
+      background: var(--error-soft);
     }
 
     .trace-summary-meta,
@@ -1760,10 +1787,10 @@
       flex-direction: column;
       gap: 8px;
       padding: 10px 12px;
-      border: 1px solid var(--border-muted);
+      border: 1px solid var(--panel-border);
       border-radius: 10px;
       background: var(--panel-2);
-      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
+      box-shadow: 0 1px 0 var(--border-subtle);
     }
 
     .trace-card-header {
@@ -1798,11 +1825,12 @@
     .trace-output {
       padding: 10px 11px;
       border-radius: 8px;
-      border: 1px solid var(--border-muted);
+      border: 1px solid var(--panel-border);
       background: var(--panel);
       overflow-x: auto;
       white-space: pre-wrap;
       overflow-wrap: anywhere;
+      font-size: var(--studio-working-font-size);
     }
 
     .trace-empty,
@@ -1816,7 +1844,7 @@
     }
 
     footer {
-      border-top: 1px solid var(--border-muted);
+      border-top: 1px solid var(--panel-border);
       padding: 8px 12px;
       color: var(--muted);
       font-size: 12px;
@@ -1886,10 +1914,40 @@
     }
 
     .footer-meta-text {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
       min-width: 0;
+      max-width: 100%;
       white-space: nowrap;
       overflow: hidden;
+    }
+
+    .footer-meta-part {
+      min-width: 0;
+      overflow: hidden;
       text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .footer-meta-model {
+      flex: 0 2 auto;
+      max-width: 34ch;
+    }
+
+    .footer-meta-terminal {
+      flex: 0 4 auto;
+      max-width: 34ch;
+    }
+
+    .footer-meta-context {
+      flex: 0 0 auto;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .footer-meta-sep {
+      flex: 0 0 auto;
+      opacity: 0.72;
     }
 
     .shortcut-hint {
@@ -1912,7 +1970,7 @@
       font-size: 11px;
       line-height: 1.2;
       border-radius: 999px;
-      border: 1px solid var(--border-muted);
+      border: 1px solid var(--control-border);
       background: var(--panel-2);
       color: var(--text);
       white-space: nowrap;
@@ -1935,7 +1993,7 @@
       align-items: center;
       justify-content: center;
       padding: 24px;
-      background: rgba(0, 0, 0, 0.48);
+      background: var(--backdrop-bg);
       backdrop-filter: blur(2px);
     }
 
@@ -1946,10 +2004,10 @@
     .scratchpad-dialog {
       width: min(860px, 100%);
       max-height: min(82vh, 900px);
-      border: 1px solid var(--border);
+      border: 1px solid var(--panel-border);
       border-radius: 14px;
       background: var(--panel);
-      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
+      box-shadow: 0 18px 50px var(--shadow-color);
       display: flex;
       flex-direction: column;
       overflow: hidden;
@@ -1961,8 +2019,8 @@
       justify-content: space-between;
       gap: 12px;
       padding: 16px 18px 12px;
-      border-bottom: 1px solid var(--border-muted);
-      background: var(--panel-2);
+      border-bottom: 1px solid var(--panel-border);
+      background: var(--scratchpad-header-bg, var(--panel-2));
     }
 
     .scratchpad-header > div {
@@ -1980,7 +2038,7 @@
       margin: 6px 0 0;
       font-size: 12px;
       line-height: 1.45;
-      color: var(--muted);
+      color: var(--studio-info-text, var(--muted));
       max-width: none;
     }
 
@@ -1995,11 +2053,11 @@
       min-height: 280px;
       flex: 1 1 auto;
       border: 0;
-      border-bottom: 1px solid var(--border-muted);
+      border-bottom: 1px solid var(--panel-border);
       border-radius: 0;
       margin: 0;
       padding: 16px 18px;
-      background: var(--panel);
+      background: var(--scratchpad-body-bg, var(--panel));
       color: var(--text);
       font-family: var(--font-mono);
       font-size: 13px;
@@ -2015,12 +2073,12 @@
       gap: 12px;
       flex-wrap: wrap;
       padding: 12px 18px 16px;
-      background: var(--panel);
+      background: var(--scratchpad-body-bg, var(--panel));
     }
 
     .scratchpad-meta {
       font-size: 12px;
-      color: var(--muted);
+      color: var(--studio-info-text, var(--muted));
     }
 
     .scratchpad-actions {
@@ -2073,17 +2131,17 @@
       gap: 12px;
       flex-wrap: wrap;
       padding: 10px 14px;
-      border-bottom: 1px solid var(--border);
+      border-bottom: 1px solid var(--panel-border);
       background: var(--panel-2);
-      box-shadow: inset 0 -1px 0 var(--border-muted);
+      box-shadow: inset 0 -1px 0 var(--border-subtle);
     }
 
     .review-notes-empty {
       padding: 14px;
       font-size: 13px;
       line-height: 1.5;
-      color: var(--muted);
-      border-bottom: 1px solid var(--border-muted);
+      color: var(--studio-info-text, var(--muted));
+      border-bottom: 1px solid var(--panel-border);
       background: var(--panel);
     }
 
@@ -2106,9 +2164,9 @@
       display: flex;
       justify-content: flex-end;
       padding: 10px 14px 12px;
-      border-top: 1px solid var(--border);
+      border-top: 1px solid var(--panel-border);
       background: var(--panel-2);
-      box-shadow: inset 0 1px 0 var(--border-muted);
+      box-shadow: inset 0 1px 0 var(--border-subtle);
     }
 
     .review-notes-dock-footer .scratchpad-actions {
@@ -2143,7 +2201,7 @@
       border-radius: 10px;
       padding: 8px 10px;
       background: var(--panel-2);
-      border: 1px solid var(--border-muted);
+      border: 1px solid var(--panel-border);
     }
 
     .outline-entry:hover,
@@ -2171,13 +2229,13 @@
 
     .outline-entry-meta {
       font-size: 11px;
-      color: var(--muted);
+      color: var(--studio-info-text, var(--muted));
       white-space: nowrap;
       font-variant-numeric: tabular-nums;
     }
 
     .review-note-card {
-      border: 1px solid var(--border-muted);
+      border: 1px solid var(--panel-border);
       border-radius: 12px;
       background: var(--panel-2);
       padding: 12px;
@@ -2236,7 +2294,7 @@
       line-height: 1.5;
       resize: vertical;
       outline: none;
-      box-shadow: inset 0 0 0 1px var(--border-muted);
+      box-shadow: inset 0 0 0 1px var(--control-border);
     }
 
     .review-note-card textarea:focus {
@@ -2258,7 +2316,7 @@
 
     #reviewNotesAddBtn:not(:disabled) {
       color: var(--muted);
-      border-color: var(--border-muted);
+      border-color: var(--control-border);
       background: var(--panel);
       font-weight: 500;
     }
@@ -2323,6 +2381,11 @@
 
     /* Default refreshed Studio layout. Classic layout remains available with ?uiRefresh=0 or the footer UI switch. */
     body.studio-ui-refresh {
+      --studio-editor-font-size: 12px;
+      --studio-editor-line-number-font-size: 11px;
+      --studio-response-font-size: 13.5px;
+      --studio-response-raw-font-size: 12px;
+      --studio-working-font-size: 12px;
       font-size: 13px;
     }
 
@@ -2340,7 +2403,9 @@
     }
 
     body.studio-ui-refresh .app-subtitle {
-      font-size: 10px;
+      color: color-mix(in srgb, var(--text) 42%, var(--muted));
+      font-size: 11px;
+      font-weight: 550;
     }
 
     body.studio-ui-refresh > header .controls {
@@ -2455,7 +2520,7 @@
       display: inline-block;
       width: 1px;
       height: 16px;
-      background: var(--border-muted);
+      background: var(--border-subtle);
       margin: 0 1px;
       flex: 0 0 1px;
     }
@@ -2488,13 +2553,13 @@
     body.studio-ui-refresh #rightSectionHeader button:not(:disabled):hover,
     body.studio-ui-refresh .studio-refresh-toolbar button:not(:disabled):hover,
     body.studio-ui-refresh .studio-refresh-toolbar select:not(:disabled):hover {
-      background: var(--panel-2);
+      background: var(--studio-header-action-hover-bg, var(--panel-2));
     }
 
     body.studio-ui-refresh #leftSectionHeader #editorViewSelect,
     body.studio-ui-refresh #rightSectionHeader #rightViewSelect {
       font-size: 14px;
-      font-weight: 750;
+      font-weight: 700;
       padding: 3px 5px;
       max-width: 230px;
     }
@@ -2502,7 +2567,7 @@
     body.studio-ui-refresh .studio-refresh-static-title {
       color: var(--text);
       font-size: 14px;
-      font-weight: 700;
+      font-weight: 650;
       padding: 3px 5px;
       max-width: 230px;
       white-space: nowrap;
@@ -2558,10 +2623,11 @@
       min-height: 24px;
       border: 0;
       border-radius: 999px;
-      padding: 2px 8px;
-      background: var(--panel-2);
+      padding: 2px 7px;
+      background: transparent;
       color: var(--muted);
-      opacity: 1;
+      opacity: 0.82;
+      font-weight: 450;
     }
 
     body.studio-ui-refresh #syncBadge[hidden] {
@@ -2570,11 +2636,11 @@
 
     body.studio-ui-refresh #syncBadge::before {
       content: "";
-      width: 6px;
-      height: 6px;
+      width: 5px;
+      height: 5px;
       border-radius: 999px;
-      background: var(--success, #22c55e);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #22c55e) 14%, transparent);
+      background: currentColor;
+      opacity: 0.72;
     }
 
     body.studio-ui-refresh #reviewNotesBtn,
@@ -2587,10 +2653,18 @@
       border-radius: 8px;
     }
 
+    body.studio-ui-refresh #reviewNotesBtn,
+    body.studio-ui-refresh #outlineBtn,
+    body.studio-ui-refresh #scratchpadBtn,
+    body.studio-ui-refresh .studio-refresh-tool-tab {
+      background: var(--studio-header-action-bg, transparent);
+      border-color: var(--studio-header-action-border, transparent);
+    }
+
     body.studio-ui-refresh #exportPdfBtn {
-      background: var(--panel-2);
+      background: var(--studio-header-filled-bg, var(--panel-2));
       color: var(--text);
-      border-color: transparent;
+      border-color: var(--studio-header-action-border, transparent);
     }
 
     body.studio-ui-refresh #reviewNotesBtn.is-active,
@@ -2610,7 +2684,7 @@
     body.studio-ui-refresh .source-meta {
       display: block;
       padding: 0;
-      border-bottom: 1px solid var(--border-muted);
+      border-bottom: 1px solid var(--panel-border);
       position: relative;
       z-index: 20;
       overflow: visible;
@@ -2620,14 +2694,14 @@
       padding: 7px;
     }
 
-    body.studio-ui-refresh textarea {
-      font-size: 12px;
+    body.studio-ui-refresh #sourceText {
+      font-size: var(--studio-editor-font-size);
       line-height: 1.42;
     }
 
     body.studio-ui-refresh .editor-highlight,
     body.studio-ui-refresh .editor-line-number-measure {
-      font-size: 12px;
+      font-size: var(--studio-editor-font-size);
       line-height: 1.42;
     }
 
@@ -2638,7 +2712,7 @@
 
     body.studio-ui-refresh .editor-line-number-gutter-content {
       padding: 9px 7px 9px 0;
-      font-size: 11px;
+      font-size: var(--studio-editor-line-number-font-size);
       line-height: 1.42;
     }
 
@@ -2657,12 +2731,21 @@
       font-size: 13.5px;
     }
 
+    body.studio-ui-refresh #rightPane .rendered-markdown {
+      font-size: var(--studio-response-font-size);
+    }
+
     body.studio-ui-refresh .plain-markdown,
     body.studio-ui-refresh .response-markdown-highlight {
       font-size: 12px;
       line-height: 1.42;
     }
 
+    body.studio-ui-refresh #rightPane .plain-markdown,
+    body.studio-ui-refresh #rightPane .response-markdown-highlight {
+      font-size: var(--studio-response-raw-font-size);
+    }
+
     body.studio-ui-refresh .rendered-markdown pre {
       padding: 11px 13px;
     }
@@ -2682,7 +2765,7 @@
 
     body.studio-ui-refresh .trace-output {
       padding: 9px 10px;
-      font-size: 12px;
+      font-size: var(--studio-working-font-size);
       line-height: 1.42;
     }
 
@@ -2715,6 +2798,22 @@
       min-width: max-content;
     }
 
+    body.studio-ui-refresh .studio-refresh-toolbar button,
+    body.studio-ui-refresh .studio-refresh-toolbar select {
+      font-size: 12px;
+    }
+
+    body.studio-ui-refresh .studio-refresh-toolbar button:not(#sendRunBtn):not(#queueSteerBtn):not(.request-stop-active),
+    body.studio-ui-refresh .studio-refresh-toolbar select {
+      color: color-mix(in srgb, var(--text) 72%, var(--muted));
+      font-weight: 500;
+    }
+
+    body.studio-ui-refresh .studio-refresh-toolbar button:not(#sendRunBtn):not(#queueSteerBtn):not(.request-stop-active):hover,
+    body.studio-ui-refresh .studio-refresh-toolbar select:not(:disabled):hover {
+      color: var(--text);
+    }
+
     body.studio-ui-refresh .studio-refresh-chip {
       display: inline-flex;
       align-items: center;
@@ -2724,6 +2823,13 @@
       white-space: nowrap;
       padding: 5px 8px;
       font-size: 13px;
+      font-weight: 500;
+    }
+
+    body.studio-ui-refresh .studio-refresh-toolbar .studio-refresh-chip {
+      color: color-mix(in srgb, var(--text) 72%, var(--muted));
+      font-size: 12px;
+      font-weight: 500;
     }
 
     body.studio-ui-refresh .studio-refresh-chip::after {
@@ -2734,8 +2840,9 @@
       transform: translateY(-1px);
     }
 
-    body.studio-ui-refresh .studio-refresh-chip.is-open {
-      background: var(--panel-2);
+    body.studio-ui-refresh .studio-refresh-chip.is-open,
+    body.studio-ui-refresh .studio-refresh-chip:hover {
+      background: var(--studio-header-action-hover-bg, var(--panel-2));
       color: var(--text);
     }
 
@@ -2752,10 +2859,10 @@
       right: 0;
       width: min(420px, calc(100vw - 48px));
       padding: 10px;
-      border: 1px solid var(--border);
+      border: 1px solid var(--panel-border);
       border-radius: 12px;
       background: var(--panel);
-      box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
+      box-shadow: 0 18px 46px var(--shadow-color);
       z-index: 100;
     }
 
@@ -2775,7 +2882,7 @@
 
     body.studio-ui-refresh .studio-refresh-menu-section {
       padding: 8px 0 6px;
-      border-top: 1px solid var(--border-muted);
+      border-top: 1px solid var(--border-subtle);
     }
 
     body.studio-ui-refresh .studio-refresh-menu-section:first-child {
@@ -2787,9 +2894,9 @@
       margin: 0 6px 6px;
       color: var(--muted);
       font-size: 11px;
-      font-weight: 700;
+      font-weight: 650;
       text-transform: uppercase;
-      letter-spacing: 0.08em;
+      letter-spacing: 0.06em;
     }
 
     body.studio-ui-refresh .studio-refresh-menu-item {
@@ -2808,6 +2915,7 @@
       border-color: transparent;
       background: transparent;
       color: var(--text);
+      font-weight: 450;
     }
 
     body.studio-ui-refresh .studio-refresh-menu #critiqueBtn {
@@ -2817,7 +2925,7 @@
 
     body.studio-ui-refresh .studio-refresh-menu-item > button:not(:disabled):hover,
     body.studio-ui-refresh .studio-refresh-menu-item > select:not(:disabled):hover {
-      background: var(--panel-2);
+      background: var(--studio-header-action-hover-bg, var(--panel-2));
     }
 
     body.studio-ui-refresh #copyDraftBtn:only-child {