diff --git a/web/README.md b/web/README.md
index c901364c..08554f92 100644
--- a/web/README.md
+++ b/web/README.md
@@ -53,7 +53,6 @@ src/
       collections/           BoardView, ListView
       common/                StatusBadge, badges, modals
       search/                CommandPalette
-      activity/              ActivityFeed
     stores/                  Svelte 5 reactive stores
       workspace.svelte.ts    Workspace state
       collections.svelte.ts  Collection + item state
diff --git a/web/src/lib/components/activity/ActivityFeed.svelte b/web/src/lib/components/activity/ActivityFeed.svelte
deleted file mode 100644
index f084cf9e..00000000
--- a/web/src/lib/components/activity/ActivityFeed.svelte
+++ /dev/null
@@ -1,67 +0,0 @@
-<script lang="ts">
-	import type { Activity } from '$lib/types';
-	import { relativeTime } from '$lib/utils/markdown';
-
-	let { activities }: { activities: Activity[] } = $props();
-
-	function actionLabel(action: string): string {
-		const labels: Record<string, string> = {
-			created: 'created', updated: 'updated', archived: 'archived',
-			restored: 'restored', read: 'read', searched: 'searched',
-		};
-		return labels[action] ?? action;
-	}
-
-	function actorIcon(actor: string): string {
-		return actor === 'agent' ? '🤖' : '👤';
-	}
-
-	function actorLabel(a: Activity): string {
-		if (a.actor === 'agent') return 'Agent';
-		if (a.actor_name) return a.actor_name;
-		return 'You';
-	}
-
-	function sourceLabel(source: string): string {
-		const labels: Record<string, string> = {
-			cli: 'CLI', web: 'Web', skill: 'Skill',
-		};
-		return labels[source] ?? source;
-	}
-</script>
-
-<div class="feed">
-	{#each activities as a}
-		<div class="entry">
-			<span class="actor">{actorIcon(a.actor)}</span>
-			<div class="info">
-				<span class="action">
-					{actorLabel(a)} {actionLabel(a.action)}
-					{#if a.item_id}
-						a document
-					{/if}
-				</span>
-				<span class="meta">
-					via {sourceLabel(a.source)} · <span title={new Date(a.created_at).toLocaleString()}>{relativeTime(a.created_at)}</span>
-				</span>
-			</div>
-		</div>
-	{:else}
-		<p class="empty">No recent activity.</p>
-	{/each}
-</div>
-
-<style>
-	.feed { display: flex; flex-direction: column; gap: var(--space-1); }
-	.entry {
-		display: flex;
-		align-items: flex-start;
-		gap: var(--space-2);
-		padding: var(--space-2) 0;
-	}
-	.actor { font-size: 1em; flex-shrink: 0; }
-	.info { display: flex; flex-direction: column; min-width: 0; }
-	.action { font-size: 0.9em; }
-	.meta { font-size: 0.8em; color: var(--text-muted); }
-	.empty { color: var(--text-muted); font-size: 0.9em; }
-</style>
diff --git a/web/src/lib/components/admin/UserOverviewTab.svelte b/web/src/lib/components/admin/UserOverviewTab.svelte
index 25341c8b..99c21251 100644
--- a/web/src/lib/components/admin/UserOverviewTab.svelte
+++ b/web/src/lib/components/admin/UserOverviewTab.svelte
@@ -2,8 +2,10 @@
   Overview tab — first thing an admin sees when opening a user modal.
   Vitals header + 3 engagement metric tiles + recent items list.
 
-  Sparkline deliberately omitted per PLAN-1542 decisions; api_requests_7d
+  A sparkline was deliberately omitted per PLAN-1542 decisions; api_requests_7d
   metric also omitted pending IDEA-1556. PLAN-1542 / TASK-1553.
+  (The Sparkline component this referred to was never mounted anywhere and was
+  deleted in TASK-2632; recover it from git history if the decision reverses.)
 
   Consumes:
     GET /admin/users/{id}/metrics  (T1547)
diff --git a/web/src/lib/components/attachments/fixtures/LightboxStub.svelte b/web/src/lib/components/attachments/fixtures/LightboxStub.svelte
deleted file mode 100644
index b89c9d2c..00000000
--- a/web/src/lib/components/attachments/fixtures/LightboxStub.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<!--
-	Test double for `Lightbox` (TASK-2428). Records the props of every mount so
-	a test can invoke a DESTROYED viewer's `onClose`, and renders a marker with
-	the image it was opened on. Deliberately dumb: the real component's
-	behaviour is covered against the real component elsewhere.
--->
-<script lang="ts">
-	import { untrack } from 'svelte';
-	import { lightboxStubCalls, type LightboxStubCall } from './lightboxStub';
-	import type { LightboxImage } from '$lib/attachments/events';
-
-	interface Props {
-		images: LightboxImage[];
-		index?: number;
-		wsSlug: string;
-		invoker?: HTMLElement | null;
-		onClose: () => void;
-	}
-
-	let { images, index = 0, wsSlug, invoker = null, onClose }: Props = $props();
-
-	// Captured ONCE at mount, `untrack`ed like the real component's index seed:
-	// the host remounts per open, so a recorded call belongs to exactly one
-	// viewer instance — which is the whole point of the recording.
-	const call: LightboxStubCall = untrack(() => ({ images, index, wsSlug, invoker, onClose }));
-	lightboxStubCalls.push(call);
-</script>
-
-<div class="lightbox-stub" data-attachment-id={images[index]?.id ?? ''} data-ws={wsSlug}></div>
diff --git a/web/src/lib/components/attachments/fixtures/lightboxStub.ts b/web/src/lib/components/attachments/fixtures/lightboxStub.ts
deleted file mode 100644
index 0679da49..00000000
--- a/web/src/lib/components/attachments/fixtures/lightboxStub.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { LightboxImage } from '$lib/attachments/events';
-
-/**
- * Recording surface for `LightboxStub.svelte` (TASK-2428).
- *
- * Exists so a test can hold a viewer's `onClose` AFTER that viewer has been
- * destroyed — the only way to drive the stale-continuation case, since a click
- * on a detached button never reaches Svelte's delegated root handler and so
- * proves nothing (Codex round 4 found the click-based version vacuous).
- */
-export interface LightboxStubCall {
-	/**
-	 * The FULL records, not `{id}` (TASK-2431): the metadata a producer threads
-	 * onto each image — `mime_type` above all — is part of what it must get
-	 * right, and a narrower type here would make that unassertable.
-	 */
-	images: LightboxImage[];
-	index: number;
-	wsSlug: string;
-	/** Threaded down by the host since TASK-2429; the viewer owns the restore. */
-	invoker: HTMLElement | null;
-	onClose: () => void;
-}
-
-export const lightboxStubCalls: LightboxStubCall[] = [];
diff --git a/web/src/lib/components/charts/LineChart.svelte b/web/src/lib/components/charts/LineChart.svelte
deleted file mode 100644
index 3975eed3..00000000
--- a/web/src/lib/components/charts/LineChart.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-<script lang="ts">
-	import { LayerCake, Svg } from 'layercake';
-	import { scalePoint, scaleLinear } from 'd3-scale';
-	import Lines from './layers/Lines.svelte';
-	import AxisX from './layers/AxisX.svelte';
-	import AxisY from './layers/AxisY.svelte';
-	import { resolveColor, type ChartDatum, type ResolvedSeries } from './theme';
-
-	interface Props {
-		data: ChartDatum[];
-		x: string;
-		series: { key: string; label: string; color?: string }[];
-		height?: number;
-		ariaLabel: string;
-	}
-
-	let { data, x, series, height = 240, ariaLabel }: Props = $props();
-
-	const resolvedSeries = $derived<ResolvedSeries[]>(
-		series.map((s, i) => ({ key: s.key, label: s.label, color: resolveColor(s.color, i) }))
-	);
-
-	const hasData = $derived(data.length > 0 && series.length > 0);
-	const padding = { top: 12, right: 16, bottom: 28, left: 36 };
-
-	// y accessor spans the largest series value per datum so the linear
-	// y-domain accommodates every line.
-	const yAccessor = $derived.by(() => {
-		const ser = resolvedSeries;
-		return (d: ChartDatum) => {
-			let max = 0;
-			for (const s of ser) {
-				const v = d[s.key];
-				const n = typeof v === 'number' ? v : Number(v) || 0;
-				if (n > max) max = n;
-			}
-			return max;
-		};
-	});
-</script>
-
-<div class="chart" role="img" aria-label={ariaLabel}>
-	{#if hasData}
-		<div class="legend">
-			{#each resolvedSeries as s (s.key)}
-				<span class="legend-item">
-					<span class="swatch" style:background-color={s.color}></span>
-					{s.label}
-				</span>
-			{/each}
-		</div>
-		<div class="canvas" style:height={`${height}px`}>
-			<LayerCake
-				{data}
-				{x}
-				y={yAccessor}
-				xScale={scalePoint()}
-				yScale={scaleLinear()}
-				yDomain={[0, null]}
-				{padding}
-			>
-				<Svg>
-					<AxisY />
-					<AxisX />
-					<Lines series={resolvedSeries} />
-				</Svg>
-			</LayerCake>
-		</div>
-	{:else}
-		<div class="empty" style:height={`${height}px`}>No data</div>
-	{/if}
-</div>
-
-<style>
-	.chart {
-		width: 100%;
-	}
-
-	.canvas {
-		width: 100%;
-	}
-
-	.legend {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.75rem;
-		margin-bottom: 0.5rem;
-		font-size: 0.75rem;
-		color: var(--text-muted, #6b7280);
-	}
-
-	.legend-item {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.35rem;
-	}
-
-	.swatch {
-		display: inline-block;
-		width: 0.7rem;
-		height: 0.7rem;
-		border-radius: 2px;
-	}
-
-	.empty {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: var(--text-muted, #6b7280);
-		font-size: 0.875rem;
-	}
-</style>
diff --git a/web/src/lib/components/charts/Sparkline.svelte b/web/src/lib/components/charts/Sparkline.svelte
deleted file mode 100644
index b2d0eb49..00000000
--- a/web/src/lib/components/charts/Sparkline.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<script lang="ts">
-	interface Props {
-		values: number[];
-		width?: number;
-		height?: number;
-		color?: string;
-		ariaLabel?: string;
-	}
-
-	let {
-		values,
-		width = 80,
-		height = 24,
-		color = 'var(--chart-1, #4f46e5)',
-		ariaLabel = 'Sparkline'
-	}: Props = $props();
-
-	const path = $derived.by(() => {
-		const n = values.length;
-		if (n === 0) return '';
-
-		const min = Math.min(...values);
-		const max = Math.max(...values);
-		const span = max - min || 1;
-		const pad = 1; // keep the stroke inside the viewbox
-		const usableH = height - pad * 2;
-
-		// Single point: draw a flat line across the middle.
-		if (n === 1) {
-			const y = pad + usableH / 2;
-			return `M0,${y} L${width},${y}`;
-		}
-
-		const stepX = width / (n - 1);
-		return values
-			.map((v, i) => {
-				const x = i * stepX;
-				const y = pad + usableH - ((v - min) / span) * usableH;
-				return `${i === 0 ? 'M' : 'L'}${x},${y}`;
-			})
-			.join(' ');
-	});
-
-	const summary = $derived.by(() => {
-		const n = values.length;
-		if (n === 0) return ariaLabel;
-		const latest = values[n - 1];
-		const min = Math.min(...values);
-		const max = Math.max(...values);
-		return `latest ${latest} (min ${min}, max ${max})`;
-	});
-</script>
-
-{#if values.length > 0}
-	<svg
-		class="sparkline"
-		viewBox="0 0 {width} {height}"
-		width={width}
-		height={height}
-		preserveAspectRatio="none"
-		role="img"
-		aria-label={ariaLabel}
-	>
-		<title>{summary}</title>
-		<path
-			d={path}
-			fill="none"
-			stroke={color}
-			stroke-width="1.5"
-			stroke-linejoin="round"
-			stroke-linecap="round"
-			vector-effect="non-scaling-stroke"
-		/>
-	</svg>
-{/if}
-
-<style>
-	.sparkline {
-		display: inline-block;
-		vertical-align: middle;
-	}
-</style>
diff --git a/web/src/lib/components/charts/layers/Lines.svelte b/web/src/lib/components/charts/layers/Lines.svelte
deleted file mode 100644
index 5815c78c..00000000
--- a/web/src/lib/components/charts/layers/Lines.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte';
-	import type { LayerCakeContext, ChartDatum, ResolvedSeries } from '../theme';
-
-	interface Props {
-		series: ResolvedSeries[];
-	}
-
-	let { series }: Props = $props();
-
-	const { data, xGet, yScale, xScale } = getContext<LayerCakeContext>('LayerCake');
-
-	// Center the point within a band when the x scale is categorical (band).
-	function cx(d: ChartDatum): number {
-		const half = typeof $xScale.bandwidth === 'function' ? $xScale.bandwidth() / 2 : 0;
-		return $xGet(d) + half;
-	}
-
-	function num(d: ChartDatum, key: string): number {
-		const v = d[key];
-		return typeof v === 'number' ? v : Number(v) || 0;
-	}
-
-	function path(key: string): string {
-		return $data
-			.map((d, i) => `${i === 0 ? 'M' : 'L'}${cx(d)},${$yScale(num(d, key))}`)
-			.join(' ');
-	}
-</script>
-
-<g class="lines">
-	{#each series as s (s.key)}
-		<path d={path(s.key)} fill="none" stroke={s.color} stroke-width="2" stroke-linejoin="round" />
-	{/each}
-</g>
diff --git a/web/src/lib/components/editor/MermaidRenderer.svelte b/web/src/lib/components/editor/MermaidRenderer.svelte
deleted file mode 100644
index e96bafc3..00000000
--- a/web/src/lib/components/editor/MermaidRenderer.svelte
+++ /dev/null
@@ -1,152 +0,0 @@
-<script lang="ts">
-	import type { Editor } from '@tiptap/core';
-
-	let {
-		editor,
-	}: {
-		editor: Editor | null;
-	} = $props();
-
-	interface MermaidBlock {
-		source: string;
-		svg: string;
-		error: boolean;
-	}
-
-	let blocks = $state<MermaidBlock[]>([]);
-	let mermaidMod: typeof import('mermaid') | null = null;
-	let rendering = $state(false);
-
-	async function ensureMermaid() {
-		if (!mermaidMod) {
-			mermaidMod = await import('mermaid');
-			mermaidMod.default.initialize({
-				startOnLoad: false,
-				theme: 'dark',
-				securityLevel: 'strict',
-				fontFamily: 'inherit',
-			});
-		}
-		return mermaidMod;
-	}
-
-	function extractMermaidSources(ed: Editor): string[] {
-		const sources: string[] = [];
-		ed.state.doc.descendants((node) => {
-			if (node.type.name === 'codeBlock' && node.attrs.language === 'mermaid') {
-				const text = node.textContent.trim();
-				if (text) sources.push(text);
-			}
-		});
-		return sources;
-	}
-
-	let lastSourcesKey = '';
-
-	async function update() {
-		if (!editor || rendering) return;
-
-		const sources = extractMermaidSources(editor);
-		const key = sources.join('\n---\n');
-		if (key === lastSourcesKey) return;
-		lastSourcesKey = key;
-
-		if (sources.length === 0) {
-			blocks = [];
-			return;
-		}
-
-		rendering = true;
-		try {
-			const m = await ensureMermaid();
-			const newBlocks: MermaidBlock[] = [];
-
-			// Render one at a time — mermaid can't handle concurrent renders
-			for (const source of sources) {
-				try {
-					const id = `mmd-${Math.random().toString(36).slice(2, 10)}`;
-					const { svg } = await m.default.render(id, source);
-					newBlocks.push({ source, svg, error: false });
-				} catch {
-					newBlocks.push({ source, svg: '', error: true });
-				}
-			}
-
-			blocks = newBlocks;
-		} finally {
-			rendering = false;
-		}
-	}
-
-	$effect(() => {
-		if (!editor) return;
-
-		const handler = () => update();
-		editor.on('update', handler);
-
-		// Initial render — delay slightly to let editor DOM settle
-		setTimeout(update, 100);
-
-		return () => {
-			editor.off('update', handler);
-		};
-	});
-</script>
-
-{#if blocks.length > 0}
-	<div class="mermaid-section">
-		<div class="mermaid-header">Diagrams</div>
-		{#each blocks as block, i (i)}
-			<div class="mermaid-block">
-				{#if block.error}
-					<div class="mermaid-error">Could not render diagram</div>
-				{:else}
-					<div class="mermaid-diagram">{@html block.svg}</div>
-				{/if}
-			</div>
-		{/each}
-	</div>
-{/if}
-
-<style>
-	.mermaid-section {
-		display: flex;
-		flex-direction: column;
-		gap: var(--space-3);
-		margin-top: var(--space-6);
-		padding-top: var(--space-4);
-		border-top: 1px solid var(--border);
-	}
-
-	.mermaid-header {
-		font-size: 0.8em;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		color: var(--text-muted);
-	}
-
-	.mermaid-block {
-		background: var(--bg-tertiary);
-		border-radius: var(--radius);
-		padding: var(--space-4);
-		overflow-x: auto;
-	}
-
-	.mermaid-diagram {
-		display: flex;
-		justify-content: center;
-	}
-
-	.mermaid-diagram :global(svg) {
-		max-width: 100%;
-		height: auto;
-	}
-
-	.mermaid-error {
-		color: var(--accent-orange);
-		font-size: 0.85em;
-		text-align: center;
-		padding: var(--space-2);
-	}
-</style>
diff --git a/web/src/lib/components/versions/VersionHistory.svelte b/web/src/lib/components/versions/VersionHistory.svelte
deleted file mode 100644
index e4c8d0c2..00000000
--- a/web/src/lib/components/versions/VersionHistory.svelte
+++ /dev/null
@@ -1,620 +0,0 @@
-<script lang="ts">
-	import type { Version, Item, Activity } from '$lib/types';
-	import { api } from '$lib/api/client';
-	import { toastStore } from '$lib/stores/toast.svelte';
-	import DiffView from './DiffView.svelte';
-	import Chip from '$lib/components/common/Chip.svelte';
-	import EmptyState from '$lib/components/common/EmptyState.svelte';
-	import { relativeTime } from '$lib/utils/markdown';
-
-	interface Props {
-		wsSlug: string;
-		itemSlug: string;
-		currentContent: string;
-		onRestore?: (item: Item) => void;
-		onClose?: () => void;
-	}
-
-	let { wsSlug, itemSlug, currentContent, onRestore, onClose }: Props = $props();
-
-	/** A unified timeline entry -- either a content version or an activity event. */
-	interface TimelineEntry {
-		id: string;
-		kind: 'version' | 'activity';
-		created_at: string;
-		actor: string;
-		actor_name: string;
-		source: string;
-		summary: string;
-		/** Only for version entries */
-		version?: Version;
-		/** Only for activity entries */
-		activity?: Activity;
-	}
-
-	let versions = $state<Version[]>([]);
-	let activities = $state<Activity[]>([]);
-	let loading = $state(true);
-	let error = $state('');
-	let selectedEntryId = $state<string | null>(null);
-	let confirmingRestoreId = $state<string | null>(null);
-	let restoringId = $state<string | null>(null);
-
-	/** Merge versions and activities into a single timeline sorted newest-first. */
-	let timeline = $derived.by(() => {
-		const entries: TimelineEntry[] = [];
-
-		// Track version timestamps to avoid showing duplicate activity entries
-		const versionTimestamps = new Set<number>();
-		for (const v of versions) {
-			versionTimestamps.add(Math.floor(new Date(v.created_at).getTime() / 1000));
-		}
-
-		// Add version entries
-		for (const v of versions) {
-			entries.push({
-				id: v.id,
-				kind: 'version',
-				created_at: v.created_at,
-				actor: v.created_by,
-				actor_name: '',
-				source: v.source,
-				summary: v.change_summary || 'Content updated',
-				version: v
-			});
-		}
-
-		// Filter activity entries:
-		// 1. Skip "updated" activities that have a matching version at the same second
-		// 2. Collapse rapid content autosaves (empty-metadata "updated" entries within 5 min)
-		//    into a single entry to reduce noise
-		const sortedActivities = [...activities].sort(
-			(a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
-		);
-
-		let lastContentSaveTime = 0;
-		for (const a of sortedActivities) {
-			const aTime = Math.floor(new Date(a.created_at).getTime() / 1000);
-			const hasMatchingVersion = a.action === 'updated' && versionTimestamps.has(aTime);
-			if (hasMatchingVersion) continue;
-
-			// Collapse rapid content autosaves: if this is an "updated" with no meaningful
-			// metadata and is within 5 minutes of the last one we kept, skip it
-			const isEmptyUpdate = a.action === 'updated' && (!a.metadata || a.metadata === '{}');
-			if (isEmptyUpdate) {
-				if (lastContentSaveTime > 0 && (lastContentSaveTime - aTime) < 300) {
-					continue; // Skip -- too close to a newer save we already kept
-				}
-				lastContentSaveTime = aTime;
-			}
-
-			entries.push({
-				id: `activity-${a.id}`,
-				kind: 'activity',
-				created_at: a.created_at,
-				actor: a.actor,
-				actor_name: a.actor_name ?? '',
-				source: a.source,
-				summary: formatActivitySummary(a),
-				activity: a
-			});
-		}
-
-		// Sort newest first
-		entries.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
-		return entries;
-	});
-
-	let selectedEntry = $derived(
-		selectedEntryId ? timeline.find((e) => e.id === selectedEntryId) ?? null : null
-	);
-
-	let diffOldContent = $derived.by(() => {
-		if (!selectedEntry?.version) return '';
-		return selectedEntry.version.content;
-	});
-
-	let diffNewContent = $derived.by(() => {
-		if (!selectedEntry?.version) return '';
-		const idx = versions.findIndex((v) => v.id === selectedEntry!.version!.id);
-		if (idx <= 0) {
-			return currentContent;
-		}
-		return versions[idx - 1].content;
-	});
-
-	$effect(() => {
-		loadHistory();
-	});
-
-	async function loadHistory() {
-		loading = true;
-		error = '';
-		try {
-			const [versionResult, activityResult] = await Promise.all([
-				api.versions.list(wsSlug, itemSlug),
-				api.versions.activity(wsSlug, itemSlug)
-			]);
-			versions = versionResult.sort(
-				(a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
-			);
-			activities = activityResult;
-		} catch (err) {
-			error = err instanceof Error ? err.message : 'Failed to load history';
-		} finally {
-			loading = false;
-		}
-	}
-
-	function formatActivitySummary(a: Activity): string {
-		const actionLabels: Record<string, string> = {
-			created: 'Item created',
-			updated: 'Item updated',
-			archived: 'Item archived',
-			restored: 'Item restored',
-			moved: 'Item moved'
-		};
-		let label = actionLabels[a.action] ?? a.action;
-
-		// Parse metadata for richer descriptions
-		if (a.metadata && a.metadata !== '{}') {
-			try {
-				const meta = JSON.parse(a.metadata);
-				if (meta.changes) {
-					label = meta.changes;
-				}
-				if (meta.from_collection && meta.to_collection) {
-					label = `Moved from ${meta.from_collection} to ${meta.to_collection}`;
-				}
-			} catch { /* ignore parse errors */ }
-		}
-		return label;
-	}
-
-	function selectEntry(id: string) {
-		if (selectedEntryId === id) {
-			selectedEntryId = null;
-		} else {
-			selectedEntryId = id;
-			confirmingRestoreId = null;
-		}
-	}
-
-	function startRestore(id: string) {
-		confirmingRestoreId = id;
-	}
-
-	function cancelRestore() {
-		confirmingRestoreId = null;
-	}
-
-	async function confirmRestore(versionId: string) {
-		restoringId = versionId;
-		try {
-			const updatedItem = await api.versions.restore(wsSlug, itemSlug, versionId);
-			toastStore.show('Version restored successfully', 'success');
-			confirmingRestoreId = null;
-			onRestore?.(updatedItem);
-		} catch (err) {
-			const message = err instanceof Error ? err.message : 'Failed to restore version';
-			toastStore.show(message, 'error');
-		} finally {
-			restoringId = null;
-		}
-	}
-
-	function actorLabel(entry: TimelineEntry): string {
-		if (entry.actor_name) return entry.actor_name;
-		return entry.actor === 'agent' ? 'Agent' : 'User';
-	}
-
-	function sourceLabel(source: string): string {
-		const labels: Record<string, string> = {
-			cli: 'CLI',
-			web: 'Web',
-			skill: 'Skill'
-		};
-		return labels[source] ?? source;
-	}
-</script>
-
-<div class="version-panel">
-	<div class="panel-header">
-		<h3>History</h3>
-		{#if onClose}
-			<button class="close-btn" type="button" onclick={onClose}>&#10005;</button>
-		{/if}
-	</div>
-
-	<div class="panel-body">
-		{#if loading}
-			<div class="loading">
-				<span class="spinner"></span>
-				<span>Loading history...</span>
-			</div>
-		{:else if error}
-			<div class="error-msg">{error}</div>
-		{:else if timeline.length === 0}
-			<EmptyState
-				icon="📄"
-				title="No history yet"
-				message="Changes to this item will appear here automatically."
-			/>
-		{:else}
-			<div class="timeline">
-				{#each timeline as entry, i (entry.id)}
-					{@const isSelected = selectedEntryId === entry.id}
-					{@const isVersion = entry.kind === 'version'}
-					{@const isConfirming = confirmingRestoreId === entry.id}
-					{@const isRestoring = restoringId === entry.id}
-
-					<div class="timeline-entry" class:selected={isSelected}>
-						<div class="timeline-marker">
-							<div
-								class="marker-dot"
-								class:active={isSelected}
-								class:marker-version={isVersion}
-							></div>
-							{#if i < timeline.length - 1}
-								<div class="marker-line"></div>
-							{/if}
-						</div>
-
-						<div class="entry-content">
-							{#if isVersion}
-								<button
-									class="entry-header"
-									type="button"
-									onclick={() => selectEntry(entry.id)}
-								>
-									<div class="entry-meta">
-										<span class="entry-time" title={new Date(entry.created_at).toLocaleString()}>{relativeTime(entry.created_at)}</span>
-										<div class="badges">
-											<Chip size="sm" color="var(--status-blue)">Content</Chip>
-											<Chip
-												size="sm"
-												color={entry.actor === 'agent'
-													? 'var(--accent-purple)'
-													: 'var(--status-blue)'}
-											>
-												{actorLabel(entry)}
-											</Chip>
-											<Chip size="sm" color="var(--accent-green)">
-												{sourceLabel(entry.source)}
-											</Chip>
-										</div>
-									</div>
-									{#if entry.summary}
-										<p class="change-summary">{entry.summary}</p>
-									{/if}
-								</button>
-
-								{#if isSelected}
-									<div class="entry-details">
-										<div class="diff-container">
-											<DiffView oldContent={diffOldContent} newContent={diffNewContent} />
-										</div>
-
-										<div class="restore-area">
-											{#if isConfirming}
-												<div class="confirm-prompt">
-													<span class="confirm-text">Restore to this version?</span>
-													<div class="confirm-actions">
-														<button
-															class="btn-cancel"
-															type="button"
-															onclick={cancelRestore}
-															disabled={isRestoring}
-														>
-															Cancel
-														</button>
-														<button
-															class="btn-restore-confirm"
-															type="button"
-															onclick={() => confirmRestore(entry.version!.id)}
-															disabled={isRestoring}
-														>
-															{isRestoring ? 'Restoring...' : 'Confirm Restore'}
-														</button>
-													</div>
-												</div>
-											{:else}
-												<button
-													class="btn-restore"
-													type="button"
-													onclick={() => startRestore(entry.id)}
-												>
-													Restore this version
-												</button>
-											{/if}
-										</div>
-									</div>
-								{/if}
-							{:else}
-								<!-- Activity entry (non-expandable) -->
-								<div class="entry-header activity-entry">
-									<div class="entry-meta">
-										<span class="entry-time" title={new Date(entry.created_at).toLocaleString()}>{relativeTime(entry.created_at)}</span>
-										<div class="badges">
-											<Chip
-												size="sm"
-												color={entry.actor === 'agent'
-													? 'var(--accent-purple)'
-													: 'var(--status-blue)'}
-											>
-												{actorLabel(entry)}
-											</Chip>
-											<Chip size="sm" color="var(--accent-green)">
-												{sourceLabel(entry.source)}
-											</Chip>
-										</div>
-									</div>
-									<p class="change-summary">{entry.summary}</p>
-								</div>
-							{/if}
-						</div>
-					</div>
-				{/each}
-			</div>
-		{/if}
-	</div>
-</div>
-
-<style>
-	.version-panel {
-		background: var(--bg-secondary);
-		border: 1px solid var(--border);
-		border-radius: var(--radius);
-		overflow: hidden;
-		display: flex;
-		flex-direction: column;
-		max-height: 100%;
-	}
-
-	.panel-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: var(--space-3) var(--space-4);
-		border-bottom: 1px solid var(--border);
-		flex-shrink: 0;
-	}
-
-	.panel-header h3 {
-		margin: 0;
-		font-size: 0.95em;
-		font-weight: 600;
-		color: var(--text-primary);
-	}
-
-	.close-btn {
-		background: none;
-		border: none;
-		color: var(--text-muted);
-		font-size: 1em;
-		cursor: pointer;
-		padding: var(--space-1);
-		border-radius: var(--radius-sm);
-		line-height: 1;
-	}
-
-	.close-btn:hover {
-		color: var(--text-primary);
-		background: var(--bg-tertiary);
-	}
-
-	.panel-body {
-		overflow-y: auto;
-		flex: 1;
-		padding: var(--space-3) var(--space-4);
-	}
-
-	.loading {
-		display: flex;
-		align-items: center;
-		gap: var(--space-2);
-		padding: var(--space-4) 0;
-		color: var(--text-muted);
-		font-size: 0.9em;
-		justify-content: center;
-	}
-
-	.spinner {
-		width: 16px;
-		height: 16px;
-		border: 2px solid var(--border);
-		border-top-color: var(--accent-blue);
-		border-radius: 50%;
-		animation: spin 0.6s linear infinite;
-	}
-
-	@keyframes spin {
-		to { transform: rotate(360deg); }
-	}
-
-	.error-msg {
-		padding: var(--space-2) var(--space-3);
-		background: color-mix(in srgb, var(--accent-red) 12%, transparent);
-		color: var(--accent-red);
-		border-radius: var(--radius);
-		font-size: 0.85em;
-	}
-
-	.timeline { display: flex; flex-direction: column; }
-
-	.timeline-entry {
-		display: flex;
-		gap: var(--space-3);
-		position: relative;
-	}
-
-	.timeline-marker {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		flex-shrink: 0;
-		width: 16px;
-		padding-top: var(--space-2);
-	}
-
-	.marker-dot {
-		width: 10px;
-		height: 10px;
-		border-radius: 50%;
-		background: var(--bg-tertiary);
-		border: 2px solid var(--border);
-		flex-shrink: 0;
-		z-index: 1;
-	}
-
-	.marker-dot.active {
-		background: var(--accent-blue);
-		border-color: var(--accent-blue);
-	}
-
-	.marker-dot.marker-version {
-		background: var(--accent-blue);
-		border-color: var(--accent-blue);
-		width: 12px;
-		height: 12px;
-	}
-
-	.marker-line {
-		width: 2px;
-		flex: 1;
-		background: var(--border);
-		min-height: var(--space-2);
-	}
-
-	.entry-content {
-		flex: 1;
-		min-width: 0;
-		padding-bottom: var(--space-3);
-	}
-
-	.entry-header {
-		width: 100%;
-		background: none;
-		border: 1px solid transparent;
-		border-radius: var(--radius);
-		padding: var(--space-2);
-		cursor: pointer;
-		text-align: left;
-		color: var(--text-primary);
-	}
-
-	.entry-header:hover { background: var(--bg-tertiary); }
-
-	.entry-header.activity-entry { cursor: default; }
-	.entry-header.activity-entry:hover { background: none; }
-
-	.selected .entry-header {
-		background: var(--bg-tertiary);
-		border-color: var(--border);
-	}
-
-	.entry-meta {
-		display: flex;
-		align-items: center;
-		gap: var(--space-2);
-		flex-wrap: wrap;
-	}
-
-	.entry-time {
-		font-size: 0.85em;
-		color: var(--text-secondary);
-		font-weight: 500;
-	}
-
-	.badges { display: flex; gap: var(--space-1); }
-
-	.change-summary {
-		margin: var(--space-1) 0 0 0;
-		font-size: 0.8em;
-		color: var(--text-muted);
-		line-height: 1.4;
-	}
-
-	.entry-details {
-		margin-top: var(--space-2);
-		padding: 0 var(--space-2);
-	}
-
-	.diff-container {
-		border: 1px solid var(--border);
-		border-radius: var(--radius);
-		overflow: hidden;
-		margin-bottom: var(--space-3);
-	}
-
-	.restore-area { display: flex; justify-content: flex-end; }
-
-	.btn-restore {
-		padding: var(--space-1) var(--space-3);
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border);
-		border-radius: var(--radius);
-		color: var(--text-secondary);
-		font-size: 0.8em;
-		cursor: pointer;
-	}
-
-	.btn-restore:hover {
-		background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
-		border-color: var(--accent-blue);
-		color: var(--accent-blue);
-	}
-
-	.confirm-prompt {
-		display: flex;
-		align-items: center;
-		gap: var(--space-3);
-		padding: var(--space-2) var(--space-3);
-		background: color-mix(in srgb, var(--accent-yellow, #eab308) 8%, transparent);
-		border: 1px solid color-mix(in srgb, var(--accent-yellow, #eab308) 30%, transparent);
-		border-radius: var(--radius);
-		flex-wrap: wrap;
-	}
-
-	.confirm-text {
-		font-size: 0.8em;
-		color: var(--text-secondary);
-		font-weight: 500;
-	}
-
-	.confirm-actions { display: flex; gap: var(--space-2); margin-left: auto; }
-
-	.btn-cancel {
-		padding: var(--space-1) var(--space-3);
-		background: var(--bg-tertiary);
-		border: 1px solid var(--border);
-		border-radius: var(--radius);
-		color: var(--text-secondary);
-		font-size: 0.8em;
-		cursor: pointer;
-	}
-
-	.btn-cancel:hover:not(:disabled) {
-		background: var(--bg-primary);
-		color: var(--text-primary);
-	}
-
-	.btn-restore-confirm {
-		padding: var(--space-1) var(--space-3);
-		background: var(--accent-blue);
-		border: none;
-		border-radius: var(--radius);
-		color: #fff;
-		font-size: 0.8em;
-		font-weight: 500;
-		cursor: pointer;
-	}
-
-	.btn-restore-confirm:hover:not(:disabled) { filter: brightness(1.1); }
-
-	.btn-restore-confirm:disabled,
-	.btn-cancel:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-</style>