claude-mux 0.7.0

package/web/src/lib/stores/sessions.svelte.ts

@@ -0,0 +1,108 @@
+import { browser } from '$app/environment';
+import { ReliableWebSocket } from './websocket-base.svelte';
+
+export interface Screenshot {
+	path: string;
+	timestamp: number;
+}
+
+export interface Session {
+	v: number;
+	id: string;
+	pid: number;
+	cwd: string;
+	git_root: string | null;
+	beads_enabled: boolean;
+	tmux_target: string | null;
+	state: 'busy' | 'idle' | 'waiting' | 'permission';
+	current_action: string | null;
+	prompt_text: string | null;
+	last_update: number;
+	pane_title?: string | null;
+	screenshots?: Screenshot[];
+	chrome_active?: boolean;
+}
+
+class SessionStore extends ReliableWebSocket {
+	sessions = $state<Session[]>([]);
+	paused = $state(false);
+
+	// Saved projects from localStorage
+	savedProjects = $state<string[]>([]);
+
+	protected getWsUrl(): string {
+		const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+		return `${protocol}//${window.location.host}/api/sessions/stream`;
+	}
+
+	protected getLogPrefix(): string {
+		return '[sessions]';
+	}
+
+	protected handleMessage(event: MessageEvent): void {
+		if (this.paused) return;
+		const data = JSON.parse(event.data);
+		if (data.sessions) {
+			this.sessions = data.sessions;
+		}
+	}
+
+	connect(): void {
+		this.doConnect();
+	}
+
+	disconnect(): void {
+		this.doDisconnect();
+	}
+
+	togglePause(): void {
+		this.paused = !this.paused;
+	}
+
+	loadSavedProjects(): void {
+		if (!browser) return;
+		try {
+			this.savedProjects = JSON.parse(localStorage.getItem('claude-mux-projects') || '[]');
+		} catch {
+			this.savedProjects = [];
+		}
+	}
+
+	saveProject(cwd: string): void {
+		if (!browser || this.savedProjects.includes(cwd)) return;
+		this.savedProjects = [...this.savedProjects, cwd];
+		localStorage.setItem('claude-mux-projects', JSON.stringify(this.savedProjects));
+	}
+
+	removeProject(cwd: string): void {
+		this.savedProjects = this.savedProjects.filter((p) => p !== cwd);
+		localStorage.setItem('claude-mux-projects', JSON.stringify(this.savedProjects));
+	}
+}
+
+export const sessionStore = new SessionStore();
+
+// Helper functions
+export function stateColor(state: string): string {
+	switch (state) {
+		case 'permission':
+		case 'waiting':
+			return '#e74c3c';
+		case 'idle':
+			return '#f39c12';
+		case 'busy':
+			return '#27ae60';
+		default:
+			return '#666';
+	}
+}
+
+export function getProjectColor(cwd: string): string {
+	// Generate a consistent color based on path hash
+	let hash = 0;
+	for (let i = 0; i < cwd.length; i++) {
+		hash = cwd.charCodeAt(i) + ((hash << 5) - hash);
+	}
+	const hue = Math.abs(hash) % 360;
+	return `hsl(${hue}, 60%, 40%)`;
+}

package/web/src/lib/stores/terminal.svelte.ts

@@ -0,0 +1,96 @@
+import { browser } from '$app/environment';
+import { ReliableWebSocket } from './websocket-base.svelte';
+import { parseTerminalOutput, getBlockStats } from '$lib/utils/terminal-parser';
+import type { ParsedBlock } from '$lib/types/terminal';
+
+class TerminalStore extends ReliableWebSocket {
+	output = $state('');
+
+	// Derived parsed blocks - automatically recomputed when output changes
+	parsedBlocks: ParsedBlock[] = $derived(parseTerminalOutput(this.output));
+
+	// Derived stats for UI indicators
+	stats = $derived(getBlockStats(this.parsedBlocks));
+
+	private target: string | null = null;
+	private resizeTimer: ReturnType<typeof setTimeout> | null = null;
+	private lastSentSize: { cols: number; rows: number } | null = null;
+
+	protected getWsUrl(): string {
+		const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+		const encodedTarget = encodeURIComponent(this.target!);
+		return `${protocol}//${window.location.host}/api/sessions/${encodedTarget}/stream`;
+	}
+
+	protected getLogPrefix(): string {
+		return '[terminal]';
+	}
+
+	protected shouldReconnect(): boolean {
+		return this.target !== null;
+	}
+
+	protected handleMessage(event: MessageEvent): void {
+		const data = JSON.parse(event.data);
+		if (data.output !== undefined) {
+			this.output = data.output;
+		}
+	}
+
+	connect(target: string | null | undefined): void {
+		if (!browser || !target) return;
+
+		// If already connected to the same target, do nothing
+		if (this.ws && this.target === target) return;
+
+		// If connected to a different target, close old connection first
+		if (this.ws) {
+			// Disconnect without allowing reconnect (target will be null temporarily)
+			const oldTarget = this.target;
+			this.target = null; // Prevent reconnect in doDisconnect
+			this.doDisconnect();
+			this.target = oldTarget;
+		}
+
+		// Clear output when switching to a different target
+		if (this.target !== target) {
+			this.output = '';
+		}
+
+		this.target = target;
+		this.doConnect();
+	}
+
+	disconnect(): void {
+		// Cancel resize timer
+		if (this.resizeTimer) {
+			clearTimeout(this.resizeTimer);
+			this.resizeTimer = null;
+		}
+		this.lastSentSize = null;
+
+		// Clear target before disconnecting to prevent reconnect
+		this.target = null;
+		this.doDisconnect();
+	}
+
+	sendResize(cols: number, rows: number): void {
+		if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
+
+		// Skip if same as last sent
+		if (this.lastSentSize?.cols === cols && this.lastSentSize?.rows === rows) return;
+
+		// Debounce
+		if (this.resizeTimer) clearTimeout(this.resizeTimer);
+
+		this.resizeTimer = setTimeout(() => {
+			if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+				this.ws.send(JSON.stringify({ type: 'resize', cols, rows }));
+				this.lastSentSize = { cols, rows };
+			}
+			this.resizeTimer = null;
+		}, 150);
+	}
+}
+
+export const terminalStore = new TerminalStore();

package/web/src/lib/stores/websocket-base.svelte.ts

@@ -0,0 +1,209 @@
+import { browser } from '$app/environment';
+
+/**
+ * Configuration for reliable WebSocket connections.
+ * Tuned for mobile networks where connections drop frequently.
+ */
+export interface WebSocketConfig {
+	/** Keep-alive ping interval in ms (default: 30s) */
+	pingInterval?: number;
+	/** Max time to wait for pong before considering connection dead (default: 10s) */
+	pongTimeout?: number;
+	/** Initial reconnect delay in ms (default: 1s) */
+	baseReconnectDelay?: number;
+	/** Maximum reconnect delay in ms (default: 30s) */
+	maxReconnectDelay?: number;
+}
+
+const DEFAULT_CONFIG: Required<WebSocketConfig> = {
+	pingInterval: 30000,
+	pongTimeout: 10000,
+	baseReconnectDelay: 1000,
+	maxReconnectDelay: 30000
+};
+
+/**
+ * Base class for reliable WebSocket connections with:
+ * - Ping/pong keep-alive for detecting stale connections
+ * - Exponential backoff with jitter for reconnection
+ * - Visibility change handling for mobile background/foreground transitions
+ */
+export abstract class ReliableWebSocket {
+	connected = $state(false);
+
+	protected ws: WebSocket | null = null;
+	private pingTimer: ReturnType<typeof setInterval> | null = null;
+	private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+	private lastPong: number = 0;
+	private reconnectAttempts: number = 0;
+	private visibilityHandler: (() => void) | null = null;
+	private config: Required<WebSocketConfig>;
+
+	constructor(config?: WebSocketConfig) {
+		this.config = { ...DEFAULT_CONFIG, ...config };
+	}
+
+	/** Subclass must provide the WebSocket URL */
+	protected abstract getWsUrl(): string;
+
+	/** Subclass must handle incoming messages (after pong filtering) */
+	protected abstract handleMessage(event: MessageEvent): void;
+
+	/** Subclass can override to control reconnection (e.g., only reconnect if target is set) */
+	protected shouldReconnect(): boolean {
+		return true;
+	}
+
+	/** Subclass can override to run code on successful connection */
+	protected onConnected(): void {}
+
+	/** Subclass can override to run code on disconnection */
+	protected onDisconnected(): void {}
+
+	/** Get the log prefix for debug messages */
+	protected abstract getLogPrefix(): string;
+
+	protected doConnect(): void {
+		if (!browser || this.ws) return;
+
+		const url = this.getWsUrl();
+		this.ws = new WebSocket(url);
+
+		this.ws.onopen = () => {
+			this.connected = true;
+			this.reconnectAttempts = 0;
+			this.lastPong = Date.now();
+			if (this.reconnectTimer) {
+				clearTimeout(this.reconnectTimer);
+				this.reconnectTimer = null;
+			}
+			this.startPingTimer();
+			this.setupVisibilityHandler();
+			this.onConnected();
+		};
+
+		this.ws.onmessage = (event) => {
+			// Handle pong response
+			if (event.data === 'pong') {
+				this.lastPong = Date.now();
+				return;
+			}
+			this.handleMessage(event);
+		};
+
+		this.ws.onclose = () => {
+			this.connected = false;
+			this.ws = null;
+			this.stopPingTimer();
+			this.onDisconnected();
+			if (this.shouldReconnect()) {
+				this.scheduleReconnect();
+			}
+		};
+
+		this.ws.onerror = () => {
+			this.ws?.close();
+		};
+	}
+
+	protected doDisconnect(): void {
+		if (this.reconnectTimer) {
+			clearTimeout(this.reconnectTimer);
+			this.reconnectTimer = null;
+		}
+
+		this.stopPingTimer();
+		this.removeVisibilityHandler();
+		this.connected = false;
+		this.reconnectAttempts = 0;
+
+		if (this.ws) {
+			this.ws.onopen = null;
+			this.ws.onclose = null;
+			this.ws.onerror = null;
+			this.ws.onmessage = null;
+			if (this.ws.readyState !== WebSocket.CLOSED) {
+				this.ws.close();
+			}
+			this.ws = null;
+		}
+	}
+
+	/** Force reconnection (resets backoff) */
+	protected forceReconnect(): void {
+		this.reconnectAttempts = 0;
+		if (this.ws) {
+			this.ws.onclose = null; // Prevent normal onclose from scheduling reconnect
+			this.ws.close();
+			this.ws = null;
+		}
+		this.stopPingTimer();
+		this.connected = false;
+		this.doConnect();
+	}
+
+	private startPingTimer(): void {
+		this.stopPingTimer();
+		this.pingTimer = setInterval(() => {
+			if (this.ws?.readyState === WebSocket.OPEN) {
+				// Check if connection is stale (no pong received recently)
+				if (Date.now() - this.lastPong > this.config.pingInterval + this.config.pongTimeout) {
+					if (import.meta.env.DEV) console.debug(`${this.getLogPrefix()} Connection stale, forcing reconnect`);
+					this.ws?.close();
+					return;
+				}
+				this.ws.send('ping');
+			}
+		}, this.config.pingInterval);
+	}
+
+	private stopPingTimer(): void {
+		if (this.pingTimer) {
+			clearInterval(this.pingTimer);
+			this.pingTimer = null;
+		}
+	}
+
+	private scheduleReconnect(): void {
+		if (this.reconnectTimer) return;
+
+		// Exponential backoff with jitter
+		const delay = Math.min(
+			this.config.baseReconnectDelay * Math.pow(2, this.reconnectAttempts) + Math.random() * 1000,
+			this.config.maxReconnectDelay
+		);
+		this.reconnectAttempts++;
+
+		if (import.meta.env.DEV) console.debug(`${this.getLogPrefix()} Reconnecting in ${Math.round(delay)}ms (attempt ${this.reconnectAttempts})`);
+		this.reconnectTimer = setTimeout(() => {
+			this.reconnectTimer = null;
+			this.doConnect();
+		}, delay);
+	}
+
+	private setupVisibilityHandler(): void {
+		if (this.visibilityHandler) return;
+
+		this.visibilityHandler = () => {
+			if (document.visibilityState === 'visible' && this.shouldReconnect()) {
+				if (import.meta.env.DEV) console.debug(`${this.getLogPrefix()} Page visible, checking connection`);
+				if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+					if (import.meta.env.DEV) console.debug(`${this.getLogPrefix()} Connection lost while hidden, reconnecting`);
+					this.forceReconnect();
+				} else {
+					// Send a ping to verify connection is alive
+					this.ws.send('ping');
+				}
+			}
+		};
+
+		document.addEventListener('visibilitychange', this.visibilityHandler);
+	}
+
+	private removeVisibilityHandler(): void {
+		if (this.visibilityHandler) {
+			document.removeEventListener('visibilitychange', this.visibilityHandler);
+			this.visibilityHandler = null;
+		}
+	}
+}

package/web/src/lib/types/terminal.ts

@@ -0,0 +1,31 @@
+/**
+ * Terminal output block types for visual differentiation
+ */
+export type BlockType =
+	| 'user-prompt' // Lines starting with ❯
+	| 'claude-response' // Lines starting with ●
+	| 'tool-call' // Tool invocations like "● Bash(ls)"
+	| 'tool-result' // Lines starting with ⎿
+	| 'separator' // Lines starting with ─────
+	| 'status' // Status bar content (Esc to interrupt, etc.)
+	| 'spinner' // Active spinner animation
+	| 'plain'; // Unclassified content
+
+/**
+ * A parsed block of terminal output with type classification
+ */
+export interface ParsedBlock {
+	/** Unique identifier for Svelte keyed each */
+	id: number;
+	/** The type of content this block represents */
+	type: BlockType;
+	/** The raw text content of this block */
+	content: string;
+	/** Optional metadata extracted from the content */
+	metadata?: {
+		/** Tool name for tool-call blocks */
+		toolName?: string;
+		/** Whether this block appears complete */
+		isComplete?: boolean;
+	};
+}

package/web/src/lib/utils/terminal-parser.ts

@@ -0,0 +1,239 @@
+import type { BlockType, ParsedBlock } from '$lib/types/terminal';
+
+/**
+ * Regex patterns for Claude Code visual elements
+ */
+const PATTERNS = {
+	// User prompt starts with ❯ (Unicode chevron only - ASCII > is used for selection indicators)
+	userPrompt: /^❯\s/,
+	// Claude response starts with ● (filled circle) followed by actual text
+	claudeResponse: /^●\s+\S/,
+	// Working indicator: just ● alone or with whitespace (no content after)
+	workingIndicator: /^●\s*$/,
+	// Tool result starts with ⎿ (with optional leading whitespace)
+	toolResult: /^(\s*)⎿/,
+	// Indented content (2+ spaces at start) - continues tool results
+	indentedContent: /^(\s{2,}|\t)/,
+	// Separator is 5+ dashes
+	separator: /^─{5,}/,
+	// Tool call: ● ToolName(...) or ● tool-name (...)
+	toolCall: /^●\s+([\w-]+)\s*\(/,
+	// MCP tool call: ● mcp-server - tool_name (MCP)
+	mcpToolCall: /^●\s+([\w-]+)\s+-\s+([\w_]+)\s+\(MCP\)/,
+	// Braille spinner characters
+	spinner: /[⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠐⠂⠄]/,
+	// Status hints
+	statusHint: /(Esc to interrupt|ctrl\+c to interrupt|Esc to cancel|to cycle\))/i,
+	// Progress bar or status line at bottom
+	progressBar: /^\s*[\w-]+\s+\[.*\]\s+\w+@/
+};
+
+/**
+ * Classify a single line of terminal output
+ */
+function classifyLine(line: string, previousType: BlockType | null): BlockType {
+	// Check for separator first (most specific)
+	if (PATTERNS.separator.test(line)) return 'separator';
+
+	// Check for MCP tool call
+	if (PATTERNS.mcpToolCall.test(line)) return 'tool-call';
+
+	// Check for regular tool call
+	if (PATTERNS.toolCall.test(line)) return 'tool-call';
+
+	// Check for working indicator (just ● with no content) - treat as spinner
+	if (PATTERNS.workingIndicator.test(line)) return 'spinner';
+
+	// Check for user prompt
+	if (PATTERNS.userPrompt.test(line)) return 'user-prompt';
+
+	// Check for Claude response (but not tool call)
+	if (PATTERNS.claudeResponse.test(line)) return 'claude-response';
+
+	// Check for tool result
+	if (PATTERNS.toolResult.test(line)) return 'tool-result';
+
+	// Indented content continues tool calls (multi-line arguments)
+	if (previousType === 'tool-call' && PATTERNS.indentedContent.test(line)) {
+		return 'tool-call';
+	}
+
+	// Indented content continues tool results
+	if (previousType === 'tool-result' && PATTERNS.indentedContent.test(line)) {
+		return 'tool-result';
+	}
+
+	// Check for status/progress indicators
+	if (PATTERNS.statusHint.test(line) || PATTERNS.progressBar.test(line)) return 'status';
+
+	// Check for active spinner
+	if (PATTERNS.spinner.test(line) && line.length < 100) return 'spinner';
+
+	return 'plain';
+}
+
+/**
+ * Extract tool name from a tool call line
+ */
+function extractToolName(line: string): string | undefined {
+	// Try MCP tool format first
+	const mcpMatch = line.match(PATTERNS.mcpToolCall);
+	if (mcpMatch) {
+		return `${mcpMatch[1]}:${mcpMatch[2]}`;
+	}
+
+	// Try regular tool format
+	const match = line.match(PATTERNS.toolCall);
+	if (match) {
+		return match[1];
+	}
+
+	return undefined;
+}
+
+/**
+ * Check if a line is a genuine new tool call (not just continuation)
+ */
+function isNewToolCall(line: string): boolean {
+	return PATTERNS.toolCall.test(line) || PATTERNS.mcpToolCall.test(line);
+}
+
+/**
+ * Transition table: defines when to CONTINUE (false) vs BREAK (true) blocks.
+ * true = start new block, false = continue current block, undefined = use default (break on type change)
+ *
+ * Format: TRANSITIONS[currentType][newType] = shouldBreak
+ */
+const TRANSITIONS: Record<BlockType, Partial<Record<BlockType, boolean>>> = {
+	'user-prompt': {
+		'plain': false,      // Multi-line user input continues
+		'spinner': false,    // Spinners during input don't break
+	},
+	'claude-response': {
+		'plain': false,      // Response text continues
+		'spinner': false,    // Spinners during response don't break
+	},
+	'tool-call': {
+		'tool-call': false,  // Continuation lines (handled specially for new tool calls)
+		'tool-result': false, // Results follow tool calls
+		'spinner': false,    // Spinners during execution don't break
+	},
+	'tool-result': {
+		'tool-result': false, // Multiple result lines continue
+		'spinner': false,    // Spinners during results don't break
+	},
+	'separator': {
+		// Separators always break - no continues
+	},
+	'status': {
+		'status': false,     // Status lines group together
+	},
+	'spinner': {
+		'spinner': false,    // Multiple spinner frames group together
+	},
+	'plain': {
+		'plain': false,      // Plain content groups together
+	},
+};
+
+/**
+ * Determine if we should start a new block based on current and new type.
+ * Uses explicit transition table for clarity and maintainability.
+ */
+function shouldStartNewBlock(current: ParsedBlock | null, newType: BlockType, line: string): boolean {
+	if (!current) return true;
+
+	// Separators and user prompts always start new blocks
+	if (newType === 'separator' || newType === 'user-prompt') {
+		return true;
+	}
+
+	// Special case: new tool calls always start new blocks, but continuations don't
+	if (newType === 'tool-call' && isNewToolCall(line)) {
+		return true;
+	}
+
+	// Look up transition in table
+	const transition = TRANSITIONS[current.type]?.[newType];
+
+	// If explicitly defined, use that
+	if (transition !== undefined) {
+		return transition;
+	}
+
+	// Default: break on type change
+	return current.type !== newType;
+}
+
+/**
+ * Parse terminal output into typed blocks
+ */
+export function parseTerminalOutput(output: string): ParsedBlock[] {
+	if (!output || output.trim() === '') {
+		return [];
+	}
+
+	const lines = output.split('\n');
+	const blocks: ParsedBlock[] = [];
+	let currentBlock: ParsedBlock | null = null;
+	let blockIdCounter = 0;
+
+	for (const line of lines) {
+		// Skip empty lines - they just add vertical space
+		if (line.trim() === '') {
+			continue;
+		}
+
+		const previousType = currentBlock?.type ?? null;
+		const blockType = classifyLine(line, previousType);
+
+		if (shouldStartNewBlock(currentBlock, blockType, line)) {
+			// Save current block if exists
+			if (currentBlock && currentBlock.content.trim()) {
+				blocks.push(currentBlock);
+			}
+
+			// Create new block
+			currentBlock = {
+				id: ++blockIdCounter,
+				type: blockType,
+				content: line
+			};
+
+			// Extract metadata for tool calls
+			if (blockType === 'tool-call') {
+				const toolName = extractToolName(line);
+				if (toolName) {
+					currentBlock.metadata = { toolName };
+				}
+			}
+		} else if (currentBlock) {
+			// Append to current block
+			currentBlock.content += '\n' + line;
+		}
+	}
+
+	// Don't forget the last block
+	if (currentBlock && currentBlock.content.trim()) {
+		blocks.push(currentBlock);
+	}
+
+	return blocks;
+}
+
+/**
+ * Get statistics about parsed blocks
+ */
+export function getBlockStats(blocks: ParsedBlock[]): {
+	userPrompts: number;
+	claudeResponses: number;
+	toolCalls: number;
+	hasActiveSpinner: boolean;
+} {
+	return {
+		userPrompts: blocks.filter((b) => b.type === 'user-prompt').length,
+		claudeResponses: blocks.filter((b) => b.type === 'claude-response').length,
+		toolCalls: blocks.filter((b) => b.type === 'tool-call').length,
+		hasActiveSpinner: blocks.some((b) => b.type === 'spinner')
+	};
+}

package/web/src/lib/utils.ts

@@ -0,0 +1,13 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };