fix(frontend): ws replacement

frontend/src/lib/components/ChatInput.svelte

@@ -17,19 +17,19 @@
 	}
 </script>
 
-<form onsubmit={handleSubmit} class="flex gap-2">
+<form onsubmit={handleSubmit} class="flex gap-1">
 	<input
 		type="text"
 		bind:value
 		{disabled}
-		placeholder="Message..."
-		class="flex-1 rounded-lg bg-neutral-800 px-3 py-2 text-[11px] text-white placeholder-neutral-500 outline-none focus:ring-1 focus:ring-neutral-600"
+		placeholder="..."
+		class="min-w-0 flex-1 rounded bg-neutral-800 px-2 py-1 text-[10px] text-white placeholder-neutral-500 outline-none"
 	/>
 	<button
 		type="submit"
 		{disabled}
-		class="rounded-lg bg-blue-600 px-3 py-2 text-[11px] text-white transition-colors hover:bg-blue-500 disabled:opacity-50"
+		class="shrink-0 rounded bg-blue-600 px-2 py-1 text-[10px] text-white disabled:opacity-50"
 	>
-		Send
+		&gt;
 	</button>
 </form>

frontend/src/lib/convex-polling.svelte.ts

@@ -12,17 +12,13 @@ type PollingContext = {
 export function hasWebSocketSupport(): boolean {
 	if (typeof window === 'undefined') return true;
 	try {
-		const hasWs = 'WebSocket' in window && typeof WebSocket !== 'undefined';
-		console.log('[convex-polling] WebSocket check:', hasWs);
-		return hasWs;
-	} catch (e) {
-		console.log('[convex-polling] WebSocket check error:', e);
+		return 'WebSocket' in window && typeof WebSocket !== 'undefined';
+	} catch {
 		return false;
 	}
 }
 
 export function setupPollingConvex(url: string): void {
-	console.log('[convex-polling] Setting up polling client with URL:', url);
 	const client = new ConvexHttpClient(url);
 	setContext<PollingContext>(POLLING_CONTEXT_KEY, { client });
 }
@@ -67,27 +63,22 @@ export function usePollingQuery<Query extends FunctionReference<'query'>>(
 	async function poll() {
 		const args = argsGetter();
 		if (args === 'skip') {
-			console.log('[convex-polling] Skipping query (args=skip)');
 			state.isLoading = false;
 			return;
 		}
 
 		const argsJson = JSON.stringify(args);
 		if (argsJson !== lastArgsJson) {
-			console.log('[convex-polling] Args changed, setting loading');
 			state.isLoading = true;
 			lastArgsJson = argsJson;
 		}
 
 		try {
-			console.log('[convex-polling] Polling query with args:', args);
 			const result = await client.query(query, args);
-			console.log('[convex-polling] Query result:', result);
 			state.data = result;
 			state.error = null;
 			state.isLoading = false;
 		} catch (err) {
-			console.error('[convex-polling] Query error:', err);
 			state.error = err instanceof Error ? err : new Error(String(err));
 			state.isLoading = false;
 		}

frontend/src/routes/[mnemonic]/+page.svelte

@@ -10,7 +10,6 @@
 
 	const usePolling = getContext<boolean>('convex-use-polling') ?? false;
 	let mnemonic = $derived(page.params.mnemonic);
-	let debugInfo = $state('');
 
 	const chatDataWs = usePolling
 		? null
@@ -40,9 +39,11 @@
 			: []
 	);
 
+	let messagesContainer = $state<HTMLDivElement | null>(null);
+
 	$effect(() => {
-		if (messages.length) {
-			window.scrollTo(0, document.body.scrollHeight);
+		if (messages.length && messagesContainer) {
+			messagesContainer.scrollTop = messagesContainer.scrollHeight;
 		}
 	});
 
@@ -94,34 +95,27 @@
 
 <svelte:head>
 	<title>Chat</title>
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<meta
+		name="viewport"
+		content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
+	/>
 </svelte:head>
 
-<div class="min-h-dvh bg-black text-white">
-	<div
-		class="fixed top-1 right-1 z-50 max-w-[200px] rounded bg-neutral-900 p-1 text-[8px] break-all text-neutral-500"
-	>
-		mode: {usePolling ? 'polling' : 'websocket'}<br />
-		mnemonic: {mnemonic}<br />
-		loading: {chatData.isLoading}<br />
-		error: {chatData.error?.message ?? 'none'}<br />
-		data: {chatData.data ? 'yes' : 'no'}
-	</div>
-
+<div class="fixed inset-0 flex flex-col bg-black text-white">
 	{#if chatData.isLoading}
-		<div class="flex min-h-dvh items-center justify-center text-neutral-500">
-			Loading... ({usePolling ? 'polling' : 'ws'})
-		</div>
+		<div class="flex flex-1 items-center justify-center text-xs text-neutral-500">Loading...</div>
 	{:else if chatData.error}
-		<div class="flex min-h-dvh flex-col items-center justify-center gap-2 p-4 text-red-500">
-			<div>Error:</div>
-			<div class="max-w-full text-xs break-all">{chatData.error.message}</div>
-			<div class="text-[10px] text-neutral-500">Mode: {usePolling ? 'polling' : 'websocket'}</div>
+		<div class="flex flex-1 flex-col items-center justify-center gap-1 p-2 text-red-500">
+			<div class="text-xs">Error</div>
+			<div class="max-w-full text-center text-[8px] break-all">{chatData.error.message}</div>
 		</div>
 	{:else if !chatData.data}
-		<div class="flex min-h-dvh items-center justify-center text-neutral-500">Chat not found</div>
+		<div class="flex flex-1 items-center justify-center text-xs text-neutral-500">Not found</div>
 	{:else}
-		<div class="space-y-1.5 p-2">
+		<div
+			bind:this={messagesContainer}
+			class="flex-1 space-y-1 overflow-y-auto overscroll-contain p-1.5"
+		>
 			{#each messages as message (message._id)}
 				<ChatMessage
 					role={message.role}
@@ -131,23 +125,24 @@
 			{/each}
 		</div>
 
-		{#if followUpOptions.length > 0}
-			<div class="border-t border-neutral-800 px-2 py-1.5">
-				<FollowUpButtons options={followUpOptions} onselect={sendMessage} />
+		<div class="shrink-0 border-t border-neutral-800">
+			{#if followUpOptions.length > 0}
+				<div class="px-1.5 py-1">
+					<FollowUpButtons options={followUpOptions} onselect={sendMessage} />
+				</div>
+			{/if}
+
+			<div class="flex gap-1 px-1.5 pb-1">
+				<button
+					onclick={summarize}
+					class="shrink-0 rounded bg-neutral-800 px-1.5 py-0.5 text-[8px] text-neutral-400"
+				>
+					/sum
+				</button>
+				<div class="flex-1">
+					<ChatInput onsubmit={sendMessage} />
+				</div>
 			</div>
-		{/if}
-
-		<div class="border-t border-neutral-800 px-2 pt-1.5">
-			<button
-				onclick={summarize}
-				class="rounded bg-neutral-800 px-2 py-1 text-[10px] text-neutral-400"
-			>
-				/summarize
-			</button>
-		</div>
-
-		<div class="p-2 pt-1">
-			<ChatInput onsubmit={sendMessage} />
 		</div>
 	{/if}
 </div>

frontend/src/routes/layout.css

@@ -1,5 +1,22 @@
 @import 'tailwindcss';
 
+html,
+body {
+	background: black;
+	overflow: hidden;
+	overscroll-behavior: none;
+	-webkit-overflow-scrolling: touch;
+	touch-action: pan-y;
+	position: fixed;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+}
+
+* {
+	-webkit-tap-highlight-color: transparent;
+}
+
 .prose-mini h1,
 .prose-mini h2,
 .prose-mini h3,