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

package/templates/assembly-field/applet.storage.json

@@ -0,0 +1,47 @@
+[
+	{
+		"id": "settings",
+		"authority": "viewer-owned",
+		"scope": "viewer",
+		"schemaVersion": 1,
+		"recordSchema": {
+			"type": "object",
+			"properties": {
+				"count": {
+					"type": "number"
+				},
+				"hold": {
+					"type": "number"
+				},
+				"morph": {
+					"type": "number"
+				},
+				"autoRotate": {
+					"type": "number"
+				},
+				"pointSize": {
+					"type": "number"
+				},
+				"sweep": {
+					"type": "boolean"
+				},
+				"interactive": {
+					"type": "boolean"
+				},
+				"headline": {
+					"type": "boolean"
+				}
+			},
+			"required": [
+				"count",
+				"hold",
+				"morph",
+				"autoRotate",
+				"pointSize",
+				"sweep",
+				"interactive",
+				"headline"
+			]
+		}
+	}
+]

package/templates/assembly-field/schemas/settings.ts

@@ -0,0 +1,14 @@
+import * as z from 'zod/v4';
+
+export const settingsSchema = z.object({
+	count: z.number().default(24000),
+	hold: z.number().default(11),
+	morph: z.number().default(8),
+	autoRotate: z.number().default(0.08),
+	pointSize: z.number().default(2.1),
+	sweep: z.boolean().default(true),
+	interactive: z.boolean().default(true),
+	headline: z.boolean().default(true)
+});
+
+export type Settings = z.infer<typeof settingsSchema>;

package/templates/assembly-field/settings.ts

@@ -0,0 +1,32 @@
+import type { AppletRootSurface } from '@vibesdotdev/applets';
+import { settingsSchema, type Settings } from './schemas/settings.ts';
+
+/** Per-mount editing state; the supplied surface owns all persistence. */
+export function createAssemblySettings(vibes: AppletRootSurface, changed: (value: Settings) => void) {
+	let value = settingsSchema.parse({});
+	let pending = Promise.resolve();
+
+	// Hydration never writes. Edits wait for it, then merge against saved state.
+	const ready = vibes.storageGet('settings', 'current').then(saved => {
+		value = settingsSchema.parse(saved ?? {});
+		changed(value);
+	});
+
+	async function update(patch: Partial<Settings>) {
+		await ready;
+		value = settingsSchema.parse({ ...value, ...patch });
+		changed(value);
+		const snapshot = value;
+
+		// Each immutable snapshot follows the preceding write, even if it failed.
+		const write = Promise.allSettled([pending]).then(() => vibes.storagePut('settings', 'current', snapshot));
+		pending = write;
+		await write;
+	}
+
+	return {
+		ready,
+		update,
+		reset: () => update(settingsSchema.parse({}))
+	};
+}

package/templates/benchmark-comparison/Applet.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { AppletRootSurface } from '@vibesdotdev/applets';
+	import RunnableTracker from '@vibesdotdev/applets/svelte/RunnableTracker.svelte';
+	import { RunbookSection } from '@vibesdotdev/runbooks/svelte';
+	import { BenchmarkComparisonSection, SameInputComparisonSection } from '@vibesdotdev/benchmarks/svelte';
+	let { vibes }: { vibes?: AppletRootSurface } = $props();
+</script>
+
+<RunnableTracker {vibes} title="Benchmark comparisons" projection="catalog">
+	{#snippet sections(snapshot, store)}
+		<BenchmarkComparisonSection {snapshot} />
+		{#if store}
+			<SameInputComparisonSection {snapshot} snapshots={store.listRows} onselect={id => store.select(id)} />
+			<RunbookSection {snapshot} {store} />
+		{/if}
+	{/snippet}
+</RunnableTracker>

package/templates/benchmark-comparison/applet.descriptor.ts

@@ -0,0 +1,7 @@
+export default {
+	id: 'benchmark-comparison',
+	title: 'Benchmark comparisons',
+	description: 'Actual recorded candidate judgments, input digests, admitted scopes and linked run evidence.',
+	entry: 'Applet.svelte',
+	contributes: {}
+};

package/templates/file-diff-viewer/Applet.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import * as z from 'zod/v4';
+	import { diffLines, diffStats } from './diff.ts';
+
+	const diffMessageSchema = z.object({
+		type: z.literal('diff'),
+		path: z.string(),
+		before: z.string(),
+		after: z.string()
+	});
+
+	interface DiffPair { path: string; before: string; after: string }
+	let pair: DiffPair = {
+		path: 'demo/hello.md',
+		before: '# Hello\n\nOne line.\nTwo lines.\nThree lines.\n',
+		after: '# Hello\n\nOne line kept.\nTwo lines.\nA new line here.\nThree lines.\n'
+	};
+	let mode: 'unified' | 'split' = 'unified';
+
+	function receive(event: MessageEvent) {
+		const parsed = diffMessageSchema.safeParse(event.data);
+		if (parsed.success) {
+			pair = { path: parsed.data.path, before: parsed.data.before, after: parsed.data.after };
+		}
+	}
+	onMount(() => {
+		window.addEventListener('message', receive);
+		return () => window.removeEventListener('message', receive);
+	});
+
+	$: rows = diffLines(pair.before, pair.after);
+	$: stats = diffStats(rows);
+</script>
+
+<style>
+	:host, .root { display: block; height: 100%; font: 13px/1.5 ui-monospace, 'SF Mono', Menlo, monospace; background: #0d1117; color: #e6edf3; }
+	.root { display: flex; flex-direction: column; }
+	.bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: #161b22; border-bottom: 1px solid #30363d; font-size: 11px; color: #8b949e; }
+	.bar button { background: #21262d; color: #e6edf3; border: 1px solid #30363d; border-radius: 6px; padding: 3px 10px; cursor: pointer; font: inherit; margin-left: 6px; }
+	.bar button.on { background: #388bfd33; border-color: #388bfd; }
+	.added { color: #3fb950; }
+	.removed { color: #f85149; }
+	.body { flex: 1; overflow: auto; padding: 8px 0; }
+	.row { display: flex; white-space: pre-wrap; }
+	.no { width: 40px; text-align: right; padding-right: 8px; color: #484f58; user-select: none; flex: none; }
+	.row.same .ct { color: #8b949e; }
+	.row.add { background: #0d442933; }
+	.row.del { background: #67060c33; }
+	.row .sign { width: 18px; flex: none; text-align: center; }
+	.cols { display: flex; flex: 1; }
+	.col { flex: 1; min-width: 0; }
+</style>
+
+<div class="root">
+	<div class="bar">
+		<span>{pair.path} · <span class="added">+{stats.added}</span> <span class="removed">−{stats.removed}</span></span>
+		<span>
+			<button class:on={mode === 'unified'} onclick={() => (mode = 'unified')}>Unified</button>
+			<button class:on={mode === 'split'} onclick={() => (mode = 'split')}>Split</button>
+		</span>
+	</div>
+	<div class="body">
+		{#if mode === 'unified'}
+			{#each rows as row}
+				<div class="row {row.kind}">
+				{#if row.kind === 'same'}
+					<span class="no">{row.beforeNo}</span><span class="sign"> </span><span class="ct">{row.before || ' '}</span>
+				{:else if row.kind === 'del'}
+					<span class="no">{row.beforeNo}</span><span class="sign removed">−</span><span class="ct removed">{row.before || ' '}</span>
+				{:else}
+					<span class="no">{row.afterNo}</span><span class="sign added">+</span><span class="ct added">{row.after || ' '}</span>
+				{/if}
+			</div>
+			{/each}
+		{:else}
+			{#each rows as row}
+				<div class="row {row.kind}">
+				<div class="cols">
+					<div class="col">
+						{#if row.before !== undefined}<span class="no">{row.beforeNo}</span><span class="sign removed">{row.kind === 'del' ? '−' : ' '}</span><span class="ct">{row.before || ' '}</span>{/if}
+					</div>
+					<div class="col">
+						{#if row.after !== undefined}<span class="no">{row.afterNo}</span><span class="sign added">{row.kind === 'add' ? '+' : ' '}</span><span class="ct">{row.after || ' '}</span>{/if}
+					</div>
+				</div>
+			</div>
+			{/each}
+		{/if}
+	</div>
+</div>

package/templates/file-diff-viewer/applet.descriptor.ts

@@ -0,0 +1,14 @@
+/**
+ * FileDiffViewer applet — authoring descriptor (not published).
+ *
+ * Template #2 of the 2026-08-23 applet effort. The diff core lives in
+ * diff.ts (LCS-based, self-contained); the Applet renders side-by-side and
+ * unified views of handed {path, before, after} pairs.
+ */
+export default {
+	id: 'file-diff-viewer',
+	title: 'File Diff Viewer',
+	description: 'Side-by-side and unified diff for handed file pairs.',
+	entry: 'Applet.svelte',
+	contributes: {}
+};

package/templates/file-diff-viewer/diff.ts

@@ -0,0 +1,63 @@
+/**
+ * Self-contained line-diff core for the FileDiffViewer applet.
+ *
+ * Classic LCS table over line arrays; produces aligned row pairs suitable for
+ * both unified and side-by-side rendering. No dependencies by design: an
+ * applet is source, not a CDN.
+ */
+export interface DiffRow {
+	kind: 'same' | 'add' | 'del';
+	before?: string;
+	after?: string;
+	beforeNo?: number;
+	afterNo?: number;
+}
+
+export function diffLines(before: string, after: string): DiffRow[] {
+	const a = before.split('\n');
+	const b = after.split('\n');
+	const n = a.length;
+	const m = b.length;
+
+	// LCS lengths table.
+	const table: number[][] = Array.from({ length: n + 1 }, () => Array.from({ length: m + 1 }, () => 0));
+	for (let i = n - 1; i >= 0; i--) {
+		for (let j = m - 1; j >= 0; j--) {
+			table[i][j] = a[i] === b[j] ? table[i + 1][j + 1] + 1 : Math.max(table[i + 1][j], table[i][j + 1]);
+		}
+	}
+
+	const rows: DiffRow[] = [];
+	let i = 0;
+	let j = 0;
+	while (i < n && j < m) {
+		if (a[i] === b[j]) {
+			rows.push({ kind: 'same', before: a[i], after: b[j], beforeNo: i + 1, afterNo: j + 1 });
+			i++; j++;
+		} else if (table[i + 1][j] >= table[i][j + 1]) {
+			rows.push({ kind: 'del', before: a[i], beforeNo: i + 1 });
+			i++;
+		} else {
+			rows.push({ kind: 'add', after: b[j], afterNo: j + 1 });
+			j++;
+		}
+	}
+	while (i < n) { rows.push({ kind: 'del', before: a[i], beforeNo: i + 1 }); i++; }
+	while (j < m) { rows.push({ kind: 'add', after: b[j], afterNo: j + 1 }); j++; }
+	return rows;
+}
+
+export interface DiffStats {
+	added: number;
+	removed: number;
+}
+
+export function diffStats(rows: DiffRow[]): DiffStats {
+	let added = 0;
+	let removed = 0;
+	for (const row of rows) {
+		if (row.kind === 'add') added++;
+		if (row.kind === 'del') removed++;
+	}
+	return { added, removed };
+}

package/templates/file-viewer/Applet.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Card, CardContent, CardHeader, CardTitle } from '@vibesdotdev/kit/svelte';
+	import { Tabs, TabsList, TabsTrigger } from '@vibesdotdev/kit/svelte';
+	import { Button } from '@vibesdotdev/kit/svelte';
+	import { Badge } from '@vibesdotdev/kit/svelte';
+	import { Textarea } from '@vibesdotdev/kit/svelte';
+	import { filesMessageSchema, type FilesMessage } from '@vibesdotdev/applets/messages';
+
+	let files: { path: string; content: string }[] = [
+		{ path: 'README.md', content: '# Demo\n\nHanded files render here. Edit, and the tab dot goes dirty.\n' },
+		{ path: 'src/main.ts', content: 'console.log("applet");\n' }
+	];
+	let active = files[0]?.path ?? '';
+	let editing = false;
+	let drafts: Record<string, string> = {};
+
+	function receive(event: MessageEvent) {
+		const parsed = filesMessageSchema.safeParse(event.data);
+		if (parsed.success) {
+			const msg: FilesMessage = parsed.data;
+			files = msg.files;
+			active = msg.files[0]?.path ?? '';
+			drafts = {};
+		}
+	}
+	onMount(() => {
+		window.addEventListener('message', receive);
+		return () => window.removeEventListener('message', receive);
+	});
+
+	function isDirty(path: string): boolean {
+		return path in drafts && drafts[path] !== (files.find((f) => f.path === path)?.content ?? null);
+	}
+	function current(): string {
+		return active in drafts ? drafts[active] : (files.find((f) => f.path === active)?.content ?? '');
+	}
+	function onEdit(event: Event) {
+		if (event.target instanceof HTMLTextAreaElement) {
+			drafts[active] = event.target.value;
+		}
+	}
+	$: dirtyCount = files.filter((f) => isDirty(f.path)).length;
+</script>
+
+<div class="h-full p-2">
+	<Card class="h-full flex flex-col">
+		<CardHeader class="flex-row items-center justify-between space-y-0 py-2">
+			<CardTitle class="text-sm font-mono">file-viewer</CardTitle>
+			<div class="flex items-center gap-2">
+				{#if dirtyCount > 0}<Badge variant="secondary">{dirtyCount} dirty</Badge>{/if}
+				<Button size="sm" variant={editing ? 'default' : 'outline'} onclick={() => (editing = !editing)}>
+					{editing ? 'Done' : 'Edit'}
+				</Button>
+			</div>
+		</CardHeader>
+		<CardContent class="flex-1 min-h-0 pt-0">
+			<Tabs value={active} onValueChange={(v) => (active = v)}>
+				<TabsList>
+					{#each files as f (f.path)}
+						<TabsTrigger value={f.path}>
+							{f.path}{#if isDirty(f.path)}&nbsp;•{/if}
+						</TabsTrigger>
+					{/each}
+				</TabsList>
+				{#if active}
+					{#if editing}
+						<Textarea
+							class="h-[calc(100%-2.75rem)] font-mono text-xs"
+							value={current()}
+							oninput={onEdit}
+						/>
+					{:else}
+						<pre class="h-[calc(100%-2.75rem)] overflow-auto rounded-md border bg-muted/40 p-3 font-mono text-xs leading-5">{current()}</pre>
+					{/if}
+				{/if}
+			</Tabs>
+		</CardContent>
+	</Card>
+</div>

package/templates/file-viewer/applet.descriptor.ts

@@ -0,0 +1,14 @@
+/**
+ * FileViewer applet — authoring descriptor (not published; authoring metadata only).
+ *
+ * The first template of the 2026-08-23 applet effort. Self-contained by the
+ * local file-set contract: the host canvas owns chrome; this applet owns
+ * tabbed view/edit of the files it is handed (or its embedded demo set).
+ */
+export default {
+	id: 'file-viewer',
+	title: 'File Viewer',
+	description: 'Tabbed read/edit viewer for a handed file set.',
+	entry: 'Applet.svelte',
+	contributes: {}
+};

package/templates/fleet-runs/Applet.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { AppletRootSurface } from '@vibesdotdev/applets';
+	import RunnableTracker from '@vibesdotdev/applets/svelte/RunnableTracker.svelte';
+	import { FleetRuns } from '@vibesdotdev/runnable/svelte';
+	import { RunbookSection } from '@vibesdotdev/runbooks/svelte';
+	let { vibes }: { vibes?: AppletRootSurface } = $props();
+</script>
+
+<RunnableTracker {vibes} title="Fleet runs">
+	{#snippet overview(store)}<FleetRuns {store} />{/snippet}
+	{#snippet sections(snapshot, store)}
+		{#if store}<RunbookSection {snapshot} {store} />{/if}
+	{/snippet}
+</RunnableTracker>

package/templates/fleet-runs/applet.descriptor.ts

@@ -0,0 +1,7 @@
+export default {
+	id: 'fleet-runs',
+	title: 'Fleet runs',
+	description: 'Admitted run records grouped and filtered by their recorded execution host.',
+	entry: 'Applet.svelte',
+	contributes: {}
+};

package/templates/graph-runbook-tracker/Applet.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { AppletRootSurface } from '@vibesdotdev/applets';
+	import RunnableTracker from '@vibesdotdev/applets/svelte/RunnableTracker.svelte';
+	import { GraphRunSection, RunbookSection } from '@vibesdotdev/runbooks/svelte';
+	let { vibes }: { vibes?: AppletRootSurface } = $props();
+</script>
+
+<RunnableTracker {vibes} title="Graph runbook tracker" projection="catalog">
+	{#snippet overview(store)}<GraphRunSection {store} />{/snippet}
+	{#snippet sections(snapshot, store)}
+		{#if store}<RunbookSection {snapshot} {store} />{/if}
+	{/snippet}
+</RunnableTracker>

package/templates/graph-runbook-tracker/applet.descriptor.ts

@@ -0,0 +1,7 @@
+export default {
+	id: 'graph-runbook-tracker',
+	title: 'Graph runbook tracker',
+	description: 'Recorded traversal plans, attempts, coordinators and dependency outcomes over the shared live run view.',
+	entry: 'Applet.svelte',
+	contributes: {}
+};

package/templates/runbook-tracker/Applet.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { AppletRootSurface } from '@vibesdotdev/applets';
+	import RunnableTracker from '@vibesdotdev/applets/svelte/RunnableTracker.svelte';
+	import { RunbookSection } from '@vibesdotdev/runbooks/svelte';
+	let { vibes }: { vibes?: AppletRootSurface } = $props();
+</script>
+
+<RunnableTracker {vibes} title="Runbook tracker">
+	{#snippet sections(snapshot, store)}
+		{#if store}<RunbookSection {snapshot} {store} />{/if}
+	{/snippet}
+</RunnableTracker>

package/templates/runbook-tracker/applet.descriptor.ts

@@ -0,0 +1,7 @@
+export default {
+	id: 'runbook-tracker',
+	title: 'Runbook tracker',
+	description: 'Recorded Runbook inputs, outputs and declared child roles over the shared live run view.',
+	entry: 'Applet.svelte',
+	contributes: {}
+};

package/templates/runnable-tracker/Applet.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { AppletRootSurface } from '@vibesdotdev/applets';
+	import RunnableTracker from '@vibesdotdev/applets/svelte/RunnableTracker.svelte';
+	import { RunIssueReportSchema } from '@vibesdotdev/runnable/schemas';
+	import { RunnableReadQuerySchema } from '@vibesdotdev/runnable/schemas/runs';
+	import { RunbookIssueQuerySchema } from '@vibesdotdev/runbooks/schemas';
+	import { RunbookIssues } from '@vibesdotdev/runbooks/svelte';
+	import type { RunsStore } from '@vibesdotdev/runnable/svelte';
+	import type { JsonObject } from '@vibesdotdev/kernel/schemas/json';
+	let { vibes, input = {} }: { vibes?: AppletRootSurface; input?: JsonObject } = $props();
+</script>
+
+{#snippet issues(store: RunsStore, onselect: (id: string) => void, onbrowse: () => void)}
+	{#if vibes}{@const surface = vibes}<RunbookIssues runs={store.listRows.map(row => row.run)} query={store.query} load={async query => RunIssueReportSchema.parse(await surface.runtimeCall('runtime/client', 'runbooks', 'investigateIssues', RunbookIssueQuerySchema.parse({ ...query, triageSessionId: input.triageSessionId })))} {onselect} {onbrowse} />{/if}
+{/snippet}
+<RunnableTracker {vibes} {issues} query={RunnableReadQuerySchema.parse(input)} title="Runnable tracker" projection="catalog" />

package/templates/runnable-tracker/applet.descriptor.ts

@@ -0,0 +1,10 @@
+import { runbookIssueQueryForm } from '@vibesdotdev/runbooks/svelte/forms';
+
+export default {
+	id: 'runnable-tracker',
+	title: 'Runnable tracker',
+	description: 'Live owner snapshots, run relationships, controls and recorded evidence.',
+	entry: 'Applet.svelte',
+	inputs: runbookIssueQueryForm,
+	contributes: {}
+};

package/templates/storage-viewer/Applet.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import * as z from 'zod/v4';
+
+	interface TreeEntry { path: string; kind: 'dir' | 'file'; size?: number }
+	let root = 'demo/drive';
+	let entries: TreeEntry[] = [
+		{ path: 'docs', kind: 'dir' },
+		{ path: 'docs/constitution.md', kind: 'file', size: 40213 },
+		{ path: 'docs/agents.md', kind: 'file', size: 7104 },
+		{ path: 'src', kind: 'dir' },
+		{ path: 'src/main.ts', kind: 'file', size: 1204 },
+		{ path: 'package.json', kind: 'file', size: 312 }
+	];
+	interface ExpandedFolderMap {
+		[folderPath: string]: boolean;
+	}
+	let expanded: ExpandedFolderMap = { 'docs': true };
+	let selected = 'docs/constitution.md';
+
+	function receive(event: MessageEvent) {
+		const data = event.data;
+		if (data && data.type === 'tree' && Array.isArray(data.entries)) {
+			const parsedRoot = z.string().safeParse(data.root);
+			if (parsedRoot.success) root = parsedRoot.data;
+			const valid = data.entries.filter(
+				(e): e is TreeEntry => typeof e?.path === 'string' && (e?.kind === 'dir' || e?.kind === 'file')
+			);
+			if (valid.length > 0) { entries = valid; selected = valid[0].path; }
+		}
+	}
+	onMount(() => {
+		window.addEventListener('message', receive);
+		return () => window.removeEventListener('message', receive);
+	});
+
+	function depth(path: string): number {
+		return path.split('/').length - 1;
+	}
+	function isShown(path: string): boolean {
+		const parts = path.split('/');
+		for (let i = 1; i < parts.length; i++) {
+			const ancestor = parts.slice(0, i).join('/');
+			if (!expanded[ancestor]) return false;
+		}
+		return true;
+	}
+	$: files = entries.filter((e) => e.kind === 'file');
+	function fmtSize(bytes?: number): string {
+		if (bytes === undefined) return '';
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+		return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+	}
+</script>
+
+<style>
+	:host, .root { display: block; height: 100%; font: 13px/1.5 ui-monospace, 'SF Mono', Menlo, monospace; background: #0d1117; color: #e6edf3; }
+	.root { display: flex; flex-direction: column; }
+	.bar { display: flex; justify-content: space-between; padding: 6px 10px; background: #161b22; border-bottom: 1px solid #30363d; font-size: 11px; color: #8b949e; }
+	.body { flex: 1; overflow: auto; padding: 6px 0; }
+	.entry { display: flex; align-items: center; padding: 2px 10px; cursor: pointer; white-space: pre; }
+	.entry:hover { background: #1c2128; }
+	.entry.selected { background: #388bfd33; }
+	.caret { width: 16px; flex: none; color: #8b949e; }
+	.indent { display: inline-block; }
+	.name { margin-right: 8px; }
+	.dir .name { color: #79c0ff; font-weight: 600; }
+	.size { color: #484f58; margin-left: auto; }
+</style>
+
+<div class="root">
+	<div class="bar">
+		<span>{root}</span>
+		<span>{files.length} files · {entries.length} entries</span>
+	</div>
+	<div class="body">
+		{#each entries as e (e.path)}
+			{#if isShown(e.path)}
+				<div class="entry {e.kind}" class:selected={selected === e.path}
+					style="padding-left: {10 + depth(e.path) * 14}px"
+					onclick={() => { if (e.kind === 'dir') expanded[e.path] = !expanded[e.path]; else selected = e.path; }}>
+					<span class="caret">{e.kind === 'dir' ? (expanded[e.path] ? '▾' : '▸') : ' '}</span>
+					<span class="name">{e.path.split('/').pop()}</span>
+					{#if e.kind === 'file'}<span class="size">{fmtSize(e.size)}</span>{/if}
+				</div>
+			{/if}
+		{/each}
+	</div>
+</div>

package/templates/storage-viewer/applet.descriptor.ts

@@ -0,0 +1,15 @@
+/**
+ * StorageViewer applet — authoring descriptor (not published).
+ *
+ * Template #3 of the 2026-08-23 applet effort. Self-contained v1: renders a
+ * handed {type:'tree', root, entries:[{path,kind,size}]} payload (host or
+ * demo). The host fetches through the platform storage browse runtime when
+ * composed with a real drive — see the message contract in Applet.svelte.
+ */
+export default {
+	id: 'storage-viewer',
+	title: 'Storage Viewer',
+	description: 'Directory tree viewer for consumer/cloud drives (handed payload v1).',
+	entry: 'Applet.svelte',
+	contributes: {}
+};

package/templates/workspace-graph-runbook-tracker/Applet.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { AppletRootSurface } from '@vibesdotdev/applets';
+	import RunnableTracker from '@vibesdotdev/applets/svelte/RunnableTracker.svelte';
+	import { GraphRunSection, RunbookSection } from '@vibesdotdev/runbooks/svelte';
+	let { vibes }: { vibes?: AppletRootSurface } = $props();
+</script>
+
+<RunnableTracker {vibes} title="Workspace graph runbook tracker" projection="catalog">
+	{#snippet overview(store)}<GraphRunSection {store} />{/snippet}
+	{#snippet sections(snapshot, store)}
+		{#if store}<RunbookSection {snapshot} {store} />{/if}
+	{/snippet}
+</RunnableTracker>

package/templates/workspace-graph-runbook-tracker/applet.descriptor.ts

@@ -0,0 +1,7 @@
+export default {
+	id: 'workspace-graph-runbook-tracker',
+	title: 'Workspace graph runbook tracker',
+	description: 'Workspace package impacts, file walks, correction attempts and sign-offs over the shared live graph run view.',
+	entry: 'Applet.svelte',
+	contributes: {}
+};