@tangle-network/ui 11.16.4 → 11.16.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 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
+
+- 44ce397: Let model tool-schema converters accept the OpenUI node schema: container `children` no longer declares a nonempty minimum, which formed a required recursive loop that opencode rejected for `render_ui`. The persistence gate still rejects an empty stack, grid, or card children list.
+
 ## 11.16.4
 
 ### Patch Changes

package/dist/openui/schema-compiled.js

@@ -1592,7 +1592,6 @@ const schema33 = {
 		"wrap": { "type": "boolean" },
 		"children": {
 			"type": "array",
-			"minItems": 1,
 			"items": { "$ref": "#/$defs/node" }
 		}
 	},
@@ -1807,7 +1806,6 @@ const schema46 = {
 		] },
 		"children": {
 			"type": "array",
-			"minItems": 1,
 			"items": { "$ref": "#/$defs/node" }
 		}
 	},
@@ -1909,30 +1907,19 @@ function validate27(data, { instancePath = "", parentData, parentDataProperty, r
 										const _errs7 = errors;
 										if (errors === _errs7) {
 											if (Array.isArray(data4)) {
-												if (data4.length < 1) {
-													validate27.errors = [{
-														instancePath: instancePath + "/children",
-														schemaPath: "#/properties/children/minItems",
-														keyword: "minItems",
-														params: { limit: 1 },
-														message: "must NOT have fewer than 1 items"
-													}];
-													return false;
-												} else {
-													const len0 = data4.length;
-													for (let i0 = 0; i0 < len0; i0++) {
-														const _errs9 = errors;
-														if (!wrapper1.validate(data4[i0], {
-															instancePath: instancePath + "/children/" + i0,
-															parentData: data4,
-															parentDataProperty: i0,
-															rootData
-														})) {
-															vErrors = vErrors === null ? wrapper1.validate.errors : vErrors.concat(wrapper1.validate.errors);
-															errors = vErrors.length;
-														}
-														if (!(_errs9 === errors)) break;
+												const len0 = data4.length;
+												for (let i0 = 0; i0 < len0; i0++) {
+													const _errs9 = errors;
+													if (!wrapper1.validate(data4[i0], {
+														instancePath: instancePath + "/children/" + i0,
+														parentData: data4,
+														parentDataProperty: i0,
+														rootData
+													})) {
+														vErrors = vErrors === null ? wrapper1.validate.errors : vErrors.concat(wrapper1.validate.errors);
+														errors = vErrors.length;
 													}
+													if (!(_errs9 === errors)) break;
 												}
 											} else {
 												validate27.errors = [{
@@ -2319,30 +2306,19 @@ function validate29(data, { instancePath = "", parentData, parentDataProperty, r
 													const _errs34 = errors;
 													if (errors === _errs34) {
 														if (Array.isArray(data16)) {
-															if (data16.length < 1) {
-																validate29.errors = [{
-																	instancePath: instancePath + "/children",
-																	schemaPath: "#/properties/children/minItems",
-																	keyword: "minItems",
-																	params: { limit: 1 },
-																	message: "must NOT have fewer than 1 items"
-																}];
-																return false;
-															} else {
-																const len1 = data16.length;
-																for (let i1 = 0; i1 < len1; i1++) {
-																	const _errs36 = errors;
-																	if (!wrapper1.validate(data16[i1], {
-																		instancePath: instancePath + "/children/" + i1,
-																		parentData: data16,
-																		parentDataProperty: i1,
-																		rootData
-																	})) {
-																		vErrors = vErrors === null ? wrapper1.validate.errors : vErrors.concat(wrapper1.validate.errors);
-																		errors = vErrors.length;
-																	}
-																	if (!(_errs36 === errors)) break;
+															const len1 = data16.length;
+															for (let i1 = 0; i1 < len1; i1++) {
+																const _errs36 = errors;
+																if (!wrapper1.validate(data16[i1], {
+																	instancePath: instancePath + "/children/" + i1,
+																	parentData: data16,
+																	parentDataProperty: i1,
+																	rootData
+																})) {
+																	vErrors = vErrors === null ? wrapper1.validate.errors : vErrors.concat(wrapper1.validate.errors);
+																	errors = vErrors.length;
 																}
+																if (!(_errs36 === errors)) break;
 															}
 														} else {
 															validate29.errors = [{
@@ -4139,30 +4115,19 @@ function validate23(data, { instancePath = "", parentData, parentDataProperty, r
 												const _errs10 = errors;
 												if (errors === _errs10) {
 													if (Array.isArray(data6)) {
-														if (data6.length < 1) {
-															validate23.errors = [{
-																instancePath: instancePath + "/children",
-																schemaPath: "#/properties/children/minItems",
-																keyword: "minItems",
-																params: { limit: 1 },
-																message: "must NOT have fewer than 1 items"
-															}];
-															return false;
-														} else {
-															const len0 = data6.length;
-															for (let i0 = 0; i0 < len0; i0++) {
-																const _errs12 = errors;
-																if (!validate24(data6[i0], {
-																	instancePath: instancePath + "/children/" + i0,
-																	parentData: data6,
-																	parentDataProperty: i0,
-																	rootData
-																})) {
-																	vErrors = vErrors === null ? validate24.errors : vErrors.concat(validate24.errors);
-																	errors = vErrors.length;
-																}
-																if (!(_errs12 === errors)) break;
+														const len0 = data6.length;
+														for (let i0 = 0; i0 < len0; i0++) {
+															const _errs12 = errors;
+															if (!validate24(data6[i0], {
+																instancePath: instancePath + "/children/" + i0,
+																parentData: data6,
+																parentDataProperty: i0,
+																rootData
+															})) {
+																vErrors = vErrors === null ? validate24.errors : vErrors.concat(validate24.errors);
+																errors = vErrors.length;
 															}
+															if (!(_errs12 === errors)) break;
 														}
 													} else {
 														validate23.errors = [{
@@ -4532,30 +4497,19 @@ function validate38(data, { instancePath = "", parentData, parentDataProperty, r
 												const _errs10 = errors;
 												if (errors === _errs10) {
 													if (Array.isArray(data6)) {
-														if (data6.length < 1) {
-															validate38.errors = [{
-																instancePath: instancePath + "/children",
-																schemaPath: "#/properties/children/minItems",
-																keyword: "minItems",
-																params: { limit: 1 },
-																message: "must NOT have fewer than 1 items"
-															}];
-															return false;
-														} else {
-															const len0 = data6.length;
-															for (let i0 = 0; i0 < len0; i0++) {
-																const _errs12 = errors;
-																if (!wrapper3.validate(data6[i0], {
-																	instancePath: instancePath + "/children/" + i0,
-																	parentData: data6,
-																	parentDataProperty: i0,
-																	rootData
-																})) {
-																	vErrors = vErrors === null ? wrapper3.validate.errors : vErrors.concat(wrapper3.validate.errors);
-																	errors = vErrors.length;
-																}
-																if (!(_errs12 === errors)) break;
+														const len0 = data6.length;
+														for (let i0 = 0; i0 < len0; i0++) {
+															const _errs12 = errors;
+															if (!wrapper3.validate(data6[i0], {
+																instancePath: instancePath + "/children/" + i0,
+																parentData: data6,
+																parentDataProperty: i0,
+																rootData
+															})) {
+																vErrors = vErrors === null ? wrapper3.validate.errors : vErrors.concat(wrapper3.validate.errors);
+																errors = vErrors.length;
 															}
+															if (!(_errs12 === errors)) break;
 														}
 													} else {
 														validate38.errors = [{
@@ -4944,30 +4898,19 @@ function validate40(data, { instancePath = "", parentData, parentDataProperty, r
 													const _errs34 = errors;
 													if (errors === _errs34) {
 														if (Array.isArray(data16)) {
-															if (data16.length < 1) {
-																validate40.errors = [{
-																	instancePath: instancePath + "/children",
-																	schemaPath: "#/properties/children/minItems",
-																	keyword: "minItems",
-																	params: { limit: 1 },
-																	message: "must NOT have fewer than 1 items"
-																}];
-																return false;
-															} else {
-																const len1 = data16.length;
-																for (let i1 = 0; i1 < len1; i1++) {
-																	const _errs36 = errors;
-																	if (!wrapper3.validate(data16[i1], {
-																		instancePath: instancePath + "/children/" + i1,
-																		parentData: data16,
-																		parentDataProperty: i1,
-																		rootData
-																	})) {
-																		vErrors = vErrors === null ? wrapper3.validate.errors : vErrors.concat(wrapper3.validate.errors);
-																		errors = vErrors.length;
-																	}
-																	if (!(_errs36 === errors)) break;
+															const len1 = data16.length;
+															for (let i1 = 0; i1 < len1; i1++) {
+																const _errs36 = errors;
+																if (!wrapper3.validate(data16[i1], {
+																	instancePath: instancePath + "/children/" + i1,
+																	parentData: data16,
+																	parentDataProperty: i1,
+																	rootData
+																})) {
+																	vErrors = vErrors === null ? wrapper3.validate.errors : vErrors.concat(wrapper3.validate.errors);
+																	errors = vErrors.length;
 																}
+																if (!(_errs36 === errors)) break;
 															}
 														} else {
 															validate40.errors = [{
@@ -6733,30 +6676,19 @@ function validate34(data, { instancePath = "", parentData, parentDataProperty, r
 										const _errs7 = errors;
 										if (errors === _errs7) {
 											if (Array.isArray(data4)) {
-												if (data4.length < 1) {
-													validate34.errors = [{
-														instancePath: instancePath + "/children",
-														schemaPath: "#/properties/children/minItems",
-														keyword: "minItems",
-														params: { limit: 1 },
-														message: "must NOT have fewer than 1 items"
-													}];
-													return false;
-												} else {
-													const len0 = data4.length;
-													for (let i0 = 0; i0 < len0; i0++) {
-														const _errs9 = errors;
-														if (!validate35(data4[i0], {
-															instancePath: instancePath + "/children/" + i0,
-															parentData: data4,
-															parentDataProperty: i0,
-															rootData
-														})) {
-															vErrors = vErrors === null ? validate35.errors : vErrors.concat(validate35.errors);
-															errors = vErrors.length;
-														}
-														if (!(_errs9 === errors)) break;
+												const len0 = data4.length;
+												for (let i0 = 0; i0 < len0; i0++) {
+													const _errs9 = errors;
+													if (!validate35(data4[i0], {
+														instancePath: instancePath + "/children/" + i0,
+														parentData: data4,
+														parentDataProperty: i0,
+														rootData
+													})) {
+														vErrors = vErrors === null ? validate35.errors : vErrors.concat(validate35.errors);
+														errors = vErrors.length;
 													}
+													if (!(_errs9 === errors)) break;
 												}
 											} else {
 												validate34.errors = [{
@@ -7124,30 +7056,19 @@ function validate49(data, { instancePath = "", parentData, parentDataProperty, r
 												const _errs10 = errors;
 												if (errors === _errs10) {
 													if (Array.isArray(data6)) {
-														if (data6.length < 1) {
-															validate49.errors = [{
-																instancePath: instancePath + "/children",
-																schemaPath: "#/properties/children/minItems",
-																keyword: "minItems",
-																params: { limit: 1 },
-																message: "must NOT have fewer than 1 items"
-															}];
-															return false;
-														} else {
-															const len0 = data6.length;
-															for (let i0 = 0; i0 < len0; i0++) {
-																const _errs12 = errors;
-																if (!wrapper6.validate(data6[i0], {
-																	instancePath: instancePath + "/children/" + i0,
-																	parentData: data6,
-																	parentDataProperty: i0,
-																	rootData
-																})) {
-																	vErrors = vErrors === null ? wrapper6.validate.errors : vErrors.concat(wrapper6.validate.errors);
-																	errors = vErrors.length;
-																}
-																if (!(_errs12 === errors)) break;
+														const len0 = data6.length;
+														for (let i0 = 0; i0 < len0; i0++) {
+															const _errs12 = errors;
+															if (!wrapper6.validate(data6[i0], {
+																instancePath: instancePath + "/children/" + i0,
+																parentData: data6,
+																parentDataProperty: i0,
+																rootData
+															})) {
+																vErrors = vErrors === null ? wrapper6.validate.errors : vErrors.concat(wrapper6.validate.errors);
+																errors = vErrors.length;
 															}
+															if (!(_errs12 === errors)) break;
 														}
 													} else {
 														validate49.errors = [{
@@ -7279,30 +7200,19 @@ function validate51(data, { instancePath = "", parentData, parentDataProperty, r
 										const _errs7 = errors;
 										if (errors === _errs7) {
 											if (Array.isArray(data4)) {
-												if (data4.length < 1) {
-													validate51.errors = [{
-														instancePath: instancePath + "/children",
-														schemaPath: "#/properties/children/minItems",
-														keyword: "minItems",
-														params: { limit: 1 },
-														message: "must NOT have fewer than 1 items"
-													}];
-													return false;
-												} else {
-													const len0 = data4.length;
-													for (let i0 = 0; i0 < len0; i0++) {
-														const _errs9 = errors;
-														if (!wrapper6.validate(data4[i0], {
-															instancePath: instancePath + "/children/" + i0,
-															parentData: data4,
-															parentDataProperty: i0,
-															rootData
-														})) {
-															vErrors = vErrors === null ? wrapper6.validate.errors : vErrors.concat(wrapper6.validate.errors);
-															errors = vErrors.length;
-														}
-														if (!(_errs9 === errors)) break;
+												const len0 = data4.length;
+												for (let i0 = 0; i0 < len0; i0++) {
+													const _errs9 = errors;
+													if (!wrapper6.validate(data4[i0], {
+														instancePath: instancePath + "/children/" + i0,
+														parentData: data4,
+														parentDataProperty: i0,
+														rootData
+													})) {
+														vErrors = vErrors === null ? wrapper6.validate.errors : vErrors.concat(wrapper6.validate.errors);
+														errors = vErrors.length;
 													}
+													if (!(_errs9 === errors)) break;
 												}
 											} else {
 												validate51.errors = [{
@@ -9322,30 +9232,19 @@ function validate45(data, { instancePath = "", parentData, parentDataProperty, r
 													const _errs34 = errors;
 													if (errors === _errs34) {
 														if (Array.isArray(data16)) {
-															if (data16.length < 1) {
-																validate45.errors = [{
-																	instancePath: instancePath + "/children",
-																	schemaPath: "#/properties/children/minItems",
-																	keyword: "minItems",
-																	params: { limit: 1 },
-																	message: "must NOT have fewer than 1 items"
-																}];
-																return false;
-															} else {
-																const len1 = data16.length;
-																for (let i1 = 0; i1 < len1; i1++) {
-																	const _errs36 = errors;
-																	if (!validate46(data16[i1], {
-																		instancePath: instancePath + "/children/" + i1,
-																		parentData: data16,
-																		parentDataProperty: i1,
-																		rootData
-																	})) {
-																		vErrors = vErrors === null ? validate46.errors : vErrors.concat(validate46.errors);
-																		errors = vErrors.length;
-																	}
-																	if (!(_errs36 === errors)) break;
+															const len1 = data16.length;
+															for (let i1 = 0; i1 < len1; i1++) {
+																const _errs36 = errors;
+																if (!validate46(data16[i1], {
+																	instancePath: instancePath + "/children/" + i1,
+																	parentData: data16,
+																	parentDataProperty: i1,
+																	rootData
+																})) {
+																	vErrors = vErrors === null ? validate46.errors : vErrors.concat(validate46.errors);
+																	errors = vErrors.length;
 																}
+																if (!(_errs36 === errors)) break;
 															}
 														} else {
 															validate45.errors = [{

package/dist/openui/schema-data.js

@@ -29,7 +29,6 @@ const primitive = { type: [
 ] };
 const children = {
 	type: "array",
-	minItems: 1,
 	items: { $ref: "#/$defs/node" }
 };
 const actions = {

package/dist/openui-schema.js

@@ -26,6 +26,10 @@ function findUnsupportedOpenUINode(value) {
 			message: `Unsupported OpenUI node type: ${String(record.type)}.`
 		};
 		if (record.type === "stack" || record.type === "grid" || record.type === "card") {
+			if (Array.isArray(record.children) && record.children.length === 0) return {
+				path: `${path}.children`,
+				message: "OpenUI containers need at least one child."
+			};
 			if (Array.isArray(record.children)) for (const [index, child] of record.children.entries()) {
 				const issue = visit(child, `${path}.children[${index}]`, depth + 1);
 				if (issue) return issue;

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 error" : "tool 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,27 @@ 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,
+			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-border 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 items-start gap-2 px-3 py-2 text-left transition-colors", 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"

package/package.json

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