@tangle-network/ui 11.16.5 → 11.16.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- 74fbea5: A closed terminal command is a quiet bordered row on the surface it sits on, and turns into the dark terminal only when opened, so a list of commands no longer reads as a stack of black bars. Red is kept for evidence the command failed: a nonzero exit, a timeout or a signal. A tool that reported an error with nothing recorded about the command shows a neutral "tool error" badge. A command wraps between its tokens, so `--short` is no longer split at its hyphen; a token wider than the line still breaks, and the copied text is unchanged. The status pill marks a failed state with a cross instead of a slashed disc, which read as "disabled".
+
 ## 11.16.5
 
 ### Patch Changes

package/dist/primitives/status-pill.d.ts

@@ -10,8 +10,8 @@ import * as React from "react";
  * the tone's COLOUR, and the state's own LABEL as text.
  *
  * The glyphs are chosen to survive at 8px and to differ in outline rather than
- * in fill: a ring reads as "still open", a solid disc as "settled", a slashed
- * disc as "stopped". Two states never share one silhouette.
+ * in fill: a ring reads as "still open", a solid disc as "settled", a cross as
+ * "failed". Two states never share one silhouette.
  *
  * Each tone draws its fill, border and text from ONE matched token triple.
  * That pairing is the whole point: a status colour is solved against its own

package/dist/primitives/status-pill.js

@@ -45,22 +45,16 @@ function ToneGlyph({ tone }) {
 				r: "3.25"
 			})
 		});
-		case "danger": return /* @__PURE__ */ jsxs("svg", {
+		case "danger": return /* @__PURE__ */ jsx("svg", {
 			...common,
 			"aria-hidden": "true",
 			fill: "none",
 			stroke: "currentColor",
-			strokeWidth: "1.5",
-			children: [/* @__PURE__ */ jsx("circle", {
-				cx: "4",
-				cy: "4",
-				r: "3.1",
-				fill: "currentColor",
-				opacity: "0.35"
-			}), /* @__PURE__ */ jsx("path", {
-				d: "M1.9 6.1 6.1 1.9",
+			strokeWidth: "1.75",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M1.5 1.5 6.5 6.5M6.5 1.5 1.5 6.5",
 				strokeLinecap: "round"
-			})]
+			})
 		});
 		case "warning": return /* @__PURE__ */ jsx("svg", {
 			...common,

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

@@ -14,7 +14,9 @@ export interface CommandPreviewProps {
  * One shell command as a terminal block: a `$ command` prompt line with its
  * exit status, and stdout and stderr in separate regions below it.
  *
- * The block is always dark. It scopes the dark token set onto itself with
+ * Closed, a command is a quiet row on the surface it sits on: a list of
+ * commands should read as a list, not a stack of black bars. Opened, it is a
+ * 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.
  */

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

@@ -61,10 +61,14 @@ function extractCommandOutput(output) {
 }
 function fromObject(obj) {
 	const text = (value) => value === void 0 || value === null ? "" : String(value);
+	const timedOut = obj.timedOut ?? obj.timed_out;
+	const signal = obj.signal;
 	return {
 		stdout: text(obj.stdout ?? obj.output),
 		stderr: text(obj.stderr),
-		exitCode: finiteNumber(obj.exitCode ?? obj.exit_code ?? obj.code)
+		exitCode: finiteNumber(obj.exitCode ?? obj.exit_code ?? obj.code),
+		...timedOut === true ? { timedOut: true } : {},
+		...typeof signal === "string" && signal.length > 0 ? { signal } : {}
 	};
 }
 /** The keys a serialized command result carries, and nothing else. */
@@ -96,9 +100,12 @@ function parseStructured(text) {
 		return;
 	}
 }
-/** Exit status as a badge: the code when one is known, else the tool's status.
-*  Red only for a nonzero exit or an error; a clean run stays quiet green. */
-function ExitBadge({ exitCode, status }) {
+/** 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
+*  prints below. A clean run stays quiet green. */
+function ExitBadge({ output, status }) {
 	if (status === "running" || status === "pending") return /* @__PURE__ */ jsxs("span", {
 		className: "inline-flex shrink-0 items-center gap-1 text-[11px] text-muted-foreground",
 		children: [/* @__PURE__ */ jsx(Loader2, {
@@ -106,19 +113,53 @@ function ExitBadge({ exitCode, status }) {
 			"aria-hidden": "true"
 		}), "running"]
 	});
-	const failed = status === "error" || exitCode !== void 0 && exitCode !== 0;
-	const label = exitCode !== void 0 ? `exit ${exitCode}` : failed ? "error" : null;
+	const { exitCode, timedOut, signal } = output;
+	let label;
+	let tone;
+	if (timedOut) {
+		label = "timed out";
+		tone = "danger";
+	} else if (signal) {
+		label = signal;
+		tone = "danger";
+	} else if (exitCode !== void 0 && exitCode !== 0) {
+		label = `exit ${exitCode}`;
+		tone = "danger";
+	} else if (status === "error") {
+		label = exitCode === 0 ? "exit 0 · tool reported error" : "tool reported error";
+		tone = "neutral";
+	} 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 px-1.5 py-px text-[11px] font-medium tabular-nums", failed ? "bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]" : "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]"),
+		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)]"),
 		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 }) {
+	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", {
+		className: "inline-block max-w-full [overflow-wrap:anywhere]",
+		children: token
+	}, i) : token), limit < tokens.length ? tokens.slice(limit).join("") : null] });
+}
+/**
 * One shell command as a terminal block: a `$ command` prompt line with its
 * exit status, and stdout and stderr in separate regions below it.
 *
-* The block is always dark. It scopes the dark token set onto itself with
+* Closed, a command is a quiet row on the surface it sits on: a list of
+* commands should read as a list, not a stack of black bars. Opened, it is a
+* 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.
 */
@@ -139,23 +180,30 @@ const CommandPreview = memo(({ part, defaultExpanded = false, className }) => {
 		}),
 		/* @__PURE__ */ jsx("code", {
 			className: cn("min-w-0 flex-1 whitespace-pre-wrap [overflow-wrap:anywhere]", expanded ? "" : "line-clamp-2"),
-			children: command
+			children: /* @__PURE__ */ jsx(CommandText, {
+				command,
+				all: expanded
+			})
 		}),
-		/* @__PURE__ */ jsx(ExitBadge, {
-			exitCode: output.exitCode,
-			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": "dark",
+		"data-theme": expanded ? "dark" : void 0,
 		"data-testid": "command-preview",
-		className: cn("overflow-hidden rounded-[var(--radius-md)] bg-[var(--md3-surface-container-lowest)] font-mono text-xs text-foreground", className),
+		"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-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 hover:bg-white/5", 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"
@@ -164,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.5",
+  "version": "11.16.7",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -142,7 +142,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.10.1",
+    "@tangle-network/brand": "^1.10.2",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/primitives/status-pill.tsx

@@ -11,8 +11,8 @@ import { cn } from "../lib/utils";
  * the tone's COLOUR, and the state's own LABEL as text.
  *
  * The glyphs are chosen to survive at 8px and to differ in outline rather than
- * in fill: a ring reads as "still open", a solid disc as "settled", a slashed
- * disc as "stopped". Two states never share one silhouette.
+ * in fill: a ring reads as "still open", a solid disc as "settled", a cross as
+ * "failed". Two states never share one silhouette.
  *
  * Each tone draws its fill, border and text from ONE matched token triple.
  * That pairing is the whole point: a status colour is solved against its own
@@ -107,8 +107,8 @@ function ToneGlyph({ tone }: { tone: StatusTone }) {
           <circle cx="4" cy="4" r="3.25" />
         </svg>
       );
-    // Settled and bad: a disc with a bar through it, so it differs from
-    // success in OUTLINE and not only in hue.
+    // Settled and bad: a cross, so it differs from success in OUTLINE and not
+    // only in hue. A slashed disc read as "disabled" beside a failed run.
     case "danger":
       return (
         <svg
@@ -116,10 +116,9 @@ function ToneGlyph({ tone }: { tone: StatusTone }) {
           aria-hidden="true"
           fill="none"
           stroke="currentColor"
-          strokeWidth="1.5"
+          strokeWidth="1.75"
         >
-          <circle cx="4" cy="4" r="3.1" fill="currentColor" opacity="0.35" />
-          <path d="M1.9 6.1 6.1 1.9" strokeLinecap="round" />
+          <path d="M1.5 1.5 6.5 6.5M6.5 1.5 1.5 6.5" strokeLinecap="round" />
         </svg>
       );
     // Needs a person: a triangle.

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

@@ -0,0 +1,73 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { ToolPart } from "../types/parts";
+import { CommandPreview } from "./command-preview";
+
+function part(state: Partial<ToolPart["state"]>): ToolPart {
+  return {
+    type: "tool",
+    id: "t1",
+    tool: "bash",
+    state: { status: "completed", input: { command: "git status --short" }, ...state },
+  } as 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 reported error");
+    expect(badge.className).toContain("surface-neutral");
+    expect(badge.className).not.toContain("surface-danger");
+    expect(screen.queryByText("error")).toBeNull();
+  });
+
+  it("keeps a recorded nonzero exit red", () => {
+    render(
+      <CommandPreview
+        part={part({ status: "error", output: { stdout: "", stderr: "no", exitCode: 2 } })}
+      />,
+    );
+    expect(screen.getByText("exit 2").className).toContain("surface-danger");
+  });
+
+  it("boxes each token so a phone wraps between flags", () => {
+    render(<CommandPreview part={part({ output: "M a" })} />);
+    const flag = screen.getByText("--short");
+    expect(flag.tagName).toBe("SPAN");
+    expect(flag.className).toContain("inline-block");
+    // A box wider than the line still breaks, so no token overflows.
+    expect(flag.className).toContain("[overflow-wrap:anywhere]");
+    // The text is unchanged, so a copy pastes the exact command.
+    expect(screen.getByTestId("command-preview").querySelector("code")?.textContent).toBe(
+      "git status --short",
+    );
+  });
+
+  it("treats a timeout or a signal as a failure even without an exit code", () => {
+    render(
+      <CommandPreview
+        part={part({ status: "error", output: { stdout: "", stderr: "", timedOut: true } })}
+      />,
+    );
+    expect(screen.getByText("timed out").className).toContain("surface-danger");
+  });
+
+  it("keeps a runner error after a clean exit neutral", () => {
+    render(
+      <CommandPreview
+        part={part({ status: "error", output: { stdout: "ok", stderr: "", exitCode: 0 } })}
+      />,
+    );
+    expect(screen.getByText("exit 0 · tool reported error").className).toContain("surface-neutral");
+  });
+
+  it("is a quiet row until opened, then a dark terminal", () => {
+    render(<CommandPreview part={part({ output: "M a" })} />);
+    const block = screen.getByTestId("command-preview");
+    expect(block).not.toHaveAttribute("data-theme");
+    expect(block.className).toContain("bg-transparent");
+    fireEvent.click(screen.getByRole("button"));
+    expect(block).toHaveAttribute("data-theme", "dark");
+    expect(screen.getByRole("region", { name: "stdout" })).toHaveTextContent("M a");
+  });
+});

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

@@ -36,6 +36,10 @@ export interface CommandOutput {
   stderr: string;
   /** Undefined when the producer persisted plain text and never reported one. */
   exitCode: number | undefined;
+  /** The command ran past its time limit. */
+  timedOut?: boolean;
+  /** The signal that ended the command, such as `SIGKILL`. */
+  signal?: string;
 }
 
 function finiteNumber(value: unknown): number | undefined {
@@ -72,10 +76,14 @@ export function extractCommandOutput(output: unknown): CommandOutput {
 function fromObject(obj: Record<string, unknown>): CommandOutput {
   const text = (value: unknown) =>
     value === undefined || value === null ? "" : String(value);
+  const timedOut = obj.timedOut ?? obj.timed_out;
+  const signal = obj.signal;
   return {
     stdout: text(obj.stdout ?? obj.output),
     stderr: text(obj.stderr),
     exitCode: finiteNumber(obj.exitCode ?? obj.exit_code ?? obj.code),
+    ...(timedOut === true ? { timedOut: true } : {}),
+    ...(typeof signal === "string" && signal.length > 0 ? { signal } : {}),
   };
 }
 
@@ -117,13 +125,16 @@ function parseStructured(text: string): CommandOutput | undefined {
   }
 }
 
-/** Exit status as a badge: the code when one is known, else the tool's status.
- *  Red only for a nonzero exit or an error; a clean run stays quiet green. */
+/** 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
+ *  prints below. A clean run stays quiet green. */
 function ExitBadge({
-  exitCode,
+  output,
   status,
 }: {
-  exitCode: number | undefined;
+  output: CommandOutput;
   status: ToolPart["state"]["status"];
 }) {
   if (status === "running" || status === "pending") {
@@ -134,19 +145,39 @@ function ExitBadge({
       </span>
     );
   }
-  // The tool's own error status wins: a runner can fail after the shell exited
-  // 0, and a green "exit 0" beside that error would contradict it.
-  const failed = status === "error" || (exitCode !== undefined && exitCode !== 0);
-  const label =
-    exitCode !== undefined ? `exit ${exitCode}` : failed ? "error" : null;
+  const { exitCode, timedOut, signal } = output;
+  let label: string | null;
+  let tone: "danger" | "success" | "neutral";
+  if (timedOut) {
+    label = "timed out";
+    tone = "danger";
+  } else if (signal) {
+    label = signal;
+    tone = "danger";
+  } else if (exitCode !== undefined && exitCode !== 0) {
+    label = `exit ${exitCode}`;
+    tone = "danger";
+  } else if (status === "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;
+    tone = "success";
+  }
   if (label === null) return null;
   return (
     <span
       className={cn(
-        "inline-flex shrink-0 items-center rounded-full px-1.5 py-px text-[11px] font-medium tabular-nums",
-        failed
-          ? "bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]"
-          : "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+        // 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",
+        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)]",
       )}
     >
       {label}
@@ -154,11 +185,44 @@ 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 }) {
+  const tokens = command.split(/(\s+)/);
+  const limit = all ? tokens.length : BOXED_TOKENS * 2;
+  return (
+    <>
+      {tokens.slice(0, limit).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]">
+            {token}
+          </span>
+        ) : (
+          token
+        ),
+      )}
+      {limit < tokens.length ? tokens.slice(limit).join("") : null}
+    </>
+  );
+}
+
 /**
  * One shell command as a terminal block: a `$ command` prompt line with its
  * exit status, and stdout and stderr in separate regions below it.
  *
- * The block is always dark. It scopes the dark token set onto itself with
+ * Closed, a command is a quiet row on the surface it sits on: a list of
+ * commands should read as a list, not a stack of black bars. Opened, it is a
+ * 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.
  */
@@ -195,18 +259,28 @@ export const CommandPreview = memo(
             expanded ? "" : "line-clamp-2",
           )}
         >
-          {command}
+          <CommandText command={command} all={expanded} />
         </code>
-        <ExitBadge exitCode={output.exitCode} 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>
       </>
     );
 
     return (
       <div
-        data-theme="dark"
+        data-theme={expanded ? "dark" : undefined}
         data-testid="command-preview"
+        data-expanded={expanded}
         className={cn(
-          "overflow-hidden rounded-[var(--radius-md)] bg-[var(--md3-surface-container-lowest)] font-mono text-xs text-foreground",
+          // One border in both states, so opening a row does not shift the
+          // list; the terminal's is its own fill colour.
+          "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,
         )}
       >
@@ -217,7 +291,8 @@ 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 hover:bg-white/5",
+              "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,
             )}
           >
@@ -229,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 ? (