claude-mux 0.7.0

package/web/src/routes/session/[target]/+page.svelte

@@ -0,0 +1,450 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { browser } from '$app/environment';
+	import { onDestroy } from 'svelte';
+	import { terminalStore } from '$lib/stores/terminal.svelte';
+	import { sessionStore, stateColor } from '$lib/stores/sessions.svelte';
+	import { preferences } from '$lib/stores/preferences.svelte';
+	import { inputInjection } from '$lib/stores/input-injection.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import TerminalRenderer from '$lib/components/TerminalRenderer.svelte';
+
+	const target = $derived($page.params.target ? decodeURIComponent($page.params.target) : null);
+
+	// Find session state from session store
+	const currentSession = $derived(
+		sessionStore.sessions.find((s) => s.tmux_target === target || s.id === target)
+	);
+
+	let textInput = $state('');
+	let showConfirmKill = $state(false);
+	let outputElement: HTMLDivElement | null = $state(null);
+	let textareaElement: HTMLTextAreaElement | null = $state(null);
+	let userScrolledUp = $state(false);
+	let showCopied = $state(false);
+	let measureCanvas: HTMLCanvasElement | null = null;
+
+	// Measure monospace character dimensions using canvas
+	function measureFont(): { width: number; height: number } {
+		if (!browser) return { width: 7.8, height: 18.2 };
+
+		if (!measureCanvas) measureCanvas = document.createElement('canvas');
+		const ctx = measureCanvas.getContext('2d');
+		if (!ctx) return { width: 7.8, height: 18.2 };
+
+		// Match CSS: font-family from .output, font-size: 13px, line-height: 1.4
+		ctx.font = "13px 'SF Mono', Monaco, 'Cascadia Code', monospace";
+		const width = ctx.measureText('M').width;
+		const height = 13 * 1.4; // 18.2px
+
+		return { width, height };
+	}
+
+	// Calculate terminal dimensions from output element
+	function calculateTerminalSize(): { cols: number; rows: number } | null {
+		if (!outputElement) return null;
+
+		// Padding is 16px on each side (from CSS .output)
+		const padding = 32;
+		const innerWidth = outputElement.clientWidth - padding;
+		const innerHeight = outputElement.clientHeight - padding;
+
+		if (innerWidth <= 0 || innerHeight <= 0) return null;
+
+		const { width: charW, height: charH } = measureFont();
+		// Subtract 1 col for safety margin (font rendering varies across devices)
+		const cols = Math.floor(innerWidth / charW) - 1;
+		const rows = Math.floor(innerHeight / charH);
+
+		if (cols < 10 || rows < 3) return null;
+		return { cols, rows };
+	}
+
+	// Send resize to server
+	function handleResize() {
+		const size = calculateTerminalSize();
+		if (size) terminalStore.sendResize(size.cols, size.rows);
+	}
+
+	// Connect to terminal when target changes (including initial mount)
+	$effect(() => {
+		terminalStore.connect(target);
+	});
+
+	// Watch for issue IDs to inject into input
+	$effect(() => {
+		const issueId = inputInjection.pendingIssueId;
+		if (issueId) {
+			// Append issue ID to input (with space if there's existing text)
+			textInput = textInput ? textInput + ' ' + issueId : issueId;
+			inputInjection.clear();
+			// Focus textarea and trigger resize
+			if (textareaElement) {
+				textareaElement.focus();
+				// Use timeout to ensure state is updated before resize
+				setTimeout(autoResize, 0);
+			}
+		}
+	});
+
+	onDestroy(() => {
+		terminalStore.disconnect();
+	});
+
+	// Track if user has scrolled up from bottom
+	function handleScroll() {
+		if (!outputElement) return;
+		const { scrollTop, scrollHeight, clientHeight } = outputElement;
+		// Consider "at bottom" if within 50px of the bottom
+		userScrolledUp = scrollHeight - scrollTop - clientHeight > 50;
+	}
+
+	// Auto-scroll to bottom only if user hasn't scrolled up
+	$effect(() => {
+		if (outputElement && terminalStore.output && !userScrolledUp) {
+			outputElement.scrollTop = outputElement.scrollHeight;
+		}
+	});
+
+	async function sendKeys(keys: string) {
+		await fetch(`/api/sessions/${encodeURIComponent(target)}/send`, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ keys })
+		});
+	}
+
+	async function sendText() {
+		if (!textInput.trim()) {
+			// Empty input: just send Enter key
+			await sendKeys('Enter');
+			return;
+		}
+		await fetch(`/api/sessions/${encodeURIComponent(target)}/send`, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ text: textInput })
+		});
+		textInput = '';
+		// Reset textarea height after sending
+		if (textareaElement) {
+			textareaElement.style.height = 'auto';
+		}
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' && !e.shiftKey) {
+			e.preventDefault();
+			sendText();
+		}
+	}
+
+	function autoResize() {
+		if (!textareaElement) return;
+		// Reset to single row to measure actual content height
+		textareaElement.style.height = '0';
+		const newHeight = Math.max(48, Math.min(textareaElement.scrollHeight, 150));
+		textareaElement.style.height = newHeight + 'px';
+	}
+
+	async function killSession() {
+		if (!currentSession) return;
+		await fetch(`/api/sessions/${encodeURIComponent(currentSession.id)}/kill`, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ pid: currentSession.pid, tmux_target: currentSession.tmux_target })
+		});
+		showConfirmKill = false;
+		goto('/');
+	}
+
+	function copyTmuxCmd() {
+		if (!target) return;
+		const cmd = `tmux attach -t "${target.split(':')[0]}"`;
+		if (navigator.clipboard?.writeText) {
+			navigator.clipboard.writeText(cmd);
+		} else {
+			// Fallback for non-secure contexts (HTTP)
+			const textarea = document.createElement('textarea');
+			textarea.value = cmd;
+			textarea.style.position = 'fixed';
+			textarea.style.opacity = '0';
+			document.body.appendChild(textarea);
+			textarea.select();
+			document.execCommand('copy');
+			document.body.removeChild(textarea);
+		}
+		showCopied = true;
+		setTimeout(() => { showCopied = false; }, 2000);
+	}
+
+	</script>
+
+<svelte:head>
+	<title>{currentSession?.pane_title || target || 'Session'}</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+	<link rel="preconnect" href="https://fonts.googleapis.com" />
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+	<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+</svelte:head>
+
+<div class="session-container">
+	<header class="header">
+		<div class="title-row">
+			<span class="state" style="background: {stateColor(currentSession?.state || 'idle')}"></span>
+			<div class="title-info">
+				<span class="target">{currentSession?.pane_title || target}</span>
+				<span class="status">{currentSession?.current_action || currentSession?.state || 'idle'}</span>
+			</div>
+		</div>
+		<div class="header-actions">
+			<Button variant="secondary" size="toolbar" onclick={copyTmuxCmd} title="Copy tmux attach command" class={showCopied ? 'bg-green-800 text-green-300' : ''}>
+				<iconify-icon icon={showCopied ? "mdi:check" : "mdi:content-copy"}></iconify-icon>
+				<span>{showCopied ? 'Copied!' : 'Tmux'}</span>
+			</Button>
+			<Button variant="secondary" size="toolbar" onclick={handleResize} title="Resize tmux pane to fit viewport">
+				<iconify-icon icon="mdi:fit-to-screen"></iconify-icon>
+				<span>Fit</span>
+			</Button>
+			<Button
+				variant={preferences.terminalTheming ? "secondary" : "ghost"}
+				size="toolbar"
+				onclick={() => preferences.toggle('terminalTheming')}
+				title="Toggle syntax highlighting"
+			>
+				<iconify-icon icon={preferences.terminalTheming ? "mdi:palette" : "mdi:palette-outline"}></iconify-icon>
+				<span>Theme</span>
+			</Button>
+			<Button variant="ghost-destructive" size="toolbar" onclick={() => (showConfirmKill = true)} title="Kill Session">
+				<iconify-icon icon="mdi:power"></iconify-icon>
+				<span>Kill</span>
+			</Button>
+		</div>
+	</header>
+
+	<div class="output" bind:this={outputElement} onscroll={handleScroll}>
+		{#if preferences.terminalTheming}
+			<TerminalRenderer blocks={terminalStore.parsedBlocks} />
+		{:else}
+			<pre class="raw-output">{terminalStore.output}</pre>
+		{/if}
+	</div>
+
+	<div class="toolbar">
+		<Button variant="secondary" size="toolbar" class="flex-1" onclick={() => sendKeys('Up')}>
+			<iconify-icon icon="mdi:arrow-up"></iconify-icon>
+			<span>Up</span>
+		</Button>
+		<Button variant="secondary" size="toolbar" class="flex-1" onclick={() => sendKeys('Down')}>
+			<iconify-icon icon="mdi:arrow-down"></iconify-icon>
+			<span>Down</span>
+		</Button>
+		<Button variant="secondary" size="toolbar" class="flex-1" onclick={() => sendKeys('Space')}>
+			<iconify-icon icon="mdi:keyboard-space"></iconify-icon>
+			<span>Space</span>
+		</Button>
+		<Button variant="secondary" size="toolbar" class="flex-1" onclick={() => sendKeys('Tab')}>
+			<iconify-icon icon="mdi:keyboard-tab"></iconify-icon>
+			<span>Tab</span>
+		</Button>
+		<Button variant="secondary" size="toolbar" class="flex-1" onclick={() => sendKeys('C-l')}>
+			<iconify-icon icon="mdi:eraser"></iconify-icon>
+			<span>Ctrl-L</span>
+		</Button>
+		<Button variant="secondary" size="toolbar" class="flex-1" onclick={async () => {
+			await fetch(`/api/sessions/${encodeURIComponent(target)}/send`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ text: '/clear' })
+			});
+		}}>
+			<iconify-icon icon="mdi:broom"></iconify-icon>
+			<span>/clear</span>
+		</Button>
+		<Button variant="secondary" size="toolbar" class="flex-1" onclick={() => sendKeys('Escape')}>
+			<iconify-icon icon="mdi:stop"></iconify-icon>
+			<span>Esc</span>
+		</Button>
+		<Button variant="ghost-destructive" size="toolbar" class="flex-1" onclick={() => sendKeys('C-c')}>
+			<iconify-icon icon="mdi:cancel"></iconify-icon>
+			<span>Ctrl-C</span>
+		</Button>
+	</div>
+
+	<form class="input-row" onsubmit={(e) => { e.preventDefault(); sendText(); }}>
+		<textarea
+			bind:this={textareaElement}
+			bind:value={textInput}
+			placeholder="Type a message..."
+			rows={1}
+			onkeydown={handleKeydown}
+			oninput={autoResize}
+		></textarea>
+		<Button type="submit" variant="success" class="min-w-[52px] min-h-[48px] text-lg">
+			<iconify-icon icon="mdi:send"></iconify-icon>
+		</Button>
+	</form>
+</div>
+
+<AlertDialog.Root bind:open={showConfirmKill}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Kill this session?</AlertDialog.Title>
+			<AlertDialog.Description>This will terminate the Claude process.</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+			<AlertDialog.Action onclick={killSession} class="bg-destructive text-destructive-foreground hover:bg-destructive/90">Kill</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
+
+<style>
+	.session-container {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		background: #000;
+		overflow: hidden;
+		overscroll-behavior: none;
+		touch-action: pan-y;
+	}
+
+	.header {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		padding: 12px 16px;
+		background: #111;
+		border-bottom: 1px solid #222;
+	}
+
+	/* Make room for hamburger menu on mobile */
+	@media (max-width: 768px) {
+		.header {
+			padding-left: 64px;
+		}
+	}
+
+	.title-row {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		flex: 1;
+		min-width: 0;
+	}
+
+	.state {
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		flex-shrink: 0;
+	}
+
+	.title-info {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+	}
+
+	.target {
+		font-weight: 600;
+		font-size: 16px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.status {
+		font-size: 13px;
+		color: #888;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.header-actions {
+		display: flex;
+		gap: 6px;
+	}
+
+	.output {
+		flex: 1;
+		overflow-y: auto;
+		overscroll-behavior: none;
+		touch-action: pan-y;
+		padding: 16px;
+		margin: 0;
+		font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+		font-size: 13px;
+		line-height: 1.4;
+		white-space: pre-wrap;
+		word-break: break-word;
+		background: #000;
+		color: #fff;
+	}
+
+	.raw-output {
+		margin: 0;
+		font-family: inherit;
+		font-size: inherit;
+		line-height: inherit;
+		white-space: pre-wrap;
+		word-break: break-word;
+		background: transparent;
+		color: inherit;
+	}
+
+	.toolbar {
+		display: flex;
+		gap: 6px;
+		padding: 8px 12px;
+		background: #111;
+		border-top: 1px solid #222;
+	}
+
+	.input-row {
+		display: flex;
+		align-items: flex-end;
+		gap: 8px;
+		padding: 12px 16px;
+		background: #111;
+		border-top: 1px solid #222;
+	}
+
+	.input-row textarea {
+		flex: 1;
+		min-width: 0;
+		height: 48px;
+		background: #222;
+		color: #fff;
+		border: 1px solid #333;
+		padding: 12px 16px;
+		border-radius: 8px;
+		font-size: 14px;
+		font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', monospace;
+		line-height: 1.5;
+		resize: none;
+		overflow-y: auto;
+		overflow-x: hidden;
+		max-height: 150px;
+		word-wrap: break-word;
+		box-sizing: border-box;
+		scrollbar-width: none;
+	}
+
+	.input-row textarea::-webkit-scrollbar {
+		display: none;
+	}
+
+	.input-row textarea:focus {
+		outline: none;
+		border-color: #27ae60;
+	}
+
+	.input-row textarea::placeholder {
+		color: #666;
+	}
+</style>

package/web/static/robots.txt

@@ -0,0 +1,3 @@
+# allow crawling everything by default
+User-agent: *
+Disallow:

package/web/svelte.config.js

@@ -0,0 +1,20 @@
+import adapter from 'svelte-adapter-bun';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter({
+			out: '../dist/web',
+			precompress: false
+		}),
+		alias: {
+			$shared: join(__dirname, '../src')
+		}
+	}
+};
+
+export default config;

package/web/tsconfig.json

@@ -0,0 +1,20 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"rewriteRelativeImportExtensions": true,
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// To make changes to top-level options such as include and exclude, we recommend extending
+	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
+}

package/web/vite.config.ts

@@ -0,0 +1,154 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig, type ViteDevServer } from 'vite';
+import { WebSocketServer, WebSocket } from 'ws';
+
+// Dev WebSocket plugin - uses shared handlers
+function devWebSocket() {
+	let wss: WebSocketServer;
+
+	return {
+		name: 'dev-websocket',
+
+		async configureServer(server: ViteDevServer) {
+			if (!server.httpServer) return;
+
+			// Import shared handlers
+			const {
+				SessionsWsManager,
+				TerminalWsManager,
+				BeadsWsManager,
+				handleWsMessage,
+				parseWsPath,
+				resizePane
+			} = await import('../src/server/ws-handlers.js');
+			type WsClient = import('../src/server/ws-handlers.js').WsClient;
+
+			// Create manager instances with debug enabled for dev
+			const sessionsWsManager = new SessionsWsManager({ debug: true });
+			const terminalWsManager = new TerminalWsManager({ debug: true });
+			const beadsWsManager = new BeadsWsManager({ debug: true });
+
+			// Track WebSocket -> target mapping for cleanup
+			const wsTargets = new WeakMap<WebSocket, string>();
+
+			// Create WsClient wrapper for ws library
+			function createClient(ws: WebSocket): WsClient {
+				return {
+					send: (msg: string) => ws.send(msg),
+					isOpen: () => ws.readyState === WebSocket.OPEN,
+					close: () => ws.close(),
+					getBufferedAmount: () => ws.bufferedAmount
+				};
+			}
+
+			// Create WebSocket server with compression enabled
+			wss = new WebSocketServer({ noServer: true, perMessageDeflate: true });
+
+			// Handle WebSocketServer-level errors
+			wss.on('error', (error) => {
+				console.error('[wss] WebSocketServer error:', error.message);
+			});
+
+			wss.on('connection', (ws, req) => {
+				const url = new URL(req.url || '', 'http://localhost');
+				const parsed = parseWsPath(url.pathname, url.searchParams);
+
+				if (!parsed) {
+					ws.close();
+					return;
+				}
+
+				const client = createClient(ws);
+
+				// Handle WebSocket errors to prevent server crashes
+				ws.on('error', (error) => {
+					console.error('[ws] WebSocket error:', error.message);
+					// Don't rethrow - just clean up
+				});
+
+				if (parsed.type === 'sessions') {
+					const accepted = sessionsWsManager.addClient(client);
+					if (!accepted) {
+						ws.close(1013, 'Max clients reached');
+						return;
+					}
+
+					ws.on('message', (data) => {
+						const response = handleWsMessage(data.toString());
+						if (response === 'pong') ws.send('pong');
+					});
+
+					ws.on('close', () => sessionsWsManager.removeClient(client));
+				} else if (parsed.type === 'terminal') {
+					const { target } = parsed;
+					const accepted = terminalWsManager.addClient(client, target);
+					if (!accepted) {
+						ws.close(1013, 'Max clients reached');
+						return;
+					}
+
+					wsTargets.set(ws, target);
+
+					ws.on('message', (data) => {
+						const response = handleWsMessage(data.toString(), (cols, rows) =>
+							resizePane(target, cols, rows)
+						);
+						if (response === 'pong') ws.send('pong');
+					});
+
+					ws.on('close', () => {
+						const t = wsTargets.get(ws);
+						terminalWsManager.removeClient(client, t);
+					});
+				} else if (parsed.type === 'beads') {
+					const { project } = parsed;
+					const accepted = beadsWsManager.addClient(client, project);
+					if (!accepted) {
+						ws.close(1013, 'Max clients reached');
+						return;
+					}
+
+					ws.on('message', (data) => {
+						const response = handleWsMessage(data.toString());
+						if (response === 'pong') ws.send('pong');
+					});
+
+					ws.on('close', () => {
+						beadsWsManager.removeClient(client, project);
+					});
+				}
+			});
+
+			// Handle upgrade requests (skip Vite HMR)
+			server.httpServer.on('upgrade', (req, socket, head) => {
+				if (req.headers['sec-websocket-protocol'] === 'vite-hmr') return;
+				wss.handleUpgrade(req, socket, head, (ws) => {
+					// Attach error handler IMMEDIATELY before emitting 'connection'
+					// This catches errors from malformed frames (e.g., mobile browser invalid close codes)
+					ws.on('error', (error) => {
+						console.log('[ws] WebSocket error (early):', {
+							code: (error as { code?: string }).code,
+							message: error.message
+						});
+					});
+					wss.emit('connection', ws, req);
+				});
+			});
+
+			server.httpServer.on('close', () => wss?.close());
+
+			console.log('[dev] WebSocket ready at /api/sessions/stream, /api/sessions/[target]/stream, and /api/beads/stream');
+		}
+	};
+}
+
+export default defineConfig({
+	plugins: [tailwindcss(), sveltekit(), devWebSocket()],
+	server: {
+		host: '0.0.0.0'
+	},
+	build: {
+		target: 'esnext'
+	}
+});