@tangle-network/ui 11.16.3 → 11.16.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @tangle-network/ui
 
+## 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
+
+- 11fbba5: Chat text renders at the 15px body size. The user bubble, assistant prose, legacy `ChatMessage` and thinking timer wrote their size tokens as `text-[var(--font-size-*)]`, which Tailwind compiles to a color, so assistant prose fell back to the Markdown default of 14px and the user bubble inherited 16px. They now use `text-[length:var(...)]`, and the dist check fails on the untyped form.
+  
+  The streaming caret follows the last word instead of starting a new line. A code block that scrolls sideways takes keyboard focus as a named region (axe `scrollable-region-focusable`). The Show more toggle under a tool's output or error sits inside the card's inset instead of against its edge.
+
 ## 11.16.3
 
 ### Patch Changes

package/dist/chat/agent-timeline.js

@@ -53,13 +53,14 @@ function spacingBefore(prev, next) {
 	return "mt-3";
 }
 const ROW_BLEED = "-mx-3";
+const STREAMING_CARET = "[&>:last-child:not(ul,ol)]:after:ml-0.5 [&>:last-child:not(ul,ol)]:after:inline-block [&>:last-child:not(ul,ol)]:after:h-[1em] [&>:last-child:not(ul,ol)]:after:w-0.5 [&>:last-child:not(ul,ol)]:after:animate-pulse [&>:last-child:not(ul,ol)]:after:rounded-full [&>:last-child:not(ul,ol)]:after:bg-muted-foreground [&>:last-child:not(ul,ol)]:after:align-text-bottom [&>:last-child:not(ul,ol)]:after:content-[''] [&>:is(ul,ol):last-child>li:last-child]:after:ml-0.5 [&>:is(ul,ol):last-child>li:last-child]:after:inline-block [&>:is(ul,ol):last-child>li:last-child]:after:h-[1em] [&>:is(ul,ol):last-child>li:last-child]:after:w-0.5 [&>:is(ul,ol):last-child>li:last-child]:after:animate-pulse [&>:is(ul,ol):last-child>li:last-child]:after:rounded-full [&>:is(ul,ol):last-child>li:last-child]:after:bg-muted-foreground [&>:is(ul,ol):last-child>li:last-child]:after:align-text-bottom [&>:is(ul,ol):last-child>li:last-child]:after:content-['']";
 function AssistantMessage({ item }) {
 	return /* @__PURE__ */ jsxs("div", { children: [
 		item.content && /* @__PURE__ */ jsx(Markdown, {
-			className: "tangle-prose text-[var(--font-size-base)] leading-[1.5]",
+			className: cn("tangle-prose text-[length:var(--font-size-base)] leading-[1.5]", item.isStreaming && STREAMING_CARET),
 			children: item.content
 		}),
-		item.isStreaming && /* @__PURE__ */ jsx("span", {
+		item.isStreaming && !item.content && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": true,
 			"data-streaming-caret": "",
 			className: "ml-0.5 inline-block h-[1em] w-0.5 animate-pulse rounded-full bg-muted-foreground align-text-bottom"

package/dist/chat/chat-message.js

@@ -19,10 +19,10 @@ function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, classNa
 		}), /* @__PURE__ */ jsxs("div", {
 			className: cn("min-w-0 max-w-[85%] space-y-1", isUser ? "rounded-[var(--radius-lg)] bg-foreground px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-background" : isAssistant ? "text-foreground" : "rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)]"),
 			children: [isUser ? /* @__PURE__ */ jsx("div", {
-				className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)]",
+				className: "whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[var(--line-height-base)]",
 				children: content
 			}) : /* @__PURE__ */ jsxs(Fragment, { children: [content && /* @__PURE__ */ jsx(Markdown, {
-				className: "tangle-prose text-[var(--font-size-base)] leading-[var(--line-height-base)]",
+				className: "tangle-prose text-[length:var(--font-size-base)] leading-[var(--line-height-base)]",
 				children: content
 			}), isStreaming && /* @__PURE__ */ jsx("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-[var(--brand-cool)] align-text-bottom" })] }), toolCalls]
 		})]

package/dist/chat/thinking-indicator.js

@@ -29,7 +29,7 @@ function ThinkingIndicator({ className }) {
 				})
 			]
 		}), elapsed > 3 && /* @__PURE__ */ jsxs("span", {
-			className: "text-[var(--font-size-xs)] tabular-nums text-muted-foreground",
+			className: "text-[length:var(--font-size-xs)] tabular-nums text-muted-foreground",
 			children: [elapsed, "s"]
 		})]
 	});

package/dist/chat/user-message.js

@@ -23,10 +23,10 @@ function UserBubble({ text, timestamp, actions }) {
 				className: "relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background",
 				children: [timestamp ? /* @__PURE__ */ jsx("span", {
 					"data-user-message-time": "",
-					className: "pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
+					className: "pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[length:var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
 					children: formatTime(timestamp)
 				}) : null, /* @__PURE__ */ jsx("div", {
-					className: "break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5]",
+					className: "break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]",
 					children: text
 				})]
 			}), actions ? /* @__PURE__ */ jsx(MessageActions, { children: actions }) : null]

package/dist/markdown/code-block.js

@@ -1,4 +1,4 @@
-import { focusRing } from "../lib/focus.js";
+import { focusRing, focusRingInset } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -93,6 +93,12 @@ const CodeBlock = memo(({ code, language, label, showLineNumbers = false, light,
 		overflowX: "auto"
 	};
 	const codeTagProps = { style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } };
+	const scrollRegion = {
+		tabIndex: 0,
+		role: "region",
+		"aria-label": headerLabel ? `${headerLabel} code` : "Code",
+		className: focusRingInset
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("group relative overflow-hidden rounded-lg border font-mono", "bg-card border-border", className),
 		...props,
@@ -121,8 +127,10 @@ const CodeBlock = memo(({ code, language, label, showLineNumbers = false, light,
 				customStyle,
 				codeTagProps,
 				wrapLines: false,
+				...scrollRegion,
 				children: code
 			}) : /* @__PURE__ */ jsx("pre", {
+				...scrollRegion,
 				style: {
 					...syntaxTheme.hljs,
 					...customStyle

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/run/expandable-content.js

@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * "Show more / Show less" toggle. Content shorter than the cap renders
 * as-is with no toggle.
 */
-function ExpandableContent({ children, collapsedMaxPx = 180, fadeClassName = "from-muted", className }) {
+function ExpandableContent({ children, collapsedMaxPx = 180, fadeClassName = "from-muted", className, toggleClassName }) {
 	const [expanded, setExpanded] = useState(false);
 	const [overflowing, setOverflowing] = useState(false);
 	const contentRef = useRef(null);
@@ -32,7 +32,7 @@ function ExpandableContent({ children, collapsedMaxPx = 180, fadeClassName = "fr
 		}), overflowing ? /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick: () => setExpanded((value) => !value),
-			className: "mt-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground",
+			className: cn("mt-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground", toggleClassName),
 			children: expanded ? "Show less" : "Show more"
 		}) : null]
 	});

package/dist/run/expanded-tool-detail.js

@@ -13,6 +13,7 @@ import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertCircle, ArrowLeft, ArrowRight, FileText, Loader2 } from "lucide-react";
 //#region src/run/expanded-tool-detail.tsx
+const FLUSH_TOGGLE = "mx-3 mb-2";
 const EXT_LANG = {
 	ts: "typescript",
 	tsx: "tsx",
@@ -131,6 +132,7 @@ const ExpandedToolDetail = memo(({ part }) => {
 					})]
 				}), /* @__PURE__ */ jsx(ExpandableContent, {
 					fadeClassName: "from-card",
+					toggleClassName: FLUSH_TOGGLE,
 					children: /* @__PURE__ */ jsx(CodeBlock, {
 						code: outputStr.length > 2e3 ? outputStr.slice(0, 2e3) + "\n...(truncated)" : outputStr,
 						language: "json",
@@ -148,6 +150,7 @@ const ExpandedToolDetail = memo(({ part }) => {
 					})]
 				}), /* @__PURE__ */ jsx(ExpandableContent, {
 					fadeClassName: "from-[var(--surface-danger-bg)]",
+					toggleClassName: FLUSH_TOGGLE,
 					children: /* @__PURE__ */ jsx("pre", {
 						className: "bg-[var(--surface-danger-bg)] p-3 text-xs font-mono whitespace-pre-wrap break-all text-[var(--surface-danger-text)]",
 						children: error

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.16.3",
+  "version": "11.16.5",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/chat/agent-timeline.test.tsx

@@ -253,20 +253,6 @@ describe("AgentTimeline tool actions", () => {
     expect(classes[4]).toContain("mt-4") // prose → user
   })
 
-  it("softens the streaming cursor to a muted caret", () => {
-    const { container } = render(
-      <AgentTimeline
-        items={[
-          { id: "a-1", kind: "message", role: "assistant", content: "Typing", isStreaming: true },
-        ]}
-      />,
-    )
-    const caret = container.querySelector("[data-streaming-caret]")
-    expect(caret).not.toBeNull()
-    expect(caret!.className).toContain("bg-muted-foreground")
-    expect(caret!.className).not.toContain("bg-primary")
-  })
-
   it("renders the source part's real input in the expanded detail", async () => {
     const user = userEvent.setup()
     const probePart: ToolPart = {

package/src/chat/agent-timeline.tsx

@@ -162,13 +162,29 @@ function spacingBefore(prev: StepKind | undefined, next: StepKind): string {
 // wider than the bleed, so nothing clips.
 const ROW_BLEED = "-mx-3";
 
+// The streaming caret ends the last line of text. It is drawn as the `::after`
+// of the prose's last block (the last item of a trailing list), so it follows
+// the final word instead of starting a line of its own below the paragraph.
+const STREAMING_CARET =
+  "[&>:last-child:not(ul,ol)]:after:ml-0.5 [&>:last-child:not(ul,ol)]:after:inline-block [&>:last-child:not(ul,ol)]:after:h-[1em] [&>:last-child:not(ul,ol)]:after:w-0.5 [&>:last-child:not(ul,ol)]:after:animate-pulse [&>:last-child:not(ul,ol)]:after:rounded-full [&>:last-child:not(ul,ol)]:after:bg-muted-foreground [&>:last-child:not(ul,ol)]:after:align-text-bottom [&>:last-child:not(ul,ol)]:after:content-[''] " +
+  "[&>:is(ul,ol):last-child>li:last-child]:after:ml-0.5 [&>:is(ul,ol):last-child>li:last-child]:after:inline-block [&>:is(ul,ol):last-child>li:last-child]:after:h-[1em] [&>:is(ul,ol):last-child>li:last-child]:after:w-0.5 [&>:is(ul,ol):last-child>li:last-child]:after:animate-pulse [&>:is(ul,ol):last-child>li:last-child]:after:rounded-full [&>:is(ul,ol):last-child>li:last-child]:after:bg-muted-foreground [&>:is(ul,ol):last-child>li:last-child]:after:align-text-bottom [&>:is(ul,ol):last-child>li:last-child]:after:content-['']";
+
 function AssistantMessage({ item }: { item: AgentTimelineMessageItem }) {
   return (
     <div>
       {item.content && (
-        <Markdown className="tangle-prose text-[var(--font-size-base)] leading-[1.5]">{item.content}</Markdown>
+        <Markdown
+          // `length:` types the token: a bare `text-[var(--x)]` compiles to a
+          // color, which left the reading size at the Markdown default.
+          className={cn(
+            "tangle-prose text-[length:var(--font-size-base)] leading-[1.5]",
+            item.isStreaming && STREAMING_CARET,
+          )}
+        >
+          {item.content}
+        </Markdown>
       )}
-      {item.isStreaming && (
+      {item.isStreaming && !item.content && (
         <span
           aria-hidden
           data-streaming-caret=""