claude-code-runner 0.1.0 → 0.1.1

package/public/app.js

@@ -0,0 +1,1115 @@
+/* eslint-disable no-control-regex */
+/* global Terminal, FitAddon, WebLinksAddon, io */
+
+// Terminal and Socket.IO setup
+let term;
+let socket;
+let fitAddon;
+let webLinksAddon;
+let containerId;
+
+// Input detection state
+let isWaitingForInput = false;
+let lastOutputTime = Date.now();
+let lastNotificationTime = 0;
+let idleTimer = null;
+let isWaitingForLoadingAnimation = false;
+const seenLoadingChars = new Set();
+let originalPageTitle = '';
+const IDLE_THRESHOLD = 1500; // 1.5 seconds of no output means waiting for input
+const NOTIFICATION_COOLDOWN = 2000; // 2 seconds between notifications
+
+// Claude's loading animation characters (unique characters only)
+const LOADING_CHARS = ['✢', '✶', '✻', '✽', '✻', '✢', '·'];
+const UNIQUE_LOADING_CHARS = new Set(LOADING_CHARS);
+
+// Create notification sound using Web Audio API
+let audioContext;
+let notificationSound;
+
+function initializeAudio() {
+	try {
+		if (window.AudioContext || window.webkitAudioContext) {
+			audioContext = new (window.AudioContext || window.webkitAudioContext)();
+			console.log('Audio context created:', audioContext.state);
+
+			// Create a simple notification beep
+			function createBeep(frequency, duration) {
+				try {
+					const oscillator = audioContext.createOscillator();
+					const gainNode = audioContext.createGain();
+
+					oscillator.connect(gainNode);
+					gainNode.connect(audioContext.destination);
+
+					oscillator.frequency.value = frequency;
+					oscillator.type = 'sine';
+
+					gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
+					gainNode.gain.exponentialRampToValueAtTime(
+						0.01,
+						audioContext.currentTime + duration,
+					);
+
+					oscillator.start(audioContext.currentTime);
+					oscillator.stop(audioContext.currentTime + duration);
+
+					return true;
+				}
+				catch (error) {
+					console.error('Error creating beep:', error);
+					return false;
+				}
+			}
+
+			notificationSound = () => {
+				console.log(
+					'Playing notification sound, audio context state:',
+					audioContext.state,
+				);
+
+				// Try Web Audio API first
+				try {
+					const beep1 = createBeep(800, 0.1);
+					setTimeout(() => createBeep(1000, 0.1), 100);
+					setTimeout(() => createBeep(1200, 0.15), 200);
+					return beep1;
+				}
+				catch (error) {
+					console.error('Web Audio API failed, trying fallback:', error);
+
+					// Fallback to HTML audio element
+					const audioElement = document.getElementById('notification-sound');
+					if (audioElement) {
+						audioElement.currentTime = 0;
+						audioElement
+							.play()
+							.catch(e => console.error('Fallback audio failed:', e));
+					}
+					return false;
+				}
+			};
+		}
+		else {
+			// No Web Audio API support, use fallback only
+			console.log('Web Audio API not supported, using fallback audio');
+			notificationSound = () => {
+				const audioElement = document.getElementById('notification-sound');
+				if (audioElement) {
+					audioElement.currentTime = 0;
+					audioElement
+						.play()
+						.catch(e => console.error('Fallback audio failed:', e));
+				}
+			};
+		}
+
+		console.log('Audio initialized successfully');
+	}
+	catch (error) {
+		console.error('Failed to initialize audio:', error);
+
+		// Last resort fallback
+		notificationSound = () => {
+			console.log('Audio not available');
+		};
+	}
+}
+
+// Idle detection functions
+function resetIdleTimer() {
+	// Clear any existing timer
+	if (idleTimer) {
+		clearTimeout(idleTimer);
+		idleTimer = null;
+	}
+
+	// Reset waiting state only if we're not waiting for loading animation
+	if (!isWaitingForLoadingAnimation) {
+		isWaitingForInput = false;
+	}
+
+	// Update last output time
+	lastOutputTime = Date.now();
+
+	// Only start a new timer if we've seen the loading animation or not waiting for it
+	if (
+		!isWaitingForLoadingAnimation
+		|| seenLoadingChars.size === UNIQUE_LOADING_CHARS.size
+	) {
+		idleTimer = setTimeout(() => {
+			onIdleDetected();
+		}, IDLE_THRESHOLD);
+	}
+}
+
+function onIdleDetected() {
+	console.log('[IDLE] Idle detected. State:', {
+		isWaitingForInput,
+		isWaitingForLoadingAnimation,
+		seenLoadingCharsCount: seenLoadingChars.size,
+		requiredCharsCount: UNIQUE_LOADING_CHARS.size,
+	});
+
+	// Claude has stopped outputting for 1.5 seconds - likely waiting for input
+	// But only trigger if we're not waiting for loading animation or have seen all chars
+	if (
+		!isWaitingForInput
+		&& (!isWaitingForLoadingAnimation
+			|| seenLoadingChars.size === UNIQUE_LOADING_CHARS.size)
+	) {
+		isWaitingForInput = true;
+		console.log('[IDLE] ✓ Triggering input needed notification');
+
+		// Check cooldown to avoid spamming notifications
+		const now = Date.now();
+		if (now - lastNotificationTime > NOTIFICATION_COOLDOWN) {
+			lastNotificationTime = now;
+
+			// Check if sound is enabled
+			const soundEnabled = document.getElementById('soundEnabled').checked;
+
+			// Play notification sound if enabled
+			if (soundEnabled && notificationSound) {
+				try {
+					// Resume audio context if suspended (browser requirement)
+					if (audioContext && audioContext.state === 'suspended') {
+						audioContext.resume();
+					}
+					notificationSound();
+				}
+				catch (error) {
+					console.error('Failed to play notification sound:', error);
+				}
+			}
+
+			// Show permanent visual notification
+			document.body.classList.add('input-needed');
+
+			// Update status bar
+			updateStatus('connected', '⚠️ Waiting for input');
+
+			// Update page title
+			if (!originalPageTitle) {
+				originalPageTitle = document.title;
+			}
+			document.title = `⚠️ Input needed - ${originalPageTitle}`;
+
+			// Trigger file sync
+			if (socket && containerId) {
+				console.log('[SYNC] Triggering file sync due to input needed...');
+				console.log('[SYNC] Container ID:', containerId);
+				console.log('[SYNC] Socket connected:', socket.connected);
+				console.log('[SYNC] Socket ID:', socket.id);
+
+				// Test the socket connection first
+				socket.emit('test-sync', { message: 'testing sync connection' });
+
+				// Emit the actual event and log it
+				socket.emit('input-needed', { containerId });
+				console.log('[SYNC] Event emitted successfully');
+
+				// Set a timeout to check if we get a response
+				setTimeout(() => {
+					console.log('[SYNC] 5 seconds passed, checking if sync completed...');
+				}, 5000);
+			}
+			else {
+				console.log(
+					'[SYNC] Cannot trigger sync - socket:',
+					!!socket,
+					'containerId:',
+					!!containerId,
+				);
+			}
+		}
+	}
+}
+
+// Check if output contains loading characters
+function checkForLoadingChars(text) {
+	// Strip ANSI escape sequences to get plain text
+	// This regex handles color codes, cursor movements, and other escape sequences
+	const stripAnsi = str =>
+		str.replace(
+			/[\x1B\x9B][[()#;?]*(?:\d{1,4}(?:;\d{0,4})*)?[0-9A-ORZcf-nqry=><]/g,
+			'',
+		);
+	const plainText = stripAnsi(text);
+
+	const foundChars = [];
+	// Check both the original text and stripped text
+	const textsToCheck = [text, plainText];
+
+	for (const textToCheck of textsToCheck) {
+		for (const char of textToCheck) {
+			if (LOADING_CHARS.includes(char)) {
+				seenLoadingChars.add(char);
+				foundChars.push(char);
+			}
+		}
+	}
+
+	if (foundChars.length > 0) {
+		console.log(
+			`[LOADING] Found loading chars: ${foundChars.join(', ')} | Total seen: ${Array.from(seenLoadingChars).join(', ')} (${seenLoadingChars.size}/${UNIQUE_LOADING_CHARS.size})`,
+		);
+
+		// Debug: show hex values if we're missing chars
+		if (seenLoadingChars.size < UNIQUE_LOADING_CHARS.size && text.length < 50) {
+			const hexView = Array.from(text)
+				.map(c => `${c}(${c.charCodeAt(0).toString(16)})`)
+				.join(' ');
+			console.log(`[LOADING] Hex view: ${hexView}`);
+		}
+	}
+
+	// If we've seen all unique loading chars, we can stop waiting
+	if (
+		seenLoadingChars.size === UNIQUE_LOADING_CHARS.size
+		&& isWaitingForLoadingAnimation
+	) {
+		console.log(
+			'[LOADING] ✓ Seen all loading characters, Claude has started processing',
+		);
+		isWaitingForLoadingAnimation = false;
+		// Reset the idle timer now that we know Claude is processing
+		resetIdleTimer();
+	}
+}
+
+// Get container ID from URL only
+const urlParams = new URLSearchParams(window.location.search);
+containerId = urlParams.get('container');
+
+// Initialize the terminal
+function initTerminal() {
+	term = new Terminal({
+		cursorBlink: true,
+		fontSize: 14,
+		fontFamily: 'Consolas, "Courier New", monospace',
+		theme: {
+			background: '#1e1e1e',
+			foreground: '#d4d4d4',
+			cursor: '#d4d4d4',
+			black: '#000000',
+			red: '#cd3131',
+			green: '#0dbc79',
+			yellow: '#e5e510',
+			blue: '#2472c8',
+			magenta: '#bc3fbc',
+			cyan: '#11a8cd',
+			white: '#e5e5e5',
+			brightBlack: '#666666',
+			brightRed: '#f14c4c',
+			brightGreen: '#23d18b',
+			brightYellow: '#f5f543',
+			brightBlue: '#3b8eea',
+			brightMagenta: '#d670d6',
+			brightCyan: '#29b8db',
+			brightWhite: '#e5e5e5',
+		},
+		allowProposedApi: true,
+	});
+
+	// Load addons
+	fitAddon = new FitAddon.FitAddon();
+	webLinksAddon = new WebLinksAddon.WebLinksAddon();
+
+	term.loadAddon(fitAddon);
+	term.loadAddon(webLinksAddon);
+
+	// Open terminal in the DOM
+	term.open(document.getElementById('terminal'));
+
+	// Fit terminal to container
+	fitAddon.fit();
+
+	// Handle window resize
+	window.addEventListener('resize', () => {
+		fitAddon.fit();
+		if (socket && socket.connected) {
+			socket.emit('resize', {
+				cols: term.cols,
+				rows: term.rows,
+			});
+		}
+	});
+
+	// Handle terminal input
+	term.onData((data) => {
+		if (socket && socket.connected) {
+			socket.emit('input', data);
+
+			// Cancel idle timer when user provides input
+			if (idleTimer) {
+				clearTimeout(idleTimer);
+				idleTimer = null;
+			}
+
+			// When user provides input, start waiting for loading animation
+			if (isWaitingForInput) {
+				isWaitingForInput = false;
+				isWaitingForLoadingAnimation = true;
+				seenLoadingChars.clear(); // Clear seen loading chars
+				console.log(
+					'[STATE] User provided input, waiting for loading animation...',
+				);
+				console.log(
+					'[STATE] Need to see these chars:',
+					Array.from(UNIQUE_LOADING_CHARS).join(', '),
+				);
+
+				// Clear the input-needed visual state
+				document.body.classList.remove('input-needed');
+
+				// Reset title
+				if (originalPageTitle) {
+					document.title = originalPageTitle;
+				}
+
+				// Update status
+				updateStatus(
+					'connected',
+					`Connected to ${containerId.substring(0, 12)}`,
+				);
+			}
+		}
+	});
+
+	// Show welcome message
+	term.writeln('\x1B[1;32mWelcome to Claude Code Runner Terminal\x1B[0m');
+	term.writeln('\x1B[90mConnecting to container...\x1B[0m');
+	term.writeln('');
+
+	// Auto-focus the terminal
+	term.focus();
+}
+
+// Initialize Socket.IO connection
+function initSocket() {
+	socket = io();
+	window.socket = socket; // Make it globally accessible for debugging
+
+	socket.on('connect', () => {
+		console.log('Connected to server');
+		updateStatus('connecting', 'Attaching to container...');
+
+		// Hide loading spinner
+		document.getElementById('loading').style.display = 'none';
+
+		// Only use container ID from URL, never from cache
+		const urlParams = new URLSearchParams(window.location.search);
+		const currentContainerId = urlParams.get('container');
+
+		if (currentContainerId) {
+			containerId = currentContainerId;
+			socket.emit('attach', {
+				containerId: currentContainerId,
+				cols: term.cols,
+				rows: term.rows,
+			});
+		}
+		else {
+			// No container ID in URL, fetch available containers
+			fetchContainerList();
+		}
+	});
+
+	socket.on('attached', (data) => {
+		console.log('Attached to container:', data.containerId);
+		containerId = data.containerId;
+		updateStatus(
+			'connected',
+			`Connected to ${data.containerId.substring(0, 12)}`,
+		);
+
+		// Don't clear terminal on attach - preserve existing content
+
+		// Send initial resize
+		socket.emit('resize', {
+			cols: term.cols,
+			rows: term.rows,
+		});
+
+		// Start idle detection
+		resetIdleTimer();
+
+		// Focus terminal when attached
+		if (term) {
+			term.focus();
+		}
+
+		// Fetch git info for this container
+		fetchGitInfo();
+	});
+
+	socket.on('output', (data) => {
+		// Convert ArrayBuffer to Uint8Array if needed
+		if (data instanceof ArrayBuffer) {
+			data = new Uint8Array(data);
+		}
+		term.write(data);
+
+		// Convert to string to check for loading characters
+		const decoder = new TextDecoder('utf-8');
+		const text = decoder.decode(data);
+
+		// Check for loading characters if we're waiting for them
+		if (isWaitingForLoadingAnimation) {
+			checkForLoadingChars(text);
+		}
+		else if (text.length > 0) {
+			// Check if loading chars are present in either raw or stripped text
+			const stripAnsi = str =>
+				str.replace(
+					/[\x1B\x9B][[()#;?]*(?:\d{1,4}(?:;\d{0,4})*)?[0-9A-ORZcf-nqry=><]/g,
+					'',
+				);
+			const plainText = stripAnsi(text);
+
+			const foundInRaw = LOADING_CHARS.filter(char => text.includes(char));
+			const foundInPlain = LOADING_CHARS.filter(char =>
+				plainText.includes(char),
+			);
+
+			if (foundInRaw.length > 0 || foundInPlain.length > 0) {
+				console.log('[DEBUG] Loading chars present but not tracking:', {
+					raw: foundInRaw.join(', '),
+					plain: foundInPlain.join(', '),
+					hasAnsi: text !== plainText,
+				});
+			}
+		}
+
+		// Reset idle timer on any output
+		resetIdleTimer();
+	});
+
+	socket.on('disconnect', () => {
+		updateStatus('error', 'Disconnected from server');
+		term.writeln(
+			'\r\n\x1B[1;31mServer connection lost. Click "Reconnect" to retry.\x1B[0m',
+		);
+
+		// Clear idle timer on disconnect
+		if (idleTimer) {
+			clearTimeout(idleTimer);
+			idleTimer = null;
+		}
+
+		// Clear input-needed state
+		document.body.classList.remove('input-needed');
+		if (originalPageTitle) {
+			document.title = originalPageTitle;
+		}
+	});
+
+	socket.on('container-disconnected', () => {
+		updateStatus('error', 'Container disconnected');
+		term.writeln(
+			'\r\n\x1B[1;31mContainer connection lost. Click "Reconnect" to retry.\x1B[0m',
+		);
+
+		// Clear idle timer on disconnect
+		if (idleTimer) {
+			clearTimeout(idleTimer);
+			idleTimer = null;
+		}
+
+		// Clear input-needed state
+		document.body.classList.remove('input-needed');
+		if (originalPageTitle) {
+			document.title = originalPageTitle;
+		}
+	});
+
+	socket.on('sync-complete', (data) => {
+		console.log('[SYNC] Sync completed:', data);
+		console.log('[SYNC] Has changes:', data.hasChanges);
+		console.log('[SYNC] Summary:', data.summary);
+		console.log('[SYNC] Diff data:', data.diffData);
+
+		if (data.hasChanges) {
+			// Keep showing container ID in status
+			updateStatus('connected', `Connected to ${containerId.substring(0, 12)}`);
+			updateChangesTab(data);
+
+			// Update file count badge with total changed files
+			const totalFiles = calculateTotalChangedFiles(data);
+			updateChangesTabBadge(totalFiles);
+		}
+		else {
+			updateStatus('connected', `Connected to ${containerId.substring(0, 12)}`);
+			clearChangesTab();
+			updateChangesTabBadge(0);
+		}
+	});
+
+	socket.on('sync-error', (error) => {
+		console.error('[SYNC] Sync error:', error);
+		updateStatus('error', `Sync failed: ${error.message}`);
+	});
+
+	// Add general error handler
+	socket.on('error', (error) => {
+		console.error('[SOCKET] Socket error:', error);
+	});
+
+	// Add disconnect handler with debug
+	socket.on('disconnect', (reason) => {
+		console.log('[SOCKET] Disconnected:', reason);
+	});
+
+	// Container error handler (keeping this for backward compatibility)
+	socket.on('container-error', (error) => {
+		console.error('[CONTAINER] Container error:', error);
+		updateStatus('error', `Error: ${error.message}`);
+		if (term && term.writeln) {
+			term.writeln(`\r\n\x1B[1;31mError: ${error.message}\x1B[0m`);
+		}
+
+		// If container not found, try to get a new one
+		if (error.message && error.message.includes('no such container')) {
+			containerId = null;
+
+			// Try to fetch available containers
+			setTimeout(() => {
+				fetchContainerList();
+			}, 1000);
+		}
+	});
+}
+
+// Fetch available containers
+async function fetchContainerList() {
+	try {
+		const response = await fetch('/api/containers');
+		const containers = await response.json();
+
+		if (containers.length > 0) {
+			// Use the first container
+			containerId = containers[0].Id;
+			socket.emit('attach', {
+				containerId,
+				cols: term.cols,
+				rows: term.rows,
+			});
+		}
+		else {
+			updateStatus('error', 'No containers found');
+			term.writeln('\x1B[1;31mNo Claude Code Runner containers found.\x1B[0m');
+			term.writeln('\x1B[90mPlease start a container first.\x1B[0m');
+		}
+	}
+	catch (error) {
+		console.error('Failed to fetch containers:', error);
+		updateStatus('error', 'Failed to fetch containers');
+	}
+}
+
+// Update connection status
+function updateStatus(status, text) {
+	const indicator = document.getElementById('status-indicator');
+	const statusText = document.getElementById('status-text');
+
+	indicator.className = `status-indicator ${status}`;
+	statusText.textContent = text;
+}
+
+// Control functions
+function clearTerminal() {
+	term.clear();
+}
+
+function reconnect() {
+	if (socket && containerId) {
+		// Don't clear terminal - preserve existing content
+		term.writeln('\r\n\x1B[90mReconnecting...\x1B[0m');
+
+		// Just emit attach again without disconnecting
+		// This will reattach to the existing session
+		socket.emit('attach', {
+			containerId,
+			cols: term.cols,
+			rows: term.rows,
+		});
+	}
+}
+
+function copySelection() {
+	const selection = term.getSelection();
+	if (selection) {
+		navigator.clipboard
+			.writeText(selection)
+			.then(() => {
+				// Show temporary feedback
+				const originalText = document.getElementById('status-text').textContent;
+				updateStatus('connected', 'Copied to clipboard');
+				setTimeout(() => {
+					updateStatus('connected', originalText);
+				}, 2000);
+			})
+			.catch((err) => {
+				console.error('Failed to copy:', err);
+			});
+	}
+}
+
+// Git info functions
+async function fetchGitInfo() {
+	try {
+		// Use container ID if available to get branch from shadow repo
+		const url = containerId
+			? `/api/git/info?containerId=${containerId}`
+			: '/api/git/info';
+		const response = await fetch(url);
+		if (response.ok) {
+			const data = await response.json();
+			updateGitInfo(data);
+		}
+		else {
+			console.error('Failed to fetch git info:', response.statusText);
+		}
+	}
+	catch (error) {
+		console.error('Error fetching git info:', error);
+	}
+}
+
+function updateGitInfo(data) {
+	const gitInfoElement = document.getElementById('git-info');
+	const branchNameElement = document.getElementById('branch-name');
+	const prInfoElement = document.getElementById('pr-info');
+
+	if (data.currentBranch) {
+		// Clear existing content
+		branchNameElement.innerHTML = '';
+
+		if (data.branchUrl) {
+			// Create clickable branch link
+			const branchLink = document.createElement('a');
+			branchLink.href = data.branchUrl;
+			branchLink.target = '_blank';
+			branchLink.textContent = data.currentBranch;
+			branchLink.style.color = 'inherit';
+			branchLink.style.textDecoration = 'none';
+			branchLink.title = `View ${data.currentBranch} branch on GitHub`;
+			branchLink.addEventListener('mouseenter', () => {
+				branchLink.style.textDecoration = 'underline';
+			});
+			branchLink.addEventListener('mouseleave', () => {
+				branchLink.style.textDecoration = 'none';
+			});
+			branchNameElement.appendChild(branchLink);
+		}
+		else {
+			// Fallback to plain text
+			branchNameElement.textContent = data.currentBranch;
+		}
+
+		gitInfoElement.style.display = 'inline-block';
+	}
+
+	// Clear existing PR info
+	prInfoElement.innerHTML = '';
+
+	if (data.prs && data.prs.length > 0) {
+		data.prs.forEach((pr) => {
+			const prBadge = document.createElement('a');
+			prBadge.className = 'pr-badge';
+			prBadge.href = pr.url;
+			prBadge.target = '_blank';
+			prBadge.title = pr.title;
+
+			// Set badge class based on state
+			if (pr.isDraft) {
+				prBadge.classList.add('draft');
+				prBadge.textContent = `Draft PR #${pr.number}`;
+			}
+			else if (pr.state === 'OPEN') {
+				prBadge.classList.add('open');
+				prBadge.textContent = `PR #${pr.number}`;
+			}
+			else if (pr.state === 'CLOSED') {
+				prBadge.classList.add('closed');
+				prBadge.textContent = `Closed PR #${pr.number}`;
+			}
+			else if (pr.state === 'MERGED') {
+				prBadge.classList.add('merged');
+				prBadge.textContent = `Merged PR #${pr.number}`;
+			}
+
+			prInfoElement.appendChild(prBadge);
+		});
+	}
+}
+
+// Initialize everything when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+	// Store original page title
+	originalPageTitle = document.title;
+
+	initTerminal();
+	initSocket();
+
+	// Fetch git info on load
+	fetchGitInfo();
+
+	// Refresh git info periodically
+	setInterval(fetchGitInfo, 30000); // Every 30 seconds
+
+	// Initialize audio on first user interaction (browser requirement)
+	document.addEventListener(
+		'click',
+		function initAudioOnInteraction() {
+			if (!audioContext) {
+				initializeAudio();
+			}
+			// Remove listener after first interaction
+			document.removeEventListener('click', initAudioOnInteraction);
+		},
+		{ once: true },
+	);
+
+	// Also try to initialize on keyboard interaction
+	document.addEventListener(
+		'keydown',
+		function initAudioOnKeyboard() {
+			if (!audioContext) {
+				initializeAudio();
+			}
+			// Remove listener after first interaction
+			document.removeEventListener('keydown', initAudioOnKeyboard);
+		},
+		{ once: true },
+	);
+
+	// Expose variables for testing with getters
+	Object.defineProperty(window, 'term', { get: () => term });
+	Object.defineProperty(window, 'isWaitingForInput', {
+		get: () => isWaitingForInput,
+	});
+	Object.defineProperty(window, 'isWaitingForLoadingAnimation', {
+		get: () => isWaitingForLoadingAnimation,
+	});
+	Object.defineProperty(window, 'seenLoadingChars', {
+		get: () => seenLoadingChars,
+	});
+	Object.defineProperty(window, 'lastOutputTime', {
+		get: () => lastOutputTime,
+	});
+	Object.defineProperty(window, 'lastNotificationTime', {
+		get: () => lastNotificationTime,
+	});
+	Object.defineProperty(window, 'audioContext', { get: () => audioContext });
+	Object.defineProperty(window, 'notificationSound', {
+		get: () => notificationSound,
+		set: (value) => {
+			notificationSound = value;
+		},
+	});
+});
+
+// Calculate total changed files from sync data
+function calculateTotalChangedFiles(syncData) {
+	if (!syncData.diffData || !syncData.diffData.status)
+		return 0;
+
+	// Count unique files from git status
+	const statusLines = syncData.diffData.status
+		.split('\n')
+		.filter(line => line.trim());
+	const uniqueFiles = new Set();
+
+	statusLines.forEach((line) => {
+		if (line.trim()) {
+			const filename = line.substring(3).trim();
+			if (filename) {
+				uniqueFiles.add(filename);
+			}
+		}
+	});
+
+	return uniqueFiles.size;
+}
+
+// Update changes tab badge
+function updateChangesTabBadge(fileCount) {
+	const changesTab = document.getElementById('changes-tab');
+	if (!changesTab)
+		return;
+
+	// Remove existing badge
+	const existingBadge = changesTab.querySelector('.file-count-badge');
+	if (existingBadge) {
+		existingBadge.remove();
+	}
+
+	// Add new badge if there are changes
+	if (fileCount > 0) {
+		const badge = document.createElement('span');
+		badge.className = 'file-count-badge';
+		badge.textContent = fileCount.toString();
+		changesTab.appendChild(badge);
+	}
+}
+
+// Tab system functions
+function switchTab(tabName) {
+	// Remove active class from all tabs and content
+	document
+		.querySelectorAll('.tab')
+		.forEach(tab => tab.classList.remove('active'));
+	document
+		.querySelectorAll('.tab-content')
+		.forEach(content => content.classList.remove('active'));
+
+	// Add active class to selected tab and content
+	document.getElementById(`${tabName}-tab`).classList.add('active');
+	document.getElementById(`${tabName}-content`).classList.add('active');
+
+	// Tab switching handled by active class now
+
+	// Resize terminal if switching back to terminal tab
+	if (tabName === 'terminal' && term && term.fit) {
+		setTimeout(() => term.fit(), 100);
+	}
+}
+
+// Git workflow functions for tab system
+function updateChangesTab(syncData) {
+	console.log('[UI] updateChangesTab called with:', syncData);
+
+	const container = document.getElementById('changes-container');
+
+	if (!container) {
+		console.error('[UI] changes-container not found!');
+		return;
+	}
+
+	// Clear existing content
+	container.innerHTML = '';
+
+	// Create changes content
+	const diffStats = syncData.diffData?.stats || {
+		additions: 0,
+		deletions: 0,
+		files: 0,
+	};
+	const statsText
+		= diffStats.files > 0
+			? `${diffStats.files} file(s), +${diffStats.additions} -${diffStats.deletions}`
+			: 'No changes';
+
+	container.innerHTML = `
+        <div class="changes-summary">
+            <strong>Changes Summary:</strong> ${syncData.summary}
+            <div class="diff-stats">📊 ${statsText}</div>
+        </div>
+        
+        <div class="diff-viewer">
+            ${formatDiffForDisplay(syncData.diffData)}
+        </div>
+        
+        <div class="git-actions">
+            <h3>💾 Commit Changes</h3>
+            <textarea 
+                id="commit-message" 
+                placeholder="Enter commit message..."
+                rows="3"
+            >Update files from Claude
+
+${syncData.summary}</textarea>
+            
+            <div style="margin-bottom: 15px;">
+                <button onclick="commitChanges('${syncData.containerId}')" class="btn btn-primary" id="commit-btn">
+                    Commit Changes
+                </button>
+            </div>
+        </div>
+        
+        <div class="git-actions" id="push-section" style="display: none;">
+            <h3>🚀 Push to Remote</h3>
+            <div class="branch-input">
+                <label for="branch-name">Branch name:</label>
+                <input type="text" id="branch-name" placeholder="claude-changes" value="claude-changes">
+            </div>
+            <div>
+                <button onclick="pushChanges('${syncData.containerId}')" class="btn btn-success" id="push-btn">
+                    Push to Remote
+                </button>
+            </div>
+        </div>
+    `;
+
+	// Store sync data for later use
+	window.currentSyncData = syncData;
+}
+
+function clearChangesTab() {
+	const container = document.getElementById('changes-container');
+	const noChanges = document.getElementById('no-changes');
+
+	// Show empty state
+	noChanges.style.display = 'block';
+
+	// Clear changes content but keep the empty state
+	container.innerHTML = `
+        <div class="empty-state" id="no-changes">
+            <h3>No changes detected</h3>
+            <p>Claude hasn't made any changes yet. Changes will appear here automatically when Claude modifies files.</p>
+        </div>
+    `;
+
+	// Remove badge
+	updateChangesTabBadge(0);
+}
+
+function formatDiffForDisplay(diffData) {
+	if (!diffData)
+		return '<div class="diff-line context">No changes to display</div>';
+
+	const lines = [];
+
+	// Show file status
+	if (diffData.status) {
+		lines.push('<div class="diff-line header">📄 File Status:</div>');
+		diffData.status.split('\n').forEach((line) => {
+			if (line.trim()) {
+				const status = line.substring(0, 2);
+				const filename = line.substring(3);
+				let statusText = '';
+				if (status === '??')
+					statusText = 'New file';
+				else if (status === ' M' || status === 'M ' || status === 'MM')
+					statusText = 'Modified';
+				else if (status === ' D' || status === 'D ')
+					statusText = 'Deleted';
+				else if (status === 'A ' || status === 'AM')
+					statusText = 'Added';
+				else statusText = `Status: ${status}`;
+
+				lines.push(
+					`<div class="diff-line context">  ${statusText}: ${filename}</div>`,
+				);
+			}
+		});
+		lines.push('<div class="diff-line context"></div>');
+	}
+
+	// Show diff
+	if (diffData.diff) {
+		lines.push('<div class="diff-line header">📝 Changes:</div>');
+		diffData.diff.split('\n').forEach((line) => {
+			let className = 'context';
+			if (line.startsWith('+'))
+				className = 'added';
+			else if (line.startsWith('-'))
+				className = 'removed';
+			else if (line.startsWith('@@'))
+				className = 'header';
+
+			lines.push(
+				`<div class="diff-line ${className}">${escapeHtml(line)}</div>`,
+			);
+		});
+	}
+
+	// Show untracked files
+	if (diffData.untrackedFiles && diffData.untrackedFiles.length > 0) {
+		lines.push('<div class="diff-line context"></div>');
+		lines.push('<div class="diff-line header">📁 New Files:</div>');
+		diffData.untrackedFiles.forEach((filename) => {
+			lines.push(`<div class="diff-line added">+ ${filename}</div>`);
+		});
+	}
+
+	return lines.join('');
+}
+
+function escapeHtml(text) {
+	const div = document.createElement('div');
+	div.textContent = text;
+	return div.innerHTML;
+}
+
+function commitChanges(containerId) {
+	const commitMessage = document.getElementById('commit-message').value.trim();
+	if (!commitMessage) {
+		alert('Please enter a commit message');
+		return;
+	}
+
+	const btn = document.getElementById('commit-btn');
+	btn.disabled = true;
+	btn.textContent = 'Committing...';
+
+	socket.emit('commit-changes', { containerId, commitMessage });
+
+	// Handle commit result
+	socket.once('commit-success', () => {
+		btn.textContent = '✓ Committed';
+		btn.style.background = '#238636';
+
+		// Show push section
+		document.getElementById('push-section').style.display = 'block';
+
+		updateStatus('connected', '✓ Changes committed successfully');
+	});
+
+	socket.once('commit-error', (error) => {
+		btn.disabled = false;
+		btn.textContent = 'Commit Changes';
+		alert(`Commit failed: ${error.message}`);
+		updateStatus('error', `Commit failed: ${error.message}`);
+	});
+}
+
+function pushChanges(containerId) {
+	const branchName
+		= document.getElementById('branch-name').value.trim() || 'claude-changes';
+
+	const btn = document.getElementById('push-btn');
+	btn.disabled = true;
+	btn.textContent = 'Pushing...';
+
+	socket.emit('push-changes', { containerId, branchName });
+
+	// Handle push result
+	socket.once('push-success', () => {
+		btn.textContent = '✓ Pushed to GitHub';
+		btn.style.background = '#238636';
+		updateStatus('connected', `✓ Changes pushed to remote ${branchName}`);
+
+		// Clear the changes tab after successful push
+		setTimeout(() => {
+			clearChangesTab();
+		}, 3000);
+	});
+
+	socket.once('push-error', (error) => {
+		btn.disabled = false;
+		btn.textContent = 'Push to Remote';
+		alert(`Push failed: ${error.message}`);
+		updateStatus('error', `Push failed: ${error.message}`);
+	});
+}
+
+// Handle keyboard shortcuts
+document.addEventListener('keydown', (e) => {
+	// Ctrl+Shift+C for copy
+	if (e.ctrlKey && e.shiftKey && e.key === 'C') {
+		e.preventDefault();
+		copySelection();
+	}
+	// Ctrl+Shift+V for paste
+	else if (e.ctrlKey && e.shiftKey && e.key === 'V') {
+		e.preventDefault();
+		navigator.clipboard.readText().then((text) => {
+			if (socket && socket.connected) {
+				socket.emit('input', text);
+			}
+		});
+	}
+});