@tangle-network/ui 11.16.7 → 11.16.9

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 11.16.9
+
+### Patch Changes
+
+- 272704e: On a phone, terminal output keeps its own lines and scrolls sideways inside the block, so listing columns stay aligned and hashes and URLs are not split mid-token. A closed command shows at most two lines at every width.
+
+## 11.16.8
+
+### Patch Changes
+
+- c8ab512: A terminal command whose tool reported an error with nothing recorded about the command shows its "tool reported error" badge in the warning tone and sans type, so it reads as a status rather than metadata. Red stays reserved for a nonzero exit, a timeout or a signal.
+
 ## 11.16.7
 
 ### Patch Changes

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

@@ -19,6 +19,10 @@ 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

@@ -103,7 +103,7 @@ function parseStructured(text) {
 /** Exit status as a badge. Red only where the command itself is known to have
 *  failed: a nonzero exit, a timeout, or a signal. A tool that reported an
 *  error with nothing recorded about the command (no exit code, or exit 0
-*  from a runner that failed afterwards) gets a neutral badge; its error text
+*  from a runner that failed afterwards) gets an amber badge; its error text
 *  prints below. A clean run stays quiet green. */
 function ExitBadge({ output, status }) {
 	if (status === "running" || status === "pending") return /* @__PURE__ */ jsxs("span", {
@@ -127,14 +127,14 @@ function ExitBadge({ output, status }) {
 		tone = "danger";
 	} else if (status === "error") {
 		label = exitCode === 0 ? "exit 0 · tool reported error" : "tool reported error";
-		tone = "neutral";
+		tone = "warning";
 	} else {
 		label = exitCode === 0 ? "exit 0" : null;
 		tone = "success";
 	}
 	if (label === null) return null;
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("inline-flex shrink-0 items-center rounded-full border px-1.5 py-px text-[11px] font-medium tabular-nums", tone === "danger" && "border-transparent bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]", tone === "success" && "border-transparent bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]", tone === "neutral" && "border-[var(--surface-neutral-border)] bg-[var(--surface-neutral-bg)] text-[var(--surface-neutral-text)]"),
+		className: cn("inline-flex shrink-0 items-center rounded-full border px-1.5 py-px font-sans text-[11px] font-medium tabular-nums", tone === "danger" && "border-transparent bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]", tone === "success" && "border-transparent bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]", tone === "warning" && "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]"),
 		children: label
 	});
 }
@@ -162,6 +162,10 @@ 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);
@@ -179,7 +183,7 @@ 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 ? "" : "line-clamp-2"),
+			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
@@ -222,21 +226,21 @@ const CommandPreview = memo(({ part, defaultExpanded = false, className }) => {
 					tabIndex: 0,
 					role: "region",
 					"aria-label": "stdout",
-					className: cn("max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] px-3 py-2 leading-relaxed", focusRing),
+					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
 				}) : 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] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]", focusRing),
+					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
 				}) : 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] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]", focusRing),
+					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
 				}) : null
 			]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.16.7",
+  "version": "11.16.9",
   "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

@@ -13,10 +13,10 @@ function part(state: Partial<ToolPart["state"]>): ToolPart {
 }
 
 describe("CommandPreview", () => {
-  it("shows a neutral badge, not a red exit, when a tool errored without an exit code", () => {
+  it("shows an amber badge, not a red exit, when a tool errored without an exit code", () => {
     render(<CommandPreview part={part({ status: "error", output: "warning: x" })} />);
     const badge = screen.getByText("tool reported error");
-    expect(badge.className).toContain("surface-neutral");
+    expect(badge.className).toContain("surface-warning");
     expect(badge.className).not.toContain("surface-danger");
     expect(screen.queryByText("error")).toBeNull();
   });
@@ -52,13 +52,13 @@ describe("CommandPreview", () => {
     expect(screen.getByText("timed out").className).toContain("surface-danger");
   });
 
-  it("keeps a runner error after a clean exit neutral", () => {
+  it("keeps a runner error after a clean exit amber, not red", () => {
     render(
       <CommandPreview
         part={part({ status: "error", output: { stdout: "ok", stderr: "", exitCode: 0 } })}
       />,
     );
-    expect(screen.getByText("exit 0 · tool reported error").className).toContain("surface-neutral");
+    expect(screen.getByText("exit 0 · tool reported error").className).toContain("surface-warning");
   });
 
   it("is a quiet row until opened, then a dark terminal", () => {

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

@@ -128,7 +128,7 @@ function parseStructured(text: string): CommandOutput | undefined {
 /** Exit status as a badge. Red only where the command itself is known to have
  *  failed: a nonzero exit, a timeout, or a signal. A tool that reported an
  *  error with nothing recorded about the command (no exit code, or exit 0
- *  from a runner that failed afterwards) gets a neutral badge; its error text
+ *  from a runner that failed afterwards) gets an amber badge; its error text
  *  prints below. A clean run stays quiet green. */
 function ExitBadge({
   output,
@@ -147,7 +147,7 @@ function ExitBadge({
   }
   const { exitCode, timedOut, signal } = output;
   let label: string | null;
-  let tone: "danger" | "success" | "neutral";
+  let tone: "danger" | "success" | "warning";
   if (timedOut) {
     label = "timed out";
     tone = "danger";
@@ -161,7 +161,7 @@ function ExitBadge({
     // Say what is known: the tool reported an error. Nothing recorded says
     // the command itself failed.
     label = exitCode === 0 ? "exit 0 · tool reported error" : "tool reported error";
-    tone = "neutral";
+    tone = "warning";
   } else {
     label = exitCode === 0 ? "exit 0" : null;
     tone = "success";
@@ -171,13 +171,15 @@ function ExitBadge({
     <span
       className={cn(
         // Every badge has a border, so mixed rows keep one height.
-        "inline-flex shrink-0 items-center rounded-full border px-1.5 py-px text-[11px] font-medium tabular-nums",
+        "inline-flex shrink-0 items-center rounded-full border px-1.5 py-px font-sans text-[11px] font-medium tabular-nums",
         tone === "danger" &&
           "border-transparent bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]",
         tone === "success" &&
           "border-transparent bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
-        tone === "neutral" &&
-          "border-[var(--surface-neutral-border)] bg-[var(--surface-neutral-bg)] text-[var(--surface-neutral-text)]",
+        // A reported error with nothing recorded about the command deserves
+        // attention, but it is not a failed command: amber, not red.
+        tone === "warning" &&
+          "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]",
       )}
     >
       {label}
@@ -225,6 +227,10 @@ 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) => {
@@ -256,7 +262,10 @@ export const CommandPreview = memo(
         <code
           className={cn(
             "min-w-0 flex-1 whitespace-pre-wrap [overflow-wrap:anywhere]",
-            expanded ? "" : "line-clamp-2",
+            // 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",
           )}
         >
           <CommandText command={command} all={expanded} />
@@ -317,7 +326,7 @@ export const CommandPreview = memo(
                 role="region"
                 aria-label="stdout"
                 className={cn(
-                  "max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] px-3 py-2 leading-relaxed",
+                  "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,
                 )}
               >
@@ -330,7 +339,7 @@ export const CommandPreview = memo(
                 role="region"
                 aria-label="stderr"
                 className={cn(
-                  "max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
+                  "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,
                 )}
               >
@@ -343,7 +352,7 @@ export const CommandPreview = memo(
                 role="region"
                 aria-label="error"
                 className={cn(
-                  "max-h-80 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
+                  "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,
                 )}
               >