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

package/dist/svelte/components/SessionCockpit.svelte

@@ -0,0 +1,360 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Textarea } from '@vibesdotdev/kit/components/ui/textarea';
+	import { Icon } from '@vibesdotdev/kit/components';
+	import type {
+		SessionCockpitPage,
+		CockpitParticipant,
+		CockpitTodo,
+		CockpitPostMessage,
+		CockpitPostDecision,
+		CockpitMarkTodo,
+		TodoStatus
+	} from '@vibesdotdev/session/schemas';
+
+	// Presentational + callback-driven: the app owns the read-aggregate, the write
+	// handlers, and server-trusted identity. This component never imports a store,
+	// `$app`/`$lib`, or a runtime client — it renders `state` and emits intents.
+	let {
+		cockpit,
+		currentParticipantId,
+		busy = false,
+		onPostMessage,
+		onPostDecision,
+		onMarkTodo,
+		onLoadOlderMessages,
+		onLoadOlderTodos,
+		onTodoStatusChange,
+		onRefresh
+	}: {
+		cockpit: SessionCockpitPage;
+		currentParticipantId?: string;
+		busy?: boolean;
+		onPostMessage?: (input: CockpitPostMessage) => void;
+		onPostDecision?: (input: CockpitPostDecision) => void;
+		onMarkTodo?: (input: CockpitMarkTodo) => void;
+		onLoadOlderMessages?: (cursor: string) => void;
+		onLoadOlderTodos?: (cursor: string) => void;
+		onTodoStatusChange?: (status: TodoStatus | null) => void;
+		onRefresh?: () => void;
+	} = $props();
+
+	let messageContent = $state('');
+	let messageTo = $state('all');
+	let decisionKey = $state('');
+	let decisionContent = $state('');
+	const todoStatuses: Array<{ value: TodoStatus | null; label: string }> = [
+		{ value: null, label: 'All' },
+		{ value: 'blocked', label: 'Blocked' },
+		{ value: 'in_progress', label: 'Active' },
+		{ value: 'pending', label: 'Pending' },
+		{ value: 'completed', label: 'Done' }
+	];
+	let visibleTodos = $derived(
+		[...cockpit.todos.items].sort((a, b) => {
+			const rank = (todo: CockpitTodo) => (todo.status === 'blocked' ? 0 : todo.priority === 'urgent' ? 1 : 2);
+			return rank(a) - rank(b) || b.createdAt.localeCompare(a.createdAt) || b.id.localeCompare(a.id);
+		})
+	);
+
+	// Maps, not object literals: a drifted value such as `constructor` must miss, not read Object.prototype.
+	const presenceDot = new Map<string, string>([
+		['active', 'bg-green-500'],
+		['idle', 'bg-amber-500'],
+		['stale', 'bg-muted-foreground/40']
+	] satisfies Array<[CockpitParticipant['presence'], string]>);
+
+	// D-056: distinguish the human (Drew) from agents/lanes. Role is server-derived
+	// on the wire (never client-guessed); human gets the accent so it reads as a
+	// person, agents/lanes stay muted.
+	const roleBadge = new Map<string, { label: string; class: string }>([
+		['human', { label: 'human', class: 'bg-primary/15 text-primary' }],
+		['agent', { label: 'agent', class: 'bg-muted text-muted-foreground' }],
+		['lane', { label: 'lane', class: 'bg-muted text-muted-foreground' }]
+	] satisfies Array<[CockpitParticipant['role'], { label: string; class: string }]>);
+
+	// Defensive: a presentational component must not white-screen if server/cloud
+	// data carries a role/presence outside the known enum (e.g. a projection drift).
+	// Fall back to a neutral badge/dot instead of an undefined-lookup crash.
+	function badgeFor(role: string | null | undefined): { label: string; class: string } {
+		return (
+			(role ? roleBadge.get(role) : undefined) ?? {
+				label: role ?? 'unknown',
+				class: 'bg-muted text-muted-foreground'
+			}
+		);
+	}
+	function dotFor(presence: string | null | undefined): string {
+		return (
+			(presence ? presenceDot.get(presence) : undefined) ??
+			'bg-muted-foreground/40'
+		);
+	}
+
+	function roleFor(id: string): CockpitParticipant['role'] | null {
+		return cockpit.participants.find((x) => x.id === id)?.role ?? null;
+	}
+
+	function participantLabel(id: string, slug: string | null): string {
+		const p = cockpit.participants.find((x) => x.id === id);
+		return p?.name ?? p?.slug ?? slug ?? id.slice(0, 8);
+	}
+
+	function formatTimestamp(value: string): string {
+		const date = new Date(value);
+		if (Number.isNaN(date.getTime())) return value;
+		return new Intl.DateTimeFormat(undefined, {
+			month: 'short',
+			day: 'numeric',
+			hour: 'numeric',
+			minute: '2-digit'
+		}).format(date);
+	}
+
+	function formatCount(value: number): string {
+		return new Intl.NumberFormat().format(value);
+	}
+
+	function submitMessage(event: SubmitEvent) {
+		event.preventDefault();
+		if (busy || !messageContent.trim()) return;
+		onPostMessage?.({
+			toParticipant: messageTo.trim() || 'all',
+			messageType: 'info',
+			content: messageContent.trim()
+		});
+		messageContent = '';
+	}
+
+	function submitDecision(event: SubmitEvent) {
+		event.preventDefault();
+		if (busy || !decisionKey.trim() || !decisionContent.trim()) return;
+		onPostDecision?.({ key: decisionKey.trim(), content: decisionContent.trim() });
+		decisionKey = '';
+		decisionContent = '';
+	}
+
+	function cycleTodo(todo: CockpitTodo) {
+		if (busy) return;
+		const next: CockpitMarkTodo['status'] =
+			todo.status === 'pending'
+				? 'in_progress'
+				: todo.status === 'in_progress'
+					? 'completed'
+					: 'pending';
+		onMarkTodo?.({ todoId: todo.id, status: next });
+	}
+</script>
+
+<section class="mx-auto flex max-w-5xl flex-col gap-4 p-4" aria-label="Session cockpit">
+	<header class="flex items-center justify-between gap-3 border-b border-border pb-3">
+		<div class="min-w-0">
+			<h1 class="truncate text-xl font-semibold text-foreground">{cockpit.title}</h1>
+			<p class="text-xs text-muted-foreground">
+				<span class="font-mono">{cockpit.sessionId.slice(0, 8)}</span>
+				· {cockpit.status}
+				· {cockpit.summary.participantCount} participant{cockpit.summary.participantCount === 1 ? '' : 's'}
+			</p>
+		</div>
+		<Button variant="outline" size="sm" disabled={busy} onclick={() => onRefresh?.()}>
+			<Icon icon="lucide:refresh-cw" class="mr-2 h-4 w-4" />
+			Refresh
+		</Button>
+	</header>
+
+	<div class="grid grid-cols-2 gap-2 sm:grid-cols-4" aria-label="Session summary">
+		<div class="rounded-md border border-border bg-card p-3">
+			<p class="text-2xl font-semibold text-foreground">{formatCount(cockpit.summary.messageCount)}</p>
+			<p class="text-xs text-muted-foreground">Messages</p>
+		</div>
+		<div class="rounded-md border border-border bg-card p-3">
+			<p class="text-2xl font-semibold text-foreground"
+				>{formatCount(cockpit.summary.todoByStatus.in_progress)}</p
+			>
+			<p class="text-xs text-muted-foreground">In progress</p>
+		</div>
+		<div class="rounded-md border border-border bg-card p-3">
+			<p class="text-2xl font-semibold text-destructive"
+				>{formatCount(cockpit.summary.todoByStatus.blocked)}</p
+			>
+			<p class="text-xs text-muted-foreground">Blocked</p>
+		</div>
+		<div class="rounded-md border border-border bg-card p-3">
+			<p class="text-2xl font-semibold text-foreground">{formatCount(cockpit.summary.decisionCount)}</p>
+			<p class="text-xs text-muted-foreground">Decisions</p>
+		</div>
+	</div>
+
+	<!-- Roster -->
+	<div class="flex flex-wrap gap-2" aria-label="Participants">
+		{#each cockpit.participants as p (p.id)}
+			<span
+				class="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-2.5 py-1 text-xs"
+				class:ring-1={p.id === currentParticipantId}
+				class:ring-primary={p.id === currentParticipantId}
+			>
+				<span class="h-2 w-2 rounded-full {dotFor(p.presence)}" aria-hidden="true"></span>
+				<span class="font-medium text-foreground">{p.name ?? p.slug ?? p.id.slice(0, 8)}</span>
+				<span
+					class="rounded px-1 text-[0.6rem] uppercase {badgeFor(p.role).class}"
+					title={`role: ${p.role}`}>{badgeFor(p.role).label}</span
+				>
+			</span>
+		{/each}
+	</div>
+
+	<div class="grid gap-4 md:grid-cols-[2fr_1fr]">
+		<!-- Message feed -->
+		<div class="flex flex-col gap-3">
+			<div class="flex max-h-[26rem] flex-col gap-2 overflow-y-auto rounded-md border border-border p-3">
+				{#if cockpit.messages.items.length === 0}
+					<p class="text-sm text-muted-foreground">No messages yet.</p>
+				{:else}
+					{#each cockpit.messages.items as m (m.id)}
+						{@const authorRole = roleFor(m.fromParticipant)}
+						<article class="text-sm">
+							<div class="flex items-baseline gap-2">
+								<span class="font-semibold text-foreground"
+									>{participantLabel(m.fromParticipant, m.fromParticipantSlug)}</span
+								>
+								{#if authorRole}
+									<span class="rounded px-1 text-[0.6rem] uppercase {badgeFor(authorRole).class}"
+										>{badgeFor(authorRole).label}</span
+									>
+								{/if}
+								<span class="rounded bg-muted px-1 text-[0.65rem] uppercase text-muted-foreground"
+									>{m.messageType}</span
+								>
+								<span class="text-[0.65rem] text-muted-foreground"
+									title={m.createdAt}>{formatTimestamp(m.createdAt)}</span
+								>
+							</div>
+							<p class="whitespace-pre-wrap break-words text-foreground/90">{m.content}</p>
+						</article>
+					{/each}
+				{/if}
+			</div>
+			<div class="flex items-center justify-between gap-2 text-xs text-muted-foreground">
+				<span
+					>Showing {formatCount(cockpit.messages.items.length)} of {formatCount(cockpit.messages.total)}</span
+				>
+				{#if cockpit.messages.hasMore && cockpit.messages.nextCursor}
+					<Button
+						variant="outline"
+						size="sm"
+						disabled={busy}
+						onclick={() => onLoadOlderMessages?.(cockpit.messages.nextCursor!)}
+					>Older messages</Button>
+				{/if}
+			</div>
+
+			<form class="flex flex-col gap-2" onsubmit={submitMessage}>
+				<div class="flex gap-2">
+					<Input placeholder="to (all)" bind:value={messageTo} disabled={busy} class="w-28" />
+					<Textarea
+						placeholder="Post a message to the session…"
+						bind:value={messageContent}
+						disabled={busy}
+						rows={2}
+						class="flex-1"
+					/>
+				</div>
+				<Button type="submit" size="sm" disabled={busy || !messageContent.trim()} class="self-end">
+					Send
+				</Button>
+			</form>
+		</div>
+
+		<!-- Todos + decisions -->
+		<div class="flex flex-col gap-4">
+			<div>
+				<div class="mb-2 flex items-center justify-between gap-2">
+					<h2 class="text-xs font-semibold uppercase text-muted-foreground">Todos</h2>
+					<span class="text-xs text-muted-foreground">{formatCount(cockpit.todos.total)} total</span>
+				</div>
+				<div class="mb-2 flex flex-wrap gap-1" aria-label="Filter todos">
+					{#each todoStatuses as filter (filter.label)}
+						<button
+							type="button"
+							class={`rounded-full border px-2 py-0.5 text-[0.65rem] font-medium ${
+								cockpit.todos.statusFilter === filter.value
+									? 'border-primary bg-primary/10'
+									: 'border-border'
+							}`}
+							disabled={busy}
+							onclick={() => onTodoStatusChange?.(filter.value)}
+						>{filter.label}</button>
+					{/each}
+				</div>
+				<ul class="flex flex-col gap-1">
+					{#if visibleTodos.length === 0}
+						<li class="text-sm text-muted-foreground">None.</li>
+					{:else}
+						{#each visibleTodos as t (t.id)}
+							<li
+								class={`flex items-center gap-2 rounded px-1 py-0.5 text-sm ${
+									t.status === 'blocked' ? 'bg-destructive/10' : ''
+								}`}
+							>
+								<button
+									type="button"
+									class="shrink-0 rounded border border-border px-1.5 py-0.5 text-[0.65rem] uppercase text-muted-foreground hover:bg-muted disabled:opacity-50"
+									disabled={busy}
+									onclick={() => cycleTodo(t)}
+									aria-label="Cycle todo status"
+								>
+									{t.status}
+								</button>
+								<span class="min-w-0 truncate text-foreground/90">{t.content}</span>
+							</li>
+						{/each}
+					{/if}
+				</ul>
+				{#if cockpit.todos.hasMore && cockpit.todos.nextCursor}
+					<Button
+						variant="outline"
+						size="sm"
+						class="mt-2 w-full"
+						disabled={busy}
+						onclick={() => onLoadOlderTodos?.(cockpit.todos.nextCursor!)}
+					>Older todos</Button>
+				{/if}
+			</div>
+
+			<div>
+				<h2 class="mb-1.5 text-xs font-semibold uppercase text-muted-foreground">Decisions</h2>
+				<ul class="flex flex-col gap-1.5">
+					{#if cockpit.decisions.items.length === 0}
+						<li class="text-sm text-muted-foreground">None.</li>
+					{:else}
+						{#each cockpit.decisions.items as d (d.key)}
+							<li class="text-sm">
+								<span class="font-medium text-foreground">{d.title ?? d.key}</span>
+								<p class="break-words text-xs text-muted-foreground">{d.excerpt}</p>
+							</li>
+						{/each}
+					{/if}
+				</ul>
+				<form class="mt-2 flex flex-col gap-1.5" onsubmit={submitDecision}>
+					<Input placeholder="decision key" bind:value={decisionKey} disabled={busy} />
+					<Textarea
+						placeholder="decision note…"
+						bind:value={decisionContent}
+						disabled={busy}
+						rows={2}
+					/>
+					<Button
+						type="submit"
+						variant="outline"
+						size="sm"
+						disabled={busy || !decisionKey.trim() || !decisionContent.trim()}
+						class="self-end"
+					>
+						Record decision
+					</Button>
+				</form>
+			</div>
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,17 @@
+import type { SessionCockpitPage, CockpitPostMessage, CockpitPostDecision, CockpitMarkTodo, TodoStatus } from '@vibesdotdev/session/schemas';
+type $$ComponentProps = {
+    cockpit: SessionCockpitPage;
+    currentParticipantId?: string;
+    busy?: boolean;
+    onPostMessage?: (input: CockpitPostMessage) => void;
+    onPostDecision?: (input: CockpitPostDecision) => void;
+    onMarkTodo?: (input: CockpitMarkTodo) => void;
+    onLoadOlderMessages?: (cursor: string) => void;
+    onLoadOlderTodos?: (cursor: string) => void;
+    onTodoStatusChange?: (status: TodoStatus | null) => void;
+    onRefresh?: () => void;
+};
+declare const SessionCockpit: import("svelte").Component<$$ComponentProps, {}, "">;
+type SessionCockpit = ReturnType<typeof SessionCockpit>;
+export default SessionCockpit;
+//# sourceMappingURL=SessionCockpit.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SessionCockpit.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SessionCockpit.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,kBAAkB,EAGlB,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,UAAU,EACV,MAAM,8BAA8B,CAAC;AAEtC,KAAK,gBAAgB,GAAI;IACxB,OAAO,EAAE,kBAAkB,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACpD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACtD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC9C,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IACzD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AA2RH,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @vibesdotdev/session/svelte
+ *
+ * Svelte surface for the session domain. `SessionCockpit` is the participatory
+ * cockpit view — live message feed, participant roster, decisions, and todos —
+ * rendered from the canonical `@vibesdotdev/session` cockpit schemas.
+ *
+ * Presentational + callback-driven (SURFACE-PACKAGE-CONVENTIONS §2, the
+ * "no-runtime-parent" case): the component accepts an already-aggregated
+ * `SessionCockpitPage` via props and emits write intents (`onPostMessage`,
+ * `onPostDecision`, `onMarkTodo`) as callbacks. The consuming app owns the
+ * `runtime.query()` read-aggregate, the write handlers, and server-trusted
+ * identity (fromParticipant derived from `locals`, never the client). This
+ * package imports no `$app`/`$lib`/`*-system`/store/runtime-client.
+ */
+export { default as SessionCockpit } from './components/SessionCockpit.svelte';
+export type { SessionCockpitPage, CockpitParticipant, CockpitMessage, CockpitTodo, CockpitDecision, CockpitPostMessage, CockpitPostDecision, CockpitMarkTodo, TodoStatus } from '@vibesdotdev/session/schemas';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAE/E,YAAY,EACX,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,UAAU,EACV,MAAM,8BAA8B,CAAC"}

package/dist/svelte/index.js

@@ -0,0 +1,16 @@
+/**
+ * @vibesdotdev/session/svelte
+ *
+ * Svelte surface for the session domain. `SessionCockpit` is the participatory
+ * cockpit view — live message feed, participant roster, decisions, and todos —
+ * rendered from the canonical `@vibesdotdev/session` cockpit schemas.
+ *
+ * Presentational + callback-driven (SURFACE-PACKAGE-CONVENTIONS §2, the
+ * "no-runtime-parent" case): the component accepts an already-aggregated
+ * `SessionCockpitPage` via props and emits write intents (`onPostMessage`,
+ * `onPostDecision`, `onMarkTodo`) as callbacks. The consuming app owns the
+ * `runtime.query()` read-aggregate, the write handlers, and server-trusted
+ * identity (fromParticipant derived from `locals`, never the client). This
+ * package imports no `$app`/`$lib`/`*-system`/store/runtime-client.
+ */
+export { default as SessionCockpit } from './components/SessionCockpit.svelte';

package/dist/svelte/session-svelte.plugin.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Runtime plugin (read-surface parity).
+ *
+ * Chat hosts discover session-owned tool-call cards through `tools/ui`, not a
+ * host-local card table. Importing this module also fills Kit's in-memory
+ * widget registry via `createSvelteToolWidgetLoader`.
+ */
+export declare const sessionSveltePlugin: import("@vibesdotdev/kernel").RuntimePlugin;
+export default sessionSveltePlugin;
+//# sourceMappingURL=session-svelte.plugin.d.ts.map

package/dist/svelte/session-svelte.plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"session-svelte.plugin.d.ts","sourceRoot":"","sources":["../../src/svelte/session-svelte.plugin.ts"],"names":[],"mappings":"AAqDA;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,6CAqB9B,CAAC;AAEH,eAAe,mBAAmB,CAAC"}

package/dist/svelte/session-svelte.plugin.js

@@ -0,0 +1,54 @@
+import { createRuntimeImplementation, createRuntimePlugin, loader, settle } from '@vibesdotdev/kernel';
+function createSvelteToolWidgetDescriptor(options) {
+    return {
+        id: `${options.toolId}.svelte-widget`,
+        kind: 'tools/ui',
+        name: `${options.toolId} Svelte Widget`,
+        description: `Renders ${options.toolId} tool results in Svelte surfaces.`,
+        surfaces: ['web'],
+        role: 'widget',
+        targetToolId: options.toolId,
+        enabled: true
+    };
+}
+const kitToolWidgets = await settle(() => import('@vibesdotdev/kit/components/tool-widgets'));
+const registerKitToolWidget = kitToolWidgets.ok ? kitToolWidgets.value.registerToolWidget : undefined;
+function createSvelteToolWidgetLoader(descriptor, load) {
+    registerKitToolWidget?.(descriptor.targetToolId, load);
+    return loader(descriptor.id, { kind: 'tools/ui', scope: 'browser' }, async () => {
+        registerKitToolWidget?.(descriptor.targetToolId, load);
+        const module = await load();
+        return createRuntimeImplementation({
+            kind: 'tools/ui',
+            id: descriptor.id,
+            implementation: { web: { component: module.default } }
+        });
+    });
+}
+const session = createSvelteToolWidgetDescriptor({ toolId: 'session' });
+const sessionTodo = createSvelteToolWidgetDescriptor({ toolId: 'session-todo' });
+const sessionScratchpad = createSvelteToolWidgetDescriptor({ toolId: 'session-scratchpad' });
+const sessionCollaborate = createSvelteToolWidgetDescriptor({ toolId: 'session-collaborate' });
+const sessionWorkspace = createSvelteToolWidgetDescriptor({ toolId: 'session-workspace' });
+/**
+ * Runtime plugin (read-surface parity).
+ *
+ * Chat hosts discover session-owned tool-call cards through `tools/ui`, not a
+ * host-local card table. Importing this module also fills Kit's in-memory
+ * widget registry via `createSvelteToolWidgetLoader`.
+ */
+export const sessionSveltePlugin = createRuntimePlugin({
+    id: '@vibesdotdev/session/svelte',
+    name: 'Session Svelte',
+    description: 'Svelte/browser tool-call cards for session-owned tools',
+    dependencies: ['tools'],
+    descriptors: [session, sessionTodo, sessionScratchpad, sessionCollaborate, sessionWorkspace],
+    loaders: [
+        createSvelteToolWidgetLoader(session, () => import('./tool-widgets/SessionToolCard.svelte')),
+        createSvelteToolWidgetLoader(sessionTodo, () => import('./tool-widgets/SessionTodoToolCard.svelte')),
+        createSvelteToolWidgetLoader(sessionScratchpad, () => import('./tool-widgets/SessionScratchpadToolCard.svelte')),
+        createSvelteToolWidgetLoader(sessionCollaborate, () => import('./tool-widgets/SessionCollaborateToolCard.svelte')),
+        createSvelteToolWidgetLoader(sessionWorkspace, () => import('./tool-widgets/SessionWorkspaceToolCard.svelte'))
+    ]
+});
+export default sessionSveltePlugin;

package/dist/svelte/styles.css

@@ -0,0 +1,6 @@
+/*
+ * Tailwind v4 source declaration for consumers. Importing this entry makes
+ * utilities used by SessionCockpit visible to the consuming app's Tailwind
+ * build even when the package resolves from node_modules/dist.
+ */
+@source "./";

package/dist/svelte/tool-widgets/SessionCollaborateToolCard.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	/**
+	 * First-party widget for `session-collaborate`: action, from, message excerpt.
+	 */
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import {
+		ToolCard,
+		ToolCardBody,
+		type ToolWidgetProps
+	} from '@vibesdotdev/kit/components/tool-widgets';
+	import { readCollaborateCard } from './card-fields.js';
+
+	let { tool, compact = false }: ToolWidgetProps = $props();
+
+	const view = $derived(readCollaborateCard(tool));
+	const action = $derived(view.action);
+	const title = $derived(view.title);
+	const from = $derived(view.from);
+	const marked = $derived(view.marked);
+	const messageExcerpt = $derived(view.messageExcerpt);
+	const messages = $derived(view.messages);
+</script>
+
+<ToolCard {tool} {compact} {title} icon="lucide:message-square">
+	<ToolCardBody {compact}>
+		<div class="flex flex-wrap items-center gap-1.5">
+			<Badge variant="outline" class="text-caption">{action}</Badge>
+			{#if from}
+				<Badge variant="secondary" class="max-w-full truncate text-caption">{from}</Badge>
+			{/if}
+			{#if marked !== null}
+				<Badge variant="secondary" class="text-caption">{marked} read</Badge>
+			{/if}
+		</div>
+		{#if messageExcerpt}
+			<p class="whitespace-pre-wrap text-foreground">{messageExcerpt}</p>
+		{/if}
+		{#if messages.length}
+			<ul class="space-y-1.5">
+				{#each messages.slice(0, 8) as row (row.id)}
+					<li class="min-w-0">
+						{#if row.from}
+							<span class="block truncate font-medium text-foreground">{row.from}</span>
+						{/if}
+						{#if row.excerpt}
+							<span class="block line-clamp-2 text-muted-foreground">{row.excerpt}</span>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</ToolCardBody>
+</ToolCard>

package/dist/svelte/tool-widgets/SessionCollaborateToolCard.svelte.d.ts

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

package/dist/svelte/tool-widgets/SessionCollaborateToolCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionCollaborateToolCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/tool-widgets/SessionCollaborateToolCard.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAGL,KAAK,eAAe,EACpB,MAAM,0CAA0C,CAAC;AAqDnD,QAAA,MAAM,0BAA0B,qDAAwC,CAAC;AACzE,KAAK,0BAA0B,GAAG,UAAU,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAChF,eAAe,0BAA0B,CAAC"}

package/dist/svelte/tool-widgets/SessionScratchpadToolCard.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	/**
+	 * First-party widget for `session-scratchpad`: action, key/title, excerpt.
+	 */
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import {
+		ToolCard,
+		ToolCardBody,
+		type ToolWidgetProps
+	} from '@vibesdotdev/kit/components/tool-widgets';
+	import { readScratchpadCard } from './card-fields.js';
+
+	let { tool, compact = false }: ToolWidgetProps = $props();
+
+	const view = $derived(readScratchpadCard(tool));
+	const action = $derived(view.action);
+	const title = $derived(view.title);
+	const path = $derived(view.path);
+	const contentExcerpt = $derived(view.contentExcerpt);
+	const entries = $derived(view.entries);
+</script>
+
+<ToolCard {tool} {compact} {title} icon="lucide:notebook-pen">
+	<ToolCardBody {compact}>
+		<div class="flex flex-wrap items-center gap-1.5">
+			<Badge variant="outline" class="text-caption">{action}</Badge>
+			{#if path}
+				<Badge variant="secondary" class="max-w-full truncate font-mono text-caption">{path}</Badge>
+			{/if}
+		</div>
+		{#if contentExcerpt}
+			<p class="whitespace-pre-wrap text-muted-foreground">{contentExcerpt}</p>
+		{/if}
+		{#if entries.length}
+			<ul class="space-y-1.5">
+				{#each entries.slice(0, 8) as row (row.key)}
+					<li class="min-w-0">
+						<span class="block truncate font-mono text-foreground">{row.title}</span>
+						{#if row.excerpt}
+							<span class="block line-clamp-2 text-muted-foreground">{row.excerpt}</span>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</ToolCardBody>
+</ToolCard>

package/dist/svelte/tool-widgets/SessionScratchpadToolCard.svelte.d.ts

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

package/dist/svelte/tool-widgets/SessionScratchpadToolCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionScratchpadToolCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/tool-widgets/SessionScratchpadToolCard.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAGL,KAAK,eAAe,EACpB,MAAM,0CAA0C,CAAC;AA+CnD,QAAA,MAAM,yBAAyB,qDAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}

package/dist/svelte/tool-widgets/SessionTodoToolCard.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	/**
+	 * First-party widget for `session-todo`: action, content, and todo status.
+	 */
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import {
+		ToolCard,
+		ToolCardBody,
+		type ToolWidgetProps
+	} from '@vibesdotdev/kit/components/tool-widgets';
+	import { readTodoCard } from './card-fields.js';
+
+	let { tool, compact = false }: ToolWidgetProps = $props();
+
+	const view = $derived(readTodoCard(tool));
+	const action = $derived(view.action);
+	const title = $derived(view.title);
+	const content = $derived(view.content);
+	const todos = $derived(view.todos);
+</script>
+
+<ToolCard {tool} {compact} {title} icon="lucide:list-checks">
+	<ToolCardBody {compact}>
+		<div class="flex flex-wrap items-center gap-1.5">
+			<Badge variant="outline" class="text-caption">{action}</Badge>
+		</div>
+		{#if content && (todos.length !== 1 || todos[0]?.content !== content)}
+			<p class="text-foreground">{content}</p>
+		{/if}
+		{#if todos.length}
+			<ul class="space-y-1.5">
+				{#each todos.slice(0, 8) as row (row.id)}
+					<li class="flex items-start gap-2">
+						<span class="min-w-0 flex-1 text-foreground">{row.content || 'Todo'}</span>
+						{#if row.status}
+							<Badge variant="secondary" class="shrink-0 text-caption">{row.status}</Badge>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</ToolCardBody>
+</ToolCard>