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

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

@@ -0,0 +1,25 @@
+/**
+ * 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.
+ */
+import { createRefCountedTimer } from "./relative-time-tick.js";
+const TICK_INTERVAL_MS = 30_000;
+let tick = $state(0);
+const timer = createRefCountedTimer(TICK_INTERVAL_MS, () => {
+    tick += 1;
+});
+/** Subscribe to the shared tick. Returns an unsubscribe function. */
+export function subscribeRelativeTimeTick() {
+    return timer.subscribe();
+}
+/** Read the current tick value. Reactive in a $derived context. */
+export function getRelativeTimeTick() {
+    return tick;
+}

package/dist/svelte/components/runtime/MessageSegments.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	/**
+	 * MessageSegments — renders an assistant turn's ordered render segments
+	 * (text / thinking / tool) as interleaved bubbles in true emission order.
+	 *
+	 * This is the segmented-streaming render path. Each segment is one of:
+	 *  - `text`    → the same markdown/content renderer the flat path uses
+	 *                (`ChatMessageContent`), so styling stays identical.
+	 *  - `thinking`→ muted reasoning text (defensive: the server does not yet emit
+	 *                thinking segments, but the union is exhaustive).
+	 *  - `tool`    → resolves `toolCalls[toolCallId]` and renders the SAME bespoke
+	 *                widget the flat path uses (`ToolCallRenderer`). Skipped when the
+	 *                referenced tool call is missing (defensive — relay drop / stale).
+	 *
+	 * Only rendered by `RuntimeChatMessageRow` when `metadata.segments` is present;
+	 * messages without segments keep the unchanged flat `content` + tool-calls path.
+	 */
+	import { type ToolCallView } from '@vibesdotdev/kit/components/tool-widgets';
+	import ChatToolCallRenderer from '../ChatToolCallRenderer.svelte';
+	import type { MessageSegment } from '@vibesdotdev/chat/schemas/common';
+	import ChatMessageContent from '../ChatMessageContent.svelte';
+
+	let {
+		segments,
+		toolCalls,
+		streaming = false,
+		onCancel
+	}: {
+		segments: MessageSegment[];
+		/** The message's resolved tool calls (from `metadata.toolCalls`), keyed by id. */
+		toolCalls: ToolCallView[];
+		/** True while the turn is still streaming — text segments render raw, not re-parsed. */
+		streaming?: boolean;
+		onCancel?: () => void;
+	} = $props();
+
+	const toolsById = $derived(new Map(toolCalls.map((tool) => [tool.id, tool])));
+
+	function toolFor(toolCallId: string): ToolCallView | undefined {
+		return toolsById.get(toolCallId);
+	}
+
+	// While streaming, only the LAST segment is being appended — it's the live
+	// element. Earlier segments are settled, so they render finished markdown
+	// immediately (instead of staying raw until the whole turn completes) and the
+	// streaming caret shows on the tail alone.
+	const activeIndex = $derived(streaming ? segments.length - 1 : -1);
+</script>
+
+<div class="flex flex-col gap-2">
+	{#each segments as segment, i (i)}
+		{#if segment.kind === 'text'}
+			{#if segment.text.trim()}
+				<div class="break-words leading-relaxed">
+					<ChatMessageContent
+						content={segment.text}
+						streaming={i === activeIndex}
+						caret={i === activeIndex}
+					/>
+				</div>
+			{/if}
+		{:else if segment.kind === 'thinking'}
+			{#if segment.text.trim()}
+				<div class="break-words text-sm leading-relaxed text-muted-foreground">
+					<ChatMessageContent
+						content={segment.text}
+						streaming={i === activeIndex}
+						caret={i === activeIndex}
+					/>
+				</div>
+			{/if}
+		{:else if segment.kind === 'tool'}
+			{@const tool = toolFor(segment.toolCallId)}
+			{#if tool}
+				<ChatToolCallRenderer {tool} {onCancel} />
+			{/if}
+		{/if}
+	{/each}
+</div>

package/dist/svelte/components/runtime/MessageSegments.svelte.d.ts

@@ -0,0 +1,30 @@
+/**
+     * MessageSegments — renders an assistant turn's ordered render segments
+     * (text / thinking / tool) as interleaved bubbles in true emission order.
+     *
+     * This is the segmented-streaming render path. Each segment is one of:
+     *  - `text`    → the same markdown/content renderer the flat path uses
+     *                (`ChatMessageContent`), so styling stays identical.
+     *  - `thinking`→ muted reasoning text (defensive: the server does not yet emit
+     *                thinking segments, but the union is exhaustive).
+     *  - `tool`    → resolves `toolCalls[toolCallId]` and renders the SAME bespoke
+     *                widget the flat path uses (`ToolCallRenderer`). Skipped when the
+     *                referenced tool call is missing (defensive — relay drop / stale).
+     *
+     * Only rendered by `RuntimeChatMessageRow` when `metadata.segments` is present;
+     * messages without segments keep the unchanged flat `content` + tool-calls path.
+     */
+import { type ToolCallView } from '@vibesdotdev/kit/components/tool-widgets';
+import type { MessageSegment } from '@vibesdotdev/chat/schemas/common';
+type $$ComponentProps = {
+    segments: MessageSegment[];
+    /** The message's resolved tool calls (from `metadata.toolCalls`), keyed by id. */
+    toolCalls: ToolCallView[];
+    /** True while the turn is still streaming — text segments render raw, not re-parsed. */
+    streaming?: boolean;
+    onCancel?: () => void;
+};
+declare const MessageSegments: import("svelte").Component<$$ComponentProps, {}, "">;
+type MessageSegments = ReturnType<typeof MessageSegments>;
+export default MessageSegments;
+//# sourceMappingURL=MessageSegments.svelte.d.ts.map

package/dist/svelte/components/runtime/MessageSegments.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageSegments.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/runtime/MessageSegments.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;OAeI;AACJ,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0CAA0C,CAAC;AAE7E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAGtE,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,kFAAkF;IAClF,SAAS,EAAE,YAAY,EAAE,CAAC;IAC1B,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAqDH,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/runtime/RuntimeChatActionBar.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { Spinner } from '@vibesdotdev/kit/components/ui/spinner';
+	import { DEFAULT_RUNTIME_CHAT_ACTIONS } from './command-definitions.js';
+	import type { RuntimeChatAction } from './types.js';
+
+	let {
+		canType = true,
+		sendDisabled = false,
+		submitting = false,
+		queueing = false,
+		queued = false,
+		actions = DEFAULT_RUNTIME_CHAT_ACTIONS,
+		onAction = (_action: RuntimeChatAction) => {},
+		onStop,
+		trailingActions
+	}: {
+		canType?: boolean;
+		sendDisabled?: boolean;
+		submitting?: boolean;
+		/** A turn is streaming and the user has text to queue — the submit
+		 *  enqueues a follow-up instead of being inert (GH #578). */
+		queueing?: boolean;
+		/** A follow-up is already queued and waiting for the active turn. */
+		queued?: boolean;
+		actions?: readonly RuntimeChatAction[];
+		onAction?: (action: RuntimeChatAction) => void;
+		/** Called when the user stops waiting for the active generation. */
+		onStop?: () => void;
+		trailingActions?: Snippet;
+	} = $props();
+</script>
+
+<!-- Breakpoints follow this bar, not the viewport. The editor mounts it in a
+     resizable pane on a wide window, and a viewport `md:` hint was wider than
+     that pane, so the send button was clipped. -->
+<div class="@container/chat-actions grid w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2 pt-1.5 pb-2">
+	<div class="flex min-w-0 items-center gap-2">
+		<div
+			class="flex min-w-0 flex-1 flex-nowrap items-center gap-1 overflow-x-auto overscroll-x-contain [scrollbar-width:none] @min-[40rem]/chat-actions:flex-wrap @min-[40rem]/chat-actions:overflow-visible [&::-webkit-scrollbar]:hidden"
+			role="toolbar"
+			aria-label="Chat composer actions"
+		>
+			{#each actions as action (action.id)}
+				<Button
+					type="button"
+					variant="ghost"
+					size="icon-sm"
+					class="shrink-0"
+					disabled={!canType}
+					onclick={() => onAction(action)}
+					title={action.description ?? action.label}
+					aria-label={action.label}
+				>
+					<span class="inline-flex size-4 items-center justify-center" aria-hidden="true">
+						<Icon icon={action.icon} class="size-4" />
+					</span>
+				</Button>
+			{/each}
+			{#if trailingActions}
+				{@render trailingActions()}
+			{/if}
+		</div>
+		<p
+			class="hidden min-w-0 shrink truncate text-caption text-muted-foreground @min-[40rem]/chat-actions:block"
+			data-chat-send-hint
+			aria-live="polite"
+		>
+			{#if queued}
+				Queued — sends when the reply finishes
+			{:else}
+				Enter sends; Shift+Enter adds a line
+			{/if}
+		</p>
+	</div>
+
+	<div class="flex shrink-0 items-center justify-self-end">
+		{#if submitting && !queueing && onStop}
+			<Button
+				type="button"
+				size="sm"
+				variant="outline"
+				class="shrink-0 gap-1.5"
+				onclick={onStop}
+				aria-label="Stop this response"
+			>
+				<span class="inline-flex size-4 items-center justify-center" aria-hidden="true">
+					<Icon icon="lucide:square" class="size-4" />
+				</span>
+				<span>Stop</span>
+			</Button>
+		{:else}
+			<Button
+				type="submit"
+				size="sm"
+				class="shrink-0 gap-1.5"
+				disabled={sendDisabled}
+				aria-label={queueing ? 'Queue message' : submitting ? 'Sending message' : 'Send message'}
+				aria-busy={submitting}
+			>
+				{#if queueing}
+					<span class="inline-flex size-4 items-center justify-center" aria-hidden="true">
+						<Icon icon="lucide:corner-down-left" class="size-4" />
+					</span>
+					<span>Queue</span>
+				{:else if submitting}
+					<span class="inline-flex size-4 items-center justify-center" aria-hidden="true">
+						<Spinner class="size-4" />
+					</span>
+					<span>Sending</span>
+				{:else}
+					<span class="inline-flex size-4 items-center justify-center" aria-hidden="true">
+						<Icon icon="lucide:send" class="size-4" />
+					</span>
+					<span>Send</span>
+				{/if}
+			</Button>
+		{/if}
+	</div>
+</div>

package/dist/svelte/components/runtime/RuntimeChatActionBar.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { RuntimeChatAction } from './types.ts';
+type $$ComponentProps = {
+    canType?: boolean;
+    sendDisabled?: boolean;
+    submitting?: boolean;
+    /** A turn is streaming and the user has text to queue — the submit
+     *  enqueues a follow-up instead of being inert (GH #578). */
+    queueing?: boolean;
+    /** A follow-up is already queued and waiting for the active turn. */
+    queued?: boolean;
+    actions?: readonly RuntimeChatAction[];
+    onAction?: (action: RuntimeChatAction) => void;
+    /** Called when the user stops waiting for the active generation. */
+    onStop?: () => void;
+    trailingActions?: Snippet;
+};
+declare const RuntimeChatActionBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type RuntimeChatActionBar = ReturnType<typeof RuntimeChatActionBar>;
+export default RuntimeChatActionBar;
+//# sourceMappingURL=RuntimeChatActionBar.svelte.d.ts.map

package/dist/svelte/components/runtime/RuntimeChatActionBar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeChatActionBar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/runtime/RuntimeChatActionBar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEnD,KAAK,gBAAgB,GAAI;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;iEAC6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AA2EH,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/svelte/components/runtime/RuntimeChatAttachments.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { useChatSurface } from '../../surface-context.js';
+	const { chatRoomStore } = useChatSurface();
+
+	import { StorageUploadChip } from '@vibesdotdev/storage/svelte';
+
+	import { removeStagedAttachment, type StagedChatAttachment } from '../../attachments.js';
+
+	let {
+		attachments,
+		onRemove = (id: string) => removeStagedAttachment(id, chatRoomStore)
+	}: {
+		attachments?: readonly StagedChatAttachment[];
+		onRemove?: (id: string) => void;
+	} = $props();
+
+	const visibleAttachments = $derived(attachments ?? chatRoomStore.pendingAttachments);
+</script>
+
+{#if visibleAttachments.length > 0}
+	<div class="runtime-chat-attachments" role="list" aria-label="Attached files">
+		{#each visibleAttachments as attachment (attachment.id)}
+			<StorageUploadChip
+				name={attachment.name}
+				size={attachment.size}
+				status={attachment.status}
+				error={attachment.error}
+				onRemove={() => onRemove(attachment.id)}
+			/>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.runtime-chat-attachments {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.25rem 0.5rem;
+	}
+
+</style>

package/dist/svelte/components/runtime/RuntimeChatAttachments.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type StagedChatAttachment } from '../../attachments.ts';
+type $$ComponentProps = {
+    attachments?: readonly StagedChatAttachment[];
+    onRemove?: (id: string) => void;
+};
+declare const RuntimeChatAttachments: import("svelte").Component<$$ComponentProps, {}, "">;
+type RuntimeChatAttachments = ReturnType<typeof RuntimeChatAttachments>;
+export default RuntimeChatAttachments;
+//# sourceMappingURL=RuntimeChatAttachments.svelte.d.ts.map

package/dist/svelte/components/runtime/RuntimeChatAttachments.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeChatAttachments.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/runtime/RuntimeChatAttachments.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAA0B,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAExF,KAAK,gBAAgB,GAAI;IACxB,WAAW,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AA6BH,QAAA,MAAM,sBAAsB,sDAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/components/runtime/RuntimeChatCommandMenu.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import type { RuntimeChatCommandMenuItem, RuntimeChatParticipantOption } from './types.js';
+
+	let {
+		open = $bindable(false),
+		type = $bindable<string | null>(null),
+		query = $bindable(''),
+		agents = [],
+		users = [],
+		slashCommands = [],
+		augmentItems,
+		onSelect = (_value: string, _type: 'mention' | 'command' | 'augment') => {}
+	}: {
+		open?: boolean;
+		type?: string | null;
+		query?: string;
+		agents?: RuntimeChatParticipantOption[];
+		users?: RuntimeChatParticipantOption[];
+		slashCommands?: RuntimeChatCommandMenuItem[];
+		augmentItems?: RuntimeChatCommandMenuItem[];
+		onSelect?: (value: string, type: 'mention' | 'command' | 'augment') => void;
+	} = $props();
+
+	let selectedIndex = $state(0);
+	let menuEl = $state<HTMLDivElement | null>(null);
+	let prefersReducedMotion = $state(false);
+
+	const mentionItems = $derived.by((): RuntimeChatCommandMenuItem[] => {
+		if (type !== '@') return [];
+		if (augmentItems) return augmentItems;
+		const normalizedQuery = query.toLowerCase();
+		const items: RuntimeChatCommandMenuItem[] = [];
+
+		for (const agent of agents) {
+			if (!normalizedQuery || agent.name.toLowerCase().includes(normalizedQuery)) {
+				items.push({
+					id: `agent-${agent.id}`,
+					label: agent.name,
+					description: 'AI teammate',
+					icon: 'lucide:bot',
+					action: () => onSelect(agent.name, 'mention')
+				});
+			}
+		}
+
+		for (const user of users) {
+			if (!normalizedQuery || user.name.toLowerCase().includes(normalizedQuery)) {
+				items.push({
+					id: `user-${user.id}`,
+					label: user.name,
+					description: user.email ?? 'Person',
+					icon: 'lucide:user',
+					action: () => onSelect(user.name, 'mention')
+				});
+			}
+		}
+
+		return items;
+	});
+
+	const slashItems = $derived.by((): RuntimeChatCommandMenuItem[] => {
+		if (type !== '/') return [];
+		const normalizedQuery = query.toLowerCase();
+		const matchingCommands = normalizedQuery
+			? slashCommands.filter((command) =>
+					[command.label, command.description ?? ''].some((value) =>
+						value.toLowerCase().includes(normalizedQuery)
+					)
+				)
+			: slashCommands;
+		return [...(augmentItems ?? []), ...matchingCommands];
+	});
+
+	const items = $derived(type === '@' ? mentionItems : slashItems);
+
+	$effect(() => {
+		void items;
+		selectedIndex = 0;
+	});
+
+	function scrollToSelected() {
+		if (!menuEl) return;
+		const selected = menuEl.querySelector('[data-selected="true"]');
+		selected?.scrollIntoView({ block: 'nearest' });
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (!open || items.length === 0) return;
+
+		if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			selectedIndex = (selectedIndex + 1) % items.length;
+			scrollToSelected();
+		} else if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			selectedIndex = (selectedIndex - 1 + items.length) % items.length;
+			scrollToSelected();
+		} else if (event.key === 'Enter' || event.key === 'Tab') {
+			event.preventDefault();
+			items[selectedIndex]?.action();
+		}
+	}
+
+	function selectWithPointer(event: MouseEvent, item: RuntimeChatCommandMenuItem) {
+		event.preventDefault();
+		item.action();
+	}
+
+	onMount(() => {
+		prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		window.addEventListener('keydown', handleKeydown);
+		return () => window.removeEventListener('keydown', handleKeydown);
+	});
+</script>
+
+{#if open && items.length > 0}
+	<div
+		class="runtime-chat-command-menu"
+		bind:this={menuEl}
+		role="listbox"
+		transition:fly={{ y: 4, duration: prefersReducedMotion ? 0 : 120 }}
+	>
+		<div class="runtime-chat-command-menu__header">
+			<span>{type === '@' ? 'Mention' : 'Commands'}</span>
+		</div>
+		<div class="runtime-chat-command-menu__list">
+			{#each items as item, index (item.id)}
+				<button
+					type="button"
+					class="runtime-chat-command-menu__item"
+					data-selected={index === selectedIndex}
+					onmousedown={(event) => selectWithPointer(event, item)}
+					onclick={() => item.action()}
+					onmouseenter={() => (selectedIndex = index)}
+					role="option"
+					aria-selected={index === selectedIndex}
+				>
+					<span class="runtime-chat-command-menu__icon" aria-hidden="true">
+						<Icon icon={item.icon} class="h-4 w-4" />
+					</span>
+					<span class="runtime-chat-command-menu__copy">
+						<strong>{item.label}</strong>
+						{#if item.description}
+							<small>{item.description}</small>
+						{/if}
+					</span>
+				</button>
+			{/each}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.runtime-chat-command-menu {
+		position: absolute;
+		z-index: 50;
+		left: 0.5rem;
+		bottom: calc(100% + 0.375rem);
+		width: min(20rem, calc(100vw - 2rem));
+		overflow: hidden;
+		border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
+		border-radius: 0.75rem;
+		background: var(--popover, var(--background, #fff));
+		box-shadow: 0 16px 40px var(--shadow-ambient);
+		color: var(--popover-foreground, var(--foreground, inherit));
+	}
+
+	.runtime-chat-command-menu__header {
+		border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.1));
+		padding: 0.45rem 0.75rem;
+		color: var(--muted-foreground, #6b7280);
+		font-size: 0.75rem;
+		font-weight: 650;
+	}
+
+	.runtime-chat-command-menu__list {
+		max-height: 15rem;
+		overflow-y: auto;
+		padding: 0.25rem;
+	}
+
+	.runtime-chat-command-menu__item {
+		display: flex;
+		width: 100%;
+		align-items: center;
+		gap: 0.6rem;
+		border: 0;
+		border-radius: 0.5rem;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+		padding: 0.55rem 0.6rem;
+		text-align: left;
+		transition: background 100ms ease;
+	}
+
+	.runtime-chat-command-menu__item:hover,
+	.runtime-chat-command-menu__item[data-selected='true'] {
+		background: var(--accent, rgba(0, 0, 0, 0.06));
+	}
+
+	.runtime-chat-command-menu__icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1rem;
+		height: 1rem;
+		flex: 0 0 auto;
+		color: var(--muted-foreground, #6b7280);
+	}
+
+	.runtime-chat-command-menu__copy {
+		display: grid;
+		min-width: 0;
+		gap: 0.1rem;
+	}
+
+	.runtime-chat-command-menu__copy strong,
+	.runtime-chat-command-menu__copy small {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.runtime-chat-command-menu__copy strong {
+		font-size: 0.875rem;
+		font-weight: 650;
+	}
+
+	.runtime-chat-command-menu__copy small {
+		color: var(--muted-foreground, #6b7280);
+		font-size: 0.75rem;
+	}
+</style>

package/dist/svelte/components/runtime/RuntimeChatCommandMenu.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { RuntimeChatCommandMenuItem, RuntimeChatParticipantOption } from './types.ts';
+type $$ComponentProps = {
+    open?: boolean;
+    type?: string | null;
+    query?: string;
+    agents?: RuntimeChatParticipantOption[];
+    users?: RuntimeChatParticipantOption[];
+    slashCommands?: RuntimeChatCommandMenuItem[];
+    augmentItems?: RuntimeChatCommandMenuItem[];
+    onSelect?: (value: string, type: 'mention' | 'command' | 'augment') => void;
+};
+declare const RuntimeChatCommandMenu: import("svelte").Component<$$ComponentProps, {}, "type" | "query" | "open">;
+type RuntimeChatCommandMenu = ReturnType<typeof RuntimeChatCommandMenu>;
+export default RuntimeChatCommandMenu;
+//# sourceMappingURL=RuntimeChatCommandMenu.svelte.d.ts.map

package/dist/svelte/components/runtime/RuntimeChatCommandMenu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeChatCommandMenu.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/runtime/RuntimeChatCommandMenu.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,0BAA0B,EAAE,4BAA4B,EAAE,MAAM,YAAY,CAAC;AAE1F,KAAK,gBAAgB,GAAI;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,4BAA4B,EAAE,CAAC;IACxC,KAAK,CAAC,EAAE,4BAA4B,EAAE,CAAC;IACvC,aAAa,CAAC,EAAE,0BAA0B,EAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,0BAA0B,EAAE,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;CAC5E,CAAC;AAyIH,QAAA,MAAM,sBAAsB,6EAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}