pi-studio 0.9.23 → 0.9.25

package/client/studio.css

@@ -350,31 +350,34 @@
     }
 
     .pane-focus-btn.is-active {
-      background: var(--accent);
-      border-color: var(--accent);
-      color: var(--accent-contrast);
+      background: var(--panel);
+      border-color: var(--control-border);
+      color: var(--accent);
       font-weight: 600;
     }
 
     button.pane-focus-btn.is-active:not(:disabled):hover {
-      background: var(--accent);
-      border-color: var(--accent);
-      color: var(--accent-contrast);
-      filter: brightness(0.95);
+      background: var(--panel-2);
+      border-color: var(--control-border);
+      color: var(--accent);
     }
 
     #scratchpadBtn.has-content,
     #reviewNotesBtn.has-content,
     #reviewNotesBtn.is-active,
     #outlineBtn.is-active {
-      border-color: var(--accent);
+      background: var(--panel);
+      border-color: var(--control-border);
       color: var(--accent);
       font-weight: 600;
     }
 
-    #reviewNotesBtn.is-active,
-    #outlineBtn.is-active {
-      background: var(--accent-soft);
+    #scratchpadBtn.has-content:not(:disabled):hover,
+    #reviewNotesBtn.has-content:not(:disabled):hover,
+    #reviewNotesBtn.is-active:not(:disabled):hover,
+    #outlineBtn.is-active:not(:disabled):hover {
+      background: var(--panel-2);
+      color: var(--accent);
     }
 
     .section-header select {
@@ -2529,9 +2532,10 @@
 
     .rendered-markdown .studio-html-artifact-comment-btn.is-active,
     .rendered-markdown .studio-html-artifact-shell.is-comment-mode .studio-html-artifact-comment-btn.is-active {
-      background: var(--accent-soft);
-      border-color: var(--accent);
+      background: var(--panel);
+      border-color: var(--accent-soft-strong);
       color: var(--accent);
+      font-weight: 600;
     }
 
     .rendered-markdown .studio-html-artifact-zoom-controls {
@@ -2920,6 +2924,295 @@
       flex: 0 0 auto;
     }
 
+    #critiqueView.git-changes-host {
+      flex: 1 1 auto;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      padding: 0;
+    }
+
+    .git-changes-panel {
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 auto;
+      min-height: 0;
+      height: 100%;
+      gap: 0;
+      color: var(--text);
+      font-family: var(--font-ui);
+      font-size: var(--studio-response-font-size);
+    }
+
+    .git-changes-toolbar {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 14px;
+      padding: 10px 12px;
+      border-bottom: 1px solid var(--panel-border);
+      background: var(--panel-2);
+    }
+
+    .git-changes-title-group {
+      min-width: 0;
+      display: grid;
+      gap: 3px;
+    }
+
+    .git-changes-title {
+      color: var(--text);
+      font-size: 13px;
+      font-weight: 700;
+    }
+
+    .git-changes-subtitle,
+    .git-changes-root {
+      color: var(--studio-info-text, var(--muted));
+      font-size: 12px;
+      line-height: 1.35;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .git-changes-actions {
+      display: inline-flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      flex: 0 0 auto;
+    }
+
+    .git-changes-actions button {
+      padding: 6px 10px;
+      font-size: 12px;
+    }
+
+    .git-changes-notice {
+      margin: 10px 12px 0;
+      padding: 8px 10px;
+      border: 1px solid var(--control-border);
+      border-radius: 10px;
+      color: var(--studio-info-text, var(--muted));
+      background: var(--panel);
+      font-size: 12px;
+    }
+
+    .git-changes-notice-error {
+      color: var(--error);
+      border-color: var(--error);
+      background: var(--error-soft);
+    }
+
+    .git-changes-body {
+      display: grid;
+      grid-template-columns: minmax(150px, clamp(170px, 28%, 260px)) minmax(0, 1fr);
+      min-height: 0;
+      flex: 1 1 auto;
+      overflow: hidden;
+    }
+
+    .git-changes-file-list {
+      min-width: 0;
+      min-height: 0;
+      overflow: auto;
+      overscroll-behavior: contain;
+      padding: 12px;
+      display: grid;
+      align-content: start;
+      gap: 8px;
+      border-right: 1px solid var(--panel-border);
+      background: var(--panel);
+    }
+
+    .git-changes-file {
+      width: 100%;
+      min-width: 0;
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      grid-template-areas:
+        "icon name status"
+        "icon stats status";
+      gap: 3px 10px;
+      align-items: center;
+      text-align: left;
+      padding: 9px 10px;
+      border-radius: 10px;
+      border-color: var(--border-subtle);
+      background: var(--panel-2);
+    }
+
+    .git-changes-file.is-selected {
+      border-color: var(--accent-soft-strong);
+      color: var(--accent);
+      background: var(--panel-2);
+    }
+
+    .git-changes-file-icon {
+      grid-area: icon;
+      min-width: 28px;
+      height: 22px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid var(--control-border);
+      border-radius: 7px;
+      color: var(--studio-info-text, var(--muted));
+      font-size: 11px;
+      font-family: var(--font-mono);
+      font-weight: 700;
+    }
+
+    .git-changes-file-name {
+      grid-area: name;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--text);
+      font-weight: 600;
+    }
+
+    .git-changes-file.is-selected .git-changes-file-name {
+      color: var(--accent);
+    }
+
+    .git-changes-file-status {
+      grid-area: status;
+      justify-self: end;
+      padding: 2px 8px;
+      border: 1px solid var(--control-border);
+      border-radius: 999px;
+      color: var(--studio-info-text, var(--muted));
+      font-size: 11px;
+      line-height: 1.2;
+      background: var(--panel);
+    }
+
+    .git-changes-stats {
+      grid-area: stats;
+      display: inline-flex;
+      gap: 8px;
+      font-family: var(--font-mono);
+      font-size: 11px;
+    }
+
+    .git-changes-additions {
+      color: color-mix(in srgb, var(--ok) 72%, var(--text));
+    }
+
+    .git-changes-deletions {
+      color: color-mix(in srgb, var(--error) 72%, var(--text));
+    }
+
+    .git-changes-diff-pane {
+      min-width: 0;
+      min-height: 0;
+      overflow-x: hidden;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      background: var(--panel);
+    }
+
+    #critiqueView.git-changes-host .git-changes-diff {
+      margin: 0;
+      padding: 8px 0 10px;
+      border: 0;
+      border-radius: 0;
+      min-height: 100%;
+      overflow: visible;
+      background: var(--panel);
+      color: var(--text);
+      font-family: var(--font-mono);
+      font-size: var(--studio-response-raw-font-size);
+      line-height: 1.45;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+      word-break: break-word;
+    }
+
+    #critiqueView.git-changes-host .git-changes-diff code,
+    #critiqueView.git-changes-host .git-changes-diff code > span {
+      color: inherit;
+      font-size: inherit;
+      white-space: inherit;
+    }
+
+    .git-changes-line {
+      display: block;
+      padding: 0 18px;
+      min-height: 1.45em;
+    }
+
+    .git-changes-line-meta {
+      color: var(--studio-link, var(--accent));
+      font-weight: 600;
+    }
+
+    .git-changes-line-add {
+      color: color-mix(in srgb, var(--ok) 62%, var(--text));
+      background: var(--diff-added-bg);
+    }
+
+    .git-changes-line-del {
+      color: color-mix(in srgb, var(--error) 62%, var(--text));
+      background: var(--diff-removed-bg);
+    }
+
+    .git-changes-empty {
+      padding: 18px;
+      color: var(--studio-info-text, var(--muted));
+      font-size: 13px;
+    }
+
+    @container (max-width: 780px) {
+      .git-changes-toolbar {
+        gap: 10px;
+      }
+      .git-changes-actions {
+        gap: 6px;
+      }
+      .git-changes-actions button {
+        padding: 5px 8px;
+      }
+      .git-changes-body {
+        grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
+      }
+      .git-changes-file-list {
+        padding: 10px 8px;
+      }
+      .git-changes-file {
+        grid-template-columns: auto minmax(0, 1fr);
+        grid-template-areas:
+          "icon name"
+          "icon stats";
+        gap: 3px 8px;
+        padding: 8px;
+      }
+      .git-changes-file-status {
+        display: none;
+      }
+      .git-changes-file-icon {
+        min-width: 24px;
+        height: 20px;
+        font-size: 10px;
+      }
+    }
+
+    @container (max-width: 480px) {
+      .git-changes-body {
+        grid-template-columns: 1fr;
+        grid-template-rows: minmax(120px, 0.34fr) minmax(0, 0.66fr);
+      }
+      .git-changes-file-list {
+        max-height: none;
+        border-right: 0;
+        border-bottom: 1px solid var(--panel-border);
+      }
+    }
+
     .files-panel {
       display: flex;
       flex-direction: column;
@@ -3108,9 +3401,9 @@
     }
 
     .trace-filter-btn.is-active {
-      border-color: var(--accent-soft-strong);
-      background: var(--accent-soft);
-      color: var(--accent);
+      border-color: var(--control-border);
+      background: var(--panel-2);
+      color: var(--text);
       font-weight: 600;
     }
 
@@ -3148,16 +3441,16 @@
 
     .trace-entry-status.trace-entry-status-streaming,
     .trace-entry-status.trace-entry-status-pending {
-      color: var(--accent);
-      border-color: var(--accent-soft-strong);
-      background: var(--accent-soft);
+      color: color-mix(in srgb, var(--accent) 72%, var(--text));
+      border-color: var(--control-border);
+      background: transparent;
     }
 
     .trace-summary-status.trace-status-complete,
     .trace-entry-status.trace-entry-status-complete {
-      color: var(--ok);
-      border-color: var(--ok-border);
-      background: var(--ok-soft);
+      color: color-mix(in srgb, var(--ok) 68%, var(--text));
+      border-color: var(--control-border);
+      background: transparent;
     }
 
     .trace-entry-status.trace-entry-status-error {
@@ -3256,6 +3549,118 @@
       background: var(--panel);
     }
 
+    .trace-tool-input {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-width: 0;
+    }
+
+    .trace-tool-fields {
+      display: grid;
+      gap: 5px;
+      padding: 8px 9px;
+      border: 1px solid var(--panel-border);
+      border-radius: 8px;
+      background: var(--panel);
+    }
+
+    .trace-tool-field {
+      display: grid;
+      grid-template-columns: minmax(58px, auto) minmax(0, 1fr);
+      gap: 8px;
+      align-items: baseline;
+      min-width: 0;
+      font-size: 12px;
+    }
+
+    .trace-tool-field-label,
+    .trace-tool-code-label {
+      color: var(--muted);
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+
+    .trace-tool-field-value {
+      min-width: 0;
+      color: var(--text);
+      overflow-wrap: anywhere;
+      white-space: pre-wrap;
+      font-family: var(--font-mono);
+      font-size: 12px;
+    }
+
+    .trace-tool-path {
+      color: var(--studio-info-text, var(--muted));
+    }
+
+    .trace-tool-change-list {
+      display: flex;
+      flex-direction: column;
+      gap: 7px;
+    }
+
+    .trace-tool-details {
+      border: 1px solid var(--panel-border);
+      border-radius: 8px;
+      background: var(--panel);
+      overflow: hidden;
+    }
+
+    .trace-tool-details > summary {
+      cursor: pointer;
+      user-select: none;
+      padding: 7px 9px;
+      color: var(--studio-info-text, var(--muted));
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 1.35;
+    }
+
+    .trace-tool-details[open] > summary {
+      border-bottom: 1px solid var(--border-subtle);
+      background: var(--panel-2);
+    }
+
+    .trace-tool-details-body,
+    .trace-tool-change-body {
+      padding: 8px;
+    }
+
+    .trace-tool-change-grid {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      gap: 8px;
+    }
+
+    .trace-tool-change-column {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+      min-width: 0;
+    }
+
+    .trace-tool-input-command > .trace-output,
+    .trace-tool-details-body .trace-output,
+    .trace-tool-change-column .trace-output {
+      border: 1px solid var(--panel-border);
+      border-radius: 8px;
+      background: var(--panel);
+    }
+
+    .trace-tool-raw-input > summary {
+      color: var(--muted);
+      font-weight: 500;
+    }
+
+    @container (max-width: 720px) {
+      .trace-tool-change-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
     .trace-image-gallery {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
@@ -4081,6 +4486,39 @@
       display: none !important;
     }
 
+    .scratchpad-recent-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 12px;
+      margin-bottom: 10px;
+    }
+
+    .scratchpad-recent-heading-group {
+      min-width: 0;
+    }
+
+    .scratchpad-recent-heading {
+      color: var(--text);
+      font-size: 12px;
+      font-weight: 700;
+      line-height: 1.25;
+    }
+
+    .scratchpad-recent-subtitle {
+      margin-top: 2px;
+      color: var(--studio-info-text, var(--muted));
+      font-size: 11px;
+      line-height: 1.35;
+    }
+
+    .scratchpad-recent-hide-btn {
+      flex: 0 0 auto;
+      padding: 4px 8px;
+      font-size: 11px;
+      line-height: 1.1;
+    }
+
     .scratchpad-recent-empty,
     .scratchpad-recent-loading {
       color: var(--studio-info-text, var(--muted));
@@ -4750,9 +5188,9 @@
 
     body.studio-ui-refresh #leftFocusBtn.is-active,
     body.studio-ui-refresh #rightFocusBtn.is-active {
-      background: var(--accent);
-      border-color: var(--accent);
-      color: var(--accent-contrast);
+      background: var(--studio-header-action-bg, transparent);
+      border-color: var(--studio-header-action-border, transparent);
+      color: var(--accent);
     }
 
     body.studio-ui-refresh #sourceBadge,
@@ -4878,9 +5316,18 @@
     body.studio-ui-refresh #outlineBtn.is-active,
     body.studio-ui-refresh #scratchpadBtn.has-content,
     body.studio-ui-refresh #reviewNotesBtn.has-content {
-      background: var(--accent-soft);
+      background: var(--studio-header-action-bg, transparent);
+      color: var(--accent);
+      border-color: var(--studio-header-action-border, transparent);
+      font-weight: 600;
+    }
+
+    body.studio-ui-refresh #reviewNotesBtn.is-active:not(:disabled):hover,
+    body.studio-ui-refresh #outlineBtn.is-active:not(:disabled):hover,
+    body.studio-ui-refresh #scratchpadBtn.has-content:not(:disabled):hover,
+    body.studio-ui-refresh #reviewNotesBtn.has-content:not(:disabled):hover {
+      background: var(--studio-header-action-hover-bg, var(--panel-2));
       color: var(--accent);
-      border-color: transparent;
     }
 
     body.studio-ui-refresh .source-wrap {
@@ -5176,7 +5623,8 @@
       font-weight: 450;
     }
 
-    body.studio-ui-refresh .studio-refresh-menu-item > .source-origin-summary {
+    body.studio-ui-refresh .studio-refresh-menu-item > .source-origin-summary,
+    body.studio-ui-refresh .studio-refresh-menu-item > .source-session-summary {
       width: 100%;
       border-color: var(--border-subtle);
       background: var(--panel-2);