Preserve logs on timeout, float copy button, hide editor line numbers

The Output panel keeps the full log trail and renders any error or
timeout message beneath it instead of replacing the logs. A copy button
floats in the panel's top-right corner: a quiet icon that lifts on hover
and flips to a check on success, copying the logs plus any trailing
error.

The Monaco example editor hides line numbers and collapses the gutter to
reclaim horizontal and vertical space, notably on mobile.

Author: pgherveou

playground/src/app/globals.css

@@ -780,6 +780,7 @@ button {
 /* Inline console (no outer head, since the tab bar provides it) */
 
 .console--inline {
+  position: relative;
   background: var(--console-bg);
   border: 1px solid var(--console-rule);
   border-radius: var(--radius);
@@ -1004,6 +1005,43 @@ button {
   max-height: 420px;
   overflow: auto;
 }
+.console__copy {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  color: var(--console-mute);
+  background: color-mix(in srgb, var(--console-bg) 72%, transparent);
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  opacity: 0.55;
+  backdrop-filter: blur(4px);
+  transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
+}
+.console__copy svg {
+  width: 15px;
+  height: 15px;
+}
+.console--inline:hover .console__copy,
+.console__copy:focus-visible {
+  opacity: 1;
+}
+.console__copy:hover {
+  opacity: 1;
+  color: var(--console-ink);
+  background: color-mix(in srgb, var(--console-ink) 10%, transparent);
+}
+.console__copy[data-copied="true"] {
+  opacity: 1;
+  color: var(--good);
+}
 .console__body--error {
   color: #ffb4b4;
 }

playground/src/components/ExampleEditor.tsx

@@ -66,6 +66,10 @@ export function ExampleEditor({
         options={{
           minimap: { enabled: false },
           fontSize: 13,
+          lineNumbers: "off",
+          lineDecorationsWidth: 0,
+          lineNumbersMinChars: 0,
+          glyphMargin: false,
           scrollBeyondLastLine: false,
           tabSize: 2,
           padding: { top: 12, bottom: 12 },

playground/src/components/MethodView.tsx

@@ -66,6 +66,7 @@ export function MethodView({
   const [running, setRunning] = useState(false);
   const [error, setError] = useState("");
   const [tab, setTab] = useState<"example" | "output">("example");
+  const [copied, setCopied] = useState(false);
   const callAbortRef = useRef<((reason: string) => void) | null>(null);
   const cancelRunRef = useRef<(() => void) | null>(null);
 
@@ -150,6 +151,20 @@ export function MethodView({
     callAbortRef.current?.("Call aborted");
   };
 
+  const handleCopyLogs = async () => {
+    const text = [...logs.map((entry) => entry.text), ...(error ? [error] : [])]
+      .join("\n")
+      .trim();
+    if (!text) return;
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* clipboard unavailable */
+    }
+  };
+
   const kind = methodInfo?.type ?? "unary";
 
   const status: Status = error
@@ -305,41 +320,81 @@ export function MethodView({
           </>
         ) : (
           <div className="console console--inline" data-status={status}>
-            {error ? (
-              <div
-                className="console__body console__body--error"
-                data-testid="error-display"
-              >
-                {error}
-                {isHostMissingError(error) && (
-                  <div className="console__cta">
-                    <a
-                      className="open-in-dotli"
-                      href={hostedPlaygroundUrl(service, method)}
-                      target="_blank"
-                      rel="noreferrer"
-                      title="Open this example in the host-backed playground"
+            {logs.length > 0 || error ? (
+              <>
+                <button
+                  type="button"
+                  className="console__copy"
+                  data-copied={copied}
+                  onClick={handleCopyLogs}
+                  aria-label="Copy output to clipboard"
+                  title="Copy output"
+                >
+                  {copied ? (
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden
+                    >
+                      <path d="M20 6 9 17l-5-5" />
+                    </svg>
+                  ) : (
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden
                     >
-                      Run in hosted playground ↗
-                    </a>
+                      <rect x="8" y="8" width="14" height="14" rx="2" ry="2" />
+                      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+                    </svg>
+                  )}
+                </button>
+                {logs.length > 0 && (
+                  <div className="console__body" data-testid="stream-log">
+                    {logs.map((entry, i) => (
+                      <div
+                        key={i}
+                        className={`console__entry console__entry--${entry.level}`}
+                        data-testid="stream-entry"
+                      >
+                        <span className="console__entry-i">
+                          {String(i + 1).padStart(2, "0")}
+                        </span>
+                        <span className="console__entry-body">{entry.text}</span>
+                      </div>
+                    ))}
                   </div>
                 )}
-              </div>
-            ) : logs.length > 0 ? (
-              <div className="console__body" data-testid="stream-log">
-                {logs.map((entry, i) => (
+                {error && (
                   <div
-                    key={i}
-                    className={`console__entry console__entry--${entry.level}`}
-                    data-testid="stream-entry"
+                    className="console__body console__body--error"
+                    data-testid="error-display"
                   >
-                    <span className="console__entry-i">
-                      {String(i + 1).padStart(2, "0")}
-                    </span>
-                    <span className="console__entry-body">{entry.text}</span>
+                    {error}
+                    {isHostMissingError(error) && (
+                      <div className="console__cta">
+                        <a
+                          className="open-in-dotli"
+                          href={hostedPlaygroundUrl(service, method)}
+                          target="_blank"
+                          rel="noreferrer"
+                          title="Open this example in the host-backed playground"
+                        >
+                          Run in hosted playground ↗
+                        </a>
+                      </div>
+                    )}
                   </div>
-                ))}
-              </div>
+                )}
+              </>
             ) : (
               <div className="console__body console__body--empty">
                 {!runnable