From fb97d4cb72d0a90dde102b7001603716ee6e4c3b Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Fri, 22 May 2026 00:19:14 +0900
Subject: feat: agent summoning system, todo improvements, security fixes,
 double-execution bug fix

- Add summon/retrieve tools for spawning child agents in new tabs
  - summon: non-blocking, returns agent_id immediately
  - retrieve: blocking, waits for child to finish, returns result
  - Child tools are intersected with parent permissions (no privilege escalation)
  - Working directory validated to stay within workspace
  - Abort controller stops orphaned agents on tab close
- Rename task_list tool to todo with comprehensive usage guidance in system prompt
- Rename PermissionLog.svelte to ToolPermissions.svelte
- Add 'Summon agents' toggle to tool permissions UI
- Redesign TaskListPanel with DaisyUI checkboxes (indeterminate for in-progress)
- Remove 'blocked' status from task system
- Add tab-created WebSocket event for child agent tab visibility
- Add HMR cleanup for WebSocket connections (close stale connections on hot reload)
- Fix ensureAssistantMessage to not throw on closed tabs
- Fix double tool execution: remove execute from AI SDK tool() in registry.ts
  (agent.ts already executes tools manually via executeToolWithStreaming)
- Fix all pre-existing test failures (missing mocks, stale API signatures)
- Add debug info to copy button (tab ID, injected skills, all tab IDs)
- Add tab ID and tools to conversation copy output
---
 .../src/lib/components/PermissionLog.svelte        | 105 ------------------
 .../src/lib/components/SidebarPanel.svelte         | 120 +++++++++++----------
 .../src/lib/components/TaskListPanel.svelte        | 103 ++++++++++--------
 .../src/lib/components/ToolPermissions.svelte      | 118 ++++++++++++++++++++
 packages/frontend/src/lib/settings.svelte.ts       |   2 +
 packages/frontend/src/lib/tabs.svelte.ts           |  36 ++++++-
 packages/frontend/src/lib/types.ts                 |   5 +-
 packages/frontend/src/lib/ws.svelte.ts             |  15 +++
 8 files changed, 294 insertions(+), 210 deletions(-)
 delete mode 100644 packages/frontend/src/lib/components/PermissionLog.svelte
 create mode 100644 packages/frontend/src/lib/components/ToolPermissions.svelte

(limited to 'packages/frontend/src/lib')

diff --git a/packages/frontend/src/lib/components/PermissionLog.svelte b/packages/frontend/src/lib/components/PermissionLog.svelte
deleted file mode 100644
index 7733dcf..0000000
--- a/packages/frontend/src/lib/components/PermissionLog.svelte
+++ /dev/null
@@ -1,105 +0,0 @@
-<script lang="ts">
-import { onMount } from "svelte";
-import type { LogEntry } from "../types.js";
-import { appSettings } from "../settings.svelte.js";
-
-const { entries, apiBase = "" }: { entries: LogEntry[]; apiBase?: string } = $props();
-
-interface ToolPermission {
-	id: string;
-	label: string;
-	description: string;
-}
-
-const toolPermissions: ToolPermission[] = [
-	{ id: "read", label: "Read files", description: "Allow the AI to read files in the workspace" },
-	{ id: "edit", label: "Edit files", description: "Allow the AI to write/edit files in the workspace" },
-	{ id: "bash", label: "Run commands", description: "Allow the AI to execute shell commands" },
-	{ id: "external_directory", label: "External directories", description: "Allow access to files outside the workspace" },
-];
-
-async function loadPermissions(): Promise<void> {
-	const loaded: Record<string, boolean> = { ...appSettings.toolPerms };
-	for (const perm of toolPermissions) {
-		try {
-			const res = await fetch(`${apiBase}/tabs/settings/perm_${perm.id}`);
-			if (res.ok) {
-				const data = await res.json() as { value: string | null };
-				if (data.value !== null) {
-					loaded[perm.id] = data.value === "allow";
-				}
-			}
-		} catch {
-			// ignore
-		}
-	}
-	appSettings.toolPerms = { ...loaded };
-	appSettings.savedToolPerms = { ...loaded };
-}
-
-function togglePermission(id: string): void {
-	appSettings.toolPerms = { ...appSettings.toolPerms, [id]: !appSettings.toolPerms[id] };
-}
-
-function resetPermissions(): void {
-	appSettings.toolPerms = { ...appSettings.savedToolPerms };
-}
-
-onMount(() => {
-	loadPermissions();
-});
-</script>
-
-<div class="flex flex-col gap-3">
-	<div class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">Tool Permissions</div>
-	<p class="text-xs text-base-content/40">Changes are applied when you send your next message.</p>
-
-	<div class="flex flex-col gap-1.5">
-		{#each toolPermissions as perm (perm.id)}
-			<label class="flex items-start gap-2 cursor-pointer p-1 rounded hover:bg-base-200 transition-colors">
-				<input
-					type="checkbox"
-					class="checkbox checkbox-sm rounded-sm mt-0.5"
-					checked={appSettings.toolPerms[perm.id]}
-					onchange={() => togglePermission(perm.id)}
-				/>
-				<div class="flex flex-col">
-					<span class="text-xs font-medium text-base-content">{perm.label}</span>
-					<span class="text-xs text-base-content/40">{perm.description}</span>
-				</div>
-			</label>
-		{/each}
-	</div>
-
-	<button
-		class="btn btn-sm btn-ghost w-full"
-		disabled={!appSettings.toolPermsDirty}
-		onclick={resetPermissions}
-	>
-		Reset
-	</button>
-
-	<p class="text-xs text-base-content/40">Warning: changing tool access will reset the AI's prompt cache for active conversations, which may increase usage costs.</p>
-
-	<!-- Permission Log -->
-	{#if entries.length > 0}
-		<div class="collapse collapse-arrow bg-base-200 mt-2">
-			<input type="checkbox" />
-			<div class="collapse-title text-sm font-medium py-2 min-h-0">
-				Log ({entries.length})
-			</div>
-			<div class="collapse-content text-xs max-h-40 overflow-y-auto">
-				{#each entries as entry (entry.id)}
-					<div class="flex items-center gap-2 py-1 border-b border-base-300">
-						<span class="badge badge-sm {entry.action === 'reject' ? 'badge-error' : 'badge-success'}">
-							{entry.action}
-						</span>
-						<span class="text-base-content/70">{entry.permission}</span>
-						<span class="text-base-content/50 ml-auto text-xs">{entry.timestamp}</span>
-					</div>
-					<p class="text-base-content/60 pl-2 pb-1">{entry.description}</p>
-				{/each}
-			</div>
-		</div>
-	{/if}
-</div>
diff --git a/packages/frontend/src/lib/components/SidebarPanel.svelte b/packages/frontend/src/lib/components/SidebarPanel.svelte
index 93d528e..a0aeb1d 100644
--- a/packages/frontend/src/lib/components/SidebarPanel.svelte
+++ b/packages/frontend/src/lib/components/SidebarPanel.svelte
@@ -1,64 +1,76 @@
 <script lang="ts">
-	import ModelSelector from "./ModelSelector.svelte";
-	import ModelStatus from "./ModelStatus.svelte";
-	import TaskListPanel from "./TaskListPanel.svelte";
-	import ConfigPanel from "./ConfigPanel.svelte";
-	import SkillsBrowser from "./SkillsBrowser.svelte";
-	import PermissionLog from "./PermissionLog.svelte";
-	import KeyUsage from "./KeyUsage.svelte";
-	import ClaudeReset from "./ClaudeReset.svelte";
-	import SettingsPanel from "./SettingsPanel.svelte";
-	import SystemPromptPanel from "./SystemPromptPanel.svelte";
-	import type { TaskItem, LogEntry, KeyInfo } from "../types.js";
+import type { KeyInfo, LogEntry, TaskItem } from "../types.js";
+import ClaudeReset from "./ClaudeReset.svelte";
+import ConfigPanel from "./ConfigPanel.svelte";
+import KeyUsage from "./KeyUsage.svelte";
+import ModelSelector from "./ModelSelector.svelte";
+import ModelStatus from "./ModelStatus.svelte";
+import SettingsPanel from "./SettingsPanel.svelte";
+import SkillsBrowser from "./SkillsBrowser.svelte";
+import SystemPromptPanel from "./SystemPromptPanel.svelte";
+import TaskListPanel from "./TaskListPanel.svelte";
+import ToolPermissions from "./ToolPermissions.svelte";
 
-	const {
-		keys = [],
-		tasks = [],
-		permissionLog = [],
-		apiBase = "",
-		activeKeyId = null,
-		activeModelId = null,
-		reasoningEffort = "max",
-		onKeyChange,
-		onModelChange,
-		onReasoningChange,
-	}: {
-		keys?: KeyInfo[];
-		tasks?: TaskItem[];
-		permissionLog?: LogEntry[];
-		apiBase?: string;
-		activeKeyId?: string | null;
-		activeModelId?: string | null;
-		reasoningEffort?: string;
-		onKeyChange: (keyId: string) => void;
-		onModelChange: (keyId: string, modelId: string) => void;
-		onReasoningChange: (effort: string) => void;
-	} = $props();
+const {
+	keys = [],
+	tasks = [],
+	permissionLog = [],
+	apiBase = "",
+	activeKeyId = null,
+	activeModelId = null,
+	reasoningEffort = "max",
+	onKeyChange,
+	onModelChange,
+	onReasoningChange,
+}: {
+	keys?: KeyInfo[];
+	tasks?: TaskItem[];
+	permissionLog?: LogEntry[];
+	apiBase?: string;
+	activeKeyId?: string | null;
+	activeModelId?: string | null;
+	reasoningEffort?: string;
+	onKeyChange: (keyId: string) => void;
+	onModelChange: (keyId: string, modelId: string) => void;
+	onReasoningChange: (effort: string) => void;
+} = $props();
 
-	interface Panel {
-		id: number;
-		selected: string;
-	}
+interface Panel {
+	id: number;
+	selected: string;
+}
 
-	let nextId = 0;
-	let panels = $state<Panel[]>([{ id: nextId++, selected: "Model Choice" }]);
+let nextId = 0;
+let panels = $state<Panel[]>([{ id: nextId++, selected: "Model Choice" }]);
 
-	const viewOptions = ["Select a view", "Model Choice", "Key Usage", "Claude Reset", "Model Status", "Tasks", "Config", "Skills", "Tools", "System Prompt", "Settings"];
+const viewOptions = [
+	"Select a view",
+	"Model Choice",
+	"Key Usage",
+	"Claude Reset",
+	"Model Status",
+	"Tasks",
+	"Config",
+	"Skills",
+	"Tools",
+	"System Prompt",
+	"Settings",
+];
 
-	function addPanel() {
-		panels = [...panels, { id: nextId++, selected: "Select a view" }];
-	}
+function addPanel() {
+	panels = [...panels, { id: nextId++, selected: "Select a view" }];
+}
 
-	function panelClass(selected: string): string {
-		const base = "bg-base-200 rounded-lg p-3 flex flex-col min-h-0";
-		const fill = selected === "Key Usage" || selected === "Claude Reset" || selected === "Tasks";
-		return fill ? base + " flex-1" : base;
-	}
+function panelClass(selected: string): string {
+	const base = "bg-base-200 rounded-lg p-3 flex flex-col min-h-0";
+	const fill = selected === "Key Usage" || selected === "Claude Reset" || selected === "Tasks";
+	return fill ? base + " flex-1" : base;
+}
 
-	function contentClass(selected: string): string {
-		const fill = selected === "Key Usage" || selected === "Claude Reset" || selected === "Tasks";
-		return fill ? "mt-2 flex-1 min-h-0" : "mt-2";
-	}
+function contentClass(selected: string): string {
+	const fill = selected === "Key Usage" || selected === "Claude Reset" || selected === "Tasks";
+	return fill ? "mt-2 flex-1 min-h-0" : "mt-2";
+}
 </script>
 
 <div class="flex flex-col gap-2">
@@ -115,7 +127,7 @@
 				{:else if panel.selected === "Skills"}
 					<SkillsBrowser {apiBase} />
 				{:else if panel.selected === "Tools"}
-					<PermissionLog entries={permissionLog} {apiBase} />
+					<ToolPermissions entries={permissionLog} {apiBase} />
 				{:else if panel.selected === "System Prompt"}
 				<SystemPromptPanel {apiBase} />
 			{:else if panel.selected === "Settings"}
diff --git a/packages/frontend/src/lib/components/TaskListPanel.svelte b/packages/frontend/src/lib/components/TaskListPanel.svelte
index 5f2ffe2..d70373f 100644
--- a/packages/frontend/src/lib/components/TaskListPanel.svelte
+++ b/packages/frontend/src/lib/components/TaskListPanel.svelte
@@ -1,41 +1,45 @@
 <script lang="ts">
-	interface TaskItem {
-		id: string;
-		title: string;
-		description: string;
-		status: "pending" | "in_progress" | "done" | "blocked";
-	}
+interface TaskItem {
+	id: string;
+	title: string;
+	description: string;
+	status: "pending" | "in_progress" | "done";
+}
 
-	const { tasks }: { tasks: TaskItem[] } = $props();
+const { tasks }: { tasks: TaskItem[] } = $props();
 
-	const doneCount = $derived(tasks.filter((t) => t.status === "done").length);
-	const inProgressCount = $derived(tasks.filter((t) => t.status === "in_progress").length);
+const doneCount = $derived(tasks.filter((t) => t.status === "done").length);
+const inProgressCount = $derived(tasks.filter((t) => t.status === "in_progress").length);
 
-	function badgeClass(status: TaskItem["status"]): string {
-		switch (status) {
-			case "pending":
-				return "badge badge-ghost badge-xs";
-			case "in_progress":
-				return "badge badge-info badge-xs";
-			case "done":
-				return "badge badge-success badge-xs";
-			case "blocked":
-				return "badge badge-warning badge-xs";
-		}
+function checkboxClass(status: TaskItem["status"]): string {
+	switch (status) {
+		case "pending":
+			return "checkbox checkbox-sm rounded-sm checkbox-secondary";
+		case "in_progress":
+			return "checkbox checkbox-sm rounded-sm checkbox-info";
+		case "done":
+			return "checkbox checkbox-sm rounded-sm checkbox-success";
 	}
+}
+
+function isChecked(status: TaskItem["status"]): boolean {
+	return status === "done";
+}
 
-	function statusIcon(status: TaskItem["status"]): string {
-		switch (status) {
-			case "pending":
-				return "⏳";
-			case "in_progress":
-				return "▶";
-			case "done":
-				return "✓";
-			case "blocked":
-				return "⚠";
-		}
+function isIndeterminate(status: TaskItem["status"]): boolean {
+	return status === "in_progress";
+}
+
+function statusLabel(status: TaskItem["status"]): string {
+	switch (status) {
+		case "pending":
+			return "Pending";
+		case "in_progress":
+			return "In progress";
+		case "done":
+			return "Done";
 	}
+}
 </script>
 
 <div class="flex flex-col gap-2">
@@ -43,28 +47,35 @@
 		<p class="text-xs text-base-content/50">No tasks yet.</p>
 	{:else}
 		<p class="text-xs text-base-content/60">
-			{tasks.length} task{tasks.length !== 1 ? "s" : ""}
-			({doneCount} done, {inProgressCount} in progress)
+			{doneCount}/{tasks.length} done{#if inProgressCount > 0}, {inProgressCount} in progress{/if}
 		</p>
-		<ul class="flex flex-col gap-1">
+		<ul class="flex flex-col gap-0.5">
 			{#each tasks as task (task.id)}
-				<li class="flex flex-col gap-0.5 rounded p-1.5 hover:bg-base-200 transition-colors">
-					<div class="flex items-center gap-1.5">
-						<span class={badgeClass(task.status)}>
-							{statusIcon(task.status)}
-						</span>
+				<li
+					class="flex items-start gap-2 rounded p-1.5 transition-colors {task.status === 'done' ? 'opacity-60' : ''}"
+				>
+					<input
+						type="checkbox"
+						class={checkboxClass(task.status)}
+						checked={isChecked(task.status)}
+						indeterminate={isIndeterminate(task.status)}
+						disabled
+						tabindex="-1"
+					/>
+					<div class="flex flex-col gap-0.5 min-w-0">
 						<span
-							class="text-sm leading-tight {task.status === 'in_progress'
-								? 'font-bold'
-								: 'font-medium'}"
+							class="text-xs leading-tight {task.status === 'done'
+								? 'line-through text-base-content/50'
+								: task.status === 'in_progress'
+									? 'font-semibold'
+									: ''}"
 						>
 							{task.title}
 						</span>
+						{#if task.description}
+							<p class="text-xs text-base-content/50 line-clamp-2">{task.description}</p>
+						{/if}
 					</div>
-					{#if task.description}
-						<p class="text-xs text-base-content/60 line-clamp-2 pl-5">{task.description}</p>
-					{/if}
-					<p class="text-xs text-base-content/30 pl-5 font-mono">{task.id}</p>
 				</li>
 			{/each}
 		</ul>
diff --git a/packages/frontend/src/lib/components/ToolPermissions.svelte b/packages/frontend/src/lib/components/ToolPermissions.svelte
new file mode 100644
index 0000000..c6af47f
--- /dev/null
+++ b/packages/frontend/src/lib/components/ToolPermissions.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+import { onMount } from "svelte";
+import { appSettings } from "../settings.svelte.js";
+import type { LogEntry } from "../types.js";
+
+const { entries, apiBase = "" }: { entries: LogEntry[]; apiBase?: string } = $props();
+
+interface ToolPermission {
+	id: string;
+	label: string;
+	description: string;
+}
+
+const toolPermissions: ToolPermission[] = [
+	{ id: "read", label: "Read files", description: "Allow the AI to read files in the workspace" },
+	{
+		id: "edit",
+		label: "Edit files",
+		description: "Allow the AI to write/edit files in the workspace",
+	},
+	{ id: "bash", label: "Run commands", description: "Allow the AI to execute shell commands" },
+	{
+		id: "summon",
+		label: "Summon agents",
+		description: "Allow the AI to spawn child agents to work on tasks",
+	},
+	{
+		id: "external_directory",
+		label: "External directories",
+		description: "Allow access to files outside the workspace",
+	},
+];
+
+async function loadPermissions(): Promise<void> {
+	const loaded: Record<string, boolean> = { ...appSettings.toolPerms };
+	for (const perm of toolPermissions) {
+		try {
+			const res = await fetch(`${apiBase}/tabs/settings/perm_${perm.id}`);
+			if (res.ok) {
+				const data = (await res.json()) as { value: string | null };
+				if (data.value !== null) {
+					loaded[perm.id] = data.value === "allow";
+				}
+			}
+		} catch {
+			// ignore
+		}
+	}
+	appSettings.toolPerms = { ...loaded };
+	appSettings.savedToolPerms = { ...loaded };
+}
+
+function togglePermission(id: string): void {
+	appSettings.toolPerms = { ...appSettings.toolPerms, [id]: !appSettings.toolPerms[id] };
+}
+
+function resetPermissions(): void {
+	appSettings.toolPerms = { ...appSettings.savedToolPerms };
+}
+
+onMount(() => {
+	loadPermissions();
+});
+</script>
+
+<div class="flex flex-col gap-3">
+	<div class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">Tool Permissions</div>
+	<p class="text-xs text-base-content/40">Changes are applied when you send your next message.</p>
+
+	<div class="flex flex-col gap-1.5">
+		{#each toolPermissions as perm (perm.id)}
+			<label class="flex items-start gap-2 cursor-pointer p-1 rounded hover:bg-base-200 transition-colors">
+				<input
+					type="checkbox"
+					class="checkbox checkbox-sm rounded-sm mt-0.5"
+					checked={appSettings.toolPerms[perm.id]}
+					onchange={() => togglePermission(perm.id)}
+				/>
+				<div class="flex flex-col">
+					<span class="text-xs font-medium text-base-content">{perm.label}</span>
+					<span class="text-xs text-base-content/40">{perm.description}</span>
+				</div>
+			</label>
+		{/each}
+	</div>
+
+	<button
+		class="btn btn-sm btn-ghost w-full"
+		disabled={!appSettings.toolPermsDirty}
+		onclick={resetPermissions}
+	>
+		Reset
+	</button>
+
+	<p class="text-xs text-base-content/40">Warning: changing tool access will reset the AI's prompt cache for active conversations, which may increase usage costs.</p>
+
+	<!-- Permission Log -->
+	{#if entries.length > 0}
+		<div class="collapse collapse-arrow bg-base-200 mt-2">
+			<input type="checkbox" />
+			<div class="collapse-title text-sm font-medium py-2 min-h-0">
+				Log ({entries.length})
+			</div>
+			<div class="collapse-content text-xs max-h-40 overflow-y-auto">
+				{#each entries as entry (entry.id)}
+					<div class="flex items-center gap-2 py-1 border-b border-base-300">
+						<span class="badge badge-sm {entry.action === 'reject' ? 'badge-error' : 'badge-success'}">
+							{entry.action}
+						</span>
+						<span class="text-base-content/70">{entry.permission}</span>
+						<span class="text-base-content/50 ml-auto text-xs">{entry.timestamp}</span>
+					</div>
+					<p class="text-base-content/60 pl-2 pb-1">{entry.description}</p>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>
diff --git a/packages/frontend/src/lib/settings.svelte.ts b/packages/frontend/src/lib/settings.svelte.ts
index 2c8e2f5..1352a0c 100644
--- a/packages/frontend/src/lib/settings.svelte.ts
+++ b/packages/frontend/src/lib/settings.svelte.ts
@@ -7,12 +7,14 @@ let toolPerms = $state<Record<string, boolean>>({
 	read: true,
 	edit: false,
 	bash: false,
+	summon: false,
 	external_directory: false,
 });
 let savedToolPerms = $state<Record<string, boolean>>({
 	read: true,
 	edit: false,
 	bash: false,
+	summon: false,
 	external_directory: false,
 });
 let skillChecks = $state<Record<string, boolean>>({});
diff --git a/packages/frontend/src/lib/tabs.svelte.ts b/packages/frontend/src/lib/tabs.svelte.ts
index 55aa161..119df2d 100644
--- a/packages/frontend/src/lib/tabs.svelte.ts
+++ b/packages/frontend/src/lib/tabs.svelte.ts
@@ -95,7 +95,7 @@ function createTabStore() {
 		activeTabId = id;
 
 		// Auto-check default skills for injection with the first message
-		autoCheckDefaultSkills();
+		void autoCheckDefaultSkills();
 
 		return tab;
 	}
@@ -133,9 +133,9 @@ function createTabStore() {
 		tabs = tabs.map((t) => (t.id === id ? { ...t, ...patch } : t));
 	}
 
-	function ensureAssistantMessage(tabId: string): ChatMessage {
+	function ensureAssistantMessage(tabId: string): ChatMessage | null {
 		const tab = getTabById(tabId);
-		if (!tab) throw new Error(`Tab not found: ${tabId}`);
+		if (!tab) return null;
 
 		if (tab.currentAssistantId) {
 			const existing = tab.messages.find((m) => m.id === tab.currentAssistantId);
@@ -333,6 +333,26 @@ function createTabStore() {
 				);
 				break;
 			}
+			case "tab-created": {
+				const newTabEvent = event as AgentEvent & { id: string; title: string };
+				// Only add if we don't already have this tab
+				if (!getTabById(newTabEvent.id)) {
+					const tab: Tab = {
+						id: newTabEvent.id,
+						title: newTabEvent.title,
+						messages: [],
+						agentStatus: "running",
+						keyId: null,
+						modelId: null,
+						reasoningEffort: "max",
+						currentAssistantId: null,
+						tasks: [],
+						injectedSkills: [],
+					};
+					tabs = [...tabs, tab];
+				}
+				break;
+			}
 		}
 	}
 
@@ -543,10 +563,20 @@ function createTabStore() {
 	function copyConversation(): string {
 		const tab = getActiveTab();
 		if (!tab) return "";
+
+		const enabledTools = Object.entries(appSettings.savedToolPerms)
+			.filter(([, v]) => v)
+			.map(([k]) => k);
+
 		const lines: string[] = [
 			"=== Dispatch Conversation ===",
+			`Tab ID: ${tab.id}`,
 			`Tab: ${tab.title}`,
 			`Model: ${tab.modelId ?? "default"}`,
+			`Tools: ${enabledTools.length > 0 ? enabledTools.join(", ") : "none"}`,
+			`Injected Skills: ${tab.injectedSkills.length > 0 ? tab.injectedSkills.join(", ") : "none"}`,
+			`Total tabs: ${tabs.length}`,
+			`All tab IDs: ${tabs.map((t) => t.id).join(", ")}`,
 			"",
 		];
 		for (const msg of tab.messages) {
diff --git a/packages/frontend/src/lib/types.ts b/packages/frontend/src/lib/types.ts
index 28752a0..a1ec24b 100644
--- a/packages/frontend/src/lib/types.ts
+++ b/packages/frontend/src/lib/types.ts
@@ -63,13 +63,14 @@ export type AgentEvent =
 			};
 	  }
 	| { type: "permission-prompt"; pending: PermissionPrompt[] }
-	| { type: "shell-output"; data: string; stream: "stdout" | "stderr" };
+	| { type: "shell-output"; data: string; stream: "stdout" | "stderr" }
+	| { type: "tab-created"; id: string; title: string };
 
 export interface TaskItem {
 	id: string;
 	title: string;
 	description: string;
-	status: "pending" | "in_progress" | "done" | "blocked";
+	status: "pending" | "in_progress" | "done";
 }
 
 export interface PermissionPrompt {
diff --git a/packages/frontend/src/lib/ws.svelte.ts b/packages/frontend/src/lib/ws.svelte.ts
index 95243d5..0970311 100644
--- a/packages/frontend/src/lib/ws.svelte.ts
+++ b/packages/frontend/src/lib/ws.svelte.ts
@@ -3,6 +3,16 @@ import type { AgentEvent, ConnectionStatus } from "./types.js";
 
 type EventCallback = (event: AgentEvent) => void;
 
+// Close any stale WebSocket from HMR reloads
+if (import.meta.hot) {
+	import.meta.hot.dispose((data: Record<string, unknown>) => {
+		const old = data._ws as WebSocket | undefined;
+		if (old && old.readyState === WebSocket.OPEN) {
+			old.close();
+		}
+	});
+}
+
 function createWebSocketClient(url: string) {
 	let connectionStatus: ConnectionStatus = $state("disconnected");
 	let ws: WebSocket | null = null;
@@ -19,6 +29,11 @@ function createWebSocketClient(url: string) {
 		connectionStatus = "connecting";
 		ws = new WebSocket(url);
 
+		// Store ref for HMR cleanup
+		if (import.meta.hot) {
+			import.meta.hot.data._ws = ws;
+		}
+
 		ws.onopen = () => {
 			connectionStatus = "connected";
 			reconnectDelay = 1000;
-- 
cgit v1.2.3