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

package/dist/svelte/components/ChatMessage.svelte

@@ -0,0 +1,304 @@
+<script lang="ts">
+	/**
+	 * ChatMessage — single message renderer.
+	 *
+	 * Schema-aligned with `UnifiedChatMessage` from `@vibesdotdev/chat`. Accepts
+	 * the message via props (no app-internal store reach-ins). Renders sender
+	 * label, content, and a status indicator. Stateless wrapper around the
+	 * existing `ChatMessageContent` primitive in this package.
+	 */
+	import type { UnifiedChatMessage } from '@vibesdotdev/chat';
+	import type { Snippet } from 'svelte';
+	import * as z from 'zod/v4';
+	import { getLogger } from '@vibesdotdev/logging';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte';
+	import { settle, valueFreeFailure } from '@vibesdotdev/kernel';
+	import ChatMessageToolCalls from './ChatMessageToolCalls.svelte';
+	import ChatMessageContent from './ChatMessageContent.svelte';
+	import ChatMessageTimestamp from './ChatMessageTimestamp.svelte';
+	import ChatMessageStatusBadge from './ChatMessageStatusBadge.svelte';
+	import ChatMessageAttachments from './ChatMessageAttachments.svelte';
+	import ChatMessageReactions from './ChatMessageReactions.svelte';
+	import type { ReactionType } from './utils/types.js';
+	import { isLiveMessageStatus } from './utils/message-utils.js';
+	import { chatErrorNotice } from '../../error-notice.js';
+	import { readReactionState } from './utils/reactions.js';
+	import { readToolCallHistory, readToolCallViews } from './utils/tool-calls.js';
+	import {
+		ensureChatToolWidgetsRegistered,
+		withCanonicalToolWidgetNames
+	} from '../tool-widgets.js';
+
+	type Props = {
+		message: UnifiedChatMessage;
+		/** Override the displayed sender label. */
+		senderLabel?: string;
+		/** Show actions row (copy, reply, etc.) via slot. */
+		compact?: boolean;
+		/** Avatar URL for the sender, if available. */
+		avatarUrl?: string;
+		/** Hide the status badge entirely. */
+		hideStatus?: boolean;
+		/** Actions row (copy/reply/edit/…), rendered below the content. The app
+		 * owns room/store logic; the package owns placement. */
+		actions?: Snippet;
+		/** Override the message-content region (tool-calls + `ChatMessageContent`)
+		 * with app-supplied markup — e.g. an inline editor — while keeping the
+		 * avatar, label, timestamp, status, attachments, reactions, and actions.
+		 * When omitted, the default content render is used. */
+		contentOverride?: Snippet;
+		/** Reaction click intent (app owns transport + optimistic state). */
+		onReact?: (type: ReactionType) => void;
+		/** Viewer's id for deriving `mine` from `metadata.reactions`. */
+		currentUserId?: string;
+		/** Override server-folded reaction counts (optimistic app state). */
+		reactionCounts?: { up: number; down: number };
+		/** Override the derived viewer reaction (optimistic app state). */
+		myReaction?: ReactionType;
+		/** Whether the viewer may toggle reactions (app gates on identity/room). */
+		canToggleReactions?: boolean;
+		/** Disable reaction chips during the app's optimistic round-trip. */
+		reactionBusy?: boolean;
+		/** Recover omitted tool-call history (tail-marker projections). The app
+		 * owns transport + merge; when omitted, no recovery button renders. */
+		onLoadToolHistory?: (messageId: string) => void;
+		/** Recovery in flight for this message. */
+		toolHistoryLoading?: boolean;
+		/** Recovery failure for this message. */
+		toolHistoryError?: string | null;
+	};
+
+	let {
+		message,
+		senderLabel,
+		compact = false,
+		avatarUrl,
+		hideStatus = false,
+		actions,
+		contentOverride,
+		onReact,
+		currentUserId,
+		reactionCounts,
+		myReaction,
+		canToggleReactions = false,
+		reactionBusy = false,
+		onLoadToolHistory,
+		toolHistoryLoading = false,
+		toolHistoryError = null
+	}: Props = $props();
+
+	const runtimeStore = getRuntimeSvelteContext();
+	/** The failure a failed turn recorded on its message (`metadata.error`). */
+	const RecordedFailureSchema = z.string().trim().min(1);
+
+	const isUser = $derived(message.senderType === 'user');
+	const isAgent = $derived(message.senderType === 'agent');
+	const isSystem = $derived(message.senderType === 'system');
+	const isStreaming = $derived(message.status ? isLiveMessageStatus(message.status) : false);
+	const toolCalls = $derived(
+		withCanonicalToolWidgetNames(readToolCallViews(message.metadata))
+	);
+	const toolHistory = $derived(readToolCallHistory(message.metadata));
+	// A failed turn records its typed failure on the message; show it, so the
+	// reply says why it failed instead of leaving an empty bubble.
+	const failureNotice = $derived.by(() => {
+		if (message.status !== 'failed') return null;
+		const error = RecordedFailureSchema.safeParse(message.metadata?.error);
+		return error.success ? chatErrorNotice(error.data) : null;
+	});
+
+	$effect(() => {
+		if (toolCalls.length === 0) return;
+		void (async () => {
+			const settled = await settle(async () => {
+				const runtime = await runtimeStore.load();
+				await ensureChatToolWidgetsRegistered(runtime);
+			});
+			if (!settled.ok && runtimeStore.runtime) {
+				const failure = valueFreeFailure(settled.cause);
+				getLogger('chat.svelte.message', runtimeStore.runtime).warn(
+					'Chat tool widget admission failed',
+					{ reason: failure.reason ?? failure.name }
+				);
+			}
+		})();
+	});
+
+	// Reactions: server folds counts + the reaction list into metadata; the
+	// viewer's own reaction derives from the list via `currentUserId`. App
+	// overrides (optimistic) win over the fold when provided.
+	const serverState = $derived(readReactionState(message.metadata, currentUserId));
+	const reactions = $derived(reactionCounts ?? serverState.counts);
+	const mine = $derived(myReaction !== undefined ? myReaction : serverState.mine);
+	const showReactions = $derived(!!onReact || reactions.up > 0 || reactions.down > 0);
+
+	const computedLabel = $derived.by(() => {
+		if (senderLabel) return senderLabel;
+		if (isSystem) return 'System';
+		if (isAgent) return message.agentId ?? 'Agent';
+		return 'You';
+	});
+
+	const initials = $derived.by(() => {
+		const name = computedLabel || 'U';
+		return name
+			.split(/\s+/)
+			.map((part) => part[0] ?? '')
+			.join('')
+			.toUpperCase()
+			.slice(0, 2) || 'U';
+	});
+</script>
+
+<article
+	class="chat-message"
+	class:chat-message--user={isUser}
+	class:chat-message--agent={isAgent}
+	class:chat-message--system={isSystem}
+	class:chat-message--compact={compact}
+	data-message-id={message.id}
+>
+	<div class="chat-message__avatar" aria-hidden="true">
+		{#if avatarUrl}
+			<img src={avatarUrl} alt="" />
+		{:else}
+			<span class="chat-message__initials">{initials}</span>
+		{/if}
+	</div>
+	<div class="chat-message__body">
+		<header class="chat-message__header">
+			<span class="chat-message__label">{computedLabel}</span>
+			{#if message.createdAt}
+				<ChatMessageTimestamp createdAt={message.createdAt} />
+			{/if}
+			{#if !hideStatus && message.status && message.status !== 'sent'}
+				<ChatMessageStatusBadge status={message.status} />
+			{/if}
+		</header>
+		<div class="chat-message__content">
+			{#if contentOverride}
+				{@render contentOverride()}
+			{:else if toolCalls.length > 0 || toolHistory}
+				<ChatMessageToolCalls
+					tools={toolCalls}
+					history={toolHistory}
+					historyLoading={toolHistoryLoading}
+					historyError={toolHistoryError}
+					onLoadHistory={onLoadToolHistory ? () => onLoadToolHistory(message.id) : undefined}
+				>
+					{#snippet body()}
+						{#if message.content?.trim()}
+							<ChatMessageContent
+								content={message.content ?? ''}
+								streaming={isStreaming}
+								caret={isStreaming && isAgent}
+							/>
+						{/if}
+					{/snippet}
+				</ChatMessageToolCalls>
+			{:else}
+				<ChatMessageContent
+					content={message.content ?? ''}
+					streaming={isStreaming}
+					caret={isStreaming && isAgent}
+				/>
+			{/if}
+			{#if failureNotice}
+				<p class="chat-message__failure" role="status">{failureNotice}</p>
+			{/if}
+		</div>
+		{#if message.attachments && message.attachments.length > 0}
+			<ChatMessageAttachments attachments={message.attachments} />
+		{/if}
+		{#if showReactions}
+			<ChatMessageReactions
+				counts={reactions}
+				{mine}
+				canToggle={canToggleReactions}
+				busy={reactionBusy}
+				{onReact}
+			/>
+		{/if}
+		{#if actions}
+			<div class="chat-message__actions">
+				{@render actions()}
+			</div>
+		{/if}
+	</div>
+</article>
+
+<style lang="postcss">
+	.chat-message {
+		display: grid;
+		grid-template-columns: 2rem 1fr;
+		gap: 0.75rem;
+		padding: 0.5rem 0;
+	}
+
+	.chat-message--compact {
+		padding: 0.25rem 0;
+	}
+
+	.chat-message__avatar {
+		width: 2rem;
+		height: 2rem;
+		border-radius: 9999px;
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: var(--muted, rgba(0, 0, 0, 0.05));
+		color: var(--foreground);
+		font-size: 0.75rem;
+		font-weight: 600;
+	}
+
+	.chat-message__avatar img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.chat-message__body {
+		min-width: 0;
+	}
+
+	.chat-message__header {
+		display: flex;
+		align-items: baseline;
+		gap: 0.5rem;
+		font-size: 0.75rem;
+		opacity: 0.85;
+	}
+
+	.chat-message__label {
+		font-weight: 600;
+	}
+
+	.chat-message--system .chat-message__label {
+		font-style: italic;
+		opacity: 0.7;
+	}
+
+	.chat-message__content {
+		margin-top: 0.125rem;
+		line-height: 1.5;
+		word-wrap: break-word;
+	}
+
+	.chat-message__failure {
+		margin-top: 0.25rem;
+		padding: 0.375rem 0.625rem;
+		border-left: 2px solid var(--destructive, #dc2626);
+		border-radius: 0.25rem;
+		background-color: color-mix(in oklab, var(--destructive, #dc2626) 10%, transparent);
+		font-size: 0.8125rem;
+	}
+
+	.chat-message__actions {
+		margin-top: 0.375rem;
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+</style>

package/dist/svelte/components/ChatMessage.svelte.d.ts

@@ -0,0 +1,56 @@
+/**
+     * ChatMessage — single message renderer.
+     *
+     * Schema-aligned with `UnifiedChatMessage` from `@vibesdotdev/chat`. Accepts
+     * the message via props (no app-internal store reach-ins). Renders sender
+     * label, content, and a status indicator. Stateless wrapper around the
+     * existing `ChatMessageContent` primitive in this package.
+     */
+import type { UnifiedChatMessage } from '@vibesdotdev/chat';
+import type { Snippet } from 'svelte';
+import type { ReactionType } from './utils/types.js';
+type Props = {
+    message: UnifiedChatMessage;
+    /** Override the displayed sender label. */
+    senderLabel?: string;
+    /** Show actions row (copy, reply, etc.) via slot. */
+    compact?: boolean;
+    /** Avatar URL for the sender, if available. */
+    avatarUrl?: string;
+    /** Hide the status badge entirely. */
+    hideStatus?: boolean;
+    /** Actions row (copy/reply/edit/…), rendered below the content. The app
+     * owns room/store logic; the package owns placement. */
+    actions?: Snippet;
+    /** Override the message-content region (tool-calls + `ChatMessageContent`)
+     * with app-supplied markup — e.g. an inline editor — while keeping the
+     * avatar, label, timestamp, status, attachments, reactions, and actions.
+     * When omitted, the default content render is used. */
+    contentOverride?: Snippet;
+    /** Reaction click intent (app owns transport + optimistic state). */
+    onReact?: (type: ReactionType) => void;
+    /** Viewer's id for deriving `mine` from `metadata.reactions`. */
+    currentUserId?: string;
+    /** Override server-folded reaction counts (optimistic app state). */
+    reactionCounts?: {
+        up: number;
+        down: number;
+    };
+    /** Override the derived viewer reaction (optimistic app state). */
+    myReaction?: ReactionType;
+    /** Whether the viewer may toggle reactions (app gates on identity/room). */
+    canToggleReactions?: boolean;
+    /** Disable reaction chips during the app's optimistic round-trip. */
+    reactionBusy?: boolean;
+    /** Recover omitted tool-call history (tail-marker projections). The app
+     * owns transport + merge; when omitted, no recovery button renders. */
+    onLoadToolHistory?: (messageId: string) => void;
+    /** Recovery in flight for this message. */
+    toolHistoryLoading?: boolean;
+    /** Recovery failure for this message. */
+    toolHistoryError?: string | null;
+};
+declare const ChatMessage: import("svelte").Component<Props, {}, "">;
+type ChatMessage = ReturnType<typeof ChatMessage>;
+export default ChatMessage;
+//# sourceMappingURL=ChatMessage.svelte.d.ts.map

package/dist/svelte/components/ChatMessage.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessage.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ChatMessage.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;OAOI;AACJ,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAWtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAWpD,KAAK,KAAK,GAAG;IACZ,OAAO,EAAE,kBAAkB,CAAC;IAC5B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;4DACwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;2DAGuD;IACvD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qEAAqE;IACrE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,iEAAiE;IACjE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,cAAc,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,mEAAmE;IACnE,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,4EAA4E;IAC5E,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qEAAqE;IACrE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;2EACuE;IACvE,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACjC,CAAC;AA+JH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/ChatMessageAttachments.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	/**
+	 * ChatMessageAttachments — message-level attachment list (images inline,
+	 * files as download chips). Store-free: attachments arrive via props
+	 * (`UnifiedChatMessage.attachments`). Ported from chat-web's app-local
+	 * `message/Attachments.svelte` (C-SVELTE-2) with package conventions
+	 * (direct icon import, plain CSS — no `$lib` / `@apply`).
+	 */
+	import type { ChatMessageAttachment } from '@vibesdotdev/chat/schemas/common';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+
+	type Props = {
+		attachments?: ChatMessageAttachment[] | undefined;
+	};
+
+	let { attachments = [] }: Props = $props();
+
+	const MAX_INLINE_IMAGE_BYTES = 5 * 1024 * 1024;
+
+	function formatBytes(size: number): string {
+		if (size < 1024) return `${size} B`;
+		if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+		return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+	}
+
+	function isRenderableImage(a: ChatMessageAttachment): boolean {
+		return a.contentType.startsWith('image/') && a.size <= MAX_INLINE_IMAGE_BYTES;
+	}
+</script>
+
+{#if attachments && attachments.length > 0}
+	<div class="chat-attachments">
+		{#each attachments as attachment (attachment.id)}
+			{#if isRenderableImage(attachment)}
+				<a
+					href={attachment.url}
+					target="_blank"
+					rel="noopener"
+					class="chat-attachment chat-attachment--image"
+					title={`${attachment.fileName} · ${formatBytes(attachment.size)}`}
+				>
+					<img src={attachment.url} alt={attachment.fileName} loading="lazy" decoding="async" />
+				</a>
+			{:else}
+				<a
+					href={attachment.url}
+					target="_blank"
+					rel="noopener"
+					download={attachment.fileName}
+					class="chat-attachment chat-attachment--file"
+					title={`${attachment.fileName} · ${formatBytes(attachment.size)}`}
+				>
+					<div class="chat-attachment__icon">
+						{#if attachment.contentType.startsWith('image/')}
+							<Icon icon="lucide:image" class="h-4 w-4" />
+						{:else}
+							<Icon icon="lucide:file-text" class="h-4 w-4" />
+						{/if}
+					</div>
+					<div class="chat-attachment__meta">
+						<div class="chat-attachment__name">{attachment.fileName}</div>
+						<div class="chat-attachment__size">
+							{attachment.contentType} · {formatBytes(attachment.size)}
+						</div>
+					</div>
+					<Icon icon="lucide:download" class="h-4 w-4 shrink-0 text-muted-foreground" />
+				</a>
+			{/if}
+		{/each}
+	</div>
+{/if}
+
+<style lang="postcss">
+	.chat-attachments {
+		margin-top: 0.5rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.chat-attachment {
+		display: block;
+		overflow: hidden;
+		border-radius: 0.375rem;
+		border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
+		background: var(--background, transparent);
+		text-decoration: none;
+		color: inherit;
+		transition: background-color 0.15s ease;
+	}
+
+	.chat-attachment:hover {
+		background: var(--muted, rgba(0, 0, 0, 0.04));
+	}
+
+	.chat-attachment:focus-visible {
+		outline: 2px solid var(--primary, currentColor);
+		outline-offset: 1px;
+	}
+
+	.chat-attachment--image {
+		max-width: 24rem;
+		padding: 0;
+	}
+
+	.chat-attachment--image img {
+		display: block;
+		height: auto;
+		max-height: 24rem;
+		width: 100%;
+		object-fit: contain;
+	}
+
+	.chat-attachment--file {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 0.5rem 0.75rem;
+		font-size: 0.75rem;
+	}
+
+	.chat-attachment__icon {
+		display: flex;
+		height: 2rem;
+		width: 2rem;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+		border-radius: 0.375rem;
+		background: var(--muted, rgba(0, 0, 0, 0.05));
+		color: var(--muted-foreground, rgba(0, 0, 0, 0.45));
+	}
+
+	.chat-attachment__meta {
+		display: flex;
+		min-width: 0;
+		flex: 1;
+		flex-direction: column;
+	}
+
+	.chat-attachment__name {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-weight: 500;
+	}
+
+	.chat-attachment__size {
+		color: var(--muted-foreground, rgba(0, 0, 0, 0.45));
+	}
+
+</style>

package/dist/svelte/components/ChatMessageAttachments.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+     * ChatMessageAttachments — message-level attachment list (images inline,
+     * files as download chips). Store-free: attachments arrive via props
+     * (`UnifiedChatMessage.attachments`). Ported from chat-web's app-local
+     * `message/Attachments.svelte` (C-SVELTE-2) with package conventions
+     * (direct icon import, plain CSS — no `$lib` / `@apply`).
+     */
+import type { ChatMessageAttachment } from '@vibesdotdev/chat/schemas/common';
+type Props = {
+    attachments?: ChatMessageAttachment[] | undefined;
+};
+declare const ChatMessageAttachments: import("svelte").Component<Props, {}, "">;
+type ChatMessageAttachments = ReturnType<typeof ChatMessageAttachments>;
+export default ChatMessageAttachments;
+//# sourceMappingURL=ChatMessageAttachments.svelte.d.ts.map

package/dist/svelte/components/ChatMessageAttachments.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageAttachments.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ChatMessageAttachments.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;OAMI;AACJ,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAI7E,KAAK,KAAK,GAAG;IACZ,WAAW,CAAC,EAAE,qBAAqB,EAAE,GAAG,SAAS,CAAC;CAClD,CAAC;AAuDH,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/components/ChatMessageBubble.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+	import { getLogger } from '@vibesdotdev/logging';
+	import { settle, valueFreeFailure } from '@vibesdotdev/kernel';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte';
+	import * as Card from '@vibesdotdev/kit/components/ui/card';
+	import { type ToolCallView } from '@vibesdotdev/kit/components/tool-widgets';
+	import ChatToolCallRenderer from './ChatToolCallRenderer.svelte';
+	import { cn } from '@vibesdotdev/kit/utils';
+	import ChatMessageContent from './ChatMessageContent.svelte';
+	import ChatMessageSkeleton from './ChatMessageSkeleton.svelte';
+	import { cleanMessageContent } from './utils/message-utils.js';
+	import type { ChatRenderableMessage, ChatToolCall } from './utils/types.js';
+	import { canonicalToolWidgetId, ensureChatToolWidgetsRegistered } from '../tool-widgets.js';
+
+	interface Props {
+		message: ChatRenderableMessage;
+		compact?: boolean;
+		allowUnsafeHtml?: boolean;
+		class?: string;
+	}
+
+	let { message, compact = false, allowUnsafeHtml = false, class: className }: Props = $props();
+
+	const runtimeStore = getRuntimeSvelteContext();
+
+	const isAgent = $derived(message.senderType === 'agent');
+	const hasContent = $derived((message.content || '').trim().length > 0);
+	const hasContentBlocks = $derived((message.contentBlocks?.message || '').length > 0);
+	const hasAnyContent = $derived(hasContent || hasContentBlocks);
+	const toolCalls = $derived.by(() => message.toolCalls ?? []);
+	const hasToolCalls = $derived.by(() => toolCalls.length > 0);
+
+	$effect(() => {
+		if (!hasToolCalls) return;
+		void (async () => {
+			const settled = await settle(async () => {
+				const runtime = await runtimeStore.load();
+				await ensureChatToolWidgetsRegistered(runtime);
+			});
+			if (!settled.ok && runtimeStore.runtime) {
+				getLogger('chat.svelte.message-bubble', runtimeStore.runtime).warn(
+					'Chat tool widget admission failed',
+					{ error: valueFreeFailure(settled.cause) }
+				);
+			}
+		})();
+	});
+	const shouldShowSkeleton = $derived(isAgent && !hasAnyContent);
+	// Render plain text while the reply is mid-stream and switch to full markdown
+	// once it settles — avoids re-parsing the whole document per token (GH #580).
+	const isStreaming = $derived(message.status === 'streaming');
+
+	function toToolView(tool: ChatToolCall): ToolCallView {
+		return {
+			id: tool.toolCallId,
+			name: canonicalToolWidgetId(tool.toolName),
+			status: tool.status,
+			input: tool.input,
+			output: tool.output,
+			error: tool.error,
+			approval: tool.approval,
+			timestamp: tool.timestamp
+		};
+	}
+</script>
+
+<!-- Keyed on identity + status only (NOT content length). Keying on length
+     tore down and rebuilt the entire bubble — markdown parse, code highlight,
+     the lot — on every streamed token (GH #580). Content growth now updates the
+     subtree reactively in place; the status transition (streaming → sent) still
+     remounts once so the final markdown render is clean. -->
+{#key `${message.id}:${message.status}`}
+	<Card.Root
+		class={cn(
+			'chat-message-bubble',
+			message.senderType === 'user' && 'chat-message-bubble--user',
+			compact && 'chat-message-bubble--compact',
+			className
+		)}
+	>
+		<Card.Content class={cn('p-4', compact && 'p-3')}>
+			{#if shouldShowSkeleton}
+				<ChatMessageSkeleton {compact} />
+			{:else}
+				{#if message.contentBlocks?.thinking}
+					<div class={cn('thinking-block', compact && 'thinking-block--compact')}>
+						<div class="thinking-block__header">
+							<span class="thinking-block__label">Thinking</span>
+						</div>
+						<div class={cn('thinking-block__content max-w-none', compact && 'text-xs')}>
+							<ChatMessageContent
+								content={message.contentBlocks.thinking}
+								{allowUnsafeHtml}
+								streaming={isStreaming}
+							/>
+						</div>
+					</div>
+				{/if}
+
+				{#if hasToolCalls}
+					<div class="tool-call-list">
+						{#each toolCalls as tool (tool.toolCallId ?? `${tool.toolName}-${tool.timestamp}`)}
+							<ChatToolCallRenderer tool={toToolView(tool)} {compact} />
+						{/each}
+					</div>
+				{/if}
+
+				<div class={cn('max-w-none', compact && 'text-xs')}>
+					{#if message.contentBlocks?.message?.trim()}
+						<ChatMessageContent
+							content={message.contentBlocks.message}
+							{allowUnsafeHtml}
+							streaming={isStreaming}
+						/>
+					{:else}
+						<ChatMessageContent
+							content={cleanMessageContent(message.content)}
+							{allowUnsafeHtml}
+							streaming={isStreaming}
+						/>
+					{/if}
+				</div>
+			{/if}
+		</Card.Content>
+	</Card.Root>
+{/key}
+
+<style lang="postcss">
+	@reference "tailwindcss";
+	@reference "@vibesdotdev/kit/styles.css";
+
+	:global(.chat-message-bubble) {
+		@apply border-border/50 p-0 shadow-sm transition-shadow hover:shadow-md;
+	}
+	:global(.chat-message-bubble--user) {
+		@apply border-primary/20 bg-primary/5;
+	}
+	:global(.chat-message-bubble--compact) {
+		@apply shadow-none hover:shadow-sm;
+	}
+
+	.thinking-block {
+		@apply mb-4 rounded-lg border border-info/30 bg-info/10 p-3 dark:bg-info/15;
+	}
+	.thinking-block--compact {
+		@apply mb-3 p-2;
+	}
+	.thinking-block__header {
+		@apply mb-2 flex items-center gap-2;
+	}
+	.thinking-block__label {
+		@apply text-xs font-semibold tracking-wider text-info uppercase;
+	}
+	.thinking-block__content {
+		@apply text-sm text-foreground opacity-80;
+	}
+	.tool-call-list {
+		@apply mt-4 space-y-2;
+	}
+	:global(.chat-message-bubble--compact) .tool-call-list {
+		@apply mt-3 space-y-1.5;
+	}
+</style>