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

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

@@ -0,0 +1,49 @@
+import { type Snippet } from 'svelte';
+import { type TextGenerationStagedContext } from '@vibesdotdev/ai-schemas/generation/contracts';
+import type { ChatRoom, ChatRoomCreateInput } from '@vibesdotdev/chat/client/contracts';
+import type { RuntimeChatAction, RuntimeChatParticipantOption } from './types.ts';
+import type { RuntimeChatAfterSend, RuntimeChatBeforeSend, RuntimeChatInputSnippets, RuntimeChatSendBlocked } from './RuntimeChatInput.types.ts';
+type DialogMode = 'event' | 'insert-command';
+type $$ComponentProps = {
+    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;
+};
+declare const RuntimeChatInput: import("svelte").Component<$$ComponentProps, {}, "stagedContext">;
+type RuntimeChatInput = ReturnType<typeof RuntimeChatInput>;
+export default RuntimeChatInput;
+//# sourceMappingURL=RuntimeChatInput.svelte.d.ts.map

package/dist/svelte/components/runtime/RuntimeChatInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeChatInput.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/runtime/RuntimeChatInput.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,EAAoB,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAQxD,OAAO,EAAqC,KAAK,2BAA2B,EAAE,MAAM,8CAA8C,CAAC;AAEnI,OAAO,KAAK,EAEV,QAAQ,EACR,mBAAmB,EAGnB,MAAM,oCAAoC,CAAC;AAc7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,4BAA4B,EAAE,MAAM,YAAY,CAAC;AAClF,OAAO,KAAK,EACV,oBAAoB,EACpB,qBAAqB,EACrB,wBAAwB,EACxB,sBAAsB,EACtB,MAAM,6BAA6B,CAAC;AAGrC,KAAK,UAAU,GAAG,OAAO,GAAG,gBAAgB,CAAC;AAW7C,KAAK,gBAAgB,GAAI;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;IAChD,MAAM,CAAC,EAAE,4BAA4B,EAAE,CAAC;IACxC,KAAK,CAAC,EAAE,4BAA4B,EAAE,CAAC;IACvC,OAAO,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACvC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,2BAA2B,CAAC;IAC5C,YAAY,CAAC,EAAE,wBAAwB,CAAC,cAAc,CAAC,CAAC;IACxD,YAAY,CAAC,EAAE,wBAAwB,CAAC,cAAc,CAAC,CAAC;IACxD,cAAc,CAAC,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,CAAC;IAC5D,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACjF,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AA0jCH,QAAA,MAAM,gBAAgB,mEAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/components/runtime/RuntimeChatInput.types.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { ChatMessageAttachment } from '@vibesdotdev/chat/schemas/common';
+import type { ChatRoom, ChatRunInput, ChatRunResult } from '@vibesdotdev/chat/client/contracts';
+export interface RuntimeChatBeforeSendContext {
+    room: ChatRoom;
+    content: string;
+    stagedContext: ChatRunInput['stagedContext'] | undefined;
+    attachments: ChatMessageAttachment[];
+    hasAttachments: boolean;
+}
+export interface RuntimeChatAfterSendContext extends RuntimeChatBeforeSendContext {
+    result: ChatRunResult;
+}
+export type RuntimeChatSendBlockedReason = 'disabled' | 'empty' | 'attachments-uploading' | 'attachments-failed';
+export interface RuntimeChatSendBlockedContext {
+    reason: RuntimeChatSendBlockedReason;
+}
+export type RuntimeChatBeforeSend = (context: RuntimeChatBeforeSendContext) => boolean | void | Promise<boolean | void>;
+export type RuntimeChatAfterSend = (context: RuntimeChatAfterSendContext) => void | Promise<void>;
+export type RuntimeChatSendBlocked = (context: RuntimeChatSendBlockedContext) => void | Promise<void>;
+export interface RuntimeChatInputSnippets {
+    statusPrefix?: Snippet;
+    statusExtras?: Snippet;
+    composerPrefix?: Snippet;
+}
+//# sourceMappingURL=RuntimeChatInput.types.d.ts.map

package/dist/svelte/components/runtime/RuntimeChatInput.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeChatInput.types.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/runtime/RuntimeChatInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAC9E,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAEhG,MAAM,WAAW,4BAA4B;IAC5C,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,YAAY,CAAC,eAAe,CAAC,GAAG,SAAS,CAAC;IACzD,WAAW,EAAE,qBAAqB,EAAE,CAAC;IACrC,cAAc,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,2BAA4B,SAAQ,4BAA4B;IAChF,MAAM,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,MAAM,4BAA4B,GACrC,UAAU,GACV,OAAO,GACP,uBAAuB,GACvB,oBAAoB,CAAC;AAExB,MAAM,WAAW,6BAA6B;IAC7C,MAAM,EAAE,4BAA4B,CAAC;CACrC;AAED,MAAM,MAAM,qBAAqB,GAAG,CACnC,OAAO,EAAE,4BAA4B,KACjC,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;AAE9C,MAAM,MAAM,oBAAoB,GAAG,CAClC,OAAO,EAAE,2BAA2B,KAChC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAE1B,MAAM,MAAM,sBAAsB,GAAG,CACpC,OAAO,EAAE,6BAA6B,KAClC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAE1B,MAAM,WAAW,wBAAwB;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB"}

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

@@ -0,0 +1 @@
+export {};

package/dist/svelte/components/runtime/RuntimeChatMessageRow.svelte

@@ -0,0 +1,405 @@
+<script lang="ts">
+	import { useChatSurface } from '../../surface-context.js';
+	const { chatParticipantsStore, runtimeChatStore } = useChatSurface();
+
+	import { type ToolCallView } from '@vibesdotdev/kit/components/tool-widgets';
+	import ChatMessageToolCalls from '../ChatMessageToolCalls.svelte';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+
+	import ChatMessageContent from '../ChatMessageContent.svelte';
+	import ChatMessageStatusBadge from '../ChatMessageStatusBadge.svelte';
+	import ChatMessageTimestamp from '../ChatMessageTimestamp.svelte';
+	import StreamingIndicator from '../indicators/StreamingIndicator.svelte';
+	import NextStepSkeleton from '../indicators/NextStepSkeleton.svelte';
+	import MessageSegments from './MessageSegments.svelte';
+	import { readToolCallViews } from '../utils/tool-calls.js';
+	import { withCanonicalToolWidgetNames } from '../../tool-widgets.js';
+	import { resolveRuntimeChatSenderLabel } from './sender-label.js';
+	import type { ChatMessage, MessageSegment } from '@vibesdotdev/chat/schemas/common';
+	import { messageSegmentSchema } from '@vibesdotdev/chat/schemas/common';
+	import * as z from 'zod/v4';
+	import { chatErrorNotice } from '../../../error-notice.js';
+
+	let {
+		message,
+		currentUserId = null,
+		onEdit,
+		onReact
+	}: {
+		message: ChatMessage;
+		/** Viewer id — enables the Edit control on the viewer's own user messages. */
+		currentUserId?: string | null;
+		/** Wired by the surface to PATCH the message text. Absent → Edit hidden. */
+		onEdit?: (messageId: string) => void;
+		/**
+		 * Wired by the surface to POST/DELETE a reaction. Absent → the reaction
+		 * strip is read-only (still shows counts replicated via metadata), so the
+		 * counts a room already has stay visible even before interaction is wired.
+		 */
+		onReact?: (messageId: string, type: 'up' | 'down') => void;
+	} = $props();
+
+	function initials(label: string) {
+		return (
+			label
+				.split(/\s+/)
+				.map((part) => part[0] ?? '')
+				.join('')
+				.toUpperCase()
+				.slice(0, 2) || 'U'
+		);
+	}
+
+	const messageReactionSchema = z.object({
+		userId: z.string(),
+		reactionType: z.enum(['up', 'down']),
+		emoji: z.string().nullable().optional()
+	});
+
+	const messageRowMetadataSchema = z.looseObject({
+		editedAt: z.string().min(1).optional(),
+		reactions: z.unknown().optional(),
+		segments: z.unknown().optional()
+	});
+
+	const parsedMetadata = $derived.by(() => {
+		const result = messageRowMetadataSchema.safeParse(message.metadata);
+		return result.success ? result.data : null;
+	});
+
+	/** The failure a failed turn recorded on its message (`metadata.error`). */
+	const RecordedFailureSchema = z.looseObject({ error: z.string().trim().min(1) });
+	// Show it, so a failed reply says why instead of leaving an empty row.
+	const failureNotice = $derived.by(() => {
+		if (message.status !== 'failed') return null;
+		const recorded = RecordedFailureSchema.safeParse(message.metadata);
+		return recorded.success ? chatErrorNotice(recorded.data.error) : null;
+	});
+
+	/** ISO string set by the edit endpoint when the author revised their text. */
+	const editedAt = $derived(parsedMetadata?.editedAt ?? null);
+
+	// Reactions are replicated into metadata by the room's live/replay projection,
+	// so the row renders them without any extra fetch. Validate defensively — admit
+	// valid reactions per-element so a single malformed entry does not drop the rest.
+	const reactions = $derived.by(() => {
+		const raw = parsedMetadata?.reactions;
+		if (!Array.isArray(raw)) return [];
+		const admitted: Array<z.infer<typeof messageReactionSchema>> = [];
+		for (const item of raw) {
+			const parsed = messageReactionSchema.safeParse(item);
+			if (parsed.success) {
+				admitted.push(parsed.data);
+			}
+		}
+		return admitted;
+	});
+	const upCount = $derived(reactions.filter((r) => r.reactionType === 'up').length);
+	const downCount = $derived(reactions.filter((r) => r.reactionType === 'down').length);
+	const myReaction = $derived(
+		currentUserId ? (reactions.find((r) => r.userId === currentUserId)?.reactionType ?? null) : null
+	);
+	// Show the strip when there's something to display OR interaction is wired.
+	const showReactions = $derived(!!onReact || upCount > 0 || downCount > 0);
+	const canEdit = $derived(
+		message.senderType === 'user' && !!onEdit && !!currentUserId && message.userId === currentUserId
+	);
+
+	const label = $derived(resolveRuntimeChatSenderLabel(message, chatParticipantsStore));
+	const toolCalls = $derived(
+		withCanonicalToolWidgetNames(
+			readToolCallViews(message.metadata)
+		)
+	);
+	const TOOL_TURN_STALE_MS = 5 * 60_000;
+	let cancellationRequested = $state(false);
+	let cancellationError = $state<string | null>(null);
+	let staleClock = $state(Date.now());
+	const lastMessageUpdate = $derived(message.updatedAt ?? message.createdAt);
+	const hasUnsettledTool = $derived(
+		toolCalls.some((tool) =>
+			['pending', 'running', 'streaming', 'awaiting_approval'].includes(String(tool.status ?? ''))
+		)
+	);
+	const staleDeadline = $derived.by(() => {
+		if (!lastMessageUpdate) return null;
+		const timestamp = Date.parse(lastMessageUpdate);
+		return Number.isFinite(timestamp) ? timestamp + TOOL_TURN_STALE_MS : null;
+	});
+	const staleToolTurn = $derived(
+		hasUnsettledTool && staleDeadline !== null && staleClock >= staleDeadline
+	);
+	// A silent transport cannot trigger another reactive update, so schedule the
+	// exact point at which its pending tool projection becomes stale. Without
+	// this wake-up, a card mounted at minute four can remain "Running" forever.
+	$effect(() => {
+		const deadline = staleDeadline;
+		if (!hasUnsettledTool || deadline === null || staleClock >= deadline) return;
+		const timer = globalThis.setTimeout(
+			() => (staleClock = Date.now()),
+			Math.max(0, deadline - Date.now()) + 1
+		);
+		return () => globalThis.clearTimeout(timer);
+	});
+	const visibleToolCalls = $derived(
+		cancellationRequested || staleToolTurn
+			? toolCalls.map((tool) =>
+					['pending', 'running', 'streaming', 'awaiting_approval'].includes(
+						String(tool.status ?? '')
+					)
+						? {
+								...tool,
+								status: cancellationRequested ? 'cancelled' : 'interrupted',
+								error: cancellationRequested
+									? tool.error
+									: 'The previous workspace connection ended before this tool finished.'
+							}
+						: tool
+				)
+			: toolCalls
+	);
+	const segments = $derived.by(() => {
+		const raw = parsedMetadata?.segments;
+		if (!Array.isArray(raw)) return [];
+		const admitted: Array<z.infer<typeof messageSegmentSchema>> = [];
+		for (const item of raw) {
+			const parsed = messageSegmentSchema.safeParse(item);
+			if (parsed.success) {
+				admitted.push(parsed.data);
+			}
+		}
+		return admitted;
+	});
+	// True while the agent is actively working on this turn (generating tokens or
+	// running tools). Drives the optimistic "next step" skeleton below.
+	const isAnswering = $derived(
+		message.senderType === 'agent' &&
+			(message.status === 'streaming' || message.status === 'processing')
+	);
+
+	// An assistant row that's working but has nothing to show yet is the moment
+	// before the first token. Show animated typing dots instead of an empty bubble
+	// + redundant "streaming" badge so the user gets instant feedback that the
+	// agent is responding.
+	const isAwaitingFirstToken = $derived(
+		isAnswering && !message.content?.trim() && toolCalls.length === 0 && segments.length === 0
+	);
+
+	// A tool still in flight (pending/running) is itself the live element — its
+	// card breathes — so no skeleton while one is running.
+	const hasRunningTool = $derived(
+		visibleToolCalls.some((tool) => {
+			const status = String(tool.status ?? '');
+			return (
+				status === 'pending' ||
+				status === 'running' ||
+				status === 'streaming' ||
+				status === 'awaiting_approval'
+			);
+		})
+	);
+	const canCancelTurn = $derived(
+		message.senderType === 'agent' &&
+			message.chatRoomId === runtimeChatStore.activeRoom?.id &&
+			hasRunningTool &&
+			!staleToolTurn
+	);
+	$effect(() => {
+		if (!hasRunningTool) cancellationError = null;
+	});
+
+	async function cancelTurn(): Promise<void> {
+		if (cancellationRequested) return;
+		cancellationRequested = true;
+		cancellationError = null;
+		try {
+			await runtimeChatStore.cancelGeneration();
+		} catch (error) {
+			cancellationRequested = false;
+			cancellationError = 'Could not stop this response. Try again.';
+			throw error;
+		}
+	}
+
+	// The tail segment is the text currently being appended (caret + raw render),
+	// so it's already a live affordance — no skeleton needed beneath it.
+	const lastSegment = $derived(segments[segments.length - 1]);
+	const tailTextLive = $derived(
+		!!lastSegment &&
+			(lastSegment.kind === 'text' || lastSegment.kind === 'thinking') &&
+			lastSegment.text.trim().length > 0
+	);
+
+	// Flat (non-segmented) path: the body text is streaming in.
+	const flatTextLive = $derived(
+		segments.length === 0 && message.status === 'streaming' && !!message.content?.trim()
+	);
+
+	// Always keep a "next step is coming" affordance: show the optimistic skeleton
+	// whenever the agent is still answering but nothing is currently pulsing — i.e.
+	// between tool calls, after a tool settled and before the next chunk/tool
+	// arrives. Suppressed while the first-token dots, a running tool card, or live
+	// streaming text already signal activity, so only one thing is ever "alive".
+	const showNextStepSkeleton = $derived(
+		isAnswering && !isAwaitingFirstToken && !hasRunningTool && !tailTextLive && !flatTextLive
+	);
+
+	// A completed agent turn that ran tools but wrote no closing text ends visually
+	// on a bare tool card, which reads as "unfinished" to the user. Show a subtle
+	// completion line so the turn has closure. Skip it for `casework.ask`: that
+	// tool card IS the message (an interactive question), so it needs no "Done".
+	const lastTool = $derived(toolCalls[toolCalls.length - 1]);
+	const showCompletion = $derived(
+		message.senderType === 'agent' &&
+			message.status === 'sent' &&
+			!message.content?.trim() &&
+			toolCalls.length > 0 &&
+			lastTool?.name !== 'casework.ask'
+	);
+</script>
+
+<article
+	class={[
+		'grid grid-cols-[2rem_minmax(0,1fr)] gap-3 py-2',
+		message.senderType === 'system' && 'opacity-80'
+	]}
+	data-message-id={message.id}
+>
+	<div
+		class="grid size-8 place-items-center rounded-full bg-muted text-caption font-bold text-muted-foreground"
+		aria-hidden="true"
+	>
+		<span>{initials(label)}</span>
+	</div>
+	<div class="flex min-w-0 flex-col gap-1.5">
+		<header class="flex min-h-8 items-center gap-2 text-footnote text-muted-foreground">
+			<span class="font-bold text-foreground">{label}</span>
+			{#if message.createdAt}
+				<ChatMessageTimestamp createdAt={message.createdAt} />
+			{/if}
+			{#if message.metadata?.cancelled === true}
+				<span class="text-xs text-muted-foreground">Stopped</span>
+			{:else if isAnswering && toolCalls.some((tool) => tool.status === 'awaiting_approval')}
+				<span class="text-xs text-muted-foreground" role="status">Waiting for approval</span>
+			{:else if message.status && message.status !== 'sent' && !isAwaitingFirstToken}
+				<ChatMessageStatusBadge status={message.status} variant="text" />
+			{/if}
+			{#if editedAt}
+				<span
+					class="text-caption font-normal text-muted-foreground italic"
+					title={`Edited ${new Date(editedAt).toLocaleString()}`}>(edited)</span
+				>
+			{/if}
+			{#if canEdit}
+				<Button
+					variant="ghost"
+					size="icon-sm"
+					title="Edit message"
+					aria-label="Edit message"
+					onclick={() => onEdit?.(message.id)}
+				>
+					<Icon icon="lucide:pencil" class="size-3.5" />
+				</Button>
+			{/if}
+		</header>
+		{#if cancellationError}
+			<p class="mb-2 text-footnote text-destructive" role="alert">{cancellationError}</p>
+		{/if}
+		{#if isAwaitingFirstToken}
+			<div aria-label="Assistant is responding">
+				<StreamingIndicator size="small" />
+			</div>
+		{:else if segments.length > 0}
+			<!-- Segmented streaming: render text + tool bubbles interleaved in true
+			     emission order. Tool detail resolves from the same `toolCalls` list
+			     the flat path uses, so there is one source of truth. -->
+			<div class="break-words leading-relaxed">
+				<MessageSegments
+					{segments}
+					toolCalls={visibleToolCalls}
+					streaming={message.status === 'streaming'}
+					onCancel={canCancelTurn ? cancelTurn : undefined}
+				/>
+			</div>
+		{:else if toolCalls.length > 0}
+			<div>
+				<ChatMessageToolCalls
+					tools={visibleToolCalls}
+					inlineBeforeBody
+					onCancel={canCancelTurn ? cancelTurn : undefined}
+				>
+					{#snippet body()}
+						{#if message.content?.trim()}
+							<div class="break-words leading-relaxed">
+								<ChatMessageContent
+									content={message.content ?? ''}
+									streaming={message.status === 'streaming'}
+									caret={message.status === 'streaming'}
+								/>
+							</div>
+						{:else if showCompletion}
+							<p class="text-callout text-muted-foreground">Done.</p>
+						{/if}
+					{/snippet}
+				</ChatMessageToolCalls>
+			</div>
+		{:else}
+			<div class="break-words leading-relaxed">
+				<ChatMessageContent
+					content={message.content ?? ''}
+					streaming={message.status === 'streaming'}
+					caret={message.status === 'streaming'}
+				/>
+			</div>
+		{/if}
+		{#if failureNotice}
+			<p
+				class="mt-1 rounded-md border-l-2 border-destructive bg-destructive/10 px-2.5 py-1.5 text-callout"
+				role="status"
+			>
+				{failureNotice}
+			</p>
+		{/if}
+		{#if showNextStepSkeleton}
+			<!-- Optimistic "next step is coming" affordance: keeps the column alive
+			     between tool calls, after one settles and before the next starts. -->
+			<NextStepSkeleton />
+		{/if}
+		{#if showReactions}
+			<!-- Reaction strip: counts come from the metadata the room's replay/live
+			     projection folds in, so they render with no extra fetch. When a
+			     surface wires `onReact`, the pills become interactive toggles. -->
+			<div class="mt-0.5 flex gap-1.5" role="group" aria-label="Message reactions">
+				<Button
+					variant={myReaction === 'up' ? 'secondary' : 'ghost'}
+					size="sm"
+					class="gap-1 px-2"
+					disabled={!onReact}
+					aria-pressed={myReaction === 'up'}
+					title="Thumbs up"
+					onclick={() => onReact?.(message.id, 'up')}
+				>
+					<Icon icon="lucide:thumbs-up" class="size-3" />
+					{#if upCount > 0}<span class="text-caption leading-none font-normal tabular-nums"
+							>{upCount}</span
+						>{/if}
+				</Button>
+				<Button
+					variant={myReaction === 'down' ? 'secondary' : 'ghost'}
+					size="sm"
+					class="gap-1 px-2"
+					disabled={!onReact}
+					aria-pressed={myReaction === 'down'}
+					title="Thumbs down"
+					onclick={() => onReact?.(message.id, 'down')}
+				>
+					<Icon icon="lucide:thumbs-down" class="size-3" />
+					{#if downCount > 0}<span class="text-caption leading-none font-normal tabular-nums"
+							>{downCount}</span
+						>{/if}
+				</Button>
+			</div>
+		{/if}
+	</div>
+</article>

package/dist/svelte/components/runtime/RuntimeChatMessageRow.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ChatMessage } from '@vibesdotdev/chat/schemas/common';
+type $$ComponentProps = {
+    message: ChatMessage;
+    /** Viewer id — enables the Edit control on the viewer's own user messages. */
+    currentUserId?: string | null;
+    /** Wired by the surface to PATCH the message text. Absent → Edit hidden. */
+    onEdit?: (messageId: string) => void;
+    /**
+     * Wired by the surface to POST/DELETE a reaction. Absent → the reaction
+     * strip is read-only (still shows counts replicated via metadata), so the
+     * counts a room already has stay visible even before interaction is wired.
+     */
+    onReact?: (messageId: string, type: 'up' | 'down') => void;
+};
+declare const RuntimeChatMessageRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type RuntimeChatMessageRow = ReturnType<typeof RuntimeChatMessageRow>;
+export default RuntimeChatMessageRow;
+//# sourceMappingURL=RuntimeChatMessageRow.svelte.d.ts.map

package/dist/svelte/components/runtime/RuntimeChatMessageRow.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeChatMessageRow.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/runtime/RuntimeChatMessageRow.svelte.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,WAAW,EAAkB,MAAM,kCAAkC,CAAC;AAKnF,KAAK,gBAAgB,GAAI;IACxB,OAAO,EAAE,WAAW,CAAC;IACrB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,4EAA4E;IAC5E,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;CAC3D,CAAC;AAiVH,QAAA,MAAM,qBAAqB,sDAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}