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

package/dist/svelte/components/conversations/CreateFolderDialog.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { useChatSurface } from '../../surface-context.js';
+	const { conversationsStore } = useChatSurface();
+
+	import * as Dialog from '@vibesdotdev/kit/components/ui/dialog';
+	import * as Alert from '@vibesdotdev/kit/components/ui/alert';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Label } from '@vibesdotdev/kit/components/ui/label';
+	import { settle, valueFreeFailure } from '@vibesdotdev/kernel';
+
+	let { open = $bindable(false), parentFolderId = null, onCreated = () => {} }: {
+		open?: boolean;
+		parentFolderId?: string | null;
+		onCreated?: (folder: { id: string; name: string }) => void | Promise<void>;
+	} = $props();
+	const inputId = $props.id();
+	let name = $state('');
+	let creating = $state(false);
+	let created = $state(false);
+	let error = $state<string | null>(null);
+	$effect(() => { if (!open) { name = ''; error = null; created = false; } });
+	async function create() {
+		if (creating || created || !name.trim()) return;
+		creating = true;
+		error = null;
+		try {
+			const folder = await conversationsStore.createFolder(name.trim(), parentFolderId);
+			if (!folder) {
+				error = conversationsStore.error ?? 'Another folder change is still saving. Try again.';
+				return;
+			}
+			created = true;
+			const settled = await settle(async () => {
+				await onCreated(folder);
+			});
+			if (settled.ok) {
+				open = false;
+			} else {
+				const failure = valueFreeFailure(settled.cause);
+				error = `Folder created, but the follow-up failed: ${failure.reason ?? 'Please retry the next action.'}`;
+			}
+		} finally {
+			creating = false;
+		}
+	}
+</script>
+
+<Dialog.Root {open} onOpenChange={(value) => { if (!creating) open = value; }}>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>New folder</Dialog.Title>
+			<Dialog.Description>Create a folder to organize your conversations.</Dialog.Description>
+		</Dialog.Header>
+		<form onsubmit={(event) => { event.preventDefault(); void create(); }} class="space-y-4">
+			<div class="space-y-2">
+				<Label for={inputId}>Folder name</Label>
+				<Input id={inputId} bind:value={name} placeholder="My conversations" maxlength={255} disabled={creating || created} />
+			</div>
+			{#if error}<Alert.Root variant="destructive"><Alert.Description>{error}</Alert.Description></Alert.Root>{/if}
+			<Dialog.Footer>
+				<Button type="button" variant="outline" onclick={() => open = false} disabled={creating}>{created ? 'Close' : 'Cancel'}</Button>
+				{#if !created}<Button type="submit" disabled={creating || conversationsStore.busy || !name.trim()}>{creating ? 'Creating…' : 'Create folder'}</Button>{/if}
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

package/dist/svelte/components/conversations/CreateFolderDialog.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    open?: boolean;
+    parentFolderId?: string | null;
+    onCreated?: (folder: {
+        id: string;
+        name: string;
+    }) => void | Promise<void>;
+};
+declare const CreateFolderDialog: import("svelte").Component<$$ComponentProps, {}, "open">;
+type CreateFolderDialog = ReturnType<typeof CreateFolderDialog>;
+export default CreateFolderDialog;
+//# sourceMappingURL=CreateFolderDialog.svelte.d.ts.map

package/dist/svelte/components/conversations/CreateFolderDialog.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateFolderDialog.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/conversations/CreateFolderDialog.svelte.ts"],"names":[],"mappings":"AAYC,KAAK,gBAAgB,GAAI;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC3E,CAAC;AAmEH,QAAA,MAAM,kBAAkB,0DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/svelte/components/conversations/types.d.ts

@@ -0,0 +1,18 @@
+export type ConvNode = {
+    kind: 'folder';
+    folderId: string;
+} | {
+    kind: 'room';
+    roomId: string;
+    folderId: string | null;
+} | {
+    kind: 'unfiled';
+};
+export interface TreeNode<T = ConvNode> {
+    id: string;
+    label: string;
+    data?: T;
+    children?: TreeNode<T>[];
+    isContainer?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/svelte/components/conversations/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/conversations/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GACjB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GACpC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,GACzD;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AACvB,MAAM,WAAW,QAAQ,CAAC,CAAC,GAAG,QAAQ;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/svelte/components/conversations/types.js

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

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

@@ -0,0 +1,45 @@
+/**
+ * @vibesdotdev/chat/svelte/components
+ *
+ * Chat-domain Svelte UI components. These compose vibeskit primitives
+ * (Button, Card, Skeleton, MarkdownRenderer, …) with chat-specific
+ * presentation logic. Generic markdown rendering lives in
+ * `@vibesdotdev/kit/components/markdown` — import it from there.
+ */
+export { default as ChatMessage } from './ChatMessage.svelte';
+export { default as InboxMixedFeed } from './InboxMixedFeed.svelte';
+export { default as InboxSourceConversation } from './InboxSourceConversation.svelte';
+export { default as ChatMessageAttachments } from './ChatMessageAttachments.svelte';
+export { default as ChatMessageBubble } from './ChatMessageBubble.svelte';
+export { default as ChatMessageContent } from './ChatMessageContent.svelte';
+export { default as ChatMessageReactions } from './ChatMessageReactions.svelte';
+export { default as ChatWorkspace } from './ChatWorkspace.svelte';
+export { default as ChatExperienceHost } from './ChatExperienceHost.svelte';
+export { default as RoomStageChatInterface } from './RoomStageChatInterface.svelte';
+export { default as ImageGenerationToolCard } from './ImageGenerationToolCard.svelte';
+export { default as ChatModeSelector } from './ChatModeSelector.svelte';
+export { default as ChatMessageSkeleton } from './ChatMessageSkeleton.svelte';
+export { default as ChatBackgroundPanel } from './ChatBackgroundPanel.svelte';
+export { default as ChatMessageStatusBadge } from './ChatMessageStatusBadge.svelte';
+export { default as ChatMessageTimestamp } from './ChatMessageTimestamp.svelte';
+export { default as ChatSessionStatus } from './ChatSessionStatus.svelte';
+export { default as ChatConnectionStatus } from './indicators/ChatConnectionStatus.svelte';
+export { default as StreamingIndicator } from './indicators/StreamingIndicator.svelte';
+export { default as NextStepSkeleton } from './indicators/NextStepSkeleton.svelte';
+export { default as TypingIndicator } from './indicators/TypingIndicator.svelte';
+export { default as RuntimeChatActionBar } from './runtime/RuntimeChatActionBar.svelte';
+export { default as RuntimeChatAttachments } from './runtime/RuntimeChatAttachments.svelte';
+export { default as RuntimeChatCommandMenu } from './runtime/RuntimeChatCommandMenu.svelte';
+export { default as RuntimeChatComposer } from './runtime/RuntimeChatComposer.svelte';
+export { default as RuntimeChatDialogHost } from './runtime/RuntimeChatDialogHost.svelte';
+export { default as RuntimeChatInput } from './runtime/RuntimeChatInput.svelte';
+export { default as RuntimeChatModeControl } from './runtime/RuntimeChatModeControl.svelte';
+export { default as RuntimeChatMessages } from './runtime/RuntimeChatMessages.svelte';
+export { ChatComposerPanel, ChatConversationSplit, ChatConversationPane, ChatConversationSidebar, ChatMessageViewport, ChatNewConversationEmptyState, ChatParticipantsPanel, ChatRoomHeader, ChatRuntimeLoader, ChatSurfaceFrame, ChatWorkspaceFrame, type ChatRuntimeLoaderState, type ChatSurfaceFrameSnippets, type ChatSurfacePanelControls, type ChatSurfaceUser } from './surface/index.ts';
+export type { RuntimeChatAction, RuntimeChatCommandMenuItem, RuntimeChatParticipantOption } from './runtime/types.ts';
+export type { RuntimeChatAfterSend, RuntimeChatAfterSendContext, RuntimeChatBeforeSend, RuntimeChatBeforeSendContext, RuntimeChatInputSnippets, RuntimeChatSendBlocked, RuntimeChatSendBlockedContext, RuntimeChatSendBlockedReason } from './runtime/RuntimeChatInput.types.ts';
+export * from './utils/message-utils.ts';
+export * from './utils/reactions.ts';
+export * from './utils/tool-calls.ts';
+export * from './utils/types.ts';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/index.ts"],"names":[],"mappings":"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"}

package/dist/svelte/components/index.js

@@ -0,0 +1,42 @@
+/**
+ * @vibesdotdev/chat/svelte/components
+ *
+ * Chat-domain Svelte UI components. These compose vibeskit primitives
+ * (Button, Card, Skeleton, MarkdownRenderer, …) with chat-specific
+ * presentation logic. Generic markdown rendering lives in
+ * `@vibesdotdev/kit/components/markdown` — import it from there.
+ */
+export { default as ChatMessage } from './ChatMessage.svelte';
+export { default as InboxMixedFeed } from './InboxMixedFeed.svelte';
+export { default as InboxSourceConversation } from './InboxSourceConversation.svelte';
+export { default as ChatMessageAttachments } from './ChatMessageAttachments.svelte';
+export { default as ChatMessageBubble } from './ChatMessageBubble.svelte';
+export { default as ChatMessageContent } from './ChatMessageContent.svelte';
+export { default as ChatMessageReactions } from './ChatMessageReactions.svelte';
+export { default as ChatWorkspace } from './ChatWorkspace.svelte';
+export { default as ChatExperienceHost } from './ChatExperienceHost.svelte';
+export { default as RoomStageChatInterface } from './RoomStageChatInterface.svelte';
+export { default as ImageGenerationToolCard } from './ImageGenerationToolCard.svelte';
+export { default as ChatModeSelector } from './ChatModeSelector.svelte';
+export { default as ChatMessageSkeleton } from './ChatMessageSkeleton.svelte';
+export { default as ChatBackgroundPanel } from './ChatBackgroundPanel.svelte';
+export { default as ChatMessageStatusBadge } from './ChatMessageStatusBadge.svelte';
+export { default as ChatMessageTimestamp } from './ChatMessageTimestamp.svelte';
+export { default as ChatSessionStatus } from './ChatSessionStatus.svelte';
+export { default as ChatConnectionStatus } from './indicators/ChatConnectionStatus.svelte';
+export { default as StreamingIndicator } from './indicators/StreamingIndicator.svelte';
+export { default as NextStepSkeleton } from './indicators/NextStepSkeleton.svelte';
+export { default as TypingIndicator } from './indicators/TypingIndicator.svelte';
+export { default as RuntimeChatActionBar } from './runtime/RuntimeChatActionBar.svelte';
+export { default as RuntimeChatAttachments } from './runtime/RuntimeChatAttachments.svelte';
+export { default as RuntimeChatCommandMenu } from './runtime/RuntimeChatCommandMenu.svelte';
+export { default as RuntimeChatComposer } from './runtime/RuntimeChatComposer.svelte';
+export { default as RuntimeChatDialogHost } from './runtime/RuntimeChatDialogHost.svelte';
+export { default as RuntimeChatInput } from './runtime/RuntimeChatInput.svelte';
+export { default as RuntimeChatModeControl } from './runtime/RuntimeChatModeControl.svelte';
+export { default as RuntimeChatMessages } from './runtime/RuntimeChatMessages.svelte';
+export { ChatComposerPanel, ChatConversationSplit, ChatConversationPane, ChatConversationSidebar, ChatMessageViewport, ChatNewConversationEmptyState, ChatParticipantsPanel, ChatRoomHeader, ChatRuntimeLoader, ChatSurfaceFrame, ChatWorkspaceFrame } from "./surface/index.js";
+export * from "./utils/message-utils.js";
+export * from "./utils/reactions.js";
+export * from "./utils/tool-calls.js";
+export * from "./utils/types.js";

package/dist/svelte/components/indicators/ChatConnectionStatus.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { useChatSurface } from '../../surface-context.js';
+	const { chatRealtimeStore } = useChatSurface();
+
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { Spinner } from '@vibesdotdev/kit/components/ui/spinner';
+
+
+	type Props = {
+		class?: string;
+		hideWhenConnected?: boolean;
+	};
+
+	let { class: className = '', hideWhenConnected = true }: Props = $props();
+
+	const status = $derived(chatRealtimeStore.connectionStatus ?? 'disconnected');
+	const isConnected = $derived(status === 'connected');
+	const isConnecting = $derived(status === 'connecting' || status === 'reconnecting');
+	const visible = $derived(!hideWhenConnected || !isConnected);
+	const label = $derived(isConnecting ? 'Connecting...' : isConnected ? 'Connected' : 'Disconnected');
+	const statusClass = $derived(
+		[
+			'chat-connection-status',
+			isConnected ? 'chat-connection-status--connected' : '',
+			isConnecting ? 'chat-connection-status--connecting' : '',
+			!isConnected && !isConnecting ? 'chat-connection-status--disconnected' : '',
+			className
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+{#if visible}
+	<div class={statusClass} role="status" aria-live="polite">
+		{#if isConnecting}
+			<Spinner class="size-3" />
+		{:else if isConnected}
+			<Icon icon="lucide:wifi" class="size-3" />
+		{:else}
+			<Icon icon="lucide:wifi-off" class="size-3" />
+		{/if}
+		<span>{label}</span>
+	</div>
+{/if}
+
+<style lang="postcss">
+	@reference "tailwindcss";
+	@reference "@vibesdotdev/kit/styles.css";
+
+	.chat-connection-status {
+		@apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium;
+	}
+
+	.chat-connection-status--connected {
+		@apply bg-success/10 text-success;
+	}
+
+	.chat-connection-status--connecting {
+		@apply bg-warning/10 text-warning;
+	}
+
+	.chat-connection-status--disconnected {
+		@apply bg-destructive/10 text-destructive;
+	}
+</style>

package/dist/svelte/components/indicators/ChatConnectionStatus.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    class?: string;
+    hideWhenConnected?: boolean;
+};
+declare const ChatConnectionStatus: import("svelte").Component<Props, {}, "">;
+type ChatConnectionStatus = ReturnType<typeof ChatConnectionStatus>;
+export default ChatConnectionStatus;
+//# sourceMappingURL=ChatConnectionStatus.svelte.d.ts.map

package/dist/svelte/components/indicators/ChatConnectionStatus.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatConnectionStatus.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/indicators/ChatConnectionStatus.svelte.ts"],"names":[],"mappings":"AAUC,KAAK,KAAK,GAAG;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AA8CH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/svelte/components/indicators/NextStepSkeleton.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	/**
+	 * NextStepSkeleton — an optimistic "the next step is coming" placeholder shown
+	 * beneath an agent's existing tool calls / responses while it is still
+	 * answering but nothing is currently live (between tool calls, after a tool
+	 * settled and before the next chunk arrives). It keeps the column from ever
+	 * looking frozen during long tool-running stretches.
+	 *
+	 * Shaped like a forming tool card (icon tile + two lines) with the shared
+	 * breathing dots, so it reads as "a step is materialising" rather than a
+	 * generic loader. Pure CSS, opacity-only animation, themed via design tokens,
+	 * and fully disabled under reduced-motion.
+	 */
+	import StreamingIndicator from './StreamingIndicator.svelte';
+</script>
+
+<div class="next-step" role="status" aria-label="Preparing the next step">
+	<span class="next-step__icon"></span>
+	<span class="next-step__body">
+		<span class="next-step__bar next-step__bar--title"></span>
+		<span class="next-step__bar next-step__bar--detail"></span>
+	</span>
+	<span class="next-step__dots">
+		<StreamingIndicator size="small" />
+	</span>
+</div>
+
+<style>
+	.next-step {
+		display: grid;
+		grid-template-columns: 1.75rem minmax(0, 1fr) auto;
+		align-items: center;
+		gap: 0.65rem;
+		padding: 0.55rem 0.7rem;
+		border: 1px dashed var(--border, rgba(0, 0, 0, 0.12));
+		border-radius: 0.75rem;
+		background: color-mix(in srgb, var(--muted, #f4f4f5) 35%, transparent);
+	}
+
+	.next-step__icon {
+		width: 1.75rem;
+		height: 1.75rem;
+		border-radius: 0.5rem;
+	}
+
+	.next-step__body {
+		display: grid;
+		gap: 0.4rem;
+		min-width: 0;
+	}
+
+	.next-step__bar {
+		height: 0.55rem;
+		border-radius: 0.35rem;
+	}
+
+	.next-step__bar--title {
+		width: 38%;
+	}
+
+	.next-step__bar--detail {
+		width: 70%;
+	}
+
+	/* The shimmer surfaces — token-tinted blocks that breathe in opacity (a
+	   composited property), the same primitive as the kit Skeleton but theme-token
+	   driven so it stays correct in a feature package's CSS context. */
+	.next-step__icon,
+	.next-step__bar {
+		background: color-mix(in srgb, var(--muted-foreground, #71717a) 22%, transparent);
+		animation: next-step-pulse 1.6s ease-in-out infinite;
+	}
+
+	.next-step__bar--detail {
+		animation-delay: 0.2s;
+	}
+
+	@keyframes next-step-pulse {
+		0%,
+		100% {
+			opacity: 0.4;
+		}
+		50% {
+			opacity: 0.8;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.next-step__icon,
+		.next-step__bar {
+			animation: none;
+			opacity: 0.6;
+		}
+	}
+</style>

package/dist/svelte/components/indicators/NextStepSkeleton.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NextStepSkeleton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NextStepSkeleton = InstanceType<typeof NextStepSkeleton>;
+export default NextStepSkeleton;
+//# sourceMappingURL=NextStepSkeleton.svelte.d.ts.map

package/dist/svelte/components/indicators/NextStepSkeleton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NextStepSkeleton.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/indicators/NextStepSkeleton.svelte.ts"],"names":[],"mappings":"AAqCA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,gBAAgB;;kBAA+E,CAAC;AACpF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAChE,eAAe,gBAAgB,CAAC"}

package/dist/svelte/components/indicators/StreamingIndicator.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	interface Props {
+		size?: 'small' | 'medium' | 'large';
+		label?: string;
+	}
+
+	let { size = 'medium', label = 'Streaming response' }: Props = $props();
+
+	const dotSizes = {
+		small: 'w-1.5 h-1.5',
+		medium: 'w-2 h-2',
+		large: 'w-2.5 h-2.5'
+	};
+
+	const gapSizes = {
+		small: 'gap-1',
+		medium: 'gap-1.5',
+		large: 'gap-2'
+	};
+</script>
+
+<div class="streaming-indicator {gapSizes[size]}" role="status" aria-label={label}>
+	<span class="dot {dotSizes[size]} dot-1" aria-hidden="true"></span>
+	<span class="dot {dotSizes[size]} dot-2" aria-hidden="true"></span>
+	<span class="dot {dotSizes[size]} dot-3" aria-hidden="true"></span>
+</div>
+
+<style lang="postcss">
+	@reference "tailwindcss";
+	@reference "@vibesdotdev/kit/styles.css";
+	.streaming-indicator {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.dot {
+		background-color: var(--color-primary, #007bff);
+		border-radius: 50%;
+		animation: streaming 1.4s infinite ease-in-out both;
+	}
+
+	.dot-1 {
+		animation-delay: -0.32s;
+	}
+
+	.dot-2 {
+		animation-delay: -0.16s;
+	}
+
+	@keyframes streaming {
+		0%,
+		80%,
+		100% {
+			opacity: 0.25;
+			transform: scale(1);
+		}
+		40% {
+			opacity: 1;
+			transform: scale(1.2);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.dot {
+			animation: none;
+		}
+
+		.dot-1 {
+			opacity: 0.6;
+		}
+
+		.dot-2 {
+			opacity: 0.8;
+		}
+
+		.dot-3 {
+			opacity: 1;
+		}
+	}
+</style>

package/dist/svelte/components/indicators/StreamingIndicator.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    size?: 'small' | 'medium' | 'large';
+    label?: string;
+}
+declare const StreamingIndicator: import("svelte").Component<Props, {}, "">;
+type StreamingIndicator = ReturnType<typeof StreamingIndicator>;
+export default StreamingIndicator;
+//# sourceMappingURL=StreamingIndicator.svelte.d.ts.map

package/dist/svelte/components/indicators/StreamingIndicator.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StreamingIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/indicators/StreamingIndicator.svelte.ts"],"names":[],"mappings":"AAGC,UAAU,KAAK;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AA6BF,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/svelte/components/indicators/TypingIndicator.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import StreamingIndicator from './StreamingIndicator.svelte';
+	import type { ChatTypingParticipant } from '../utils/types.js';
+
+	interface Props {
+		participants?: ChatTypingParticipant[];
+	}
+
+	let { participants = [] }: Props = $props();
+	let prefersReducedMotion = $state(false);
+
+	onMount(() => {
+		prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+	});
+
+	function getTypingText(agents: ChatTypingParticipant[]): string {
+		if (agents.length === 0) return '';
+
+		const names = agents.map((agent) => agent.alias || agent.name);
+
+		if (names.length === 1) {
+			return `${names[0]} is typing`;
+		}
+		if (names.length === 2) {
+			return `${names[0]} and ${names[1]} are typing`;
+		}
+
+		const othersCount = names.length - 2;
+		return `${names[0]}, ${names[1]} and ${othersCount} ${othersCount === 1 ? 'other' : 'others'} are typing`;
+	}
+
+	const typingText = $derived(getTypingText(participants));
+</script>
+
+{#if participants.length > 0}
+	<div class="my-2 flex w-fit items-center gap-2 rounded-full border border-border/60 bg-muted/60 px-3 py-1.5 text-[0.8125rem] text-muted-foreground" transition:fade={{ duration: prefersReducedMotion ? 0 : 160 }}>
+		<StreamingIndicator size="small" />
+		<span class="italic pr-0.5">{typingText}</span>
+	</div>
+{/if}

package/dist/svelte/components/indicators/TypingIndicator.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ChatTypingParticipant } from '../utils/types.js';
+interface Props {
+    participants?: ChatTypingParticipant[];
+}
+declare const TypingIndicator: import("svelte").Component<Props, {}, "">;
+type TypingIndicator = ReturnType<typeof TypingIndicator>;
+export default TypingIndicator;
+//# sourceMappingURL=TypingIndicator.svelte.d.ts.map

package/dist/svelte/components/indicators/TypingIndicator.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypingIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/indicators/TypingIndicator.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAG9D,UAAU,KAAK;IACd,YAAY,CAAC,EAAE,qBAAqB,EAAE,CAAC;CACvC;AA2CF,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/relative-time-tick.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Pure ref-counted timer lifecycle — no Svelte runes.
+ *
+ * Extracted from `relative-time-tick.svelte.ts` so the subscription/timer
+ * semantics can be tested behaviorally with `bun test`. The `.svelte.ts`
+ * wrapper adds `$state` for reactivity and delegates to this module.
+ *
+ * Contract:
+ * - The timer starts when the first subscriber joins (count 0 → 1).
+ * - The timer stops when the last subscriber leaves (count 1 → 0).
+ * - Multiple subscribers share a single timer.
+ * - The `onTick` callback fires on each interval.
+ */
+export interface RefCountedTimer {
+    /** Subscribe to the timer. Returns an unsubscribe function. */
+    subscribe: () => () => void;
+    /** Current subscriber count (for testing/inspection). */
+    subscriberCount: () => number;
+    /** Whether the timer is currently running. */
+    isRunning: () => boolean;
+}
+export declare function createRefCountedTimer(intervalMs: number, onTick: () => void, createInterval?: (callback: () => void, ms: number) => ReturnType<typeof setInterval>, clearTimer?: (id: ReturnType<typeof setInterval>) => void): RefCountedTimer;
+//# sourceMappingURL=relative-time-tick.d.ts.map

package/dist/svelte/components/relative-time-tick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-time-tick.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/relative-time-tick.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,MAAM,WAAW,eAAe;IAC/B,+DAA+D;IAC/D,SAAS,EAAE,MAAM,MAAM,IAAI,CAAC;IAC5B,yDAAyD;IACzD,eAAe,EAAE,MAAM,MAAM,CAAC;IAC9B,8CAA8C;IAC9C,SAAS,EAAE,MAAM,OAAO,CAAC;CACzB;AAED,wBAAgB,qBAAqB,CACpC,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,MAAM,IAAI,EAClB,cAAc,GAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,EAAE,EAAE,MAAM,KAAK,UAAU,CAAC,OAAO,WAAW,CAAe,EAClG,UAAU,GAAE,CAAC,EAAE,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,KAAK,IAAoB,GACtE,eAAe,CA+BjB"}

package/dist/svelte/components/relative-time-tick.js

@@ -0,0 +1,45 @@
+/**
+ * Pure ref-counted timer lifecycle — no Svelte runes.
+ *
+ * Extracted from `relative-time-tick.svelte.ts` so the subscription/timer
+ * semantics can be tested behaviorally with `bun test`. The `.svelte.ts`
+ * wrapper adds `$state` for reactivity and delegates to this module.
+ *
+ * Contract:
+ * - The timer starts when the first subscriber joins (count 0 → 1).
+ * - The timer stops when the last subscriber leaves (count 1 → 0).
+ * - Multiple subscribers share a single timer.
+ * - The `onTick` callback fires on each interval.
+ */
+export function createRefCountedTimer(intervalMs, onTick, createInterval = setInterval, clearTimer = clearInterval) {
+    let count = 0;
+    let intervalId = null;
+    function startTimer() {
+        if (intervalId !== null)
+            return;
+        intervalId = createInterval(onTick, intervalMs);
+    }
+    function stopTimer() {
+        if (intervalId === null)
+            return;
+        clearTimer(intervalId);
+        intervalId = null;
+    }
+    return {
+        subscribe() {
+            count += 1;
+            startTimer();
+            return () => {
+                count = Math.max(0, count - 1);
+                if (count === 0)
+                    stopTimer();
+            };
+        },
+        subscriberCount() {
+            return count;
+        },
+        isRunning() {
+            return intervalId !== null;
+        }
+    };
+}

package/dist/svelte/components/relative-time-tick.svelte.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Shared relative-time tick — a single 30s timer that all ChatMessageTimestamp
+ * instances subscribe to, instead of each creating its own setInterval.
+ *
+ * The tick increments a counter on an interval; components read the counter
+ * in a $derived to re-evaluate their relative-time formatting. The timer
+ * starts when the first subscriber mounts and stops when the last unmounts.
+ *
+ * Ref-counting and timer lifecycle are delegated to `createRefCountedTimer`
+ * (pure, tested with bun test). This file adds `$state` for reactivity.
+ */
+/** Subscribe to the shared tick. Returns an unsubscribe function. */
+export declare function subscribeRelativeTimeTick(): () => void;
+/** Read the current tick value. Reactive in a $derived context. */
+export declare function getRelativeTimeTick(): number;
+//# sourceMappingURL=relative-time-tick.svelte.d.ts.map

package/dist/svelte/components/relative-time-tick.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-time-tick.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/relative-time-tick.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAYH,qEAAqE;AACrE,wBAAgB,yBAAyB,IAAI,MAAM,IAAI,CAEtD;AAED,mEAAmE;AACnE,wBAAgB,mBAAmB,IAAI,MAAM,CAE5C"}