@tangle-network/ui 11.16.9 → 11.16.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 11.16.11
+
+### Patch Changes
+
+- cbfa303: A terminal output whose height cap hides lines ends in a "Show all stdout (N lines)" control that shows the rest in place, so a region that stops flush with its frame no longer hides that more output exists.
+
+## 11.16.10
+
+### Patch Changes
+
+- 06b665d: A closed terminal command is two lines of plain text that end in an ellipsis when cut, with the whole command in its title, so a reader can see that text is missing. Terminal output wraps on every width again: scrolling it sideways on a phone clipped columns with no sign that more was there.
+
 ## 11.16.9
 
 ### Patch Changes

package/dist/tool-previews/command-preview.d.ts

@@ -19,10 +19,6 @@ export interface CommandPreviewProps {
  * dark terminal. It scopes the dark token set onto itself with
  * `data-theme="dark"`, so stderr, the badges and the muted prompt keep the
  * contrast they were designed with on a dark ground, in a light console too.
- *
- * On a phone the output keeps its own lines and scrolls sideways inside the
- * block: wrapped output breaks the columns of a listing and splits hashes
- * and URLs mid-token. The command still wraps between its tokens.
  */
 export declare const CommandPreview: import("react").MemoExoticComponent<({ part, defaultExpanded, className }: CommandPreviewProps) => import("react").JSX.Element>;
 //#endregion

package/dist/tool-previews/command-preview.js

@@ -1,6 +1,6 @@
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
-import { memo, useId, useState } from "react";
+import { memo, useId, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronRight, Loader2 } from "lucide-react";
 //#region src/tool-previews/command-preview.tsx
@@ -138,20 +138,55 @@ function ExitBadge({ output, status }) {
 		children: label
 	});
 }
-/**
-* A command split at its whitespace, each token in an inline box. Browsers
-* break after a hyphen, which split `--short` into `--` and `short` on a
-* phone. A box moves to the next line whole, and breaks inside only when it
-* is wider than the line (a full SHA). The text is unchanged, so a copy still
-* pastes the exact command.
-*/
-function CommandText({ command, all }) {
+function CommandText({ command }) {
 	const tokens = command.split(/(\s+)/);
-	const limit = all ? tokens.length : 128;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [tokens.slice(0, limit).map((token, i) => token.length > 0 && !/\s/.test(token) ? /* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: tokens.map((token, i) => token.length > 0 && !/\s/.test(token) ? /* @__PURE__ */ jsx("span", {
 		className: "inline-block max-w-full [overflow-wrap:anywhere]",
 		children: token
-	}, i) : token), limit < tokens.length ? tokens.slice(limit).join("") : null] });
+	}, i) : token) });
+}
+/**
+* One output stream, capped at a readable height. When the cap hides lines,
+* a control says so and shows the rest in place: a region that ends flush
+* with its frame gave no sign that more output was there.
+*/
+function OutputRegion({ label, text, className }) {
+	const ref = useRef(null);
+	const [clipped, setClipped] = useState(false);
+	const [full, setFull] = useState(false);
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el || full) return;
+		const check = () => setClipped(el.scrollHeight > el.clientHeight + 1);
+		check();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(check);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [full]);
+	const lines = text.replace(/\n$/, "").split("\n").length;
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [/* @__PURE__ */ jsx("pre", {
+			ref,
+			tabIndex: 0,
+			role: "region",
+			"aria-label": label,
+			className: cn("overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] px-3 py-2 leading-relaxed", full ? "" : "max-h-80", focusRing),
+			children: text
+		}), clipped && !full ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => setFull(true),
+			className: cn("w-full border-t border-white/10 px-3 py-1.5 text-left font-sans text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground", focusRing),
+			children: [
+				"Show all ",
+				label,
+				" (",
+				lines,
+				" lines)"
+			]
+		}) : null]
+	});
 }
 /**
 * One shell command as a terminal block: a `$ command` prompt line with its
@@ -162,10 +197,6 @@ function CommandText({ command, all }) {
 * dark terminal. It scopes the dark token set onto itself with
 * `data-theme="dark"`, so stderr, the badges and the muted prompt keep the
 * contrast they were designed with on a dark ground, in a light console too.
-*
-* On a phone the output keeps its own lines and scrolls sideways inside the
-* block: wrapped output breaks the columns of a listing and splits hashes
-* and URLs mid-token. The command still wraps between its tokens.
 */
 const CommandPreview = memo(({ part, defaultExpanded = false, className }) => {
 	const [expanded, setExpanded] = useState(defaultExpanded);
@@ -183,11 +214,9 @@ const CommandPreview = memo(({ part, defaultExpanded = false, className }) => {
 			children: "$"
 		}),
 		/* @__PURE__ */ jsx("code", {
-			className: cn("min-w-0 flex-1 whitespace-pre-wrap [overflow-wrap:anywhere]", expanded ? "" : "max-h-8 overflow-hidden"),
-			children: /* @__PURE__ */ jsx(CommandText, {
-				command,
-				all: expanded
-			})
+			title: expanded ? void 0 : command,
+			className: cn("min-w-0 flex-1 whitespace-pre-wrap [overflow-wrap:anywhere]", expanded ? "" : "line-clamp-2"),
+			children: expanded ? /* @__PURE__ */ jsx(CommandText, { command }) : command
 		}),
 		/* @__PURE__ */ jsx("span", {
 			className: "flex shrink-0 max-sm:order-last max-sm:basis-full max-sm:pl-4",
@@ -222,26 +251,20 @@ const CommandPreview = memo(({ part, defaultExpanded = false, className }) => {
 			id: bodyId,
 			className: "border-t border-white/10",
 			children: [
-				output.stdout ? /* @__PURE__ */ jsx("pre", {
-					tabIndex: 0,
-					role: "region",
-					"aria-label": "stdout",
-					className: cn("max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] max-sm:whitespace-pre max-sm:[overflow-wrap:normal] px-3 py-2 leading-relaxed", focusRing),
-					children: output.stdout
+				output.stdout ? /* @__PURE__ */ jsx(OutputRegion, {
+					label: "stdout",
+					text: output.stdout,
+					className: ""
 				}) : null,
-				output.stderr ? /* @__PURE__ */ jsx("pre", {
-					tabIndex: 0,
-					role: "region",
-					"aria-label": "stderr",
-					className: cn("max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] max-sm:whitespace-pre max-sm:[overflow-wrap:normal] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]", focusRing),
-					children: output.stderr
+				output.stderr ? /* @__PURE__ */ jsx(OutputRegion, {
+					label: "stderr",
+					text: output.stderr,
+					className: "border-t border-white/10 text-[var(--surface-danger-text)]"
 				}) : null,
-				errorText ? /* @__PURE__ */ jsx("pre", {
-					tabIndex: 0,
-					role: "region",
-					"aria-label": "error",
-					className: cn("max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] max-sm:whitespace-pre max-sm:[overflow-wrap:normal] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]", focusRing),
-					children: errorText
+				errorText ? /* @__PURE__ */ jsx(OutputRegion, {
+					label: "error",
+					text: errorText,
+					className: "border-t border-white/10 text-[var(--surface-danger-text)]"
 				}) : null
 			]
 		}) : null]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.16.9",
+  "version": "11.16.11",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/tool-previews/command-preview.test.tsx

@@ -30,8 +30,9 @@ describe("CommandPreview", () => {
     expect(screen.getByText("exit 2").className).toContain("surface-danger");
   });
 
-  it("boxes each token so a phone wraps between flags", () => {
+  it("boxes each token of an opened command so a phone wraps between flags", () => {
     render(<CommandPreview part={part({ output: "M a" })} />);
+    fireEvent.click(screen.getByRole("button"));
     const flag = screen.getByText("--short");
     expect(flag.tagName).toBe("SPAN");
     expect(flag.className).toContain("inline-block");
@@ -61,6 +62,14 @@ describe("CommandPreview", () => {
     expect(screen.getByText("exit 0 · tool reported error").className).toContain("surface-warning");
   });
 
+  it("shows a closed command as plain text that ends in an ellipsis, whole in its title", () => {
+    render(<CommandPreview part={part({ output: "M a" })} />);
+    const code = screen.getByTestId("command-preview").querySelector("code");
+    expect(code?.className).toContain("line-clamp-2");
+    expect(code).toHaveAttribute("title", "git status --short");
+    expect(code?.querySelector("span")).toBeNull();
+  });
+
   it("is a quiet row until opened, then a dark terminal", () => {
     render(<CommandPreview part={part({ output: "M a" })} />);
     const block = screen.getByTestId("command-preview");
@@ -71,3 +80,21 @@ describe("CommandPreview", () => {
     expect(screen.getByRole("region", { name: "stdout" })).toHaveTextContent("M a");
   });
 });
+
+describe("CommandPreview output", () => {
+  it("offers the rest of an output its height cap hides", () => {
+    const scroll = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "scrollHeight");
+    const client = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "clientHeight");
+    Object.defineProperty(HTMLElement.prototype, "scrollHeight", { configurable: true, get: () => 900 });
+    Object.defineProperty(HTMLElement.prototype, "clientHeight", { configurable: true, get: () => 320 });
+    try {
+      render(<CommandPreview part={part({ output: "a\nb\nc" })} defaultExpanded />);
+      fireEvent.click(screen.getByRole("button", { name: "Show all stdout (3 lines)" }));
+      expect(screen.getByRole("region", { name: "stdout" }).className).not.toContain("max-h-80");
+      expect(screen.queryByRole("button", { name: /Show all stdout/ })).toBeNull();
+    } finally {
+      if (scroll) Object.defineProperty(HTMLElement.prototype, "scrollHeight", scroll);
+      if (client) Object.defineProperty(HTMLElement.prototype, "clientHeight", client);
+    }
+  });
+});

package/src/tool-previews/command-preview.tsx

@@ -1,4 +1,4 @@
-import { memo, useId, useState } from "react";
+import { memo, useId, useLayoutEffect, useRef, useState } from "react";
 import { ChevronDown, ChevronRight, Loader2 } from "lucide-react";
 import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
@@ -187,23 +187,11 @@ function ExitBadge({
   );
 }
 
-/** A closed row shows two lines, so only its first tokens need their own
- *  box; a long script renders the rest as plain text. */
-const BOXED_TOKENS = 64;
-
-/**
- * A command split at its whitespace, each token in an inline box. Browsers
- * break after a hyphen, which split `--short` into `--` and `short` on a
- * phone. A box moves to the next line whole, and breaks inside only when it
- * is wider than the line (a full SHA). The text is unchanged, so a copy still
- * pastes the exact command.
- */
-function CommandText({ command, all }: { command: string; all: boolean }) {
+function CommandText({ command }: { command: string }) {
   const tokens = command.split(/(\s+)/);
-  const limit = all ? tokens.length : BOXED_TOKENS * 2;
   return (
     <>
-      {tokens.slice(0, limit).map((token, i) =>
+      {tokens.map((token, i) =>
         token.length > 0 && !/\s/.test(token) ? (
           // Tokens repeat (two spaces, two "&&"), so position is the key.
           <span key={i} className="inline-block max-w-full [overflow-wrap:anywhere]">
@@ -213,11 +201,69 @@ function CommandText({ command, all }: { command: string; all: boolean }) {
           token
         ),
       )}
-      {limit < tokens.length ? tokens.slice(limit).join("") : null}
     </>
   );
 }
 
+/**
+ * One output stream, capped at a readable height. When the cap hides lines,
+ * a control says so and shows the rest in place: a region that ends flush
+ * with its frame gave no sign that more output was there.
+ */
+function OutputRegion({
+  label,
+  text,
+  className,
+}: {
+  label: string;
+  text: string;
+  className?: string;
+}) {
+  const ref = useRef<HTMLPreElement>(null);
+  const [clipped, setClipped] = useState(false);
+  const [full, setFull] = useState(false);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || full) return;
+    const check = () => setClipped(el.scrollHeight > el.clientHeight + 1);
+    check();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(check);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [full]);
+  const lines = text.replace(/\n$/, "").split("\n").length;
+  return (
+    <div className={className}>
+      <pre
+        ref={ref}
+        tabIndex={0}
+        role="region"
+        aria-label={label}
+        className={cn(
+          "overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] px-3 py-2 leading-relaxed",
+          full ? "" : "max-h-80",
+          focusRing,
+        )}
+      >
+        {text}
+      </pre>
+      {clipped && !full ? (
+        <button
+          type="button"
+          onClick={() => setFull(true)}
+          className={cn(
+            "w-full border-t border-white/10 px-3 py-1.5 text-left font-sans text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground",
+            focusRing,
+          )}
+        >
+          Show all {label} ({lines} lines)
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
 /**
  * One shell command as a terminal block: a `$ command` prompt line with its
  * exit status, and stdout and stderr in separate regions below it.
@@ -227,10 +273,6 @@ function CommandText({ command, all }: { command: string; all: boolean }) {
  * dark terminal. It scopes the dark token set onto itself with
  * `data-theme="dark"`, so stderr, the badges and the muted prompt keep the
  * contrast they were designed with on a dark ground, in a light console too.
- *
- * On a phone the output keeps its own lines and scrolls sideways inside the
- * block: wrapped output breaks the columns of a listing and splits hashes
- * and URLs mid-token. The command still wraps between its tokens.
  */
 export const CommandPreview = memo(
   ({ part, defaultExpanded = false, className }: CommandPreviewProps) => {
@@ -260,15 +302,16 @@ export const CommandPreview = memo(
           $
         </span>
         <code
+          title={expanded ? undefined : command}
           className={cn(
             "min-w-0 flex-1 whitespace-pre-wrap [overflow-wrap:anywhere]",
-            // Closed, two lines of the command. A height cap, not
-            // line-clamp: each token is an inline box, which line-clamp
-            // does not count, so a phone showed three lines and more.
-            expanded ? "" : "max-h-8 overflow-hidden",
+            // Closed, two lines of plain text that end in an ellipsis when
+            // cut, with the whole command in the title. Opened, each token
+            // is a box that wraps whole (line-clamp does not count boxes).
+            expanded ? "" : "line-clamp-2",
           )}
         >
-          <CommandText command={command} all={expanded} />
+          {expanded ? <CommandText command={command} /> : command}
         </code>
         {/* On a phone the badge takes its own line under the command, so the
             command keeps the row's width. */}
@@ -321,43 +364,25 @@ export const CommandPreview = memo(
         {expanded && hasBody ? (
           <div id={bodyId} className="border-t border-white/10">
             {output.stdout ? (
-              <pre
-                tabIndex={0}
-                role="region"
-                aria-label="stdout"
-                className={cn(
-                  "max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] max-sm:whitespace-pre max-sm:[overflow-wrap:normal] px-3 py-2 leading-relaxed",
-                  focusRing,
-                )}
-              >
-                {output.stdout}
-              </pre>
+              <OutputRegion
+                label="stdout"
+                text={output.stdout}
+                className=""
+              />
             ) : null}
             {output.stderr ? (
-              <pre
-                tabIndex={0}
-                role="region"
-                aria-label="stderr"
-                className={cn(
-                  "max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] max-sm:whitespace-pre max-sm:[overflow-wrap:normal] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
-                  focusRing,
-                )}
-              >
-                {output.stderr}
-              </pre>
+              <OutputRegion
+                label="stderr"
+                text={output.stderr}
+                className="border-t border-white/10 text-[var(--surface-danger-text)]"
+              />
             ) : null}
             {errorText ? (
-              <pre
-                tabIndex={0}
-                role="region"
-                aria-label="error"
-                className={cn(
-                  "max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] max-sm:whitespace-pre max-sm:[overflow-wrap:normal] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
-                  focusRing,
-                )}
-              >
-                {errorText}
-              </pre>
+              <OutputRegion
+                label="error"
+                text={errorText}
+                className="border-t border-white/10 text-[var(--surface-danger-text)]"
+              />
             ) : null}
           </div>
         ) : null}