@vibesdotdev/control 0.0.0-stage → 1.0.0-rc.3

package/dist/svelte/browser/BrowserWorkspace.svelte

@@ -0,0 +1,450 @@
+<script module lang="ts">
+	export type { BrowserObservedPage, BrowserWorkspaceData } from './types.js';
+</script>
+
+<script lang="ts">
+	/**
+	 * BrowserWorkspace — the consumer control surface for the browser-automation
+	 * feature. Sessions list (with a profile filter) on the left; the selected
+	 * session's detail (status, base URL, profile, storage-state, timestamps),
+	 * its tabs, the recipe library, and an observed-page panel on the right.
+	 *
+	 * Data source: the host supplies records through `data` or an async `load`
+	 * function. This presentation package never imports the consumer browser client:
+	 * that client owns Playwright and local filesystem lifecycle and cannot enter a
+	 * web or workerd bundle. When no data source is supplied, the surface shows an
+	 * honest disconnected state; it never fabricates sessions.
+	 *
+	 * Registers NO runtime kinds — this is a *view* over host-supplied browser data.
+	 *
+	 * SEAMS (honest, not faked):
+	 *  - Observed-page panel: renders a real screenshot only when one is supplied
+	 *    via `observed` / `loadObserved` (the `observe` action's output). With no
+	 *    snapshot it shows a placeholder describing what a live capture would show.
+	 *    The live wire (host resolves the browser client + calls `observe`) lands
+	 *    with the hq-web route in C4 — this component only leaves the clean seam.
+	 *  - `data` / `load` props let a host feed records from the runtime appropriate
+	 *    to that host (SSR hydration, consumer client, cloud API, fixtures, or tests).
+	 */
+	import { onMount } from 'svelte';
+	import { settle } from '@vibesdotdev/kernel';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import * as Select from '@vibesdotdev/kit/components/ui/select';
+	import {
+		Camera,
+		Clock3,
+		Globe,
+		Layers,
+		RotateCw,
+		ScrollText,
+		SquareStack,
+		UserRound
+	} from '@lucide/svelte';
+	import { getBrowserWorkspaceState as scopedWorkspaceState, type BrowserWorkspaceSelectionState } from './state.svelte.js';
+	import type {
+		BrowserSession,
+		BrowserProfile,
+		BrowserTab,
+		BrowserRecipe
+	} from '@vibesdotdev/control/browser-automation';
+	import type { BrowserObservedPage, BrowserWorkspaceData } from './types.js';
+
+	interface Props {
+		state?: BrowserWorkspaceSelectionState;
+		class?: string;
+		title?: string;
+		/** Host-supplied records rendered directly without resolving a transport. */
+		data?: BrowserWorkspaceData;
+		/** Host-owned loader for the runtime/transport appropriate to the mounting surface. */
+		load?: () => Promise<BrowserWorkspaceData>;
+		/** Injected observed-page snapshot for the active session (the live seam). */
+		observed?: BrowserObservedPage | null;
+		/** Live observed-page loader; called when a session is focused. Left unset → seam only. */
+		loadObserved?: (sessionId: string) => Promise<BrowserObservedPage | null>;
+	}
+
+	let {
+		state: selectionState = scopedWorkspaceState(),
+		class: className = '',
+		title = 'Browser sessions',
+		data,
+		load,
+		observed = null,
+		loadObserved
+	}: Props = $props();
+
+	const browserWorkspaceState = $derived(selectionState);
+
+
+	type Status = 'loading' | 'ready' | 'empty' | 'error';
+
+	let status = $state<Status>('loading');
+	let notice = $state('Connecting to browser runtime…');
+	let sessions = $state<BrowserSession[]>([]);
+	let profiles = $state<BrowserProfile[]>([]);
+	let tabs = $state<BrowserTab[]>([]);
+	let recipes = $state<BrowserRecipe[]>([]);
+	let liveObserved = $state<BrowserObservedPage | null>(null);
+	let loadGeneration = 0;
+
+	const profileFilter = $derived(browserWorkspaceState.profileFilter);
+
+	const profileName = $derived.by(() => {
+		const byId = new Map(profiles.map((p) => [p.id, p.name]));
+		return (id: string | undefined): string | null => (id ? (byId.get(id) ?? id) : null);
+	});
+
+	const visibleSessions = $derived(
+		profileFilter ? sessions.filter((s) => s.profileId === profileFilter) : sessions
+	);
+
+	const selectedSession = $derived(
+		visibleSessions.find((s) => s.id === browserWorkspaceState.activeSessionId) ?? null
+	);
+
+	const sessionTabs = $derived(
+		selectedSession ? tabs.filter((t) => t.sessionId === selectedSession.id) : []
+	);
+
+	const activeCount = $derived(sessions.filter((s) => s.status === 'active').length);
+
+	// Injected snapshot takes precedence over the live-loaded one.
+	const observedPage = $derived(observed ?? liveObserved);
+
+	function apply(next: BrowserWorkspaceData): void {
+		sessions = [...next.sessions];
+		profiles = [...next.profiles];
+		tabs = [...next.tabs];
+		recipes = [...next.recipes];
+		// Keep or seed the active selection so cross-route focus survives a reload.
+		const stillVisible =
+			browserWorkspaceState.activeSessionId &&
+			visibleSessions.some((s) => s.id === browserWorkspaceState.activeSessionId);
+		if (!stillVisible) {
+			browserWorkspaceState.selectSession(visibleSessions[0]?.id ?? null);
+		}
+		status = sessions.length > 0 ? 'ready' : 'empty';
+		notice =
+			status === 'ready'
+				? `${sessions.length} ${sessions.length === 1 ? 'session' : 'sessions'} · ${activeCount} active`
+				: 'No browser sessions yet.';
+	}
+
+
+	async function refresh(): Promise<void> {
+		const generation = ++loadGeneration;
+		status = 'loading';
+		notice = 'Loading browser sessions…';
+        const result = await settle(async () => load
+          ? load()
+          : (data ?? { sessions: [], profiles: [], tabs: [], recipes: [] }));
+        if (generation !== loadGeneration) return;
+        if (result.ok) {
+          apply(result.value);
+          if (!load && !data) notice = 'Not connected to a browser data source.';
+        } else {
+          status = 'error';
+          notice = `Browser data source failed: ${result.cause instanceof Error ? result.cause.message : String(result.cause)}`;
+        }
+	}
+
+	onMount(() => {
+		if (data) {
+			apply(data);
+			return;
+		}
+		void refresh();
+	});
+
+	// Pull a live observed-page snapshot when the focused session changes and a
+	// loader is wired. Without a loader the panel stays a placeholder (the seam).
+	$effect(() => {
+		const id = selectedSession?.id;
+		const loader = loadObserved;
+		if (!id || !loader) {
+			liveObserved = null;
+			return;
+		}
+		let cancelled = false;
+        void settle(() => loader(id)).then(result => {
+          if (cancelled) return;
+          if (result.ok) liveObserved = result.value;
+          else {
+            liveObserved = null;
+            status = 'error';
+            notice = `Observation failed: ${result.cause instanceof Error ? result.cause.message : String(result.cause)}`;
+          }
+        });
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	function handleProfileChange(value: string | undefined): void {
+		browserWorkspaceState.setProfileFilter(value && value !== 'all' ? value : null);
+	}
+
+	function selectSession(id: string): void {
+		browserWorkspaceState.selectSession(id);
+	}
+
+	function fmt(ts: string | undefined): string {
+		if (!ts) return '—';
+		const d = new Date(ts);
+		if (Number.isNaN(d.getTime())) return ts;
+		return d.toLocaleString();
+	}
+</script>
+
+<section
+	class={`flex h-full min-h-[440px] flex-col gap-3 overflow-hidden ${className}`}
+	aria-label={title}
+	data-browser-workspace
+	data-browser-status={status}
+>
+	<header class="flex flex-wrap items-center justify-between gap-3">
+		<div class="min-w-0">
+			<div class="flex items-center gap-2">
+				<Globe class="h-4 w-4 shrink-0 text-muted-foreground" />
+				<h2 class="truncate text-sm font-semibold text-foreground">{title}</h2>
+				{#if status === 'ready'}
+					<Badge variant="outline" class="gap-1 text-[0.6rem]">
+						{sessions.length}
+						{sessions.length === 1 ? 'session' : 'sessions'}
+					</Badge>
+					{#if activeCount > 0}
+						<Badge variant="success" class="gap-1 text-[0.6rem]">{activeCount} active</Badge>
+					{/if}
+				{/if}
+			</div>
+			<p class="mt-1 truncate text-xs text-muted-foreground">{notice}</p>
+		</div>
+		<div class="flex items-center gap-2">
+			{#if profiles.length > 0}
+				<Select.Root
+					type="single"
+					value={profileFilter ?? 'all'}
+					onValueChange={handleProfileChange}
+				>
+					<Select.Trigger class="h-8 w-44 text-xs">
+						{profileFilter ? (profileName(profileFilter) ?? 'Profile') : 'All profiles'}
+					</Select.Trigger>
+					<Select.Content>
+						<Select.Item value="all">All profiles</Select.Item>
+						{#each profiles as profile (profile.id)}
+							<Select.Item value={profile.id}>{profile.name}</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			{/if}
+			<Button
+				variant="outline"
+				size="sm"
+				class="h-8 gap-1.5 text-xs"
+				onclick={() => void refresh()}
+				disabled={status === 'loading'}
+			>
+				<RotateCw class="h-3.5 w-3.5" />
+				Refresh
+			</Button>
+		</div>
+	</header>
+
+	{#if status === 'loading'}
+		<div
+			class="grid min-h-64 flex-1 place-items-center rounded-xl border border-dashed border-border bg-muted/20 p-6 text-center"
+		>
+			<p class="text-sm text-muted-foreground">{notice}</p>
+		</div>
+	{:else if status === 'error'}
+		<div
+			class="grid min-h-64 flex-1 place-items-center rounded-xl border border-dashed border-destructive/40 bg-destructive/5 p-6 text-center"
+		>
+			<div class="space-y-1">
+				<p class="text-sm font-medium text-destructive">Couldn't load browser sessions</p>
+				<p class="text-xs text-muted-foreground">{notice}</p>
+			</div>
+		</div>
+	{:else if status === 'empty'}
+		<div
+			class="grid min-h-64 flex-1 place-items-center rounded-xl border border-dashed border-border bg-muted/20 p-8 text-center"
+		>
+			<div class="max-w-sm space-y-2">
+				<SquareStack class="mx-auto h-6 w-6 text-muted-foreground/70" />
+				<p class="text-sm font-medium text-foreground">{notice}</p>
+				<p class="text-xs text-muted-foreground">
+					Browser sessions appear after an agent runs a browser tool or when a connected machine
+					provides browser automation.
+				</p>
+			</div>
+		</div>
+	{:else}
+		<div class="grid min-h-0 flex-1 grid-cols-[minmax(0,20rem)_minmax(0,1fr)] gap-3 overflow-hidden">
+			<!-- Sessions list -->
+			<ul class="min-h-0 space-y-1.5 overflow-y-auto pr-1" aria-label="Browser sessions">
+				{#each visibleSessions as session (session.id)}
+					{@const selected = session.id === selectedSession?.id}
+					<li>
+						<button
+							type="button"
+							class={`w-full rounded-lg border px-3 py-2 text-left transition-colors ${
+								selected
+									? 'border-primary/60 bg-primary/5'
+									: 'border-border bg-card hover:border-border hover:bg-muted/40'
+							}`}
+							aria-current={selected}
+							onclick={() => selectSession(session.id)}
+						>
+							<div class="flex items-center justify-between gap-2">
+								<span class="truncate text-sm font-medium text-foreground">{session.name}</span>
+								<Badge
+									variant={session.status === 'active' ? 'success' : 'outline'}
+									class="shrink-0 text-[0.55rem]"
+								>
+									{session.status}
+								</Badge>
+							</div>
+							{#if session.baseUrl}
+								<p class="mt-0.5 truncate text-xs text-muted-foreground">{session.baseUrl}</p>
+							{/if}
+							<p class="mt-1 flex items-center gap-1 text-[0.65rem] text-muted-foreground">
+								<Clock3 class="h-3 w-3 shrink-0" />
+								<span class="truncate">used {fmt(session.lastUsedAt)}</span>
+							</p>
+						</button>
+					</li>
+				{:else}
+					<li class="rounded-lg border border-dashed border-border p-4 text-center text-xs text-muted-foreground">
+						No sessions for this profile.
+					</li>
+				{/each}
+			</ul>
+
+			<!-- Detail -->
+			<div class="min-h-0 overflow-y-auto rounded-xl border border-border bg-card">
+				{#if selectedSession}
+					<div class="space-y-4 p-4">
+						<div>
+							<div class="flex flex-wrap items-center gap-2">
+								<h3 class="truncate text-sm font-semibold text-foreground">{selectedSession.name}</h3>
+								<Badge
+									variant={selectedSession.status === 'active' ? 'success' : 'outline'}
+									class="text-[0.55rem]"
+								>
+									{selectedSession.status}
+								</Badge>
+							</div>
+							<dl class="mt-2 grid grid-cols-1 gap-x-4 gap-y-1.5 text-xs sm:grid-cols-2">
+								<div class="flex items-center gap-1.5 text-muted-foreground">
+									<Globe class="h-3 w-3 shrink-0" />
+									<dt class="sr-only">Base URL</dt>
+									<dd class="truncate text-foreground">{selectedSession.baseUrl ?? '—'}</dd>
+								</div>
+								<div class="flex items-center gap-1.5 text-muted-foreground">
+									<UserRound class="h-3 w-3 shrink-0" />
+									<dt class="sr-only">Profile</dt>
+									<dd class="truncate text-foreground">
+										{profileName(selectedSession.profileId) ?? 'default'}
+									</dd>
+								</div>
+								<div class="flex items-center gap-1.5 text-muted-foreground">
+									<ScrollText class="h-3 w-3 shrink-0" />
+									<dt class="sr-only">Storage state</dt>
+									<dd class="truncate text-foreground">{selectedSession.storageStatePath ?? 'none'}</dd>
+								</div>
+								<div class="flex items-center gap-1.5 text-muted-foreground">
+									<Clock3 class="h-3 w-3 shrink-0" />
+									<dt class="sr-only">Created</dt>
+									<dd class="truncate text-foreground">created {fmt(selectedSession.createdAt)}</dd>
+								</div>
+							</dl>
+						</div>
+
+						<!-- Observed-page panel (live seam) -->
+						<div class="rounded-lg border border-border bg-muted/20">
+							<div class="flex items-center gap-1.5 border-b border-border px-3 py-2">
+								<Camera class="h-3.5 w-3.5 text-muted-foreground" />
+								<span class="text-xs font-medium text-foreground">Observed page</span>
+							</div>
+							{#if observedPage?.screenshotUrl}
+								<figure class="p-3">
+									<img
+										src={observedPage.screenshotUrl}
+										alt={observedPage.title ?? 'Observed page screenshot'}
+										class="w-full rounded border border-border"
+									/>
+									<figcaption class="mt-1.5 truncate text-[0.65rem] text-muted-foreground">
+										{observedPage.title ?? observedPage.url ?? ''}
+										{#if observedPage.capturedAt}· {fmt(observedPage.capturedAt)}{/if}
+									</figcaption>
+								</figure>
+							{:else}
+								<div class="p-4 text-center text-xs text-muted-foreground">
+									No live view captured. Run the
+									<code class="rounded bg-muted px-1 py-0.5 text-[0.7rem]">observe</code>
+									action to capture this session's current page.
+								</div>
+							{/if}
+						</div>
+
+						<!-- Tabs -->
+						<div>
+							<div class="mb-1.5 flex items-center gap-1.5">
+								<Layers class="h-3.5 w-3.5 text-muted-foreground" />
+								<span class="text-xs font-medium text-foreground">Tabs</span>
+								<Badge variant="outline" class="text-[0.55rem]">{sessionTabs.length}</Badge>
+							</div>
+							{#if sessionTabs.length > 0}
+								<ul class="space-y-1">
+									{#each sessionTabs as tab (tab.id)}
+										<li
+											class="flex items-center justify-between gap-2 rounded-md border border-border px-2.5 py-1.5 text-xs"
+										>
+											<span class="truncate text-foreground">{tab.url ?? tab.id}</span>
+											<Badge
+												variant={tab.status === 'open' ? 'info' : 'outline'}
+												class="shrink-0 text-[0.55rem]"
+											>
+												{tab.status}
+											</Badge>
+										</li>
+									{/each}
+								</ul>
+							{:else}
+								<p class="text-xs text-muted-foreground">No tabs recorded for this session.</p>
+							{/if}
+						</div>
+
+						<!-- Recipe library -->
+						<div>
+							<div class="mb-1.5 flex items-center gap-1.5">
+								<ScrollText class="h-3.5 w-3.5 text-muted-foreground" />
+								<span class="text-xs font-medium text-foreground">Recipe library</span>
+								<Badge variant="outline" class="text-[0.55rem]">{recipes.length}</Badge>
+							</div>
+							{#if recipes.length > 0}
+								<ul class="space-y-1">
+									{#each recipes as recipe (recipe.id)}
+										<li
+											class="flex items-center justify-between gap-2 rounded-md border border-border px-2.5 py-1.5 text-xs"
+										>
+											<span class="truncate text-foreground">{recipe.name}</span>
+											<Badge variant="outline" class="shrink-0 text-[0.55rem]">{recipe.type}</Badge>
+										</li>
+									{/each}
+								</ul>
+							{:else}
+								<p class="text-xs text-muted-foreground">No saved recipes.</p>
+							{/if}
+						</div>
+					</div>
+				{:else}
+					<div class="grid h-full place-items-center p-6 text-center">
+						<p class="text-sm text-muted-foreground">Select a session to see its detail.</p>
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+</section>

package/dist/svelte/browser/BrowserWorkspace.svelte.d.ts

@@ -0,0 +1,20 @@
+export type { BrowserObservedPage, BrowserWorkspaceData } from './types.ts';
+import { type BrowserWorkspaceSelectionState } from './state.svelte.ts';
+import type { BrowserObservedPage, BrowserWorkspaceData } from './types.ts';
+interface Props {
+    state?: BrowserWorkspaceSelectionState;
+    class?: string;
+    title?: string;
+    /** Host-supplied records rendered directly without resolving a transport. */
+    data?: BrowserWorkspaceData;
+    /** Host-owned loader for the runtime/transport appropriate to the mounting surface. */
+    load?: () => Promise<BrowserWorkspaceData>;
+    /** Injected observed-page snapshot for the active session (the live seam). */
+    observed?: BrowserObservedPage | null;
+    /** Live observed-page loader; called when a session is focused. Left unset → seam only. */
+    loadObserved?: (sessionId: string) => Promise<BrowserObservedPage | null>;
+}
+declare const BrowserWorkspace: import("svelte").Component<Props, {}, "">;
+type BrowserWorkspace = ReturnType<typeof BrowserWorkspace>;
+export default BrowserWorkspace;
+//# sourceMappingURL=BrowserWorkspace.svelte.d.ts.map

package/dist/svelte/browser/BrowserWorkspace.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrowserWorkspace.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/browser/BrowserWorkspace.svelte.ts"],"names":[],"mappings":"AAGC,YAAY,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAyC7E,OAAO,EAAoD,KAAK,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAO1H,OAAO,KAAK,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAG3E,UAAU,KAAK;IACd,KAAK,CAAC,EAAE,8BAA8B,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,uFAAuF;IACvF,IAAI,CAAC,EAAE,MAAM,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC3C,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACtC,2FAA2F;IAC3F,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;CAC1E;AAyWF,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/browser/browser-automation-svelte.plugin.d.ts

@@ -0,0 +1,3 @@
+export declare const browserAutomationSveltePlugin: import("@vibesdotdev/kernel").RuntimePlugin;
+export default browserAutomationSveltePlugin;
+//# sourceMappingURL=browser-automation-svelte.plugin.d.ts.map

package/dist/svelte/browser/browser-automation-svelte.plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-automation-svelte.plugin.d.ts","sourceRoot":"","sources":["../../../src/svelte/browser/browser-automation-svelte.plugin.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,6BAA6B,6CAkBxC,CAAC;AAEH,eAAe,6BAA6B,CAAC"}

package/dist/svelte/browser/browser-automation-svelte.plugin.js

@@ -0,0 +1,25 @@
+import { browserWorkspaceComposition } from "../../browser/client/workspace-client.js";
+import { createRuntimePlugin } from '@vibesdotdev/kernel';
+import browserAutomationSvelteDocsDescriptor from "./docs/browser-automation-svelte.docs.descriptor.js";
+import { createSvelteToolWidgetDescriptor, createSvelteToolWidgetLoader } from '@vibesdotdev/tools/svelte/tool-widgets';
+const browserWidgetDescriptor = createSvelteToolWidgetDescriptor({
+    toolId: 'browser',
+    placement: 'top'
+});
+export const browserAutomationSveltePlugin = createRuntimePlugin({
+    // Plugin ids are how consumers resolve; this one is preserved verbatim
+    // through the bridge → control move even though it names the old package.
+    // Renaming it is part of "4. Close the old path" in
+    // docs/architecture/APP-PACKAGE-SPLIT-PLAYBOOK.md, together with the
+    // consumer sweep — not this split.
+    id: '@vibesdotdev/bridge/browser-automation/svelte',
+    name: 'Browser Automation Svelte',
+    description: 'Svelte browser-automation presentation surfaces and the designed `browser` tools/ui widget.',
+    dependencies: ['tools', 'runtime-client'],
+    descriptors: [...browserWorkspaceComposition.descriptors, browserAutomationSvelteDocsDescriptor, browserWidgetDescriptor],
+    loaders: [
+        ...browserWorkspaceComposition.loaders,
+        createSvelteToolWidgetLoader(browserWidgetDescriptor, () => import('./tool-widgets/BrowserToolCard.svelte'))
+    ]
+});
+export default browserAutomationSveltePlugin;

package/dist/svelte/browser/docs/browser-automation-svelte.docs.descriptor.d.ts

@@ -0,0 +1,4 @@
+import type { DocsTopicDescriptor } from '@vibesdotdev/docs-contracts';
+declare const descriptor: DocsTopicDescriptor;
+export default descriptor;
+//# sourceMappingURL=browser-automation-svelte.docs.descriptor.d.ts.map

package/dist/svelte/browser/docs/browser-automation-svelte.docs.descriptor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-automation-svelte.docs.descriptor.d.ts","sourceRoot":"","sources":["../../../../src/svelte/browser/docs/browser-automation-svelte.docs.descriptor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAEvE,QAAA,MAAM,UAAU,EAAE,mBAsDjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/svelte/browser/docs/browser-automation-svelte.docs.descriptor.js

@@ -0,0 +1,55 @@
+const descriptor = {
+    kind: 'docs/topic',
+    id: 'browser-automation-svelte',
+    parent: 'runtime',
+    order: 46,
+    title: 'Browser Automation Svelte',
+    summary: 'Svelte browser-automation presentation surfaces (tool-call widget + control workspace) over the runtime-resolved browser client.',
+    tags: ['browser', 'svelte', 'automation', 'runtime', 'control-plane'],
+    surfaces: ['web', 'in-app'],
+    hardware: ['consumer', 'cloud'],
+    enabled: true,
+    body: {
+        type: 'markdown',
+        sourceType: 'raw',
+        source: `---
+title: Browser Automation Svelte
+summary: Transport-blind Svelte browser-automation presentation surfaces
+tags: [browser, svelte, automation, runtime, control-plane]
+parent: runtime
+order: 46
+surfaces: [web, in-app]
+hardware: [consumer, cloud]
+---
+
+# Browser Automation Svelte
+
+\`@vibesdotdev/control/browser-automation/svelte\` presents browser-automation surfaces
+without owning or bundling a browser backend. Hosts inject records through
+\`data\` or \`load\`; the package never chooses a runtime or transport.
+
+## Entrypoints
+
+- \`@vibesdotdev/control/browser-automation/svelte/BrowserWorkspace.svelte\` - the
+  sessions list + profile filter + selected-session detail + observed-page seam.
+- \`@vibesdotdev/control/browser-automation/svelte/tool-widgets\` - exports
+  \`BrowserToolCard\`. Registration is not a side effect of this subpath.
+- \`@vibesdotdev/control/browser-automation/svelte/state\` - the cross-route
+  \`browserWorkspaceState\` runtime-owned selection compatibility facade (subpath-only; hosts that only
+  need the selection store import it without the workspace component tree).
+- \`@vibesdotdev/control/browser-automation/svelte/plugin\` - docs topic plus the
+  \`browser\` \`tools/ui\` widget (\`BrowserToolCard\`, placement \`top\`).
+  Compose the plugin in the runtime to register its descriptors and workspace selection client.
+
+## Boundary
+
+This package paints host-supplied sessions, tabs, recipes, and observed-page
+snapshots. The host resolves the consumer client, cloud API, or other transport
+appropriate to its surface and supplies \`data\` or \`load\`. With no data source
+the workspace shows an honest disconnected state. The Svelte plugin registers
+the \`browser\` \`tools/ui\` widget; it does not register drive kinds — those stay
+on the separate consumer and cloud plugins. JSON \`DefaultToolCard\` is not the fallback.
+`
+    }
+};
+export default descriptor;

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

@@ -0,0 +1,6 @@
+/** Svelte views and plugin. Runtime-owned selection adapters live at ./state. */
+export { default as BrowserToolCard } from './tool-widgets/BrowserToolCard.svelte';
+export { default as BrowserWorkspace } from './BrowserWorkspace.svelte';
+export type { BrowserWorkspaceData, BrowserObservedPage } from './types.ts';
+export { browserAutomationSveltePlugin, default } from './browser-automation-svelte.plugin.ts';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/svelte/browser/index.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACnF,OAAO,EACN,OAAO,IAAI,gBAAgB,EAC3B,MAAM,2BAA2B,CAAC;AACnC,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAC5E,OAAO,EAAE,6BAA6B,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAC"}

package/dist/svelte/browser/index.js

@@ -0,0 +1,4 @@
+/** Svelte views and plugin. Runtime-owned selection adapters live at ./state. */
+export { default as BrowserToolCard } from './tool-widgets/BrowserToolCard.svelte';
+export { default as BrowserWorkspace } from './BrowserWorkspace.svelte';
+export { browserAutomationSveltePlugin, default } from "./browser-automation-svelte.plugin.js";

package/dist/svelte/browser/state.svelte.d.ts

@@ -0,0 +1,28 @@
+import { BrowserWorkspaceClient } from '../../browser/client/workspace-client.ts';
+import { type VibesRuntime } from '@vibesdotdev/kernel';
+export { browserWorkspacePlugin, getBrowserWorkspaceClient } from '../../browser/client/workspace-client.ts';
+/** A component-scoped reactive projection. Call dispose when its scope ends. */
+export declare class BrowserWorkspaceState {
+    private readonly client?;
+    private selection;
+    private unsubscribe;
+    constructor(client?: BrowserWorkspaceClient | undefined);
+    get activeSessionId(): string | null;
+    set activeSessionId(id: string | null);
+    get activeTabId(): string | null;
+    set activeTabId(id: string | null);
+    get profileFilter(): string | null;
+    set profileFilter(id: string | null);
+    selectSession(id: string | null): void;
+    selectTab(id: string | null): void;
+    setProfileFilter(id: string | null): void;
+    reset(): void;
+    dispose(): void;
+}
+export type BrowserWorkspaceSelectionState = Pick<BrowserWorkspaceState, 'activeSessionId' | 'activeTabId' | 'profileFilter' | 'selectSession' | 'selectTab' | 'setProfileFilter' | 'reset'>;
+/** Share an adapter across routes by placing it in their common Svelte scope. */
+export declare function provideBrowserWorkspaceState(state: BrowserWorkspaceState): BrowserWorkspaceState;
+export declare function getBrowserWorkspaceState(): BrowserWorkspaceSelectionState;
+export declare function createBrowserWorkspaceState(runtime: VibesRuntime): Promise<BrowserWorkspaceState>;
+export declare const browserWorkspaceState: BrowserWorkspaceSelectionState;
+//# sourceMappingURL=state.svelte.d.ts.map

package/dist/svelte/browser/state.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/browser/state.svelte.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAA6B,MAAM,0CAA0C,CAAC;AAE7G,OAAO,EAAoC,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAE1F,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,0CAA0C,CAAC;AAI7G,gFAAgF;AAChF,qBAAa,qBAAqB;IAGrB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC;IAFpC,OAAO,CAAC,SAAS,CAAqD;IACtE,OAAO,CAAC,WAAW,CAA2B;gBACjB,MAAM,CAAC,EAAE,sBAAsB,YAAA;IAG5D,IAAI,eAAe,IACK,MAAM,GAAG,IAAI,CAD2B;IAChE,IAAI,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,EAA6B;IAClE,IAAI,WAAW,IACK,MAAM,GAAG,IAAI,CADuB;IACxD,IAAI,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,EAAyB;IAC1D,IAAI,aAAa,IACK,MAAM,GAAG,IAAI,CADyB;IAC5D,IAAI,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,EAAgC;IACnE,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAItC,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAIlC,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAIzC,KAAK,IAAI,IAAI;IAIb,OAAO,IAAI,IAAI;CACf;AAED,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAAC,qBAAqB,EACtE,iBAAiB,GAAG,aAAa,GAAG,eAAe,GAAG,eAAe,GAAG,WAAW,GAAG,kBAAkB,GAAG,OAAO,CAAC,CAAC;AAErH,iFAAiF;AACjF,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,qBAAqB,GAAG,qBAAqB,CAEhG;AACD,wBAAgB,wBAAwB,IAAI,8BAA8B,CAEzE;AACD,wBAAsB,2BAA2B,CAAC,OAAO,EAAE,YAAY,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAEvG;AAiBD,eAAO,MAAM,qBAAqB,EAAE,8BAWnC,CAAC"}