@tangle-network/ui 11.16.0 → 11.16.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @tangle-network/ui
 
+## 11.16.2
+
+### Patch Changes
+
+- 74e6dfb: `CommandPreview` output regions are keyboard-focusable and labelled (stdout, stderr, error), so a long output that scrolls inside the block can be scrolled without a pointer (WCAG 2.1.1; axe `scrollable-region-focusable`).
+
+## 11.16.1
+
+### Patch Changes
+
+- c59ed11: `CommandPreview` prints a failed command's text once when the producer persisted it as both the output and the error.
+  
+  It also reads a JSON string as a `{ stdout, stderr, exitCode }` envelope only when every key is an envelope key, so a command whose own output is JSON with a `stdout` field is shown as printed, and an `error` status turns the exit badge red even when the retained exit code is 0.
+
 ## 11.16.0
 
 ### Minor Changes

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

@@ -67,6 +67,20 @@ function fromObject(obj) {
 		exitCode: finiteNumber(obj.exitCode ?? obj.exit_code ?? obj.code)
 	};
 }
+/** The keys a serialized command result carries, and nothing else. */
+const ENVELOPE_KEYS = /* @__PURE__ */ new Set([
+	"stdout",
+	"stderr",
+	"output",
+	"exitCode",
+	"exit_code",
+	"code",
+	"signal",
+	"durationMs",
+	"duration_ms",
+	"timedOut",
+	"timed_out"
+]);
 /** A string that is a serialized `{ stdout, stderr, exitCode }` record. */
 function parseStructured(text) {
 	const trimmed = text.trimStart();
@@ -76,6 +90,7 @@ function parseStructured(text) {
 		if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return;
 		const obj = parsed;
 		if (!("stdout" in obj) && !("stderr" in obj)) return void 0;
+		if (!Object.keys(obj).every((key) => ENVELOPE_KEYS.has(key))) return;
 		return fromObject(obj);
 	} catch {
 		return;
@@ -91,7 +106,7 @@ function ExitBadge({ exitCode, status }) {
 			"aria-hidden": "true"
 		}), "running"]
 	});
-	const failed = exitCode !== void 0 ? exitCode !== 0 : status === "error";
+	const failed = status === "error" || exitCode !== void 0 && exitCode !== 0;
 	const label = exitCode !== void 0 ? `exit ${exitCode}` : failed ? "error" : null;
 	if (label === null) return null;
 	return /* @__PURE__ */ jsx("span", {
@@ -113,7 +128,8 @@ const CommandPreview = memo(({ part, defaultExpanded = false, className }) => {
 	const command = commandOf(part.state.input);
 	const { status } = part.state;
 	const output = extractCommandOutput(part.state.output);
-	const errorText = part.state.error;
+	const normalize = (text) => text.replace(/\s+/g, " ").trim();
+	const errorText = part.state.error !== void 0 && output.stdout.length > 0 && normalize(part.state.error) === normalize(output.stdout) ? void 0 : part.state.error;
 	const hasBody = output.stdout.length > 0 || output.stderr.length > 0 || errorText !== void 0 && errorText.length > 0;
 	const promptLine = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("span", {
@@ -155,16 +171,21 @@ const CommandPreview = memo(({ part, defaultExpanded = false, className }) => {
 			className: "border-t border-white/10",
 			children: [
 				output.stdout ? /* @__PURE__ */ jsx("pre", {
-					className: "max-h-80 overflow-auto whitespace-pre-wrap break-all px-3 py-2 leading-relaxed",
+					tabIndex: 0,
+					"aria-label": "stdout",
+					className: cn("max-h-80 overflow-auto whitespace-pre-wrap break-all px-3 py-2 leading-relaxed", focusRing),
 					children: output.stdout
 				}) : null,
 				output.stderr ? /* @__PURE__ */ jsx("pre", {
+					tabIndex: 0,
 					"aria-label": "stderr",
-					className: "max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
+					className: cn("max-h-80 overflow-auto whitespace-pre-wrap break-all 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", {
-					className: "max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
+					tabIndex: 0,
+					"aria-label": "error",
+					className: cn("max-h-80 overflow-auto whitespace-pre-wrap break-all 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.0",
+  "version": "11.16.2",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

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

@@ -79,6 +79,21 @@ function fromObject(obj: Record<string, unknown>): CommandOutput {
   };
 }
 
+/** The keys a serialized command result carries, and nothing else. */
+const ENVELOPE_KEYS = new Set([
+  "stdout",
+  "stderr",
+  "output",
+  "exitCode",
+  "exit_code",
+  "code",
+  "signal",
+  "durationMs",
+  "duration_ms",
+  "timedOut",
+  "timed_out",
+]);
+
 /** A string that is a serialized `{ stdout, stderr, exitCode }` record. */
 function parseStructured(text: string): CommandOutput | undefined {
   const trimmed = text.trimStart();
@@ -89,7 +104,13 @@ function parseStructured(text: string): CommandOutput | undefined {
       return undefined;
     }
     const obj = parsed as Record<string, unknown>;
+    // Only an unambiguous envelope: a stream key, and nothing but envelope keys.
+    // A command whose own stdout is JSON that happens to have a `stdout` field
+    // (`{"stdout":"v","result":"ok"}`) is shown as the text it printed.
     if (!("stdout" in obj) && !("stderr" in obj)) return undefined;
+    if (!Object.keys(obj).every((key) => ENVELOPE_KEYS.has(key))) {
+      return undefined;
+    }
     return fromObject(obj);
   } catch {
     return undefined;
@@ -113,7 +134,9 @@ function ExitBadge({
       </span>
     );
   }
-  const failed = exitCode !== undefined ? exitCode !== 0 : status === "error";
+  // 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;
   if (label === null) return null;
@@ -146,7 +169,16 @@ export const CommandPreview = memo(
     const command = commandOf(part.state.input);
     const { status } = part.state;
     const output = extractCommandOutput(part.state.output);
-    const errorText = part.state.error;
+    // A failed call often persists the same text twice — as its output and as
+    // its error. Print it once. Only an exact repeat (ignoring whitespace) is
+    // folded: an error that merely CONTAINS the output, or the reverse, is a
+    // distinct message and keeps its own region.
+    const normalize = (text: string) => text.replace(/\s+/g, " ").trim();
+    const errorRepeats =
+      part.state.error !== undefined &&
+      output.stdout.length > 0 &&
+      normalize(part.state.error) === normalize(output.stdout);
+    const errorText = errorRepeats ? undefined : part.state.error;
     const hasBody =
       output.stdout.length > 0 ||
       output.stderr.length > 0 ||
@@ -203,20 +235,38 @@ export const CommandPreview = memo(
         {expanded && hasBody ? (
           <div id={bodyId} className="border-t border-white/10">
             {output.stdout ? (
-              <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-all px-3 py-2 leading-relaxed">
+              <pre
+                tabIndex={0}
+                aria-label="stdout"
+                className={cn(
+                  "max-h-80 overflow-auto whitespace-pre-wrap break-all px-3 py-2 leading-relaxed",
+                  focusRing,
+                )}
+              >
                 {output.stdout}
               </pre>
             ) : null}
             {output.stderr ? (
               <pre
+                tabIndex={0}
                 aria-label="stderr"
-                className="max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]"
+                className={cn(
+                  "max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
+                  focusRing,
+                )}
               >
                 {output.stderr}
               </pre>
             ) : null}
             {errorText ? (
-              <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]">
+              <pre
+                tabIndex={0}
+                aria-label="error"
+                className={cn(
+                  "max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
+                  focusRing,
+                )}
+              >
                 {errorText}
               </pre>
             ) : null}