@vibesdotdev/chat 0.0.0-stage → 1.0.0-rc.1

package/dist/svelte/components/runtime/RuntimeChatInput.svelte

@@ -0,0 +1,1310 @@
+<script lang="ts">
+	import { useChatSurface } from '../../surface-context.js';
+	const { chatParticipantsStore, chatRoomStore, runtimeChatStore } = useChatSurface();
+
+	import * as z from 'zod/v4';
+	import { onMount, untrack, type Snippet } from 'svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import { CapabilityError, CaughtFailureSchema, type VibesRuntime } from '@vibesdotdev/kernel';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { createEmptyStagedContext } from '@vibesdotdev/ai/context/schemas/staged-context-helpers';
+	import { TextGenerationStagedContextSchema, type TextGenerationStagedContext } from '@vibesdotdev/ai-schemas/generation/contracts';
+	import type { ChatMessageAttachment } from '@vibesdotdev/chat/schemas/common';
+	import type {
+		AddParticipantInput,
+		ChatRoom,
+		ChatRoomCreateInput,
+		ChatRunInput,
+		ChatRunResult
+	} from '@vibesdotdev/chat/client/contracts';
+	import { ContextBuilder, ContextBuilderProviderStatus } from '../../context/components';
+
+	import { CHAT_COMPOSER_ACTIONS_CHANGED_EVENT, DEFAULT_RUNTIME_CHAT_ACTIONS, resolveRuntimeChatComposerActions } from '../../composer-actions.js';
+	import { clearStagedAttachments } from '../../attachments.js';
+	import { CHAT_DIALOG_WIDGETS_CHANGED_EVENT, CHAT_DIALOG_WIDGET_KIND, dispatchRuntimeChatDialogOpen, resolveRuntimeChatDialogWidgets } from '../../dialog-widgets.js';
+	import RuntimeChatActionBar from './RuntimeChatActionBar.svelte';
+	import RuntimeChatAttachments from './RuntimeChatAttachments.svelte';
+	import RuntimeChatComposer from './RuntimeChatComposer.svelte';
+	import { getRuntimeChatSlashCommands } from './command-definitions.js';
+	import { canQueueRuntimeChatFollowUp, getRuntimeChatSubmitState } from './runtime-chat-submit-state.js';
+	import { bindWorkspaceToRoomCreateInput } from '../../workspace-catalog.js';
+	import { chatFailureMessage } from '../../../error-notice.js';
+	import { createTypingIndicatorPoster } from '../utils/typing-indicator.js';
+	import type { RuntimeChatAction, RuntimeChatParticipantOption } from './types.js';
+	import type {
+		RuntimeChatAfterSend,
+		RuntimeChatBeforeSend,
+		RuntimeChatInputSnippets,
+		RuntimeChatSendBlocked
+	} from './RuntimeChatInput.types.js';
+
+	type DialogMode = 'event' | 'insert-command';
+	type QueuedSend = {
+		content: string;
+		stagedContext?: TextGenerationStagedContext;
+		includeComposerState?: boolean;
+	};
+	type SendOptions = {
+		content?: string;
+		stagedContext?: TextGenerationStagedContext;
+		includeComposerState?: boolean;
+	};
+
+	let {
+		isNewChat = false,
+		placeholder = 'Type a message...',
+		createRoomInput = {},
+		baseStagedContext,
+		agents = [],
+		users = [],
+		actions = [],
+		includeRuntimeActions = true,
+		dialogMode = 'event',
+		attachmentsEnabled = true,
+		fileAccept = 'image/jpeg,image/png,image/gif,image/webp,image/svg+xml,application/pdf,text/plain,text/markdown,text/csv',
+		fill = false,
+		requireImplementedDialogs = false,
+		requireWorkspace = false,
+		sendDisabled = false,
+		stagedContext = $bindable<TextGenerationStagedContext>(createEmptyStagedContext()),
+		statusPrefix,
+		statusExtras,
+		composerPrefix,
+		marshal,
+		chatOrigin,
+		onRoomCreated,
+		beforeSend,
+		onSent,
+		onSendStart,
+		onSendBlocked,
+		onOpenDialog,
+		onAttachFiles,
+		onNotice = (_message: string) => {},
+		onError = (_message: string) => {}
+	}: {
+		isNewChat?: boolean;
+		placeholder?: string;
+		createRoomInput?: ChatRoomCreateInput;
+		baseStagedContext?: TextGenerationStagedContext;
+		agents?: RuntimeChatParticipantOption[];
+		users?: RuntimeChatParticipantOption[];
+		actions?: readonly RuntimeChatAction[];
+		includeRuntimeActions?: boolean;
+		dialogMode?: DialogMode;
+		attachmentsEnabled?: boolean;
+		fileAccept?: string;
+		fill?: boolean;
+		requireImplementedDialogs?: boolean;
+		requireWorkspace?: boolean;
+		sendDisabled?: boolean;
+		stagedContext?: TextGenerationStagedContext;
+		statusPrefix?: RuntimeChatInputSnippets['statusPrefix'];
+		statusExtras?: RuntimeChatInputSnippets['statusExtras'];
+		composerPrefix?: RuntimeChatInputSnippets['composerPrefix'];
+		/** Host-owned messenger affordance. Chat never imports an app-shell implementation. */
+		marshal?: Snippet;
+		/**
+		 * The chat-web origin when this composer is EMBEDDED on another app's
+		 * origin, handed in from layout data (rc04 §2.4). Absent means the page
+		 * is chat-web itself and typing posts stay same-origin.
+		 */
+		chatOrigin?: string;
+		onRoomCreated?: (room: ChatRoom) => void | Promise<void>;
+		beforeSend?: RuntimeChatBeforeSend;
+		onSent?: RuntimeChatAfterSend;
+		/** Called once the composer commits to a send, before the turn's round-trip. */
+		onSendStart?: () => void;
+		onSendBlocked?: RuntimeChatSendBlocked;
+		onOpenDialog?: (dialog: string) => void;
+		onAttachFiles?: (files: FileList, roomId: string | null) => void | Promise<void>;
+		onNotice?: (message: string) => void;
+		onError?: (message: string) => void;
+	} = $props();
+
+	let draft = $state('');
+	let roomConflicts = $state<Array<{roomId:string;local:{title?:string;deleted:boolean}|null;remote:{title?:string;deleted:boolean}|null}>>([]);
+	$effect(() => {
+		const capability = runtimeChatStore.client?.roomSync;
+		let retired = false;
+		const refresh = () => {
+			if (!capability) return;
+			void Promise.allSettled([capability.conflicts()]).then(([result]) => {
+				if (retired || !result) return;
+				if (result.status === 'fulfilled') {
+					roomConflicts = result.value;
+				} else {
+					onError?.(result.reason instanceof Error ? result.reason.message : String(result.reason));
+				}
+			});
+		};
+		const unsubscribe = capability?.subscribe(refresh);
+		if (capability) refresh(); else roomConflicts = [];
+		return () => { retired = true; unsubscribe?.(); };
+	});
+	async function synchronizeRooms() {
+		const client = runtimeChatStore.client;
+		if (client?.sync) {
+			const [syncResult] = await Promise.allSettled([client.sync()]);
+			if (syncResult?.status === 'rejected') {
+				onError?.(syncResult.reason instanceof Error ? syncResult.reason.message : String(syncResult.reason));
+			}
+		}
+		if (client?.roomSync) {
+			const [conflictsResult] = await Promise.allSettled([client.roomSync.conflicts()]);
+			if (conflictsResult?.status === 'fulfilled') {
+				roomConflicts = conflictsResult.value;
+			} else if (conflictsResult?.status === 'rejected') {
+				onError?.(conflictsResult.reason instanceof Error ? conflictsResult.reason.message : String(conflictsResult.reason));
+			}
+		}
+	}
+	async function resolveRoomConflict(roomId: string, choice: 'local' | 'remote') {
+		const roomSync = runtimeChatStore.client?.roomSync;
+		if (roomSync) {
+			const [resolveResult] = await Promise.allSettled([roomSync.resolve(roomId, choice)]);
+			if (resolveResult?.status === 'rejected') {
+				onError?.(resolveResult.reason instanceof Error ? resolveResult.reason.message : String(resolveResult.reason));
+				return;
+			}
+		}
+		await synchronizeRooms();
+	}
+	const draftRoomId = $derived(runtimeChatStore.activeRoom?.id ?? null);
+	let hydratedDraft = $state<{ client: NonNullable<typeof runtimeChatStore.client>; roomId: string | null } | null>(null);
+	$effect(() => {
+		const client = runtimeChatStore.client;
+		const roomId = draftRoomId;
+		if (!client?.drafts) return;
+		let retired = false;
+		hydratedDraft = null;
+		const before = untrack(() => draft);
+		void Promise.allSettled([client.drafts.get(roomId)]).then(([result]) => {
+			if (retired || !result) return;
+			if (result.status === 'fulfilled') {
+				if (untrack(() => draft) === before) draft = result.value;
+				hydratedDraft = { client, roomId };
+			} else {
+				onError(chatFailureMessage(result.reason, 'Draft could not be loaded.'));
+			}
+		});
+		return () => { retired = true; };
+	});
+	$effect(() => {
+		const scope = hydratedDraft;
+		const content = draft;
+		if (scope && scope.client === runtimeChatStore.client && scope.roomId === draftRoomId && scope.client.drafts) {
+			void Promise.allSettled([scope.client.drafts.set(scope.roomId, content)]).then(([result]) => {
+				if (result?.status === 'rejected') {
+					onError(chatFailureMessage(result.reason, 'Draft could not be saved.'));
+				}
+			});
+		}
+	});
+	let sending = $state(false);
+	// Typing-indicator POST throttle: the composer fires onTypingChange(true) on
+	// every keystroke, so we POST /api/chat/typing at most once per window while
+	// the user keeps typing, and POST isTyping:false immediately on idle/send.
+	const TYPING_POST_THROTTLE_MS = 2000;
+	let lastTypingPostAt = 0;
+	let typingIndicatorActive = false;
+	/** A follow-up the user composed while a turn was streaming, queued to fire
+	 *  when the active turn completes (GH #578). */
+	let queuedMessage = $state<QueuedSend | null>(null);
+	let queuedMessageHeld = $state(false);
+	let stopWaitingRequested = false;
+	let runtimeActions = $state<RuntimeChatAction[]>(DEFAULT_RUNTIME_CHAT_ACTIONS);
+	let fileInput = $state<HTMLInputElement | null>(null);
+	let composerRef = $state<{ focus?: () => void } | null>(null);
+	let implementedDialogActionKeys = $state<Set<string>>(new Set());
+
+	// The textarea stays editable during an in-flight turn so the user can
+	// compose (and queue) a follow-up — only the loading/room gates disable it.
+	const canType = $derived(chatRoomStore.canType && !runtimeChatStore.loading);
+	const initialStagedContext = $derived(baseStagedContext ?? createEmptyStagedContext());
+	const normalizedStagedContext = $derived(normalizeStagedContext(stagedContext));
+	const hasReadyAttachments = $derived.by(() =>
+		chatRoomStore.pendingAttachments.some((attachment) => attachment.status === 'ready')
+	);
+	const hasStorageRefs = $derived.by(() =>
+		chatRoomStore.pendingAttachments.some(
+			(attachment) =>
+				attachment.status === 'ready' &&
+				attachment.source === 'platform-storage' &&
+				attachment.ref !== undefined &&
+				attachment.ref.length > 0
+		)
+	);
+	const hasUploadingAttachments = $derived.by(() =>
+		chatRoomStore.pendingAttachments.some((attachment) => attachment.status === 'uploading')
+	);
+	const hasFailedAttachments = $derived.by(() =>
+		chatRoomStore.pendingAttachments.some((attachment) => attachment.status === 'failed')
+	);
+	const activeAgents = $derived.by(() => {
+		if (agents.length > 0) return agents;
+		const options = new Map<string, RuntimeChatParticipantOption>();
+		for (const agent of chatParticipantsStore.agents.values()) {
+			options.set(agent.agentId, { id: agent.agentId, name: agent.alias });
+		}
+		for (const [agentId, config] of chatRoomStore.pendingAgents.entries()) {
+			options.set(agentId, { id: agentId, name: config.alias || agentId });
+		}
+		return Array.from(options.values());
+	});
+	const selectedAgentId = $derived.by(() => {
+		const pending = chatRoomStore.pendingAgents.keys().next().value;
+		if (pending !== undefined) return pending;
+		const active = chatParticipantsStore.agents.keys().next().value;
+		if (active !== undefined) return active;
+		const configured = createRoomInput.participants?.find(
+			(participant) => participant.type === 'agent'
+		);
+		return configured?.id;
+	});
+	const activeUsers = $derived.by(() => {
+		if (users.length > 0) return users;
+		return Array.from(chatParticipantsStore.users.values()).map((user) => ({
+			id: user.id,
+			name: user.displayName ?? user.email ?? user.id,
+			email: user.email
+		}));
+	});
+	const effectiveActions = $derived.by(() => {
+		const byId = new Map<string, RuntimeChatAction>();
+		if (includeRuntimeActions) {
+			for (const action of runtimeActions) {
+				if (!shouldShowAction(action)) continue;
+				byId.set(action.id, action);
+			}
+		}
+		for (const action of actions) {
+			if (!shouldShowAction(action)) continue;
+			byId.set(action.id, action);
+		}
+		return Array.from(byId.values());
+	});
+	const slashCommands = $derived(getRuntimeChatSlashCommands(effectiveActions, handleAction));
+
+	function shouldShowAction(action: RuntimeChatAction): boolean {
+		if (!attachmentsEnabled && isAttachmentAction(action)) return false;
+		if (onAttachFiles && isAttachmentAction(action)) return false;
+		if (action.requiresAgent && !selectedAgentId) return false;
+		if (requireImplementedDialogs && action.dialog && !hasImplementedDialog(action)) return false;
+		return true;
+	}
+
+	function hasImplementedDialog(action: RuntimeChatAction): boolean {
+		return (
+			implementedDialogActionKeys.has(action.id) ||
+			(action.widgetId ? implementedDialogActionKeys.has(action.widgetId) : false) ||
+			(action.dialog ? implementedDialogActionKeys.has(action.dialog) : false)
+		);
+	}
+
+	function isAttachmentAction(action: RuntimeChatAction): boolean {
+		return action.dialog === 'storage-upload' || action.id === 'platform.storage.upload-files';
+	}
+
+	function normalizeStagedContext(value: TextGenerationStagedContext | undefined): TextGenerationStagedContext | undefined {
+		if (!value) return undefined;
+		return value;
+	}
+
+	function hasStagedContext(value: TextGenerationStagedContext | undefined): boolean {
+		if (!value) return false;
+		if (value.data) return Object.keys(value.data).length > 0;
+		return Object.keys(value).length > 0;
+	}
+
+	const stagedKnowledgeSchema = z.looseObject({
+		type: z.literal('knowledge').optional(),
+		itemIds: z.array(z.string()).optional()
+	});
+
+	const stagedDataWithKnowledgeSchema = z.looseObject({
+		knowledge: stagedKnowledgeSchema.optional()
+	});
+
+	function mergeStagedContext(incoming: WeakKey | null | undefined) {
+		const parsedIncoming = TextGenerationStagedContextSchema.safeParse(incoming);
+		if (!parsedIncoming.success) return;
+		const incomingContext = parsedIncoming.data;
+
+		const currentParsed = stagedDataWithKnowledgeSchema.safeParse(stagedContext.data);
+		const currentKnowledge = currentParsed.success ? currentParsed.data.knowledge : undefined;
+		const incomingParsed = stagedDataWithKnowledgeSchema.safeParse(incomingContext.data);
+		const incomingKnowledge = incomingParsed.success ? incomingParsed.data.knowledge : undefined;
+
+		const currentItemIds = currentKnowledge?.itemIds ?? [];
+		const incomingItemIds = incomingKnowledge?.itemIds ?? [];
+
+		const data: TextGenerationStagedContext['data'] = {
+			...stagedContext.data,
+			...incomingContext.data
+		};
+		if (incomingKnowledge) {
+			data.knowledge = {
+				type: 'knowledge',
+				...currentKnowledge,
+				...incomingKnowledge,
+				itemIds: Array.from(new Set([...currentItemIds, ...incomingItemIds]))
+			};
+		}
+		stagedContext = {
+			...stagedContext,
+			...incomingContext,
+			data
+		};
+	}
+
+	function mergeSendContext(
+		base: TextGenerationStagedContext | undefined,
+		patch: TextGenerationStagedContext | undefined
+	): TextGenerationStagedContext | undefined {
+		if (!patch) return base;
+		if (!base) return patch;
+		return {
+			...base,
+			...patch,
+			metadata: {
+				...base.metadata,
+				...patch.metadata
+			},
+			data: {
+				...base.data,
+				...patch.data
+			},
+			augmentations: {
+				...base.augmentations,
+				...patch.augmentations
+			},
+			participantIds: Array.from(
+				new Set([...(base.participantIds ?? []), ...(patch.participantIds ?? [])])
+			),
+			agentIds: Array.from(new Set([...(base.agentIds ?? []), ...(patch.agentIds ?? [])])),
+			tagged: patch.tagged ?? base.tagged
+		};
+	}
+
+	function dialogCommand(action: RuntimeChatAction): string {
+		const fallback = action.dialog ?? action.id;
+		return action.command ? `/${action.command} ` : `/${fallback} `;
+	}
+
+	const runtimeStore = getRuntimeSvelteContext();
+
+	async function handleOpenDialog(action: RuntimeChatAction) {
+		const dialog = action.dialog;
+		if (!dialog) return;
+		onOpenDialog?.(dialog);
+		if (dialogMode === 'insert-command') {
+			window.dispatchEvent(
+				new CustomEvent('chat:insert-text', { detail: { content: dialogCommand(action) } })
+			);
+			return;
+		}
+		dispatchRuntimeChatDialogOpen(await runtimeStore.load(), { action });
+	}
+
+	function dispatchInsertText(content: string, replace = false) {
+		window.dispatchEvent(new CustomEvent('chat:insert-text', { detail: { content, replace } }));
+	}
+
+	async function handleAction(action: RuntimeChatAction) {
+		const actionAgentId = selectedAgentId;
+		// Recheck at the effect boundary: the participant selector can change
+		// after the menu rendered, and an unavailable action must not create an
+		// empty persisted room as a side effect.
+		if (action.requiresAgent && !actionAgentId) {
+			onNotice('Choose an AI teammate before using this action.');
+			return;
+		}
+		if (action.roomMode) {
+			const [setRoomModeResult] = await Promise.allSettled([runtimeChatStore.setRoomMode(action.roomMode)]);
+			if (setRoomModeResult?.status === 'rejected') {
+				onError(chatFailureMessage(setRoomModeResult.reason, 'Could not change the room mode.'));
+				return;
+			}
+		}
+		if (action.insertText) {
+			dispatchInsertText(action.insertText);
+		}
+		if (action.dialog) {
+			await handleOpenDialog(action);
+			return;
+		}
+		let roomId = chatRoomStore.roomId;
+		if (action.requiresRoom && !roomId) {
+			roomId = (await resolveRoomForSend()).id;
+		}
+		if (action.event) {
+			window.dispatchEvent(
+				new CustomEvent(action.event, {
+					detail: { action, roomId, agentId: actionAgentId }
+				})
+			);
+		}
+	}
+
+	function pendingParticipants(): AddParticipantInput[] {
+		const byKey = new Map<string, AddParticipantInput>();
+		for (const participant of createRoomInput.participants ?? []) {
+			byKey.set(`${participant.type}:${participant.id}`, participant);
+		}
+		for (const [agentId, config] of chatRoomStore.pendingAgents.entries()) {
+			byKey.set(`agent:${agentId}`, {
+				id: agentId,
+				type: 'agent',
+				name: config.alias || agentId,
+				responseStyle: config.responseMode === 'tagged' ? 'reply' : config.responseMode,
+				enabled: true,
+				source: 'runtime'
+			});
+		}
+		for (const userId of chatRoomStore.pendingUsers) {
+			byKey.set(`friend:${userId}`, {
+				id: userId,
+				type: 'friend',
+				name: chatParticipantsStore.users.get(userId)?.displayName ?? userId,
+				source: 'runtime'
+			});
+		}
+		return Array.from(byKey.values());
+	}
+
+	function pendingRoomInput(): ChatRoomCreateInput {
+		const participants = pendingParticipants();
+		const input: ChatRoomCreateInput = {
+			...createRoomInput,
+			roomMode:
+				createRoomInput.roomMode ??
+				(participants.length > 0 ? 'multi' : chatRoomStore.pendingRoomMode),
+			visibility: createRoomInput.visibility ?? chatRoomStore.pendingVisibility,
+			folderId: createRoomInput.folderId ?? chatRoomStore.pendingFolderId,
+			modelId: createRoomInput.modelId ?? chatRoomStore.pendingModelId,
+			maxTokens: createRoomInput.maxTokens ?? chatRoomStore.pendingMaxTokens,
+			participants
+		};
+		if (!chatRoomStore.pendingWorkspaceId) {
+			if (requireWorkspace) {
+				throw new Error('Choose a workspace before starting this conversation.');
+			}
+			return input;
+		}
+		return bindWorkspaceToRoomCreateInput(input, {
+			id: chatRoomStore.pendingWorkspaceId,
+			label: chatRoomStore.pendingWorkspaceLabel ?? chatRoomStore.pendingWorkspaceId,
+			location: chatRoomStore.pendingWorkspaceLocation ?? 'local',
+			codeSessionId: chatRoomStore.pendingCodeSessionId ?? undefined,
+			codeSessionHostKind: chatRoomStore.pendingCodeSessionHostKind ?? undefined
+		});
+	}
+
+	function clearPendingRoomInput(): void {
+		chatRoomStore.pendingUsers = [];
+		chatRoomStore.pendingAgents = new SvelteMap();
+		chatRoomStore.pendingVisibility = 'private';
+		chatRoomStore.pendingFolderId = null;
+		chatRoomStore.pendingModelId = null;
+		chatRoomStore.pendingMaxTokens = null;
+		chatRoomStore.pendingWorkspaceId = null;
+		chatRoomStore.pendingWorkspaceLabel = null;
+		chatRoomStore.pendingWorkspaceLocation = null;
+		chatRoomStore.pendingCodeSessionId = null;
+		chatRoomStore.pendingCodeSessionHostKind = null;
+	}
+
+	async function applyPendingParticipants(room: ChatRoom): Promise<void> {
+		if (chatRoomStore.pendingAgents.size === 0 && chatRoomStore.pendingUsers.length === 0) {
+			return;
+		}
+
+		for (const [agentId, config] of chatRoomStore.pendingAgents.entries()) {
+			await room.participants.add({
+				id: agentId,
+				type: 'agent',
+				name: config.alias || agentId,
+				responseStyle: config.responseMode === 'tagged' ? 'reply' : config.responseMode,
+				enabled: true,
+				source: 'runtime'
+			});
+		}
+
+		for (const userId of chatRoomStore.pendingUsers) {
+			await room.participants.add({
+				id: userId,
+				type: 'friend',
+				name: chatParticipantsStore.users.get(userId)?.displayName ?? userId,
+				source: 'runtime'
+			});
+		}
+
+		chatRoomStore.pendingUsers = [];
+		chatRoomStore.pendingAgents = new SvelteMap();
+	}
+
+	async function resolveRoomForSend(): Promise<ChatRoom> {
+		await runtimeChatStore.load();
+		if (runtimeChatStore.activeRoom) return runtimeChatStore.activeRoom;
+
+		const room = await runtimeChatStore.createRoom(pendingRoomInput());
+		clearPendingRoomInput();
+		await onRoomCreated?.(room);
+		return room;
+	}
+
+	async function send(options: SendOptions = {}) {
+		const directContent = options.content !== undefined;
+		const content = (options.content ?? draft).trim();
+		const includeComposerState = options.includeComposerState !== false;
+		const storageRefs = includeComposerState ? getStorageEntityRefs() : [];
+		const contextForSend = withStorageEntities(
+			mergeSendContext(normalizedStagedContext, options.stagedContext),
+			storageRefs
+		);
+		if (includeComposerState && hasUploadingAttachments) {
+			await onSendBlocked?.({ reason: 'attachments-uploading' });
+			onError('Wait for attachments to finish uploading before sending.');
+			return;
+		}
+		if (includeComposerState && hasFailedAttachments) {
+			await onSendBlocked?.({ reason: 'attachments-failed' });
+			onError(
+				'One or more files failed to upload. Remove them (the X next to each) before sending.'
+			);
+			return;
+		}
+		const attachments = includeComposerState ? getReadyAttachments() : [];
+		const hasAttachments = attachments.length > 0;
+		const sendHasStorageRefs = storageRefs.length > 0;
+		const sendHasStagedContext = hasStagedContext(contextForSend);
+		if (!content && !sendHasStagedContext && !hasAttachments && !sendHasStorageRefs) {
+			await onSendBlocked?.({ reason: 'empty' });
+			return;
+		}
+		if (sendDisabled) {
+			await onSendBlocked?.({ reason: 'disabled' });
+			return;
+		}
+		// A turn is already streaming — queue this text-only follow-up to fire
+		// when it completes instead of dropping the submit (GH #578). Attachments
+		// and staged context can't be safely deferred, so they fall through to
+		// the normal blocked-while-sending behaviour.
+		if (sending) {
+			if (queuedMessage) {
+				onNotice('One follow-up is already queued. Your current draft was left untouched.');
+				return;
+			}
+			if (
+				canQueueRuntimeChatFollowUp({
+					content,
+					sending,
+					canType,
+					sendDisabled,
+					hasUploadingAttachments,
+					hasFailedAttachments,
+					hasReadyAttachments: hasAttachments,
+					hasStorageRefs: sendHasStorageRefs,
+					hasStagedContext: sendHasStagedContext,
+					includeComposerState
+				})
+			) {
+				queuedMessage = {
+					content,
+					stagedContext: options.stagedContext,
+					includeComposerState: options.includeComposerState
+				};
+				queuedMessageHeld = false;
+				if (!directContent) draft = '';
+			}
+			return;
+		}
+		sending = true;
+		onSendStart?.();
+		stopWaitingRequested = false;
+		// We're committing to a send — stop the typing indicator now instead of
+		// letting the composer's idle timer trail it for a few more seconds.
+		handleTypingChange(false);
+		// Clear the composer the instant we commit to sending — BEFORE the
+		// network round-trip. `room.send()` only resolves when the whole turn
+		// finishes streaming (it awaits generation), so clearing afterwards left
+		// the typed text lingering for the entire reply (~9s). Snapshot what we're
+		// sending and restore it if the send throws so nothing is lost.
+		if (!directContent) draft = '';
+		const executeSend = async (): Promise<'vetoed' | 'completed'> => {
+			const attachmentIds = getReadyAttachmentIds();
+			const messageInput: ChatRunInput = {
+				content:
+					content ||
+					(hasAttachments
+						? attachmentOnlyMessage(attachments)
+						: sendHasStorageRefs
+							? storageRefOnlyMessage(storageRefs)
+							: 'Attached context'),
+				stagedContext: contextForSend,
+				attachments
+			};
+			if (attachmentIds.length) messageInput.attachmentIds = attachmentIds;
+			let room: ChatRoom;
+			let result: ChatRunResult;
+			if (!runtimeChatStore.activeRoom && !beforeSend) {
+				// The shared client stages room creation and starts message acceptance
+				// before this surface navigates. It does not claim storage atomicity;
+				// replay-safe server composition remains an explicit owner-app follow-up.
+				// Room-dependent preparation hooks keep the create/prepare/send path.
+				const started = await runtimeChatStore.startConversation({
+					room: pendingRoomInput(),
+					message: messageInput
+				});
+				room = started.room;
+				clearPendingRoomInput();
+				await onRoomCreated?.(room);
+				result = await started.completion;
+			} else {
+				room = await resolveRoomForSend();
+				await applyPendingParticipants(room);
+				const beforeResult = await beforeSend?.({
+					room,
+					content,
+					stagedContext: contextForSend,
+					attachments,
+					hasAttachments
+				});
+				if (beforeResult === false) {
+					// The consumer vetoed this send — the message never left, so put the
+					// optimistically-cleared text back (unless they've typed something new).
+					if (!directContent && !draft) draft = content;
+					return 'vetoed';
+				}
+				result = await room.send(messageInput);
+			}
+			await onSent?.({
+				room,
+				content,
+				stagedContext: contextForSend,
+				attachments,
+				hasAttachments,
+				result
+			});
+			stagedContext = baseStagedContext ?? createEmptyStagedContext();
+			clearStagedAttachments(chatRoomStore);
+			return 'completed';
+		};
+
+		const [sendResult] = await Promise.allSettled([executeSend()]);
+		sending = false;
+		if (sendResult?.status === 'rejected') {
+			const error = CaughtFailureSchema.parse(sendResult.reason);
+			const failure = CapabilityError.from(error);
+			if (failure.code === 'UNAVAILABLE' && failure.reason === 'chat-message-queued') {
+				onNotice(chatFailureMessage(error, 'Message was queued.'));
+			} else {
+				// The send failed before it left the client — restore the text the user
+				// typed (cleared optimistically above) so they don't lose it, unless
+				// they've already started composing a new message.
+				if (!directContent && !draft) draft = content;
+				onError(chatFailureMessage(error, 'The message could not be sent.'));
+			}
+		}
+		const shouldFlushQueuedMessage = !stopWaitingRequested;
+		stopWaitingRequested = false;
+		// The active turn settled — flush any follow-up the user queued while
+		// it was streaming (GH #578).
+		if (shouldFlushQueuedMessage && queuedMessage && !queuedMessageHeld) {
+			const next = queuedMessage;
+			queuedMessage = null;
+			queuedMessageHeld = false;
+			void send({
+				content: next.content,
+				stagedContext: next.stagedContext,
+				includeComposerState: next.includeComposerState
+			});
+		}
+	}
+
+	function handleStop() {
+		stopWaitingRequested = true;
+		if (queuedMessage) {
+			// Do not fire a queued follow-up merely because the local await was
+			// cancelled. The server may still be working; put the user's text back
+			// in the composer so intent is preserved without starting concurrent work.
+			if (!draft) {
+				draft = queuedMessage.content;
+				if (queuedMessage.stagedContext) {
+					const merged = mergeSendContext(
+						normalizedStagedContext,
+						queuedMessage.stagedContext
+					);
+					if (merged) stagedContext = merged;
+				}
+				queuedMessage = null;
+				queuedMessageHeld = false;
+			} else {
+				queuedMessageHeld = true;
+			}
+		}
+		runtimeChatStore.cancelGeneration();
+		onNotice(
+			queuedMessageHeld
+				? 'Stopped waiting locally. Your draft and queued follow-up are both preserved.'
+				: 'Stopped waiting locally. The current server response may still finish.'
+		);
+	}
+
+	function restoreHeldQueuedMessage() {
+		if (!queuedMessage || !queuedMessageHeld || draft.trim()) return;
+		draft = queuedMessage.content;
+		if (queuedMessage.stagedContext) {
+			const merged = mergeSendContext(
+				normalizedStagedContext,
+				queuedMessage.stagedContext
+			);
+			if (merged) stagedContext = merged;
+		}
+		queuedMessage = null;
+		queuedMessageHeld = false;
+		composerRef?.focus?.();
+	}
+
+	// Chat-web owns /api/chat/typing; embedding hosts (e.g. portal.example.com)
+	// don't serve it, so an embed hands in `chatOrigin` from its layout data.
+	// The poster no-ops after a 404 on hosts where the endpoint is absent.
+	// Derived so a changed `chatOrigin` gets a fresh poster for the new base.
+	const typingIndicatorPoster = $derived(createTypingIndicatorPoster({ base: chatOrigin ?? null }));
+
+	async function postTypingIndicator(roomId: string, isTyping: boolean) {
+		await typingIndicatorPoster.post(roomId, isTyping);
+	}
+
+	function handleTypingChange(isTyping: boolean) {
+		// Only broadcast typing for a persisted room; there is no room to publish
+		// to before the first send creates one.
+		const roomId = chatRoomStore.roomId;
+		if (!roomId) return;
+		if (isTyping) {
+			const now = Date.now();
+			// Throttle repeated keystrokes to one "typing" POST per window.
+			if (typingIndicatorActive && now - lastTypingPostAt < TYPING_POST_THROTTLE_MS) return;
+			lastTypingPostAt = now;
+			typingIndicatorActive = true;
+			void postTypingIndicator(roomId, true);
+		} else if (typingIndicatorActive) {
+			// Idle (composer's 3s timeout) or an explicit stop — clear immediately.
+			typingIndicatorActive = false;
+			void postTypingIndicator(roomId, false);
+		}
+	}
+
+	function getReadyAttachments(): ChatMessageAttachment[] {
+		return chatRoomStore.pendingAttachments
+			.filter(
+				(attachment) =>
+					attachment.status === 'ready' &&
+					// A genuine upload (platform-storage with a real URL, no `ref`) flows
+					// here as an attachment. Only a storage REF (platform-storage + `ref`,
+					// empty URL) is excluded — it rides `stagedContext.data['storage-entities']`
+					// instead, since its empty URL would render as a dead link.
+					!(attachment.source === 'platform-storage' && Boolean(attachment.ref))
+			)
+			.map((attachment) => ({
+				id: attachment.id,
+				fileName: attachment.name,
+				contentType: attachment.type,
+				size: attachment.size,
+				url: attachment.url,
+				createdAt: new Date().toISOString()
+			}));
+	}
+
+	function getReadyAttachmentIds(): string[] {
+		return chatRoomStore.pendingAttachments
+			.filter(
+				(attachment) =>
+					attachment.status === 'ready' &&
+					(!attachment.source || attachment.source === 'chat-upload')
+			)
+			.map((attachment) => attachment.id);
+	}
+
+	/**
+	 * Collect the `storage://` pointers staged from platform storage. These ride
+	 * through `stagedContext.data['storage-entities']` (NOT `attachments[]`,
+	 * whose empty `url` would render as a dead link); the AI worker resolves them
+	 * to bytes lazily at run time.
+	 */
+	function getStorageEntityRefs(): string[] {
+		const refs: string[] = [];
+		for (const attachment of chatRoomStore.pendingAttachments) {
+			if (
+				attachment.status === 'ready' &&
+				attachment.source === 'platform-storage' &&
+				attachment.ref
+			) {
+				refs.push(attachment.ref);
+			}
+		}
+		return refs;
+	}
+
+	/**
+	 * Merge staged `storage://` refs into a copy of the outgoing staged context
+	 * under the `storage-entities` data key, leaving the bound prop untouched.
+	 */
+	function withStorageEntities(
+		context: TextGenerationStagedContext | undefined,
+		refs: string[]
+	): TextGenerationStagedContext | undefined {
+		if (refs.length === 0) return context;
+		const base = context ?? {};
+		return {
+			...base,
+			data: {
+				...base.data,
+				'storage-entities': { refs }
+			}
+		};
+	}
+
+	function attachmentOnlyMessage(attachments: ChatMessageAttachment[]): string {
+		if (attachments.length === 1) return `Attached ${attachments[0].fileName}`;
+		return `Attached ${attachments.length} files`;
+	}
+
+	function storageRefOnlyMessage(refs: string[]): string {
+		if (refs.length === 1) return 'Attached a file from storage';
+		return `Attached ${refs.length} files from storage`;
+	}
+
+	async function handleFileChange(event: Event) {
+		if (!(event.currentTarget instanceof HTMLInputElement)) return;
+		const input = event.currentTarget;
+		if (input.files?.length && onAttachFiles) {
+			const [attachResult] = await Promise.allSettled([onAttachFiles(input.files, chatRoomStore.roomId)]);
+			if (attachResult?.status === 'rejected') {
+				onError(chatFailureMessage(attachResult.reason, 'The file could not be attached.'));
+			}
+		}
+		input.value = '';
+	}
+
+	function focusComposer() {
+		composerRef?.focus?.();
+		runtimeChatStore.nudgeScrollBottom(true);
+	}
+
+	function refreshImplementedDialogs(runtime: VibesRuntime) {
+		if (!requireImplementedDialogs) {
+			implementedDialogActionKeys = new Set();
+			return;
+		}
+		if (!runtime.hasKind(CHAT_DIALOG_WIDGET_KIND)) {
+			implementedDialogActionKeys = new Set();
+			return;
+		}
+		const available = new Set(runtime.assets(CHAT_DIALOG_WIDGET_KIND).available());
+		const keys = new Set<string>();
+		for (const widget of resolveRuntimeChatDialogWidgets(runtime)) {
+			const implementationId = widget.implementationId ?? widget.id;
+			if (!available.has(implementationId)) continue;
+			keys.add(widget.id);
+			keys.add(widget.dialog);
+			if (widget.actionId) keys.add(widget.actionId);
+		}
+		implementedDialogActionKeys = keys;
+	}
+
+	const chatSuggestDetailSchema = z.looseObject({
+		text: z.string().optional()
+	});
+
+	const retryMessageDetailSchema = z.looseObject({
+		content: z.string().optional()
+	});
+
+	const chatToolAnswerDetailSchema = z.looseObject({
+		text: z.string().optional(),
+		answerText: z.string().optional(),
+		toolName: z.string().optional(),
+		toolCallId: z.string().optional(),
+		question: z.string().optional(),
+		questionType: z.string().optional(),
+		selectedLabel: z.string().optional(),
+		selectedLabels: z.array(z.string()).optional(),
+		selectedValue: z.unknown().optional(),
+		selectedValues: z.array(z.unknown()).optional(),
+		enteredText: z.string().optional()
+	});
+
+	onMount(() => {
+		const refreshRuntimeActions = () => {
+			void Promise.allSettled([runtimeStore.load()]).then(([result]) => {
+				if (!result) return;
+				if (result.status === 'fulfilled') {
+					runtimeActions = resolveRuntimeChatComposerActions(result.value);
+					refreshImplementedDialogs(result.value);
+				} else {
+					onError(chatFailureMessage(result.reason, 'Could not load chat actions.'));
+				}
+			});
+		};
+		refreshRuntimeActions();
+		window.addEventListener(CHAT_COMPOSER_ACTIONS_CHANGED_EVENT, refreshRuntimeActions);
+		window.addEventListener(CHAT_DIALOG_WIDGETS_CHANGED_EVENT, refreshRuntimeActions);
+		window.addEventListener('chat:focus-composer', focusComposer);
+		window.addEventListener('chat:retry-message', handleRetryMessage);
+		window.addEventListener('vibes:chat-suggest', handleChatSuggest);
+		window.addEventListener('vibes:chat-tool-answer', handleChatToolAnswer);
+		return () => {
+			window.removeEventListener(CHAT_COMPOSER_ACTIONS_CHANGED_EVENT, refreshRuntimeActions);
+			window.removeEventListener(CHAT_DIALOG_WIDGETS_CHANGED_EVENT, refreshRuntimeActions);
+			window.removeEventListener('chat:focus-composer', focusComposer);
+			window.removeEventListener('chat:retry-message', handleRetryMessage);
+			window.removeEventListener('vibes:chat-suggest', handleChatSuggest);
+			window.removeEventListener('vibes:chat-tool-answer', handleChatToolAnswer);
+		};
+	});
+
+	/** A generic widget suggestion: send the supplied text through the normal path. */
+	function handleChatSuggest(event: Event) {
+		if (!(event instanceof CustomEvent)) return;
+		const parsed = chatSuggestDetailSchema.safeParse(event.detail);
+		if (!parsed.success) return;
+		const text = parsed.data.text?.trim() ?? '';
+		if (!text || sendDisabled) return;
+		void send({ content: text });
+	}
+
+	/**
+	 * Retry a failed reply (GH #585). The message list resolves the originating
+	 * user message's text and dispatches it here so the re-run goes through the
+	 * SAME composer send path — sending state, Stop control, follow-up queueing,
+	 * error toast — instead of a second ad-hoc send that bypasses all of it.
+	 */
+	function handleRetryMessage(event: Event) {
+		if (!(event instanceof CustomEvent)) return;
+		const parsed = retryMessageDetailSchema.safeParse(event.detail);
+		if (!parsed.success) return;
+		const text = parsed.data.content?.trim() ?? '';
+		if (!text || sendDisabled) return;
+		void send({ content: text, includeComposerState: false });
+	}
+
+	/**
+	 * Structured answer from a tool widget. It still sends a normal visible user
+	 * message, but carries the tool-call answer in staged context so generation can
+	 * resume the exact approval/question workflow instead of parsing a raw value.
+	 */
+	function handleChatToolAnswer(event: Event) {
+		if (!(event instanceof CustomEvent)) return;
+		const parsed = chatToolAnswerDetailSchema.safeParse(event.detail);
+		if (!parsed.success) return;
+		const detail = parsed.data;
+		const text = detail.answerText?.trim() || detail.text?.trim() || '';
+		if (!text || sendDisabled) return;
+		const answer = {
+			answerText: text,
+			toolName: detail.toolName,
+			toolCallId: detail.toolCallId,
+			question: detail.question,
+			questionType: detail.questionType,
+			selectedLabel: detail.selectedLabel,
+			selectedLabels: detail.selectedLabels,
+			selectedValue: detail.selectedValue,
+			selectedValues: detail.selectedValues,
+			enteredText: detail.enteredText
+		};
+		void send({
+			content: text,
+			includeComposerState: false,
+			stagedContext: {
+				metadata: { chatToolAnswer: true },
+				data: { 'chat-tool-answer': answer }
+			}
+		});
+	}
+
+	$effect(() => {
+		stagedContext = initialStagedContext;
+	});
+</script>
+
+<div class="runtime-chat-input" class:runtime-chat-input--fill={fill}>
+	{#if runtimeChatStore.client?.roomSync}
+		<Button variant="ghost" size="sm" onclick={synchronizeRooms}>Sync conversation changes</Button>
+		{#each roomConflicts as conflict (conflict.roomId)}
+			<div role="alert">
+				<p>Conversation changed on another device: {conflict.local?.title ?? conflict.remote?.title ?? conflict.roomId}</p>
+				{#if conflict.remote?.deleted}
+					<p>Cloud deletion is permanent. This device’s copy stays here until you accept the deletion.</p>
+				{:else}
+					<Button variant="outline" size="sm" onclick={() => resolveRoomConflict(conflict.roomId,'local')}>{conflict.local?.deleted ? 'Keep my deletion' : 'Keep this device’s changes'}</Button>
+				{/if}
+				<Button variant="outline" size="sm" onclick={() => resolveRoomConflict(conflict.roomId,'remote')}>{conflict.remote?.deleted ? 'Accept cloud deletion' : 'Use cloud changes'}</Button>
+			</div>
+		{/each}
+	{/if}
+	<form
+		class="runtime-chat-input__form"
+		onsubmit={(event) => {
+			event.preventDefault();
+			void send();
+		}}
+	>
+		<ContextBuilder bind:value={stagedContext}>
+			{#snippet children({ hasStaged: builderHasStaged })}
+				{@const submitState = getRuntimeChatSubmitState({
+					content: draft,
+					sending,
+					canType,
+					sendDisabled,
+					hasUploadingAttachments,
+					hasFailedAttachments,
+					hasReadyAttachments,
+					hasStorageRefs,
+					hasStagedContext: hasStagedContext(normalizedStagedContext),
+					hasBuilderStaged: builderHasStaged
+				})}
+				{#if statusPrefix}
+					{@render statusPrefix()}
+				{/if}
+				<div class="runtime-chat-input__status" role="status" aria-live="polite">
+					{#if isNewChat && chatRoomStore.pendingAgents.size > 0}
+						<Badge variant="secondary" class="gap-1">
+							<Icon icon="lucide:bot" class="h-3 w-3" />
+							<span>
+								{chatRoomStore.pendingAgents.size} AI teammate{chatRoomStore.pendingAgents.size ===
+								1
+									? ''
+									: 's'} selected
+							</span>
+						</Badge>
+					{/if}
+					{#if isNewChat && chatRoomStore.pendingUsers.length > 0}
+						<Badge variant="secondary" class="gap-1">
+							<Icon icon="lucide:users" class="h-3 w-3" />
+							<span>
+								{chatRoomStore.pendingUsers.length}
+								{chatRoomStore.pendingUsers.length === 1 ? 'person' : 'people'} selected
+							</span>
+						</Badge>
+					{/if}
+					<ContextBuilderProviderStatus value={stagedContext} />
+					{#if statusExtras}
+						{@render statusExtras()}
+					{/if}
+				</div>
+
+				<div class="runtime-chat-input__composer-shell">
+					<div class="runtime-chat-input__composer-stack">
+						{#if composerPrefix}
+							{@render composerPrefix()}
+						{/if}
+						<RuntimeChatAttachments />
+						<RuntimeChatComposer
+							bind:this={composerRef}
+							bind:value={draft}
+							{placeholder}
+							{canType}
+							agents={activeAgents}
+							users={activeUsers}
+							{slashCommands}
+							onTypingChange={handleTypingChange}
+							onStageContext={mergeStagedContext}
+							onSubmit={send}
+							{onNotice}
+							{onError}
+						/>
+					</div>
+				</div>
+
+				{#if queuedMessage && queuedMessageHeld}
+					<div class="runtime-chat-input__held-follow-up" role="status">
+						<span>
+							Queued follow-up preserved: “{queuedMessage.content}”
+						</span>
+						<Button
+							type="button"
+							variant="ghost"
+							size="sm"
+							disabled={Boolean(draft.trim())}
+							onclick={restoreHeldQueuedMessage}
+							title={draft.trim() ? 'Clear the current draft to restore this follow-up' : undefined}
+						>
+							Restore
+						</Button>
+					</div>
+				{/if}
+
+				<RuntimeChatActionBar
+					{canType}
+					sendDisabled={submitState.sendDisabled}
+					submitting={sending}
+					queueing={submitState.queueing}
+					queued={queuedMessage !== null && !queuedMessageHeld}
+					actions={effectiveActions}
+					onAction={handleAction}
+					onStop={handleStop}
+				>
+					{#snippet trailingActions()}
+						{#if attachmentsEnabled && onAttachFiles}
+							<input
+								bind:this={fileInput}
+								class="runtime-chat-input__file-input"
+								type="file"
+								accept={fileAccept}
+								multiple
+								onchange={(event) => void handleFileChange(event)}
+								tabindex="-1"
+							/>
+							<Button
+								type="button"
+								variant="ghost"
+								size="icon-sm"
+								disabled={!canType}
+								onclick={() => fileInput?.click()}
+								title="Attach files"
+								aria-label="Attach files"
+							>
+								<Icon icon="lucide:paperclip" class="h-4 w-4" />
+							</Button>
+						{/if}
+					{/snippet}
+				</RuntimeChatActionBar>
+			{/snippet}
+		</ContextBuilder>
+	</form>
+	{#if marshal}
+		<div class="runtime-chat-input__marshal">{@render marshal()}</div>
+	{/if}
+</div>
+
+<style>
+	.runtime-chat-input {
+		position: relative;
+		width: 100%;
+		min-width: 0;
+		color: var(--foreground, inherit);
+	}
+
+	/* Inline Marshal launcher: anchored above the composer's top edge (the input
+	   divider), overflowing upward into the message history. Floats over the
+	   scrolling messages without scrolling with them. The extra clearance keeps
+	   the round launcher off the composer's top-right toolbar on narrow columns
+	   such as embedded /chat, where it used to crowd the Send/attach controls
+	   (GH #577). */
+	.runtime-chat-input__marshal {
+		position: absolute;
+		right: var(--runtime-chat-inline-marshal-right, 0.75rem);
+		bottom: var(--runtime-chat-inline-marshal-bottom, calc(100% + 1.5rem));
+		z-index: 40;
+		display: flex;
+		justify-content: flex-end;
+		pointer-events: none;
+	}
+
+	/* Re-enable interaction on the launcher button itself — the wrapper is
+	   pointer-events:none so its empty padding never blocks clicks on the
+	   messages or composer underneath. */
+	.runtime-chat-input__marshal :global(.app-shell-inline-marshal) {
+		pointer-events: auto;
+	}
+
+	.runtime-chat-input--fill {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+	}
+
+	.runtime-chat-input__form {
+		display: flex;
+		min-width: 0;
+		flex-direction: column;
+		overflow: visible;
+		border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
+		border-radius: 0.85rem;
+		background: var(--background, #fff);
+		box-shadow: 0 14px 45px var(--shadow-ambient);
+		transition:
+			border-color 150ms ease,
+			box-shadow 150ms ease;
+	}
+
+	.runtime-chat-input__form:focus-within {
+		border-color: var(--ring);
+		box-shadow:
+			0 0 0 3px color-mix(in oklch, var(--ring) 30%, transparent),
+			0 14px 45px var(--shadow-ambient);
+	}
+
+	.runtime-chat-input--fill .runtime-chat-input__form {
+		min-height: 0;
+		flex: 1 1 auto;
+	}
+
+	.runtime-chat-input__status {
+		display: flex;
+		min-height: 2rem;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.4rem;
+		padding: 0.35rem 0.5rem 0;
+	}
+
+	/* The status strip's children (participant badges, provider chips, extras)
+	   are all conditional — with none present the strip still reserved 2.35rem
+	   of dead space ABOVE the editor while the composer hugged the action bar
+	   below, making the input read visibly top-heavy. Collapse it whenever it
+	   has no element children; it reappears the moment any chip renders. */
+	.runtime-chat-input__status:not(:has(*)) {
+		display: none;
+	}
+
+	.runtime-chat-input__composer-shell {
+		display: flex;
+		min-height: 4rem;
+		min-width: 0;
+	}
+
+	.runtime-chat-input__held-follow-up {
+		display: flex;
+		min-width: 0;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		border-top: 1px solid var(--border, rgba(0, 0, 0, 0.1));
+		padding: 0.35rem 0.5rem;
+		color: var(--muted-foreground, #6b7280);
+		font-size: 0.75rem;
+	}
+
+	.runtime-chat-input__held-follow-up > span {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.runtime-chat-input--fill .runtime-chat-input__composer-shell {
+		min-height: 0;
+		flex: 1 1 auto;
+	}
+
+	.runtime-chat-input__composer-stack {
+		display: flex;
+		min-width: 0;
+		flex: 1 1 auto;
+		flex-direction: column;
+	}
+
+	.runtime-chat-input__file-input {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		clip-path: inset(50%);
+	}
+</style>