feat: message queue/interrupt system, CORS fix, mobile fixes, chat splitting

- Add message queue allowing users to send messages while agent is running
- Queue messages are injected into tool results as [USER INTERRUPT]
- Retrieve tool interrupted via Promise.race when user message arrives
- Queued messages show with 'queued' badge and cancel button
- Consumed messages repositioned and chat splits at interrupt point
- New assistant message block created after interrupt for clean flow
- Add POST /chat/cancel endpoint for cancelling queued messages
- Fix CORS to allow any origin (Tailscale/LAN access)
- Fix crypto.randomUUID fallback for non-secure contexts (HTTP)
- Fix frontend API URL derivation from page hostname
- Auto-create DB tab if missing on processMessage (foreign key fix)
- Add error logging to processMessage catch block
- Fix working directory input sync on agent switch
- Fix agent mode button to re-apply agent settings

1 files changed, 19 insertions, 3 deletions

diff --git a/packages/frontend/src/lib/components/ModelSelector.svelte b/packages/frontend/src/lib/components/ModelSelector.svelte
index 21364f9..5949e71 100644
--- a/packages/frontend/src/lib/components/ModelSelector.svelte
+++ b/packages/frontend/src/lib/components/ModelSelector.svelte
@@ -175,7 +175,7 @@ const modelCache = new Map<string, string[]>();
 				class="input input-bordered input-sm font-mono text-xs flex-1"
 				placeholder="default (project root)"
 				value={workingDirectory ?? ""}
-				oninput={(e) => {
+				onchange={(e) => {
 					const val = e.currentTarget.value.trim();
 					onWorkingDirectoryChange(val || null);
 				}}
@@ -202,7 +202,19 @@ const modelCache = new Map<string, string[]>();
 		</button>
 		<button
 			class="btn btn-xs {mode === 'agent' ? 'btn-primary' : 'btn-ghost'}"
-			onclick={() => { modeOverride = "agent"; fetchAgents(); }}
+			onclick={async () => {
+				modeOverride = "agent";
+				await fetchAgents();
+				// Re-apply the active agent's settings (including cwd)
+				const current = agents.find(a => a.slug === activeAgentSlug);
+				const agentToApply = current ?? agents[0] ?? null;
+				if (agentToApply) {
+					onAgentChange(agentToApply);
+					// Force-update the input since the prop may not change (already set)
+					const cwdEl = document.getElementById("cwd-input") as HTMLInputElement | null;
+					if (cwdEl) cwdEl.value = agentToApply.cwd ?? "";
+				}
+			}}
 		>
 			Agent
 		</button>
@@ -253,7 +265,11 @@ const modelCache = new Map<string, string[]>();
 				{#each agents as agent (agent.slug + ":" + agent.scope)}
 					<button
 						class="w-full text-left rounded-lg px-3 py-2 transition-colors {activeAgentSlug === agent.slug ? 'bg-primary text-primary-content' : 'bg-base-300 hover:bg-base-200'}"
-						onclick={() => onAgentChange(agent)}
+						onclick={() => {
+							onAgentChange(agent);
+							const cwdEl = document.getElementById("cwd-input") as HTMLInputElement | null;
+							if (cwdEl) cwdEl.value = agent.cwd ?? "";
+						}}
 					>
 						<div class="flex items-center justify-between gap-2">
 							<span class="font-medium text-sm">{agent.name}</span>