feat(compaction): add UI-driven conversation compaction

Summarize a conversation's older "head" into a structured anchored Markdown
summary while preserving the most recent turns verbatim, shrinking context size
while keeping the information needed to continue coherently. Triggered by a
"Compact conversation" button in Chat Settings (not an agent tool).

Approach informed by OpenCode's session/compaction.ts:
- Ported SUMMARY_TEMPLATE (Goal / Constraints / Progress / Key Decisions /
  Next Steps / Critical Context / Relevant Files) and the anchored-summary
  buildPrompt (re-summarizes a prior summary when present).
- Ported the TOOL_OUTPUT_MAX_CHARS (2000) cap on tool results in the summary
  request.
- Simplified tail selection to a fixed recent-turn count (DEFAULT_TAIL_TURNS=2)
  instead of OpenCode's token-budget splitTurn.

core:
- New src/compaction/ module (pure, DB-free): template, prompt builder,
  head/tail selection, transcript renderer with tool-output capping, prior
  summary extraction. Generic over ChatMessage so callers keep turnId/seq.
- db/chunks.ts: rekeyChunks(from,to) relocates a tab's full history to a
  backup tab (reversible — nothing is deleted).
- AgentEvent: compaction-started / -complete / -error variants.

api:
- AgentManager.compactTab(tempTabId, sourceTabId): side-effect-free
  resolveConnection() for the compactor model (configured compaction_model_*,
  else the source tab's own key+model), one-shot tool-less summary generation
  via a transient Agent, then relocate full history to a fresh backup tab and
  re-seed the canonical source id with [summary turn + preserved tail]. Source
  tab is locked (messages queue) during the run; queue drains afterward.
- Routes: POST /tabs/:id/compact, GET/PUT /tabs/settings/compaction-model.

frontend:
- "Compact conversation" button in ModelSelector (Chat Settings), between
  Working Directory and the agent toggle; idle-gated.
- Compaction-model key+model selector in Settings, beside the title model.
- Transient placeholder tab shows a large, non-faded "Please wait, compacting
  conversation…" screen; closing it cancels. Source input locked while running.
- Handle compaction-* events: reload compacted source, insert backup tab,
  refocus source, discard placeholder.

tests: core compaction unit tests, rekeyChunks DB test, AgentManager.compactTab
orchestration tests, and compaction route tests. All green (713 tests), biome
clean, all typechecks pass, frontend builds.

5 files changed, 156 insertions, 6 deletions

diff --git a/packages/frontend/src/lib/components/ChatInput.svelte b/packages/frontend/src/lib/components/ChatInput.svelte
index 079ef4a..f954be8 100644
--- a/packages/frontend/src/lib/components/ChatInput.svelte
+++ b/packages/frontend/src/lib/components/ChatInput.svelte
@@ -17,6 +17,13 @@ const inputValue = $derived(tabStore.activeTab?.draft ?? "");
 const cacheStats = $derived(tabStore.activeTab?.cacheStats ?? null);
 
 const isRunning = $derived(agentStatus === "running");
+// Lock input while this tab is mid-compaction: either it's the source
+// conversation being summarized, or it's the transient placeholder tab.
+const compactLocked = $derived(
+	(tabStore.activeTab?.isCompacting ?? false) ||
+		(tabStore.activeTab?.compactingSource ?? null) !== null ||
+		(tabStore.activeTab?.compactionError ?? null) !== null,
+);
 const hasText = $derived(inputValue.trim().length > 0);
 // While generating with an empty box, the primary action is "stop". With text
 // in the box, it stays "send" (the message is queued behind the live turn).
@@ -88,6 +95,7 @@ function handleKeydown(e: KeyboardEvent) {
 }
 
 function submit() {
+	if (compactLocked) return;
 	const text = inputValue.trim();
 	if (!text) return;
 	if (tabId) tabStore.setDraft(tabId, "");
@@ -110,7 +118,8 @@ function primaryAction() {
 			bind:this={inputEl}
 			value={inputValue}
 			rows="1"
-			placeholder="Type a message..."
+			placeholder={compactLocked ? "Compaction in progress…" : "Type a message..."}
+			disabled={compactLocked}
 			class="textarea textarea-ghost flex-1 resize-none leading-normal !min-h-0 h-auto"
 			onkeydown={handleKeydown}
 			oninput={handleInput}
@@ -120,7 +129,7 @@ function primaryAction() {
 		<button
 			type="button"
 			class="btn w-20 shrink-0 {showStop ? 'btn-error btn-outline' : 'btn-primary'}"
-			disabled={!showStop && !hasText}
+			disabled={compactLocked || (!showStop && !hasText)}
 			onclick={primaryAction}
 			title={showStop ? "Stop generation" : "Send message"}
 		>
diff --git a/packages/frontend/src/lib/components/ChatPanel.svelte b/packages/frontend/src/lib/components/ChatPanel.svelte
index abdec17..ee1b8ef 100644
--- a/packages/frontend/src/lib/components/ChatPanel.svelte
+++ b/packages/frontend/src/lib/components/ChatPanel.svelte
@@ -10,6 +10,11 @@ let isLoadingMore = $state(false);
 
 const renderGroups = $derived(tabStore.activeTab?.renderGroups ?? []);
 const activeTabId = $derived(tabStore.activeTab?.id);
+// Compaction placeholder state for the active tab. `compactingSource` is set on
+// a transient placeholder tab while a conversation is being compacted;
+// `compactionError` is set if it failed.
+const compactingSource = $derived(tabStore.activeTab?.compactingSource ?? null);
+const compactionError = $derived(tabStore.activeTab?.compactionError ?? null);
 
 // Stable, turn-scoped render keys. A bubble's identity is `${turnId}:${role}:${n}`
 // (n = its index among same-(turn,role) messages) rather than the underlying
@@ -138,14 +143,28 @@ $effect(() => {
 			{#if isLoadingMore}
 				<div class="text-center text-xs text-base-content/40 py-2">Loading earlier messages...</div>
 			{/if}
-			{#if renderGroups.length === 0}
+			{#if compactingSource || compactionError}
+				<div class="flex flex-col items-center justify-center h-full gap-4 px-6 text-center">
+					{#if compactionError}
+						<div class="text-2xl font-semibold text-error">Compaction failed</div>
+						<div class="text-base text-base-content/70 max-w-md">{compactionError}</div>
+						<div class="text-sm text-base-content/50">Close this tab to dismiss — your conversation was not changed.</div>
+					{:else}
+						<span class="loading loading-spinner loading-lg text-primary"></span>
+						<div class="text-2xl font-semibold text-base-content">Please wait, compacting conversation…</div>
+						<div class="text-sm text-base-content/50">You can cancel by closing this tab.</div>
+					{/if}
+				</div>
+			{:else if renderGroups.length === 0}
 				<div class="flex items-center justify-center h-full text-base-content/40 text-sm">
 					Send a message to start a conversation
 				</div>
 			{/if}
-			{#each keyedMessages as { m, key } (key)}
-				<ChatMessageComponent message={m} tabId={activeTabId} />
-			{/each}
+			{#if !compactingSource && !compactionError}
+				{#each keyedMessages as { m, key } (key)}
+					<ChatMessageComponent message={m} tabId={activeTabId} />
+				{/each}
+			{/if}
 		</div>
 
 		<!-- Scroll-to-bottom button -->
diff --git a/packages/frontend/src/lib/components/ModelSelector.svelte b/packages/frontend/src/lib/components/ModelSelector.svelte
index 8601795..3b43ff8 100644
--- a/packages/frontend/src/lib/components/ModelSelector.svelte
+++ b/packages/frontend/src/lib/components/ModelSelector.svelte
@@ -63,6 +63,9 @@ const modelCache = new Map<string, string[]>();
 		onReasoningChange,
 		onAgentChange = (_agent: AgentInfo | null) => {},
 		onWorkingDirectoryChange = (_dir: string | null) => {},
+		onCompact = () => {},
+		canCompact = false,
+		compacting = false,
 	}: {
 		keys?: KeyInfo[];
 		activeKeyId?: string | null;
@@ -77,6 +80,9 @@ const modelCache = new Map<string, string[]>();
 		onReasoningChange: (effort: string) => void;
 		onAgentChange?: (agent: AgentInfo | null) => void;
 		onWorkingDirectoryChange?: (dir: string | null) => void;
+		onCompact?: () => void;
+		canCompact?: boolean;
+		compacting?: boolean;
 	} = $props();
 
 	let showKeyModal = $state(false);
@@ -224,6 +230,24 @@ const modelCache = new Map<string, string[]>();
 		</div>
 	</div>
 
+	<!-- Compact conversation -->
+	<div class="mb-3">
+		<button
+			type="button"
+			class="btn btn-sm btn-outline w-full"
+			disabled={!canCompact || compacting}
+			onclick={onCompact}
+			title="Summarize older turns into a compact anchor, preserving the most recent turns. Opens a new tab while it works; the conversation continues here once done."
+		>
+			{#if compacting}
+				<span class="loading loading-spinner loading-xs"></span>
+				Compacting…
+			{:else}
+				Compact conversation
+			{/if}
+		</button>
+	</div>
+
 	<!-- Toggle -->
 	<div class="flex items-center gap-2 mb-3">
 		<button
diff --git a/packages/frontend/src/lib/components/SettingsPanel.svelte b/packages/frontend/src/lib/components/SettingsPanel.svelte
index 7a810d5..8b28957 100644
--- a/packages/frontend/src/lib/components/SettingsPanel.svelte
+++ b/packages/frontend/src/lib/components/SettingsPanel.svelte
@@ -26,6 +26,10 @@ function selectTheme(theme: Theme): void {
 let titleKeyId = $state<string | null>(null);
 let titleModelId = $state<string | null>(null);
 let availableModels = $state<string[]>([]);
+let compactionKeyId = $state<string | null>(null);
+let compactionModelId = $state<string | null>(null);
+let compactionModels = $state<string[]>([]);
+let loadingCompactionModels = $state(false);
 let loadingModels = $state(false);
 let autoExpandThinking = $state(appSettings.autoExpandThinking);
 let localChunkLimit = $state(appSettings.chunkLimit);
@@ -132,6 +136,19 @@ async function loadSettings(): Promise<void> {
 		// ignore
 	}
 	try {
+		const res = await fetch(`${apiBase}/tabs/settings/compaction-model`);
+		if (res.ok) {
+			const data = (await res.json()) as { keyId: string | null; modelId: string | null };
+			compactionKeyId = data.keyId;
+			if (compactionKeyId) {
+				await loadCompactionModelsForKey(compactionKeyId);
+			}
+			compactionModelId = data.modelId;
+		}
+	} catch {
+		// ignore
+	}
+	try {
 		const res = await fetch(`${apiBase}/tabs/settings/auto-expand-thinking`);
 		if (res.ok) {
 			const data = (await res.json()) as { value: string | null };
@@ -319,6 +336,48 @@ async function onModelChange(e: Event): Promise<void> {
 	saveTitleModel();
 }
 
+async function loadCompactionModelsForKey(keyId: string): Promise<void> {
+	loadingCompactionModels = true;
+	try {
+		const res = await fetch(`${apiBase}/models/available?keyId=${encodeURIComponent(keyId)}`);
+		if (!res.ok) {
+			compactionModels = [];
+			return;
+		}
+		const data = (await res.json()) as { models: string[] };
+		compactionModels = data.models ?? [];
+	} catch {
+		compactionModels = [];
+	} finally {
+		loadingCompactionModels = false;
+	}
+}
+
+function saveCompactionModel(): void {
+	fetch(`${apiBase}/tabs/settings/compaction-model`, {
+		method: "PUT",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({ keyId: compactionKeyId, modelId: compactionModelId }),
+	}).catch(() => {});
+}
+
+async function onCompactionKeyChange(e: Event): Promise<void> {
+	const select = e.target as HTMLSelectElement;
+	compactionKeyId = select.value || null;
+	compactionModelId = null;
+	compactionModels = [];
+	if (compactionKeyId) {
+		await loadCompactionModelsForKey(compactionKeyId);
+	}
+	saveCompactionModel();
+}
+
+function onCompactionModelChange(e: Event): void {
+	const select = e.target as HTMLSelectElement;
+	compactionModelId = select.value || null;
+	saveCompactionModel();
+}
+
 $effect(() => {
 	void loadSettings();
 });
@@ -374,6 +433,36 @@ $effect(() => {
 
 		<div class="divider my-0"></div>
 
+		<p class="text-xs text-base-content/70">Conversation Compaction Model</p>
+		<p class="text-xs text-base-content/40">Used to summarize a conversation when you compact it. If unset, the tab's own key/model is used.</p>
+
+		<label class="text-xs text-base-content/60">
+			Key
+			<select class="select select-bordered select-sm w-full" onchange={onCompactionKeyChange} value={compactionKeyId ?? ""}>
+				<option value="">Select a key...</option>
+				{#each keys as key (key.id)}
+					<option value={key.id}>{key.id} ({key.provider})</option>
+				{/each}
+			</select>
+		</label>
+
+		<label class="text-xs text-base-content/60">
+			Model
+			<select
+				class="select select-bordered select-sm w-full"
+				onchange={onCompactionModelChange}
+				value={compactionModelId ?? ""}
+				disabled={!compactionKeyId || loadingCompactionModels}
+			>
+				<option value="">{loadingCompactionModels ? "Loading models..." : "Select a model..."}</option>
+				{#each compactionModels as model (model)}
+					<option value={model}>{model}</option>
+				{/each}
+			</select>
+		</label>
+
+		<div class="divider my-0"></div>
+
 		<p class="text-xs text-base-content/70">Chat</p>
 		<label class="flex items-center gap-2 cursor-pointer">
 			<input
diff --git a/packages/frontend/src/lib/components/SidebarPanel.svelte b/packages/frontend/src/lib/components/SidebarPanel.svelte
index 519f411..d20ac79 100644
--- a/packages/frontend/src/lib/components/SidebarPanel.svelte
+++ b/packages/frontend/src/lib/components/SidebarPanel.svelte
@@ -43,6 +43,9 @@ const {
 	onReasoningChange,
 	onAgentChange = (_agent: AgentInfo | null) => {},
 	onWorkingDirectoryChange = (_dir: string | null) => {},
+	onCompact = () => {},
+	canCompact = false,
+	compacting = false,
 	onAddKey = () => {},
 }: {
 	keys?: KeyInfo[];
@@ -64,6 +67,9 @@ const {
 	onReasoningChange: (effort: string) => void;
 	onAgentChange?: (agent: AgentInfo | null) => void;
 	onWorkingDirectoryChange?: (dir: string | null) => void;
+	onCompact?: () => void;
+	canCompact?: boolean;
+	compacting?: boolean;
 	onAddKey?: () => void;
 } = $props();
 
@@ -169,6 +175,9 @@ function contentClass(_selected: string): string {
 				{onAgentChange}
 				{workingDirectory}
 				{onWorkingDirectoryChange}
+				{onCompact}
+				{canCompact}
+				{compacting}
 			/>
 				{:else if panel.selected === "Key Usage"}
 					<KeyUsage {keys} {apiBase} />