claude-mux 0.7.0

package/web/src/routes/+layout.svelte

@@ -0,0 +1,450 @@
+<script lang="ts">
+	import '../app.css';
+	import { page } from '$app/stores';
+	import { browser } from '$app/environment';
+	import { onMount, onDestroy } from 'svelte';
+	import { sessionStore } from '$lib/stores/sessions.svelte';
+	import SessionsSidebar from '$lib/components/SessionsSidebar.svelte';
+	import AllSessionsPanel from '$lib/components/AllSessionsPanel.svelte';
+
+	let { children } = $props();
+
+	let drawerOpen = $state(false);
+	let sidebarElement: HTMLElement | null = $state(null);
+	let touchStartX = 0;
+	let touchCurrentX = 0;
+	let isDragging = false;
+
+	// Desktop split-view detection
+	const SPLIT_VIEW_BREAKPOINT = 1200;
+	let isDesktop = $state(false);
+
+	// Resizable sidebar state
+	const SIDEBAR_WIDTH_KEY = 'claude-mux-sidebar-width';
+	const SPLIT_PANEL_WIDTH_KEY = 'claude-mux-split-panel-width';
+	const MIN_WIDTH = 200;
+	const MAX_WIDTH = 500;
+	const DEFAULT_WIDTH = 250;
+	const DEFAULT_SPLIT_WIDTH = 350;
+
+	let sidebarWidth = $state(DEFAULT_WIDTH);
+	let splitPanelWidth = $state(DEFAULT_SPLIT_WIDTH);
+	let isResizing = $state(false);
+	let isResizingSplit = $state(false);
+	let sidebarRightEdge = 0; // Track sidebar's right edge for resize calculation (when on right side)
+
+	// Show sidebar only on session detail pages (not on main page)
+	const showSidebar = $derived($page.url.pathname.startsWith('/session/'));
+
+	// Connect session store at layout level so sidebar always has data
+	onMount(() => {
+		sessionStore.connect();
+
+		// Desktop detection
+		if (browser) {
+			isDesktop = window.innerWidth >= SPLIT_VIEW_BREAKPOINT;
+
+			const handleResize = () => {
+				isDesktop = window.innerWidth >= SPLIT_VIEW_BREAKPOINT;
+			};
+			window.addEventListener('resize', handleResize);
+
+			// Load saved sidebar width
+			const saved = localStorage.getItem(SIDEBAR_WIDTH_KEY);
+			if (saved) {
+				const width = parseInt(saved, 10);
+				if (width >= MIN_WIDTH && width <= MAX_WIDTH) {
+					sidebarWidth = width;
+				}
+			}
+
+			// Load saved split panel width
+			const savedSplit = localStorage.getItem(SPLIT_PANEL_WIDTH_KEY);
+			if (savedSplit) {
+				const width = parseInt(savedSplit, 10);
+				if (width >= MIN_WIDTH && width <= MAX_WIDTH) {
+					splitPanelWidth = width;
+				}
+			}
+
+			return () => window.removeEventListener('resize', handleResize);
+		}
+	});
+
+	onDestroy(() => {
+		sessionStore.disconnect();
+	});
+
+	// Resize handlers
+	function handleResizeStart(e: MouseEvent) {
+		e.preventDefault();
+		isResizing = true;
+		// Store the sidebar's right edge for resize calculation (sidebar is on right side on desktop)
+		if (sidebarElement) {
+			sidebarRightEdge = sidebarElement.getBoundingClientRect().right;
+		}
+		document.addEventListener('mousemove', handleResizeMove);
+		document.addEventListener('mouseup', handleResizeEnd);
+	}
+
+	function handleResizeMove(e: MouseEvent) {
+		if (!isResizing) return;
+		// On desktop (sidebar on right): width = rightEdge - mouseX
+		// On tablet (sidebar on left): width = mouseX - leftEdge (but we use rightEdge - (rightEdge - width) pattern)
+		if (isDesktop) {
+			// Sidebar is on the right, resize handle on left edge
+			// Dragging left = increase width, dragging right = decrease width
+			const newWidth = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, sidebarRightEdge - e.clientX));
+			sidebarWidth = newWidth;
+		} else {
+			// Sidebar is on the left, resize handle on right edge
+			// Use left edge calculation: leftEdge = rightEdge - currentWidth
+			const sidebarLeftEdge = sidebarRightEdge - sidebarWidth;
+			const newWidth = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, e.clientX - sidebarLeftEdge));
+			sidebarWidth = newWidth;
+		}
+	}
+
+	function handleResizeEnd() {
+		isResizing = false;
+		document.removeEventListener('mousemove', handleResizeMove);
+		document.removeEventListener('mouseup', handleResizeEnd);
+		// Save to localStorage
+		if (browser) {
+			localStorage.setItem(SIDEBAR_WIDTH_KEY, sidebarWidth.toString());
+		}
+	}
+
+	// Split panel resize handlers
+	function handleSplitResizeStart(e: MouseEvent) {
+		e.preventDefault();
+		isResizingSplit = true;
+		document.addEventListener('mousemove', handleSplitResizeMove);
+		document.addEventListener('mouseup', handleSplitResizeEnd);
+	}
+
+	function handleSplitResizeMove(e: MouseEvent) {
+		if (!isResizingSplit) return;
+		const newWidth = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, e.clientX));
+		splitPanelWidth = newWidth;
+	}
+
+	function handleSplitResizeEnd() {
+		isResizingSplit = false;
+		document.removeEventListener('mousemove', handleSplitResizeMove);
+		document.removeEventListener('mouseup', handleSplitResizeEnd);
+		// Save to localStorage
+		if (browser) {
+			localStorage.setItem(SPLIT_PANEL_WIDTH_KEY, splitPanelWidth.toString());
+		}
+	}
+
+	function closeDrawer() {
+		drawerOpen = false;
+	}
+
+	function handleTouchStart(e: TouchEvent) {
+		touchStartX = e.touches[0].clientX;
+		touchCurrentX = touchStartX;
+		isDragging = true;
+	}
+
+	function handleTouchMove(e: TouchEvent) {
+		if (!isDragging || !sidebarElement) return;
+		touchCurrentX = e.touches[0].clientX;
+		const diff = touchCurrentX - touchStartX;
+		// Only allow dragging left (negative diff)
+		if (diff < 0) {
+			sidebarElement.style.transform = `translateX(${diff}px)`;
+		}
+	}
+
+	function handleTouchEnd() {
+		if (!isDragging || !sidebarElement) return;
+		isDragging = false;
+		const diff = touchCurrentX - touchStartX;
+		// If swiped left more than 80px, close the drawer
+		if (diff < -80) {
+			closeDrawer();
+		}
+		// Reset transform to let CSS handle it
+		sidebarElement.style.transform = '';
+	}
+</script>
+
+<svelte:head>
+	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+	<meta name="apple-mobile-web-app-capable" content="yes" />
+	<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
+</svelte:head>
+
+{#if showSidebar}
+	<div class="app-shell" class:split-view={isDesktop} class:resizing-any={isResizing || isResizingSplit}>
+		<!-- Split panel (all sessions): only on desktop, LEFT side -->
+		{#if isDesktop}
+			<aside
+				class="split-panel"
+				class:resizing={isResizingSplit}
+				style="--split-panel-width: {splitPanelWidth}px"
+			>
+				<AllSessionsPanel compact />
+				<div
+					class="resize-handle"
+					onmousedown={handleSplitResizeStart}
+					role="separator"
+					aria-orientation="vertical"
+				></div>
+			</aside>
+		{/if}
+
+		<!-- Main content: CENTER -->
+		<main class="content">
+			<button class="hamburger" onclick={() => (drawerOpen = !drawerOpen)} aria-label="Toggle menu">
+				<iconify-icon icon="mdi:menu"></iconify-icon>
+			</button>
+			{@render children()}
+		</main>
+
+		<!-- Project sidebar: RIGHT on desktop, LEFT on tablet, drawer on mobile -->
+		<aside
+			class="sidebar"
+			class:open={drawerOpen}
+			class:resizing={isResizing}
+			style="--sidebar-width: {sidebarWidth}px"
+			bind:this={sidebarElement}
+			ontouchstart={handleTouchStart}
+			ontouchmove={handleTouchMove}
+			ontouchend={handleTouchEnd}
+		>
+			<!-- Left resize handle (desktop: sidebar on right) -->
+			<div
+				class="resize-handle resize-handle-left"
+				onmousedown={handleResizeStart}
+				role="separator"
+				aria-orientation="vertical"
+			></div>
+			<SessionsSidebar onSelect={closeDrawer} hideSessionsList={isDesktop} />
+			<!-- Right resize handle (tablet: sidebar on left) -->
+			<div
+				class="resize-handle resize-handle-right"
+				onmousedown={handleResizeStart}
+				role="separator"
+				aria-orientation="vertical"
+			></div>
+		</aside>
+
+		{#if drawerOpen}
+			<button class="backdrop" onclick={closeDrawer} aria-label="Close menu"></button>
+		{/if}
+	</div>
+{:else}
+	{@render children()}
+{/if}
+
+<style>
+	:global(body) {
+		margin: 0;
+		min-height: 100vh;
+	}
+
+	:global(iconify-icon) {
+		font-size: 18px;
+	}
+
+	:global(iconify-icon.spin) {
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* App shell with sidebar */
+	.app-shell {
+		display: flex;
+		height: 100vh;
+		overflow: hidden;
+	}
+
+	.app-shell.resizing-any {
+		cursor: col-resize;
+		user-select: none;
+	}
+
+	/* Split panel for desktop */
+	.split-panel {
+		width: var(--split-panel-width, 350px);
+		flex-shrink: 0;
+		background: hsl(var(--background));
+		border-right: 1px solid hsl(var(--border));
+		overflow: hidden;
+		position: relative;
+	}
+
+	.split-panel.resizing {
+		user-select: none;
+	}
+
+	.split-panel .resize-handle {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 4px;
+		height: 100%;
+		cursor: col-resize;
+		background: transparent;
+		transition: background 0.15s;
+	}
+
+	.split-panel .resize-handle:hover,
+	.split-panel.resizing .resize-handle {
+		background: color-mix(in oklch, var(--primary), transparent 50%);
+	}
+
+	.sidebar {
+		width: var(--sidebar-width, 250px);
+		flex-shrink: 0;
+		background: hsl(var(--background));
+		border-right: 1px solid hsl(var(--border));
+		overflow: hidden;
+		position: relative;
+		order: 1; /* Default: left side (tablet) */
+	}
+
+	/* Desktop: sidebar moves to right */
+	.split-view .sidebar {
+		order: 3;
+		border-right: none;
+		border-left: 1px solid hsl(var(--border));
+	}
+
+	.sidebar.resizing {
+		user-select: none;
+	}
+
+	.resize-handle {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 4px;
+		height: 100%;
+		cursor: col-resize;
+		background: transparent;
+		transition: background 0.15s;
+	}
+
+	/* Left-side resize handle (for right sidebar on desktop) */
+	.resize-handle-left {
+		right: auto;
+		left: 0;
+		display: none; /* Hidden by default (tablet/mobile) */
+	}
+
+	/* Right-side resize handle (for left sidebar on tablet) */
+	.resize-handle-right {
+		right: 0;
+		left: auto;
+		display: block; /* Shown by default (tablet) */
+	}
+
+	/* Desktop: show left handle, hide right handle on sidebar */
+	.split-view .sidebar .resize-handle-left {
+		display: block;
+	}
+
+	.split-view .sidebar .resize-handle-right {
+		display: none;
+	}
+
+	.resize-handle:hover,
+	.sidebar.resizing .resize-handle {
+		background: color-mix(in oklch, var(--primary), transparent 50%);
+	}
+
+	.content {
+		flex: 1;
+		overflow: hidden;
+		position: relative;
+		order: 2; /* Always in center */
+	}
+
+	.hamburger {
+		display: none;
+	}
+
+	.backdrop {
+		display: none;
+	}
+
+	/* Hide split panel below desktop breakpoint (CSS fallback) */
+	@media (max-width: 1199px) {
+		.split-panel {
+			display: none;
+		}
+	}
+
+	/* Mobile responsive */
+	@media (max-width: 768px) {
+		.sidebar {
+			position: fixed;
+			left: 0;
+			top: 0;
+			bottom: 0;
+			width: 100% !important;
+			z-index: 60;
+			transform: translateX(-100%);
+			transition: transform 0.2s ease;
+			background: hsl(var(--background) / 0.85);
+			backdrop-filter: blur(12px);
+			-webkit-backdrop-filter: blur(12px);
+		}
+
+		.sidebar.open {
+			transform: translateX(0);
+		}
+
+		.resize-handle {
+			display: none;
+		}
+
+		.hamburger {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: fixed;
+			top: 12px;
+			left: 12px;
+			z-index: 50;
+			width: 44px;
+			height: 44px;
+			background: hsl(var(--secondary));
+			border: none;
+			border-radius: 8px;
+			color: hsl(var(--foreground));
+			cursor: pointer;
+			font-size: 22px;
+		}
+
+		.hamburger:hover {
+			background: hsl(var(--accent));
+		}
+
+		.backdrop {
+			display: block;
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: rgba(0, 0, 0, 0.4);
+			z-index: 55;
+			border: none;
+			cursor: pointer;
+		}
+	}
+</style>

package/web/src/routes/+page.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import AllSessionsPanel from '$lib/components/AllSessionsPanel.svelte';
+</script>
+
+<svelte:head>
+	<title>claude-mux</title>
+</svelte:head>
+
+<div class="root-page">
+	<AllSessionsPanel />
+</div>
+
+<style>
+	.root-page {
+		height: 100vh;
+		max-width: 800px;
+		margin: 0 auto;
+	}
+</style>

package/web/src/routes/api/auth/login/+server.ts

@@ -0,0 +1,34 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import {
+	isAuthEnabled,
+	validatePassword,
+	createAuthToken,
+	AUTH_COOKIE
+} from '$lib/server/auth.js';
+
+export const POST: RequestHandler = async ({ request, cookies, url }) => {
+	// If auth is not enabled, just return success
+	if (!isAuthEnabled()) {
+		return json({ success: true, message: 'Auth not enabled' });
+	}
+
+	const body = await request.json().catch(() => ({}));
+	const password = body.password;
+
+	if (!password || typeof password !== 'string') {
+		return json({ error: 'Password required' }, { status: 400 });
+	}
+
+	if (!validatePassword(password)) {
+		return json({ error: 'Invalid password' }, { status: 401 });
+	}
+
+	// Create and set auth token cookie
+	const token = createAuthToken();
+	const isSecure = url.protocol === 'https:';
+
+	cookies.set(AUTH_COOKIE.name, token, AUTH_COOKIE.options(isSecure));
+
+	return json({ success: true });
+};

package/web/src/routes/api/auth/logout/+server.ts

@@ -0,0 +1,10 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { AUTH_COOKIE } from '$lib/server/auth.js';
+
+export const POST: RequestHandler = async ({ cookies }) => {
+	// Clear the auth cookie
+	cookies.delete(AUTH_COOKIE.name, { path: '/' });
+
+	return json({ success: true });
+};

package/web/src/routes/api/beads/+server.ts

@@ -0,0 +1,28 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { getBeadsIssues } from '$shared/server/ws-handlers.js';
+
+/**
+ * GET /api/beads?project=/path/to/project
+ * Returns beads issues for a project (REST fallback)
+ */
+export const GET: RequestHandler = async ({ url }) => {
+	const project = url.searchParams.get('project');
+
+	if (!project) {
+		return json({ error: 'Missing project parameter' }, { status: 400 });
+	}
+
+	try {
+		const projectPath = decodeURIComponent(project);
+		const issues = getBeadsIssues(projectPath);
+
+		return json({
+			issues,
+			project: projectPath,
+			timestamp: Date.now()
+		});
+	} catch (err) {
+		return json({ error: 'Failed to fetch beads issues' }, { status: 500 });
+	}
+};

package/web/src/routes/api/browse/+server.ts

@@ -0,0 +1,59 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { homedir } from 'os';
+import { existsSync, statSync, readdirSync } from 'fs';
+import { resolve, dirname, join } from 'path';
+
+export const GET: RequestHandler = async ({ url }) => {
+	let targetPath = url.searchParams.get('path') || homedir();
+	const showHidden = url.searchParams.get('showHidden') === 'true';
+
+	// Normalize and resolve path
+	if (targetPath.startsWith('~')) {
+		targetPath = targetPath.replace('~', homedir());
+	}
+	targetPath = resolve(targetPath);
+
+	try {
+		if (!existsSync(targetPath)) {
+			return json({ error: 'Directory not found' }, { status: 404 });
+		}
+
+		const stat = statSync(targetPath);
+		if (!stat.isDirectory()) {
+			return json({ error: 'Not a directory' }, { status: 400 });
+		}
+
+		const entries = readdirSync(targetPath, { withFileTypes: true });
+		const folders = entries
+			.filter((e) => {
+				if (!e.isDirectory()) return false;
+				if (!showHidden && e.name.startsWith('.')) return false;
+				return true;
+			})
+			.map((e) => ({
+				name: e.name,
+				path: join(targetPath, e.name)
+			}))
+			.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
+
+		const parent = dirname(targetPath);
+		const isRoot = targetPath === '/' || targetPath === parent;
+
+		return json({
+			current: targetPath,
+			parent: isRoot ? null : parent,
+			isRoot,
+			folders
+		});
+	} catch (err: unknown) {
+		const error = err as { code?: string };
+		if (error.code === 'ENOENT') {
+			return json({ error: 'Directory not found' }, { status: 404 });
+		}
+		if (error.code === 'EACCES') {
+			return json({ error: 'Permission denied' }, { status: 403 });
+		}
+		return json({ error: 'Failed to read directory' }, { status: 500 });
+	}
+};

package/web/src/routes/api/chrome/+server.ts

@@ -0,0 +1,35 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { execSync } from 'child_process';
+
+export const DELETE: RequestHandler = async () => {
+	try {
+		// Find and kill Chrome/Brave processes with remote debugging enabled
+		let killed = 0;
+		try {
+			// Find Chrome/Chromium/Brave processes with --remote-debugging (pipe or port)
+			const psOutput = execSync(
+				"ps aux | grep -E '(chrome|chromium|brave)' | grep -E 'remote-debugging-(pipe|port)' | grep -v grep | awk '{print $2}'",
+				{ encoding: 'utf-8' }
+			).trim();
+
+			if (psOutput) {
+				const pids = psOutput.split('\n').filter(Boolean);
+				for (const pid of pids) {
+					try {
+						execSync(`kill ${pid}`, { stdio: 'ignore' });
+						killed++;
+					} catch {
+						// Process may have already exited
+					}
+				}
+			}
+		} catch {
+			// No matching processes found
+		}
+
+		return json({ ok: true, killed });
+	} catch {
+		return json({ error: 'Failed to close Chrome' }, { status: 500 });
+	}
+};

package/web/src/routes/api/files/image/+server.ts

@@ -0,0 +1,64 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { existsSync, readFileSync, statSync } from 'fs';
+import { extname } from 'path';
+
+const MIME_TYPES: Record<string, string> = {
+	'.png': 'image/png',
+	'.jpg': 'image/jpeg',
+	'.jpeg': 'image/jpeg',
+	'.webp': 'image/webp',
+	'.gif': 'image/gif'
+};
+
+export const GET: RequestHandler = async ({ url }) => {
+	const path = url.searchParams.get('path');
+
+	if (!path) {
+		return json({ error: 'path parameter required' }, { status: 400 });
+	}
+
+	// Basic security: don't allow path traversal
+	if (path.includes('..')) {
+		return json({ error: 'Invalid path' }, { status: 400 });
+	}
+
+	try {
+		if (!existsSync(path)) {
+			return json({ error: 'File not found' }, { status: 404 });
+		}
+
+		const stat = statSync(path);
+		if (!stat.isFile()) {
+			return json({ error: 'Not a file' }, { status: 400 });
+		}
+
+		// Limit file size to 50MB
+		if (stat.size > 50 * 1024 * 1024) {
+			return json({ error: 'File too large' }, { status: 413 });
+		}
+
+		const ext = extname(path).toLowerCase();
+		const mimeType = MIME_TYPES[ext];
+
+		if (!mimeType) {
+			return json({ error: 'Unsupported image format' }, { status: 400 });
+		}
+
+		const content = readFileSync(path);
+
+		return new Response(content, {
+			headers: {
+				'Content-Type': mimeType,
+				'Content-Length': String(content.length),
+				'Cache-Control': 'public, max-age=300'
+			}
+		});
+	} catch (err: unknown) {
+		const e = err as { code?: string };
+		if (e.code === 'EACCES') {
+			return json({ error: 'Permission denied' }, { status: 403 });
+		}
+		return json({ error: 'Failed to read file' }, { status: 500 });
+	}
+};

package/web/src/routes/api/health/+server.ts

@@ -0,0 +1,6 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async () => {
+	return json({ status: 'ok', timestamp: Date.now() });
+};