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

package/dist/svelte/components/ChatModeSelector.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+	/**
+	 * ChatModeSelector — runtime-backed selector for chat modes. It merges
+	 * runtime `chat/mode` descriptors with optional `chat.modes` config entries.
+	 */
+	import { onMount } from 'svelte';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte';
+	import {
+		Select,
+		SelectContent,
+		SelectItem,
+		SelectTrigger,
+		SelectValue
+	} from '@vibesdotdev/kit/components/ui/select';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { settle } from '@vibesdotdev/kernel';
+	import {
+		resolveChatModeOptions,
+		type ChatModeOption
+	} from '../chat-modes.js';
+
+	type Props = {
+		/** Currently selected mode id. A null value displays the default Chat mode when present. */
+		value?: string | null;
+		/** Called when the user picks a mode. */
+		onChange?: (modeId: string | null) => void;
+		/** Optional styling override for the trigger. */
+		class?: string;
+		/** Trigger size. */
+		size?: 'sm' | 'default';
+		/** When true, renders the compact variant used in status bars. */
+		compact?: boolean;
+	};
+
+	let {
+		value = $bindable(null),
+		onChange,
+		class: className,
+		size = 'default',
+		compact = false
+	}: Props = $props();
+
+	let modes = $state<ChatModeOption[]>([]);
+	const runtimeStore = getRuntimeSvelteContext();
+	let loading = $state(true);
+	let error = $state<Error | null>(null);
+
+	const NONE_VALUE = '__none__';
+
+	async function loadModes() {
+		loading = true;
+		error = null;
+		const settled = await settle(async () => {
+			const runtime = await runtimeStore.load();
+			return await resolveChatModeOptions(runtime);
+		});
+		if (settled.ok) {
+			modes = settled.value;
+		} else {
+			error = settled.cause instanceof Error ? settled.cause : new Error(String(settled.cause));
+			modes = [];
+		}
+		loading = false;
+	}
+
+	onMount(loadModes);
+
+	function handleValueChange(next: string) {
+		const selected = next === NONE_VALUE ? null : next;
+		value = selected;
+		onChange?.(selected);
+	}
+
+	function isIconName(icon: string | undefined): icon is string {
+		return typeof icon === 'string' && /^[a-z0-9-]+:[a-z0-9-]+$/i.test(icon);
+	}
+
+	const hasModes = $derived(modes.length > 0);
+	const defaultModeId = $derived(
+		modes.find((mode) => mode.id === 'chat')?.id ?? modes[0]?.id ?? null
+	);
+	const selectedValue = $derived.by(() => {
+		if (value && modes.some((mode) => mode.id === value)) return value;
+		return defaultModeId ?? NONE_VALUE;
+	});
+	const activeMode = $derived(modes.find((mode) => mode.id === selectedValue) ?? null);
+</script>
+
+{#snippet modeIcon(icon: string | undefined)}
+	{#if icon}
+		{#if isIconName(icon)}
+			<Icon {icon} class="size-3.5 shrink-0" />
+		{:else}
+			<span aria-hidden="true" class="shrink-0 text-xs leading-none">{icon}</span>
+		{/if}
+	{/if}
+{/snippet}
+
+{#snippet modeOption(mode: { name: string; description?: string; icon?: string })}
+	<div class="grid min-w-0 gap-0.5">
+		<span class="inline-flex items-center gap-1 font-medium">
+			{@render modeIcon(mode.icon)}
+			{mode.name}
+		</span>
+		{#if mode.description}
+			<span class="text-xs leading-snug text-muted-foreground">{mode.description}</span>
+		{/if}
+	</div>
+{/snippet}
+
+<div
+	data-chat-mode-selector
+	data-compact={compact ? '' : undefined}
+	class={['inline-flex items-center gap-2', compact ? 'text-xs' : 'text-sm']}
+>
+	{#if loading}
+		<span class="italic text-muted-foreground" role="status">Loading modes...</span>
+	{:else if error}
+		<span class="text-destructive" role="alert">Could not load options</span>
+		<Button
+			type="button"
+			variant="ghost"
+			size="sm"
+			class="ml-auto text-xs text-muted-foreground hover:text-foreground"
+			onclick={() => void loadModes()}
+			aria-label="Retry loading modes"
+		>
+			Retry
+		</Button>
+	{:else if !hasModes}
+		<span class="italic text-muted-foreground">No modes configured</span>
+	{:else}
+		<Select type="single" value={selectedValue} onValueChange={handleValueChange}>
+			<SelectTrigger
+				size={compact ? 'compact' : size}
+				class={`max-w-full min-w-0 overflow-hidden ${className ?? ''}`}
+			>
+				<SelectValue placeholder="Pick a mode">
+					<span class="inline-flex min-w-0 items-center gap-1">
+						{#if activeMode}
+							{@render modeIcon(activeMode.icon)}
+							<span class="truncate">{activeMode.name ?? activeMode.id}</span>
+						{:else}
+							<span class="truncate">Chat</span>
+						{/if}
+					</span>
+				</SelectValue>
+			</SelectTrigger>
+			<SelectContent>
+				{#if !defaultModeId}
+					<SelectItem value={NONE_VALUE}>
+						{@render modeOption({ name: 'No mode', description: 'Use agent defaults' })}
+					</SelectItem>
+				{/if}
+				{#each modes as mode (mode.id)}
+					<SelectItem value={mode.id}>
+						{@render modeOption({
+							name: mode.name ?? mode.id,
+							description: mode.description,
+							icon: mode.icon
+						})}
+					</SelectItem>
+				{/each}
+			</SelectContent>
+		</Select>
+	{/if}
+</div>

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

@@ -0,0 +1,16 @@
+type Props = {
+    /** Currently selected mode id. A null value displays the default Chat mode when present. */
+    value?: string | null;
+    /** Called when the user picks a mode. */
+    onChange?: (modeId: string | null) => void;
+    /** Optional styling override for the trigger. */
+    class?: string;
+    /** Trigger size. */
+    size?: 'sm' | 'default';
+    /** When true, renders the compact variant used in status bars. */
+    compact?: boolean;
+};
+declare const ChatModeSelector: import("svelte").Component<Props, {}, "value">;
+type ChatModeSelector = ReturnType<typeof ChatModeSelector>;
+export default ChatModeSelector;
+//# sourceMappingURL=ChatModeSelector.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatModeSelector.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ChatModeSelector.svelte.ts"],"names":[],"mappings":"AAyBC,KAAK,KAAK,GAAG;IACZ,4FAA4F;IAC5F,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACxB,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAsIH,QAAA,MAAM,gBAAgB,gDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/components/ChatResponseStopButton.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+
+	let { onStop }: { onStop: () => void | Promise<void> } = $props();
+</script>
+
+<Button
+	type="button"
+	variant="ghost"
+	size="sm"
+	class="text-muted-foreground"
+	aria-label="Stop this response"
+	title="Stop this response"
+	onclick={onStop}
+>
+	<Icon icon="lucide:circle-stop" />
+	Stop
+</Button>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    onStop: () => void | Promise<void>;
+};
+declare const ChatResponseStopButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatResponseStopButton = ReturnType<typeof ChatResponseStopButton>;
+export default ChatResponseStopButton;
+//# sourceMappingURL=ChatResponseStopButton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatResponseStopButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ChatResponseStopButton.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,gBAAgB,GAAI;IAAE,MAAM,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CAAE,CAAC;AAejE,QAAA,MAAM,sBAAsB,sDAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/components/ChatRoom.svelte

@@ -0,0 +1,254 @@
+<script lang="ts">
+	import { useChatSurface } from '../surface-context.js';
+	const { chatState } = useChatSurface();
+
+	/**
+	 * ChatRoom — room view shell.
+	 *
+	 * Renders the active room's title, the message stream, and an optional
+	 * composer slot. Reads from the singleton `chatState`. Drop-in cross-app
+	 * surface — consumers can either rely on the store auto-driving via
+	 * `<ChatLoader />`, or pass an explicit `roomId` to switch rooms.
+	 */
+	import { onMount } from 'svelte';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { settle } from '@vibesdotdev/kernel';
+
+	import ChatMessage from './ChatMessage.svelte';
+	import ChatMessageSkeleton from './ChatMessageSkeleton.svelte';
+
+	type Props = {
+		/** When set, the component switches the store to this room on mount. */
+		roomId?: string | null;
+		/** When true, only show the message list — hide the header. */
+		hideHeader?: boolean;
+		/** Snippet for the composer / input area at the bottom. */
+		composer?: import('svelte').Snippet;
+		/** Snippet rendered above the messages list (e.g. action bar). */
+		actionBar?: import('svelte').Snippet;
+		/** Empty-state snippet rendered when the room has zero messages. */
+		emptyState?: import('svelte').Snippet;
+	};
+
+	let {
+		roomId = null,
+		hideHeader = false,
+		composer,
+		actionBar,
+		emptyState
+	}: Props = $props();
+
+	let scrollEl: HTMLDivElement | null = $state(null);
+	let topSentinel: HTMLDivElement | null = $state(null);
+	let observer: IntersectionObserver | null = null;
+
+	onMount(() => {
+		if (roomId && chatState.activeRoomId !== roomId) {
+			void settle(() => chatState.setActiveRoom(roomId));
+		}
+		observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (entry.isIntersecting) void loadOlder();
+				}
+			},
+			{ root: scrollEl, rootMargin: '200px 0px 0px 0px' }
+		);
+		if (topSentinel) observer.observe(topSentinel);
+		return () => {
+			observer?.disconnect();
+			observer = null;
+		};
+	});
+
+	const messages = $derived(chatState.messages);
+	const room = $derived(chatState.activeRoom);
+	const loading = $derived(chatState.loading);
+	const error = $derived(chatState.error);
+	const loadingOlder = $derived(chatState.historyLoadingOlder);
+	const olderExhausted = $derived(chatState.historyOlderExhausted);
+	const hasNewer = $derived(chatState.historyHasNewer);
+	const toolHistoryLoading = $derived(chatState.toolHistoryLoading);
+	const toolHistoryError = $derived(chatState.toolHistoryError);
+
+	/** Prepend one older page, holding the reader's scroll position. */
+	async function loadOlder(): Promise<void> {
+		if (!scrollEl || messages.length === 0) return;
+		const previousHeight = scrollEl.scrollHeight;
+		const settled = await settle(() => chatState.loadOlderMessages());
+		const rows = settled.ok ? settled.value : 0;
+		if (rows > 0 && scrollEl) {
+			// The prepend above this viewport would shove the reader down;
+			// pay back exactly the height the new rows added.
+			requestAnimationFrame(() => {
+				if (scrollEl) scrollEl.scrollTop += scrollEl.scrollHeight - previousHeight;
+			});
+		}
+	}
+
+	async function jumpToLatest(): Promise<void> {
+		await settle(() => chatState.showLatestMessages());
+		if (scrollEl) scrollEl.scrollTop = scrollEl.scrollHeight;
+	}
+</script>
+
+<section class="chat-room" data-room-id={room?.id ?? ''}>
+	{#if !hideHeader}
+		<header class="chat-room__header">
+			<h2 class="chat-room__title">
+				{room?.title ?? (loading ? 'Loading…' : 'No room selected')}
+			</h2>
+			{#if room?.description}
+				<p class="chat-room__description">{room.description}</p>
+			{/if}
+		</header>
+	{/if}
+
+	{#if actionBar}
+		<div class="chat-room__action-bar">{@render actionBar()}</div>
+	{/if}
+
+	{#if error}
+		<div class="chat-room__error" role="alert">{error}</div>
+	{/if}
+
+	<div class="chat-room__messages" role="log" aria-live="polite" bind:this={scrollEl}>
+		<div class="chat-room__top-sentinel" bind:this={topSentinel} aria-hidden="true"></div>
+		{#if messages.length === 0}
+			{#if loading}
+				<div class="chat-room__skeletons" aria-label="Loading messages">
+					<ChatMessageSkeleton />
+					<ChatMessageSkeleton />
+					<ChatMessageSkeleton />
+					<ChatMessageSkeleton />
+					<ChatMessageSkeleton />
+				</div>
+			{:else if emptyState}
+				{@render emptyState()}
+			{:else}
+				<p class="chat-room__empty">No messages yet.</p>
+			{/if}
+		{:else}
+			{#if loadingOlder}
+				<div class="chat-room__skeletons" aria-label="Loading older messages">
+					<ChatMessageSkeleton compact />
+					<ChatMessageSkeleton compact />
+					<ChatMessageSkeleton compact />
+				</div>
+			{:else if olderExhausted}
+				<p class="chat-room__beginning">Beginning of conversation</p>
+			{/if}
+			{#each messages as message (message.id)}
+				<ChatMessage
+					{message}
+					toolHistoryLoading={toolHistoryLoading[message.id] ?? false}
+					toolHistoryError={toolHistoryError[message.id] ?? null}
+					onLoadToolHistory={(messageId) => {
+						void chatState.loadMessageToolHistory(messageId).catch(() => {
+							// Error is surfaced via chatState.toolHistoryError.
+						});
+					}}
+				/>
+			{/each}
+		{/if}
+	</div>
+
+	{#if hasNewer}
+		<div class="chat-room__jump-latest">
+			<Button variant="outline" size="sm" onclick={jumpToLatest}>Jump to latest ↓</Button>
+		</div>
+	{/if}
+
+	{#if composer}
+		<footer class="chat-room__composer">{@render composer()}</footer>
+	{/if}
+</section>
+
+<style lang="postcss">
+	.chat-room {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		min-height: 0;
+		width: 100%;
+	}
+
+	.chat-room__header {
+		padding: 0.75rem 1rem;
+		border-bottom: 1px solid var(--border);
+		flex: 0 0 auto;
+	}
+
+	.chat-room__title {
+		font-size: 1rem;
+		font-weight: 600;
+		margin: 0;
+	}
+
+	.chat-room__description {
+		margin: 0.25rem 0 0;
+		font-size: 0.875rem;
+		opacity: 0.75;
+	}
+
+	.chat-room__action-bar {
+		flex: 0 0 auto;
+		padding: 0.5rem 1rem;
+		border-bottom: 1px solid var(--border);
+	}
+
+	.chat-room__error {
+		flex: 0 0 auto;
+		padding: 0.5rem 1rem;
+		background-color: color-mix(in oklch, var(--destructive) 12%, transparent);
+		color: var(--destructive);
+		font-size: 0.875rem;
+	}
+
+	.chat-room__messages {
+		flex: 1 1 auto;
+		overflow-y: auto;
+		padding: 0.5rem 1rem;
+		min-height: 0;
+	}
+
+	.chat-room__empty {
+		text-align: center;
+		opacity: 0.6;
+		font-style: italic;
+		margin: 2rem 0;
+	}
+
+	.chat-room__top-sentinel {
+		height: 1px;
+		width: 100%;
+	}
+
+	.chat-room__skeletons {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		padding: 0.5rem 0;
+	}
+
+	.chat-room__beginning {
+		text-align: center;
+		opacity: 0.5;
+		font-size: 0.75rem;
+		margin: 0.5rem 0;
+	}
+
+	.chat-room__jump-latest {
+		flex: 0 0 auto;
+		display: flex;
+		justify-content: center;
+		padding: 0.5rem 1rem;
+		border-top: 1px solid var(--border);
+	}
+
+	.chat-room__composer {
+		flex: 0 0 auto;
+		border-top: 1px solid var(--border);
+		padding: 0.5rem 1rem;
+	}
+</style>

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

@@ -0,0 +1,16 @@
+type Props = {
+    /** When set, the component switches the store to this room on mount. */
+    roomId?: string | null;
+    /** When true, only show the message list — hide the header. */
+    hideHeader?: boolean;
+    /** Snippet for the composer / input area at the bottom. */
+    composer?: import('svelte').Snippet;
+    /** Snippet rendered above the messages list (e.g. action bar). */
+    actionBar?: import('svelte').Snippet;
+    /** Empty-state snippet rendered when the room has zero messages. */
+    emptyState?: import('svelte').Snippet;
+};
+declare const ChatRoom: import("svelte").Component<Props, {}, "">;
+type ChatRoom = ReturnType<typeof ChatRoom>;
+export default ChatRoom;
+//# sourceMappingURL=ChatRoom.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatRoom.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ChatRoom.svelte.ts"],"names":[],"mappings":"AAoBC,KAAK,KAAK,GAAG;IACZ,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACpC,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACrC,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACtC,CAAC;AAmJH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/svelte/components/ChatSessionStatus.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+	import type { ChatSessionSnapshot } from '../../client/schemas/contracts.js';
+	import { chatVerificationVerdict } from '../../schemas/session-report.js';
+
+	let {
+		snapshot,
+		chatHref,
+		attentionHref,
+		compact = false
+	}: {
+		snapshot: ChatSessionSnapshot;
+		chatHref: string;
+		attentionHref?: string;
+		compact?: boolean;
+	} = $props();
+
+	const verdict = $derived(
+		snapshot.status === 'completed' ? chatVerificationVerdict(snapshot.delivery) : undefined
+	);
+	const report = $derived(
+		snapshot.delivery && snapshot.delivery.kind !== 'pull-request'
+			? snapshot.delivery.report
+			: undefined
+	);
+	const label = $derived(
+		snapshot.status === 'completed' && snapshot.delivery?.kind === 'verification'
+			? verdict === 'passed'
+				? 'Checks passed'
+				: verdict === 'failed'
+					? 'Checks failed'
+					: verdict === 'blocked'
+						? 'Checks blocked'
+						: 'Report delivered'
+			: statusLabel(snapshot.status)
+	);
+	const needsUser = $derived(snapshot.status === 'waiting_for_user');
+	const needsReply = $derived(needsUser && snapshot.attention?.kind === 'message');
+	const reviewInHQ = $derived(needsUser && !needsReply && attentionHref);
+	const primaryHref = $derived(reviewInHQ || chatHref);
+	const primaryLabel = $derived(
+		needsReply ? 'Reply in chat' : reviewInHQ ? 'Review request' : 'Open chat'
+	);
+
+	function statusLabel(status: ChatSessionSnapshot['status']): string {
+		switch (status) {
+			case 'starting':
+				return 'Starting';
+			case 'queued':
+				return 'Queued';
+			case 'running':
+				return 'Working';
+			case 'waiting_for_user':
+				return 'Needs you';
+			case 'awaiting_delivery':
+				return 'Preparing delivery';
+			case 'completed':
+				return 'Completed';
+			case 'failed':
+				return 'Failed';
+			case 'cancelled':
+				return 'Cancelled';
+			default:
+				return status;
+		}
+	}
+</script>
+
+<div class:compact class="chat-session-status" data-status={snapshot.status} data-verdict={verdict}>
+	<span class="chat-session-status__dot" aria-hidden="true"></span>
+	<div class="chat-session-status__copy">
+		<strong>{label}</strong>
+		{#if !compact && snapshot.statusMessage}
+			<span>{snapshot.statusMessage}</span>
+		{/if}
+	</div>
+	<a href={primaryHref}>{primaryLabel}</a>
+</div>
+
+{#if !compact && report}
+	<details class="chat-session-report">
+		<summary>View report</summary>
+		<p>{report.summary}</p>
+		{#if 'checks' in report}
+			<ul>
+				{#each report.checks as check}
+					<li>
+						<strong>{check.name} — {check.status}</strong>
+						<p>{check.evidence}</p>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</details>
+{/if}
+
+<style>
+	.chat-session-report {
+		margin-top: 0.5rem;
+		font-size: 0.875rem;
+	}
+	.chat-session-report summary {
+		cursor: pointer;
+		font-weight: 600;
+	}
+	.chat-session-report p {
+		margin: 0.375rem 0;
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
+	}
+	.chat-session-report ul {
+		margin: 0.5rem 0;
+		padding-left: 1.25rem;
+	}
+	.chat-session-status {
+		display: flex;
+		align-items: center;
+		gap: 0.625rem;
+		min-width: 0;
+	}
+	.chat-session-status__dot {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 999px;
+		background: #64748b;
+		flex: none;
+	}
+	.chat-session-status__copy {
+		display: flex;
+		flex: 1;
+		min-width: 0;
+		flex-direction: column;
+	}
+	.chat-session-status__copy span {
+		color: color-mix(in srgb, currentColor 65%, transparent);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.chat-session-status a {
+		font-weight: 600;
+		text-decoration: none;
+		white-space: nowrap;
+	}
+	.chat-session-status a:hover {
+		text-decoration: underline;
+	}
+	.chat-session-status[data-status='running'] .chat-session-status__dot,
+	.chat-session-status[data-status='queued'] .chat-session-status__dot,
+	.chat-session-status[data-status='starting'] .chat-session-status__dot {
+		background: #3b82f6;
+	}
+	.chat-session-status[data-status='waiting_for_user'] .chat-session-status__dot,
+	.chat-session-status[data-status='awaiting_delivery'] .chat-session-status__dot {
+		background: #f59e0b;
+	}
+	.chat-session-status[data-status='completed'] .chat-session-status__dot {
+		background: #22c55e;
+	}
+	.chat-session-status[data-status='failed'] .chat-session-status__dot,
+	.chat-session-status[data-status='cancelled'] .chat-session-status__dot {
+		background: #ef4444;
+	}
+	.chat-session-status[data-verdict='failed'] .chat-session-status__dot {
+		background: #ef4444;
+	}
+	.chat-session-status[data-verdict='blocked'] .chat-session-status__dot {
+		background: #f59e0b;
+	}
+	.compact .chat-session-status__copy span {
+		display: none;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { ChatSessionSnapshot } from '../../client/schemas/contracts.ts';
+type $$ComponentProps = {
+    snapshot: ChatSessionSnapshot;
+    chatHref: string;
+    attentionHref?: string;
+    compact?: boolean;
+};
+declare const ChatSessionStatus: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatSessionStatus = ReturnType<typeof ChatSessionStatus>;
+export default ChatSessionStatus;
+//# sourceMappingURL=ChatSessionStatus.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatSessionStatus.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ChatSessionStatus.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAG5E,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AA+FH,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}