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

package/dist/svelte/components/surface/ChatNewConversationEmptyState.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import * as Empty from '@vibesdotdev/kit/components/ui/empty';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import {
+		CHAT_COMPOSER_ACTIONS_CHANGED_EVENT,
+		DEFAULT_RUNTIME_CHAT_ACTIONS,
+		resolveRuntimeChatComposerActions
+	} from '../../composer-actions.js';
+	import { getLogger } from '@vibesdotdev/logging';
+	import { settle, valueFreeFailure } from '@vibesdotdev/kernel';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte';
+	import { dispatchRuntimeChatDialogOpen } from '../../dialog-widgets.js';
+	import type { RuntimeChatAction } from '../runtime/types.js';
+
+	let {
+		title = 'Start a new conversation',
+		description = 'Choose an AI teammate or invite people, then type your first message.',
+		actions,
+		actionButtons = [],
+		includeRuntimeActions = true,
+		showFocusAction = true,
+		actionMode = 'event',
+		onAction,
+		onFocusComposer = () => {}
+	}: {
+		title?: string;
+		description?: string;
+		actions?: Snippet;
+		actionButtons?: readonly RuntimeChatAction[];
+		includeRuntimeActions?: boolean;
+		showFocusAction?: boolean;
+		actionMode?: 'event' | 'insert-command';
+		onAction?: (action: RuntimeChatAction) => void;
+		onFocusComposer?: () => void;
+	} = $props();
+
+	const runtimeStore = getRuntimeSvelteContext();
+	let runtimeActions = $state<RuntimeChatAction[]>(DEFAULT_RUNTIME_CHAT_ACTIONS);
+
+	const quickActions = $derived.by(() => {
+		const byId = new Map<string, RuntimeChatAction>();
+		if (includeRuntimeActions) {
+			for (const action of runtimeActions) byId.set(action.id, action);
+		}
+		for (const action of actionButtons) byId.set(action.id, action);
+		return Array.from(byId.values());
+	});
+
+	function insertCommand(command: string) {
+		window.dispatchEvent(
+			new CustomEvent('chat:insert-text', { detail: { content: `/${command} ` } })
+		);
+	}
+
+	function runAction(action: RuntimeChatAction) {
+		if (onAction) {
+			onAction(action);
+			return;
+		}
+		if (action.insertText) {
+			window.dispatchEvent(
+				new CustomEvent('chat:insert-text', { detail: { content: action.insertText } })
+			);
+		}
+		if (actionMode === 'insert-command') {
+			if (action.command) insertCommand(action.command);
+			else if (action.dialog) insertCommand(action.dialog);
+			return;
+		}
+		if (action.event || action.dialog) {
+			void (async () => {
+				const settled = await settle(async () => {
+					const runtime = await runtimeStore.load();
+					dispatchRuntimeChatDialogOpen(runtime, { action });
+				});
+				if (!settled.ok && runtimeStore.runtime) {
+					getLogger('chat.svelte.new-conversation', runtimeStore.runtime).error(
+						'Could not open the chat dialog',
+						{ error: valueFreeFailure(settled.cause) }
+					);
+				}
+			})();
+		}
+	}
+
+	function refreshRuntimeActions() {
+		if (!includeRuntimeActions) return;
+		void (async () => {
+			const settled = await settle(async () => {
+				const runtime = await runtimeStore.load();
+				runtimeActions = resolveRuntimeChatComposerActions(runtime);
+			});
+			if (!settled.ok && runtimeStore.runtime) {
+				getLogger('chat.svelte.new-conversation', runtimeStore.runtime).error(
+					'Could not resolve chat composer actions',
+					{ error: valueFreeFailure(settled.cause) }
+				);
+			}
+		})();
+	}
+
+	onMount(() => {
+		refreshRuntimeActions();
+		window.addEventListener(CHAT_COMPOSER_ACTIONS_CHANGED_EVENT, refreshRuntimeActions);
+		return () => {
+			window.removeEventListener(CHAT_COMPOSER_ACTIONS_CHANGED_EVENT, refreshRuntimeActions);
+		};
+	});
+</script>
+
+<Empty.Root class="min-h-full">
+	<Empty.Header>
+		<Empty.Media variant="icon"><Icon icon="lucide:message-square-plus" /></Empty.Media>
+		<Empty.Title>{title}</Empty.Title>
+		<Empty.Description>{description}</Empty.Description>
+	</Empty.Header>
+	<Empty.Content>
+		{#if actions}{@render actions()}{/if}
+		{#if quickActions.length}
+			<div class="flex flex-wrap justify-center gap-2">
+				{#each quickActions as action (action.id)}
+					<Button type="button" variant="outline" size="sm" onclick={() => runAction(action)} title={action.description ?? action.label}>
+						<Icon icon={action.icon} class="size-4" />{action.label}
+					</Button>
+				{/each}
+			</div>
+		{/if}
+		{#if showFocusAction}<Button variant="link" onclick={onFocusComposer}>Start typing</Button>{/if}
+	</Empty.Content>
+</Empty.Root>

package/dist/svelte/components/surface/ChatNewConversationEmptyState.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { RuntimeChatAction } from '../runtime/types.ts';
+type $$ComponentProps = {
+    title?: string;
+    description?: string;
+    actions?: Snippet;
+    actionButtons?: readonly RuntimeChatAction[];
+    includeRuntimeActions?: boolean;
+    showFocusAction?: boolean;
+    actionMode?: 'event' | 'insert-command';
+    onAction?: (action: RuntimeChatAction) => void;
+    onFocusComposer?: () => void;
+};
+declare const ChatNewConversationEmptyState: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatNewConversationEmptyState = ReturnType<typeof ChatNewConversationEmptyState>;
+export default ChatNewConversationEmptyState;
+//# sourceMappingURL=ChatNewConversationEmptyState.svelte.d.ts.map

package/dist/svelte/components/surface/ChatNewConversationEmptyState.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatNewConversationEmptyState.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/surface/ChatNewConversationEmptyState.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAatC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,KAAK,gBAAgB,GAAI;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAC;IAC7C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AA2HH,QAAA,MAAM,6BAA6B,sDAAwC,CAAC;AAC5E,KAAK,6BAA6B,GAAG,UAAU,CAAC,OAAO,6BAA6B,CAAC,CAAC;AACtF,eAAe,6BAA6B,CAAC"}

package/dist/svelte/components/surface/ChatParticipantsPanel.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	import { useChatSurface } from '../../surface-context.js';
+	const { chatParticipantsStore } = useChatSurface();
+
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { openManageAgentsDialog } from '../../augmentations/manage-agents.js';
+
+
+	let {
+		title = 'Participants',
+		onClose = () => {}
+	}: {
+		title?: string;
+		onClose?: () => void;
+	} = $props();
+
+	const agents = $derived(Array.from(chatParticipantsStore.agents.values()));
+	const users = $derived(Array.from(chatParticipantsStore.users.values()));
+</script>
+
+<section class="chat-participants-panel">
+	<header class="chat-participants-panel__header">
+		<div class="chat-participants-panel__title">
+			<Icon icon="lucide:users" class="h-4 w-4" />
+			<span>{title}</span>
+		</div>
+		<div class="chat-participants-panel__actions">
+			<Button
+				type="button"
+				variant="ghost"
+				size="icon"
+				class="h-8 w-8"
+				onclick={() => openManageAgentsDialog()}
+				title="Manage AI teammates"
+			>
+				<Icon icon="lucide:settings" class="h-4 w-4" />
+				<span class="sr-only">Manage AI teammates</span>
+			</Button>
+			<Button type="button" variant="ghost" size="icon" class="h-8 w-8" onclick={onClose} title="Close">
+				<Icon icon="lucide:x" class="h-4 w-4" />
+				<span class="sr-only">Close participants</span>
+			</Button>
+		</div>
+	</header>
+	<div class="chat-participants-panel__list">
+		{#each agents as agent (agent.agentId)}
+			<div class="chat-participants-panel__row">
+				<span class="chat-participants-panel__avatar" aria-hidden="true">
+					<Icon icon="lucide:bot" class="h-4 w-4" />
+				</span>
+				<span class="chat-participants-panel__copy">
+					<strong>{agent.alias}</strong>
+					<small>AI teammate</small>
+				</span>
+			</div>
+		{/each}
+		{#each users as user (user.id)}
+			<div class="chat-participants-panel__row">
+				<span class="chat-participants-panel__avatar" aria-hidden="true">
+					<Icon icon="lucide:user" class="h-4 w-4" />
+				</span>
+				<span class="chat-participants-panel__copy">
+					<strong>{user.displayName ?? user.email ?? 'Person'}</strong>
+					<small>{user.role}</small>
+				</span>
+			</div>
+		{/each}
+		{#if agents.length === 0 && users.length === 0}
+			<p class="chat-participants-panel__empty">No participants yet.</p>
+		{/if}
+	</div>
+</section>
+
+<style>
+	.chat-participants-panel {
+		display: flex;
+		height: 100%;
+		min-height: 0;
+		flex-direction: column;
+		background: var(--background, #fff);
+	}
+
+	.chat-participants-panel__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.75rem;
+		border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.1));
+		padding: 0.75rem;
+	}
+
+	.chat-participants-panel__title {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		font-weight: 700;
+	}
+
+	.chat-participants-panel__actions {
+		display: flex;
+		align-items: center;
+		gap: 0.15rem;
+	}
+
+	.chat-participants-panel__list {
+		display: grid;
+		align-content: start;
+		gap: 0.25rem;
+		min-height: 0;
+		overflow-y: auto;
+		padding: 0.75rem;
+	}
+
+	.chat-participants-panel__row {
+		display: grid;
+		grid-template-columns: 2rem minmax(0, 1fr);
+		align-items: center;
+		gap: 0.6rem;
+		padding: 0.5rem;
+	}
+
+	.chat-participants-panel__avatar {
+		display: grid;
+		width: 2rem;
+		height: 2rem;
+		place-items: center;
+		border-radius: 999px;
+		background: var(--muted, rgba(0, 0, 0, 0.06));
+		color: var(--muted-foreground, inherit);
+	}
+
+	.chat-participants-panel__copy {
+		display: grid;
+		min-width: 0;
+		gap: 0.1rem;
+	}
+
+	.chat-participants-panel__copy strong,
+	.chat-participants-panel__copy small {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.chat-participants-panel__copy small {
+		color: var(--muted-foreground, #6b7280);
+		text-transform: capitalize;
+	}
+
+	.chat-participants-panel__empty {
+		margin: 0;
+		padding: 1rem;
+		color: var(--muted-foreground, #6b7280);
+		font-size: 0.875rem;
+		text-align: center;
+	}
+</style>

package/dist/svelte/components/surface/ChatParticipantsPanel.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    title?: string;
+    onClose?: () => void;
+};
+declare const ChatParticipantsPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatParticipantsPanel = ReturnType<typeof ChatParticipantsPanel>;
+export default ChatParticipantsPanel;
+//# sourceMappingURL=ChatParticipantsPanel.svelte.d.ts.map

package/dist/svelte/components/surface/ChatParticipantsPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatParticipantsPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/surface/ChatParticipantsPanel.svelte.ts"],"names":[],"mappings":"AASC,KAAK,gBAAgB,GAAI;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAqEH,QAAA,MAAM,qBAAqB,sDAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/svelte/components/surface/ChatRoomHeader.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	import { useChatSurface } from '../../surface-context.js';
+	const { chatRoomStore } = useChatSurface();
+
+	import type { Snippet } from 'svelte';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+
+
+	let {
+		title,
+		subtitle,
+		icon = 'lucide:message-square',
+		ariaLabel,
+		actionsLabel = 'Conversation actions',
+		titleFallback = 'Chat',
+		extras,
+		inviteEnabled = false,
+		manageToolsEnabled = false,
+		onInvite,
+		onManageTools
+	}: {
+		title?: string | null;
+		subtitle?: string | null;
+		icon?: string | null;
+		ariaLabel?: string;
+		actionsLabel?: string;
+		titleFallback?: string;
+		extras?: Snippet;
+		inviteEnabled?: boolean;
+		manageToolsEnabled?: boolean;
+		onInvite?: () => void | Promise<void>;
+		onManageTools?: () => void | Promise<void>;
+	} = $props();
+
+	const resolvedTitle = $derived(title?.trim() || chatRoomStore.room?.title?.trim() || titleFallback);
+	const resolvedSubtitle = $derived(subtitle?.trim() || null);
+	const resolvedAriaLabel = $derived(ariaLabel ?? `${resolvedTitle} conversation`);
+</script>
+
+<header class="chat-room-header" aria-label={resolvedAriaLabel} data-chat-room-header>
+	<div class="chat-room-header__title">
+		{#if icon}
+			<Icon {icon} class="h-4 w-4" aria-hidden="true" />
+		{/if}
+		<div class="chat-room-header__copy">
+			<span class="chat-room-header__name" title={resolvedTitle}>{resolvedTitle}</span>
+			{#if resolvedSubtitle}
+				<span class="chat-room-header__subtitle" title={resolvedSubtitle}>{resolvedSubtitle}</span>
+			{/if}
+		</div>
+	</div>
+	<div class="chat-room-header__actions" role="group" aria-label={actionsLabel}>
+		{#if extras}
+			{@render extras()}
+		{/if}
+		{#if inviteEnabled && onInvite}
+			<Button type="button" variant="ghost" size="icon" class="h-8 w-8" onclick={onInvite} title="Invite people">
+				<Icon icon="lucide:user-plus" class="h-4 w-4" aria-hidden="true" />
+				<span class="sr-only">Invite people</span>
+			</Button>
+		{/if}
+		{#if manageToolsEnabled && onManageTools}
+			<Button
+				type="button"
+				variant="ghost"
+				size="icon"
+				class="h-8 w-8"
+				onclick={onManageTools}
+				title="Manage AI actions"
+			>
+				<Icon icon="lucide:sliders-horizontal" class="h-4 w-4" aria-hidden="true" />
+				<span class="sr-only">Manage AI actions</span>
+			</Button>
+		{/if}
+	</div>
+</header>
+
+<style>
+	.chat-room-header {
+		display: flex;
+		min-height: 3.5rem;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.1));
+		padding: 0.7rem 0.9rem;
+	}
+
+	.chat-room-header__title,
+	.chat-room-header__actions {
+		display: flex;
+		min-width: 0;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.chat-room-header__title {
+		font-weight: 700;
+	}
+
+	.chat-room-header__copy {
+		display: flex;
+		min-width: 0;
+		flex-direction: column;
+		gap: 0.1rem;
+	}
+
+	.chat-room-header__name,
+	.chat-room-header__subtitle {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.chat-room-header__name {
+		line-height: 1.2;
+	}
+
+	.chat-room-header__subtitle {
+		color: var(--muted-foreground, rgba(0, 0, 0, 0.58));
+		font-size: 0.78rem;
+		font-weight: 500;
+		line-height: 1.15;
+	}
+</style>

package/dist/svelte/components/surface/ChatRoomHeader.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title?: string | null;
+    subtitle?: string | null;
+    icon?: string | null;
+    ariaLabel?: string;
+    actionsLabel?: string;
+    titleFallback?: string;
+    extras?: Snippet;
+    inviteEnabled?: boolean;
+    manageToolsEnabled?: boolean;
+    onInvite?: () => void | Promise<void>;
+    onManageTools?: () => void | Promise<void>;
+};
+declare const ChatRoomHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatRoomHeader = ReturnType<typeof ChatRoomHeader>;
+export default ChatRoomHeader;
+//# sourceMappingURL=ChatRoomHeader.svelte.d.ts.map

package/dist/svelte/components/surface/ChatRoomHeader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatRoomHeader.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/surface/ChatRoomHeader.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIrC,KAAK,gBAAgB,GAAI;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,aAAa,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC3C,CAAC;AAgEH,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/surface/ChatRuntimeLoader.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+	import { getChatSurface, type ChatSurfaceClient } from '../../surface-client.svelte.js';
+
+	import { onDestroy, onMount, type Snippet } from 'svelte';
+	import { getLogger } from '@vibesdotdev/logging';
+	import { settle, settleNow, valueFreeFailure } from '@vibesdotdev/kernel';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte';
+	import { getVibesChatClient } from '@vibesdotdev/chat/client';
+	import { ensureChatRuntimeRegistered } from '../../runtime.js';
+	import { ensureChatToolWidgetsRegistered } from '../../tool-widgets.js';
+
+	import { chatFailureMessage } from '../../../error-notice.js';
+	import { applyConfiguredChatUiPreferences } from '../../chat-ui-preferences.js';
+	import type { ChatRuntimeLoaderState, ChatSurfaceUser } from './types.js';
+	import type { ChatClient } from '@vibesdotdev/chat/client/contracts';
+	import type { ChatClientOwnership } from '../../stores/chat/svelte/chat-client-ownership.js';
+
+	let {
+		roomId = null,
+		currentUser = null,
+		clientFactory,
+		clientOwnership = 'owned',
+		disposeOnDestroy = false,
+		children,
+		onError = (_error: Error) => {}
+	}: {
+		roomId?: string | null;
+		currentUser?: ChatSurfaceUser | null;
+		clientFactory?: () => ChatClient | Promise<ChatClient>;
+		clientOwnership?: ChatClientOwnership;
+		disposeOnDestroy?: boolean;
+		children?: Snippet<[ChatRuntimeLoaderState]>;
+		onError?: (error: Error) => void;
+	} = $props();
+
+	const runtime = getRuntimeSvelteContext();
+	let mounted = false;
+	let loading = $state(false);
+	let error = $state<Error | null>(null);
+	let openedRoomKey: string | null = null;
+
+	let surface = $state<ChatSurfaceClient | null>(null);
+ let releaseSurface: (() => void) | undefined;
+ const ready = $derived(Boolean(surface?.runtimeChatStore.ready && !loading && !error));
+
+	function seedCurrentUser(user: ChatSurfaceUser | null) {
+		if (!surface) return;
+		const userId = user?.id;
+		if (!userId) return;
+		surface!.chatParticipantsStore.currentUserId = userId;
+		if (surface!.chatParticipantsStore.users.has(userId)) return;
+		surface!.chatParticipantsStore.users.set(userId, {
+			id: userId,
+			email: user.email ?? null,
+			displayName: user.displayName ?? user.name ?? user.email ?? 'You',
+			avatarUrl: user.avatarUrl ?? user.image ?? null,
+			role: 'owner'
+		});
+	}
+
+	async function openRoom(nextRoomId: string | null) {
+		loading = true;
+		error = null;
+		const settled = await settle(async () => {
+			const loadedRuntime = await runtime.load();
+			await ensureChatRuntimeRegistered(loadedRuntime);
+   if (!mounted) return;
+   surface = getChatSurface(loadedRuntime);
+   releaseSurface ??= surface.retain(disposeOnDestroy);
+   seedCurrentUser(currentUser);
+			const widgetResult = await settle(() => ensureChatToolWidgetsRegistered(loadedRuntime));
+			if (!widgetResult.ok) {
+				const failure = valueFreeFailure(widgetResult.cause);
+				getLogger('chat.svelte.runtime-loader', loadedRuntime).warn(
+					'Chat tool widget admission failed',
+					{ error: failure.reason ?? failure.name }
+				);
+			}
+			if (!mounted) return;
+			if (!surface!.runtimeChatStore.ready && !surface!.runtimeChatStore.client) {
+				if (clientFactory) {
+					surface!.runtimeChatStore.setClientFactory(clientFactory, clientOwnership);
+				} else {
+					surface!.runtimeChatStore.setClientFactory(() => getVibesChatClient(loadedRuntime), 'borrowed');
+				}
+			}
+			await surface!.runtimeChatStore.load();
+			if (!mounted) return;
+			await applyConfiguredChatUiPreferences(loadedRuntime);
+			if (!mounted) return;
+			// The store also drives roomId. Do not replay its completed navigation:
+			// reopening null would erase the workspace/agent setup seeded for New.
+			if (roomId === nextRoomId && (surface!.runtimeChatStore.activeRoom?.id ?? null) !== nextRoomId) {
+				await surface!.runtimeChatStore.openRoom(nextRoomId);
+			}
+		});
+		loading = false;
+		if (!settled.ok) {
+			const failure = valueFreeFailure(settled.cause);
+			const normalized = new Error(chatFailureMessage(settled.cause, 'Chat could not open.'));
+			if (runtime.runtime) {
+				settleNow(() => {
+					getLogger('chat.svelte.runtime-loader', runtime.runtime!).warn('chat could not open', {
+						reason: failure.reason ?? failure.name ?? 'Chat could not open'
+					});
+				});
+			}
+			error = normalized;
+			onError(normalized);
+		}
+	}
+
+	onMount(() => {
+		mounted = true;
+	});
+
+	onDestroy(() => {
+		mounted = false;
+		releaseSurface?.();
+		releaseSurface = undefined;
+	});
+
+	$effect(() => {
+		seedCurrentUser(currentUser);
+	});
+
+	$effect(() => {
+		if (!mounted) return;
+		const nextKey = roomId ?? '__new__';
+		if (openedRoomKey === nextKey) return;
+		openedRoomKey = nextKey;
+		void openRoom(roomId);
+	});
+</script>
+
+{#if children && surface}
+	{@render children({ ready, loading, error, roomId })}
+{/if}

package/dist/svelte/components/surface/ChatRuntimeLoader.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type Snippet } from 'svelte';
+import type { ChatRuntimeLoaderState, ChatSurfaceUser } from './types.ts';
+import type { ChatClient } from '@vibesdotdev/chat/client/contracts';
+import type { ChatClientOwnership } from '../../stores/chat/svelte/chat-client-ownership.ts';
+type $$ComponentProps = {
+    roomId?: string | null;
+    currentUser?: ChatSurfaceUser | null;
+    clientFactory?: () => ChatClient | Promise<ChatClient>;
+    clientOwnership?: ChatClientOwnership;
+    disposeOnDestroy?: boolean;
+    children?: Snippet<[ChatRuntimeLoaderState]>;
+    onError?: (error: Error) => void;
+};
+declare const ChatRuntimeLoader: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatRuntimeLoader = ReturnType<typeof ChatRuntimeLoader>;
+export default ChatRuntimeLoader;
+//# sourceMappingURL=ChatRuntimeLoader.svelte.d.ts.map

package/dist/svelte/components/surface/ChatRuntimeLoader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatRuntimeLoader.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/surface/ChatRuntimeLoader.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAsB,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAU1D,OAAO,KAAK,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mDAAmD,CAAC;AAE5F,KAAK,gBAAgB,GAAI;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IACvD,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACjC,CAAC;AAsIH,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/components/surface/ChatSurfaceBoundary.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { onMount, type Snippet } from 'svelte';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte';
+	import { settle } from '@vibesdotdev/kernel';
+	import { ensureChatRuntimeRegistered } from '../../runtime.js';
+	import { chatFailureMessage } from '../../../error-notice.js';
+
+	let { children }: { children: Snippet } = $props();
+	const context = getRuntimeSvelteContext();
+	let ready = $state(false);
+	let error = $state<string | null>(null);
+
+	onMount(() => {
+		let retired = false;
+		void settle(async () => {
+			const runtime = await context.load();
+			await ensureChatRuntimeRegistered(runtime);
+		}).then((result) => {
+			if (retired) return;
+			if (result.ok) ready = true;
+			else error = chatFailureMessage(result.cause, 'Chat could not open.');
+		});
+		return () => { retired = true; };
+	});
+</script>
+
+{#if ready}
+	{@render children()}
+{:else if error}
+	<p role="alert">{error}</p>
+{/if}

package/dist/svelte/components/surface/ChatSurfaceBoundary.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const ChatSurfaceBoundary: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatSurfaceBoundary = ReturnType<typeof ChatSurfaceBoundary>;
+export default ChatSurfaceBoundary;
+//# sourceMappingURL=ChatSurfaceBoundary.svelte.d.ts.map

package/dist/svelte/components/surface/ChatSurfaceBoundary.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatSurfaceBoundary.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/surface/ChatSurfaceBoundary.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAM9C,KAAK,gBAAgB,GAAI;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;AAmChD,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}