camox 0.56.0 → 0.58.0

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

@@ -1,11 +1,11 @@
+import { getDraftReadClient } from "../../../lib/api-client.js";
 import { useDraftScope } from "../../../lib/draft-scope.js";
-import { reads, useReadQuery } from "../../../lib/studio-reads.js";
+import { reads, useReadQuery, useStudioCache } from "../../../lib/studio-reads.js";
 import { cn } from "../../../lib/utils.js";
 import { draftMutations } from "../../../lib/queries.js";
 import { previewStore } from "../../preview/previewStore.js";
 import { localeLabel } from "../localeOptions.js";
 import { draftLabel, plural, timeAgo } from "../draftLabel.js";
-import { useRenameDraft } from "./RenameDraftDialog.js";
 import { useShowInCanvas } from "../showInCanvas.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
@@ -981,6 +981,54 @@ function useLeaveDraft() {
 	return t0;
 }
 /**
+* Renames a regular draft, whichever draft the studio views: the request names the draft it
+* renames. A blank name clears it, so the draft shows its computed label again.
+*/
+function useRenameDraft(projectId) {
+	const $ = c(8);
+	const studioCache = useStudioCache();
+	let t0;
+	if ($[0] !== projectId) {
+		t0 = (t1) => {
+			const { draftId, name } = t1;
+			return getDraftReadClient(draftId).drafts.rename({
+				projectId,
+				name
+			});
+		};
+		$[0] = projectId;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== projectId || $[3] !== studioCache) {
+		t1 = (renamed) => {
+			studioCache.set(reads.draft({
+				projectId,
+				draftId: renamed.id
+			}), renamed);
+			studioCache.invalidate(reads.draftList({ projectId }));
+		};
+		$[2] = projectId;
+		$[3] = studioCache;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== t0 || $[6] !== t1) {
+		t2 = {
+			mutationFn: t0,
+			onSuccess: t1,
+			onError: _temp10
+		};
+		$[5] = t0;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return useMutation(t2);
+}
+function _temp10(error) {
+	return toast.error(error.message || "Could not rename the draft");
+}
+/**
 * The draft's name in the review's header, renamed in place by any member (#203), like a page
 * nickname in the Canvas Inspector: a title whose border shows on hover or focus, without
 * moving the text. An unnamed draft shows its computed label until focused. Saves on Enter or
@@ -1545,7 +1593,7 @@ function DeleteDraftDialog(t0) {
 				onOpenChange(false);
 				onDeleted(ended);
 			},
-			onError: _temp10
+			onError: _temp11
 		};
 		$[1] = onDeleted;
 		$[2] = onOpenChange;
@@ -1624,7 +1672,7 @@ function DeleteDraftDialog(t0) {
 	} else t10 = $[25];
 	return t10;
 }
-function _temp10(error) {
+function _temp11(error) {
 	return toast.error(error.message || "Could not delete the draft");
 }
 

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

@@ -4,13 +4,20 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/features/studio/components/Squareling.tsx
 /**
-* Camox's agent, drawn from the logo's shapes: its square, the soft corner, and the knockout as
-* eyes, looking right like the mark. Its face and motion say what the agent is doing. The
-* animations live in `studio.css`.
+* A squareling, drawn from the logo's shapes, with the knockout as eyes, looking right like the
+* mark. Its face and motion say what it is doing. The animations live in `studio.css`.
+*
+* The agent's (the default) is the logo's square with its soft corner, in emerald. Each patroller
+* has its own, one family: the Translator is the logo's wide wedge, in violet, glancing across
+* while it works; the SEO manager is a tall block with the small shape's soft corner, in amber,
+* scanning down while it works.
 */
-function Squareling(t0) {
+function Squareling(props) {
 	const $ = c(18);
-	const { status, className, ref } = t0;
+	const { status, className, ref } = props;
+	const variant = props.variant ?? "agent";
+	const look = LOOKS[variant];
+	const t0 = variant === "agent" ? void 0 : variant;
 	let t1;
 	if ($[0] !== className) {
 		t1 = cn("squareling shrink-0 overflow-visible", className);
@@ -18,98 +25,176 @@ function Squareling(t0) {
 		$[1] = t1;
 	} else t1 = $[1];
 	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[2] !== look.body || $[3] !== look.fill) {
 		t2 = /* @__PURE__ */ jsx("path", {
-			d: "M20 12H80Q88 12 88 20V64Q88 88 64 88H20Q12 88 12 80V20Q12 12 20 12Z",
-			className: "fill-emerald-500"
+			d: look.body,
+			className: look.fill
 		});
-		$[2] = t2;
-	} else t2 = $[2];
+		$[2] = look.body;
+		$[3] = look.fill;
+		$[4] = t2;
+	} else t2 = $[4];
 	let t3;
-	if ($[3] !== status) {
-		t3 = (status === "idle" || status === "thinking") && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
-			className: "squareling-eye",
-			x: "50",
-			y: "36",
-			width: "11",
-			height: "17"
-		}), /* @__PURE__ */ jsx("rect", {
-			className: "squareling-eye",
-			x: "69",
-			y: "36",
-			width: "11",
-			height: "17"
-		})] });
-		$[3] = status;
-		$[4] = t3;
-	} else t3 = $[4];
+	if ($[5] !== look.eyes || $[6] !== props.status || $[7] !== props.variant) {
+		t3 = /* @__PURE__ */ jsx("g", {
+			className: "squareling-eyes fill-neutral-950",
+			children: props.variant === void 0 || props.variant === "agent" ? /* @__PURE__ */ jsx(AgentEyes, {
+				eyes: look.eyes,
+				status: props.status
+			}) : /* @__PURE__ */ jsx(PatrollerEyes, {
+				eyes: look.eyes,
+				working: props.status === "working"
+			})
+		});
+		$[5] = look.eyes;
+		$[6] = props.status;
+		$[7] = props.variant;
+		$[8] = t3;
+	} else t3 = $[8];
 	let t4;
-	if ($[5] !== status) {
-		t4 = status === "acting" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
-			x: "50",
-			y: "44",
-			width: "11",
-			height: "6"
-		}), /* @__PURE__ */ jsx("rect", {
-			x: "69",
-			y: "44",
-			width: "11",
-			height: "6"
-		})] });
-		$[5] = status;
-		$[6] = t4;
-	} else t4 = $[6];
-	let t5;
-	if ($[7] !== status) {
-		t5 = status === "fixing" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
-			x: "50",
-			y: "36",
-			width: "11",
-			height: "17"
-		}), /* @__PURE__ */ jsx("rect", {
-			x: "69",
-			y: "44",
-			width: "11",
-			height: "6"
-		})] });
-		$[7] = status;
-		$[8] = t5;
-	} else t5 = $[8];
-	let t6;
-	if ($[9] !== t3 || $[10] !== t4 || $[11] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("g", {
+	if ($[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("g", {
 			className: "squareling-body",
-			children: [t2, /* @__PURE__ */ jsxs("g", {
-				className: "squareling-eyes fill-neutral-950",
-				children: [
-					t3,
-					t4,
-					t5
-				]
-			})]
+			children: [t2, t3]
 		});
-		$[9] = t3;
-		$[10] = t4;
-		$[11] = t5;
-		$[12] = t6;
-	} else t6 = $[12];
-	let t7;
-	if ($[13] !== ref || $[14] !== status || $[15] !== t1 || $[16] !== t6) {
-		t7 = /* @__PURE__ */ jsx("svg", {
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== ref || $[13] !== status || $[14] !== t0 || $[15] !== t1 || $[16] !== t4) {
+		t5 = /* @__PURE__ */ jsx("svg", {
 			ref,
 			viewBox: "0 0 100 100",
 			"aria-hidden": true,
 			"data-squareling": status,
+			"data-squareling-variant": t0,
 			className: t1,
-			children: t6
+			children: t4
 		});
-		$[13] = ref;
-		$[14] = status;
+		$[12] = ref;
+		$[13] = status;
+		$[14] = t0;
 		$[15] = t1;
-		$[16] = t6;
-		$[17] = t7;
-	} else t7 = $[17];
-	return t7;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	return t5;
+}
+const LOOKS = {
+	agent: {
+		body: "M20 12H80Q88 12 88 20V64Q88 88 64 88H20Q12 88 12 80V20Q12 12 20 12Z",
+		fill: "fill-emerald-500",
+		eyes: {
+			x: [50, 69],
+			y: 36
+		}
+	},
+	translator: {
+		body: "M14 14H86Q92 14 89.6 19.5L67.3 69.6Q60 86 42 86H14Q8 86 8 80V20Q8 14 14 14Z",
+		fill: "fill-violet-500",
+		eyes: {
+			x: [40, 59],
+			y: 28
+		}
+	},
+	seoManager: {
+		body: "M20 32Q20 8 44 8H74Q80 8 80 14V86Q80 92 74 92H26Q20 92 20 86Z",
+		fill: "fill-amber-500",
+		eyes: {
+			x: [44, 63],
+			y: 28
+		}
+	}
+};
+const EYE_WIDTH = 11;
+const OPEN = 17;
+const NARROWED = 6;
+/** How far down a narrowed eye sits, from the top of the open one. */
+const NARROWED_OFFSET = 8;
+/**
+* One eye, its left edge at `x` and its top at `y` while open: open, or narrowed on the work.
+* Only an eye that blinks carries the class `studio.css` blinks.
+*/
+function Eye(t0) {
+	const $ = c(5);
+	const { x, y, narrowed, blinks } = t0;
+	const t1 = blinks ? "squareling-eye" : void 0;
+	const t2 = narrowed ? y + NARROWED_OFFSET : y;
+	const t3 = narrowed ? NARROWED : OPEN;
+	let t4;
+	if ($[0] !== t1 || $[1] !== t2 || $[2] !== t3 || $[3] !== x) {
+		t4 = /* @__PURE__ */ jsx("rect", {
+			className: t1,
+			x,
+			y: t2,
+			width: EYE_WIDTH,
+			height: t3
+		});
+		$[0] = t1;
+		$[1] = t2;
+		$[2] = t3;
+		$[3] = x;
+		$[4] = t4;
+	} else t4 = $[4];
+	return t4;
+}
+/**
+* The agent's eyes: open, blinking, while idle or thinking; both narrowed while acting; the
+* right one narrowed while fixing.
+*/
+function AgentEyes(t0) {
+	const $ = c(13);
+	const { eyes, status } = t0;
+	const [left, right] = eyes.x;
+	const blinks = status === "idle" || status === "thinking";
+	const t1 = status === "acting";
+	let t2;
+	if ($[0] !== blinks || $[1] !== eyes.y || $[2] !== left || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Eye, {
+			x: left,
+			y: eyes.y,
+			narrowed: t1,
+			blinks
+		});
+		$[0] = blinks;
+		$[1] = eyes.y;
+		$[2] = left;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	const t3 = status === "acting" || status === "fixing";
+	let t4;
+	if ($[5] !== blinks || $[6] !== eyes.y || $[7] !== right || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Eye, {
+			x: right,
+			y: eyes.y,
+			narrowed: t3,
+			blinks
+		});
+		$[5] = blinks;
+		$[6] = eyes.y;
+		$[7] = right;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t2 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t4] });
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+/** A patroller's eyes: open while idle, narrowed on the work while working. */
+function PatrollerEyes({ eyes, working }) {
+	return eyes.x.map((x) => /* @__PURE__ */ jsx(Eye, {
+		x,
+		y: eyes.y,
+		narrowed: working,
+		blinks: true
+	}, x));
 }
 
 //#endregion

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

@@ -1,3 +1,4 @@
+import { cn } from "../../../lib/utils.js";
 import { Squareling } from "./Squareling.js";
 import { ThreadMarkdown } from "./ThreadMarkdown.js";
 import { c } from "react/compiler-runtime";
@@ -16,11 +17,12 @@ import { MessageScroller, MessageScrollerButton, MessageScrollerContent, Message
 * way to the thread, which hasn't accepted it yet), its face says whether the agent thinks or
 * acts (uses its tools, or builds its code). While the end of a turn builds the agent's code, or
 * the agent fixes a build error, it says so in words too. Each editor's message shows its
-* sender's avatar, without their name.
+* sender's avatar, without their name. A Live turn handed off to a draft ends on the draft's
+* card, which `onOpenDraft` opens.
 */
 function ThreadMessages(t0) {
-	const $ = c(19);
-	const { view, sending: t1 } = t0;
+	const $ = c(20);
+	const { view, sending: t1, onOpenDraft } = t0;
 	const sending = t1 === void 0 ? false : t1;
 	const working = view.running || sending;
 	const empty = view.messages.length === 0 && !working;
@@ -54,58 +56,62 @@ function ThreadMessages(t0) {
 		return t4;
 	}
 	let t2;
-	if ($[5] !== squareling || $[6] !== view || $[7] !== working) {
+	if ($[5] !== onOpenDraft || $[6] !== squareling || $[7] !== view || $[8] !== working) {
 		t2 = view.messages.map((message, index) => /* @__PURE__ */ jsxs(MessageScrollerItem, {
 			messageId: message.id,
 			scrollAnchor: message.from === "editor",
 			className: "flex flex-col gap-4",
-			children: [/* @__PURE__ */ jsx(ThreadMessageRow, { message }), index === view.messages.length - 1 && /* @__PURE__ */ jsx(AgentPresence, {
+			children: [/* @__PURE__ */ jsx(ThreadMessageRow, {
+				message,
+				onOpenDraft
+			}), index === view.messages.length - 1 && /* @__PURE__ */ jsx(AgentPresence, {
 				view,
 				working,
 				squareling
 			})]
 		}, message.id));
-		$[5] = squareling;
-		$[6] = view;
-		$[7] = working;
-		$[8] = t2;
-	} else t2 = $[8];
+		$[5] = onOpenDraft;
+		$[6] = squareling;
+		$[7] = view;
+		$[8] = working;
+		$[9] = t2;
+	} else t2 = $[9];
 	let t3;
-	if ($[9] !== squareling || $[10] !== view || $[11] !== working) {
+	if ($[10] !== squareling || $[11] !== view || $[12] !== working) {
 		t3 = view.messages.length === 0 && /* @__PURE__ */ jsx(AgentPresence, {
 			view,
 			working,
 			squareling
 		});
-		$[9] = squareling;
-		$[10] = view;
-		$[11] = working;
-		$[12] = t3;
-	} else t3 = $[12];
+		$[10] = squareling;
+		$[11] = view;
+		$[12] = working;
+		$[13] = t3;
+	} else t3 = $[13];
 	let t4;
-	if ($[13] !== t2 || $[14] !== t3) {
+	if ($[14] !== t2 || $[15] !== t3) {
 		t4 = /* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, {
 			className: "flex flex-col gap-4 px-2 py-3",
 			children: [t2, t3]
 		}) });
-		$[13] = t2;
-		$[14] = t3;
-		$[15] = t4;
-	} else t4 = $[15];
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
 	let t5;
-	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = /* @__PURE__ */ jsx(MessageScrollerButton, {});
-		$[16] = t5;
-	} else t5 = $[16];
+		$[17] = t5;
+	} else t5 = $[17];
 	let t6;
-	if ($[17] !== t4) {
+	if ($[18] !== t4) {
 		t6 = /* @__PURE__ */ jsx(MessageScrollerProvider, { children: /* @__PURE__ */ jsxs(MessageScroller, {
 			className: "min-h-0 flex-1",
 			children: [t4, t5]
 		}) });
-		$[17] = t4;
-		$[18] = t6;
-	} else t6 = $[18];
+		$[18] = t4;
+		$[19] = t6;
+	} else t6 = $[19];
 	return t6;
 }
 /** How long the greeting's squareling takes to reach the end of the thread, in ms. */
@@ -210,41 +216,54 @@ const STATUS_LINES = {
 	fixing: "Fixing a build error…"
 };
 function ThreadMessageRow(t0) {
-	const $ = c(14);
-	const { message } = t0;
+	const $ = c(17);
+	const { message, onOpenDraft } = t0;
+	if (message.from === "draft") {
+		let t1;
+		if ($[0] !== message || $[1] !== onOpenDraft) {
+			t1 = /* @__PURE__ */ jsx(Message, { children: /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(DraftCard, {
+				message,
+				onOpenDraft
+			}) }) });
+			$[0] = message;
+			$[1] = onOpenDraft;
+			$[2] = t1;
+		} else t1 = $[2];
+		return t1;
+	}
 	if (message.from === "stopped" || message.from === "failed") {
 		const t1 = message.from === "stopped" ? `Stopped by ${message.sender.name}` : "Camox couldn’t finish this. Send your message again to retry.";
 		let t2;
-		if ($[0] !== t1) {
+		if ($[3] !== t1) {
 			t2 = /* @__PURE__ */ jsx(Message, { children: /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground text-sm",
 				children: t1
 			}) }) });
-			$[0] = t1;
-			$[1] = t2;
-		} else t2 = $[1];
+			$[3] = t1;
+			$[4] = t2;
+		} else t2 = $[4];
 		return t2;
 	}
 	if (message.from === "agent") {
 		let t1;
-		if ($[2] !== message.text) {
+		if ($[5] !== message.text) {
 			t1 = /* @__PURE__ */ jsx(Message, { children: /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(ThreadMarkdown, { text: message.text }) }) });
-			$[2] = message.text;
-			$[3] = t1;
-		} else t1 = $[3];
+			$[5] = message.text;
+			$[6] = t1;
+		} else t1 = $[6];
 		return t1;
 	}
 	if (message.from === "camox") {
 		let t1;
-		if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
 			t1 = /* @__PURE__ */ jsx(MessageHeader, {
 				className: "text-muted-foreground text-xs",
 				children: "Camox"
 			});
-			$[4] = t1;
-		} else t1 = $[4];
+			$[7] = t1;
+		} else t1 = $[7];
 		let t2;
-		if ($[5] !== message.text) {
+		if ($[8] !== message.text) {
 			t2 = /* @__PURE__ */ jsx(Message, { children: /* @__PURE__ */ jsxs(MessageContent, { children: [t1, /* @__PURE__ */ jsx(Bubble, {
 				variant: "muted",
 				className: "max-w-full",
@@ -253,19 +272,19 @@ function ThreadMessageRow(t0) {
 					children: message.text
 				})
 			})] }) });
-			$[5] = message.text;
-			$[6] = t2;
-		} else t2 = $[6];
+			$[8] = message.text;
+			$[9] = t2;
+		} else t2 = $[9];
 		return t2;
 	}
 	let t1;
-	if ($[7] !== message.sender) {
+	if ($[10] !== message.sender) {
 		t1 = /* @__PURE__ */ jsx(MessageAvatar, { children: /* @__PURE__ */ jsx(SenderAvatar, { sender: message.sender }) });
-		$[7] = message.sender;
-		$[8] = t1;
-	} else t1 = $[8];
+		$[10] = message.sender;
+		$[11] = t1;
+	} else t1 = $[11];
 	let t2;
-	if ($[9] !== message.text) {
+	if ($[12] !== message.text) {
 		t2 = /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(Bubble, {
 			align: "end",
 			variant: "muted",
@@ -275,22 +294,100 @@ function ThreadMessageRow(t0) {
 				children: message.text
 			})
 		}) });
-		$[9] = message.text;
-		$[10] = t2;
-	} else t2 = $[10];
+		$[12] = message.text;
+		$[13] = t2;
+	} else t2 = $[13];
 	let t3;
-	if ($[11] !== t1 || $[12] !== t2) {
+	if ($[14] !== t1 || $[15] !== t2) {
 		t3 = /* @__PURE__ */ jsxs(Message, {
 			align: "end",
 			children: [t1, t2]
 		});
-		$[11] = t1;
-		$[12] = t2;
-		$[13] = t3;
-	} else t3 = $[13];
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t3;
+	} else t3 = $[16];
 	return t3;
 }
 const initials = (name) => name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
+const DRAFT_CARD_CLASSES = "bg-muted/50 flex w-full flex-col items-start gap-0.5 rounded-lg border px-3 py-2 text-left text-sm";
+/**
+* The card of the draft the agent on Live handed the request off to, where its agent does the
+* work: it opens the draft. Once the draft ended, there's nothing to open: it says how it ended.
+*/
+function DraftCard(t0) {
+	const $ = c(15);
+	const { message, onOpenDraft } = t0;
+	let t1;
+	if ($[0] !== message.name) {
+		t1 = /* @__PURE__ */ jsx("span", {
+			className: "font-medium",
+			children: message.name
+		});
+		$[0] = message.name;
+		$[1] = t1;
+	} else t1 = $[1];
+	const name = t1;
+	if (message.ended) {
+		const t2 = message.ended === "published" ? "Published" : "Deleted";
+		let t3;
+		if ($[2] !== t2) {
+			t3 = /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs",
+				children: t2
+			});
+			$[2] = t2;
+			$[3] = t3;
+		} else t3 = $[3];
+		let t4;
+		if ($[4] !== name || $[5] !== t3) {
+			t4 = /* @__PURE__ */ jsxs("div", {
+				"data-thread-draft-card": true,
+				className: DRAFT_CARD_CLASSES,
+				children: [t3, name]
+			});
+			$[4] = name;
+			$[5] = t3;
+			$[6] = t4;
+		} else t4 = $[6];
+		return t4;
+	}
+	let t2;
+	if ($[7] !== message.draftId || $[8] !== onOpenDraft) {
+		t2 = () => onOpenDraft?.(message.draftId);
+		$[7] = message.draftId;
+		$[8] = onOpenDraft;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	let t4;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = cn(DRAFT_CARD_CLASSES, "hover:bg-muted focus-visible:ring-ring transition-colors focus-visible:ring-2 focus-visible:outline-none");
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground text-xs",
+			children: "Started a draft"
+		});
+		$[10] = t3;
+		$[11] = t4;
+	} else {
+		t3 = $[10];
+		t4 = $[11];
+	}
+	let t5;
+	if ($[12] !== name || $[13] !== t2) {
+		t5 = /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-thread-draft-card": true,
+			onClick: t2,
+			className: t3,
+			children: [t4, name]
+		});
+		$[12] = name;
+		$[13] = t2;
+		$[14] = t5;
+	} else t5 = $[14];
+	return t5;
+}
 function SenderAvatar(t0) {
 	const $ = c(10);
 	const { sender } = t0;