camox 0.65.1 → 0.66.0

package/dist/features/studio/components/ThreadComposer.js

@@ -1,5 +1,5 @@
 import { c } from "react/compiler-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowUp, Square, SquareDashedMousePointer, X } from "lucide-react";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea } from "@camox/ui/input-group";
@@ -9,68 +9,116 @@ import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea } fro
 * Where an editor writes to the agent: Enter sends, Shift+Enter adds a line. While a run is
 * going, sending steers it, and a Stop button sits beside Send. Over the message, what the
 * editor has selected, which their messages carry to the agent until they clear it. A message
-* filled in from elsewhere in the studio replaces what the editor wrote, for them to send.
+* filled in from elsewhere in the studio replaces what the editor wrote, for them to send. Given a
+* `carry`, the composer of the next thread goes on from this one, as when the studio enters the
+* draft the editor's request was handed off to: with what they were writing, focused if it was.
 */
 function ThreadComposer(t0) {
-	const $ = c(39);
-	const { onSend, onStop, selection, onClearSelection, running: t1, disabled: t2, filled } = t0;
+	const $ = c(48);
+	const { onSend, onStop, selection, onClearSelection, running: t1, disabled: t2, filled, carry } = t0;
 	const running = t1 === void 0 ? false : t1;
 	const disabled = t2 === void 0 ? false : t2;
-	const [text, setText] = useState("");
+	let t3;
+	if ($[0] !== carry) {
+		t3 = () => carry?.held()?.text ?? "";
+		$[0] = carry;
+		$[1] = t3;
+	} else t3 = $[1];
+	const [text, setText] = useState(t3);
 	const [filledId, setFilledId] = useState();
 	if (filled && filled.id !== filledId) {
 		setFilledId(filled.id);
 		setText(filled.text);
 	}
 	const box = useRef(null);
-	let t3;
 	let t4;
-	if ($[0] !== filledId) {
-		t3 = () => {
-			if (filledId !== void 0) box.current?.focus();
+	let t5;
+	if ($[2] !== carry || $[3] !== text) {
+		t4 = () => {
+			carry?.hold({
+				text,
+				focused: carry.held()?.focused ?? false
+			});
 		};
-		t4 = [filledId];
-		$[0] = filledId;
-		$[1] = t3;
-		$[2] = t4;
+		t5 = [carry, text];
+		$[2] = carry;
+		$[3] = text;
+		$[4] = t4;
+		$[5] = t5;
 	} else {
-		t3 = $[1];
-		t4 = $[2];
+		t4 = $[4];
+		t5 = $[5];
 	}
-	useEffect(t3, t4);
-	let t5;
-	if ($[3] !== text) {
-		t5 = text.trim();
-		$[3] = text;
-		$[4] = t5;
-	} else t5 = $[4];
-	const message = t5;
-	const canSend = !disabled && message !== "" && onSend !== void 0;
+	useEffect(t4, t5);
 	let t6;
-	if ($[5] !== canSend || $[6] !== message || $[7] !== onSend) {
+	let t7;
+	if ($[6] !== carry) {
 		t6 = () => {
+			const element = box.current;
+			if (!carry || !element) return;
+			if (carry.held()?.focused) element.focus();
+			return () => carry.hold({
+				text: element.value,
+				focused: element.ownerDocument.activeElement === element
+			});
+		};
+		t7 = [carry];
+		$[6] = carry;
+		$[7] = t6;
+		$[8] = t7;
+	} else {
+		t6 = $[7];
+		t7 = $[8];
+	}
+	useLayoutEffect(t6, t7);
+	let t8;
+	let t9;
+	if ($[9] !== filledId) {
+		t8 = () => {
+			if (filledId !== void 0) box.current?.focus();
+		};
+		t9 = [filledId];
+		$[9] = filledId;
+		$[10] = t8;
+		$[11] = t9;
+	} else {
+		t8 = $[10];
+		t9 = $[11];
+	}
+	useEffect(t8, t9);
+	let t10;
+	if ($[12] !== text) {
+		t10 = text.trim();
+		$[12] = text;
+		$[13] = t10;
+	} else t10 = $[13];
+	const message = t10;
+	const canSend = !disabled && message !== "" && onSend !== void 0;
+	let t11;
+	if ($[14] !== canSend || $[15] !== message || $[16] !== onSend) {
+		t11 = () => {
 			if (!canSend) return;
 			onSend(message);
 			setText("");
 		};
-		$[5] = canSend;
-		$[6] = message;
-		$[7] = onSend;
-		$[8] = t6;
-	} else t6 = $[8];
-	const submit = t6;
-	let t7;
-	if ($[9] !== submit) {
-		t7 = (event) => {
+		$[14] = canSend;
+		$[15] = message;
+		$[16] = onSend;
+		$[17] = t11;
+	} else t11 = $[17];
+	const submit = t11;
+	let t12;
+	if ($[18] !== submit) {
+		t12 = (event) => {
 			event.preventDefault();
 			submit();
 		};
-		$[9] = submit;
-		$[10] = t7;
-	} else t7 = $[10];
-	let t8;
-	if ($[11] !== onClearSelection || $[12] !== selection) {
-		t8 = selection && /* @__PURE__ */ jsx(InputGroupAddon, {
+		$[18] = submit;
+		$[19] = t12;
+	} else t12 = $[19];
+	let t13;
+	if ($[20] !== onClearSelection || $[21] !== selection) {
+		t13 = selection && /* @__PURE__ */ jsx(InputGroupAddon, {
 			align: "block-start",
 			className: "border-input border-b",
 			children: /* @__PURE__ */ jsx(SelectionChip, {
@@ -78,45 +126,45 @@ function ThreadComposer(t0) {
 				onClear: onClearSelection
 			})
 		});
-		$[11] = onClearSelection;
-		$[12] = selection;
-		$[13] = t8;
-	} else t8 = $[13];
-	let t9;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = (event_0) => setText(event_0.target.value);
-		$[14] = t9;
-	} else t9 = $[14];
-	let t10;
-	if ($[15] !== submit) {
-		t10 = (event_1) => {
+		$[20] = onClearSelection;
+		$[21] = selection;
+		$[22] = t13;
+	} else t13 = $[22];
+	let t14;
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = (event_0) => setText(event_0.target.value);
+		$[23] = t14;
+	} else t14 = $[23];
+	let t15;
+	if ($[24] !== submit) {
+		t15 = (event_1) => {
 			if (event_1.key !== "Enter" || event_1.shiftKey || event_1.nativeEvent.isComposing) return;
 			event_1.preventDefault();
 			submit();
 		};
-		$[15] = submit;
-		$[16] = t10;
-	} else t10 = $[16];
-	let t11;
-	if ($[17] !== disabled || $[18] !== t10 || $[19] !== text) {
-		t11 = /* @__PURE__ */ jsx(InputGroupTextarea, {
+		$[24] = submit;
+		$[25] = t15;
+	} else t15 = $[25];
+	let t16;
+	if ($[26] !== disabled || $[27] !== t15 || $[28] !== text) {
+		t16 = /* @__PURE__ */ jsx(InputGroupTextarea, {
 			ref: box,
 			"aria-label": "Message",
 			placeholder: "Message Camox…",
 			value: text,
 			disabled,
-			onChange: t9,
-			onKeyDown: t10,
+			onChange: t14,
+			onKeyDown: t15,
 			className: "max-h-48 min-h-14"
 		});
-		$[17] = disabled;
-		$[18] = t10;
-		$[19] = text;
-		$[20] = t11;
-	} else t11 = $[20];
-	let t12;
-	if ($[21] !== disabled || $[22] !== onStop || $[23] !== running) {
-		t12 = running && onStop && /* @__PURE__ */ jsxs(InputGroupButton, {
+		$[26] = disabled;
+		$[27] = t15;
+		$[28] = text;
+		$[29] = t16;
+	} else t16 = $[29];
+	let t17;
+	if ($[30] !== disabled || $[31] !== onStop || $[32] !== running) {
+		t17 = running && onStop && /* @__PURE__ */ jsxs(InputGroupButton, {
 			type: "button",
 			variant: "outline",
 			size: "icon-sm",
@@ -127,73 +175,87 @@ function ThreadComposer(t0) {
 				children: "Stop"
 			})]
 		});
-		$[21] = disabled;
-		$[22] = onStop;
-		$[23] = running;
-		$[24] = t12;
-	} else t12 = $[24];
-	const t13 = !canSend;
-	let t14;
-	let t15;
-	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = /* @__PURE__ */ jsx(ArrowUp, {});
-		t15 = /* @__PURE__ */ jsx("span", {
+		$[30] = disabled;
+		$[31] = onStop;
+		$[32] = running;
+		$[33] = t17;
+	} else t17 = $[33];
+	const t18 = !canSend;
+	let t19;
+	let t20;
+	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = /* @__PURE__ */ jsx(ArrowUp, {});
+		t20 = /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Send"
 		});
-		$[25] = t14;
-		$[26] = t15;
+		$[34] = t19;
+		$[35] = t20;
 	} else {
-		t14 = $[25];
-		t15 = $[26];
+		t19 = $[34];
+		t20 = $[35];
 	}
-	let t16;
-	if ($[27] !== t13) {
-		t16 = /* @__PURE__ */ jsxs(InputGroupButton, {
+	let t21;
+	if ($[36] !== t18) {
+		t21 = /* @__PURE__ */ jsxs(InputGroupButton, {
 			type: "submit",
 			variant: "default",
 			size: "icon-sm",
-			disabled: t13,
-			children: [t14, t15]
+			disabled: t18,
+			children: [t19, t20]
 		});
-		$[27] = t13;
-		$[28] = t16;
-	} else t16 = $[28];
-	let t17;
-	if ($[29] !== t12 || $[30] !== t16) {
-		t17 = /* @__PURE__ */ jsxs(InputGroupAddon, {
+		$[36] = t18;
+		$[37] = t21;
+	} else t21 = $[37];
+	let t22;
+	if ($[38] !== t17 || $[39] !== t21) {
+		t22 = /* @__PURE__ */ jsxs(InputGroupAddon, {
 			align: "block-end",
 			className: "justify-end",
-			children: [t12, t16]
+			children: [t17, t21]
 		});
-		$[29] = t12;
-		$[30] = t16;
-		$[31] = t17;
-	} else t17 = $[31];
-	let t18;
-	if ($[32] !== t11 || $[33] !== t17 || $[34] !== t8) {
-		t18 = /* @__PURE__ */ jsxs(InputGroup, { children: [
-			t8,
-			t11,
-			t17
+		$[38] = t17;
+		$[39] = t21;
+		$[40] = t22;
+	} else t22 = $[40];
+	let t23;
+	if ($[41] !== t13 || $[42] !== t16 || $[43] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(InputGroup, { children: [
+			t13,
+			t16,
+			t22
 		] });
-		$[32] = t11;
-		$[33] = t17;
-		$[34] = t8;
-		$[35] = t18;
-	} else t18 = $[35];
-	let t19;
-	if ($[36] !== t18 || $[37] !== t7) {
-		t19 = /* @__PURE__ */ jsx("form", {
+		$[41] = t13;
+		$[42] = t16;
+		$[43] = t22;
+		$[44] = t23;
+	} else t23 = $[44];
+	let t24;
+	if ($[45] !== t12 || $[46] !== t23) {
+		t24 = /* @__PURE__ */ jsx("form", {
 			className: "p-2",
-			onSubmit: t7,
-			children: t18
+			onSubmit: t12,
+			children: t23
 		});
-		$[36] = t18;
-		$[37] = t7;
-		$[38] = t19;
-	} else t19 = $[38];
-	return t19;
+		$[45] = t12;
+		$[46] = t23;
+		$[47] = t24;
+	} else t24 = $[47];
+	return t24;
+}
+/** A carrier that lasts as long as the component that keeps it. */
+function useComposerCarrier() {
+	const [carrier] = useState(_temp);
+	return carrier;
+}
+function _temp() {
+	let held = null;
+	return {
+		held: () => held,
+		hold: (carry) => {
+			held = carry;
+		}
+	};
 }
 /** The selection the editor's messages carry, by its name. */
 function SelectionChip(t0) {
@@ -247,4 +309,4 @@ function SelectionChip(t0) {
 }
 
 //#endregion
-export { ThreadComposer };
+export { ThreadComposer, useComposerCarrier };

package/dist/features/studio/components/ThreadMessages.js

@@ -18,7 +18,7 @@ import { MessageScroller, MessageScrollerButton, MessageScrollerContent, Message
 * agent does, never how: thinking, looking around, making changes, building, fixing the build,
 * or starting a draft. Each editor's message shows its
 * sender's avatar, without their name. A Live turn handed off to a draft ends on the draft's
-* card, which `onOpenDraft` opens.
+* card, which `onOpenDraft` opens. The thread keeps its end in view, unless the editor scrolls up.
 */
 function ThreadMessages(t0) {
 	const $ = c(20);
@@ -105,10 +105,13 @@ function ThreadMessages(t0) {
 	} else t5 = $[17];
 	let t6;
 	if ($[18] !== t4) {
-		t6 = /* @__PURE__ */ jsx(MessageScrollerProvider, { children: /* @__PURE__ */ jsxs(MessageScroller, {
-			className: "min-h-0 flex-1",
-			children: [t4, t5]
-		}) });
+		t6 = /* @__PURE__ */ jsx(MessageScrollerProvider, {
+			autoScroll: true,
+			children: /* @__PURE__ */ jsxs(MessageScroller, {
+				className: "min-h-0 flex-1",
+				children: [t4, t5]
+			})
+		});
 		$[18] = t4;
 		$[19] = t6;
 	} else t6 = $[19];
@@ -492,8 +495,8 @@ function _temp(subject, index) {
 	}, index);
 }
 /**
-* A message's text, cropped past its fourth line: the next ones fade out, above a button that
-* shows it all. A message that fits shows as is.
+* A message's text, cropped past five lines and a half, fading out gently from its second line,
+* above a button that shows it all. A message that fits shows as is.
 */
 function CroppedText(t0) {
 	const $ = c(17);
@@ -508,9 +511,14 @@ function CroppedText(t0) {
 			if (!element || expanded) return;
 			const measure = () => setOverflows(element.scrollHeight > element.clientHeight + 1);
 			measure();
-			const observer = new ResizeObserver(measure);
-			observer.observe(element);
-			return () => observer.disconnect();
+			const resizes = new ResizeObserver(measure);
+			resizes.observe(element);
+			const views = new IntersectionObserver(measure);
+			views.observe(element);
+			return () => {
+				resizes.disconnect();
+				views.disconnect();
+			};
 		};
 		$[0] = expanded;
 		$[1] = t1;
@@ -526,7 +534,7 @@ function CroppedText(t0) {
 	const cropped = !expanded && overflows;
 	const t3 = cropped || void 0;
 	const t4 = !expanded && "max-h-[5.5lh] overflow-hidden";
-	const t5 = cropped && "mask-[linear-gradient(to_bottom,black_4lh,transparent)]";
+	const t5 = cropped && "mask-[linear-gradient(to_bottom,black_1.5lh,transparent)]";
 	let t6;
 	if ($[5] !== t4 || $[6] !== t5) {
 		t6 = cn("whitespace-pre-wrap", t4, t5);