@tangle-network/ui 11.16.6 → 11.16.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.16.7
+
+### Patch Changes
+
+- 083c632: A closed terminal command has no border, so it reads as the same kind of row as the other tool calls beside it. On a phone its exit badge takes its own line under the command, so the command keeps the row's width. A tool error with nothing recorded about the command reads "tool reported error", which states what is known.
+
 ## 11.16.6
 
 ### Patch Changes

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

@@ -126,7 +126,7 @@ function ExitBadge({ output, status }) {
 		label = `exit ${exitCode}`;
 		tone = "danger";
 	} else if (status === "error") {
-		label = exitCode === 0 ? "exit 0 · tool error" : "tool error";
+		label = exitCode === 0 ? "exit 0 · tool reported error" : "tool reported error";
 		tone = "neutral";
 	} else {
 		label = exitCode === 0 ? "exit 0" : null;
@@ -185,22 +185,25 @@ const CommandPreview = memo(({ part, defaultExpanded = false, className }) => {
 				all: expanded
 			})
 		}),
-		/* @__PURE__ */ jsx(ExitBadge, {
-			output,
-			status
+		/* @__PURE__ */ jsx("span", {
+			className: "flex shrink-0 max-sm:order-last max-sm:basis-full max-sm:pl-4",
+			children: /* @__PURE__ */ jsx(ExitBadge, {
+				output,
+				status
+			})
 		})
 	] });
 	return /* @__PURE__ */ jsxs("div", {
 		"data-theme": expanded ? "dark" : void 0,
 		"data-testid": "command-preview",
 		"data-expanded": expanded,
-		className: cn("overflow-hidden rounded-[var(--radius-md)] border font-mono text-xs text-foreground", expanded ? "border-[var(--md3-surface-container-lowest)] bg-[var(--md3-surface-container-lowest)]" : "border-border bg-transparent", className),
+		className: cn("overflow-hidden rounded-[var(--radius-md)] border font-mono text-xs text-foreground", expanded ? "border-[var(--md3-surface-container-lowest)] bg-[var(--md3-surface-container-lowest)]" : "border-transparent bg-transparent", className),
 		children: [hasBody ? /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => setExpanded((value) => !value),
 			"aria-expanded": expanded,
 			"aria-controls": bodyId,
-			className: cn("flex w-full items-start gap-2 px-3 py-2 text-left transition-colors", expanded ? "hover:bg-white/5" : "hover:bg-muted", focusRing),
+			className: cn("flex w-full flex-wrap items-start gap-x-2 gap-y-1 px-3 py-2 text-left transition-colors sm:flex-nowrap", expanded ? "hover:bg-white/5" : "hover:bg-muted", focusRing),
 			children: [promptLine, expanded ? /* @__PURE__ */ jsx(ChevronDown, {
 				className: "mt-px h-3.5 w-3.5 shrink-0 text-muted-foreground",
 				"aria-hidden": "true"
@@ -209,7 +212,7 @@ const CommandPreview = memo(({ part, defaultExpanded = false, className }) => {
 				"aria-hidden": "true"
 			})]
 		}) : /* @__PURE__ */ jsx("div", {
-			className: "flex w-full items-start gap-2 px-3 py-2",
+			className: "flex w-full flex-wrap items-start gap-x-2 gap-y-1 px-3 py-2 sm:flex-nowrap",
 			children: promptLine
 		}), expanded && hasBody ? /* @__PURE__ */ jsxs("div", {
 			id: bodyId,

package/package.json

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

@@ -15,7 +15,7 @@ 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", () => {
     render(<CommandPreview part={part({ status: "error", output: "warning: x" })} />);
-    const badge = screen.getByText("tool error");
+    const badge = screen.getByText("tool reported error");
     expect(badge.className).toContain("surface-neutral");
     expect(badge.className).not.toContain("surface-danger");
     expect(screen.queryByText("error")).toBeNull();
@@ -58,7 +58,7 @@ describe("CommandPreview", () => {
         part={part({ status: "error", output: { stdout: "ok", stderr: "", exitCode: 0 } })}
       />,
     );
-    expect(screen.getByText("exit 0 · tool error").className).toContain("surface-neutral");
+    expect(screen.getByText("exit 0 · tool reported error").className).toContain("surface-neutral");
   });
 
   it("is a quiet row until opened, then a dark terminal", () => {

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

@@ -158,7 +158,9 @@ function ExitBadge({
     label = `exit ${exitCode}`;
     tone = "danger";
   } else if (status === "error") {
-    label = exitCode === 0 ? "exit 0 · tool error" : "tool error";
+    // 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";
   } else {
     label = exitCode === 0 ? "exit 0" : null;
@@ -259,7 +261,11 @@ export const CommandPreview = memo(
         >
           <CommandText command={command} all={expanded} />
         </code>
-        <ExitBadge output={output} status={status} />
+        {/* On a phone the badge takes its own line under the command, so the
+            command keeps the row's width. */}
+        <span className="flex shrink-0 max-sm:order-last max-sm:basis-full max-sm:pl-4">
+          <ExitBadge output={output} status={status} />
+        </span>
       </>
     );
 
@@ -274,7 +280,7 @@ export const CommandPreview = memo(
           "overflow-hidden rounded-[var(--radius-md)] border font-mono text-xs text-foreground",
           expanded
             ? "border-[var(--md3-surface-container-lowest)] bg-[var(--md3-surface-container-lowest)]"
-            : "border-border bg-transparent",
+            : "border-transparent bg-transparent",
           className,
         )}
       >
@@ -285,7 +291,7 @@ export const CommandPreview = memo(
             aria-expanded={expanded}
             aria-controls={bodyId}
             className={cn(
-              "flex w-full items-start gap-2 px-3 py-2 text-left transition-colors",
+              "flex w-full flex-wrap items-start gap-x-2 gap-y-1 px-3 py-2 text-left transition-colors sm:flex-nowrap",
               expanded ? "hover:bg-white/5" : "hover:bg-muted",
               focusRing,
             )}
@@ -298,7 +304,9 @@ export const CommandPreview = memo(
             )}
           </button>
         ) : (
-          <div className="flex w-full items-start gap-2 px-3 py-2">{promptLine}</div>
+          <div className="flex w-full flex-wrap items-start gap-x-2 gap-y-1 px-3 py-2 sm:flex-nowrap">
+            {promptLine}
+          </div>
         )}
 
         {expanded && hasBody ? (