@agimon-ai/po-web-dashboard 0.0.0-alpha.0

package/dist/web/features/session/Composer.mjs

@@ -0,0 +1,806 @@
+import { HOST_SLOTS } from "../../lib/pluginRegistry.mjs";
+import { searchSessionFiles } from "../../lib/hubApi.mjs";
+import { registerPromptInput } from "../../lib/promptFocus.mjs";
+import { uploadSessionAttachment } from "../../lib/sessionAsset.mjs";
+import { composerStore, inlineTextBytes, updateComposerState, useComposerState } from "../../stores/composerStore.mjs";
+import { sessionsStore, useActiveSessionMeta } from "../../stores/sessionsStore.mjs";
+import { abortRun, clearQueuedMessages, deleteQueuedMessage, promoteQueuedMessage, resumeQueuedMessages, useActiveSession } from "../../stores/sessionStore.mjs";
+import { composerSubmissionStore, submitComposerDraft } from "../../stores/composerSubmissionStore.mjs";
+import { openPalette } from "../../stores/paletteStore.mjs";
+import { useToolPrompt } from "../../stores/useToolPrompt.mjs";
+import { PluginSurface } from "../../components/PluginSurface.mjs";
+import { AgentLockPanel } from "./AgentLockPanel.mjs";
+import { ComposerPrompt } from "./ComposerPrompt.mjs";
+import { DormantPanel } from "./DormantPanel.mjs";
+import { QueueSheet } from "./QueueSheet.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useStore } from "@tanstack/react-store";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, CloseIcon, Kbd, OptionLabel, OptionRow, PlusIcon, Popover, PopoverAnchor, PopoverContent, PopoverFooter, PopoverTrigger, SendIcon, StopIcon, Textarea, optionRowVariants } from "@agimon-ai/po-web-components";
+//#region src/web/features/session/Composer.tsx
+/** The input grows with the draft up to this many pixels, then scrolls. */
+const MAX_INPUT_HEIGHT_PX = 192;
+/**
+* Bound the result set so completion searches and their scrollable popup stay
+* quick even in large workspaces.
+*/
+const MAX_COMPLETION_ITEMS = 20;
+/** Pi names skill commands `skill:<name>`; the cockpit browses them under `$`. */
+const SKILL_PREFIX = "skill:";
+const TRIGGER_CHARS = {
+	command: "/",
+	skill: "$",
+	file: "@"
+};
+const FILE_SEARCH_DEBOUNCE_MS = 50;
+const IMAGE_TYPES = /* @__PURE__ */ new Set([
+	"image/png",
+	"image/jpeg",
+	"image/gif",
+	"image/webp"
+]);
+const TEXT_EXTENSIONS = /* @__PURE__ */ new Set([
+	"c",
+	"cpp",
+	"css",
+	"csv",
+	"go",
+	"h",
+	"hpp",
+	"html",
+	"ini",
+	"java",
+	"js",
+	"json",
+	"jsonl",
+	"jsx",
+	"log",
+	"md",
+	"markdown",
+	"py",
+	"rb",
+	"rs",
+	"sh",
+	"sql",
+	"toml",
+	"ts",
+	"tsv",
+	"tsx",
+	"txt",
+	"xml",
+	"yaml",
+	"yml"
+]);
+function isReadableText(file) {
+	const extension = file.name.toLowerCase().split(".").pop() ?? "";
+	return file.type.startsWith("text/") || TEXT_EXTENSIONS.has(extension);
+}
+function readDataUrl(file) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => typeof reader.result === "string" ? resolve(reader.result) : reject(/* @__PURE__ */ new Error("No file data"));
+		reader.onerror = () => reject(reader.error ?? /* @__PURE__ */ new Error("Could not read file"));
+		reader.readAsDataURL(file);
+	});
+}
+/**
+* Stores a copy on the host so a tool can be handed the file by path. Images and
+* text still travel inline, so for them a failed upload only means no path.
+*/
+async function storedPath(sessionId, file) {
+	try {
+		return (await uploadSessionAttachment(sessionId, file)).path;
+	} catch {
+		return;
+	}
+}
+const TOO_MANY_ATTACHMENTS = `Only ${String(8)} attachments are allowed.`;
+/** Why one more image or text file would break a total budget, or '' when it fits. */
+function totalBudgetRejection(attachments, kind, name, size) {
+	if (kind === "image") return attachments.reduce((total, item) => total + (item.kind === "image" ? item.size : 0), 0) + size > 20971520 ? `${name} exceeds the 20 MB total image limit.` : "";
+	if (kind === "text" && inlineTextBytes(attachments) + size > 204800) return `${name} exceeds the 200 KB total text limit.`;
+	return "";
+}
+/**
+* Reads picked, pasted or dropped files into new attachments, numbered from
+* `current.nextAttachmentId` and budgeted after the ones already staged.
+*/
+async function readComposerFiles(sessionId, files, current) {
+	const next = [...current.attachments];
+	const rejected = [];
+	let attachmentId = current.nextAttachmentId;
+	for (const file of files) {
+		if (next.length >= 8) {
+			rejected.push(TOO_MANY_ATTACHMENTS);
+			break;
+		}
+		const id = `attachment-${String(attachmentId++)}`;
+		if (IMAGE_TYPES.has(file.type)) {
+			if (file.size > 10485760) {
+				rejected.push(`${file.name} exceeds the 10 MB image limit.`);
+				continue;
+			}
+			const overBudget = totalBudgetRejection(next, "image", file.name, file.size);
+			if (overBudget) {
+				rejected.push(overBudget);
+				continue;
+			}
+			try {
+				const dataUrl = await readDataUrl(file);
+				const path = file.size > 8388608 ? void 0 : await storedPath(sessionId, file);
+				next.push({
+					id,
+					kind: "image",
+					name: file.name,
+					size: file.size,
+					dataUrl,
+					data: dataUrl.slice(dataUrl.indexOf(",") + 1),
+					mimeType: file.type,
+					...path === void 0 ? {} : { path }
+				});
+			} catch {
+				rejected.push(`${file.name} could not be read.`);
+			}
+			continue;
+		}
+		if (!isReadableText(file)) {
+			if (file.size > 8388608) {
+				rejected.push(`"${file.name}" exceeds the 8 MB file limit.`);
+				continue;
+			}
+			try {
+				const stored = await uploadSessionAttachment(sessionId, file);
+				next.push({
+					id,
+					kind: "file",
+					name: file.name,
+					size: stored.size,
+					mimeType: stored.mimeType,
+					path: stored.path
+				});
+			} catch {
+				rejected.push(`"${file.name}" could not be uploaded.`);
+			}
+			continue;
+		}
+		if (file.size > 102400) {
+			rejected.push(`${file.name} exceeds the 100 KB text file limit.`);
+			continue;
+		}
+		const overBudget = totalBudgetRejection(next, "text", file.name, file.size);
+		if (overBudget) {
+			rejected.push(overBudget);
+			continue;
+		}
+		try {
+			const content = await file.text();
+			const path = await storedPath(sessionId, file);
+			next.push({
+				id,
+				kind: "text",
+				name: file.name,
+				size: file.size,
+				content,
+				...path === void 0 ? {} : { path }
+			});
+		} catch {
+			rejected.push(`${file.name} could not be read.`);
+		}
+	}
+	return {
+		attachments: next.slice(current.attachments.length),
+		attachmentError: rejected.join(" ")
+	};
+}
+/**
+* Stages files on a session's composer. Reading and uploading are async, so
+* the batch reserves its ids and marks itself pending up front, then appends
+* to whatever the composer holds by the time it finishes: chips removed, a
+* message sent, or another batch staged meanwhile all stay as they are, and
+* the count and total budgets are checked again against that latest state.
+*/
+async function addComposerFiles(sessionId, files) {
+	if (files.length === 0) return;
+	let current = {
+		attachments: [],
+		nextAttachmentId: 0
+	};
+	updateComposerState(sessionId, (state) => {
+		current = state;
+		return {
+			...state,
+			nextAttachmentId: state.nextAttachmentId + files.length,
+			pendingAttachments: state.pendingAttachments + 1
+		};
+	});
+	const read = await readComposerFiles(sessionId, files, current);
+	if (composerStore.state[sessionId] === void 0) return;
+	updateComposerState(sessionId, (state) => {
+		const attachments = [...state.attachments];
+		const rejected = read.attachmentError ? [read.attachmentError] : [];
+		for (const attachment of read.attachments) {
+			if (attachments.length >= 8) {
+				if (!read.attachmentError.includes(TOO_MANY_ATTACHMENTS)) rejected.push(TOO_MANY_ATTACHMENTS);
+				break;
+			}
+			const overBudget = totalBudgetRejection(attachments, attachment.kind, attachment.name, attachment.size);
+			if (overBudget) rejected.push(overBudget);
+			else attachments.push(attachment);
+		}
+		return {
+			...state,
+			attachments,
+			attachmentError: rejected.join(" "),
+			pendingAttachments: Math.max(0, state.pendingAttachments - 1)
+		};
+	});
+}
+/**
+* Whether accepting the highlighted item would leave the draft as it is. The
+* popup still shows what a longer name would complete to, but the keystroke
+* that would change nothing is handed back to the composer to send.
+*/
+function isCompletionRedundant(state) {
+	const item = state.items[state.selected];
+	return item !== void 0 && item.insert.trimEnd() === `${TRIGGER_CHARS[state.kind]}${state.query}`;
+}
+/** The /command, $skill or @file token the caret sits in, or null when there is none. */
+function triggerTokenAt(draft, caret) {
+	const before = draft.slice(0, caret);
+	const start = Math.max(before.lastIndexOf(" "), before.lastIndexOf("\n")) + 1;
+	const token = before.slice(start);
+	if (token.startsWith("/") && start === 0) return {
+		kind: "command",
+		start,
+		query: token.slice(1)
+	};
+	if (token.startsWith("$") && start === 0) return {
+		kind: "skill",
+		start,
+		query: token.slice(1)
+	};
+	if (token.startsWith("@") && token.length <= 64) return {
+		kind: "file",
+		start,
+		query: token.slice(1)
+	};
+	return null;
+}
+function Composer({ composerContext } = {}) {
+	const sessionId = useStore(sessionsStore, (state) => state.activeId);
+	const meta = useActiveSessionMeta();
+	const streaming = useActiveSession((state) => state.streaming);
+	const lifecycle = useActiveSession((state) => state.lifecycle);
+	const agentLocked = useActiveSession((state) => state.agentLocked);
+	const active = lifecycle === null ? streaming : lifecycle.operation !== null;
+	const aborting = lifecycle?.operation?.status === "aborting";
+	const queuedEntries = useActiveSession((state) => state.entries.filter((entry) => entry.kind === "queued"));
+	const commands = useActiveSession((state) => state.commands);
+	const editorTextRequest = useActiveSession((state) => state.editorTextRequest);
+	const prompt = useToolPrompt();
+	const { draft, caret, dismissedToken, attachments, attachmentError, pendingAttachments } = useComposerState(sessionId);
+	const [completion, setCompletion] = useState(null);
+	const [draggingFiles, setDraggingFiles] = useState(false);
+	const [menuOpen, setMenuOpen] = useState(false);
+	const pendingSubmission = useStore(composerSubmissionStore, (pending) => sessionId !== null && pending.has(sessionId));
+	const inputRef = useRef(null);
+	const containerRef = useRef(null);
+	const searchTimer = useRef(void 0);
+	const dormant = meta?.summary.dormant === true;
+	const attached = !dormant && meta?.attach === "attached";
+	const queued = lifecycle === null ? queuedEntries.length : lifecycle.queue.length;
+	const [shownSession, setShownSession] = useState(sessionId);
+	if (shownSession !== sessionId) {
+		setShownSession(sessionId);
+		setCompletion(null);
+		setDraggingFiles(false);
+		setMenuOpen(false);
+	}
+	if (menuOpen && completion !== null) setMenuOpen(false);
+	useEffect(() => {
+		if (searchTimer.current) clearTimeout(searchTimer.current);
+	}, [sessionId]);
+	useEffect(() => registerPromptInput(inputRef.current), [dormant, prompt]);
+	useEffect(() => {
+		if (editorTextRequest === null) return;
+		updateComposerState(sessionId, (state) => {
+			const draft = editorTextRequest.append ? `${state.draft}${state.draft && !/\s$/u.test(state.draft) ? " " : ""}${editorTextRequest.text}` : editorTextRequest.text;
+			return {
+				...state,
+				draft,
+				caret: draft.length,
+				dismissedToken: null
+			};
+		});
+		requestAnimationFrame(() => {
+			inputRef.current?.focus();
+			const length = inputRef.current?.value.length ?? 0;
+			inputRef.current?.setSelectionRange(length, length);
+		});
+	}, [editorTextRequest, sessionId]);
+	const resize = useCallback(() => {
+		const input = inputRef.current;
+		if (!input) return;
+		input.style.height = "auto";
+		input.style.height = `${String(Math.min(input.scrollHeight, MAX_INPUT_HEIGHT_PX))}px`;
+	}, []);
+	useEffect(() => resize(), [draft, resize]);
+	const closeCompletion = useCallback(() => {
+		if (searchTimer.current) clearTimeout(searchTimer.current);
+		setCompletion(null);
+	}, []);
+	/** Esc dismisses the popup for the token being typed; edits re-arm it. */
+	const dismissCompletion = useCallback(() => {
+		const trigger = triggerTokenAt(draft, caret);
+		updateComposerState(sessionId, (state) => ({
+			...state,
+			dismissedToken: trigger?.start ?? null
+		}));
+		closeCompletion();
+	}, [
+		draft,
+		caret,
+		closeCompletion,
+		sessionId
+	]);
+	useEffect(() => {
+		const trigger = triggerTokenAt(draft, caret);
+		if (!trigger || !attached || dismissedToken === trigger.start) {
+			closeCompletion();
+			return;
+		}
+		if (trigger.kind === "command" || trigger.kind === "skill") {
+			const query = trigger.query.toLowerCase();
+			const items = commands.flatMap((command) => {
+				const skill = command.name.startsWith(SKILL_PREFIX);
+				if (skill !== (trigger.kind === "skill")) return [];
+				const shown = skill ? command.name.slice(6) : command.name;
+				if (!shown.toLowerCase().startsWith(query)) return [];
+				return [{
+					insert: `/${command.name} `,
+					label: `${TRIGGER_CHARS[trigger.kind]}${shown}`,
+					detail: command.description
+				}];
+			}).sort((left, right) => left.label.localeCompare(right.label)).slice(0, MAX_COMPLETION_ITEMS);
+			setCompletion(items.length > 0 ? {
+				kind: trigger.kind,
+				tokenStart: trigger.start,
+				query: trigger.query,
+				items,
+				selected: 0
+			} : null);
+			return;
+		}
+		if (searchTimer.current) clearTimeout(searchTimer.current);
+		searchTimer.current = setTimeout(() => {
+			if (sessionId === null) return;
+			searchSessionFiles(sessionId, trigger.query).then((files) => {
+				const input = inputRef.current;
+				if (sessionsStore.state.activeId !== sessionId || !input || triggerTokenAt(input.value, input.selectionStart)?.query !== trigger.query) return;
+				const items = files.slice(0, MAX_COMPLETION_ITEMS).map((file) => ({
+					insert: `@${file} `,
+					label: `@${file}`
+				}));
+				setCompletion(items.length > 0 ? {
+					kind: "file",
+					tokenStart: trigger.start,
+					query: trigger.query,
+					items,
+					selected: 0
+				} : null);
+			});
+		}, FILE_SEARCH_DEBOUNCE_MS);
+		return () => {
+			if (searchTimer.current) clearTimeout(searchTimer.current);
+		};
+	}, [
+		draft,
+		caret,
+		commands,
+		attached,
+		dismissedToken,
+		closeCompletion,
+		sessionId
+	]);
+	useEffect(() => {
+		if (!completion) return;
+		const onPointerDown = (event) => {
+			if (containerRef.current && event.target instanceof Node && !containerRef.current.contains(event.target)) closeCompletion();
+		};
+		document.addEventListener("mousedown", onPointerDown);
+		return () => document.removeEventListener("mousedown", onPointerDown);
+	}, [completion, closeCompletion]);
+	const accept = (state, index) => {
+		const item = state.items[index];
+		if (!item) return;
+		const next = draft.slice(0, state.tokenStart) + item.insert + draft.slice(caret);
+		const position = state.tokenStart + item.insert.length;
+		updateComposerState(sessionId, (current) => ({
+			...current,
+			draft: next,
+			caret: position,
+			dismissedToken: state.tokenStart
+		}));
+		requestAnimationFrame(() => {
+			inputRef.current?.focus();
+			inputRef.current?.setSelectionRange(position, position);
+		});
+	};
+	const addFiles = useCallback(async (files) => {
+		if (sessionId === null) return;
+		await addComposerFiles(sessionId, files);
+	}, [sessionId]);
+	const submit = () => {
+		submitComposerDraft(sessionId, "submit", composerContext);
+	};
+	const queue = () => {
+		submitComposerDraft(sessionId, "queue", composerContext);
+	};
+	const placeholder = !attached ? "Waiting for the session…" : active ? "Interrupt the run and respond…" : "Ask anything · / for commands · $ for skills · @ for files…";
+	const abortAction = /* @__PURE__ */ jsxs(Button, {
+		variant: "danger-outline",
+		size: "lg",
+		"data-testid": "composer-abort",
+		disabled: aborting,
+		onClick: () => abortRun(sessionId),
+		children: [/* @__PURE__ */ jsx(StopIcon, { className: "h-2 w-2 fill-current" }), aborting ? "Aborting…" : "Abort"]
+	});
+	if (dormant && meta !== null && sessionId !== null) return /* @__PURE__ */ jsx("div", {
+		className: "shrink-0 px-3 pt-3 pb-2.5 sm:px-5",
+		children: /* @__PURE__ */ jsx(DormantPanel, { meta }, sessionId)
+	});
+	if (prompt !== null) return /* @__PURE__ */ jsxs("div", {
+		className: "shrink-0 px-3 pt-3 pb-2.5 sm:px-5",
+		children: [
+			/* @__PURE__ */ jsx(QueueSheet, {
+				sessionId,
+				count: queued,
+				disabled: !attached || lifecycle === null || aborting,
+				entries: queuedEntries,
+				onClear: () => clearQueuedMessages(sessionId),
+				onDelete: (id) => deleteQueuedMessage(id, queued, sessionId),
+				onPromote: (id, operationId) => promoteQueuedMessage(id, operationId, sessionId),
+				onResume: () => resumeQueuedMessages(sessionId),
+				operationId: lifecycle?.operation?.id,
+				paused: lifecycle?.paused
+			}, sessionId),
+			/* @__PURE__ */ jsx("div", {
+				className: "rounded-lg border border-doom-edge-magenta bg-doom-deep",
+				children: /* @__PURE__ */ jsx(ComposerPrompt, {
+					claim: prompt,
+					sessionId
+				})
+			}),
+			active ? /* @__PURE__ */ jsx("div", {
+				className: "mt-2 flex justify-end",
+				children: abortAction
+			}) : null
+		]
+	});
+	if (agentLocked && sessionId !== null) return /* @__PURE__ */ jsx("div", {
+		className: "shrink-0 px-3 pt-3 pb-2.5 sm:px-5",
+		children: /* @__PURE__ */ jsx(AgentLockPanel, { sessionId }, sessionId)
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "shrink-0 px-3 pt-3 pb-2.5 sm:px-5",
+		children: [/* @__PURE__ */ jsx(QueueSheet, {
+			sessionId,
+			count: queued,
+			disabled: !attached || lifecycle === null || aborting,
+			entries: queuedEntries,
+			onClear: () => clearQueuedMessages(sessionId),
+			onDelete: (id) => deleteQueuedMessage(id, queued, sessionId),
+			onPromote: (id, operationId) => promoteQueuedMessage(id, operationId, sessionId),
+			onResume: () => resumeQueuedMessages(sessionId),
+			operationId: lifecycle?.operation?.id,
+			paused: lifecycle?.paused
+		}, sessionId), /* @__PURE__ */ jsx(Popover, {
+			open: completion !== null,
+			onOpenChange: (next) => {
+				if (!next) dismissCompletion();
+			},
+			children: /* @__PURE__ */ jsx(PopoverAnchor, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("div", {
+					ref: containerRef,
+					onDragOver: (event) => {
+						if (!attached || !event.dataTransfer.types.includes("Files")) return;
+						event.preventDefault();
+						event.dataTransfer.dropEffect = "copy";
+						setDraggingFiles(true);
+					},
+					onDragLeave: (event) => {
+						if (!event.currentTarget.contains(event.relatedTarget)) setDraggingFiles(false);
+					},
+					onDrop: (event) => {
+						setDraggingFiles(false);
+						if (!attached || event.dataTransfer.files.length === 0) return;
+						event.preventDefault();
+						addFiles(Array.from(event.dataTransfer.files));
+					},
+					className: `relative rounded-xl border transition-colors focus-within:border-doom-blue/60 focus-within:ring-2 focus-within:ring-doom-blue/10 ${draggingFiles ? "border-doom-blue bg-doom-blue/5" : active ? "border-doom-edge-yellow" : "border-doom-border"}`,
+					children: [
+						completion ? /* @__PURE__ */ jsxs(PopoverContent, {
+							side: "top",
+							align: "start",
+							sideOffset: 8,
+							"data-testid": "composer-completion",
+							onOpenAutoFocus: (event) => event.preventDefault(),
+							onCloseAutoFocus: (event) => event.preventDefault(),
+							onInteractOutside: (event) => {
+								if (containerRef.current?.contains(event.target) === true) event.preventDefault();
+							},
+							className: "max-h-[min(16rem,40dvh,var(--radix-popover-content-available-height))] w-[420px] max-w-[85vw] rounded-md p-0 shadow-xl sm:max-h-[min(20rem,50dvh,var(--radix-popover-content-available-height))]",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "min-h-0 overflow-y-auto overscroll-contain",
+								"data-testid": "composer-completion-options",
+								children: completion.items.map((item, index) => /* @__PURE__ */ jsxs(OptionRow, {
+									density: "compact",
+									active: index === completion.selected,
+									"data-testid": `composer-completion-item-${String(index)}`,
+									onMouseEnter: () => setCompletion({
+										...completion,
+										selected: index
+									}),
+									onMouseDown: (event) => {
+										event.preventDefault();
+										accept(completion, index);
+									},
+									className: "w-full items-baseline gap-2.5 rounded-none px-3 py-1.5",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "min-w-0 truncate text-base font-semibold text-doom-hi",
+										children: item.label
+									}), item.detail ? /* @__PURE__ */ jsx(OptionLabel, {
+										density: "compact",
+										className: "text-sm text-doom-dim",
+										children: item.detail
+									}) : null]
+								}, item.label))
+							}), /* @__PURE__ */ jsx(PopoverFooter, {
+								className: "py-1",
+								children: /* @__PURE__ */ jsxs("span", {
+									className: "flex items-center gap-1.5",
+									children: [
+										/* @__PURE__ */ jsx(Kbd, { children: "tab" }),
+										" or ",
+										/* @__PURE__ */ jsx(Kbd, { children: "enter" }),
+										" completes · ",
+										/* @__PURE__ */ jsx(Kbd, { children: "esc" }),
+										" closes"
+									]
+								})
+							})]
+						}) : null,
+						/* @__PURE__ */ jsx("div", {
+							className: "flex min-w-0 items-start px-3 pt-3 sm:px-4 sm:pt-3.5",
+							children: /* @__PURE__ */ jsx(Textarea, {
+								variant: "bare",
+								ref: inputRef,
+								"data-testid": "composer-input",
+								value: draft,
+								disabled: !attached,
+								onChange: (event) => {
+									updateComposerState(sessionId, (state) => ({
+										...state,
+										draft: event.target.value,
+										caret: event.target.selectionStart,
+										dismissedToken: null
+									}));
+								},
+								onClick: (event) => updateComposerState(sessionId, (state) => ({
+									...state,
+									caret: event.currentTarget.selectionStart
+								})),
+								onPaste: (event) => {
+									const files = Array.from(event.clipboardData.files);
+									if (files.length === 0) return;
+									event.preventDefault();
+									addFiles(files);
+								},
+								onKeyUp: (event) => updateComposerState(sessionId, (state) => ({
+									...state,
+									caret: event.currentTarget.selectionStart
+								})),
+								onKeyDown: (event) => {
+									if (event.key === " " && draft === "") {
+										event.preventDefault();
+										openPalette();
+										return;
+									}
+									if (completion) {
+										if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+											event.preventDefault();
+											const delta = event.key === "ArrowDown" ? 1 : -1;
+											const count = completion.items.length;
+											setCompletion({
+												...completion,
+												selected: (completion.selected + delta + count) % count
+											});
+											return;
+										}
+										if (event.key === "Tab") {
+											event.preventDefault();
+											accept(completion, completion.selected);
+											return;
+										}
+										if (event.key === "Enter" && !isCompletionRedundant(completion)) {
+											event.preventDefault();
+											accept(completion, completion.selected);
+											return;
+										}
+										if (event.key === "Escape") {
+											event.preventDefault();
+											dismissCompletion();
+											return;
+										}
+									}
+									if (event.key === "Enter" && !event.shiftKey) {
+										event.preventDefault();
+										submit();
+									}
+									if (event.key === "Escape" && active && !aborting) {
+										event.preventDefault();
+										abortRun(sessionId);
+									}
+								},
+								rows: 1,
+								placeholder,
+								className: "min-h-12 min-w-0 flex-1 text-lg leading-relaxed"
+							})
+						}),
+						attachments.length > 0 ? /* @__PURE__ */ jsx("div", {
+							className: "flex flex-wrap gap-1.5 px-3.5 pt-2",
+							"data-testid": "composer-attachments",
+							children: attachments.map((attachment) => /* @__PURE__ */ jsxs("span", {
+								"data-testid": `composer-attachment-${attachment.id}`,
+								className: "flex max-w-full items-center gap-1.5 rounded border border-doom-border bg-doom-panel px-1.5 py-1 text-sm text-doom-dim",
+								children: [
+									attachment.kind === "image" ? /* @__PURE__ */ jsx("img", {
+										src: attachment.dataUrl,
+										alt: "",
+										className: "h-6 w-6 rounded object-cover"
+									}) : /* @__PURE__ */ jsx("span", {
+										className: "font-semibold text-doom-hi",
+										children: attachment.kind === "context" ? "CTX" : attachment.kind === "file" ? "FILE" : "TXT"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "max-w-40 truncate",
+										children: attachment.name
+									}),
+									/* @__PURE__ */ jsx(Button, {
+										variant: "ghost",
+										size: "icon",
+										"aria-label": `Remove ${attachment.name}`,
+										className: "text-doom-faint hover:text-doom-text",
+										onClick: () => {
+											updateComposerState(sessionId, (state) => ({
+												...state,
+												attachments: state.attachments.filter((item) => item.id !== attachment.id),
+												attachmentError: ""
+											}));
+										},
+										children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-2.5 w-2.5" })
+									})
+								]
+							}, attachment.id))
+						}) : null,
+						attachmentError ? /* @__PURE__ */ jsx("p", {
+							role: "alert",
+							"data-testid": "composer-attachment-error",
+							className: "px-3.5 pt-1.5 text-sm text-doom-red",
+							children: attachmentError
+						}) : null,
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-center gap-2 px-2 pt-2 pb-2.5 sm:flex-nowrap sm:px-3 sm:pb-3",
+							children: [
+								/* @__PURE__ */ jsxs(Popover, {
+									open: menuOpen,
+									onOpenChange: (next) => {
+										setMenuOpen(next);
+										if (next) dismissCompletion();
+									},
+									children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+										asChild: true,
+										children: /* @__PURE__ */ jsx(Button, {
+											variant: "ghost",
+											size: "icon-md",
+											"data-testid": "composer-attach",
+											title: "Add to this message",
+											"aria-label": "Add to this message",
+											"aria-haspopup": "menu",
+											"aria-expanded": menuOpen,
+											className: "shrink-0 text-doom-dim",
+											children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-4" })
+										})
+									}), menuOpen ? /* @__PURE__ */ jsxs(PopoverContent, {
+										side: "top",
+										align: "start",
+										sideOffset: 8,
+										"data-testid": "composer-menu",
+										className: "w-56 rounded-md p-1.5 shadow-xl",
+										onClick: (event) => {
+											if (event.target?.closest("[data-testid=\"composer-attach-row\"]")) return;
+											setMenuOpen(false);
+										},
+										children: [/* @__PURE__ */ jsxs("label", {
+											"aria-disabled": !attached,
+											"data-testid": "composer-attach-row",
+											className: `relative overflow-hidden text-base font-medium text-doom-text hover:bg-doom-tint-blue ${optionRowVariants({ density: "compact" })} ${attached ? "" : "pointer-events-none opacity-40"}`,
+											children: [
+												/* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3 shrink-0" }),
+												/* @__PURE__ */ jsx("span", {
+													className: "min-w-0 flex-1 truncate",
+													children: "File upload"
+												}),
+												/* @__PURE__ */ jsx("input", {
+													type: "file",
+													multiple: true,
+													disabled: !attached,
+													"aria-label": "Attach files",
+													className: "absolute inset-0 cursor-pointer opacity-0",
+													"data-testid": "composer-file-input",
+													onChange: (event) => {
+														addFiles(Array.from(event.currentTarget.files ?? []));
+														event.currentTarget.value = "";
+														setMenuOpen(false);
+													}
+												})
+											]
+										}), /* @__PURE__ */ jsx("span", {
+											className: "contents",
+											"data-testid": "composer-menu-items",
+											children: /* @__PURE__ */ jsx(PluginSurface, {
+												slot: HOST_SLOTS.composerMenu,
+												sessionId
+											})
+										})]
+									}) : null]
+								}),
+								/* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1" }),
+								/* @__PURE__ */ jsx("span", {
+									"data-testid": "composer-hint",
+									className: "text-sm text-doom-dim max-md:hidden",
+									children: active ? aborting ? "Abort requested · waiting for the turn to stop" : "Enter steers the run · esc aborts" : "Shift + Enter for a new line"
+								}),
+								active ? abortAction : null,
+								/* @__PURE__ */ jsx("span", {
+									className: "contents",
+									"data-testid": "composer-actions",
+									children: /* @__PURE__ */ jsx(PluginSurface, {
+										slot: HOST_SLOTS.composerActions,
+										sessionId
+									})
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									variant: "outline",
+									size: "lg",
+									"data-testid": "composer-queue",
+									onClick: queue,
+									disabled: !attached || pendingSubmission || pendingAttachments > 0 || !draft.trim() && attachments.length === 0,
+									title: "Deliver after the current run settles",
+									children: "Queue"
+								}),
+								/* @__PURE__ */ jsxs(Button, {
+									variant: "primary",
+									size: "lg",
+									"data-testid": "composer-send",
+									onClick: submit,
+									disabled: !attached || pendingSubmission || pendingAttachments > 0 || !draft.trim() && attachments.length === 0,
+									className: "gap-2 px-3 disabled:opacity-60 sm:px-4",
+									children: [/* @__PURE__ */ jsx(SendIcon, {
+										"aria-hidden": true,
+										className: "size-4"
+									}), active ? "Steer" : "Send"]
+								})
+							]
+						})
+					]
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { Composer, addComposerFiles, readComposerFiles };
+
+//# sourceMappingURL=Composer.mjs.map