pi-studio 0.6.3 → 0.6.5

package/CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.6.5] — 2026-04-30
+
+### Changed
+- Working view output blocks now show a compact 50-line preview by default with per-block **Show full** / **Collapse** controls for longer thinking, responses, and tool input/output.
+
+## [0.6.4] — 2026-04-29
+
+### Fixed
+- Fixed `@`-selected quoted file paths such as `@"folder/file.md"` so Studio commands strip the `@` prefix and surrounding quotes before resolving the file.
+- `/studio --status` now prints the full tokenized Studio URL, and SSH tunnel hints explicitly say to preserve the `?token=...` parameter.
+
 ## [0.6.3] — 2026-04-29
 
 ### Changed

package/README.md

@@ -75,7 +75,7 @@ pi -e https://github.com/omaclaren/pi-studio
 ## Notes
 
 - Local-only server (`127.0.0.1`) with tokenized Studio URLs.
-- For remote SSH sessions, keep Studio bound to localhost and use SSH local port forwarding; `/studio` prints the localhost URL and an SSH tunnel hint when SSH is detected.
+- For remote SSH sessions, keep Studio bound to localhost and use SSH local port forwarding; `/studio` and `/studio --status` print the full tokenized localhost URL. Open that URL through the tunnel, preserving the `?token=...` parameter.
 - Full Studio is a singleton per Pi session: use `/studio` to open it, `/studio-replace` to explicitly replace it, and `/studio-editor-only` for extra editing/preview tabs that do not take over the full Studio session view.
 - Studio is designed as a complement to terminal pi, not a replacement.
 - Installing pi-studio makes the optional `pi-studio-dark` and `pi-studio-light` themes available in pi's theme selector; it does not change your active theme.

package/client/studio-client.js

@@ -194,6 +194,9 @@
       let traceFilter = "all";
       let traceAutoScroll = true;
       let traceRenderRaf = null;
+      const traceExpandedOutputs = new Set();
+      const TRACE_OUTPUT_PREVIEW_MAX_LINES = 50;
+      const TRACE_OUTPUT_PREVIEW_MAX_CHARS = 8000;
       let studioRunChainActive = false;
       let queuedSteeringCount = 0;
       let agentBusyFromServer = false;
@@ -322,7 +325,11 @@
       }
 
       function replaceTraceState(nextState) {
+        const previousRunId = traceState && traceState.runId ? traceState.runId : null;
         traceState = normalizeTraceState(nextState);
+        if ((traceState.runId || null) !== previousRunId) {
+          traceExpandedOutputs.clear();
+        }
         renderTraceViewIfActive();
       }
 
@@ -2971,6 +2978,21 @@
           setTraceFilter(nextFilter);
           return;
         }
+        const outputToggleBtn = target instanceof Element ? target.closest("[data-trace-output-key]") : null;
+        if (outputToggleBtn) {
+          event.preventDefault();
+          const key = outputToggleBtn.getAttribute("data-trace-output-key") || "";
+          if (key) {
+            if (traceExpandedOutputs.has(key)) {
+              traceExpandedOutputs.delete(key);
+            } else {
+              traceExpandedOutputs.add(key);
+            }
+            traceAutoScroll = false;
+            renderTraceViewIfActive();
+          }
+          return;
+        }
         const actionBtn = target instanceof Element ? target.closest("[data-trace-action]") : null;
         if (!actionBtn) return;
         event.preventDefault();
@@ -3607,6 +3629,65 @@
         return remaining < 56;
       }
 
+      function formatTraceOutputSize(text) {
+        const value = String(text || "");
+        const chars = value.length;
+        const lines = value ? value.split(/\n/).length : 0;
+        const compactChars = chars >= 1000 ? ((chars / 1000).toFixed(chars >= 10_000 ? 0 : 1) + "k") : String(chars);
+        return lines + " line" + (lines === 1 ? "" : "s") + ", " + compactChars + " chars";
+      }
+
+      function getTraceOutputPreview(text) {
+        const value = String(text || "");
+        const lines = value.split(/\n/);
+        let preview = value;
+        let truncated = false;
+        if (lines.length > TRACE_OUTPUT_PREVIEW_MAX_LINES) {
+          preview = lines.slice(0, TRACE_OUTPUT_PREVIEW_MAX_LINES).join("\n");
+          truncated = true;
+        }
+        if (preview.length > TRACE_OUTPUT_PREVIEW_MAX_CHARS) {
+          preview = preview.slice(0, TRACE_OUTPUT_PREVIEW_MAX_CHARS);
+          truncated = true;
+        }
+        if (!truncated && value.length <= TRACE_OUTPUT_PREVIEW_MAX_CHARS) {
+          return { text: value, truncated: false, hiddenChars: 0, hiddenLines: 0 };
+        }
+        if (!truncated && value.length > TRACE_OUTPUT_PREVIEW_MAX_CHARS) {
+          preview = value.slice(0, TRACE_OUTPUT_PREVIEW_MAX_CHARS);
+          truncated = true;
+        }
+        const hiddenChars = Math.max(0, value.length - preview.length);
+        const previewLineCount = preview ? preview.split(/\n/).length : 0;
+        const hiddenLines = Math.max(0, lines.length - previewLineCount);
+        return { text: preview, truncated: true, hiddenChars, hiddenLines };
+      }
+
+      function renderTraceOutput(text, outputKey) {
+        const value = String(text || "");
+        const key = String(outputKey || "trace-output");
+        const isExpanded = traceExpandedOutputs.has(key);
+        const preview = getTraceOutputPreview(value);
+        const visibleText = isExpanded || !preview.truncated ? value : preview.text;
+        const body = "<pre class='plain-markdown trace-output'>" + escapeHtml(visibleText) + "</pre>";
+        if (!preview.truncated) return body;
+
+        const hiddenParts = [];
+        if (preview.hiddenLines > 0) hiddenParts.push(preview.hiddenLines + " more line" + (preview.hiddenLines === 1 ? "" : "s"));
+        if (preview.hiddenChars > 0) hiddenParts.push(formatCompactNumber(preview.hiddenChars) + " chars hidden");
+        const summary = isExpanded
+          ? "Showing full output (" + formatTraceOutputSize(value) + ")."
+          : "Output truncated — " + (hiddenParts.join(", ") || "more hidden") + ".";
+        const buttonLabel = isExpanded ? "Collapse" : "Show full";
+        return "<div class='trace-output-wrap" + (isExpanded ? " is-expanded" : " is-truncated") + "'>"
+          + body
+          + "<div class='trace-output-truncation'>"
+          + "<span>" + escapeHtml(summary) + "</span>"
+          + "<button type='button' class='trace-output-toggle' data-trace-output-key='" + escapeHtml(key) + "' aria-expanded='" + (isExpanded ? "true" : "false") + "'>" + escapeHtml(buttonLabel) + "</button>"
+          + "</div>"
+          + "</div>";
+      }
+
       function buildTracePanelHtml() {
         const state = traceState || createEmptyTraceState();
         const filter = normalizeTraceFilter(traceFilter);
@@ -3656,7 +3737,7 @@
               sections.push(
                 "<div class='trace-section'>"
                 + "<div class='trace-section-label'>Thinking</div>"
-                + "<pre class='plain-markdown trace-output'>" + escapeHtml(entry.thinking) + "</pre>"
+                + renderTraceOutput(entry.thinking, entry.id + ":thinking")
                 + "</div>"
               );
             }
@@ -3664,7 +3745,7 @@
               sections.push(
                 "<div class='trace-section'>"
                 + "<div class='trace-section-label'>Response</div>"
-                + "<pre class='plain-markdown trace-output'>" + escapeHtml(entry.text) + "</pre>"
+                + renderTraceOutput(entry.text, entry.id + ":response")
                 + "</div>"
               );
             }
@@ -3684,10 +3765,10 @@
 
           const title = entry.label || entry.toolName || "tool";
           const argsSummary = entry.argsSummary
-            ? "<div class='trace-section'><div class='trace-section-label'>Input</div><pre class='plain-markdown trace-output'>" + escapeHtml(entry.argsSummary) + "</pre></div>"
+            ? "<div class='trace-section'><div class='trace-section-label'>Input</div>" + renderTraceOutput(entry.argsSummary, entry.id + ":input") + "</div>"
             : "";
           const output = entry.output
-            ? "<div class='trace-section'><div class='trace-section-label'>Output</div><pre class='plain-markdown trace-output'>" + escapeHtml(entry.output) + "</pre></div>"
+            ? "<div class='trace-section'><div class='trace-section-label'>Output</div>" + renderTraceOutput(entry.output, entry.id + ":output") + "</div>"
             : "<div class='trace-empty-inline'>No output yet.</div>";
           const toolStatusLabel = entry.isError
             ? "Error"

package/client/studio.css

@@ -1822,17 +1822,51 @@
       letter-spacing: 0.04em;
     }
 
-    .trace-output {
-      padding: 10px 11px;
-      border-radius: 8px;
+    .trace-output-wrap {
       border: 1px solid var(--panel-border);
+      border-radius: 8px;
       background: var(--panel);
+      overflow: hidden;
+    }
+
+    .trace-output {
+      margin: 0;
+      padding: 10px 11px;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
       overflow-x: auto;
       white-space: pre-wrap;
       overflow-wrap: anywhere;
       font-size: var(--studio-working-font-size);
     }
 
+    .trace-section > .trace-output {
+      border: 1px solid var(--panel-border);
+      border-radius: 8px;
+      background: var(--panel);
+    }
+
+    .trace-output-truncation {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      padding: 6px 8px;
+      border-top: 1px solid var(--border-subtle);
+      color: var(--studio-info-text, var(--muted));
+      font-size: 11px;
+      background: var(--panel-2);
+    }
+
+    .trace-output-toggle {
+      flex: 0 0 auto;
+      padding: 3px 7px;
+      border-radius: 999px;
+      font-size: 11px;
+      line-height: 1.2;
+    }
+
     .trace-empty,
     .trace-empty-inline {
       color: var(--muted);

package/index.ts

@@ -1382,20 +1382,27 @@ function isValidRequestId(id: string): boolean {
 	return /^[a-zA-Z0-9_-]{1,120}$/.test(id);
 }
 
-function parsePathArgument(args: string): string | null {
-	const trimmed = args.trim();
-	if (!trimmed) return null;
-
+function stripMatchingPathQuotes(value: string): string {
+	const trimmed = value.trim();
 	if (
 		(trimmed.startsWith('"') && trimmed.endsWith('"') && trimmed.length >= 2) ||
 		(trimmed.startsWith("'") && trimmed.endsWith("'") && trimmed.length >= 2)
 	) {
 		return trimmed.slice(1, -1).trim();
 	}
-
 	return trimmed;
 }
 
+function parsePathArgument(args: string): string | null {
+	const trimmed = args.trim();
+	if (!trimmed) return null;
+
+	const hasAtPrefix = trimmed.startsWith("@");
+	const pathPart = hasAtPrefix ? trimmed.slice(1).trim() : trimmed;
+	const unquoted = stripMatchingPathQuotes(pathPart);
+	return hasAtPrefix ? `@${unquoted}` : unquoted;
+}
+
 function tokenizeStudioCommandArgs(input: string): { tokens: string[]; error?: string } {
 	const tokens: string[] = [];
 	let current = "";
@@ -1445,8 +1452,8 @@ function tokenizeStudioCommandArgs(input: string): { tokens: string[]; error?: s
 
 function normalizePathInput(pathInput: string): string {
 	const trimmed = pathInput.trim();
-	if (trimmed.startsWith("@")) return trimmed.slice(1).trim();
-	return trimmed;
+	if (trimmed.startsWith("@")) return stripMatchingPathQuotes(trimmed.slice(1).trim());
+	return stripMatchingPathQuotes(trimmed);
 }
 
 function expandHome(pathInput: string): string {
@@ -6083,7 +6090,7 @@ function isSshSession(): boolean {
 
 function buildStudioSshTunnelHint(port: number): string | null {
 	if (!isSshSession()) return null;
-	return `SSH detected. If Studio is running on a remote machine, forward the port from your local machine, then open the Studio URL locally: ssh -L ${port}:127.0.0.1:${port} <remote-host>`;
+	return `SSH detected. Forward the remote Studio port, then open the full Studio URL above locally, including its ?token=... parameter: ssh -L ${port}:127.0.0.1:${port} <remote-host>. If you choose a different local port, change only the port in the URL; keep the token.`;
 }
 
 function resolveRequestedStudioDocumentFromUrl(
@@ -9481,10 +9488,13 @@ export default function (pi: ExtensionAPI) {
 					return;
 				}
 				const counts = getStudioClientCounts();
+				const url = buildStudioUrl(serverState.port, serverState.token, "full");
 				ctx.ui.notify(
-					`Studio running at http://127.0.0.1:${serverState.port}/ (busy: ${isStudioBusy() ? "yes" : "no"}; full views: ${counts.full}; editor-only views: ${counts.editorOnly})`,
+					`Studio running at ${url} (busy: ${isStudioBusy() ? "yes" : "no"}; full views: ${counts.full}; editor-only views: ${counts.editorOnly})`,
 					"info",
 				);
+				const sshTunnelHint = buildStudioSshTunnelHint(serverState.port);
+				if (sshTunnelHint) ctx.ui.notify(sshTunnelHint, "info");
 				return;
 			}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "description": "Two-pane browser workspace for pi with prompt/response editing, annotations, critiques, prompt/response history, and live Markdown/LaTeX/code preview",
   "type": "module",
   "license": "MIT",