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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWorkspaceContent.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ChatWorkspaceContent.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAK/C,OAAO,EAA4J,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAGpN,OAAO,KAAK,EACV,UAAU,EAGV,MAAM,oCAAoC,CAAC;AAE7C,OAAO,EAAoI,KAAK,oBAAoB,EAAkC,KAAK,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEjQ,KAAK,gBAAgB,GAAI;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC9B,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,oBAAoB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;IACvE,wFAAwF;IACxF,kBAAkB,CAAC,EAAE,qBAAqB,CAAC;IAC3C,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IACvD,uEAAuE;IACvE,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACvC,mFAAmF;IACnF,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qFAAqF;IACrF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kFAAkF;IAClF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2FAA2F;IAC3F,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;IAC3C,iFAAiF;IACjF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uDAAuD;IACvD,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAgaH,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/svelte/components/ImageGenerationToolCard.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+	/**
+	 * ImageGenerationToolCard — first-class inline renderer for an `ai-generate`
+	 * (type:'image') tool call inside a chat message.
+	 *
+	 * Renders the generation prompt, a loading skeleton while the tool is
+	 * running, the inline image(s) when complete, and an error state on
+	 * failure. The image is drawn from structured tool output
+	 * (`output.images[].url | base64`) via a direct `<img>` — it does NOT rely
+	 * on `allowUnsafeHtml` markdown rendering.
+	 *
+	 * Owned by chat-svelte (reusable presentation); chat-web's `ChatMessageCard`
+	 * consumes it for image tool calls and falls back to a generic tool card
+	 * otherwise.
+	 */
+	import * as z from 'zod/v4';
+	import { JsonValueSchema } from '@vibesdotdev/kernel/schemas/json';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { Skeleton } from '@vibesdotdev/kit/components/ui/skeleton';
+
+	type ToolCallStatus = 'pending' | 'running' | 'complete' | 'completed' | 'failed';
+
+	interface Props {
+		/** The tool call to render. `name` should be `ai-generate`. */
+		toolCall: {
+			id?: string;
+			name?: string;
+			input?: unknown;
+			output?: unknown;
+			status?: ToolCallStatus | string;
+			error?: string;
+			durationMs?: number;
+		};
+		compact?: boolean;
+	}
+
+	let { toolCall, compact = false }: Props = $props();
+
+	const imageInputSchema = z.looseObject({
+		prompt: z.string().optional()
+	});
+
+	const imageOutputWrapperSchema = z.looseObject({
+		images: z.unknown().optional()
+	});
+
+	const imageUrlItemSchema = z.looseObject({
+		url: z.string().trim().min(1)
+	});
+
+	const imageBase64ItemSchema = z.looseObject({
+		base64: z.string().trim().min(1)
+	});
+
+	const imageStringItemSchema = z.string().trim().min(1);
+
+	const parsedInput = $derived(imageInputSchema.safeParse(toolCall.input));
+	const prompt = $derived(parsedInput.success && parsedInput.data.prompt ? parsedInput.data.prompt : '');
+
+	const status = $derived(toolCall.status ?? 'pending');
+	const isRunning = $derived(status === 'pending' || status === 'running');
+	const isFailed = $derived(status === 'failed' || Boolean(toolCall.error));
+
+	const images = $derived.by<string[]>(() => {
+		const rawOutput = toolCall.output;
+		const wrapped = imageOutputWrapperSchema.safeParse(rawOutput);
+		const rawList =
+			wrapped.success && Array.isArray(wrapped.data.images)
+				? wrapped.data.images
+				: Array.isArray(rawOutput)
+					? rawOutput
+					: [];
+		const result: string[] = [];
+		for (const item of rawList) {
+			const strParsed = imageStringItemSchema.safeParse(item);
+			if (strParsed.success) {
+				result.push(strParsed.data);
+				continue;
+			}
+			const urlParsed = imageUrlItemSchema.safeParse(item);
+			if (urlParsed.success) {
+				result.push(urlParsed.data.url);
+				continue;
+			}
+			const base64Parsed = imageBase64ItemSchema.safeParse(item);
+			if (base64Parsed.success) {
+				result.push(base64Parsed.data.base64);
+				continue;
+			}
+		}
+		return result;
+	});
+
+	const hasImages = $derived(images.length > 0);
+
+	const durationLabel = $derived.by(() => {
+		const ms = toolCall.durationMs;
+		if (ms === undefined) return '';
+		return `${Math.round(ms / 100) / 10}s`;
+	});
+</script>
+
+<div class="image-tool-card" class:image-tool-card--compact={compact}>
+	<div class="image-tool-card__header">
+		{#if isRunning}
+			<Icon icon="lucide:loader-circle" class="image-tool-card__spin h-3.5 w-3.5" />
+		{:else if isFailed}
+			<Icon icon="lucide:circle-alert" class="h-3.5 w-3.5 text-destructive" />
+		{:else}
+			<Icon icon="lucide:image" class="h-3.5 w-3.5 text-success" />
+		{/if}
+		<span class="image-tool-card__title">Generate image</span>
+		{#if durationLabel}
+			<span class="image-tool-card__time">{durationLabel}</span>
+		{/if}
+	</div>
+
+	{#if prompt}
+		<p class="image-tool-card__prompt">{prompt}</p>
+	{/if}
+
+	{#if isFailed}
+		<p class="image-tool-card__error">
+			{toolCall.error ?? 'Image generation failed.'}
+		</p>
+	{:else if isRunning && !hasImages}
+		<div class="image-tool-card__skeleton">
+			<Skeleton class="image-tool-card__skeleton-box" />
+		</div>
+	{:else if hasImages}
+		<div class="image-tool-card__images">
+			{#each images as src, index (`${toolCall.id ?? 'img'}-${index}`)}
+				<img {src} alt={prompt || 'Generated image'} loading="lazy" />
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style lang="postcss">
+	@reference "tailwindcss";
+	@reference "@vibesdotdev/kit/styles.css";
+
+	.image-tool-card {
+		@apply mt-2 rounded-md border bg-muted/20 px-3 py-2;
+	}
+
+	.image-tool-card--compact {
+		@apply px-2 py-1.5;
+	}
+
+	.image-tool-card__header {
+		@apply flex items-center gap-2 text-xs font-medium;
+	}
+
+	.image-tool-card__title {
+		@apply text-foreground;
+	}
+
+	.image-tool-card__time {
+		@apply ml-auto text-muted-foreground;
+	}
+
+	.image-tool-card__prompt {
+		@apply mt-1 line-clamp-2 text-xs text-muted-foreground;
+	}
+
+	.image-tool-card__error {
+		@apply mt-2 text-xs text-destructive;
+	}
+
+	.image-tool-card__skeleton {
+		@apply mt-2;
+	}
+
+	:global(.image-tool-card__skeleton-box) {
+		@apply aspect-square w-full max-w-xs rounded-md;
+	}
+
+	.image-tool-card__images {
+		@apply mt-2 grid grid-cols-2 gap-2;
+	}
+
+	.image-tool-card__images img {
+		@apply aspect-square w-full rounded-md border object-cover;
+	}
+
+	:global(.image-tool-card__spin) {
+		@apply animate-spin text-muted-foreground;
+	}
+</style>

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

@@ -0,0 +1,18 @@
+type ToolCallStatus = 'pending' | 'running' | 'complete' | 'completed' | 'failed';
+interface Props {
+    /** The tool call to render. `name` should be `ai-generate`. */
+    toolCall: {
+        id?: string;
+        name?: string;
+        input?: unknown;
+        output?: unknown;
+        status?: ToolCallStatus | string;
+        error?: string;
+        durationMs?: number;
+    };
+    compact?: boolean;
+}
+declare const ImageGenerationToolCard: import("svelte").Component<Props, {}, "">;
+type ImageGenerationToolCard = ReturnType<typeof ImageGenerationToolCard>;
+export default ImageGenerationToolCard;
+//# sourceMappingURL=ImageGenerationToolCard.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGenerationToolCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ImageGenerationToolCard.svelte.ts"],"names":[],"mappings":"AAuBC,KAAK,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAC;AAElF,UAAU,KAAK;IACd,+DAA+D;IAC/D,QAAQ,EAAE;QACT,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,cAAc,GAAG,MAAM,CAAC;QACjC,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAoHF,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/svelte/components/InboxMixedFeed.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import type { ChatInboxItem } from '@vibesdotdev/chat/schemas';
+	import { inboxViewsFromItems } from '../inbox.js';
+
+	type Props = {
+		items: ChatInboxItem[];
+		query?: string;
+		onOpen?: (roomId: string, messageId: string) => void;
+		emptyLabel?: string;
+		hasMore?: boolean;
+		loadingMore?: boolean;
+		onLoadMore?: () => void;
+	};
+	let { items, query = '', onOpen, emptyLabel = 'No messages match this view.', hasMore = false, loadingMore = false, onLoadMore }: Props = $props();
+	const entries = $derived(inboxViewsFromItems(items, query));
+	const conversationCount = $derived(new Set(items.map((item) => item.room.id)).size);
+
+	function timestamp(value: string): string {
+		const date = new Date(value);
+		if (Number.isNaN(date.getTime())) return '';
+		return new Intl.DateTimeFormat(undefined, { month:'short', day:'numeric', hour:'numeric', minute:'2-digit' }).format(date);
+	}
+</script>
+
+<section class="mixed-feed" aria-label="All inbox messages" aria-live="polite">
+	<header class="mixed-feed__header"><div><h2>All messages</h2><p>{conversationCount} live conversation{conversationCount === 1 ? '' : 's'} mixed by time</p></div><span>{entries.length}</span></header>
+	{#if entries.length === 0}
+		<p class="mixed-feed__empty">{emptyLabel}</p>
+	{:else}
+		<div class="mixed-feed__list">
+			{#each entries as entry (entry.message.id)}
+				<button type="button" class="mixed-entry" data-source-kind={entry.source.kind} onclick={() => onOpen?.(entry.roomId, entry.message.id)}>
+					<span class="mixed-entry__accent" aria-hidden="true"></span>
+					<span class="mixed-entry__meta">
+						<span class="mixed-entry__source">{entry.source.name}</span>
+						{#if entry.source.accountLabel}<span>{entry.source.accountLabel}</span>{/if}
+						<span class="mixed-entry__room">{entry.source.kind === 'discord' || entry.source.kind === 'slack' ? '#' : ''}{entry.channel || entry.roomTitle}</span>
+					</span>
+					<span class="mixed-entry__body">
+						<span class="mixed-entry__line"><strong>{entry.sender}</strong>{#if entry.subject}<span class="mixed-entry__subject">{entry.subject}</span>{/if}<time datetime={entry.createdAt}>{timestamp(entry.createdAt)}</time></span>
+						<span class="mixed-entry__preview">{entry.message.content}</span>
+					</span>
+				</button>
+			{/each}
+		</div>
+	{/if}
+	{#if hasMore}
+		<button type="button" class="mixed-feed__more" disabled={loadingMore} onclick={() => onLoadMore?.()}>{loadingMore ? 'Loading…' : 'Load older messages'}</button>
+	{/if}
+</section>
+
+<style>
+	.mixed-feed{display:flex;height:100%;min-height:0;flex-direction:column;background:var(--background,#fff)}.mixed-feed__header{display:flex;min-height:3.5rem;align-items:center;justify-content:space-between;padding:.65rem 1rem;border-bottom:1px solid var(--border,rgba(0,0,0,.1))}.mixed-feed__header h2,.mixed-feed__header p{margin:0}.mixed-feed__header h2{font-size:.95rem;font-weight:650}.mixed-feed__header p{color:var(--muted-foreground,#71717a);font-size:.72rem}.mixed-feed__header>span{color:var(--muted-foreground,#71717a);font-size:.72rem}.mixed-feed__list{min-height:0;overflow:auto}.mixed-feed__empty{display:grid;height:100%;place-items:center;margin:0;color:var(--muted-foreground,#71717a);font-size:.85rem}
+	.mixed-entry{position:relative;display:grid;width:100%;grid-template-columns:.22rem minmax(8rem,11rem) 1fr;gap:.8rem;align-items:center;border:0;border-bottom:1px solid color-mix(in oklab,var(--border,rgba(0,0,0,.1)) 65%,transparent);background:transparent;padding:.72rem 1rem;text-align:left;color:inherit;cursor:pointer}.mixed-entry:hover{background:var(--muted,rgba(0,0,0,.04))}.mixed-entry__accent{align-self:stretch;border-radius:999px;background:var(--muted-foreground,#a1a1aa)}.mixed-entry[data-source-kind=email] .mixed-entry__accent{background:#6d5dfc}.mixed-entry[data-source-kind=discord] .mixed-entry__accent{background:#5865f2}.mixed-entry[data-source-kind=slack] .mixed-entry__accent{background:#2eb67d}.mixed-entry[data-source-kind=agent] .mixed-entry__accent{background:#f59e0b}
+	.mixed-entry__meta,.mixed-entry__body{display:flex;min-width:0;flex-direction:column}.mixed-entry__meta{gap:.12rem;color:var(--muted-foreground,#71717a);font-size:.68rem}.mixed-entry__source{color:var(--foreground,#18181b);font-size:.74rem;font-weight:650}.mixed-entry__room,.mixed-entry__preview,.mixed-entry__subject{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mixed-entry__line{display:flex;min-width:0;align-items:baseline;gap:.55rem;font-size:.78rem}.mixed-entry__line strong{flex-shrink:0}.mixed-entry__line time{margin-left:auto;color:var(--muted-foreground,#71717a);font-size:.68rem}.mixed-entry__subject{font-weight:550}.mixed-entry__preview{margin-top:.18rem;color:var(--muted-foreground,#71717a);font-size:.78rem}
+	.mixed-feed__more{display:block;margin:.85rem auto 1.25rem;border:1px solid var(--border,rgba(0,0,0,.1));border-radius:.45rem;background:transparent;padding:.45rem .8rem;color:var(--muted-foreground,#71717a);font-size:.75rem;cursor:pointer}.mixed-feed__more:hover:not(:disabled){color:var(--foreground,#18181b);background:var(--muted,rgba(0,0,0,.04))}.mixed-feed__more:disabled{opacity:.55;cursor:wait}
+	@media(max-width:720px){.mixed-entry{grid-template-columns:.18rem 1fr;padding:.65rem}.mixed-entry__meta{grid-column:2;flex-direction:row}.mixed-entry__body{grid-column:2}.mixed-entry__accent{grid-row:1 / span 2}.mixed-entry__line time{display:none}}
+</style>

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

@@ -0,0 +1,14 @@
+import type { ChatInboxItem } from '@vibesdotdev/chat/schemas';
+type Props = {
+    items: ChatInboxItem[];
+    query?: string;
+    onOpen?: (roomId: string, messageId: string) => void;
+    emptyLabel?: string;
+    hasMore?: boolean;
+    loadingMore?: boolean;
+    onLoadMore?: () => void;
+};
+declare const InboxMixedFeed: import("svelte").Component<Props, {}, "">;
+type InboxMixedFeed = ReturnType<typeof InboxMixedFeed>;
+export default InboxMixedFeed;
+//# sourceMappingURL=InboxMixedFeed.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InboxMixedFeed.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InboxMixedFeed.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAI9D,KAAK,KAAK,GAAG;IACZ,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AA+CH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/InboxSourceConversation.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import { tick, type Snippet } from 'svelte';
+	import type { UnifiedChatMessage } from '@vibesdotdev/chat';
+	import { inboxMessageView, type InboxSourceIdentity } from '../inbox.js';
+	import ChatMessage from './ChatMessage.svelte';
+	import ChatMessageAttachments from './ChatMessageAttachments.svelte';
+	import { parseSourceAttachments } from '../../source/source-room.js';
+
+	type Props = {
+		source: InboxSourceIdentity;
+		room: { id: string; title?: string | null; lastMessageAt?: string | null };
+		messages: UnifiedChatMessage[];
+		loading?: boolean;
+		error?: string | null;
+		emptyLabel?: string;
+		composer?: Snippet;
+		selectedMessageId?: string | null;
+		hasOlder?: boolean;
+		loadingOlder?: boolean;
+		onLoadOlder?: () => void;
+		hasNewer?: boolean;
+		onLoadNewer?: () => void;
+		onShowLatest?: () => void;
+		onRetry?: (message: UnifiedChatMessage) => void;
+		onReply?: (message: UnifiedChatMessage) => void;
+		attachmentHref?: (message: UnifiedChatMessage, attachmentId: string) => string;
+	};
+
+	let { source, room, messages, loading = false, error = null, emptyLabel, composer, selectedMessageId = null, hasOlder = false, loadingOlder = false, onLoadOlder, hasNewer = false, onLoadNewer, onShowLatest, onRetry, onReply, attachmentHref }: Props = $props();
+	const views = $derived(messages.map((message) => inboxMessageView(message, room, source)));
+	let messageContainer = $state<HTMLDivElement>();
+	const selectedPresent = $derived(messages.some((message) => message.id === selectedMessageId));
+	$effect(() => {
+		const id = selectedMessageId;
+		if (id && selectedPresent) void tick().then(() => {
+			messageContainer?.querySelector(`[data-message-id="${CSS.escape(id)}"]`)?.scrollIntoView({ block: 'center' });
+		});
+	});
+
+	function timestamp(value: string): string {
+		const date = new Date(value);
+		if (Number.isNaN(date.getTime())) return '';
+		return new Intl.DateTimeFormat(undefined, {
+			month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit'
+		}).format(date);
+	}
+</script>
+
+{#snippet recovery(message: UnifiedChatMessage)}
+	{#if message.metadata?.outbound === true && message.status !== 'sent' && onRetry}
+		<button class="message-recovery" type="button" onclick={() => onRetry?.(message)}>
+			{message.status === 'failed' ? 'Retry delivery' : 'Check / retry pending delivery'}
+		</button>
+	{/if}
+{/snippet}
+
+<section class="source-conversation" data-source-kind={source.kind} aria-label={`${source.name} conversation`}>
+	<header class="source-conversation__header">
+		<div class="source-mark" aria-hidden="true">{source.kind === 'email' ? '@' : source.kind === 'discord' ? '#' : source.kind === 'slack' ? '⌁' : '•'}</div>
+		<div class="source-heading">
+			<h2>{room.title?.trim() || source.channelLabel || source.name}</h2>
+			<p>{source.accountLabel || source.name}{source.channelLabel ? ` · ${source.channelLabel}` : ''}</p>
+		</div>
+		<span class="source-kind">{source.kind}</span>
+		{#if selectedMessageId && onShowLatest}<button class="message-recovery" type="button" onclick={onShowLatest}>Latest messages</button>{/if}
+	</header>
+
+	<div bind:this={messageContainer} class="source-conversation__messages" aria-live="polite">
+		{#if hasOlder}<button class="message-recovery" type="button" disabled={loadingOlder} onclick={() => onLoadOlder?.()}>{loadingOlder ? 'Loading…' : 'Load older messages'}</button>{/if}
+		{#if loading}
+			<p class="source-state">Loading conversation…</p>
+		{:else if error}
+			<p class="source-state source-state--error">{error}</p>
+		{:else if views.length === 0}
+			<p class="source-state">{emptyLabel ?? 'No messages in this conversation yet.'}</p>
+		{:else if source.kind === 'email'}
+			<div class="mail-thread">
+				{#each views as view (view.message.id)}
+					<article class="mail-message" data-status={view.message.status} data-message-id={view.message.id} class:selected-message={selectedMessageId === view.message.id}>
+						<header>
+							<div class="mail-message__sender"><strong>{view.sender}</strong>{#if view.recipient}<span>to {view.recipient}</span>{/if}</div>
+							<time datetime={view.createdAt}>{timestamp(view.createdAt)}</time>
+						</header>
+						{#if view.subject}<h3>{view.subject}</h3>{/if}
+						<p class="mail-message__body">{view.message.content}</p>
+						<ChatMessageAttachments attachments={view.message.attachments} />
+						{#each parseSourceAttachments(view.message.metadata) as attachment (attachment.id)}
+							{#if attachmentHref}<a class="message-recovery" href={attachmentHref(view.message, attachment.id)} download={attachment.fileName}>{attachment.fileName} · {Math.ceil(attachment.size / 1024)} KB ↓</a>{/if}
+						{/each}
+						{#if view.message.status !== 'sent'}<span class="delivery">{view.message.status}</span>{/if}
+						{@render recovery(view.message)}
+						{#if view.message.metadata?.inbound === true && onReply}
+							<button class="message-recovery" type="button" onclick={() => onReply?.(view.message)}>Reply to {view.replyRecipient ?? view.sender}</button>
+						{/if}
+					</article>
+				{/each}
+			</div>
+		{:else if source.kind === 'discord' || source.kind === 'slack'}
+			<div class="channel-thread">
+				{#each views as view (view.message.id)}
+					<div data-message-id={view.message.id} class:selected-message={selectedMessageId === view.message.id}>
+						<ChatMessage message={view.message} senderLabel={view.sender} compact hideStatus={view.message.status === 'sent'} />
+						{@render recovery(view.message)}
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<div class="generic-thread">
+				{#each views as view (view.message.id)}
+					<div data-message-id={view.message.id} class:selected-message={selectedMessageId === view.message.id}>
+						<ChatMessage message={view.message} senderLabel={view.sender} />
+						{@render recovery(view.message)}
+					</div>
+				{/each}
+			</div>
+		{/if}
+		{#if hasNewer}<button class="message-recovery" type="button" disabled={loadingOlder} onclick={() => onLoadNewer?.()}>{loadingOlder ? 'Loading…' : 'Load newer messages'}</button>{/if}
+	</div>
+
+	{#if composer}<footer class="source-conversation__composer">{@render composer()}</footer>{/if}
+</section>
+
+<style>
+	.selected-message{outline:2px solid var(--primary,#6d5dfc);outline-offset:2px;border-radius:.5rem}
+	.message-recovery{margin:.5rem;padding:.4rem .7rem;border:1px solid var(--border);border-radius:.4rem;background:var(--background);color:var(--foreground);font-size:.75rem;cursor:pointer}
+	.source-conversation{display:flex;height:100%;min-height:0;flex-direction:column;background:var(--background,#fff);color:var(--foreground,#18181b)}
+	.source-conversation__header{display:flex;align-items:center;gap:.75rem;min-height:3.5rem;padding:.65rem 1rem;border-bottom:1px solid var(--border,rgba(0,0,0,.1))}
+	.source-mark{display:grid;width:2rem;height:2rem;place-items:center;border-radius:.55rem;background:color-mix(in oklab,var(--primary,#6d5dfc) 12%,transparent);color:var(--primary,#5948e8);font-weight:700}
+	.source-heading{min-width:0;flex:1}.source-heading h2,.source-heading p{overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap}.source-heading h2{font-size:.95rem;font-weight:650}.source-heading p{color:var(--muted-foreground,#71717a);font-size:.72rem}
+	.source-kind{border:1px solid var(--border,rgba(0,0,0,.12));border-radius:999px;padding:.2rem .5rem;color:var(--muted-foreground,#71717a);font-size:.62rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase}
+	.source-conversation__messages{min-height:0;flex:1;overflow:auto}.source-state{display:grid;height:100%;place-items:center;margin:0;padding:2rem;color:var(--muted-foreground,#71717a);font-size:.85rem;text-align:center}.source-state--error{color:var(--destructive,#dc2626)}
+	.mail-thread{max-width:58rem;margin:0 auto;padding:1rem}.mail-message{position:relative;margin-bottom:.75rem;border:1px solid var(--border,rgba(0,0,0,.1));border-radius:.65rem;background:var(--card,#fff);padding:1rem 1.1rem;box-shadow:0 1px 2px rgba(0,0,0,.03)}.mail-message header{display:flex;align-items:start;justify-content:space-between;gap:1rem}.mail-message__sender{display:flex;min-width:0;flex-direction:column;font-size:.82rem}.mail-message__sender span,.mail-message time{color:var(--muted-foreground,#71717a);font-size:.7rem}.mail-message h3{margin:.85rem 0 .5rem;font-size:1rem}.mail-message__body{margin:0;white-space:pre-wrap;line-height:1.58}.delivery{display:inline-block;margin-top:.75rem;color:var(--muted-foreground,#71717a);font-size:.68rem;text-transform:capitalize}
+	.channel-thread,.generic-thread{max-width:62rem;margin:0 auto;padding:1rem 1.25rem}.channel-thread :global(.chat-message){padding:.3rem .45rem;border-radius:.35rem}.channel-thread :global(.chat-message:hover){background:var(--muted,rgba(0,0,0,.04))}
+	.source-conversation__composer{border-top:1px solid var(--border,rgba(0,0,0,.1));background:var(--background,#fff)}
+	@media(max-width:640px){.source-conversation__header{padding:.55rem .7rem}.source-kind{display:none}.mail-thread,.channel-thread,.generic-thread{padding:.65rem}.mail-message{padding:.8rem}.mail-message header{flex-direction:column;gap:.2rem}}
+</style>

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

@@ -0,0 +1,30 @@
+import { type Snippet } from 'svelte';
+import type { UnifiedChatMessage } from '@vibesdotdev/chat';
+import { type InboxSourceIdentity } from '../inbox.ts';
+type Props = {
+    source: InboxSourceIdentity;
+    room: {
+        id: string;
+        title?: string | null;
+        lastMessageAt?: string | null;
+    };
+    messages: UnifiedChatMessage[];
+    loading?: boolean;
+    error?: string | null;
+    emptyLabel?: string;
+    composer?: Snippet;
+    selectedMessageId?: string | null;
+    hasOlder?: boolean;
+    loadingOlder?: boolean;
+    onLoadOlder?: () => void;
+    hasNewer?: boolean;
+    onLoadNewer?: () => void;
+    onShowLatest?: () => void;
+    onRetry?: (message: UnifiedChatMessage) => void;
+    onReply?: (message: UnifiedChatMessage) => void;
+    attachmentHref?: (message: UnifiedChatMessage, attachmentId: string) => string;
+};
+declare const InboxSourceConversation: import("svelte").Component<Props, {}, "">;
+type InboxSourceConversation = ReturnType<typeof InboxSourceConversation>;
+export default InboxSourceConversation;
+//# sourceMappingURL=InboxSourceConversation.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InboxSourceConversation.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InboxSourceConversation.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAoB,KAAK,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAMxE,KAAK,KAAK,GAAG;IACZ,MAAM,EAAE,mBAAmB,CAAC;IAC5B,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IAC3E,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAChD,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/E,CAAC;AA4GH,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/svelte/components/MissingToolCard.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { ToolCard, type ToolWidgetProps } from '@vibesdotdev/kit/components/tool-widgets';
+
+	let { tool, compact = false }: ToolWidgetProps = $props();
+	const active = $derived(['pending', 'running', 'streaming', 'awaiting_approval'].includes(String(tool.status)));
+</script>
+
+<ToolCard {tool} {compact} title={tool.title ?? tool.name} icon="lucide:triangle-alert">
+	<p class="text-xs text-muted-foreground">
+		{#if active}
+			This tool is working, but its interface is unavailable.
+		{:else}
+			This tool finished, but its interface could not load.
+		{/if}
+		Technical details are available to the system; retry after reconnecting the workspace.
+	</p>
+</ToolCard>

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

@@ -0,0 +1,5 @@
+import { type ToolWidgetProps } from '@vibesdotdev/kit/components/tool-widgets';
+declare const MissingToolCard: import("svelte").Component<ToolWidgetProps, {}, "">;
+type MissingToolCard = ReturnType<typeof MissingToolCard>;
+export default MissingToolCard;
+//# sourceMappingURL=MissingToolCard.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MissingToolCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/MissingToolCard.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAkB1F,QAAA,MAAM,eAAe,qDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}