@myrialabs/clopen 0.1.4 → 0.1.6

package/frontend/lib/components/settings/SettingsModal.svelte

@@ -83,7 +83,7 @@
 			role="dialog"
 			aria-labelledby="settings-title"
 			tabindex="-1"
-			class="flex flex-col w-full max-w-225 h-[85vh] max-h-175 bg-slate-50 dark:bg-slate-950 border border-violet-500/20 rounded-2xl overflow-hidden shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] dark:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)] max-md:max-w-full max-md:h-screen max-md:max-h-screen max-md:rounded-none"
+			class="flex flex-col w-full max-w-225 h-[85dvh] max-h-175 bg-slate-50 dark:bg-slate-950 border border-violet-500/20 rounded-2xl overflow-hidden shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] dark:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)] max-md:max-w-full max-md:h-dvh max-md:max-h-dvh max-md:rounded-none"
 			onclick={(e) => e.stopPropagation()}
 			onkeydown={(e) => e.stopPropagation()}
 			in:scale={{ duration: 250, easing: cubicOut, start: 0.95 }}
@@ -100,7 +100,7 @@
 						onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
 						aria-label="Toggle menu"
 					>
-						<Icon name={isMobileMenuOpen ? 'lucide:x' : 'lucide:menu'} class="w-5 h-5" />
+						<Icon name={isMobileMenuOpen ? 'lucide:arrow-left' : 'lucide:menu'} class="w-5 h-5" />
 					</button>
 					<h2
 						id="settings-title"

package/frontend/lib/components/settings/appearance/AppearanceSettings.svelte

@@ -1,6 +1,20 @@
 <script lang="ts">
 	import { themeStore, toggleDarkMode } from '$frontend/lib/stores/ui/theme.svelte';
+	import { settings, updateSettings, applyFontSize } from '$frontend/lib/stores/features/settings.svelte';
 	import Icon from '../../common/Icon.svelte';
+
+	const FONT_SIZE_MIN = 10;
+	const FONT_SIZE_MAX = 20;
+
+	function handleFontSizeChange(e: Event) {
+		const value = Number((e.target as HTMLInputElement).value);
+		applyFontSize(value);
+		updateSettings({ fontSize: value });
+	}
+
+	function fontSizePercent() {
+		return ((settings.fontSize - FONT_SIZE_MIN) / (FONT_SIZE_MAX - FONT_SIZE_MIN)) * 100;
+	}
 </script>
 
 <div class="py-1">
@@ -41,5 +55,50 @@
 				></span>
 			</label>
 		</div>
+
+		<!-- Font Size -->
+		<div
+			class="flex flex-col gap-3 p-4 bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200 dark:border-slate-800 rounded-xl transition-all duration-150 hover:border-violet-500/20"
+		>
+			<div class="flex items-center gap-3.5">
+				<div
+					class="flex items-center justify-center w-10 h-10 bg-violet-500/10 dark:bg-violet-500/15 rounded-lg text-violet-600 dark:text-violet-400"
+				>
+					<Icon name="lucide:type" class="w-5 h-5" />
+				</div>
+				<div class="flex flex-col gap-0.5 flex-1">
+					<div class="text-sm font-semibold text-slate-900 dark:text-slate-100">Font Size</div>
+					<div class="text-xs text-slate-600 dark:text-slate-500">Adjust the base font size of the application</div>
+				</div>
+				<div class="text-sm font-semibold text-violet-600 dark:text-violet-400 shrink-0 w-10 text-right">
+					{settings.fontSize}px
+				</div>
+			</div>
+
+			<div class="flex items-center gap-2.5 px-0.5">
+				<span class="text-xs text-slate-500 dark:text-slate-500 shrink-0">A</span>
+				<div class="relative flex-1 h-1.5">
+					<div class="absolute inset-0 bg-slate-300 dark:bg-slate-700 rounded-full"></div>
+					<div
+						class="absolute inset-y-0 left-0 bg-gradient-to-r from-violet-500 to-purple-500 rounded-full"
+						style="width: {fontSizePercent()}%"
+					></div>
+					<input
+						type="range"
+						min={FONT_SIZE_MIN}
+						max={FONT_SIZE_MAX}
+						step="1"
+						value={settings.fontSize}
+						oninput={handleFontSizeChange}
+						class="absolute inset-0 w-full opacity-0 cursor-pointer h-full"
+					/>
+					<div
+						class="absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-white border-2 border-violet-500 rounded-full shadow-sm pointer-events-none"
+						style="left: calc({fontSizePercent()}% - {fontSizePercent() / 100 * 16}px)"
+					></div>
+				</div>
+				<span class="text-base text-slate-500 dark:text-slate-500 shrink-0">A</span>
+			</div>
+		</div>
 	</div>
 </div>

package/frontend/lib/components/settings/general/GeneralSettings.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
 	import DataManagementSettings from './DataManagementSettings.svelte';
 	import AdvancedSettings from './AdvancedSettings.svelte';
+	import UpdateSettings from './UpdateSettings.svelte';
 </script>
 
-<DataManagementSettings />
+<UpdateSettings />
+
+<div class="mt-6">
+	<DataManagementSettings />
+</div>
 
 <div class="mt-6">
 	<AdvancedSettings />

package/frontend/lib/components/settings/general/UpdateSettings.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+	import { settings, updateSettings } from '$frontend/lib/stores/features/settings.svelte';
+	import { updateState, checkForUpdate, runUpdate } from '$frontend/lib/stores/ui/update.svelte';
+	import Icon from '../../common/Icon.svelte';
+
+	function toggleAutoUpdate() {
+		updateSettings({ autoUpdate: !settings.autoUpdate });
+	}
+
+	function handleCheckNow() {
+		checkForUpdate();
+	}
+
+	function handleUpdateNow() {
+		runUpdate();
+	}
+</script>
+
+<div class="py-1">
+	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">Updates</h3>
+	<p class="text-sm text-slate-600 dark:text-slate-500 mb-5">Check for new versions and configure automatic updates</p>
+
+	<div class="flex flex-col gap-3.5">
+		<!-- Version Info -->
+		<div class="p-4 bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200 dark:border-slate-800 rounded-xl">
+			<div class="flex items-start gap-3.5">
+				<div class="flex items-center justify-center w-10 h-10 rounded-lg shrink-0 bg-violet-400/15 text-violet-500">
+					<Icon name="lucide:package" class="w-5 h-5" />
+				</div>
+				<div class="flex flex-col gap-1 min-w-0 flex-1">
+					<div class="text-sm font-semibold text-slate-900 dark:text-slate-100">
+						@myrialabs/clopen
+					</div>
+					<div class="text-xs text-slate-600 dark:text-slate-500">
+						{#if updateState.currentVersion}
+							Current version: <span class="font-mono font-medium text-slate-700 dark:text-slate-400">v{updateState.currentVersion}</span>
+						{:else}
+							Version info will appear after checking
+						{/if}
+					</div>
+					{#if updateState.updateAvailable}
+						<div class="text-xs">
+							<span class="inline-flex items-center gap-1 px-1.5 py-0.5 bg-violet-500/15 text-violet-600 dark:text-violet-400 rounded text-2xs font-semibold">
+								v{updateState.latestVersion} available
+							</span>
+						</div>
+					{/if}
+				</div>
+
+				<div class="flex items-center gap-2 shrink-0">
+					{#if updateState.updateAvailable}
+						<button
+							type="button"
+							onclick={handleUpdateNow}
+							disabled={updateState.updating}
+							class="inline-flex items-center gap-1.5 py-2 px-3.5 bg-violet-500/10 border border-violet-500/20 rounded-lg text-violet-600 dark:text-violet-400 text-xs font-semibold cursor-pointer transition-all duration-150 hover:bg-violet-500/20 hover:border-violet-600/40 disabled:opacity-60 disabled:cursor-not-allowed"
+						>
+							{#if updateState.updating}
+								<div class="w-3.5 h-3.5 border-2 border-violet-600/30 border-t-violet-600 rounded-full animate-spin"></div>
+								Updating...
+							{:else}
+								<Icon name="lucide:download" class="w-3.5 h-3.5" />
+								Update
+							{/if}
+						</button>
+					{/if}
+					<button
+						type="button"
+						onclick={handleCheckNow}
+						disabled={updateState.checking}
+						class="inline-flex items-center gap-1.5 py-2 px-3.5 bg-slate-200/80 dark:bg-slate-700/80 border border-slate-300 dark:border-slate-600 rounded-lg text-slate-700 dark:text-slate-300 text-xs font-semibold cursor-pointer transition-all duration-150 hover:bg-slate-300 dark:hover:bg-slate-600 disabled:opacity-60 disabled:cursor-not-allowed"
+					>
+						{#if updateState.checking}
+							<div class="w-3.5 h-3.5 border-2 border-slate-600/30 border-t-slate-600 dark:border-slate-400/30 dark:border-t-slate-400 rounded-full animate-spin"></div>
+							Checking...
+						{:else}
+							<Icon name="lucide:refresh-cw" class="w-3.5 h-3.5" />
+							Check now
+						{/if}
+					</button>
+				</div>
+			</div>
+
+			{#if updateState.error}
+				<div class="mt-3 flex items-center gap-2 px-3 py-2 bg-red-500/10 border border-red-500/20 rounded-lg">
+					<Icon name="lucide:circle-alert" class="w-4 h-4 text-red-500 shrink-0" />
+					<span class="text-xs text-red-600 dark:text-red-400">{updateState.error}</span>
+				</div>
+			{/if}
+
+			{#if updateState.updateSuccess}
+				<div class="mt-3 flex items-center gap-2 px-3 py-2 bg-emerald-500/10 border border-emerald-500/20 rounded-lg">
+					<Icon name="lucide:circle-check" class="w-4 h-4 text-emerald-500 shrink-0" />
+					<span class="text-xs text-emerald-600 dark:text-emerald-400">Updated successfully — restart clopen to apply</span>
+				</div>
+			{/if}
+		</div>
+
+		<!-- Auto-Update Toggle -->
+		<div class="flex items-center justify-between gap-4 py-3 px-4 bg-slate-100/50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700/50 rounded-lg">
+			<div class="flex items-center gap-3">
+				<Icon name="lucide:refresh-cw" class="w-4.5 h-4.5 text-slate-600 dark:text-slate-400" />
+				<div class="text-left">
+					<div class="text-sm font-medium text-slate-900 dark:text-slate-100">Auto-update</div>
+					<div class="text-xs text-slate-600 dark:text-slate-400">Automatically install new versions when available</div>
+				</div>
+			</div>
+			<button
+				type="button"
+				role="switch"
+				aria-checked={settings.autoUpdate}
+				onclick={toggleAutoUpdate}
+				class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-violet-500/30
+					{settings.autoUpdate ? 'bg-violet-600' : 'bg-slate-300 dark:bg-slate-600'}"
+			>
+				<span
+					class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out
+						{settings.autoUpdate ? 'translate-x-5' : 'translate-x-0'}"
+				></span>
+			</button>
+		</div>
+	</div>
+</div>

package/frontend/lib/components/terminal/Terminal.svelte

@@ -284,16 +284,10 @@
 			/>
 		</div>
 	{:else}
-		<!-- No active session -->
+		<!-- No active session - will auto-connect -->
 		<div class="flex-1 flex items-center justify-center font-mono">
 			<div class="text-center text-slate-600 dark:text-slate-400">
 				<p>No terminal sessions available</p>
-				<button
-					class="mt-2 px-4 py-2 bg-violet-600 hover:bg-violet-700 text-white rounded-md transition-colors"
-					onclick={handleNewSession}
-				>
-					Create New Terminal
-				</button>
 			</div>
 		</div>
 	{/if}

package/frontend/lib/components/workspace/DesktopNavigator.svelte

@@ -7,9 +7,10 @@
 	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
 	import { openSettingsModal } from '$frontend/lib/stores/ui/settings-modal.svelte';
 	import { projectStatusService } from '$frontend/lib/services/project';
-	import { presenceState } from '$frontend/lib/stores/core/presence.svelte';
+	import { presenceState, getProjectStatusColor } from '$frontend/lib/stores/core/presence.svelte';
 	import type { Project } from '$shared/types/database/schema';
 	import { debug } from '$shared/utils/logger';
+	import { settings } from '$frontend/lib/stores/features/settings.svelte';
 	import FolderBrowser from '$frontend/lib/components/common/FolderBrowser.svelte';
 	import Dialog from '$frontend/lib/components/common/Dialog.svelte';
 	import ViewMenu from '$frontend/lib/components/workspace/ViewMenu.svelte';
@@ -30,7 +31,7 @@
 	const isCollapsed = $derived(workspaceState.navigatorCollapsed);
 	const currentProjectId = $derived(projectState.currentProject?.id);
 	const navigatorWidth = $derived(
-		workspaceState.navigatorCollapsed ? 48 : workspaceState.navigatorWidth
+		workspaceState.navigatorCollapsed ? 48 : Math.round(workspaceState.navigatorWidth * (settings.fontSize / 13))
 	);
 
 	const filteredProjects = $derived(() => {
@@ -110,18 +111,7 @@
 		}
 	}
 
-	// Get status color from presence data (single source of truth from backend)
-	// Shows real-time status for ALL projects, not just the active one.
-	// Uses backend-computed isWaitingInput so background sessions are accurate
-	// even when the frontend hasn't received their chat events.
-	function getStatusColor(projectId: string): string {
-		const status = presenceState.statuses.get(projectId);
-		if (!status?.streams) return 'bg-slate-500/30';
-		const activeStreams = status.streams.filter((s: any) => s.status === 'active');
-		if (activeStreams.length === 0) return 'bg-slate-500/30';
-		const hasWaitingInput = activeStreams.some((s: any) => s.isWaitingInput);
-		return hasWaitingInput ? 'bg-amber-500' : 'bg-emerald-500';
-	}
+	// Status color for project indicator — uses shared helper from presence store
 
 	// Close folder browser
 	function closeFolderBrowser() {
@@ -244,7 +234,7 @@
 							<div class="relative shrink-0">
 								<Icon name="lucide:folder" class="w-4 h-4" />
 								<span
-									class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-slate-50 dark:border-slate-900/95 {getStatusColor(project.id ?? '')}"
+									class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-slate-50 dark:border-slate-900/95 {getProjectStatusColor(project.id ?? '')}"
 								></span>
 							</div>
 
@@ -301,7 +291,7 @@
 			</footer>
 		{:else}
 			<!-- Collapsed State: Icon Buttons -->
-			<div class="flex-1 flex flex-col items-center gap-2 py-4 px-2">
+			<div class="flex flex-col items-center pt-4 px-2 shrink-0">
 				<button
 					type="button"
 					class="flex items-center justify-center w-9 h-9 bg-transparent border-none rounded-lg text-slate-500 cursor-pointer transition-all duration-150 relative hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100"
@@ -312,13 +302,15 @@
 				</button>
 
 				<div class="w-6 h-px bg-violet-500/10 my-1"></div>
+			</div>
 
-				{#each existingProjects.slice(0, 5) as project (project.id)}
+			<div class="flex-1 flex flex-col items-center gap-2 px-2 pb-4 min-h-0 overflow-y-auto">
+				{#each existingProjects as project (project.id)}
 					{@const projectStatus = presenceState.statuses.get(project.id ?? '')}
 					{@const activeUserCount = (projectStatus?.activeUsers || []).length}
 					<button
 						type="button"
-						class="flex items-center justify-center w-9 h-9 border-none rounded-lg cursor-pointer transition-all duration-150 relative font-semibold text-sm
+						class="flex items-center justify-center w-9 h-9 shrink-0 border-none rounded-lg cursor-pointer transition-all duration-150 relative font-semibold text-sm
 							{currentProjectId === project.id
 							? 'bg-violet-500/10 dark:bg-violet-500/20 text-violet-700 dark:text-violet-300'
 							: 'bg-slate-200/50 dark:bg-slate-800/50 text-slate-600 dark:text-slate-400 hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100'}"
@@ -327,7 +319,7 @@
 					>
 						<span>{getProjectInitials(project.name)}</span>
 						<span
-							class="absolute bottom-1 right-1 w-2.5 h-2.5 rounded-full border-2 border-slate-50 dark:border-slate-900/95 {getStatusColor(project.id ?? '')}"
+							class="absolute bottom-1 right-1 w-2.5 h-2.5 rounded-full border-2 border-slate-50 dark:border-slate-900/95 {getProjectStatusColor(project.id ?? '')}"
 						></span>
 						{#if activeUserCount > 0}
 							<span

package/frontend/lib/components/workspace/MobileNavigator.svelte

@@ -8,7 +8,7 @@
 		type PanelId
 	} from '$frontend/lib/stores/ui/workspace.svelte';
 	import { projectState, removeProject } from '$frontend/lib/stores/core/projects.svelte';
-	import { presenceState } from '$frontend/lib/stores/core/presence.svelte';
+	import { presenceState, getProjectStatusColor } from '$frontend/lib/stores/core/presence.svelte';
 	import { openSettingsModal } from '$frontend/lib/stores/ui/settings-modal.svelte';
 	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
 	import type { IconName } from '$shared/types/ui/icons';
@@ -65,18 +65,7 @@
 		}
 	}
 
-	// Get status color from presence data (single source of truth from backend)
-	// Shows real-time status for ALL projects, not just the active one.
-	// Uses backend-computed isWaitingInput so background sessions are accurate
-	// even when the frontend hasn't received their chat events.
-	function getStatusColor(projectId: string): string {
-		const status = presenceState.statuses.get(projectId);
-		if (!status?.streams) return 'bg-slate-500/30';
-		const activeStreams = status.streams.filter((s: any) => s.status === 'active');
-		if (activeStreams.length === 0) return 'bg-slate-500/30';
-		const hasWaitingInput = activeStreams.some((s: any) => s.isWaitingInput);
-		return hasWaitingInput ? 'bg-amber-500' : 'bg-emerald-500';
-	}
+	// Status color for project indicator — uses shared helper from presence store
 
 	function openAddProject() {
 		showProjectMenu = false;
@@ -162,7 +151,7 @@
 		aria-expanded={showProjectMenu}
 		aria-haspopup="menu"
 	>
-		<div class="relative shrink-0"><Icon name="lucide:folder-open" class="w-4 h-4" /><span class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-slate-100 dark:border-slate-800 {getStatusColor(projectState.currentProject?.id ?? '')}"></span></div>
+		<div class="relative shrink-0"><Icon name="lucide:folder-open" class="w-4 h-4" /><span class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-slate-100 dark:border-slate-800 {getProjectStatusColor(projectState.currentProject?.id ?? '')}"></span></div>
 		<span class="flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap">
 			{projectState.currentProject?.name ?? 'No Project'}
 		</span>
@@ -315,7 +304,7 @@
 							>
 								<Icon name="lucide:folder" class="text-violet-600 dark:text-violet-400 w-4 h-4" />
 								<span
-									class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-white dark:border-slate-900 {getStatusColor(project.id ?? '')}"
+									class="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-white dark:border-slate-900 {getProjectStatusColor(project.id ?? '')}"
 								></span>
 							</div>
 							<div class="flex-1 min-w-0">

package/frontend/lib/components/workspace/WorkspaceLayout.svelte

@@ -138,7 +138,7 @@
 
 <!-- Main Workspace Layout -->
 <div
-	class="h-screen w-screen overflow-hidden {isMobile ? 'bg-white/90 dark:bg-slate-900/98' : 'bg-slate-50 dark:bg-slate-900/70'} text-slate-900 dark:text-slate-100 font-sans"
+	class="h-full w-full overflow-hidden {isMobile ? 'bg-white/90 dark:bg-slate-900/98' : 'bg-slate-50 dark:bg-slate-900/70'} text-slate-900 dark:text-slate-100 font-sans"
 >
 	<!-- Skip link for accessibility -->
 	<a

package/frontend/lib/components/workspace/panels/FilesPanel.svelte

@@ -12,6 +12,7 @@
 	import Dialog from '$frontend/lib/components/common/Dialog.svelte';
 	import type { FileNode } from '$shared/types/filesystem';
 	import { debug } from '$shared/utils/logger';
+	import { settings } from '$frontend/lib/stores/features/settings.svelte';
 	import { onMount, onDestroy } from 'svelte';
 	import ws from '$frontend/lib/utils/ws';
 	import { showConfirm } from '$frontend/lib/stores/ui/dialog.svelte';
@@ -138,7 +139,7 @@
 	// Container width detection for 2-column layout
 	let containerRef = $state<HTMLDivElement | null>(null);
 	let containerWidth = $state(0);
-	const TWO_COLUMN_THRESHOLD = 800;
+	const TWO_COLUMN_THRESHOLD = $derived(Math.round(600 * (settings.fontSize / 13)));
 
 	// FileTree ref
 	let fileTreeRef = $state<any>(null);
@@ -1185,7 +1186,7 @@
 				<!-- Tree panel: always rendered, hidden via CSS in 1-column viewer mode -->
 				<div
 					class={isTwoColumnMode
-						? 'w-80 flex-shrink-0 h-full overflow-hidden border-r border-slate-200 dark:border-slate-700'
+						? 'w-72 flex-shrink-0 h-full overflow-hidden border-r border-slate-200 dark:border-slate-700'
 						: (viewMode === 'tree' ? 'w-full h-full overflow-hidden' : 'hidden')}
 				>
 					<div class="h-full overflow-auto" bind:this={treeScrollContainer}>

package/frontend/lib/components/workspace/panels/GitPanel.svelte

@@ -5,6 +5,7 @@
 	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
 	import { showError, showInfo } from '$frontend/lib/stores/ui/notification.svelte';
 	import { debug } from '$shared/utils/logger';
+	import { settings } from '$frontend/lib/stores/features/settings.svelte';
 	import ws from '$frontend/lib/utils/ws';
 	import { getFileIcon } from '$frontend/lib/utils/file-icon-mappings';
 	import { getGitStatusLabel, getGitStatusColor } from '$frontend/lib/utils/git-status';
@@ -131,7 +132,7 @@
 	// Container width for responsive layout (same threshold as Files: 800)
 	let containerRef = $state<HTMLDivElement | null>(null);
 	let containerWidth = $state(0);
-	const TWO_COLUMN_THRESHOLD = 800;
+	const TWO_COLUMN_THRESHOLD = $derived(Math.round(600 * (settings.fontSize / 13)));
 	const isTwoColumnMode = $derived(containerWidth >= TWO_COLUMN_THRESHOLD);
 
 	// Track last project for re-fetch
@@ -1504,7 +1505,7 @@
 				<!-- Left panel: Changes list (w-80 like Files panel tree) -->
 				<div
 					class={isTwoColumnMode
-						? 'w-80 flex-shrink-0 h-full overflow-hidden border-r border-slate-200 dark:border-slate-700 flex flex-col'
+						? 'w-72 flex-shrink-0 h-full overflow-hidden border-r border-slate-200 dark:border-slate-700 flex flex-col'
 						: (viewMode === 'list' ? 'w-full h-full overflow-hidden flex flex-col' : 'hidden')}
 				>
 					{@render changesList()}

package/frontend/lib/services/notification/global-stream-monitor.ts

@@ -3,12 +3,13 @@
  *
  * Single source of truth for chat stream notifications (sound + push).
  *
- * Listens for chat:stream-finished events from the backend and triggers
- * notifications for ALL projects — both active and non-active.
+ * Listens for backend events and triggers notifications for ALL projects —
+ * both active and non-active:
+ * - chat:stream-finished  → stream completed/errored/cancelled
+ * - chat:waiting-input    → AskUserQuestion requires user input
  *
- * The backend uses ws.emit.projectMembers() to send this event to all
- * users who have been associated with the project, even if they switched
- * to a different project.
+ * The backend uses ws.emit.projectMembers() so notifications reach users
+ * even when they are on a different project or session.
  */
 
 import { soundNotification, pushNotification } from '$frontend/lib/services/notification';
@@ -19,27 +20,27 @@ import ws from '$frontend/lib/utils/ws';
 class GlobalStreamMonitor {
   private initialized = false;
 
+  /** Track notified AskUserQuestion tool_use IDs to ensure once-only notification */
+  private notifiedToolUseIds = new Set<string>();
+
   /**
-   * Initialize the monitor - subscribes to the WS event.
+   * Initialize the monitor - subscribes to WS events.
    * Safe to call multiple times (idempotent).
-   *
-   * Triggers sound/push for ALL projects the user is a member of,
-   * not just the active one — background streams deserve notifications too.
    */
   initialize(): void {
     if (this.initialized) return;
     this.initialized = true;
 
-    debug.log('notification', 'GlobalStreamMonitor: Initializing WS listener');
+    debug.log('notification', 'GlobalStreamMonitor: Initializing WS listeners');
 
+    // Stream finished — notify on completion
     ws.on('chat:stream-finished', async (data) => {
-      const { projectId, status, timestamp } = data;
+      const { projectId, status, chatSessionId } = data;
+
+      debug.log('notification', 'GlobalStreamMonitor: Stream finished', { projectId, status });
 
-      debug.log('notification', 'GlobalStreamMonitor: Stream finished', {
-        projectId,
-        status,
-        timestamp
-      });
+      // Clean up notified IDs for this session (stream is done)
+      this.clearSessionNotifications(chatSessionId);
 
       // Play sound notification
       try {
@@ -63,12 +64,51 @@ class GlobalStreamMonitor {
         debug.error('notification', 'Error sending push notification:', error);
       }
     });
+
+    // Waiting for input — notify once per AskUserQuestion
+    ws.on('chat:waiting-input', async (data) => {
+      const { projectId, chatSessionId, toolUseId } = data;
+
+      // Deduplicate: only notify once per tool_use ID
+      if (this.notifiedToolUseIds.has(toolUseId)) return;
+      this.notifiedToolUseIds.add(toolUseId);
+
+      debug.log('notification', 'GlobalStreamMonitor: Waiting for input', { projectId, chatSessionId, toolUseId });
+
+      // Play sound notification
+      try {
+        await soundNotification.play();
+      } catch (error) {
+        debug.error('notification', 'Error playing sound notification:', error);
+      }
+
+      // Send push notification
+      try {
+        const projectName = projectState.projects.find(p => p.id === projectId)?.name || 'Unknown';
+        await pushNotification.sendChatComplete(`Waiting for your input in "${projectName}"`);
+      } catch (error) {
+        debug.error('notification', 'Error sending push notification:', error);
+      }
+    });
+  }
+
+  /**
+   * Remove tracked tool_use IDs for a finished session
+   */
+  private clearSessionNotifications(chatSessionId: string): void {
+    // Tool IDs are globally unique, so a simple clear-on-stream-finish
+    // is enough — they won't collide across sessions.
+    // For long-running apps, periodically trim to avoid unbounded growth.
+    if (this.notifiedToolUseIds.size > 500) {
+      this.notifiedToolUseIds.clear();
+    }
   }
 
   /**
    * Clear state (for cleanup/testing)
    */
   clear(): void {
+    this.notifiedToolUseIds.clear();
     debug.log('notification', 'GlobalStreamMonitor: Clearing state');
   }
 }