@tangle-network/ui 11.16.6 → 11.16.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 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
+
+- 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

@@ -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", {
@@ -126,15 +126,15 @@ function ExitBadge({ output, status }) {
 		label = `exit ${exitCode}`;
 		tone = "danger";
 	} else if (status === "error") {
-		label = exitCode === 0 ? "exit 0 · tool error" : "tool error";
-		tone = "neutral";
+		label = exitCode === 0 ? "exit 0 · tool reported error" : "tool reported error";
+		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
 	});
 }
@@ -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.8",
   "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 error");
-    expect(badge.className).toContain("surface-neutral");
+    const badge = screen.getByText("tool reported error");
+    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 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";
@@ -158,8 +158,10 @@ function ExitBadge({
     label = `exit ${exitCode}`;
     tone = "danger";
   } else if (status === "error") {
-    label = exitCode === 0 ? "exit 0 · tool error" : "tool error";
-    tone = "neutral";
+    // 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 = "warning";
   } else {
     label = exitCode === 0 ? "exit 0" : null;
     tone = "success";
@@ -169,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}
@@ -259,7 +263,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 +282,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 +293,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 +306,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 ? (