pi-studio 0.5.58 → 0.6.0

package/client/studio.css

@@ -2113,7 +2113,13 @@
 
     .review-notes-dock-footer .scratchpad-actions {
       width: 100%;
-      justify-content: space-between;
+      gap: 6px;
+      justify-content: flex-end;
+    }
+
+    .review-notes-dock-footer .scratchpad-actions button {
+      padding: 5px 7px;
+      font-size: 11px;
     }
 
     .outline-list {
@@ -2314,3 +2320,579 @@
         grid-template-columns: 1fr;
       }
     }
+
+    /* Default refreshed Studio layout. Classic layout remains available with ?uiRefresh=0 or the footer UI switch. */
+    body.studio-ui-refresh {
+      font-size: 13px;
+    }
+
+    body.studio-ui-refresh > header {
+      padding: 8px 12px;
+      gap: 9px;
+    }
+
+    body.studio-ui-refresh h1 {
+      font-size: 16px;
+    }
+
+    body.studio-ui-refresh .app-logo {
+      font-size: 18px;
+    }
+
+    body.studio-ui-refresh .app-subtitle {
+      font-size: 10px;
+    }
+
+    body.studio-ui-refresh > header .controls {
+      gap: 5px;
+    }
+
+    body.studio-ui-refresh > header button,
+    body.studio-ui-refresh > header .file-label,
+    body.studio-ui-refresh #responseActions button,
+    body.studio-ui-refresh #responseActions select {
+      padding: 5px 7px;
+      font-size: 12px;
+    }
+
+    body.studio-ui-refresh main {
+      gap: 9px;
+      padding: 9px;
+    }
+
+    body.studio-ui-refresh footer {
+      padding: 7px 9px;
+      font-size: 11px;
+    }
+
+    .studio-ui-refresh-toggle {
+      opacity: 0.9;
+    }
+
+    .studio-ui-refresh-toggle:not(:disabled):hover {
+      opacity: 1;
+    }
+
+    body.studio-ui-refresh[data-studio-mode="editor-only"] #leftSectionHeader .section-header-main::before,
+    body.studio-ui-refresh[data-studio-mode="editor-only"] #rightSectionHeader .section-header-main::before {
+      content: none;
+      display: none;
+    }
+
+    body.studio-ui-refresh #leftSectionHeader,
+    body.studio-ui-refresh #rightSectionHeader {
+      position: relative;
+      z-index: 30;
+      display: grid;
+      gap: 6px;
+      background: transparent;
+      padding: 7px 9px 6px;
+      overflow: visible;
+    }
+
+    body.studio-ui-refresh #leftSectionHeader {
+      grid-template-columns: 1fr;
+      align-items: stretch;
+    }
+
+    body.studio-ui-refresh #rightSectionHeader {
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: center;
+    }
+
+    body.studio-ui-refresh .studio-refresh-utility-left,
+    body.studio-ui-refresh .studio-refresh-pane-identity,
+    body.studio-ui-refresh .studio-refresh-pane-tools,
+    body.studio-ui-refresh .studio-refresh-title-group,
+    body.studio-ui-refresh .studio-refresh-context-group,
+    body.studio-ui-refresh .studio-refresh-action-line {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      min-width: 0;
+      flex-wrap: wrap;
+    }
+
+    body.studio-ui-refresh .studio-refresh-header-top,
+    body.studio-ui-refresh .studio-refresh-header-utility {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 9px;
+      min-width: 0;
+    }
+
+    body.studio-ui-refresh .studio-refresh-pane-identity {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      align-items: center;
+      column-gap: 9px;
+      row-gap: 5px;
+    }
+
+    body.studio-ui-refresh .studio-refresh-title-group,
+    body.studio-ui-refresh .studio-refresh-context-group,
+    body.studio-ui-refresh .studio-refresh-utility-left {
+      flex-wrap: nowrap;
+    }
+
+    body.studio-ui-refresh .studio-refresh-context-group,
+    body.studio-ui-refresh .studio-refresh-utility-left {
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    body.studio-ui-refresh .studio-refresh-title-group {
+      gap: 2px;
+    }
+
+    body.studio-ui-refresh .studio-refresh-pane-tools {
+      justify-content: flex-end;
+      flex-wrap: nowrap;
+    }
+
+    body.studio-ui-refresh .studio-refresh-sep {
+      display: inline-block;
+      width: 1px;
+      height: 16px;
+      background: var(--border-muted);
+      margin: 0 1px;
+      flex: 0 0 1px;
+    }
+
+    body.studio-ui-refresh .studio-refresh-icon {
+      width: 15px;
+      height: 15px;
+      stroke: currentColor;
+      stroke-width: 1.85;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      fill: none;
+      pointer-events: none;
+    }
+
+    body.studio-ui-refresh #leftSectionHeader select,
+    body.studio-ui-refresh #leftSectionHeader button,
+    body.studio-ui-refresh #rightSectionHeader select,
+    body.studio-ui-refresh #rightSectionHeader button,
+    body.studio-ui-refresh .studio-refresh-toolbar button,
+    body.studio-ui-refresh .studio-refresh-toolbar select {
+      border-color: transparent;
+      background: transparent;
+      font-size: 13px;
+    }
+
+    body.studio-ui-refresh #leftSectionHeader select:hover,
+    body.studio-ui-refresh #leftSectionHeader button:not(:disabled):hover,
+    body.studio-ui-refresh #rightSectionHeader select:hover,
+    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);
+    }
+
+    body.studio-ui-refresh #leftSectionHeader #editorViewSelect,
+    body.studio-ui-refresh #rightSectionHeader #rightViewSelect {
+      font-size: 14px;
+      font-weight: 750;
+      padding: 3px 5px;
+      max-width: 230px;
+    }
+
+    body.studio-ui-refresh .studio-refresh-static-title {
+      color: var(--text);
+      font-size: 14px;
+      font-weight: 700;
+      padding: 3px 5px;
+      max-width: 230px;
+      white-space: nowrap;
+    }
+
+    body.studio-ui-refresh #leftFocusBtn,
+    body.studio-ui-refresh #rightFocusBtn {
+      width: 29px;
+      min-width: 29px;
+      min-height: 29px;
+      padding: 0;
+      color: var(--muted);
+      align-items: center;
+      justify-content: center;
+    }
+
+    body.studio-ui-refresh #sourceBadge,
+    body.studio-ui-refresh #resourceDirBtn,
+    body.studio-ui-refresh #resourceDirLabel {
+      border-color: transparent;
+      background: transparent;
+      padding: 3px 5px;
+      font-size: 13px;
+      border-radius: 8px;
+    }
+
+    body.studio-ui-refresh #sourceBadge {
+      color: var(--text);
+      max-width: min(34rem, 54vw);
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    body.studio-ui-refresh #resourceDirBtn,
+    body.studio-ui-refresh #resourceDirLabel,
+    body.studio-ui-refresh #reviewNotesBtn,
+    body.studio-ui-refresh #outlineBtn,
+    body.studio-ui-refresh #scratchpadBtn,
+    body.studio-ui-refresh .studio-refresh-tool-tab {
+      color: var(--text);
+    }
+
+    body.studio-ui-refresh #resourceDirInputWrap.visible {
+      display: inline-flex;
+    }
+
+    body.studio-ui-refresh #syncBadge {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      min-height: 24px;
+      border: 0;
+      border-radius: 999px;
+      padding: 2px 8px;
+      background: var(--panel-2);
+      color: var(--muted);
+      opacity: 1;
+    }
+
+    body.studio-ui-refresh #syncBadge[hidden] {
+      display: none !important;
+    }
+
+    body.studio-ui-refresh #syncBadge::before {
+      content: "";
+      width: 6px;
+      height: 6px;
+      border-radius: 999px;
+      background: var(--success, #22c55e);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #22c55e) 14%, transparent);
+    }
+
+    body.studio-ui-refresh #reviewNotesBtn,
+    body.studio-ui-refresh #outlineBtn,
+    body.studio-ui-refresh #scratchpadBtn,
+    body.studio-ui-refresh #exportPdfBtn,
+    body.studio-ui-refresh .studio-refresh-tool-tab {
+      font-weight: 500;
+      padding: 5px 8px;
+      border-radius: 8px;
+    }
+
+    body.studio-ui-refresh #exportPdfBtn {
+      background: var(--panel-2);
+      color: var(--text);
+      border-color: transparent;
+    }
+
+    body.studio-ui-refresh #reviewNotesBtn.is-active,
+    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);
+      color: var(--accent);
+      border-color: transparent;
+    }
+
+    body.studio-ui-refresh .source-wrap {
+      padding: 0;
+      gap: 0;
+    }
+
+    body.studio-ui-refresh .source-meta {
+      display: block;
+      padding: 0;
+      border-bottom: 1px solid var(--border-muted);
+      position: relative;
+      z-index: 20;
+      overflow: visible;
+    }
+
+    body.studio-ui-refresh .source-body {
+      padding: 7px;
+    }
+
+    body.studio-ui-refresh textarea {
+      font-size: 12px;
+      line-height: 1.42;
+    }
+
+    body.studio-ui-refresh .editor-highlight,
+    body.studio-ui-refresh .editor-line-number-measure {
+      font-size: 12px;
+      line-height: 1.42;
+    }
+
+    body.studio-ui-refresh #sourceText,
+    body.studio-ui-refresh .editor-highlight {
+      padding: 9px 9px 9px calc(9px + var(--editor-review-note-gutter-width) + var(--editor-line-number-gutter-width));
+    }
+
+    body.studio-ui-refresh .editor-line-number-gutter-content {
+      padding: 9px 7px 9px 0;
+      font-size: 11px;
+      line-height: 1.42;
+    }
+
+    body.studio-ui-refresh .editor-review-note-gutter-content {
+      padding: 9px 4px;
+    }
+
+    body.studio-ui-refresh .panel-scroll {
+      padding: 11px;
+      line-height: 1.48;
+      font-size: 13px;
+    }
+
+    body.studio-ui-refresh .rendered-markdown {
+      line-height: 1.52;
+      font-size: 13.5px;
+    }
+
+    body.studio-ui-refresh .plain-markdown,
+    body.studio-ui-refresh .response-markdown-highlight {
+      font-size: 12px;
+      line-height: 1.42;
+    }
+
+    body.studio-ui-refresh .rendered-markdown pre {
+      padding: 11px 13px;
+    }
+
+    body.studio-ui-refresh .trace-panel,
+    body.studio-ui-refresh .trace-card,
+    body.studio-ui-refresh .trace-toolbar,
+    body.studio-ui-refresh .trace-summary,
+    body.studio-ui-refresh .trace-controls,
+    body.studio-ui-refresh .trace-card-header {
+      gap: 7px;
+    }
+
+    body.studio-ui-refresh .trace-card {
+      padding: 9px 11px;
+    }
+
+    body.studio-ui-refresh .trace-output {
+      padding: 9px 10px;
+      font-size: 12px;
+      line-height: 1.42;
+    }
+
+    body.studio-ui-refresh .studio-refresh-toolbar {
+      position: relative;
+      padding: 8px 10px 9px;
+      overflow: visible;
+    }
+
+    body.studio-ui-refresh .studio-refresh-toolbar-main {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 10px;
+      align-items: start;
+      min-width: 0;
+    }
+
+    body.studio-ui-refresh .studio-refresh-toolbar-actions {
+      display: grid;
+      gap: 6px;
+      justify-items: start;
+      min-width: 0;
+    }
+
+    body.studio-ui-refresh .studio-refresh-toolbar-state {
+      display: grid;
+      gap: 6px;
+      justify-items: end;
+      align-content: start;
+      min-width: max-content;
+    }
+
+    body.studio-ui-refresh .studio-refresh-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      border-radius: 8px;
+      color: var(--text);
+      white-space: nowrap;
+      padding: 5px 8px;
+      font-size: 13px;
+    }
+
+    body.studio-ui-refresh .studio-refresh-chip::after {
+      content: "⌄";
+      color: var(--muted);
+      font-size: 14px;
+      line-height: 1;
+      transform: translateY(-1px);
+    }
+
+    body.studio-ui-refresh .studio-refresh-chip.is-open {
+      background: var(--panel-2);
+      color: var(--text);
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu-anchor {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      overflow: visible;
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu {
+      position: absolute;
+      top: calc(100% + 8px);
+      right: 0;
+      width: min(420px, calc(100vw - 48px));
+      padding: 10px;
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      background: var(--panel);
+      box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
+      z-index: 100;
+    }
+
+    body.studio-ui-refresh .studio-refresh-review-anchor .studio-refresh-menu {
+      width: min(360px, calc(100vw - 48px));
+      left: auto;
+      right: 0;
+    }
+
+    body.studio-ui-refresh .studio-refresh-view-anchor .studio-refresh-menu {
+      width: min(320px, calc(100vw - 48px));
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu[hidden] {
+      display: none !important;
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu-section {
+      padding: 8px 0 6px;
+      border-top: 1px solid var(--border-muted);
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu-section:first-child {
+      border-top: 0;
+      padding-top: 0;
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu-heading {
+      margin: 0 6px 6px;
+      color: var(--muted);
+      font-size: 11px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+      min-width: 0;
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu-item > button,
+    body.studio-ui-refresh .studio-refresh-menu-item > select {
+      width: 100%;
+      justify-content: flex-start;
+      text-align: left;
+      border-color: transparent;
+      background: transparent;
+      color: var(--text);
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu #critiqueBtn {
+      justify-content: flex-start;
+      text-align: left;
+    }
+
+    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);
+    }
+
+    body.studio-ui-refresh #copyDraftBtn:only-child {
+      min-height: 29px;
+      padding: 4px 8px;
+    }
+
+    body.studio-ui-refresh #sendRunBtn,
+    body.studio-ui-refresh #queueSteerBtn,
+    body.studio-ui-refresh #loadResponseBtn:not([hidden]) {
+      height: 28px;
+      min-height: 28px;
+      padding: 4px 9px;
+      font-size: 12px;
+      line-height: 1.2;
+      border-radius: 8px;
+    }
+
+    body.studio-ui-refresh #sendRunBtn,
+    body.studio-ui-refresh #queueSteerBtn {
+      min-width: 8.6rem;
+    }
+
+    body.studio-ui-refresh #queueSteerBtn:not(:disabled) {
+      background: var(--accent);
+      border-color: var(--accent);
+      color: var(--accent-contrast);
+      font-weight: 600;
+    }
+
+    body.studio-ui-refresh #queueSteerBtn:not(:disabled):hover {
+      background: var(--accent);
+      filter: brightness(0.95);
+    }
+
+    body.studio-ui-refresh .studio-refresh-review-btn.request-stop-active {
+      background: var(--error);
+      border-color: var(--error);
+      color: var(--error-contrast);
+      font-weight: 600;
+    }
+
+    body.studio-ui-refresh .studio-refresh-review-btn.request-stop-active::after {
+      content: none;
+    }
+
+    body.studio-ui-refresh .studio-refresh-menu #critiqueBtn.request-stop-active {
+      background: var(--error);
+      border-color: var(--error);
+      color: var(--error-contrast);
+      font-weight: 600;
+    }
+
+    @media (max-width: 1280px) {
+      body.studio-ui-refresh #rightSectionHeader,
+      body.studio-ui-refresh .studio-refresh-header-top,
+      body.studio-ui-refresh .studio-refresh-header-utility,
+      body.studio-ui-refresh .studio-refresh-toolbar-main,
+      body.studio-ui-refresh .studio-refresh-pane-identity {
+        grid-template-columns: 1fr;
+      }
+
+      body.studio-ui-refresh .studio-refresh-pane-tools,
+      body.studio-ui-refresh .studio-refresh-toolbar-state {
+        justify-content: flex-start;
+        justify-items: start;
+      }
+
+      body.studio-ui-refresh .studio-refresh-pane-tools,
+      body.studio-ui-refresh .studio-refresh-title-group,
+      body.studio-ui-refresh .studio-refresh-utility-left {
+        flex-wrap: wrap;
+      }
+
+      body.studio-ui-refresh .studio-refresh-toolbar-state {
+        min-width: 0;
+      }
+    }

package/index.ts

@@ -5764,34 +5764,74 @@ function createEmptyStudioTraceState(): StudioTraceState {
 	};
 }
 
+function sanitizeStudioTraceOutputText(text: string): string {
+	return String(text || "")
+		.replace(/data:image\/([a-zA-Z0-9.+-]+);base64,[A-Za-z0-9+/=\r\n]+/g, (_match, subtype: string) => `[Image: image/${subtype || "unknown"} data omitted]`)
+		.replace(/(\"(?:data|image|base64|content)\"\s*:\s*\")[A-Za-z0-9+/=]{1000,}(\")/g, "$1[base64 data omitted]$2")
+		.replace(/\b[A-Za-z0-9+/]{3000,}={0,2}\b/g, "[base64 data omitted]");
+}
+
+function isStudioTraceImageBlock(block: unknown): boolean {
+	if (!block || typeof block !== "object") return false;
+	const payload = block as Record<string, unknown>;
+	const type = typeof payload.type === "string" ? payload.type.toLowerCase() : "";
+	if (type.includes("image")) return true;
+	const mime = typeof payload.mimeType === "string"
+		? payload.mimeType
+		: (typeof payload.media_type === "string" ? payload.media_type : "");
+	if (mime.toLowerCase().startsWith("image/")) return true;
+	const source = payload.source && typeof payload.source === "object" ? payload.source as Record<string, unknown> : null;
+	const sourceMime = source && typeof source.media_type === "string" ? source.media_type : "";
+	return sourceMime.toLowerCase().startsWith("image/");
+}
+
+function describeStudioTraceImageBlock(block: unknown): string {
+	const payload = (block && typeof block === "object") ? block as Record<string, unknown> : {};
+	const source = payload.source && typeof payload.source === "object" ? payload.source as Record<string, unknown> : null;
+	const mime = typeof payload.mimeType === "string"
+		? payload.mimeType
+		: (typeof payload.media_type === "string"
+			? payload.media_type
+			: (source && typeof source.media_type === "string" ? source.media_type : "image"));
+	return `[Image: ${mime || "image"} output omitted from Working view]`;
+}
+
+function stringifyStudioTraceObject(value: unknown): string {
+	try {
+		return sanitizeStudioTraceOutputText(JSON.stringify(value, (_key, item) => {
+			if (typeof item === "string") {
+				if (/^data:image\//i.test(item)) return "[image data URI omitted]";
+				if (/^[A-Za-z0-9+/=]{1000,}$/.test(item)) return "[base64 data omitted]";
+			}
+			return item;
+		}, 2));
+	} catch {
+		return sanitizeStudioTraceOutputText(String(value));
+	}
+}
+
 function formatStudioTraceOutput(result: unknown): string {
 	if (result == null) return "";
-	if (typeof result === "string") return result;
+	if (typeof result === "string") return sanitizeStudioTraceOutputText(result);
 	if (Array.isArray(result)) {
 		return result.map((item) => formatStudioTraceOutput(item)).filter(Boolean).join("\n");
 	}
 	if (typeof result === "object") {
+		if (isStudioTraceImageBlock(result)) return describeStudioTraceImageBlock(result);
 		const payload = result as { content?: Array<{ type?: string; text?: string }> };
 		if (Array.isArray(payload.content)) {
 			return payload.content
 				.map((block) => {
-					if (block && block.type === "text" && typeof block.text === "string") return block.text;
-					try {
-						return JSON.stringify(block, null, 2);
-					} catch {
-						return String(block);
-					}
+					if (isStudioTraceImageBlock(block)) return describeStudioTraceImageBlock(block);
+					if (block && block.type === "text" && typeof block.text === "string") return sanitizeStudioTraceOutputText(block.text);
+					return stringifyStudioTraceObject(block);
 				})
 				.filter(Boolean)
 				.join("\n");
 		}
-		try {
-			return JSON.stringify(result, null, 2);
-		} catch {
-			return String(result);
-		}
+		return stringifyStudioTraceObject(result);
 	}
-	return String(result);
+	return sanitizeStudioTraceOutputText(String(result));
 }
 
 function summarizeStudioTraceToolArgs(toolName: string, args: unknown): string | null {
@@ -6260,8 +6300,9 @@ ${cssVarsBlock}
               <div id="reviewNotesList" class="review-notes-list" aria-live="polite"></div>
               <div class="review-notes-dock-footer">
                 <div class="scratchpad-actions">
-                  <button id="reviewNotesAddBtn" type="button" title="Create a new local comment on the current editor line.">Line comment</button>
-                  <button id="reviewNotesInlineAllBtn" type="button" title="Toggle inline annotations for all non-empty comments.">All inline: Off</button>
+                  <button id="reviewNotesAddBtn" type="button" title="Create a new local comment on the current editor line.">Line</button>
+                  <button id="reviewNotesPromptBtn" type="button" title="Load local comments, line numbers, and file labels into the editor as a prompt.">Comments → prompt</button>
+                  <button id="reviewNotesInlineAllBtn" type="button" title="Toggle inline annotations for all non-empty comments.">Inline: Off</button>
                   <button id="reviewNotesDeleteAllBtn" type="button" title="Delete all local comments for this document or draft.">Delete all</button>
                   <button id="reviewNotesDoneBtn" type="button" title="Hide the comments rail.">Hide</button>
                 </div>
@@ -7228,6 +7269,20 @@ export default function (pi: ExtensionAPI) {
 			promptTriggerText: descriptor.promptTriggerText,
 		};
 		queuedStudioDirectRequests.push(queuedRequest);
+
+		// Steering is delivered into the currently running Studio turn rather than
+		// becoming a fully separate visible response request. Keep the active direct
+		// request metadata aligned with the effective prompt chain so persisted
+		// prompt metadata, response history, and "Load effective prompt" all refer
+		// to the original run plus queued steering, not just the original run.
+		if (activeRequest && activeRequest.kind === "direct") {
+			activeRequest.prompt = descriptor.prompt;
+			activeRequest.promptMode = descriptor.promptMode;
+			activeRequest.promptTriggerKind = descriptor.promptTriggerKind;
+			activeRequest.promptSteeringCount = descriptor.promptSteeringCount;
+			activeRequest.promptTriggerText = descriptor.promptTriggerText;
+		}
+
 		return queuedRequest;
 	};