hypervibes 0.0.0-stage → 0.4.0

package/.build/server/assets/agent-chat-page-DChiz8KQ.js

@@ -0,0 +1,686 @@
+import { S as stopAgentChat, b as sendAgentMessage, o as compactAgentChat, v as resetAgentChat, y as retryAgent } from "./agents-CZq-0mna.js";
+import { r as agentHistoryQueryOptions } from "./agent-queries-Cmx8RiUx.js";
+import { f as randomUuid } from "./contracts-CG-nZuYJ.js";
+import { t as subagentMutations } from "./subagent-mutations-dUo3B_SG.js";
+import { t as ProviderLogo } from "./provider-logo-BRdbOr9I.js";
+import { a as modelKey, t as ModelDialog } from "./model-picker-CA1uYb--.js";
+import { r as ToolCall, t as ChatBubble } from "./chat-bubble-ik3itVbx.js";
+import { t as ArtifactContent } from "./artifact-content-B6uHmPz7.js";
+import { i as useAgentEventsStatus, r as useAgentEvent } from "./agent-events-DK9Yz5__.js";
+import { useEffect, useEffectEvent, useId, useLayoutEffect, useRef, useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+//#region src/components/use-agent-chat.ts
+/** Each mounted chat/settings page owns its stream and closes it on navigation. */
+function useAgentChat(initial) {
+	const client = useQueryClient();
+	const historyId = useId();
+	const [chat, setChat] = useState(initial);
+	const [connectionError, setConnectionError] = useState("");
+	/** Transcript older than the streamed tail, oldest first. */
+	const [older, setOlder] = useState([]);
+	const [historyLoading, setHistoryLoading] = useState(false);
+	const [historyDone, setHistoryDone] = useState(false);
+	/** Exclusive upper entry ID for the next history page. */
+	const before = useRef(void 0);
+	const chatRef = useRef(chat);
+	const olderRef = useRef(older);
+	const loadingRef = useRef(false);
+	const doneRef = useRef(false);
+	const lastReset = useRef(initial.messages.find((entry) => entry.marker === "reset")?.id);
+	const historyVersion = useRef(0);
+	const id = initial.agent.id;
+	const { interrupted, controlMessage, streamErrors } = useAgentEventsStatus();
+	useAgentEvent("chat", (event) => {
+		const next = JSON.parse(event.data);
+		const reset = next.messages.find((entry) => entry.marker === "reset")?.id;
+		if (reset && reset !== lastReset.current) {
+			lastReset.current = reset;
+			historyVersion.current++;
+			before.current = void 0;
+			olderRef.current = [];
+			loadingRef.current = false;
+			doneRef.current = false;
+			setOlder([]);
+			setHistoryDone(false);
+			setHistoryLoading(false);
+		}
+		chatRef.current = next;
+		setChat(next);
+		setConnectionError("");
+	});
+	useEffect(() => {
+		const topicError = streamErrors["chat"];
+		if (topicError) setConnectionError(topicError);
+		else if (interrupted) setConnectionError(controlMessage || "Connection interrupted. Reconnecting…");
+	}, [
+		interrupted,
+		controlMessage,
+		streamErrors
+	]);
+	useEffect(() => {
+		chatRef.current = chat;
+	}, [chat]);
+	useEffect(() => () => {
+		historyVersion.current++;
+	}, [id]);
+	/** Prepends one page of transcript older than everything currently shown; returns whether a page was fetched. */
+	async function loadOlder() {
+		if (loadingRef.current || doneRef.current) return false;
+		loadingRef.current = true;
+		setHistoryLoading(true);
+		const version = historyVersion.current;
+		try {
+			const result = await client.fetchQuery(agentHistoryQueryOptions(id, before.current, `${historyId}:${version}`));
+			if (version !== historyVersion.current) return false;
+			const known = new Set([...chatRef.current.messages, ...olderRef.current].map((entry) => entry.id));
+			const fresh = result.messages.filter((entry) => !known.has(entry.id));
+			if (fresh.length) {
+				olderRef.current = [...fresh, ...olderRef.current];
+				setOlder(olderRef.current);
+			}
+			before.current = result.before;
+			doneRef.current = !result.more;
+			setHistoryDone(!result.more);
+			setConnectionError("");
+			return true;
+		} catch {
+			if (version === historyVersion.current) setConnectionError("Unable to load earlier messages. Please try again.");
+			return false;
+		} finally {
+			if (version === historyVersion.current) {
+				loadingRef.current = false;
+				setHistoryLoading(false);
+			}
+		}
+	}
+	return {
+		chat,
+		messages: [...older, ...chat.messages],
+		connectionError,
+		historyLoading,
+		historyDone,
+		loadOlder
+	};
+}
+//#endregion
+//#region src/components/agent-chat-page.tsx
+var compactNumber = new Intl.NumberFormat("en", {
+	notation: "compact",
+	maximumFractionDigits: 1
+});
+function money(value) {
+	return value > 0 && value < .01 ? `$${value.toFixed(4)}` : `$${value.toFixed(2)}`;
+}
+function ChartContextBadge({ chart }) {
+	return /* @__PURE__ */ jsxs("p", {
+		className: "mb-2 rounded-lg border border-violet-900/70 bg-violet-950/20 px-3 py-2 text-xs text-violet-200",
+		title: `Layout: ${chart.name} · Snapshot ${chart.snapshotId}`,
+		children: [
+			"Chart · ",
+			chart.name,
+			" · ",
+			chart.coin,
+			"-PERP · ",
+			chart.interval,
+			chart.image ? " · Image attached" : "",
+			chart.selectedDrawingId ? " · Selected object attached" : "",
+			/* @__PURE__ */ jsxs("span", {
+				className: "ml-2 text-zinc-500",
+				children: [new Date(chart.capturedAt).toISOString().replace("T", " ").slice(0, 19), " UTC"]
+			})
+		]
+	});
+}
+function ChatMessage({ entry, agentId }) {
+	if (entry.role === "tool") return entry.tool ? /* @__PURE__ */ jsx(ToolCall, { tool: entry.tool }) : null;
+	if (entry.role === "system") return /* @__PURE__ */ jsxs("div", {
+		role: "presentation",
+		className: "flex items-center gap-3 py-1",
+		children: [
+			/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-zinc-800" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-xs text-zinc-500",
+				children: entry.text
+			}),
+			/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-zinc-800" })
+		]
+	});
+	return /* @__PURE__ */ jsxs(ChatBubble, {
+		role: entry.role,
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				className: "mb-2 text-xs font-semibold uppercase tracking-wide text-zinc-400",
+				children: entry.role === "user" ? "You" : "Assistant"
+			}),
+			entry.chart && /* @__PURE__ */ jsx(ChartContextBadge, { chart: entry.chart }),
+			entry.failed ? /* @__PURE__ */ jsx("p", {
+				className: "whitespace-pre-wrap break-words text-sm text-red-300",
+				children: entry.text
+			}) : /* @__PURE__ */ jsx(ArtifactContent, {
+				agentId,
+				content: entry.text
+			})
+		]
+	});
+}
+function ResetContextDialog({ onCancel, onConfirm, disabled }) {
+	const dialog = useRef(null);
+	const titleId = useId();
+	useEffect(() => {
+		const element = dialog.current;
+		element.showModal();
+		return () => element.close();
+	}, []);
+	return /* @__PURE__ */ jsxs("dialog", {
+		ref: dialog,
+		"aria-labelledby": titleId,
+		"aria-describedby": `${titleId}-description`,
+		onCancel: (event) => {
+			event.preventDefault();
+			onCancel();
+		},
+		className: "m-auto w-[calc(100%_-_2rem)] max-w-md rounded-2xl border border-zinc-800 bg-[#0d0d10] p-6 text-zinc-100 shadow-2xl backdrop:bg-black/70 backdrop:backdrop-blur-sm",
+		children: [
+			/* @__PURE__ */ jsx("h3", {
+				id: titleId,
+				className: "text-lg font-semibold text-white",
+				children: "Reset context?"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				id: `${titleId}-description`,
+				className: "mt-2 text-sm leading-6 text-zinc-400",
+				children: "The model will start fresh. Earlier messages remain available. Accounts, orders, and agent configuration are unchanged."
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					autoFocus: true,
+					onClick: onCancel,
+					className: "cursor-pointer rounded-full border border-zinc-800 px-4 py-2 text-sm font-medium text-zinc-300 hover:border-zinc-700 hover:text-white",
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled,
+					onClick: onConfirm,
+					className: "cursor-pointer rounded-full bg-violet-600 px-4 py-2 text-sm font-medium text-white hover:bg-violet-500 disabled:cursor-not-allowed disabled:opacity-50",
+					children: "Reset context"
+				})]
+			})
+		]
+	});
+}
+function AgentChatPage({ initial, choices, embedded = false, visible = true, chartContext }) {
+	const { chat, messages, connectionError, historyLoading, historyDone, loadOlder } = useAgentChat(initial);
+	const [message, setMessage] = useState("");
+	const client = useQueryClient();
+	const mutation = useMutation({
+		mutationFn: (operation) => operation(),
+		onMutate: () => {
+			setNotice("");
+		}
+	});
+	const pending = mutation.isPending;
+	const error = mutation.error?.message;
+	/** Transient outcome of a background action, such as a declined compaction. */
+	const [notice, setNotice] = useState("");
+	const [resetOpen, setResetOpen] = useState(false);
+	const [jump, setJump] = useState(false);
+	const [modelOpen, setModelOpen] = useState(false);
+	const request = useRef(null);
+	const [includeImage, setIncludeImage] = useState(false);
+	const inFlight = useRef(false);
+	const scroll = useRef(null);
+	const stick = useRef(true);
+	/** Scroll offset to restore after an older history page is prepended. */
+	const restore = useRef(null);
+	const id = initial.agent.id;
+	useEffect(() => {
+		try {
+			setIncludeImage(localStorage.getItem(`hypervibes:chart-image:${id}`) === "true");
+		} catch {}
+	}, [id]);
+	useLayoutEffect(() => {
+		const element = scroll.current;
+		if (!element) return;
+		if (restore.current) {
+			element.scrollTop = restore.current.top + element.scrollHeight - restore.current.height;
+			restore.current = null;
+		} else if (stick.current) element.scrollTop = element.scrollHeight;
+	}, [
+		messages.length,
+		chat.messages,
+		chat.partial,
+		visible
+	]);
+	useEffect(() => {
+		const element = scroll.current;
+		if (element) element.scrollTop = element.scrollHeight;
+	}, [id]);
+	useEffect(() => {
+		if (notice && chat.messages.some((entry) => entry.marker === "compaction")) setNotice("");
+	}, [chat.messages, notice]);
+	async function run(operation) {
+		if (inFlight.current) return;
+		inFlight.current = true;
+		try {
+			await mutation.mutateAsync(operation);
+		} catch {} finally {
+			inFlight.current = false;
+		}
+	}
+	/** The composer keeps focus through sends so chatting stays hands-on-keyboard. */
+	const composer = useRef(null);
+	async function action(kind) {
+		await run(async () => {
+			if (kind === "compact") {
+				const result = await compactAgentChat({ data: { id } });
+				if (result.message) setNotice(result.message);
+				return;
+			}
+			if (kind === "retry") {
+				await retryAgent({ data: { id } });
+				await Promise.all([client.invalidateQueries({ queryKey: ["agents"] }), client.invalidateQueries({ queryKey: ["agent", id] })]);
+				return;
+			}
+			if (kind === "stop") {
+				await stopAgentChat({ data: { id } });
+				return;
+			}
+			if (kind === "reset") {
+				await resetAgentChat({ data: { id } });
+				return;
+			}
+			if (request.current?.message !== message) request.current = {
+				message,
+				id: randomUuid()
+			};
+			const outgoing = request.current;
+			if (chartContext && !outgoing.chart) outgoing.chart = await chartContext.capture(includeImage && chat.supportsImages === true);
+			await sendAgentMessage({ data: {
+				id,
+				message: outgoing.message,
+				requestId: outgoing.id,
+				...outgoing.chart ? { chart: outgoing.chart } : {}
+			} });
+			setMessage((current) => current === outgoing.message ? "" : current);
+			if (request.current === outgoing) request.current = null;
+		});
+		if (kind === "send" || kind === "retry" || kind === "reset") composer.current?.focus();
+	}
+	const onEscape = useEffectEvent((event) => {
+		if (!visible || event.key !== "Escape" || event.repeat || event.isComposing || event.defaultPrevented || !chat.busy || pending || document.querySelector("dialog[open]")) return;
+		event.preventDefault();
+		action("stop");
+	});
+	useEffect(() => {
+		document.addEventListener("keydown", onEscape);
+		return () => document.removeEventListener("keydown", onEscape);
+	}, []);
+	function send() {
+		action("send");
+	}
+	function onComposerKey(event) {
+		if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+			event.preventDefault();
+			if (!disabled && message.trim()) send();
+		}
+	}
+	async function onLoadOlder() {
+		const element = scroll.current;
+		const marker = element ? {
+			height: element.scrollHeight,
+			top: element.scrollTop
+		} : null;
+		if (await loadOlder() && marker) restore.current = marker;
+	}
+	function onScroll() {
+		const element = scroll.current;
+		if (!element) return;
+		const atBottom = element.scrollHeight - element.scrollTop - element.clientHeight < 80;
+		stick.current = atBottom;
+		setJump(!atBottom);
+		if (element.scrollTop < 400) onLoadOlder();
+	}
+	function jumpToLatest() {
+		const element = scroll.current;
+		if (element) element.scrollTop = element.scrollHeight;
+	}
+	/** The orchestrator's model is the `main:` orchestrator section; the backend rejects edits while it is working. */
+	async function changeModel(value, thinkingLevel) {
+		const choice = choices.find((entry) => modelKey(entry) === value);
+		if (!choice) throw new Error("Select an available model.");
+		await mutation.mutateAsync(async () => {
+			await subagentMutations(client, id).saveSection({
+				id: `main:${id}`,
+				section: "model",
+				settings: {
+					provider: choice.provider,
+					modelId: choice.modelId,
+					thinkingLevel
+				}
+			});
+			setModelOpen(false);
+		});
+	}
+	useEffect(() => {
+		if (!modelOpen) return;
+		return () => {
+			composer.current?.focus();
+		};
+	}, [modelOpen]);
+	const busy = chat.busy;
+	const modelBusy = busy || chat.queuedMessages.length > 0;
+	const selectedModel = choices.find((choice) => modelKey(choice) === modelKey(chat.model));
+	const percentage = chat.context ? Math.min(100, Math.round(chat.context.tokens / chat.context.window * 100)) : void 0;
+	const disabled = pending || !chat.agent.enabled || !chat.configured || chat.agent.state !== "ready" || chartContext?.disabled === true;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": "Chat",
+		className: `flex min-h-0 w-full flex-col overflow-hidden rounded-2xl border border-zinc-800 bg-[#0d0d10] ${embedded ? "h-full" : "h-[calc(100dvh-4.5rem)] sm:h-[calc(100dvh-5rem)]"}`,
+		children: [
+			!embedded && /* @__PURE__ */ jsxs("header", {
+				className: "flex flex-wrap items-center gap-x-4 gap-y-2 border-b border-zinc-800 px-4 py-2 sm:px-6",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsx("h2", {
+							className: "text-sm font-medium text-white",
+							children: "Main conversation"
+						}), /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							disabled: modelBusy,
+							onClick: () => setModelOpen(true),
+							"aria-haspopup": "dialog",
+							"aria-label": "Choose model",
+							title: modelBusy ? "Stop or finish queued work before changing the model" : "Change the model",
+							className: "mt-0.5 flex min-w-0 max-w-full cursor-pointer items-center gap-2 rounded-lg px-1.5 py-0.5 text-xs text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200 disabled:cursor-not-allowed disabled:opacity-50",
+							children: [selectedModel && /* @__PURE__ */ jsx(ProviderLogo, {
+								provider: selectedModel.provider,
+								className: "h-5 w-5 shrink-0 rounded-sm border border-zinc-800 bg-white p-0.5"
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "min-w-0 truncate",
+								children: [selectedModel ? selectedModel.name : `${chat.model.provider}/${chat.model.modelId}`, chat.thinkingLevel !== void 0 && /* @__PURE__ */ jsxs("span", {
+									className: "text-zinc-500",
+									children: [" · Thinking: ", chat.thinkingLevel || "Default"]
+								})]
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-zinc-400",
+						children: [chat.context && /* @__PURE__ */ jsxs("span", {
+							className: "flex items-center gap-2",
+							title: "Estimated context usage of the next request",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "h-1.5 w-20 overflow-hidden rounded-full bg-zinc-800",
+									children: /* @__PURE__ */ jsx("span", {
+										className: `block h-full rounded-full ${percentage >= 80 ? "bg-amber-400" : "bg-violet-500"}`,
+										style: { width: `${percentage}%` }
+									})
+								}),
+								compactNumber.format(chat.context.tokens),
+								" / ",
+								compactNumber.format(chat.context.window),
+								" tokens"
+							]
+						}), /* @__PURE__ */ jsxs("span", {
+							title: "Lifetime conversation usage, including before context resets",
+							children: [
+								"Total usage: ",
+								compactNumber.format(chat.usage.input),
+								" in · ",
+								compactNumber.format(chat.usage.output),
+								" out",
+								chat.usage.cost > 0 ? ` · ${money(chat.usage.cost)}` : ""
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							disabled: disabled || chat.compacting,
+							onClick: () => {
+								action("compact");
+							},
+							className: "cursor-pointer rounded-lg border border-zinc-700 px-3 py-1.5 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-white disabled:cursor-not-allowed disabled:opacity-50",
+							children: chat.compacting ? "Compacting…" : "Compact"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							disabled,
+							onClick: () => setResetOpen(true),
+							"aria-haspopup": "dialog",
+							className: "cursor-pointer rounded-lg border border-zinc-700 px-3 py-1.5 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-white disabled:cursor-not-allowed disabled:opacity-50",
+							children: "Reset context"
+						})]
+					})
+				]
+			}),
+			resetOpen && /* @__PURE__ */ jsx(ResetContextDialog, {
+				disabled,
+				onCancel: () => setResetOpen(false),
+				onConfirm: () => {
+					setResetOpen(false);
+					action("reset");
+				}
+			}),
+			modelOpen && /* @__PURE__ */ jsx(ModelDialog, {
+				choices,
+				value: modelKey(chat.model),
+				thinkingLevel: chat.thinkingLevel,
+				onCancel: () => setModelOpen(false),
+				onApply: changeModel
+			}),
+			!chat.agent.enabled && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "border-b border-zinc-800 px-4 py-2 text-sm text-amber-200",
+				children: "Agent disabled. Enable it to chat or run workers. Exchange orders and positions remain unchanged."
+			}),
+			!chat.configured && /* @__PURE__ */ jsxs("p", {
+				role: "status",
+				className: "border-b border-zinc-800 px-4 py-2 text-sm text-amber-200 sm:px-6",
+				children: ["Reconnect this Agent’s provider or select an available model. ", /* @__PURE__ */ jsx("a", {
+					href: "/providers",
+					className: "cursor-pointer underline",
+					children: "Manage providers"
+				})]
+			}),
+			chat.agent.state !== "ready" && /* @__PURE__ */ jsxs("div", {
+				role: "status",
+				className: "border-b border-zinc-800 px-4 py-3 sm:px-6",
+				children: [/* @__PURE__ */ jsx("p", { children: chat.agent.error ?? (chat.agent.state === "stopping" || chat.agent.state === "stopped" ? "Deletion pending. This agent will not resume execution." : "Initializing Agent…") }), chat.agent.state === "stopping" || chat.agent.state === "stopped" ? /* @__PURE__ */ jsx(Link, {
+					to: "/agents/$agentId/settings",
+					params: { agentId: chat.agent.id },
+					className: "mt-2 inline-block cursor-pointer text-violet-300 underline",
+					children: "Retry deletion in Settings"
+				}) : /* @__PURE__ */ jsx("button", {
+					disabled: pending,
+					onClick: () => {
+						action("retry");
+					},
+					className: "mt-2 cursor-pointer rounded-lg bg-violet-600 px-4 py-2 text-sm disabled:cursor-wait",
+					children: "Retry initialization"
+				})]
+			}),
+			chat.compactionError && /* @__PURE__ */ jsxs("p", {
+				role: "status",
+				className: "border-b border-zinc-800 px-4 py-2 text-xs text-amber-200 sm:px-6",
+				children: ["Compaction failed: ", chat.compactionError]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: scroll,
+				onScroll,
+				"aria-label": "Conversation",
+				"aria-live": "polite",
+				className: `min-h-0 flex-1 space-y-3 overflow-y-auto ${embedded ? "px-3 py-3" : "px-4 py-4 sm:px-6"}`,
+				children: [
+					!historyDone && chat.history && /* @__PURE__ */ jsx("div", {
+						className: "py-1 text-center",
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							disabled: historyLoading,
+							onClick: () => {
+								onLoadOlder();
+							},
+							className: "cursor-pointer rounded-lg px-3 py-1 text-xs text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200 disabled:cursor-wait disabled:opacity-50",
+							children: historyLoading ? "Loading earlier messages…" : messages[0]?.marker === "reset" ? "View messages before reset" : "Load earlier messages"
+						})
+					}),
+					messages.length === 0 && /* @__PURE__ */ jsx("p", {
+						className: "py-8 text-center text-sm text-zinc-500",
+						children: "Start a conversation with your Agent."
+					}),
+					messages.map((entry) => /* @__PURE__ */ jsx(ChatMessage, {
+						entry,
+						agentId: chat.agent.id
+					}, entry.id)),
+					busy && /* @__PURE__ */ jsx("article", {
+						className: "mr-8 whitespace-pre-wrap break-words rounded-xl bg-zinc-900 p-4 text-sm text-zinc-300",
+						children: chat.partial || "Thinking…"
+					}),
+					chat.queuedMessages.map((item) => /* @__PURE__ */ jsxs("article", {
+						className: "ml-8 rounded-xl bg-violet-950/40 p-4",
+						children: [
+							/* @__PURE__ */ jsx("h2", {
+								className: "mb-2 text-xs font-semibold uppercase tracking-wide text-zinc-400",
+								children: "You"
+							}),
+							item.chart && /* @__PURE__ */ jsx(ChartContextBadge, { chart: item.chart }),
+							/* @__PURE__ */ jsx("p", {
+								title: item.text,
+								className: "line-clamp-6 whitespace-pre-wrap break-words text-sm text-zinc-100",
+								children: item.text
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "mt-2 text-xs text-violet-300/70",
+								children: "Queued · sent when the response finishes"
+							})
+						]
+					}, item.id))
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				role: "status",
+				className: `flex flex-wrap items-center gap-3 border-t border-zinc-800 text-xs text-zinc-400 ${embedded ? "px-3 py-1.5" : "px-4 py-2 sm:px-6"}`,
+				children: [
+					/* @__PURE__ */ jsxs("span", { children: [busy ? "Working" : "Idle", chat.queuedMessages.length > 0 ? ` · ${chat.queuedMessages.length} queued` : ""] }),
+					notice && /* @__PURE__ */ jsx("span", {
+						className: "text-amber-200",
+						children: notice
+					}),
+					busy && /* @__PURE__ */ jsx("button", {
+						disabled: pending,
+						onClick: () => {
+							action("stop");
+						},
+						title: "Stop response (Esc)",
+						"aria-keyshortcuts": "Escape",
+						className: "cursor-pointer text-zinc-300 hover:text-white hover:underline disabled:cursor-wait",
+						children: "Stop response"
+					}),
+					jump && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: jumpToLatest,
+						className: "ml-auto cursor-pointer text-sky-300 hover:underline",
+						children: "Jump to latest"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("form", {
+				onSubmit: (event) => {
+					event.preventDefault();
+					if (!disabled && message.trim()) send();
+				},
+				className: `border-t border-zinc-800 ${embedded ? "px-3 py-2" : "px-4 py-3 sm:px-6"}`,
+				children: [
+					chartContext && /* @__PURE__ */ jsxs("div", {
+						className: "mb-2 flex flex-wrap items-center justify-between gap-2 text-xs text-zinc-400",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: embedded ? "min-w-0 flex-1 truncate" : void 0,
+							title: chartContext.label,
+							children: embedded ? "Chart context" : `Attach chart context · ${chartContext.label}`
+						}), /* @__PURE__ */ jsxs("label", {
+							className: chat.supportsImages ? "cursor-pointer" : "cursor-not-allowed text-zinc-600",
+							title: chat.supportsImages ? "Include this chart and visible drawings as a PNG" : "The selected model does not support images",
+							children: [/* @__PURE__ */ jsx("input", {
+								type: "checkbox",
+								checked: (request.current?.chart ? Boolean(request.current.chart.image) : includeImage) && chat.supportsImages === true,
+								disabled: !chat.supportsImages || pending || Boolean(request.current?.chart),
+								onChange: (event) => {
+									setIncludeImage(event.target.checked);
+									try {
+										localStorage.setItem(`hypervibes:chart-image:${id}`, String(event.target.checked));
+									} catch {}
+								},
+								className: "mr-2 cursor-pointer disabled:cursor-not-allowed"
+							}), "Include chart image"]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: `flex items-end ${embedded ? "gap-2" : "gap-3"}`,
+						children: [
+							/* @__PURE__ */ jsx("label", {
+								htmlFor: "agent-message",
+								className: "sr-only",
+								children: "Message"
+							}),
+							/* @__PURE__ */ jsx("textarea", {
+								id: "agent-message",
+								ref: composer,
+								autoFocus: true,
+								value: message,
+								onChange: (event) => {
+									setMessage(event.target.value);
+									if (request.current?.message !== event.target.value) request.current = null;
+								},
+								onKeyDown: onComposerKey,
+								required: true,
+								maxLength: 16e3,
+								rows: 1,
+								disabled: !chat.agent.enabled || !chat.configured || chat.agent.state !== "ready",
+								placeholder: embedded ? "Ask about this chart" : "Message this agent",
+								className: "field-sizing-content max-h-48 min-h-11 min-w-0 flex-1 resize-none rounded-2xl border border-zinc-800 bg-zinc-950 px-4 py-3 text-sm text-zinc-100 placeholder-zinc-600 focus:border-zinc-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "submit",
+								disabled: disabled || !message.trim(),
+								"aria-label": pending ? "Please wait…" : busy ? "Queue message" : "Send message",
+								title: busy ? "Queue message" : "Send message",
+								className: `shrink-0 cursor-pointer rounded-full bg-violet-600 text-sm font-medium hover:bg-violet-500 disabled:cursor-not-allowed disabled:opacity-50 ${embedded ? "flex size-10 items-center justify-center" : "px-5 py-2.5"}`,
+								children: embedded ? /* @__PURE__ */ jsx("svg", {
+									"aria-hidden": "true",
+									viewBox: "0 0 24 24",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: 2,
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									className: "size-5",
+									children: /* @__PURE__ */ jsx("path", { d: "M12 19V5m-6 6 6-6 6 6" })
+								}) : pending ? "Please wait…" : busy ? "Queue message" : "Send message"
+							})
+						]
+					}),
+					!embedded && /* @__PURE__ */ jsxs("p", {
+						className: "mt-2 text-xs text-zinc-500",
+						children: [busy ? "The agent is responding · Esc to stop · Enter queues your message · Shift+Enter for a new line" : "Enter to send · Shift+Enter for a new line", " · Up to 16,000 characters"]
+					})
+				]
+			}),
+			error && request.current?.chart && /* @__PURE__ */ jsx("p", {
+				className: "px-4 py-2 text-xs text-zinc-400",
+				children: "Retries reuse the captured chart and image setting. Edit your message to capture a new view."
+			}),
+			(error || connectionError) && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "border-t border-zinc-800 px-4 py-2 text-sm text-red-300 sm:px-6",
+				children: error || connectionError
+			})
+		]
+	});
+}
+//#endregion
+export { AgentChatPage as t };