diff --git a/src/lib/components/AnnouncementDialog.svelte b/src/lib/components/AnnouncementDialog.svelte
index ed18c7d..fa67d85 100644
--- a/src/lib/components/AnnouncementDialog.svelte
+++ b/src/lib/components/AnnouncementDialog.svelte
@@ -84,10 +84,11 @@
 {#if visible}
 	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 	<div
-		class="fixed inset-0 z-[9999] flex items-center justify-center p-4 sm:p-6 md:p-8"
+		class="fixed inset-0 z-9999 flex items-center justify-center p-4 sm:p-6 md:p-8"
 		role="dialog"
 		aria-modal="true"
 		aria-labelledby="announcement-title"
+		tabindex="0"
 		onclick={(e) => {
 			// Close on backdrop click
 			if (e.target === e.currentTarget) dismiss();
@@ -109,7 +110,7 @@
 			class:scale-95={!animating}
 		>
 			<!-- Colored top border accent -->
-			<div class="h-1.5 w-full {currentStyles().border}" />
+			<div class="h-1.5 w-full {currentStyles().border}"></div>
 
 			<div class="p-6 sm:p-8">
 				<!-- Close button -->
diff --git a/src/lib/components/RemoteShellConfirmDialog.svelte b/src/lib/components/RemoteShellConfirmDialog.svelte
new file mode 100644
index 0000000..240f0f9
--- /dev/null
+++ b/src/lib/components/RemoteShellConfirmDialog.svelte
@@ -0,0 +1,318 @@
+<script lang="ts">
+	import {
+		remoteShellRequest,
+		confirmRemoteShell,
+		rejectRemoteShell
+	} from '$lib/core/stores/remoteShellStore';
+	import type { RemoteShellRequest } from '$lib/core/stores/remoteShellStore';
+	import {
+		XIcon,
+		AlertTriangleIcon,
+		CheckCircle2Icon,
+		LoaderCircleIcon,
+		TerminalIcon,
+		ClockIcon
+	} from '@lucide/svelte/icons';
+	import { onMount, onDestroy } from 'svelte';
+
+	let current = $state<RemoteShellRequest | null>(null);
+	let animating = $state(false);
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			const req = current;
+			if (req?.status === 'pending') {
+				rejectRemoteShell();
+			}
+		}
+	}
+
+	let unsub: (() => void) | undefined;
+
+	onMount(() => {
+		unsub = remoteShellRequest.subscribe((req) => {
+			if (req) {
+				current = req;
+				requestAnimationFrame(() => {
+					animating = true;
+				});
+			} else {
+				animating = false;
+				setTimeout(() => {
+					current = null;
+				}, 200);
+			}
+		});
+		// if (window) window.addEventListener('keydown', handleKeydown);
+	});
+
+	onDestroy(() => {
+		unsub?.();
+		// if (window) window.removeEventListener('keydown', handleKeydown);
+	});
+
+	function formatTimestamp(ts: number) {
+		return new Date(ts).toLocaleTimeString();
+	}
+</script>
+
+{#if current}
+	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0 z-[9998] flex items-center justify-center p-4 sm:p-6 md:p-8"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="remote-shell-title"
+		onclick={(e) => {
+			if (e.target === e.currentTarget && current?.status === 'pending') {
+				rejectRemoteShell();
+			}
+		}}
+	>
+		<!-- Backdrop -->
+		<div
+			class="absolute inset-0 bg-black/60 backdrop-blur-lg transition-opacity duration-200"
+			class:opacity-100={animating}
+			class:opacity-0={!animating}
+		></div>
+
+		<!-- Card -->
+		<div
+			class="relative w-full max-w-lg overflow-hidden rounded-2xl border bg-white shadow-2xl transition-all duration-200 dark:border-neutral-700 dark:bg-neutral-900"
+			class:opacity-100={animating}
+			class:opacity-0={!animating}
+			class:scale-100={animating}
+			class:scale-95={!animating}
+		>
+			<!-- Status accent border -->
+			<div
+				class="h-1.5 w-full"
+				class:bg-amber-500={current.status === 'pending'}
+				class:bg-blue-500={current.status === 'executing'}
+				class:bg-green-500={current.status === 'completed' && !current.timedOut}
+				class:bg-orange-500={current.timedOut}
+				class:bg-red-500={(current.status === 'rejected' || current.status === 'failed') &&
+					!current.timedOut}
+			></div>
+
+			<div class="p-6 sm:p-8">
+				<!-- Close button (only when not pending) -->
+				{#if current.status !== 'pending' && current.status !== 'executing'}
+					<button
+						onclick={() => remoteShellRequest.set(null)}
+						class="absolute top-4 right-4 rounded-full p-1.5 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600 dark:hover:bg-neutral-800 dark:hover:text-neutral-300"
+						aria-label="Close"
+					>
+						<XIcon size={20} />
+					</button>
+				{/if}
+
+				<!-- Status icon + title -->
+				<div class="mb-4 flex items-center gap-3">
+					{#if current.status === 'pending'}
+						<div
+							class="flex h-10 w-10 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/50"
+						>
+							<AlertTriangleIcon size={22} class="text-amber-600 dark:text-amber-400" />
+						</div>
+						<div>
+							<h2
+								id="remote-shell-title"
+								class="text-lg font-bold text-neutral-900 dark:text-white"
+							>
+								Remote Shell Command
+							</h2>
+							<p class="text-sm text-neutral-500 dark:text-neutral-400">
+								A remote user wants to run a command on your device
+							</p>
+						</div>
+					{:else if current.status === 'executing'}
+						<div
+							class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/50"
+						>
+							<LoaderCircleIcon size={22} class="animate-spin text-blue-600 dark:text-blue-400" />
+						</div>
+						<div>
+							<h2
+								id="remote-shell-title"
+								class="text-lg font-bold text-neutral-900 dark:text-white"
+							>
+								Executing Command...
+							</h2>
+							<p class="text-sm text-neutral-500 dark:text-neutral-400">
+								Running on your connected Android device
+								{#if current.timeoutSeconds}
+									· auto-cancels after {current.timeoutSeconds}s
+								{/if}
+							</p>
+						</div>
+					{:else if current.status === 'completed' && !current.timedOut}
+						<div
+							class="flex h-10 w-10 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/50"
+						>
+							<CheckCircle2Icon size={22} class="text-green-600 dark:text-green-400" />
+						</div>
+						<div>
+							<h2
+								id="remote-shell-title"
+								class="text-lg font-bold text-neutral-900 dark:text-white"
+							>
+								Command Completed
+							</h2>
+							<p class="text-sm text-neutral-500 dark:text-neutral-400">
+								Output sent back to server
+							</p>
+						</div>
+					{:else if current.timedOut}
+						<div
+							class="flex h-10 w-10 items-center justify-center rounded-full bg-orange-100 dark:bg-orange-900/50"
+						>
+							<ClockIcon size={22} class="text-orange-600 dark:text-orange-400" />
+						</div>
+						<div>
+							<h2
+								id="remote-shell-title"
+								class="text-lg font-bold text-neutral-900 dark:text-white"
+							>
+								Command Timed Out
+							</h2>
+							<p class="text-sm text-neutral-500 dark:text-neutral-400">
+								Aborted after {current.timeoutSeconds ?? '?'}s — partial output sent back
+							</p>
+						</div>
+					{:else}
+						<div
+							class="flex h-10 w-10 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/50"
+						>
+							<XIcon size={22} class="text-red-600 dark:text-red-400" />
+						</div>
+						<div>
+							<h2
+								id="remote-shell-title"
+								class="text-lg font-bold text-neutral-900 dark:text-white"
+							>
+								{current.status === 'rejected' ? 'Command Rejected' : 'Command Failed'}
+							</h2>
+							<p class="text-sm text-neutral-500 dark:text-neutral-400">
+								{current.status === 'rejected'
+									? 'You chose not to run this command'
+									: 'An error occurred'}
+							</p>
+						</div>
+					{/if}
+				</div>
+
+				<!-- Purpose declaration -->
+				{#if current.purposeDeclaration}
+					<div class="mb-4 rounded-lg bg-neutral-50 p-4 dark:bg-neutral-800/50">
+						<p
+							class="mb-1 text-xs font-semibold tracking-wider text-neutral-500 uppercase dark:text-neutral-400"
+						>
+							Purpose
+						</p>
+						<p class="text-sm whitespace-pre-wrap text-neutral-800 dark:text-neutral-200">
+							{current.purposeDeclaration}
+						</p>
+					</div>
+				{/if}
+
+				<!-- Command (monospace block) -->
+				<div class="mb-4 rounded-lg bg-neutral-900 p-4 dark:bg-black">
+					<p class="mb-2 text-xs font-semibold tracking-wider text-neutral-400 uppercase">
+						<TerminalIcon size={14} class="mr-1 inline" />
+						Command
+						{#if current.timeoutSeconds}
+							<span
+								class="ml-3 inline-flex items-center gap-1 rounded bg-neutral-700 px-2 py-0.5 text-amber-300"
+							>
+								<ClockIcon size={11} />
+								Timeout: {current.timeoutSeconds}s
+							</span>
+						{/if}
+					</p>
+					<pre
+						class="max-h-40 overflow-x-auto overflow-y-auto font-mono text-sm break-all whitespace-pre-wrap text-green-400">{current.commandInput}</pre>
+				</div>
+
+				<!-- Requestor Info -->
+				{#if current.userInfo}
+					<div class="mb-4 text-xs text-neutral-500 dark:text-neutral-400">
+						<span class="font-semibold">Requested by:</span>
+						{current.userInfo.displayName ??
+							current.userInfo.email ??
+							current.userInfo.uid ??
+							'Unknown'}
+						{#if current.userInfo.email}
+							<span class="mx-1">·</span>
+							{current.userInfo.email}
+						{/if}
+					</div>
+				{/if}
+
+				<!-- Output / Error (shown when done) -->
+				{#if (current.status === 'completed' || current.status === 'failed') && current.output}
+					<div
+						class="mb-4 max-h-48 overflow-y-auto rounded-lg bg-neutral-50 p-4 dark:bg-neutral-800/50"
+					>
+						<p
+							class="mb-1 text-xs font-semibold tracking-wider text-neutral-500 uppercase dark:text-neutral-400"
+						>
+							Output
+						</p>
+						<pre
+							class="font-mono text-sm break-all whitespace-pre-wrap text-neutral-700 dark:text-neutral-300">{current.output}</pre>
+					</div>
+				{/if}
+
+				{#if current.status === 'failed' && current.error}
+					<div class="mb-4 max-h-32 overflow-y-auto rounded-lg bg-red-50 p-4 dark:bg-red-900/20">
+						<p
+							class="mb-1 text-xs font-semibold tracking-wider text-red-600 uppercase dark:text-red-400"
+						>
+							Error
+						</p>
+						<pre
+							class="font-mono text-sm break-all whitespace-pre-wrap text-red-700 dark:text-red-300">{current.error}</pre>
+					</div>
+				{/if}
+
+				<!-- Timestamp -->
+				<div class="mb-5 text-xs text-neutral-400 dark:text-neutral-500">
+					{formatTimestamp(current.timestamp)}
+					{#if current.exitCode !== undefined}
+						<span class="ml-3">
+							Exit code: <span class="font-mono">{current.exitCode}</span>
+						</span>
+					{/if}
+				</div>
+
+				<!-- Action buttons -->
+				{#if current.status === 'pending'}
+					<div class="flex justify-end gap-3">
+						<button
+							onclick={rejectRemoteShell}
+							class="inline-flex items-center justify-center rounded-lg border border-neutral-300 bg-white px-5 py-2.5 text-sm font-semibold text-neutral-700 shadow-sm transition-colors hover:bg-neutral-50 focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:outline-none dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
+						>
+							Reject
+						</button>
+						<button
+							onclick={confirmRemoteShell}
+							class="inline-flex items-center justify-center rounded-lg bg-neutral-900 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-neutral-800 focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:outline-none dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-200"
+						>
+							Confirm & Run
+						</button>
+					</div>
+				{/if}
+
+				{#if current.status === 'executing'}
+					<div
+						class="flex items-center justify-center gap-2 text-sm text-neutral-500 dark:text-neutral-400"
+					>
+						<LoaderCircleIcon size={16} class="animate-spin" />
+						Running...
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/components/app-account-select.svelte b/src/lib/components/app-account-select.svelte
index 83d8428..a51e346 100644
--- a/src/lib/components/app-account-select.svelte
+++ b/src/lib/components/app-account-select.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 
@@ -41,7 +42,7 @@
 				// await adb.executeCmd('reboot');
 				await adb.disconnect();
 			} catch (e) {
-				console.error('error disconnect device while logging out', e);
+				logger.error('error disconnect device while logging out', e);
 			}
 		}
 
@@ -53,7 +54,7 @@
 		try {
 			socket?.close(1000, 'logout');
 		} catch (e) {
-			console.log('error on disconnect', e);
+			logger.info('error on disconnect', e);
 		}
 
 		socketStore.set(null);
diff --git a/src/lib/components/app-sidebar.svelte b/src/lib/components/app-sidebar.svelte
index 34de1f0..8e71838 100644
--- a/src/lib/components/app-sidebar.svelte
+++ b/src/lib/components/app-sidebar.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import * as Sidebar from '$lib/components/ui/sidebar/index';
 	import { onDestroy, type ComponentProps } from 'svelte';
 	import { asset } from '$app/paths';
@@ -167,7 +168,7 @@
 					isAdmin = result;
 				})
 				.catch((e) => {
-					console.error('Error checking admin status:', e);
+					logger.error('Error checking admin status:', e);
 					isAdmin = false;
 				});
 		} else {
diff --git a/src/lib/components/dashboard-quick-adb.svelte b/src/lib/components/dashboard-quick-adb.svelte
index 452fb94..563019c 100644
--- a/src/lib/components/dashboard-quick-adb.svelte
+++ b/src/lib/components/dashboard-quick-adb.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { Button, type ButtonVariant } from './ui/button';
 	import * as Card from './ui/card/index';
 	import Spinner from '$lib/components/ui/spinner/spinner.svelte';
@@ -158,19 +159,19 @@
 
 				if (result) {
 					if (result === '') {
-						console.log('push pull not ok, get empty');
+						logger.info('push pull not ok, get empty');
 					} else {
-						console.log('push pull ok', result);
+						logger.info('push pull ok', result);
 					}
 				} else {
-					console.log('push pull not ok', result);
+					logger.info('push pull not ok', result);
 				}
 
 				// clean file
 				await adb.executeCmd('rm /sdcard/coffeevending/test.json');
 			}
 		} catch (error) {
-			console.log('test push file failed', error);
+			logger.info('test push file failed', error);
 		}
 	}
 
@@ -200,7 +201,7 @@
 				} catch (ignored) {}
 			}
 
-			console.log('error on quick adb: ', e);
+			logger.info('error on quick adb: ', e);
 			toast.error(`Machine Connection Error`, {
 				description: e.toString()
 			});
@@ -246,7 +247,7 @@
 				connectDeviceOk = false;
 			}
 		} catch (e: any) {
-			console.log('error on quick adb: ', e);
+			logger.info('error on quick adb: ', e);
 			toast.error(`Machine Connection Error`, {
 				description: e.toString()
 			});
@@ -279,12 +280,12 @@
 					break;
 				}
 			} catch (e) {
-				console.log('check stored error', e);
+				logger.info('check stored error', e);
 			}
 
 			hasStoredDevice = devices.length > 0 && hasKeys;
 		} catch (e) {
-			console.error('check stored error', e);
+			logger.error('check stored error', e);
 			hasStoredDevice = false;
 		}
 	}
@@ -332,7 +333,7 @@
 				return false;
 			}
 		} catch (e: any) {
-			console.log('error on auto connect adb: ', e);
+			logger.info('error on auto connect adb: ', e);
 			toast.error(`Machine Connection Error`, {
 				description: e.toString()
 			});
diff --git a/src/lib/components/dashboard.svelte b/src/lib/components/dashboard.svelte
index 4cd31e5..28ff663 100644
--- a/src/lib/components/dashboard.svelte
+++ b/src/lib/components/dashboard.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { messages as WSMsg } from '$lib/core/handlers/messageHandler';
 	import * as Card from './ui/card/index';
 	import { ScrollArea } from './ui/scroll-area/index';
@@ -42,7 +43,7 @@
 		unsubWebSocketMsg();
 	});
 
-	console.log('current department: ', get(departmentStore));
+	logger.info('current department: ', get(departmentStore));
 </script>
 
 <div class="grid grid-flow-row-dense grid-cols-3 grid-rows-3">
diff --git a/src/lib/components/machine-info.svelte b/src/lib/components/machine-info.svelte
index d4b16ea..df03378 100644
--- a/src/lib/components/machine-info.svelte
+++ b/src/lib/components/machine-info.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { Button, type ButtonVariant } from './ui/button';
 	import * as Card from './ui/card/index';
 	import Spinner from '$lib/components/ui/spinner/spinner.svelte';
@@ -15,7 +16,7 @@
 	let infoMap: any | undefined = $state();
 
 	let unsubMachineInfo = machineInfoStore.subscribe((mInfo) => {
-		console.log('get info', JSON.stringify(mInfo));
+		logger.info('get info', JSON.stringify(mInfo));
 		// check status web socket
 
 		currentMachineInfo = mInfo;
diff --git a/src/lib/components/recipe-details/columns.ts b/src/lib/components/recipe-details/columns.ts
index db81e79..0af9981 100644
--- a/src/lib/components/recipe-details/columns.ts
+++ b/src/lib/components/recipe-details/columns.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 // {
 //   "MixOrder": 0,
 //   "StringParam": "",
@@ -21,7 +22,8 @@ import RecipelistValue from './recipelist-value.svelte';
 import { DragHandle } from './recipelist-table.svelte';
 import { createRawSnippet } from 'svelte';
 import RecipelistMatSelect from './recipelist-mat-select.svelte';
-import { recipeDataEvent } from '$lib/core/stores/recipeStore';
+import { GlobalEventBus } from '$lib/core/utils/eventBus';
+import { RECIPE_EVENTS } from './recipe-editor-events';
 import RecipelistValueEditor from './recipelist-value-editor.svelte';
 
 export type RecipelistMaterial = {
@@ -92,10 +94,9 @@ export const columns: ColumnDef<RecipelistMaterial>[] = [
 				currentMat: row.original.material_id,
 				onMatChange: (value: any) => {
 					row.original.material_id = value;
-					console.log('change mat', value);
-					recipeDataEvent.set({
-						event_type: 'mat_change',
-						payload: value,
+					logger.info('change mat', value);
+					GlobalEventBus.emit(RECIPE_EVENTS.MAT_CHANGE, {
+						mat_id: value,
 						index: row.original.id
 					});
 					row.toggleSelected(row.original.is_use);
@@ -112,10 +113,9 @@ export const columns: ColumnDef<RecipelistMaterial>[] = [
 				row_uid: row.original.id,
 				mat_id: row.original.material_id,
 				onEditValue: (changes: any) => {
-					// console.log('triggered on edit value', changes);
+					// logger.info('triggered on edit value', changes);
 
-					recipeDataEvent.set({
-						event_type: 'edit_change_value_rpl',
+					GlobalEventBus.emit(RECIPE_EVENTS.EDIT_CHANGE_VALUE_RPL, {
 						payload: JSON.parse(changes),
 						index: row.original.id
 					});
diff --git a/src/lib/components/recipe-details/recipe-detail.svelte b/src/lib/components/recipe-details/recipe-detail.svelte
index 0c817cd..71fd2b6 100644
--- a/src/lib/components/recipe-details/recipe-detail.svelte
+++ b/src/lib/components/recipe-details/recipe-detail.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import * as Tabs from '$lib/components/ui/tabs/index';
 	import * as Card from '$lib/components/ui/card/index';
 	import Label from '$lib/components/ui/label/label.svelte';
@@ -54,7 +55,8 @@
 	let materialSnapshot: any = $state();
 	let machineInfoSnapshot: any = $state();
 
-	let recipeListMatState: RecipelistMaterial[] = $state([]);
+	let activeTab = $state('info');
+
 	let recipeListOriginal: RecipelistMaterial[] = $state([]);
 
 	let toppingSlotState: any = $state([]);
@@ -63,61 +65,52 @@
 
 	const recipeDetailDispatch = createEventDispatcher();
 
-	function remappingToColumn(data: any[]): RecipelistMaterial[] {
-		let ret: RecipelistMaterial[] = [];
-		// expect recipelist
-		if (materialSnapshot) {
-			let d_cnt = 0;
-			for (let rpl of data) {
-				let mat = materialSnapshot.filter(
-					(x: any) => x['id'].toString() === rpl['materialPathId'].toString()
-				)[0];
+	/** Map-based material lookup — O(1) instead of O(n) Array.filter per row. */
+	function remappingToColumn(data: any[] | undefined, materials: any[] | undefined): RecipelistMaterial[] {
+		if (!data || data.length === 0) return [];
 
-				// console.log('mat filter get', Object(mat), Object.keys(mat));
-
-				let name = mat ? mat['materialOtherName'] : rpl['materialPathId'];
-
-				if (rpl['materialPathId'] === 0) {
-					name = '-';
-				}
-
-				// let gen_id = generateRowId();
-
-				// console.log(`generated for ${rpl['materialPathId']} = ${gen_id}`);
-
-				ret.push({
-					id: d_cnt,
-					material_id: `${name} (${rpl['materialPathId']})`,
-					is_use: rpl['isUse'],
-					values: {
-						string_param: rpl['StringParam'],
-						mix_order: rpl['MixOrder'],
-						stir_time: rpl['stirTime'],
-						feed: {
-							pattern: rpl['FeedPattern'],
-							parameter: rpl['FeedParameter']
-						},
-						powder: {
-							gram: rpl['powderGram'],
-							time: rpl['powderTime']
-						},
-						syrup: {
-							gram: rpl['syrupGram'],
-							time: rpl['syrupTime']
-						},
-						water: {
-							cold: rpl['waterCold'],
-							yield: rpl['waterYield']
-						}
-					}
-				});
-				d_cnt++;
+		// Build Map<materialId_str, material> once for O(1) lookups
+		const matMap = new Map<string, any>();
+		if (materials) {
+			for (const mat of materials) {
+				matMap.set(mat.id.toString(), mat);
 			}
 		}
 
+		const ret: RecipelistMaterial[] = [];
+		for (let d_cnt = 0; d_cnt < data.length; d_cnt++) {
+			const rpl = data[d_cnt];
+			const mat = matMap.get(rpl['materialPathId'].toString());
+
+			let name = mat ? mat['materialOtherName'] : rpl['materialPathId'];
+			if (rpl['materialPathId'] === 0) {
+				name = '-';
+			}
+
+			ret.push({
+				id: d_cnt,
+				material_id: `${name} (${rpl['materialPathId']})`,
+				is_use: rpl['isUse'],
+				values: {
+					string_param: rpl['StringParam'],
+					mix_order: rpl['MixOrder'],
+					stir_time: rpl['stirTime'],
+					feed: { pattern: rpl['FeedPattern'], parameter: rpl['FeedParameter'] },
+					powder: { gram: rpl['powderGram'], time: rpl['powderTime'] },
+					syrup: { gram: rpl['syrupGram'], time: rpl['syrupTime'] },
+					water: { cold: rpl['waterCold'], yield: rpl['waterYield'] }
+				}
+			});
+		}
+
 		return ret;
 	}
 
+	/** Reactively build recipe-list table data when inputs change. */
+	const recipeListMatState: RecipelistMaterial[] = $derived(
+		remappingToColumn(recipeData?.recipes, materialSnapshot)
+	);
+
 	async function getCurrentQueue() {
 		let inst = adb.getAdbInstance();
 		if (inst) {
@@ -129,7 +122,7 @@
 			}
 
 			let current_brewing = await adb.pull(currentRecipePath);
-			// console.log(`current brewing queue: ${current_brewing}`);
+			// logger.info(`current brewing queue: ${current_brewing}`);
 			if (current_brewing === '') {
 				current_brewing = '{}';
 			}
@@ -159,7 +152,7 @@
 	async function sendTriggerBrewNow() {
 		// check queue ready
 		// let currentBrewingQueue = await getCurrentQueue();
-		// console.log('checking queue ... ', Object.keys(currentBrewingQueue).length);
+		// logger.info('checking queue ... ', Object.keys(currentBrewingQueue).length);
 
 		await sendToAndroid({
 			type: 'brew_prep',
@@ -176,10 +169,10 @@
 		//
 		let inst = adb.getAdbInstance();
 		if (inst) {
-			console.log('check adb writer', isAdbWriterAvailable());
+			logger.info('check adb writer', isAdbWriterAvailable());
 			recipeDetailDispatch('brewNow');
 		} else {
-			console.log('result check fail');
+			logger.info('result check fail');
 		}
 	}
 
@@ -200,7 +193,7 @@
 	}
 
 	async function checkChanges(productCode: string, original: any) {
-		// console.log('old', original, 'updated', recipeListMatState);
+		// logger.info('old', original, 'updated', recipeListMatState);
 		if (recipeListOriginal.length == 0) {
 			recipeListOriginal = original;
 		}
@@ -246,8 +239,6 @@
 			} else if (refPage == 'brew') {
 				materialSnapshot = get(materialFromMachineQuery);
 			}
-
-			recipeListMatState = remappingToColumn(recipeData['recipes']);
 			toppingSlotState = recipeData['ToppingSet'];
 
 			latestRecipeToppingData.set(toppingSlotState);
@@ -257,12 +248,12 @@
 			let currentPricesFromServer = get(priceRecipeData);
 			let currentPrice = currentPricesFromServer[productCode] ?? '';
 
-			console.log(currentPricesFromServer);
+			logger.info(currentPricesFromServer);
 
 			if (currentPrice != '') {
 				// has price
 				let priceParts = currentPrice.split(',');
-				console.log('price part', priceParts);
+				logger.info('price part', priceParts);
 				try {
 					let price = parseInt(priceParts[0]);
 					let extraParam: string = priceParts[1] ?? '';
@@ -271,7 +262,7 @@
 						isMenuHideByPrice = extraParam.includes('hide=true');
 					}
 
-					console.log('hide = ', extraParam);
+					logger.info('hide = ', extraParam);
 
 					menuCurrentPrice = price;
 
@@ -304,7 +295,7 @@
 <!-- Menu Status -->
 
 <div class="-mb-4 flex w-full flex-col gap-6">
-	<Tabs.Root value="info">
+	<Tabs.Root bind:value={activeTab}>
 		<div class="flex flex-row justify-between">
 			<Tabs.List>
 				<Tabs.Trigger value="info">Info</Tabs.Trigger>
@@ -434,25 +425,28 @@
 		</Tabs.Content>
 
 		<Tabs.Content value="details">
-			<!-- hide by machine state -->
+			<!-- Lazy-mount: RecipelistTable + sub-components only render when user clicks this tab -->
+			{#if activeTab === 'details'}
+				<!-- hide by machine state -->
 
-			{#if $machineInfoStore?.status == 'IDLE' || $machineInfoStore?.status == '' || refPage == 'overview'}
-				<RecipelistTable
-					data={recipeListMatState}
-					{columns}
-					onStateChange={checkChanges}
-					{productCode}
-				/>
-			{:else}
-				<Card.Root>
-					<Card.Content>
-						<div class="grid h-[60vh] w-full place-items-center rounded-md border">
-							<div class="m-4 flex flex-row gap-2">
-								<Spinner />Machine is working. Please wait for a moment.
+				{#if $machineInfoStore?.status == 'IDLE' || $machineInfoStore?.status == '' || refPage == 'overview'}
+					<RecipelistTable
+						data={recipeListMatState}
+						{columns}
+						onStateChange={checkChanges}
+						{productCode}
+					/>
+				{:else}
+					<Card.Root>
+						<Card.Content>
+							<div class="grid h-[60vh] w-full place-items-center rounded-md border">
+								<div class="m-4 flex flex-row gap-2">
+									<Spinner />Machine is working. Please wait for a moment.
+								</div>
 							</div>
-						</div>
-					</Card.Content>
-				</Card.Root>
+						</Card.Content>
+					</Card.Root>
+				{/if}
 			{/if}
 		</Tabs.Content>
 	</Tabs.Root>
diff --git a/src/lib/components/recipe-details/recipe-editor-events.ts b/src/lib/components/recipe-details/recipe-editor-events.ts
new file mode 100644
index 0000000..59c8043
--- /dev/null
+++ b/src/lib/components/recipe-details/recipe-editor-events.ts
@@ -0,0 +1,94 @@
+/**
+ * Recipe Editor Event Types
+ *
+ * Typed event definitions for the recipe-editor domain.
+ * Replaces the `recipeDataEvent` writable store pattern with GlobalEventBus.
+ *
+ * Event name convention: `recipe:${action}`
+ */
+
+import { GlobalEventBus } from '$lib/core/utils/eventBus';
+
+// ─── Event name constants ───────────────────────────────────────────
+export const RECIPE_EVENTS = {
+	MAT_CHANGE: 'recipe:mat_change',
+	EDIT_MAT_FIELD: 'recipe:edit_mat_field',
+	EDIT_MAT_FIELD_PREP: 'recipe:edit_mat_field_prep',
+	SAVE_MAT_FIELD: 'recipe:save_mat_field',
+	EDIT_CHANGE_VALUE_RPL: 'recipe:edit_change_value_rpl',
+	REVERT_CHANGE: 'recipe:revert_change'
+} as const;
+
+// ─── Payload types ──────────────────────────────────────────────────
+
+export interface EditMatFieldPrepPayload {
+	mat_id: number;
+	mat_type: string;
+	mat_name: string;
+	params: Record<string, string>;
+	toppings: any[];
+	current_topping_group: any;
+	current_topping_list: any[];
+	has_mix_ord: boolean;
+	feed: { pattern: number; parameter: number };
+	water: { cold: number; yield: number };
+	powder: { gram: number; time: number };
+	syrup: { gram: number; time: number };
+	stir_time: number;
+}
+
+export interface SaveMatFieldPayload {
+	source: EditMatFieldPrepPayload;
+	change: Record<string, any>;
+}
+
+export interface EditChangeValueRplPayload extends SaveMatFieldPayload {
+	current_toppings: any[];
+}
+
+// ─── Module-level pending save data ────────────────────────────────
+// Replaces direct `get(recipeDataEvent)` reads in recipe-editor-dialog.svelte.
+// The recipe-dialog reads the latest pending save data synchronously;
+// GlobalEventBus has no "get latest value" so we store it here.
+
+interface PendingSaveData {
+	change: Record<string, any>;
+	payload: SaveMatFieldPayload & { current_toppings?: any[] };
+	index: number;
+}
+
+let _latestPendingSave: PendingSaveData | null = null;
+
+export function setPendingSaveData(data: PendingSaveData): void {
+	_latestPendingSave = data;
+}
+
+export function getPendingSaveData(): PendingSaveData | null {
+	return _latestPendingSave;
+}
+
+export function clearPendingSaveData(): void {
+	_latestPendingSave = null;
+}
+
+// ─── Typed emit helpers ────────────────────────────────────────────
+
+export function emitMatChange(matId: string, index: number): void {
+	GlobalEventBus.emit(RECIPE_EVENTS.MAT_CHANGE, { mat_id: matId, index });
+}
+
+export function emitEditMatField(index: number): void {
+	GlobalEventBus.emit(RECIPE_EVENTS.EDIT_MAT_FIELD, { index });
+}
+
+export function emitEditMatFieldPrep(payload: EditMatFieldPrepPayload, index: number): void {
+	GlobalEventBus.emit(RECIPE_EVENTS.EDIT_MAT_FIELD_PREP, { payload, index });
+}
+
+export function emitSaveMatField(payload: SaveMatFieldPayload, index: number): void {
+	GlobalEventBus.emit(RECIPE_EVENTS.SAVE_MAT_FIELD, { payload, index });
+}
+
+export function emitRevertChange(index: number): void {
+	GlobalEventBus.emit(RECIPE_EVENTS.REVERT_CHANGE, { index });
+}
diff --git a/src/lib/components/recipe-details/recipelist-mat-select.svelte b/src/lib/components/recipe-details/recipelist-mat-select.svelte
index 012d522..0455afe 100644
--- a/src/lib/components/recipe-details/recipelist-mat-select.svelte
+++ b/src/lib/components/recipe-details/recipelist-mat-select.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { onMount } from 'svelte';
 	import { Button } from '../ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index';
@@ -28,7 +29,7 @@
 		if (refPage === 'brew') allMatData = get(materialFromMachineQuery);
 		else if (refPage === 'overview') allMatData = get(materialFromServerQuery);
 
-		// console.log('all mat data', JSON.stringify(allMatData));
+		// logger.info('all mat data', JSON.stringify(allMatData));
 	});
 </script>
 
diff --git a/src/lib/components/recipe-details/recipelist-table.svelte b/src/lib/components/recipe-details/recipelist-table.svelte
index caf08f3..c559385 100644
--- a/src/lib/components/recipe-details/recipelist-table.svelte
+++ b/src/lib/components/recipe-details/recipelist-table.svelte
@@ -1,4 +1,5 @@
-<script module>
+<script module>import { logger } from '$lib/core/utils/logger';
+
 	export { DragHandle };
 </script>
 
@@ -76,14 +77,14 @@
 		getSortedRowModel: getSortedRowModel(),
 		getFacetedRowModel: getFacetedRowModel(),
 		onStateChange: async (updater) => {
-			console.log('table state change', data);
+			logger.info('table state change', data);
 			await onStateChange(
 				productCode,
 				table.getRowModel().rows.map((x) => x.original)
 			);
 		},
 		onSortingChange: async (updater) => {
-			console.log('triggering sorting');
+			logger.info('triggering sorting');
 			if (typeof updater === 'function') {
 				sorting = updater(sorting);
 			} else {
@@ -100,7 +101,7 @@
 				rowSelection = updater(rowSelection);
 				let rows = table.getRowModel().rows;
 
-				// console.log('state size', data, rows);
+				// logger.info('state size', data, rows);
 			} else {
 				rowSelection = updater;
 			}
@@ -126,10 +127,13 @@
 					// @ts-expect-error @dnd-kit/adbstract types are botched atm
 					RestrictToVerticalAxis
 				]}
-				onDragEnd={(e) => {
+				onDragEnd={async (e) => {
 					// snap
 					data = move(data as any, e as any);
-					//
+					// Notify parent of reorder so changes are saved
+					if (onStateChange) {
+						await onStateChange(productCode, data);
+					}
 				}}
 			>
 				<ScrollArea class="h-[60vh] w-full rounded-md border" type="always">
diff --git a/src/lib/components/recipe-details/recipelist-value-editor.svelte b/src/lib/components/recipe-details/recipelist-value-editor.svelte
index 5defeff..b92b5e8 100644
--- a/src/lib/components/recipe-details/recipelist-value-editor.svelte
+++ b/src/lib/components/recipe-details/recipelist-value-editor.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { CupSodaIcon, PencilIcon, ChevronRightIcon, StarsIcon } from '@lucide/svelte/icons';
 	import Button from '$lib/components/ui/button/button.svelte';
 	import * as Select from '$lib/components/ui/select/index';
@@ -10,17 +11,18 @@
 
 	import {
 		latestRecipeToppingData,
-		recipeDataEvent,
 		toppingGroupFromServerQuery,
 		toppingListFromServerQuery,
 		toppingGroupFromMachineQuery,
 		toppingListFromMachineQuery,
 		referenceFromPage
 	} from '$lib/core/stores/recipeStore';
-	import { onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import { addNotification } from '$lib/core/stores/noti';
 	import { get } from 'svelte/store';
 	import { actionReport, ValueEvent } from './value_event';
+	import { GlobalEventBus } from '$lib/core/utils/eventBus';
+	import { RECIPE_EVENTS, emitEditMatField, emitSaveMatField } from './recipe-editor-events';
 	import ScrollArea from '../ui/scroll-area/scroll-area.svelte';
 	import { sendMessage } from '$lib/core/handlers/ws_messageSender';
 	import { auth } from '$lib/core/stores/auth';
@@ -38,6 +40,8 @@
 
 	let warnUserNotSaveChange = $state(false);
 
+	let unsubEvents: (() => void) | null = null;
+
 	// --------------------------------------------------
 
 	let toggledOpenPowder = $state(false);
@@ -81,12 +85,12 @@
 	}
 
 	function handleEvents(event: { event_type: string; payload: any; index: number | undefined }) {
-		// console.log('triggered event', event.event_type, JSON.stringify(event.payload));
+		// logger.info('triggered event', event.event_type, JSON.stringify(event.payload));
 		if (event.event_type === 'edit_mat_field_prep') {
 			// update value, do re-render
 			if (event.payload) {
 				current_editing_data = event.payload;
-				// console.log(`GET requested data: ${JSON.stringify(current_editing_data)}`);
+				// logger.info(`GET requested data: ${JSON.stringify(current_editing_data)}`);
 
 				// default topping
 				if (
@@ -124,12 +128,8 @@
 	function requestDataFromDisplay() {
 		// pause show until have data
 		sheetOpenState = false;
-		console.log('sending request edit', row_id);
-		recipeDataEvent.set({
-			event_type: 'edit_mat_field',
-			payload: row_id,
-			index: row_id
-		});
+		logger.info('sending request edit', row_id);
+		emitEditMatField(row_id);
 
 		setTimeout(() => {
 			if (current_editing_data === undefined) {
@@ -151,7 +151,7 @@
 			try {
 				curr_val = curr_val[field];
 			} catch (e) {
-				console.error('try get field error: ', e);
+				logger.error('try get field error: ', e);
 			}
 		}
 
@@ -174,18 +174,14 @@
 		}
 	}
 
-	function saveEditingValue() {
-		console.log('saving value ...', value_event_state);
+		function saveEditingValue() {
+		logger.info('saving value ...', value_event_state);
 		if (value_event_state === ValueEvent.EDITED || value_event_state === ValueEvent.SAVED) {
 			let payload = {
 				source: current_editing_data,
 				change: changed_data
 			};
-			recipeDataEvent.set({
-				event_type: 'save_mat_field',
-				payload,
-				index: row_id
-			});
+			emitSaveMatField(payload, row_id);
 
 			value_event_state = ValueEvent.SAVED;
 
@@ -208,7 +204,7 @@
 	}
 
 	function handleToppingGroupChange(v: any) {
-		console.log('change topping group');
+		logger.info('change topping group');
 
 		// TODO: clear topping list, otherwise, it will continue to append filter to list by each navigate back and forth
 
@@ -226,11 +222,11 @@
 			if (changed_data['toppings'] == undefined || changed_data['toppings'] == null) {
 				changed_data['toppings'] = new Array<any>(toppings_length);
 
-				console.log('filling change topping', JSON.stringify(changed_data));
+				logger.info('filling change topping', JSON.stringify(changed_data));
 			}
 		}
 
-		console.log('current editing data', current_editing_data['toppings']);
+		logger.info('current editing data', current_editing_data['toppings']);
 
 		let idx = getToppingSlotIndex(current_editing_data['mat_id']);
 
@@ -238,7 +234,7 @@
 		let current_selection = current_editing_data['toppings'][idx];
 
 		// let default_from_recipe = current_editing_data['toppings'][idx]['ListGroupID'][0];
-		console.log(`Current TG: `, JSON.stringify(current_selection));
+		logger.info(`Current TG: `, JSON.stringify(current_selection));
 		if (current_selection['groupID'] !== undefined || current_selection['groupID'] !== null) {
 			try {
 				changed_data['toppings'][idx] = current_selection;
@@ -246,13 +242,13 @@
 				changed_data['toppings'][idx]['defaultIDSelect'] = selected_topping_list_id;
 				changed_data['toppings'][idx]['ListGroupID'][0] = selected_topping_list_id;
 			} catch (topping_group_exception) {
-				console.error('Error on topping group select', topping_group_exception);
+				logger.error('Error on topping group select', topping_group_exception);
 			}
 		}
 	}
 
 	function handleToppingListChange(v: any) {
-		console.log('Topping list chose ');
+		logger.info('Topping list chose ');
 		selected_topping_list_id = v.id;
 
 		// set to edit state even if selected same group again
@@ -278,7 +274,7 @@
 				changed_data['toppings'][idx]['defaultIDSelect'] = selected_topping_list_id;
 				changed_data['toppings'][idx]['ListGroupID'][0] = selected_topping_list_id;
 			} catch (topping_list_exception) {
-				console.error('Error on topping group select', topping_list_exception);
+				logger.error('Error on topping group select', topping_list_exception);
 			}
 		}
 	}
@@ -290,7 +286,7 @@
 
 	onMount(() => {
 		sheetOpenState = false;
-		// console.log('sheet open? ', sheetOpenState);
+		// logger.info('sheet open? ', sheetOpenState);
 
 		let refFrom = get(referenceFromPage);
 		categories = $state.snapshot(
@@ -303,11 +299,24 @@
 		// save ref
 		currentRef = refFrom;
 
-		return recipeDataEvent.subscribe((event) => {
-			if (event !== null && event.index !== undefined && event.index === row_id) {
-				handleEvents(event);
-			}
-		});
+		unsubEvents = (() => {
+			const unsub = GlobalEventBus.on(RECIPE_EVENTS.EDIT_MAT_FIELD_PREP, (data: any) => {
+				if (data && data.index === row_id) {
+					handleEvents({
+						event_type: 'edit_mat_field_prep',
+						payload: data.payload,
+						index: data.index
+					});
+				}
+			});
+			return () => {
+				unsub();
+			};
+		})();
+	});
+
+	onDestroy(() => {
+		if (unsubEvents) unsubEvents();
 	});
 </script>
 
diff --git a/src/lib/components/recipe-details/recipelist-value.svelte b/src/lib/components/recipe-details/recipelist-value.svelte
index 2cd772b..faa0dfe 100644
--- a/src/lib/components/recipe-details/recipelist-value.svelte
+++ b/src/lib/components/recipe-details/recipelist-value.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { onDestroy, onMount } from 'svelte';
 	import type { RecipelistMaterial } from './columns';
 	import {
@@ -14,7 +15,6 @@
 	import * as Tooltip from '../ui/tooltip/index';
 	import {
 		latestRecipeToppingData,
-		recipeDataEvent,
 		toppingGroupFromServerQuery,
 		toppingListFromServerQuery,
 		toppingGroupFromMachineQuery,
@@ -22,6 +22,13 @@
 		referenceFromPage
 	} from '$lib/core/stores/recipeStore';
 	import { get } from 'svelte/store';
+	import { GlobalEventBus } from '$lib/core/utils/eventBus';
+	import {
+		RECIPE_EVENTS,
+		emitEditMatFieldPrep,
+		setPendingSaveData,
+		clearPendingSaveData
+	} from './recipe-editor-events';
 	import { sendMessage } from '$lib/core/handlers/ws_messageSender';
 	import { auth } from '$lib/core/stores/auth';
 	import { departmentStore } from '$lib/core/stores/departments';
@@ -52,6 +59,15 @@
 	let currentStringParams: any = $state({});
 	let currentMaterialInt: number = $state(0);
 
+	// Local reactive copies of display values so applyChanges() triggers
+	// immediate template re-render (mutating $props() objects directly
+	// does not reliably trigger Svelte 5 deep proxy reactivity).
+	let displayWater = $state<{ cold: number; yield: number }>({ ...water });
+	let displayStirTime = $state<number>(stir_time);
+	let displayFeed = $state<{ pattern: number; parameter: number }>({ ...feed });
+	let displayPowder = $state<{ gram: number; time: number }>({ ...powder });
+	let displaySyrup = $state<{ gram: number; time: number }>({ ...syrup });
+
 	// toppings
 	let currentToppings: any = $state([]);
 	let oldToppings: any = $state(null);
@@ -62,6 +78,8 @@
 	let currentToppingNamesOnly = $state('');
 	let oldToppingNamesOnly = $state(null);
 
+	let toppingDataLoading = $state(true);
+
 	let unsubRecipeDataEvent: any;
 	let unsubRecipeTopping: any;
 
@@ -85,7 +103,7 @@
 					let key = kv[0];
 					let value = kv[1] ?? '';
 
-					// console.log('key', key, 'value', value);
+					// logger.info('key', key, 'value', value);
 					currentStringParams[key] = value;
 				}
 			}
@@ -94,9 +112,9 @@
 
 	function getPowderSyrupValue() {
 		if (currentMaterialType === 'powder' || currentMaterialType === 'bean') {
-			return powder.gram;
+			return displayPowder.gram;
 		} else if (currentMaterialType === 'syrup') {
-			return syrup.gram;
+			return displaySyrup.gram;
 		}
 		return 0;
 	}
@@ -126,26 +144,36 @@
 			refFrom === 'overview' ? toppingListFromServerQuery : toppingListFromMachineQuery
 		);
 
-		console.log('old topping', oldToppings[getToppingSlot()]);
+		// Guard: bail out if topping slot data is null/undefined (unused slot)
+		if (!current_row_topping) {
+			currentToppingInRow = { name: 'Empty', otherName: 'Empty', id: 0 };
+			selectableToppingInGroup = [{ name: 'Empty', otherName: 'Empty', id: 0 }];
+			currentToppingNamesOnly = '-';
+			oldToppingNamesOnly = null;
+			return;
+		}
 
-		console.log('current topping', current_row_topping);
+		logger.info('old topping', oldToppings?.[getToppingSlot()]);
+
+		logger.info('current topping', current_row_topping);
 		oldToppingNamesOnly = null; // reset first
-		if (oldToppings[getToppingSlot()] != current_row_topping) {
-			console.log('detect change on topping row', row_uid);
+		if (oldToppings?.[getToppingSlot()] != null && oldToppings[getToppingSlot()] != current_row_topping) {
+			logger.info('detect change on topping row', row_uid);
 
+			let oldSlot = oldToppings[getToppingSlot()];
 			let groupIDchange =
-				oldToppings[getToppingSlot()]['groupID'] !== current_row_topping['groupID'];
+				oldSlot['groupID'] !== current_row_topping['groupID'];
 			let defaultIDchange =
-				oldToppings[getToppingSlot()]['defaultIDSelect'] !== current_row_topping['defaultIDSelect'];
+				oldSlot['defaultIDSelect'] !== current_row_topping['defaultIDSelect'];
 
-			console.log('group change', groupIDchange, 'default id change', defaultIDchange);
+			logger.info('group change', groupIDchange, 'default id change', defaultIDchange);
 
 			if (!groupIDchange && !defaultIDchange) {
 				oldToppingNamesOnly = null;
 			} else {
 				// has change, display old name
 				let oldGroupData = groupQuery.find(
-					(x: any) => x.groupID.toString() === oldToppings[getToppingSlot()]['groupID']
+					(x: any) => x.groupID.toString() === oldSlot['groupID']
 				);
 				let oldListData = listQuery.filter(
 					(x: any) =>
@@ -153,7 +181,7 @@
 						Object.keys(oldGroupData).includes('idInGroup') &&
 						oldGroupData['idInGroup'].split(',').includes(x.id.toString())
 				);
-				oldToppingNamesOnly = oldGroupData['otherName'];
+				oldToppingNamesOnly = oldGroupData?.['otherName'] ?? null;
 			}
 		} else {
 			oldToppingNamesOnly = null;
@@ -169,7 +197,7 @@
 				groupData['idInGroup'].split(',').includes(x.id.toString())
 		);
 
-		console.log('topping data', JSON.stringify(groupData), 'list', listData.length);
+		logger.info('topping data', JSON.stringify(groupData), 'list', listData.length);
 
 		currentToppingNamesOnly = groupData ? (groupData['otherName'] ?? '-') : '-';
 
@@ -203,15 +231,19 @@
 	}
 
 	function getCurrentSelectedToppingList() {
-		// FIXME: show unknown on preview
+		let slot = getToppingSlot();
+		if (!currentToppings || !currentToppings[slot] || !currentToppings[slot]['ListGroupID']) {
+			return 'Loading...';
+		}
 
+		let listGroupId = currentToppings[slot]['ListGroupID'];
 		let current_selected = selectableToppingInGroup.find(
-			(x) => x.id === currentToppings[getToppingSlot()]['ListGroupID'][0]
+			(x) => x.id === (Array.isArray(listGroupId) ? listGroupId[0] : listGroupId)
 		);
 
-		console.log('current selected topping list', row_uid, current_selected);
+		logger.info('current selected topping list', row_uid, current_selected);
 
-		if (currentToppings[getToppingSlot()]['ListGroupID'][0] === 0) {
+		if (!currentToppings[slot]['ListGroupID'] || currentToppings[slot]['ListGroupID'][0] === 0) {
 			return 'Empty';
 		}
 		if (current_selected === undefined || current_selected === null) {
@@ -226,13 +258,20 @@
 
 		extractStringParam();
 
+		// Sync local $state copies from prop values on mount
+		displayWater = { ...water };
+		displayStirTime = stir_time;
+		displayFeed = { ...feed };
+		displayPowder = { ...powder };
+		displaySyrup = { ...syrup };
+
 		if (isToppingId(mat_id) && onDetectToppingSlot) {
 			// FIXME: this should not be updated yet, must be updated after user pressed save only
 			let latest_topping_data_snapshot = $state.snapshot(get(latestRecipeToppingData));
 			currentToppings = latest_topping_data_snapshot;
-			// console.log('current topping in initialize', currentToppings);
+			// logger.info('current topping in initialize', currentToppings);
 			if (oldToppings == null) {
-				// console.log('saving original topping', oldToppings);
+				// logger.info('saving original topping', oldToppings);
 				oldToppings = $state.snapshot(currentToppings);
 			}
 
@@ -248,15 +287,15 @@
 			let mat_type_t1 = getMaterialType(mat_num);
 			let mat_type_t2 = getMaterialType(convertFromInterProductCode(mat_num));
 
-			// console.log('type get', mat_type_t1, mat_type_t2);
+			// logger.info('type get', mat_type_t1, mat_type_t2);
 			currentMaterialType = mat_type_t1 === mat_type_t2 ? mat_type_t1 : mat_type_t2;
 
 			// if (hasMixOrder) {
-			// 	console.log('detect mix order', mat_num);
+			// 	logger.info('detect mix order', mat_num);
 			// }
 
 			// if (feed.parameter > 0 || feed.pattern > 0) {
-			// 	console.log('has feed fields', JSON.stringify(feed));
+			// 	logger.info('has feed fields', JSON.stringify(feed));
 			// }
 		}
 	}
@@ -267,127 +306,177 @@
 		for (const key of keys) {
 			if (key == 'toppings' && currentMaterialType == 'topping') {
 				let topping_change = value[key][getToppingSlot()];
-				console.log('topping applying', topping_change);
+				logger.info('topping applying', topping_change);
 				currentToppings[getToppingSlot()] = topping_change;
 			} else {
-				console.log('apply change on recipelist value', key);
+				logger.info('apply change on recipelist value', key);
 
 				if (key.startsWith('powder')) {
 					if (key.endsWith('gram')) {
-						powder.gram = parseInt(value[key]);
+						displayPowder.gram = parseInt(value[key]);
 					} else if (key.endsWith('time')) {
-						powder.time = parseInt(value[key]);
+						displayPowder.time = parseInt(value[key]);
 					}
 				} else if (key.startsWith('syrup')) {
 					if (key.endsWith('gram')) {
-						syrup.gram = parseInt(value[key]);
+						displaySyrup.gram = parseInt(value[key]);
 					} else if (key.endsWith('time')) {
-						syrup.time = parseInt(value[key]);
+						displaySyrup.time = parseInt(value[key]);
 					}
 				} else if (key.startsWith('water')) {
 					if (key.endsWith('yield')) {
-						water.yield = parseInt(value[key]);
+						displayWater.yield = parseInt(value[key]);
 					} else if (key.endsWith('cold')) {
-						water.cold = parseInt(value[key]);
+						displayWater.cold = parseInt(value[key]);
 					}
 				} else if (key.startsWith('feed')) {
 					if (key.endsWith('pattern')) {
-						feed.pattern = parseInt(value[key]);
+						displayFeed.pattern = parseInt(value[key]);
 					} else if (key.endsWith('parameter')) {
-						feed.parameter = parseInt(value[key]);
+						displayFeed.parameter = parseInt(value[key]);
 					}
 				} else if (key == 'stir_time') {
-					stir_time = parseInt(value[key]);
+					displayStirTime = parseInt(value[key]);
 				}
 			}
 		}
 	}
 
 	function handleEvents(event: { event_type: string; payload: any; index: number | undefined }) {
-		// console.log('triggered event', event.event_type, JSON.stringify(event.payload));
+		// logger.info('triggered event', event.event_type, JSON.stringify(event.payload));
 		if (event.event_type === 'mat_change') {
 			// update value, do re-render
 			initialize();
 		} else if (event.event_type === 'edit_mat_field') {
-			console.log('request edit mat');
+			logger.info('request edit mat');
 
 			// fix bug: topping instant change by unlink topping
 			let _current_toppings = $state.snapshot(currentToppings);
 
 			// pack all shown data
-			recipeDataEvent.set({
-				event_type: 'edit_mat_field_prep',
-				payload: {
-					mat_id: currentMaterialInt,
-					mat_type: currentMaterialType,
-					mat_name: mat_id,
-					params: currentStringParams,
-					toppings: _current_toppings,
-					current_topping_group: currentToppingInRow,
-					current_topping_list: selectableToppingInGroup,
-					has_mix_ord: hasMixOrder,
-					feed,
-					water,
-					powder,
-					syrup,
-					stir_time
-				},
-				index: row_uid
-			});
+			emitEditMatFieldPrep({
+				mat_id: currentMaterialInt,
+				mat_type: currentMaterialType,
+				mat_name: mat_id,
+				params: currentStringParams,
+				toppings: _current_toppings,
+				current_topping_group: currentToppingInRow,
+				current_topping_list: selectableToppingInGroup,
+				has_mix_ord: hasMixOrder,
+				feed,
+				water,
+				powder,
+				syrup,
+				stir_time
+			}, row_uid);
 		} else if (event.event_type === 'save_mat_field') {
-			console.log('receive saving process mat, do refresh...');
+			logger.info('receive saving process mat, do refresh...');
 			let change_values = event.payload.change;
 
 			// apply now
 			let keys = Object.keys(change_values);
-			console.log('change keys', JSON.stringify(keys));
+			logger.info('change keys', JSON.stringify(keys));
 			let _current_toppings = $state.snapshot(currentToppings);
 
 			// initialize();
 			applyChanges(change_values);
 
-			event.payload = {
+			let enhanced_payload = {
 				current_toppings: _current_toppings,
 				...event.payload
 			};
 
-			// console.log('check on change before trigger', change_values);
+			// Store for synchronous read by recipe-editor-dialog
+			setPendingSaveData({
+				change: change_values,
+				payload: enhanced_payload,
+				index: row_uid
+			});
 
-			if (onEditValue) onEditValue(JSON.stringify(event.payload));
+			if (onEditValue) onEditValue(JSON.stringify(enhanced_payload));
 		} else if (event.event_type === 'revert_change') {
-			// console.log('revert back ...', row_uid);
+			// logger.info('revert back ...', row_uid);
 
 			currentToppings = oldToppings;
+			clearPendingSaveData();
 		}
 	}
 
 	onMount(() => {
 		initialize();
-		unsubRecipeDataEvent = recipeDataEvent.subscribe((event) => {
-			if (event !== null && event.index !== undefined && event.index === row_uid) {
-				// has some event
-				handleEvents(event);
-			}
-		});
+		toppingDataLoading = false;
 
+		// Subscribe to GlobalEventBus for recipe editor events
+		unsubRecipeDataEvent = (() => {
+			const unsubMatChange = GlobalEventBus.on(RECIPE_EVENTS.MAT_CHANGE, (data: any) => {
+				if (data && data.index === row_uid) {
+					handleEvents({
+						event_type: 'mat_change',
+						payload: data.mat_id,
+						index: data.index
+					});
+				}
+			});
+			const unsubEditMatField = GlobalEventBus.on(RECIPE_EVENTS.EDIT_MAT_FIELD, (data: any) => {
+				if (data && data.index === row_uid) {
+					handleEvents({
+						event_type: 'edit_mat_field',
+						payload: data.payload,
+						index: data.index
+					});
+				}
+			});
+			const unsubSaveMatField = GlobalEventBus.on(RECIPE_EVENTS.SAVE_MAT_FIELD, (data: any) => {
+				if (data && data.index === row_uid) {
+					handleEvents({
+						event_type: 'save_mat_field',
+						payload: data.payload,
+						index: data.index
+					});
+				}
+			});
+			const unsubRevertChange = GlobalEventBus.on(RECIPE_EVENTS.REVERT_CHANGE, (data: any) => {
+				if (data && (data.index === -1 || data.index === row_uid)) {
+					handleEvents({
+						event_type: 'revert_change',
+						payload: data.payload,
+						index: data.index
+					});
+				}
+			});
+			return () => {
+				unsubMatChange();
+				unsubEditMatField();
+				unsubSaveMatField();
+				unsubRevertChange();
+			};
+		})();
+
+		// Reactively update topping display when external store changes.
+		// This replaces the old $effect that caused an infinite loop
+		// (the effect wrote $state variables that re-triggered the effect).
 		unsubRecipeTopping = latestRecipeToppingData.subscribe((payload) => {
-			// console.log('topping data subscribe', payload);
+			if (payload && currentMaterialType === 'topping') {
+				currentToppings = payload;
+				getToppingDisplay();
+			}
 		});
 	});
 
 	onDestroy(() => {
 		if (unsubRecipeDataEvent) {
-			// do last event before destroy
-			// console.log('trigger last event before destroy', get(latestRecipeToppingData));
-			handleEvents(get(recipeDataEvent) ?? { event_type: '', payload: {}, index: -1 });
-
 			unsubRecipeDataEvent();
-			// console.log('destroy recipe data event listener');
 		}
 		if (unsubRecipeTopping) {
 			unsubRecipeTopping();
 		}
 	});
+
+	// NOTE: Topping display reactivity is now handled by the store subscription
+	// in onMount (latestRecipeToppingData.subscribe). The old $effect approach
+	// caused an infinite loop because getToppingDisplay() writes $state variables
+	// that re-triggered the effect. Using the store subscription breaks the cycle
+	// because store callbacks don't participate in Svelte 5 signal tracking.
 </script>
 
 <div>
@@ -395,21 +484,27 @@
 		<!-- do topping layout -->
 		<div>
 			<!-- get name of topping -->
-			<div class="mx-auto my-4 flex flex-row gap-8">
-				<p class="text-muted-foreground">
-					<b>
-						{getCurrentSelectedToppingGroup()}
-					</b>, {getCurrentSelectedToppingList()}
-				</p>
-				{#if oldToppingNamesOnly != null}
-					<br />
-					<Button variant="outline" class="font-bold text-red-500">
-						<!-- old topping -->
-						<Undo />
-						<!-- {oldToppingNamesOnly} -->
-					</Button>
-				{/if}
-			</div>
+			{#if toppingDataLoading}
+				<div class="mx-auto my-4">
+					<p class="text-muted-foreground italic">Loading...</p>
+				</div>
+			{:else}
+				<div class="mx-auto my-4 flex flex-row gap-8">
+					<p class="text-muted-foreground">
+						<b>
+							{getCurrentSelectedToppingGroup()}
+						</b>, {getCurrentSelectedToppingList()}
+					</p>
+					{#if oldToppingNamesOnly != null}
+						<br />
+						<Button variant="outline" class="font-bold text-red-500">
+							<!-- old topping -->
+							<Undo />
+							<!-- {oldToppingNamesOnly} -->
+						</Button>
+					{/if}
+				</div>
+			{/if}
 		</div>
 	{:else}
 		<div>
@@ -440,7 +535,7 @@
 						</div>
 					{/if}
 
-					{#if water.yield > 0}
+					{#if displayWater.yield > 0}
 						<div class="my-4">
 							<!-- <Label class="font-bold" for={`water_yield_volume_${row_uid}`}>Hot</Label>
 						<div class="flex flex-row items-center space-x-2 text-center">
@@ -448,7 +543,7 @@
 								class="w-16"
 								type="number"
 								id={`water_yield_volume_${row_uid}`}
-								value={water.yield}
+								value={displayWater.yield}
 								onchangecapture={(v) =>
 									triggerEditChange(`${v.currentTarget.id}=${v.currentTarget.value}`)}
 							/>
@@ -457,12 +552,12 @@
 
 							<p class="text-muted-foreground">
 								<b> Hot </b>
-								{water.yield} ml
+								{displayWater.yield} ml
 							</p>
 						</div>
 					{/if}
 
-					{#if water.cold > 0}
+					{#if displayWater.cold > 0}
 						<div class="my-4">
 							<!-- <Label class="font-bold" for={`water_cold_volume_${row_uid}`}>Cold</Label>
 						<div class="flex flex-row items-center space-x-2 text-center">
@@ -470,7 +565,7 @@
 								class="w-16"
 								type="number"
 								id={`water_cold_volume_${row_uid}`}
-								value={water.cold}
+								value={displayWater.cold}
 								onchangecapture={(v) =>
 									triggerEditChange(`${v.currentTarget.id}=${v.currentTarget.value}`)}
 							/>
@@ -478,12 +573,12 @@
 						</div> -->
 							<p class="text-muted-foreground">
 								<b> Hot </b>
-								{water.cold} ml
+								{displayWater.cold} ml
 							</p>
 						</div>
 					{/if}
 
-					{#if currentMaterialType !== 'cup' && currentMaterialType !== 'topping' && stir_time > 0}
+					{#if currentMaterialType !== 'cup' && currentMaterialType !== 'topping' && displayStirTime > 0}
 						<div class="my-4">
 							<!-- <Label class="font-bold" for={`stir_time_${row_uid}`}>{getStirTimeName()}</Label>
 						<div class="flex flex-row items-center space-x-2 text-center">
@@ -491,7 +586,7 @@
 								class="w-16"
 								type="number"
 								id={`stir_time_${row_uid}`}
-								value={stir_time / 10}
+								value={displayStirTime / 10}
 								onchangecapture={(v) =>
 									triggerEditChange(`${v.currentTarget.id}=${v.currentTarget.value}`)}
 							/>
@@ -499,7 +594,7 @@
 						</div> -->
 							<p class="text-muted-foreground">
 								<b>{getStirTimeName()}</b>
-								{stir_time / 10} sec(s)
+								{displayStirTime / 10} sec(s)
 							</p>
 						</div>
 					{/if}
@@ -527,10 +622,10 @@
 				{/if}
 			</div>
 			<!-- feed pattern -->
-			{#if feed.parameter > 0 || feed.pattern > 0}
+			{#if displayFeed.parameter > 0 || displayFeed.pattern > 0}
 				<div class="mx-auto my-4 flex items-center gap-8 text-center">
-					<p class="text-muted-foreground">Style {feed.pattern}</p>
-					<p class="text-muted-foreground">Level {feed.parameter}</p>
+					<p class="text-muted-foreground">Style {displayFeed.pattern}</p>
+					<p class="text-muted-foreground">Level {displayFeed.parameter}</p>
 				</div>
 			{/if}
 		</div>
diff --git a/src/lib/components/recipe-editor-dialog.svelte b/src/lib/components/recipe-editor-dialog.svelte
index cd8b52f..26025ae 100644
--- a/src/lib/components/recipe-editor-dialog.svelte
+++ b/src/lib/components/recipe-editor-dialog.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
+	import { logger } from '$lib/core/utils/logger';
+
 	import {
 		currentEditingRecipeProductCode,
 		latestRecipeToppingData,
+		recipeFromMachine,
 		recipeFromMachineQuery,
 		recipeFromServerQuery,
 		referenceFromPage
@@ -21,7 +24,8 @@
 	import { sendToAndroid } from '$lib/core/stores/adbWriter';
 	import { env } from '$env/dynamic/public';
 
-	import { recipeDataEvent } from '$lib/core/stores/recipeStore';
+	import { GlobalEventBus } from '$lib/core/utils/eventBus';
+	import { RECIPE_EVENTS, getPendingSaveData } from './recipe-details/recipe-editor-events';
 	import { sendMessage } from '$lib/core/handlers/ws_messageSender';
 	import { auth } from '$lib/core/stores/auth';
 	import { departmentStore } from '$lib/core/stores/departments';
@@ -57,7 +61,7 @@
 	let interval_get_machine_status: any;
 
 	async function onPendingChange(newChange: { target: string; value: any; ref_pd: string }) {
-		console.log('detect pending change', matchMenuStatus(currentData.MenuStatus));
+		logger.info('detect pending change', matchMenuStatus(currentData.MenuStatus));
 		hasPendingChange = true;
 
 		let originalMenuStatus = matchMenuStatus(currentData.MenuStatus);
@@ -74,22 +78,18 @@
 		currentData.MenuStatus = MenuStatus.pendingOnline;
 
 		if (newChange.target === 'recipeList') {
-			// currentData.recipes = newChange.value;
-			//
-			// TODO: build into structure, flatten fields into 1 layer, strip off `id` (row id)
-			console.log('pending change recipe list', newChange);
+			logger.info('pending change recipe list', newChange);
 
 			let isMatchedProduct = newChange.ref_pd == productCode;
 
-			// get latest edit
-			let latest_event = get(recipeDataEvent);
-			// expect edit_change_value_rpl
-			console.log('latest data event', latest_event);
+			// get latest edit from pending save data
+			let latest_save = getPendingSaveData();
+			logger.info('latest pending save data', latest_save);
 
-			let topping_value_for_revert = latest_event?.payload.current_toppings;
-			let new_topping_value_for_save = latest_event?.payload.source.toppings;
+			let topping_value_for_revert = latest_save?.payload.current_toppings;
+			let new_topping_value_for_save = latest_save?.payload.source.toppings;
 
-			// console.log(
+			// logger.info(
 			// 	'topping_data_latest',
 			// 	get(latestRecipeToppingData),
 			// 	'topping_old',
@@ -98,7 +98,7 @@
 			// 	get(currentEditingRecipeProductCode)
 			// );
 
-			console.log('accepting changes');
+			logger.info('accepting changes');
 			let current_data_to_brew =
 				ready_to_send_brew.length == 0 ? $state.snapshot(currentData) : ready_to_send_brew.shift();
 
@@ -121,27 +121,67 @@
 			// 	current_data_to_brew['ToppingSet'] = topping_value_for_revert;
 			// }
 
+			// Reorder current_data_to_brew.recipes to match the drag-and-drop order.
+			// newChange.value[].id = original index in the recipes array.
+			// NOTE: We ONLY reorder the queue snapshot (current_data_to_brew), NOT the
+			// $state (currentData.recipes).  Updating currentData.recipes would cause
+			// recipeListMatState to re-derive → table gets new data prop → TanStack
+			// fires onStateChange → checkChanges fires onPendingChange → infinite loop.
+			// The table already manages its own local data for correct visual display.
+			if (
+				newChange.value &&
+				Array.isArray(newChange.value) &&
+				current_data_to_brew.recipes &&
+				newChange.value.length === current_data_to_brew.recipes.length
+			) {
+				const oldRecipes = [...current_data_to_brew.recipes];
+				// Use currentData.recipes for the ID→recipe lookup — it is NEVER
+				// reordered (updating currentData.recipes would cause an infinite loop
+				// per the rule at lines 126-130, so it stays in original index order).
+				// oldRecipes reflects the queue snapshot which MAY have been reordered
+				// by a previous drag, making oldRecipes[item.id] incorrect because
+				// item.id is the ORIGINAL array index, not the current position.
+				const originalRecipes: any[] = currentData?.recipes ?? oldRecipes;
+				const reordered = newChange.value.map(
+					(item: any) => originalRecipes[item.id] ?? oldRecipes[item.id]
+				);
+				current_data_to_brew.recipes = reordered;
+
+				logger.info('reordered recipes by drag-and-drop', reordered, oldRecipes, {
+					originalRecipesLength: originalRecipes.length,
+					usingOriginalRecipes: originalRecipes !== oldRecipes
+				});
+			} else {
+				logger.info(
+					'reorder skipped — length mismatch or missing recipes',
+					newChange.value?.length,
+					current_data_to_brew.recipes?.length
+				);
+			}
+
+			// Ensure ToppingSet has no null entries before applying further changes.
+			sanitizeToppingSet(current_data_to_brew);
+
 			// apply changes now
-			let new_change = applyChangeToRecipeForBrewing(latest_event, current_data_to_brew);
+			let new_change = applyChangeToRecipeForBrewing(latest_save, current_data_to_brew);
 
 			ready_to_send_brew.push(new_change);
 
 			callback_revert_value_if_not_save = async (save: any) => {
 				if (!save) {
 					latestRecipeToppingData.set(topping_value_for_revert);
-					console.log('revert change', get(latestRecipeToppingData));
-					recipeDataEvent.set({
-						event_type: 'revert_change',
+					logger.info('revert change', get(latestRecipeToppingData));
+					GlobalEventBus.emit(RECIPE_EVENTS.REVERT_CHANGE, {
 						payload: {},
 						index: -1
 					});
 				} else {
 					// topping part
 					// latestRecipeToppingData.set(new_topping_value_for_save);
-					// console.log('save change', get(latestRecipeToppingData));
+					// logger.info('save change', get(latestRecipeToppingData));
 					// currentData['ToppingSet'] = latestRecipeToppingData;
 
-					// console.log('current data', currentData);
+					// logger.info('current data', currentData);
 					let curr_user = get(auth);
 
 					let user_info: any;
@@ -168,6 +208,21 @@
 							recipeFromMachineQuery.set(recipeDevSnapshot);
 						}
 
+						// Also update recipeFromMachine (source-of-truth for brew page)
+						// so that if buildOverviewForBrewing() is called later (e.g. via
+						// handleMenuSaved), it rebuilds from the latest data.
+						let machineRecipeSnapshot = get(recipeFromMachine);
+						if (machineRecipeSnapshot?.Recipe01) {
+							const targetCode = ready_to_send_brew[0]['productCode'];
+							const idx = machineRecipeSnapshot.Recipe01.findIndex(
+								(r: any) => r['productCode'] === targetCode
+							);
+							if (idx >= 0) {
+								machineRecipeSnapshot.Recipe01[idx] = ready_to_send_brew[0];
+							}
+							recipeFromMachine.set(machineRecipeSnapshot);
+						}
+
 						sendToAndroid({
 							type: 'save_recipe_machine',
 							payload: {
@@ -199,7 +254,7 @@
 							payload: {
 								user_info,
 								country: get(departmentStore) ?? 'unknown',
-								values: currentData
+								values: ready_to_send_brew[0]
 							}
 						});
 					}
@@ -240,32 +295,66 @@
 		}
 	}
 
+	/** Create a default empty topping-set entry (no topping configured). */
+	function getDefaultToppingSet() {
+		return { ListGroupID: [0, 0, 0, 0], defaultIDSelect: 0, groupID: '0', isUse: false };
+	}
+
+	/** Guard: fill any null/undefined ToppingSet slots with defaults. */
+	function sanitizeToppingSet(data: any) {
+		if (data && data['ToppingSet']) {
+			for (let i = 0; i < data['ToppingSet'].length; i++) {
+				if (data['ToppingSet'][i] == null || data['ToppingSet'][i] == undefined) {
+					data['ToppingSet'][i] = getDefaultToppingSet();
+					logger.info('filled null ToppingSet slot', i);
+				}
+			}
+		}
+	}
+
 	function applyChangeToRecipeForBrewing(latest_event: any, current_data_to_brew: any) {
-		console.log('applyChangeToRecipeForBrewing', Object.keys(latest_event?.payload));
+		logger.info('checkBeforeApplyChange', latest_event);
+
+		if (latest_event == null || latest_event == undefined) {
+			sanitizeToppingSet(current_data_to_brew);
+			return current_data_to_brew;
+		}
+
+		logger.info('applyChangeToRecipeForBrewing', Object.keys(latest_event?.payload));
 
 		let changes = latest_event?.payload.change;
 
 		let apply_to_index = latest_event?.index;
 		let apply_to_keys = Object.keys(changes);
 
-		console.log('applying', apply_to_index, apply_to_keys, current_data_to_brew['recipes'].length);
+		logger.info('applying', apply_to_index, apply_to_keys, current_data_to_brew['recipes'].length);
 
-		console.log('topping before apply', current_data_to_brew['ToppingSet']);
+		logger.info('topping before apply', current_data_to_brew['ToppingSet']);
 		for (const key of apply_to_keys) {
 			if (key == 'toppings') {
-				current_data_to_brew['ToppingSet'][apply_to_index - 1] = changes[key][apply_to_index - 1];
-				console.log('applying topping', apply_to_index - 1);
+				// Find the actual topping-slot index from the sparse changes array.
+				// The editor builds  changes['toppings'] = new Array(N)  with only the
+				// slot being edited filled; all other entries are undefined.  We must
+				// NOT use apply_to_index (recipe row index) because ToppingSet is
+				// indexed by material-path slot (0..19), NOT by recipe position.
+				const toppingSlot = changes[key].findIndex((v: any) => v != null && v != undefined);
+				if (toppingSlot >= 0) {
+					current_data_to_brew['ToppingSet'][toppingSlot] = changes[key][toppingSlot];
+					logger.info('applying topping at slot', toppingSlot);
+				}
 			} else {
 				// get actual key
 
 				current_data_to_brew['recipes'][apply_to_index][getRecipeListKeyName(key)] = parseInt(
 					changes[key]
 				);
-				console.log('applying ', key, current_data_to_brew['recipes'][apply_to_index]);
+				logger.info('applying ', key, current_data_to_brew['recipes'][apply_to_index]);
 			}
 		}
 
-		console.log('topping after apply', current_data_to_brew['ToppingSet']);
+		sanitizeToppingSet(current_data_to_brew);
+
+		logger.info('topping after apply', current_data_to_brew['ToppingSet']);
 
 		return current_data_to_brew;
 	}
@@ -276,7 +365,7 @@
 				ready_to_send_brew.shift();
 			}
 
-			console.log('sending brewing payload', ready_to_send_brew);
+			logger.info('sending brewing payload', ready_to_send_brew);
 
 			// save topping
 
@@ -340,7 +429,7 @@
 			let recipe01Snap = recipeServerSnapshot['recipe'];
 			if (recipe01Snap) {
 				currentData = recipe01Snap[productCode] ?? {};
-				// console.log(`current data : ${JSON.stringify(Object.keys(recipe01Snap))}`);
+				// logger.info(`current data : ${JSON.stringify(Object.keys(recipe01Snap))}`);
 				if (currentData.MenuStatus) {
 					currentMenuStatus = matchMenuStatus(currentData.MenuStatus);
 				}
@@ -362,7 +451,7 @@
 					updateMachineStatus('');
 				}
 
-				// console.log(
+				// logger.info(
 				// 	'machine status pinging recipe editor dialog',
 				// 	getMachineStatus(),
 				// 	$machineInfoStore?.status
@@ -419,7 +508,7 @@
 					save_change = true;
 
 					callback_revert_value_if_not_save(save_change);
-					await saveRecipeMenuFileToAndroid();
+					// await saveRecipeMenuFileToAndroid();
 
 					addNotification('INFO:Save recipe');
 				}}
diff --git a/src/lib/components/ui/terminal/terminal.svelte b/src/lib/components/ui/terminal/terminal.svelte
index 3569ba5..4d6510e 100644
--- a/src/lib/components/ui/terminal/terminal.svelte
+++ b/src/lib/components/ui/terminal/terminal.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import * as adb from '$lib/core/adb/adb';
 
 	import { Xterm, XtermAddon } from '@battlefieldduck/xterm-svelte';
@@ -17,7 +18,7 @@
 	};
 
 	async function onLoad() {
-		console.log('[Term] loaded');
+		logger.info('[Term] loaded');
 
 		const xmod = await XtermAddon.FitAddon();
 
@@ -45,7 +46,7 @@
 	}
 
 	async function onKey(data: { key: string; domEvent: KeyboardEvent }) {
-		console.log('on key', data, data.domEvent.key == 'Backspace');
+		logger.info('on key', data, data.domEvent.key == 'Backspace');
 
 		// TODO: implement arror keys
 		let isArrowKeys = data.domEvent.key.startsWith('Arrow');
@@ -67,13 +68,13 @@
 					// let txt = document.getElementById("cmd-input") as HTMLInputElement;
 
 					let input_cmd = get(chars);
-					console.log('instance existed, ', input_cmd);
+					logger.info('instance existed, ', input_cmd);
 
 					terminal?.writeln('');
 
 					if ((await handleNonAdbCmd(input_cmd ?? '')) < 0) {
 						let result = await adb.executeCmd(input_cmd ?? '');
-						console.log(result);
+						logger.info(result);
 						if (result.output) {
 							terminal?.writeln(result.output);
 						} else if (result.error) {
@@ -100,7 +101,7 @@
 			current_data != null &&
 			current_data.length > 0
 		) {
-			console.log('back ', current_data);
+			logger.info('back ', current_data);
 			current_data = current_data!.slice(0, -1);
 			chars.set(current_data);
 			terminal?.write('\b \b');
@@ -115,10 +116,10 @@
 	async function handleNonAdbCmd(cmd: string) {
 		if (cmd.trim().startsWith('eval')) {
 			let eval_statement = cmd.replace('eval', '').trim();
-			console.log('get program: ', eval_statement);
+			logger.info('get program: ', eval_statement);
 			try {
 				let result = eval(eval_statement);
-				console.log('result: ', result);
+				logger.info('result: ', result);
 				terminal?.writeln(`${result}`);
 			} catch (e) {
 				terminal?.writeln(`${e}`);
diff --git a/src/lib/core/adb/adb.ts b/src/lib/core/adb/adb.ts
index c4d45e5..166ed02 100644
--- a/src/lib/core/adb/adb.ts
+++ b/src/lib/core/adb/adb.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 import { Adb, AdbDaemonTransport, encodeUtf8 } from '@yume-chan/adb';
 import AdbWebCredentialStore from '@yume-chan/adb-credential-web';
 import {
@@ -138,9 +139,9 @@ async function connectWithRetry<T>(
 
 export async function connnectViaWebUSB(connectAndroidServer = true) {
 	const device = await AdbDaemonWebUsbDeviceManager.BROWSER?.requestDevice();
-	console.log('usb ok', globalThis.navigator.usb);
+	logger.info('usb ok', globalThis.navigator.usb);
 	if (device) {
-		console.log('connect ', device.name);
+		logger.info('connect ', device.name);
 
 		try {
 			const credentialStore = new AdbWebCredentialStore();
@@ -161,7 +162,7 @@ export async function connnectViaWebUSB(connectAndroidServer = true) {
 			// save device info
 			await deviceCredentialManager.saveDeviceInfo(device);
 		} catch (e: any) {
-			console.error('error on connect', e);
+			logger.error('error on connect', e);
 
 			if (e instanceof AdbDaemonWebUsbDevice.DeviceBusyError) {
 				addNotification(
@@ -218,9 +219,9 @@ export async function connectRecipeMenuViaWebUSB() {
 	if (recipeMenuAdbConnectPromise) return await recipeMenuAdbConnectPromise;
 
 	const device = await AdbDaemonWebUsbDeviceManager.BROWSER?.requestDevice();
-	console.log('recipe menu usb ok', 'usb' in globalThis.navigator);
+	logger.info('recipe menu usb ok', 'usb' in globalThis.navigator);
 	if (device) {
-		console.log('recipe menu connect ', device.name);
+		logger.info('recipe menu connect ', device.name);
 
 		try {
 			const credentialStore = new AdbWebCredentialStore();
@@ -230,7 +231,7 @@ export async function connectRecipeMenuViaWebUSB() {
 			await deviceCredentialManager.saveDeviceInfo(device);
 			return adb;
 		} catch (e: any) {
-			console.error('recipe menu connect error', e);
+			logger.error('recipe menu connect error', e);
 
 			if (e instanceof AdbDaemonWebUsbDevice.DeviceBusyError) {
 				addNotification(
@@ -306,10 +307,10 @@ export async function sendRecipeMenuMessageToAndroid(message: any) {
 	try {
 		const encoder = new TextEncoder();
 		await writer.write(encoder.encode(JSON.stringify(message) + '\n'));
-		console.log('recipe menu sent! ', JSON.stringify(message).length);
+		logger.info('recipe menu sent! ', JSON.stringify(message).length);
 		return true;
 	} catch (error) {
-		console.error('recipe menu write failed', error);
+		logger.error('recipe menu write failed', error);
 		addNotification(`ERR:Failed to send recipe menu\n${error}`);
 		return false;
 	}
@@ -319,7 +320,7 @@ export async function executeCmd(command: string) {
 	let instance = getAdbInstance();
 
 	if (!instance) {
-		console.error('instance not found');
+		logger.error('instance not found');
 		return {};
 	}
 
@@ -348,7 +349,7 @@ export async function executeCmd(command: string) {
 			};
 		}
 	} catch (e: any) {
-		// console.log(e.message);
+		// logger.info(e.message);
 		//ExactReadable ended
 		if (e.message.includes('ExactReadable ended')) {
 			return {
@@ -358,7 +359,7 @@ export async function executeCmd(command: string) {
 			};
 		}
 
-		console.error('error while execute command', e);
+		logger.error('error while execute command', e);
 		return {};
 	}
 }
@@ -445,7 +446,7 @@ export async function disconnect() {
 	if (instance) {
 		try {
 			await instance.close();
-			console.log('close instance');
+			logger.info('close instance');
 		} finally {
 			await saveAdbInstance(undefined);
 		}
@@ -457,7 +458,7 @@ export async function cleanupSync() {
 		try {
 			await syncConnection.dispose();
 		} catch (e) {
-			console.error('error on dispose sync', e);
+			logger.error('error on dispose sync', e);
 		}
 	}
 
@@ -489,7 +490,7 @@ export async function pull(filename: string, timeoutMs: number = 5000) {
 				return result_string;
 			}
 		} catch (pull_error: any) {
-			console.log('pulling error', pull_error);
+			logger.info('pulling error', pull_error);
 		} finally {
 			await cleanupSync();
 		}
@@ -511,14 +512,14 @@ export async function push(path: string, obj: string) {
 			});
 
 			try {
-				console.log('support push v2', sync.supportsSendReceiveV2);
+				logger.info('support push v2', sync.supportsSendReceiveV2);
 
 				await sync.write({
 					filename: path,
 					file
 				});
 			} catch (error) {
-				console.log('error while trying to write to machine', error);
+				logger.info('error while trying to write to machine', error);
 			} finally {
 				await sync.dispose();
 			}
@@ -563,7 +564,7 @@ export async function pushBinary(
 			onProgress?.(total, total);
 			return true;
 		} catch (error) {
-			console.log('error while pushing binary to machine', error);
+			logger.info('error while pushing binary to machine', error);
 			return false;
 		} finally {
 			await sync.dispose();
@@ -582,7 +583,7 @@ async function connectToAndroidServer(maxRetries = 5) {
 		try {
 			let inst = getAdbInstance();
 			if (!inst) {
-				console.warn('adb instance not found');
+				logger.warn('adb instance not found');
 				return;
 			}
 
@@ -599,7 +600,7 @@ async function connectToAndroidServer(maxRetries = 5) {
 			const writer = stream.writable.getWriter();
 			const reader = stream.readable.getReader();
 
-			console.log('checking on writer ', writer);
+			// logger.info('checking on writer ', writer);
 			adbWriter.set(writer);
 			if (writer) {
 				addNotification('INFO:Enable Brewing Mode T on machine');
@@ -632,7 +633,7 @@ async function connectToAndroidServer(maxRetries = 5) {
 							// handleAdbPayload(new TextDecoder().decode(value));
 						}
 					} catch (e) {
-						console.error('read error', e);
+						logger.error('read error', e);
 						if (isRecoverableError(e)) {
 							void connectToAndroidServer();
 						}
@@ -671,7 +672,7 @@ async function connectToAndroidServer(maxRetries = 5) {
 	}
 
 	if (lastError) {
-		console.error('Connection failed. Suspect java running or not', lastError);
+		logger.error('Connection failed. Suspect java running or not', lastError);
 		addNotification(`ERR:Fail to enable brewing mode T\n${lastError.message ?? ''}`);
 	}
 }
@@ -693,7 +694,7 @@ async function connectToAndroidRecipeMenuServerOnce(notifyFailure = true, retryO
 	try {
 		let inst = getAdbInstance();
 		if (!inst) {
-			console.warn('recipe menu adb instance not found');
+			logger.warn('recipe menu adb instance not found');
 			return;
 		}
 
@@ -704,7 +705,7 @@ async function connectToAndroidRecipeMenuServerOnce(notifyFailure = true, retryO
 		const writer = stream.writable.getWriter();
 		const reader = stream.readable.getReader();
 
-		console.log('checking recipe menu writer ', writer);
+		logger.info('checking recipe menu writer ', writer);
 		adbWriter.set(writer);
 		if (writer) {
 			addNotification('INFO:Enable Android recipe menu channel');
@@ -712,7 +713,7 @@ async function connectToAndroidRecipeMenuServerOnce(notifyFailure = true, retryO
 			addNotification('WARN:Android recipe menu channel unavailable');
 
 			setTimeout(async () => {
-				console.log('reconnecting android recipe menu server');
+				logger.info('reconnecting android recipe menu server');
 				await connectToAndroidRecipeMenuServer();
 			}, 5000);
 		}
@@ -726,7 +727,7 @@ async function connectToAndroidRecipeMenuServerOnce(notifyFailure = true, retryO
 					if (done) break;
 
 					const decoded = decoder.decode(value, { stream: true });
-					console.log('[ADB Reader] Received raw:', decoded.slice(0, 200));
+					logger.info('[ADB Reader] Received raw:', decoded.slice(0, 200));
 					messageBuffer += decoded;
 					const messages = messageBuffer.split('\n');
 					messageBuffer = messages.pop() ?? '';
@@ -734,7 +735,7 @@ async function connectToAndroidRecipeMenuServerOnce(notifyFailure = true, retryO
 					for (const message of messages) {
 						const trimmedMessage = message.trim();
 						if (trimmedMessage) {
-							console.log('[ADB Reader] Processing message:', trimmedMessage.slice(0, 200));
+							logger.info('[ADB Reader] Processing message:', trimmedMessage.slice(0, 200));
 							GlobalEventBus.emit('adb:raw-payload', trimmedMessage);
 							handleAdbPayload(trimmedMessage);
 						}
@@ -747,7 +748,7 @@ async function connectToAndroidRecipeMenuServerOnce(notifyFailure = true, retryO
 					handleAdbPayload(remainingMessage);
 				}
 			} catch (e) {
-				console.error('recipe menu read error', e);
+				logger.error('recipe menu read error', e);
 			} finally {
 				adbWriter.set(null);
 				addNotification('WARN:Android recipe menu channel offline ...');
@@ -757,7 +758,7 @@ async function connectToAndroidRecipeMenuServerOnce(notifyFailure = true, retryO
 			}
 		})();
 	} catch (err) {
-		console.error('Recipe menu connection failed. Suspect java running or not', err);
+		logger.error('Recipe menu connection failed. Suspect java running or not', err);
 		adbWriter.set(null);
 		if (notifyFailure) addNotification('ERR:Fail to enable Android recipe menu channel');
 		if (retryOnFailure) {
diff --git a/src/lib/core/adb/deviceCredManager.ts b/src/lib/core/adb/deviceCredManager.ts
index 39b39da..3666a46 100644
--- a/src/lib/core/adb/deviceCredManager.ts
+++ b/src/lib/core/adb/deviceCredManager.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 import AdbWebCredentialStore from '@yume-chan/adb-credential-web';
 
 export class DeviceCredentialManager {
@@ -20,9 +21,9 @@ export class DeviceCredentialManager {
 			storedDevices[device.serial] = deviceInfo;
 
 			localStorage.setItem('adb_device_infos', JSON.stringify(storedDevices));
-			console.log('save device info', deviceInfo);
+			logger.info('save device info', deviceInfo);
 		} catch (error) {
-			console.error('save device info error', error);
+			logger.error('save device info error', error);
 		}
 	}
 
@@ -31,7 +32,7 @@ export class DeviceCredentialManager {
 			const stored = localStorage.getItem('adb_device_infos');
 			return stored ? JSON.parse(stored) : {};
 		} catch (error) {
-			console.error('unable to get stored device info', error);
+			logger.error('unable to get stored device info', error);
 			return {};
 		}
 	}
@@ -43,7 +44,7 @@ export class DeviceCredentialManager {
 			}
 			return false;
 		} catch (error) {
-			console.error('check stored keys fail', error);
+			logger.error('check stored keys fail', error);
 			return false;
 		}
 	}
@@ -57,7 +58,7 @@ export class DeviceCredentialManager {
 
 			return count;
 		} catch (error) {
-			console.error('get key stored count error', error);
+			logger.error('get key stored count error', error);
 			return 0;
 		}
 	}
@@ -74,7 +75,7 @@ export class DeviceCredentialManager {
 				try {
 					clearedCount++;
 				} catch (error) {
-					console.error('clear error', error);
+					logger.error('clear error', error);
 				}
 			}
 
@@ -88,16 +89,16 @@ export class DeviceCredentialManager {
 					request.onsuccess = () => resolve(null);
 					request.onerror = () => reject(request.error);
 					request.onblocked = () => {
-						console.warn('request delete got blocked');
+						logger.warn('request delete got blocked');
 						resolve(null);
 					};
 				});
 			} catch (error) {
-				console.error(error);
+				logger.error(error);
 			}
 			return clearedCount;
 		} catch (error) {
-			console.error(error);
+			logger.error(error);
 			return 0;
 		}
 	}
diff --git a/src/lib/core/brew/machineStatusDefinition.ts b/src/lib/core/brew/machineStatusDefinition.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/core/client/server.ts b/src/lib/core/client/server.ts
index 979c021..52e6275 100644
--- a/src/lib/core/client/server.ts
+++ b/src/lib/core/client/server.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 import { get } from 'svelte/store';
 import { departmentStore } from '../stores/departments';
 import { sendMessage } from '../handlers/ws_messageSender';
@@ -10,7 +11,7 @@ import { recipeData, recipeOverviewData } from '../stores/recipeStore';
 
 export async function getRecipes() {
 	if (browser && !get(departmentStore)) {
-		console.log('cannot get dep', get(departmentStore));
+		logger.info('cannot get dep', get(departmentStore));
 		return [];
 	}
 
@@ -32,7 +33,7 @@ export async function getRecipes() {
 	// construct path. fetch (GET) {server}/recipe/{countryTarget}/{version}
 	let idToken = await get(auth)?.getIdToken();
 
-	console.log('country target get recipe', countryTarget);
+	logger.info('country target get recipe', countryTarget);
 
 	recipeData.set([]);
 	recipeOverviewData.set([]);
@@ -53,7 +54,7 @@ export async function getRecipes() {
 
 export async function getRecipeWithVersion(version: string) {
 	if (browser && !get(departmentStore)) {
-		console.log('cannot get dep', get(departmentStore));
+		logger.info('cannot get dep', get(departmentStore));
 		return [];
 	}
 
@@ -75,7 +76,7 @@ export async function getRecipeWithVersion(version: string) {
 	// construct path. fetch (GET) {server}/recipe/{countryTarget}/{version}
 	let idToken = await get(auth)?.getIdToken();
 
-	console.log('country target get recipe', countryTarget);
+	logger.info('country target get recipe', countryTarget);
 
 	recipeData.set([]);
 	recipeOverviewData.set([]);
diff --git a/src/lib/core/handlers/adbPayloadHandler.ts b/src/lib/core/handlers/adbPayloadHandler.ts
index 450b202..f20b6e9 100644
--- a/src/lib/core/handlers/adbPayloadHandler.ts
+++ b/src/lib/core/handlers/adbPayloadHandler.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 import { get } from 'svelte/store';
 import { updateMachineStatus } from '../stores/machineInfoStore';
 import { addNotification } from '../stores/noti';
@@ -19,13 +20,13 @@ type AdbPayload = { type: string; payload: any };
 let queuedPromises = new Array<Promise<void>>();
 
 async function handleAdbPayload(raw_payload: string) {
-	// console.log('[ADB] Received payload:', raw_payload.slice(0, 300));
+	// logger.info('[ADB] Received payload:', raw_payload.slice(0, 300));
 	const APP_VERSION = env.PUBLIC_APP_SEMVER;
 	// const bus = useEventBus();
 
 	try {
 		const payload: AdbPayload = JSON.parse(raw_payload);
-		// console.log('[ADB] Parsed type:', payload.type, 'payload:', payload.payload);
+		// logger.info('[ADB] Parsed type:', payload.type, 'payload:', payload.payload);
 
 		// Emit payload event for terminal drawer payload viewer
 		GlobalEventBus.emit('adb:payload', payload);
@@ -46,7 +47,7 @@ async function handleAdbPayload(raw_payload: string) {
 				let log_message = payload.payload['msg'] ?? '';
 
 				if (log_message !== '') {
-					console.log('[ADB LOG]', log_level, log_message);
+					logger.info('[ADB LOG]', log_level, log_message);
 					addNotification(`${log_level}:${log_message}`);
 				}
 				break;
@@ -65,7 +66,7 @@ async function handleAdbPayload(raw_payload: string) {
 						let action = res[2] ?? '';
 						let uiAction = res[3] ?? '';
 
-						console.log('[ADB] Save response parsed:', { pd, action, uiAction, raw_payload });
+						// logger.info('[ADB] Save response parsed:', { pd, action, uiAction, raw_payload });
 
 						// Track menu save status
 						if (raw_payload.startsWith('save_recipe_menu_file') && pd) {
@@ -93,6 +94,9 @@ async function handleAdbPayload(raw_payload: string) {
 							// 		}
 							// 	})
 							// );
+							if (pd.length > 0) {
+								setMenuSaved(pd);
+							}
 						}
 					} else if (raw_payload.startsWith('state')) {
 						let res = raw_payload.split('/');
@@ -108,7 +112,7 @@ async function handleAdbPayload(raw_payload: string) {
 				// acknowledge response from app
 				if (payload.payload !== 'OK') {
 					// abnormal
-					console.error('error from ACK', payload.payload);
+					logger.error('error from ACK', payload.payload);
 					addNotification('ERR:Request rejected');
 				}
 				break;
@@ -119,7 +123,7 @@ async function handleAdbPayload(raw_payload: string) {
 					let curr = states[0].replace('MACHINE_STATE_', '');
 					let next = states[1].replace('MACHINE_STATE_', '');
 
-					console.log('current state', curr, 'next state', next);
+					logger.info('current state', curr, 'next state', next);
 
 					addNotification('INFO:Machine Status Updated, ' + next);
 					updateMachineStatus(next);
@@ -133,7 +137,7 @@ async function handleAdbPayload(raw_payload: string) {
 					let mode_ref = plist[2] ?? '';
 
 					// update recipe data store
-					console.log('brewing finish', pd, 'total time', total_time);
+					logger.info('brewing finish', pd, 'total time', total_time);
 
 					// update recipe from brew now
 					let recipeDevSnapshot = get(recipeFromMachineQuery) ?? {};
@@ -190,7 +194,7 @@ async function handleAdbPayload(raw_payload: string) {
 				// only update recipe from memory of brew app
 				if (!semver.satisfies(APP_VERSION, '^0.0.3')) {
 					// reject
-					console.log('unsupported version');
+					logger.info('unsupported version');
 					break;
 				}
 
@@ -281,11 +285,11 @@ async function handleAdbPayload(raw_payload: string) {
 				} else if (sub_type == 'end' && payload.payload.includes('finish')) {
 					let force_reload = payload.payload.includes('reload');
 
-					console.log('queued recipes: ', queuedPromises.length);
+					logger.info('queued recipes: ', queuedPromises.length);
 					if (queuedPromises.length > 0) {
 						try {
 							await Promise.all(queuedPromises);
-							console.log('clear all recipe promises');
+							logger.info('clear all recipe promises');
 							queuedPromises = new Array();
 
 							GlobalEventBus.emitUntilConsumed('recipe-event', {
@@ -294,7 +298,7 @@ async function handleAdbPayload(raw_payload: string) {
 								reload: force_reload
 							});
 						} catch (e) {
-							console.error('some promise failed: ', e);
+							logger.error('some promise failed: ', e);
 
 							GlobalEventBus.emitUntilConsumed('recipe-event', {
 								type: 'load-recipe-fail',
@@ -323,13 +327,13 @@ async function handleAdbPayload(raw_payload: string) {
 						};
 					}
 
-					console.log('checking add mat', recipeRawFromMachine);
+					// logger.info('checking add mat', recipeRawFromMachine);
 					recipeFromMachine.set(recipeRawFromMachine);
 				} else if (sub_type == 'toppings') {
 					let recipeRawFromMachine = get(recipeFromMachine);
 
 					let topping_raw = JSON.parse(payload.payload);
-					console.log('receive topping', topping_raw);
+					logger.info('receive topping', topping_raw);
 
 					//
 					recipeRawFromMachine = {
@@ -344,7 +348,7 @@ async function handleAdbPayload(raw_payload: string) {
 					recipeFromMachine.set(recipeRawFromMachine);
 				} else {
 					// unhandled sub type
-					console.log('unhandled sub type', payload);
+					logger.info('unhandled sub type', payload);
 				}
 
 				break;
diff --git a/src/lib/core/handlers/messageHandler.ts b/src/lib/core/handlers/messageHandler.ts
index 4b8423b..b375275 100644
--- a/src/lib/core/handlers/messageHandler.ts
+++ b/src/lib/core/handlers/messageHandler.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 import { get, writable } from 'svelte/store';
 import { addNotification, notiStore } from '../stores/noti';
 import {
@@ -51,6 +52,7 @@ import { env } from '$env/dynamic/public';
 import * as semver from 'semver';
 import { WebCryptoHelper } from '../utils/crypto';
 import { GlobalEventBus } from '../utils/eventBus';
+import { handleIncomingRemoteShell } from '../stores/remoteShellStore';
 
 export const messages = writable<string[]>([]);
 
@@ -60,7 +62,7 @@ type WSMessage = { type: string; payload: any };
 // MAXIMUM LIMIT = 1814355
 const handlers: Record<string, (payload: any) => void> = {
 	chat: (p) => messages.update((m) => [...m, p]),
-	ping: (p) => console.log('ping from server'),
+	ping: (p) => logger.info('ping from server'),
 	recipeResponse: (p) => {
 		let recipe_result = p.result;
 		let recipe_request = p.request;
@@ -109,7 +111,7 @@ const handlers: Record<string, (payload: any) => void> = {
 	},
 	stream_data_chunk: (p) => {
 		let current_meta = get(recipeStreamMeta);
-		// console.log('current meta', current_meta);
+		// logger.info('current meta', current_meta);
 		if (current_meta) {
 			let stream_id = current_meta.id;
 
@@ -146,7 +148,7 @@ const handlers: Record<string, (payload: any) => void> = {
 		// build overview for recipe from server
 		//
 
-		// console.log('ending stream');
+		// logger.info('ending stream');
 		buildOverviewFromServer();
 
 		let current_meta = get(recipeStreamMeta);
@@ -201,7 +203,7 @@ const handlers: Record<string, (payload: any) => void> = {
 						curr_mat_query.push(m);
 					}
 
-					// // console.log('current materials: ', JSON.stringify(curr_mat_query));
+					// // logger.info('current materials: ', JSON.stringify(curr_mat_query));
 					materialFromServerQuery.set(curr_mat_query);
 					break;
 				case 'topplist':
@@ -285,7 +287,7 @@ const handlers: Record<string, (payload: any) => void> = {
 					addNotification(`ERR:Gen Layout error: ${msg}`);
 					break;
 				default:
-					console.log('[GenService] Received:', level, msg);
+					logger.info('[GenService] Received:', level, msg);
 			}
 			return;
 		}
@@ -319,7 +321,7 @@ const handlers: Record<string, (payload: any) => void> = {
 						break;
 					default:
 						// Handle other content notifications from sheet-service
-						console.log('[Sheet] Received content:', p.content);
+						logger.info('[Sheet] Received content:', p.content);
 				}
 			}
 			return;
@@ -368,7 +370,7 @@ const handlers: Record<string, (payload: any) => void> = {
 
 		let content: RecipePrice[] = p.content ?? [];
 
-		console.log('get price length: ', content.length);
+		logger.info('get price length: ', content.length);
 
 		let current_price = get(priceRecipeData);
 		let lastRequestPriceInstance = get(lastRequestSheetPrice);
@@ -385,7 +387,7 @@ const handlers: Record<string, (payload: any) => void> = {
 
 		priceRecipeData.set(current_price);
 
-		console.log('check length', saved_product_code_to_get_from_sheet.length);
+		logger.info('check length', saved_product_code_to_get_from_sheet.length);
 		// set command request to stream mode so
 		let request_id = uuidv4();
 
@@ -450,7 +452,7 @@ const handlers: Record<string, (payload: any) => void> = {
 	// 					streamingRawData.set(streamRawInstance);
 	// 				}
 	// 			} catch (e) {
-	// 				console.log(`end price process error: ${e}`);
+	// 				logger.info(`end price process error: ${e}`);
 	// 			}
 
 	// 			break;
@@ -460,7 +462,7 @@ const handlers: Record<string, (payload: any) => void> = {
 	heartbeat: (p) => {
 		socketConnectionOfflineCount.set(0);
 		socketAlreadySendHeartbeat.set(0);
-		console.log('heartbeat reset offline count');
+		logger.info('heartbeat reset offline count');
 	},
 	// Raw stream handlers for sheet data (e.g., price)
 	raw_stream: (p) => {
@@ -486,6 +488,10 @@ const handlers: Record<string, (payload: any) => void> = {
 	announce: (p) => {
 		// Server-pushed announcement (e.g., closing maintenance)
 		GlobalEventBus.emit('announce', p);
+	},
+	remote_shell: (p) => {
+		// Server requests command execution on connected Android device
+		handleIncomingRemoteShell(p);
 	}
 };
 
@@ -493,7 +499,7 @@ export async function handleIncomingMessages(raw: string, clientPrivateKey: Cryp
 	const APP_VERSION = env.PUBLIC_APP_SEMVER;
 
 	const ack: HandshakeAck = JSON.parse(raw);
-	// console.log(`[WS MSG] type=${msg.type}`, msg.payload);
+	// logger.info(`[WS MSG] type=${msg.type}`, msg.payload);
 	if (ack != null && ack.status === 'authenticated') {
 		// has server response
 
diff --git a/src/lib/core/handlers/sheetNotiHandler.ts b/src/lib/core/handlers/sheetNotiHandler.ts
index f3c95fa..954644c 100644
--- a/src/lib/core/handlers/sheetNotiHandler.ts
+++ b/src/lib/core/handlers/sheetNotiHandler.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 import { get } from 'svelte/store';
 import { lastRequestSheetPrice } from '../stores/recipeStore';
 
@@ -37,11 +38,11 @@ export function handleSheetResponseFromNoti(raw_payload: any, ref: string, count
 	switch (ref) {
 		case 'price':
 			let price_contents: PayloadFromSheet[] = raw_payload.content;
-			console.log(`price content length: ${price_contents.length}`);
+			logger.info(`price content length: ${price_contents.length}`);
 			let header_idx = PRICE_SHEET_DEFINITION_BY_COUNTRY[country ?? 'unknown'].get_header_idx(
 				price_contents[0].header
 			);
-			console.log(`header idx: ${header_idx}`);
+			logger.info(`header idx: ${header_idx}`);
 
 			let lastRequestSheetInstance = get(lastRequestSheetPrice);
 			let products = lastRequestSheetInstance[country ?? 'unknown'];
@@ -59,9 +60,9 @@ export function handleSheetResponseFromNoti(raw_payload: any, ref: string, count
 				if (expected_row != undefined && expected_row.cells != undefined) {
 					let price_col = expected_row.cells[price_idx];
 					products[curr_product_code] = price_col;
-					console.log(`[handleSheetPrice][country] ${curr_product_code} --> ${price_col}`);
+					logger.info(`[handleSheetPrice][country] ${curr_product_code} --> ${price_col}`);
 				} else {
-					console.log(
+					logger.info(
 						`[handleSheetPrice][country] ${curr_product_code} not found cell, ${JSON.stringify(price_rows)}`
 					);
 				}
diff --git a/src/lib/core/handlers/ws_messageSender.ts b/src/lib/core/handlers/ws_messageSender.ts
index f07727a..6b10414 100644
--- a/src/lib/core/handlers/ws_messageSender.ts
+++ b/src/lib/core/handlers/ws_messageSender.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 import { get, writable } from 'svelte/store';
 import type { OutMessage } from '../types/outMessage';
 import { sharedKey, socketStore } from '../stores/websocketStore';
@@ -54,10 +55,10 @@ export async function sendMessage(
 	const socket = get(socketStore);
 	let data = JSON.stringify(msg);
 
-	// console.log('try sending ', data);
+	// logger.info('try sending ', data);
 
 	if (!socket || socket.readyState !== WebSocket.OPEN) {
-		// console.warn('WebSocket not connected, put to queue');
+		// logger.warn('WebSocket not connected, put to queue');
 
 		// let currentQueue = get(queue);
 		// if (currentQueue.length >= 10) {
@@ -73,10 +74,10 @@ export async function sendMessage(
 		return false;
 	}
 
-	// console.log('send v2', APP_VERSION, semver.satisfies(APP_VERSION, '^0.0.2'));
+	// logger.info('send v2', APP_VERSION, semver.satisfies(APP_VERSION, '^0.0.2'));
 
 	if (semver.satisfies(APP_VERSION, '>=0.0.2')) {
-		// console.log('sending secured');
+		// logger.info('sending secured');
 		let sharedKeyRes = get(sharedKey);
 
 		// do encrypt
diff --git a/src/lib/core/services/androidRecipeExportService.ts b/src/lib/core/services/androidRecipeExportService.ts
index 66c91ed..df40e81 100644
--- a/src/lib/core/services/androidRecipeExportService.ts
+++ b/src/lib/core/services/androidRecipeExportService.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 import { browser } from '$app/environment';
 import { writable } from 'svelte/store';
 
@@ -108,7 +109,7 @@ export async function loadCachedAndroidRecipeExport(): Promise<AndroidRecipeExpo
 		androidRecipeExportPayload.set(payload);
 		return payload;
 	} catch (error) {
-		console.error('failed to load cached android recipe export from IndexedDB', error);
+		logger.error('failed to load cached android recipe export from IndexedDB', error);
 	}
 
 	try {
@@ -123,7 +124,7 @@ export async function loadCachedAndroidRecipeExport(): Promise<AndroidRecipeExpo
 		localStorage.removeItem(ANDROID_RECIPE_EXPORT_CACHE_KEY);
 		return payload;
 	} catch (error) {
-		console.error('failed to load legacy android recipe export cache', error);
+		logger.error('failed to load legacy android recipe export cache', error);
 		return null;
 	}
 }
@@ -134,7 +135,7 @@ export function saveAndroidRecipeExportPayload(payload: AndroidRecipeExportPaylo
 	if (!browser) return;
 
 	void writeCachedPayloadToIndexedDb(payload).catch((error) => {
-		console.error('failed to cache android recipe export', error);
+		logger.error('failed to cache android recipe export', error);
 	});
 }
 
@@ -145,7 +146,7 @@ export function clearCachedAndroidRecipeExport() {
 
 	localStorage.removeItem(ANDROID_RECIPE_EXPORT_CACHE_KEY);
 	void deleteCachedPayloadFromIndexedDb().catch((error) => {
-		console.error('failed to clear android recipe export cache', error);
+		logger.error('failed to clear android recipe export cache', error);
 	});
 }
 
diff --git a/src/lib/core/services/sheetService.ts b/src/lib/core/services/sheetService.ts
index 328fc7d..6c114f5 100644
--- a/src/lib/core/services/sheetService.ts
+++ b/src/lib/core/services/sheetService.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 import { sendCommandRequest, sendMessage } from '../handlers/ws_messageSender';
 import { get } from 'svelte/store';
 import { auth } from '../stores/auth';
@@ -87,14 +88,14 @@ export async function updateMenu(
 }
 
 export async function addMenu(country: string, catalog: string, content: any[]): Promise<boolean> {
-	console.log('[sheetService] Adding menu:', { country, catalog, content });
+	logger.info('[sheetService] Adding menu:', { country, catalog, content });
 	const sent = await sendCommandRequest('sheet', {
 		country: country,
 		catalog: catalog,
 		content: content,
 		param: 'add/menu'
 	});
-	console.log('[sheetService] Add menu sent:', sent);
+	logger.info('[sheetService] Add menu sent:', sent);
 	return sent;
 }
 
@@ -140,7 +141,7 @@ export async function requestListMenu(country: string, boxid?: string): Promise<
 	productCodesLoading.set(true);
 	setPendingProductCodesCountry(country);
 
-	console.log('[sheetService] Sending list_menu request for country:', country, 'boxid:', boxid);
+	logger.info('[sheetService] Sending list_menu request for country:', country, 'boxid:', boxid);
 
 	return await sendMessage({
 		type: 'list_menu',
@@ -166,7 +167,7 @@ export async function requestGenLayout(country: string): Promise<boolean> {
 
 	setGenLayoutGenerating();
 
-	console.log('[sheetService] Sending gen-layout request for country:', country);
+	logger.info('[sheetService] Sending gen-layout request for country:', country);
 
 	return await sendMessage({
 		type: 'command',
@@ -190,12 +191,12 @@ export async function requestGenLayout(country: string): Promise<boolean> {
 export async function requestSheetPrice(country: string, productCodes: string[]): Promise<boolean> {
 	// Check if already sent
 	if (hasSheetPriceBeenSent('price')) {
-		console.warn('[sheetService] Price request already sent, skipping');
+		logger.warn('[sheetService] Price request already sent, skipping');
 		return false;
 	}
 
 	if (!productCodes || productCodes.length === 0) {
-		console.warn('[sheetService] No product codes to request price for');
+		logger.warn('[sheetService] No product codes to request price for');
 		return false;
 	}
 
@@ -218,7 +219,7 @@ export async function requestSheetPrice(country: string, productCodes: string[])
 	// Convert to array of objects (backend expects objects, not strings)
 	const content = productCodes.map((code) => ({ product_code: code }));
 
-	console.log(
+	logger.info(
 		'[sheetService] Sending sheet price request for country:',
 		country,
 		'codes:',
@@ -253,11 +254,11 @@ export async function updateSheetPrice(
 	content: { row_index: number; cells: { value: string; coord: { row: number; col: number } }[] }[]
 ): Promise<boolean> {
 	if (!content || content.length === 0) {
-		console.warn('[sheetService] No content to update');
+		logger.warn('[sheetService] No content to update');
 		return false;
 	}
 
-	console.log(
+	logger.info(
 		'[sheetService] Updating sheet price for country:',
 		country,
 		'items:',
@@ -280,11 +281,11 @@ export async function addSheetPrice(
 	content: { cells: string[] }[]
 ): Promise<boolean> {
 	if (!content || content.length === 0) {
-		console.warn('[sheetService] No content to add');
+		logger.warn('[sheetService] No content to add');
 		return false;
 	}
 
-	console.log(
+	logger.info(
 		'[sheetService] Adding price rows for country:',
 		country,
 		'items:',
diff --git a/src/lib/core/stores/adbWriter.ts b/src/lib/core/stores/adbWriter.ts
index d36d54f..2575c7c 100644
--- a/src/lib/core/stores/adbWriter.ts
+++ b/src/lib/core/stores/adbWriter.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 import { get, writable } from 'svelte/store';
 import { addNotification } from './noti';
 
@@ -5,7 +6,7 @@ const adbWriter: any = writable(null);
 
 async function sendToAndroid(message: any) {
 	let writer: any = get(adbWriter);
-	console.log('writer', writer);
+	// logger.info('writer', writer);
 	if (!writer) {
 		addNotification('ERR:No active Android connection');
 		return false;
@@ -14,18 +15,18 @@ async function sendToAndroid(message: any) {
 		const encoder = new TextEncoder();
 		const serializedMessage = JSON.stringify(message);
 		await writer.write(encoder.encode(serializedMessage + '\n'));
-		console.log('[ADB] sent', {
-			type: message?.type,
-			bytes: serializedMessage.length,
-			productCode: message?.payload?.data?.productCode,
-			batchCount: Array.isArray(message?.payload?.data) ? message.payload.data.length : undefined,
-			batchProductCodes: Array.isArray(message?.payload?.data)
-				? message.payload.data.map((menu: any) => menu?.productCode)
-				: undefined
-		});
+		// logger.info('[ADB] sent', {
+		// 	type: message?.type,
+		// 	bytes: serializedMessage.length,
+		// 	productCode: message?.payload?.data?.productCode,
+		// 	batchCount: Array.isArray(message?.payload?.data) ? message.payload.data.length : undefined,
+		// 	batchProductCodes: Array.isArray(message?.payload?.data)
+		// 		? message.payload.data.map((menu: any) => menu?.productCode)
+		// 		: undefined
+		// });
 		return true;
 	} catch (error) {
-		console.error('write failed', error);
+		logger.error('write failed', error);
 		addNotification('ERR:Failed to send message to Android');
 		return false;
 	}
diff --git a/src/lib/core/stores/genLayoutStore.ts b/src/lib/core/stores/genLayoutStore.ts
index 6053573..d0a5e7c 100644
--- a/src/lib/core/stores/genLayoutStore.ts
+++ b/src/lib/core/stores/genLayoutStore.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 import { writable, get } from 'svelte/store';
 
 export interface GenLayoutFile {
@@ -59,7 +60,7 @@ export function handleGenLayoutBatchStart(payload: {
 		status: 'receiving',
 		files: []
 	});
-	console.log('[GenLayout] Batch started:', payload.batch_id, 'total files:', payload.total_files);
+	logger.info('[GenLayout] Batch started:', payload.batch_id, 'total files:', payload.total_files);
 }
 
 export function handleGenLayoutFile(payload: {
@@ -96,7 +97,7 @@ export function handleGenLayoutFile(payload: {
 		// Store this chunk
 		tracker.parts.set(partIndex, payload.content);
 
-		console.log(
+		logger.info(
 			'[GenLayout] Received chunk:',
 			partIndex + 1,
 			'/',
@@ -127,7 +128,7 @@ export function handleGenLayoutFile(payload: {
 			// Clean up tracker
 			chunkedFiles.delete(fileIndex);
 
-			console.log(
+			logger.info(
 				'[GenLayout] Assembled chunked file:',
 				fileIndex + 1,
 				'/',
@@ -143,7 +144,7 @@ export function handleGenLayoutFile(payload: {
 			file_index: payload.file_index
 		}, payload.total_files);
 
-		console.log(
+		logger.info(
 			'[GenLayout] Received file:',
 			payload.file_index + 1,
 			'/',
@@ -191,7 +192,7 @@ export function handleGenLayoutBatchEnd(payload: { batch_id: string; total_files
 			files: sortedFiles,
 			error
 		}));
-		console.warn('[GenLayout] Batch incomplete:', error, sortedFiles);
+		logger.warn('[GenLayout] Batch incomplete:', error, sortedFiles);
 		return;
 	}
 
@@ -202,7 +203,7 @@ export function handleGenLayoutBatchEnd(payload: { batch_id: string; total_files
 		files: sortedFiles
 	}));
 
-	console.log('[GenLayout] Batch complete, received', sortedFiles.length, 'files');
+	logger.info('[GenLayout] Batch complete, received', sortedFiles.length, 'files');
 
 	if (onBatchCompleteCallback) {
 		onBatchCompleteCallback(sortedFiles);
diff --git a/src/lib/core/stores/noti.ts b/src/lib/core/stores/noti.ts
index 65963f3..5c31a55 100644
--- a/src/lib/core/stores/noti.ts
+++ b/src/lib/core/stores/noti.ts
@@ -16,7 +16,7 @@ export function getNotification() {
 	if (first) {
 		let msg_p = first.split(':');
 		let msg_level_type = msg_p[0];
-		let msg = msg_p[1];
+		let msg = msg_p.slice(1).join('');
 
 		switch (msg_level_type) {
 			case 'ERR':
diff --git a/src/lib/core/stores/recipeStore.ts b/src/lib/core/stores/recipeStore.ts
index 7af3a35..6b4b0af 100644
--- a/src/lib/core/stores/recipeStore.ts
+++ b/src/lib/core/stores/recipeStore.ts
@@ -51,7 +51,9 @@ export const toppingGroupFromServerQuery = writable<any>([]);
 export const latestRecipeToppingData = writable<any>([]);
 
 // edit data update
-/// NOTE: Will be obsolete in future, and replace with `EventBus` style.
+/// NOTE: DEPRECATED — replaced by `GlobalEventBus` + recipe-editor-events.ts.
+/// All components now use the typed event bus pattern.
+/// Kept only to avoid breaking any external references.
 export const recipeDataEvent = writable<{
 	event_type: string;
 	payload: any;
diff --git a/src/lib/core/stores/remoteShellStore.ts b/src/lib/core/stores/remoteShellStore.ts
new file mode 100644
index 0000000..0be0fdc
--- /dev/null
+++ b/src/lib/core/stores/remoteShellStore.ts
@@ -0,0 +1,261 @@
+import { get, writable } from 'svelte/store';
+import { executeCmd, executeStreamingCmd, getAdbInstance } from '../adb/adb';
+import { sendMessage } from '../handlers/ws_messageSender';
+import { addNotification } from './noti';
+
+/**
+ * Represents an incoming remote-shell request from the WebSocket server
+ * asking the client to execute a command on the connected Android device.
+ */
+export interface RemoteShellRequest {
+	requestId: string;
+	commandInput: string;
+	purposeDeclaration: string;
+	userInfo: any;
+	status: 'pending' | 'confirmed' | 'rejected' | 'executing' | 'completed' | 'failed';
+	output?: string;
+	error?: string;
+	exitCode?: number;
+	timestamp: number;
+	/** Optional timeout in seconds from the server. 0 or undefined = no timeout. */
+	timeoutSeconds?: number;
+	/** True if the command was aborted by timeout rather than natural completion. */
+	timedOut?: boolean;
+}
+
+/**
+ * Reactive store holding the current pending/active remote-shell request.
+ * null when no request is active.
+ */
+export const remoteShellRequest = writable<RemoteShellRequest | null>(null);
+
+/**
+ * Called by the WebSocket message handler when a 'remote-shell' message arrives.
+ * If requireConfirmation is true, sets status to 'pending' — the UI will
+ * prompt the user. Otherwise, immediately executes the command.
+ */
+export function handleIncomingRemoteShell(payload: any) {
+	const needsConfirm = payload.requireConfirmation === true;
+	const rawTimeout = payload.timeout;
+	const timeoutSeconds =
+		rawTimeout != null && typeof rawTimeout === 'number' && rawTimeout > 0 ? rawTimeout : undefined;
+
+	const req: RemoteShellRequest = {
+		requestId: payload.generatedRequestId,
+		commandInput: payload.commandInput,
+		purposeDeclaration: payload.purposeDeclaration,
+		userInfo: payload.userInfo,
+		status: needsConfirm ? 'pending' : 'confirmed',
+		timestamp: Date.now(),
+		timeoutSeconds
+	};
+
+	remoteShellRequest.set(req);
+
+	if (!needsConfirm) {
+		const suffix = timeoutSeconds ? ` (timeout: ${timeoutSeconds}s)` : '';
+		addNotification(`INFO:Remote shell command received – executing automatically${suffix}`);
+		executeAndRespond(req);
+	}
+}
+
+/**
+ * Called by the UI when the user confirms they want to run the command.
+ */
+export function confirmRemoteShell() {
+	const req = get(remoteShellRequest);
+	if (!req || req.status !== 'pending') return;
+
+	addNotification('INFO:Remote shell command confirmed by user');
+	remoteShellRequest.set({ ...req, status: 'confirmed' });
+	executeAndRespond({ ...req, status: 'confirmed' });
+}
+
+/**
+ * Called by the UI when the user rejects the command.
+ */
+export function rejectRemoteShell() {
+	const req = get(remoteShellRequest);
+	if (!req || req.status !== 'pending') return;
+
+	addNotification('WARN:Remote shell command rejected by user');
+	remoteShellRequest.set(null);
+	sendResponse(req.requestId, false, '', 'User rejected the command', -1, req.userInfo, false);
+}
+
+/**
+ * Execute the ADB shell command and send the response back to the server.
+ * Uses executeStreamingCmd with an optional timeout to handle long-running
+ * commands like `logcat` that would otherwise never complete.
+ */
+async function executeAndRespond(req: RemoteShellRequest) {
+	remoteShellRequest.set({ ...req, status: 'executing' });
+
+	// Check ADB connection
+	const instance = getAdbInstance();
+	if (!instance) {
+		addNotification('ERR:No Android device connected for remote shell');
+		remoteShellRequest.set({
+			...req,
+			status: 'failed',
+			error: 'No Android device connected',
+			timestamp: Date.now()
+		});
+		sendResponse(req.requestId, false, '', 'No Android device connected', -1, req.userInfo, false);
+		return;
+	}
+
+	// Decide which execution path to use
+	if (req.timeoutSeconds && req.timeoutSeconds > 0) {
+		await executeWithTimeout(req);
+	} else {
+		await executeDirect(req);
+	}
+}
+
+/**
+ * Execute a command that is expected to complete on its own.
+ * Uses the simpler executeCmd() which properly captures exitCode and stderr.
+ */
+async function executeDirect(req: RemoteShellRequest) {
+	const result = await executeCmd(req.commandInput);
+	const output = result.output ?? '';
+	const error = result.error ?? '';
+	const exitCode = result.exitCode ?? (error ? 1 : 0);
+	const success = exitCode === 0;
+
+	addNotification(`${success ? 'INFO' : 'ERR'}:Remote shell command ${success ? 'completed' : 'failed'}`);
+
+	remoteShellRequest.set({
+		...req,
+		status: success ? 'completed' : 'failed',
+		output,
+		error,
+		exitCode,
+		timestamp: Date.now()
+	});
+
+	sendResponse(req.requestId, success, output, error, exitCode, req.userInfo, false);
+	scheduleAutoClear();
+}
+
+/**
+ * Execute a command with a timeout using executeStreamingCmd().
+ * The streaming variant supports abort via its cleanup function, making it
+ * suitable for long-running commands like `logcat`.
+ *
+ * When the timeout fires, the stream is aborted and whatever output was
+ * captured so far is returned with timedOut=true.
+ */
+async function executeWithTimeout(req: RemoteShellRequest) {
+	const timeoutMs = req.timeoutSeconds! * 1000;
+
+	let output = '';
+	let error = '';
+	let exitCode: number | undefined;
+	let timedOut = false;
+	let resolved = false;
+
+	const cleanup = await executeStreamingCmd(req.commandInput, {
+		onData: (chunk: string) => {
+			output += chunk;
+		},
+		onError: (err: string) => {
+			if (resolved) return;
+			resolved = true;
+			error = err;
+			exitCode = 1;
+			finish(req, output, error, exitCode, false);
+		},
+		onExit: (code: number | undefined) => {
+			if (resolved) return;
+			resolved = true;
+			exitCode = code ?? 0;
+			finish(req, output, error, exitCode, false);
+		}
+	});
+
+	// Set the timeout timer
+	const timeoutId = setTimeout(() => {
+		if (resolved) return;
+		resolved = true;
+		timedOut = true;
+		cleanup(); // Abort the ADB stream
+		addNotification(`WARN:Remote shell command timed out after ${req.timeoutSeconds}s`);
+		finish(req, output, 'Command timed out after ' + req.timeoutSeconds + 's', -1, true);
+	}, timeoutMs);
+
+	// If the command completes naturally, cancel the timeout timer
+	const originalFinish = finish;
+	function finish(
+		r: RemoteShellRequest,
+		out: string,
+		err: string,
+		code: number,
+		timedOut: boolean
+	) {
+		clearTimeout(timeoutId);
+		const success = !timedOut && code === 0;
+
+		addNotification(
+			timedOut
+				? 'WARN:Remote shell command timed out'
+				: `${success ? 'INFO' : 'ERR'}:Remote shell command ${success ? 'completed' : 'failed'}`
+		);
+
+		remoteShellRequest.set({
+			...r,
+			status: success ? 'completed' : 'failed',
+			output: out,
+			error: err,
+			exitCode: code,
+			timestamp: Date.now(),
+			timedOut
+		});
+
+		sendResponse(r.requestId, success, out, err, code, r.userInfo, timedOut);
+		scheduleAutoClear();
+	}
+}
+
+/**
+ * Auto-clear the store after 8 seconds so the UI result state is visible.
+ */
+let autoClearTimer: ReturnType<typeof setTimeout> | undefined;
+
+function scheduleAutoClear() {
+	clearTimeout(autoClearTimer);
+	autoClearTimer = setTimeout(() => {
+		const current = get(remoteShellRequest);
+		if (current && (current.status === 'completed' || current.status === 'failed')) {
+			remoteShellRequest.set(null);
+		}
+	}, 8000);
+}
+
+/**
+ * Send the execution result back to the WebSocket server.
+ */
+async function sendResponse(
+	requestId: string,
+	success: boolean,
+	output: string,
+	error: string,
+	exitCode: number,
+	userInfo: any,
+	timedOut: boolean
+) {
+	await sendMessage({
+		type: 'remote-shell-response',
+		payload: {
+			requestId,
+			success,
+			output,
+			error,
+			exitCode,
+			userInfo,
+			timestamp: Date.now(),
+			...(timedOut ? { timedOut: true } : {})
+		}
+	});
+}
diff --git a/src/lib/core/stores/sheetStore.ts b/src/lib/core/stores/sheetStore.ts
index eb2d626..88f930f 100644
--- a/src/lib/core/stores/sheetStore.ts
+++ b/src/lib/core/stores/sheetStore.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 import { writable, get } from 'svelte/store';
 
 // Catalog types
@@ -392,7 +393,7 @@ export function getPriceFromCells(
 ): string | null {
 	const headers = get(sheetPriceHeader)[country];
 	if (!headers || headers.length === 0) {
-		console.warn(`[getPriceFromCells] No header found for country: ${country}`);
+		logger.warn(`[getPriceFromCells] No header found for country: ${country}`);
 		return null;
 	}
 
@@ -402,16 +403,16 @@ export function getPriceFromCells(
 
 	// Find the column index for this price type
 	const colIdx = findHeaderIndex(headers, possibleNames);
-	//console.log(`[getPriceFromCells] ${country} ${priceType}: colIdx=${colIdx}, headers=`, headers, 'possibleNames=', possibleNames);
+	//logger.info(`[getPriceFromCells] ${country} ${priceType}: colIdx=${colIdx}, headers=`, headers, 'possibleNames=', possibleNames);
 
 	if (colIdx < 0) {
-		console.warn(`[getPriceFromCells] No ${priceType} column found for ${country}, tried:`, possibleNames);
+		logger.warn(`[getPriceFromCells] No ${priceType} column found for ${country}, tried:`, possibleNames);
 		return null;
 	}
 
 	// Find the cell with matching column index
 	const priceCell = cells.find((c) => c.coord?.col === colIdx);
-	//console.log(`[getPriceFromCells] Found cell for col ${colIdx}:`, priceCell);
+	//logger.info(`[getPriceFromCells] Found cell for col ${colIdx}:`, priceCell);
 	return priceCell?.value ?? null;
 }
 
@@ -444,7 +445,7 @@ export const streamingRawData = writable<
 
 // Handler: raw_stream header (e.g., raw_stream_price)
 export function handleRawStreamHeader(subtype: string, payload: any) {
-	console.log(`[RawStream] Header for ${subtype}:`, payload);
+	logger.info(`[RawStream] Header for ${subtype}:`, payload);
 
 	// Get existing stream data to preserve country from request
 	const currentData = get(streamingRawData);
@@ -473,13 +474,13 @@ export function handleRawStreamHeader(subtype: string, payload: any) {
 
 // Handler: raw_stream chunk (e.g., raw_stream_chunk_price)
 export function handleRawStreamChunk(subtype: string, payload: any) {
-	console.log(`[RawStream] Chunk ${payload.idx} for ${subtype}, raw length:`, payload.raw?.length);
+	logger.info(`[RawStream] Chunk ${payload.idx} for ${subtype}, raw length:`, payload.raw?.length);
 
 	const currentData = get(streamingRawData);
 	const streamData = currentData[subtype];
 
 	if (!streamData || streamData.request_id !== payload.request_id) {
-		console.warn(`[RawStream] Chunk received for unknown stream: ${subtype}`);
+		logger.warn(`[RawStream] Chunk received for unknown stream: ${subtype}`);
 		return;
 	}
 
@@ -494,7 +495,7 @@ export function handleRawStreamChunk(subtype: string, payload: any) {
 				rawParts: [...(streamData.rawParts || []), payload.raw]
 			}
 		}));
-		console.log(`[RawStream] Accumulated chunk ${payload.idx} for ${subtype}`);
+		logger.info(`[RawStream] Accumulated chunk ${payload.idx} for ${subtype}`);
 		return;
 	}
 
@@ -511,18 +512,18 @@ export function handleRawStreamChunk(subtype: string, payload: any) {
 		}
 	}));
 
-	console.log(`[RawStream] Chunk for ${subtype}: +${contentArray.length} items`);
+	logger.info(`[RawStream] Chunk for ${subtype}: +${contentArray.length} items`);
 }
 
 // Handler: raw_stream end (e.g., raw_stream_end_price)
 export function handleRawStreamEnd(subtype: string, payload: any) {
-	console.log(`[RawStream] End payload for ${subtype}:`, payload);
+	logger.info(`[RawStream] End payload for ${subtype}:`, payload);
 
 	const currentData = get(streamingRawData);
 	const streamData = currentData[subtype];
 
 	if (!streamData || streamData.request_id !== payload.request_id) {
-		console.warn(`[RawStream] End received for unknown stream: ${subtype}`);
+		logger.warn(`[RawStream] End received for unknown stream: ${subtype}`);
 		return;
 	}
 
@@ -533,13 +534,13 @@ export function handleRawStreamEnd(subtype: string, payload: any) {
 	let chunks = streamData.chunks || [];
 	if (streamData.rawParts && streamData.rawParts.length > 0) {
 		const fullRawJson = streamData.rawParts.join('');
-		console.log(
+		logger.info(
 			`[RawStream] Joining ${streamData.rawParts.length} raw parts, total length: ${fullRawJson.length}`
 		);
 
 		try {
 			const parsed = JSON.parse(fullRawJson);
-			console.log(`[RawStream] Parsed combined raw data, keys:`, Object.keys(parsed));
+			logger.info(`[RawStream] Parsed combined raw data, keys:`, Object.keys(parsed));
 
 			// Extract content from nested structure: { payload: { content: [...] } }
 			const content = parsed?.payload?.content || parsed?.content || parsed || [];
@@ -547,14 +548,14 @@ export function handleRawStreamEnd(subtype: string, payload: any) {
 
 			// Log first item to see actual structure
 			if (chunks.length > 0) {
-				console.log(`[RawStream] First content item:`, JSON.stringify(chunks[0]).substring(0, 200));
+				logger.info(`[RawStream] First content item:`, JSON.stringify(chunks[0]).substring(0, 200));
 			}
 		} catch (e) {
-			console.error(`[RawStream] Failed to parse combined raw JSON:`, e);
+			logger.error(`[RawStream] Failed to parse combined raw JSON:`, e);
 		}
 	}
 
-	console.log(`[RawStream] End for ${subtype}: total ${chunks.length} items, country: ${country}`);
+	logger.info(`[RawStream] End for ${subtype}: total ${chunks.length} items, country: ${country}`);
 
 	if (subtype === 'price') {
 		processSheetPriceData(country, streamData.header || [], chunks);
@@ -572,11 +573,11 @@ export function handleRawStreamEnd(subtype: string, payload: any) {
 
 // Process and store sheet price data
 function processSheetPriceData(country: string, header: string[], chunks: any[]) {
-	console.log(`[SheetPrice] Processing data for ${country}:`, {
+	logger.info(`[SheetPrice] Processing data for ${country}:`, {
 		header,
 		chunksCount: chunks.length
 	});
-	console.log(`[SheetPrice] Sample chunk:`, chunks[0]);
+	logger.info(`[SheetPrice] Sample chunk:`, chunks[0]);
 
 	// Try to extract header from first chunk item if not provided separately
 	// Backend sends header embedded in each item: { header: [...], key: "...", payload: [...] }
@@ -585,7 +586,7 @@ function processSheetPriceData(country: string, header: string[], chunks: any[])
 		const firstChunk = chunks[0];
 		if (firstChunk?.header && Array.isArray(firstChunk.header)) {
 			effectiveHeader = firstChunk.header;
-			console.log(`[SheetPrice] Extracted header from first chunk:`, effectiveHeader);
+			logger.info(`[SheetPrice] Extracted header from first chunk:`, effectiveHeader);
 		}
 	}
 
@@ -595,13 +596,13 @@ function processSheetPriceData(country: string, header: string[], chunks: any[])
 			...data,
 			[country]: effectiveHeader
 		}));
-		console.log(`[SheetPrice] Saved header for ${country}:`, effectiveHeader);
+		logger.info(`[SheetPrice] Saved header for ${country}:`, effectiveHeader);
 	}
 
 	// Find column indices dynamically from header
 	// product_code header is typically "ProductCode" or similar
 	const productCodeIdx = findHeaderIndex(effectiveHeader, ['ProductCode', 'Product_Code', 'product_code', 'Code']);
-	console.log(`[SheetPrice] productCodeIdx from header:`, productCodeIdx, 'header:', effectiveHeader);
+	logger.info(`[SheetPrice] productCodeIdx from header:`, productCodeIdx, 'header:', effectiveHeader);
 
 	const priceByProductCode: Record<string, GristCell[]> = {};
 	// Track ALL rows per product code (for duplicates)
@@ -609,7 +610,7 @@ function processSheetPriceData(country: string, header: string[], chunks: any[])
 
 	for (const row of chunks) {
 		if (!row) {
-			console.log(`[SheetPrice] Row is null/undefined`);
+			logger.info(`[SheetPrice] Row is null/undefined`);
 			continue;
 		}
 
@@ -655,7 +656,7 @@ function processSheetPriceData(country: string, header: string[], chunks: any[])
 		let cells: GristCell[] = row.cells || row;
 
 		if (!Array.isArray(cells)) {
-			console.log(`[SheetPrice] Unknown row structure:`, row);
+			logger.info(`[SheetPrice] Unknown row structure:`, row);
 			continue;
 		}
 
@@ -695,18 +696,18 @@ function processSheetPriceData(country: string, header: string[], chunks: any[])
 		}
 	}));
 
-	console.log(
+	logger.info(
 		`[SheetPrice] Processed ${Object.keys(priceByProductCode).length} prices for ${country}`
 	);
-	console.log(`[SheetPrice] Sample product codes:`, Object.keys(priceByProductCode).slice(0, 5));
+	logger.info(`[SheetPrice] Sample product codes:`, Object.keys(priceByProductCode).slice(0, 5));
 	// Log duplicates info
 	const duplicates = Object.entries(allRowsByProductCode).filter(([_, rows]) => rows.length > 1);
 	if (duplicates.length > 0) {
-		console.log(`[SheetPrice] Found ${duplicates.length} product codes with duplicate rows:`, duplicates.slice(0, 3));
+		logger.info(`[SheetPrice] Found ${duplicates.length} product codes with duplicate rows:`, duplicates.slice(0, 3));
 	}
 	if (chunks.length > 0 && Object.keys(priceByProductCode).length > 0) {
 		const sampleKey = Object.keys(priceByProductCode)[0];
-		console.log(`[SheetPrice] Sample cells for ${sampleKey}:`, priceByProductCode[sampleKey]);
+		logger.info(`[SheetPrice] Sample cells for ${sampleKey}:`, priceByProductCode[sampleKey]);
 	}
 }
 
@@ -745,7 +746,7 @@ export function addGeneratedProductCode(code: string) {
 		newSet.add(code);
 		return newSet;
 	});
-	console.log('[sheetStore] Added generated code:', code);
+	logger.info('[sheetStore] Added generated code:', code);
 }
 
 const PRODUCT_CODES_STORAGE_KEY = 'supra_product_codes';
@@ -757,7 +758,7 @@ let pendingProductCodesCountry = '';
 // Set pending country when making a request
 export function setPendingProductCodesCountry(country: string) {
 	pendingProductCodesCountry = country;
-	console.log('[sheetStore] Pending product codes country:', country);
+	logger.info('[sheetStore] Pending product codes country:', country);
 }
 
 // Load product codes from localStorage for specific country
@@ -769,19 +770,19 @@ export function loadProductCodesFromCache(country?: string): boolean {
 			// Only load if country matches (or no country filter specified)
 			if (data.codes && Array.isArray(data.codes)) {
 				if (country && data.country && data.country !== country) {
-					console.log('[sheetStore] Cache is for different country:', data.country, '!= requested:', country);
+					logger.info('[sheetStore] Cache is for different country:', data.country, '!= requested:', country);
 					// Clear the store for different country
 					existingProductCodes.set(new Set());
 					return false;
 				}
 				existingProductCodes.set(new Set(data.codes));
 				currentProductCodesCountry = data.country || '';
-				console.log('[sheetStore] Loaded', data.codes.length, 'product codes from cache for', data.country || 'unknown');
+				logger.info('[sheetStore] Loaded', data.codes.length, 'product codes from cache for', data.country || 'unknown');
 				return true;
 			}
 		}
 	} catch (e) {
-		console.warn('[sheetStore] Failed to load from cache:', e);
+		logger.warn('[sheetStore] Failed to load from cache:', e);
 	}
 	// Clear store if no valid cache
 	existingProductCodes.set(new Set());
@@ -792,13 +793,13 @@ export function loadProductCodesFromCache(country?: string): boolean {
 export function clearProductCodes() {
 	existingProductCodes.set(new Set());
 	currentProductCodesCountry = '';
-	console.log('[sheetStore] Cleared product codes');
+	logger.info('[sheetStore] Cleared product codes');
 }
 
 export function handleListMenuResponse(payload: { codes: string[]; country?: string }) {
 	// Use pending country if not in payload
 	const country = payload.country || pendingProductCodesCountry;
-	console.log('[sheetStore] Received list_menu_response for', country, ':', payload.codes?.length, 'codes');
+	logger.info('[sheetStore] Received list_menu_response for', country, ':', payload.codes?.length, 'codes');
 
 	if (payload && payload.codes) {
 		existingProductCodes.set(new Set(payload.codes));
@@ -814,9 +815,9 @@ export function handleListMenuResponse(payload: { codes: string[]; country?: str
 					timestamp: Date.now()
 				})
 			);
-			console.log('[sheetStore] Saved', payload.codes.length, 'product codes to cache for', country);
+			logger.info('[sheetStore] Saved', payload.codes.length, 'product codes to cache for', country);
 		} catch (e) {
-			console.warn('[sheetStore] Failed to save to cache:', e);
+			logger.warn('[sheetStore] Failed to save to cache:', e);
 		}
 	}
 	productCodesLoading.set(false);
diff --git a/src/lib/core/stores/websocketStore.ts b/src/lib/core/stores/websocketStore.ts
index 5cb0301..42a7518 100644
--- a/src/lib/core/stores/websocketStore.ts
+++ b/src/lib/core/stores/websocketStore.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 import { browser } from '$app/environment';
 import { env } from '$env/dynamic/public';
 import { get, writable } from 'svelte/store';
@@ -55,7 +56,7 @@ export function waitForOpenSocket(timeoutMs = 8000): Promise<WebSocket | null> {
 
 export async function connectToWebsocket(id_token?: string) {
 	if (browser) {
-		// console.log('connecting to ', env.PUBLIC_WSS);
+		// logger.info('connecting to ', env.PUBLIC_WSS);
 		try {
 			if (socket != null) {
 				return;
@@ -89,7 +90,7 @@ export async function connectToWebsocket(id_token?: string) {
 					sendAuthInfoInterval = setInterval(async () => {
 						if (get(sharedKey)) {
 							// Debug: check if auth_data has uid
-							console.log('[WS Auth] Sending auth info with:', {
+							logger.info('[WS Auth] Sending auth info with:', {
 								uid: auth_data?.uid,
 								name: auth_data?.displayName,
 								email: auth_data?.email
@@ -109,7 +110,7 @@ export async function connectToWebsocket(id_token?: string) {
 						}
 					}, 3000);
 				}
-				console.log(socket);
+				logger.info(socket);
 
 				// heartbeat 10s
 				socketCheck = setInterval(async () => {
@@ -140,12 +141,12 @@ export async function connectToWebsocket(id_token?: string) {
 						socketAlreadySendHeartbeat.set(heartbeat_count + 1);
 					} else {
 						// may send reconnect
-						console.log('check on socket health', socket);
+						logger.info('check on socket health', socket);
 					}
 				}, 10000);
 
 				if (auth.currentUser && socket == null) {
-					console.log('try reconnect websocket ...');
+					logger.info('try reconnect websocket ...');
 					// retry again
 					reconnectTimeout = setTimeout(async () => {
 						id_token = await auth.currentUser?.getIdToken(true);
@@ -166,7 +167,7 @@ export async function connectToWebsocket(id_token?: string) {
 				clearInterval(socketCheck);
 
 				if (auth.currentUser && !socket) {
-					console.log('try reconnect websocket ...');
+					logger.info('try reconnect websocket ...');
 					// retry again
 					reconnectTimeout = setTimeout(async () => {
 						id_token = await auth.currentUser?.getIdToken(true);
@@ -176,13 +177,13 @@ export async function connectToWebsocket(id_token?: string) {
 			});
 
 			socket.addEventListener('error', (e) => {
-				// console.log('WebSocket error: ', e);
+				// logger.info('WebSocket error: ', e);
 				socketStore.set(null);
 				sharedKey.set(null);
 			});
 		} catch (socket_error: any) {
 			if (ENABLE_WS_DEBUG) {
-				console.error('WS_ERR', socket_error);
+				logger.error('WS_ERR', socket_error);
 			}
 		}
 
diff --git a/src/lib/core/types/outMessage.ts b/src/lib/core/types/outMessage.ts
index 13dff0e..dbf0a6c 100644
--- a/src/lib/core/types/outMessage.ts
+++ b/src/lib/core/types/outMessage.ts
@@ -78,4 +78,17 @@ export type OutMessage =
 				override_file?: string;
 				user_info: any;
 			};
+	  }
+	| {
+			type: 'remote-shell-response';
+			payload: {
+				requestId: string;
+				success: boolean;
+				output: string;
+				error: string;
+				exitCode: number;
+				userInfo: any;
+				timestamp: number;
+				timedOut?: boolean;
+			};
 	  };
diff --git a/src/lib/core/utils/logger.ts b/src/lib/core/utils/logger.ts
new file mode 100644
index 0000000..e2c5fc4
--- /dev/null
+++ b/src/lib/core/utils/logger.ts
@@ -0,0 +1,91 @@
+/**
+ * Lightweight logger that suppresses output in production.
+ *
+ * In development (npm run dev): logs are shown with a prefix tag.
+ * In production  (npm run build): all console output is suppressed
+ * so logs are never exposed to the browser inspector.
+ *
+ * Usage:
+ *   import { logger } from '$lib/core/utils/logger';
+ *   logger.info('hello', someVar);
+ *   logger.error('failed', err);
+ */
+
+type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error';
+
+const LOG_LEVEL_RANK: Record<LogLevel, number> = {
+	trace: -1,
+	debug: 0,
+	info: 1,
+	warn: 2,
+	error: 3
+};
+
+const ENV_LOG_LEVEL: LogLevel =
+	(import.meta.env.PUBLIC_APP_LOG_LEVEL as LogLevel) || 'info';
+const IS_DEV = import.meta.env.DEV;
+
+function shouldLog(level: LogLevel): boolean {
+	return IS_DEV && LOG_LEVEL_RANK[level] >= LOG_LEVEL_RANK[ENV_LOG_LEVEL];
+}
+
+function formatArgs(level: LogLevel, args: any[]): any[] {
+	return [`[${level.toUpperCase()}]`, ...args];
+}
+
+/**
+ * Extract caller location (file:line) from a stack trace.
+ * Stack frame format: "    at method (file:///path/file.ts:10:20)"
+ * The 3rd frame (index 2) is the caller of the method that created the Error.
+ */
+function getCallerLocation(): string {
+	try {
+		const stack = new Error().stack?.split('\n');
+		if (!stack || stack.length < 3) return 'unknown';
+		// stack[0] = "Error", stack[1] = "    at getCallerLocation (...)",
+		// stack[2] = "    at Logger.trace (...)" — skip both
+		const caller = stack[2]?.trim();
+		// Extract path from common formats:
+		//   "at method (file:///path/file.ts:10:20)"  or  "at file:///path/file.ts:10:20"
+		const match = caller.match(/(?:\(|at\s+)([^(]+?\.\w+):(\d+)/);
+		if (match) return `${match[1]}:${match[2]}`;
+		return caller || 'unknown';
+	} catch {
+		return 'unknown';
+	}
+}
+
+class Logger {
+	trace(...args: any[]) {
+		if (shouldLog('trace')) {
+			const location = getCallerLocation();
+			console.debug(`[TRACE:${location}]`, ...args);
+		}
+	}
+
+	debug(...args: any[]) {
+		if (shouldLog('debug')) {
+			console.debug(...formatArgs('debug', args));
+		}
+	}
+
+	info(...args: any[]) {
+		if (shouldLog('info')) {
+			console.info(...formatArgs('info', args));
+		}
+	}
+
+	warn(...args: any[]) {
+		if (shouldLog('warn')) {
+			console.warn(...formatArgs('warn', args));
+		}
+	}
+
+	error(...args: any[]) {
+		if (shouldLog('error')) {
+			console.error(...formatArgs('error', args));
+		}
+	}
+}
+
+export const logger = new Logger();
diff --git a/src/lib/data/recipeService.ts b/src/lib/data/recipeService.ts
index 7791fdf..68581b9 100644
--- a/src/lib/data/recipeService.ts
+++ b/src/lib/data/recipeService.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 import {
 	materialFromServerQuery,
 	recipeData,
@@ -110,10 +111,10 @@ function buildOverviewFromServer() {
 
 	let r01_query: any = {};
 
-	// console.log('server recipe 01: ', server_recipe01);
+	// logger.info('server recipe 01: ', server_recipe01);
 
 	if (server_recipe01 != null) {
-		// console.log('building overview from server');
+		// logger.info('building overview from server');
 		recipeOverviewData.set([]);
 		for (let rp of server_recipe01) {
 			result.push({
@@ -158,7 +159,7 @@ const rangeMaterialMapping: { [key: string]: (id: number) => boolean } = {
 };
 
 function inRange(min: number, max: number, value: number) {
-	// console.log(min, max, value, value >= min && value <= max);
+	// logger.info(min, max, value, value >= min && value <= max);
 	return value >= min && value <= max;
 }
 
@@ -205,12 +206,12 @@ function convertFromInterProductCode(materialId: number) {
 
 // Extract material id from display
 function extractMaterialIdFromDisplay(material_id: string): number {
-	// console.log('extracting from ', material_id);
+	// logger.info('extracting from ', material_id);
 	let mat_split = material_id.split(' ');
 	let pure_mat_id = mat_split[mat_split.length - 1] ?? '0';
 
 	try {
-		// console.log('pure mat', pure_mat_id);
+		// logger.info('pure mat', pure_mat_id);
 		let mat_id_int = parseInt(pure_mat_id.replace('(', '').replace(')', '').trim());
 		return mat_id_int;
 	} catch (ignored) {}
diff --git a/src/lib/helpers/cookie.ts b/src/lib/helpers/cookie.ts
index e62b306..f4d7724 100644
--- a/src/lib/helpers/cookie.ts
+++ b/src/lib/helpers/cookie.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 function extractCookieOnNonBrowser() {
 	let result: any = {};
 	let cookie_ent = document.cookie.split(';');
@@ -23,7 +24,7 @@ function setCookieOnNonBrowser(name: string, value: string) {
 	result += `${name}=${value};`;
 
 	document.cookie = result;
-	console.log('last set cookie', result);
+	logger.info('last set cookie', result);
 }
 
 function deleteCookiesOnNonBrowser(name: string) {
diff --git a/src/lib/helpers/icingGen.ts b/src/lib/helpers/icingGen.ts
index bcb3613..e7eadc0 100644
--- a/src/lib/helpers/icingGen.ts
+++ b/src/lib/helpers/icingGen.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 class IcingGen {
 	private lastTimestamp = 0n;
 	private sequence = 0n;
@@ -42,7 +43,7 @@ export function generateIcing(machineId: number): string {
 	const icing = new IcingGen(machineId);
 	const nid = icing.nextId();
 
-	console.log('NEXT ID', nid);
+	logger.info('NEXT ID', nid);
 
 	const id = toBase62(BigInt(nid));
 	return id;
diff --git a/src/routes/(authed)/+error.svelte b/src/routes/(authed)/+error.svelte
index f978871..1da3ca0 100644
--- a/src/routes/(authed)/+error.svelte
+++ b/src/routes/(authed)/+error.svelte
@@ -1,8 +1,9 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 
-	console.log('error on authed page route, ', page);
+	logger.info('error on authed page route, ', page);
 
 	setTimeout(() => {
 		goto('/entry');
diff --git a/src/routes/(authed)/+layout.svelte b/src/routes/(authed)/+layout.svelte
index 0d38883..1f81f11 100644
--- a/src/routes/(authed)/+layout.svelte
+++ b/src/routes/(authed)/+layout.svelte
@@ -1,5 +1,6 @@
 <!-- navbar select menus -->
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import favicon from '$lib/assets/favicon.svg';
 	import AppAccountSelect from '$lib/components/app-account-select.svelte';
 	import AppSidebar from '$lib/components/app-sidebar.svelte';
@@ -91,7 +92,7 @@
 				return false;
 			}
 		} catch (e) {
-			console.error('error on auto connect brew page', e);
+			logger.error('error on auto connect brew page', e);
 			addNotification('ERROR:Failed to auto connect, please try again');
 		}
 	}
@@ -107,7 +108,7 @@
 
 		if (websocketConnectedForUid !== currentUser.uid) {
 			websocketConnectedForUid = currentUser.uid;
-			console.log('connect ws after auth ready');
+			logger.info('connect ws after auth ready');
 
 			void currentUser.getIdToken(true).then(async (idToken) => {
 				await connectToWebsocket(idToken);
diff --git a/src/routes/(authed)/admin/+layout.svelte b/src/routes/(authed)/admin/+layout.svelte
index ba25fe8..29fafe5 100644
--- a/src/routes/(authed)/admin/+layout.svelte
+++ b/src/routes/(authed)/admin/+layout.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { auth, authInitialized } from '$lib/core/stores/auth';
@@ -51,7 +52,7 @@
 					}
 				})
 				.catch((error) => {
-					console.error('Error checking admin status:', error);
+					logger.error('Error checking admin status:', error);
 					goto('/dashboard');
 				});
 		}
diff --git a/src/routes/(authed)/admin/roles/+page.svelte b/src/routes/(authed)/admin/roles/+page.svelte
index 28be91e..8a39b25 100644
--- a/src/routes/(authed)/admin/roles/+page.svelte
+++ b/src/routes/(authed)/admin/roles/+page.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { onMount } from 'svelte';
 	import { getRoleDefinitions, buildAvailablePermissions } from '$lib/core/admin/adminService';
 	import { rolesConfig, rolesLoading, availablePermissions } from '$lib/core/admin/adminStore';
@@ -25,7 +26,7 @@
 			rolesConfig.set(roles);
 			availablePermissions.set(perms);
 		} catch (error) {
-			console.error('Error loading roles:', error);
+			logger.error('Error loading roles:', error);
 		} finally {
 			rolesLoading.set(false);
 		}
diff --git a/src/routes/(authed)/admin/roles/role-card.svelte b/src/routes/(authed)/admin/roles/role-card.svelte
index 3251b4f..f5ab9ee 100644
--- a/src/routes/(authed)/admin/roles/role-card.svelte
+++ b/src/routes/(authed)/admin/roles/role-card.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import * as Card from '$lib/components/ui/card/index';
 	import * as Dialog from '$lib/components/ui/dialog/index';
 	import Button from '$lib/components/ui/button/button.svelte';
@@ -104,7 +105,7 @@
 			dialogOpen = false;
 			onUpdate();
 		} catch (error) {
-			console.error('Error updating role:', error);
+			logger.error('Error updating role:', error);
 			addNotification('ERROR:Failed to update role');
 		} finally {
 			saving = false;
diff --git a/src/routes/(authed)/admin/settings/+page.svelte b/src/routes/(authed)/admin/settings/+page.svelte
index 62c1f91..655f3a7 100644
--- a/src/routes/(authed)/admin/settings/+page.svelte
+++ b/src/routes/(authed)/admin/settings/+page.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { onMount } from 'svelte';
 	import {
 		getDocumentPermissions,
@@ -29,7 +30,7 @@
 			toolsPerms = tools;
 			allowedDomains = domains;
 		} catch (error) {
-			console.error('Error loading settings:', error);
+			logger.error('Error loading settings:', error);
 		} finally {
 			loading = false;
 		}
diff --git a/src/routes/(authed)/admin/users/+page.svelte b/src/routes/(authed)/admin/users/+page.svelte
index a551aa7..8b98fdf 100644
--- a/src/routes/(authed)/admin/users/+page.svelte
+++ b/src/routes/(authed)/admin/users/+page.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { onMount } from 'svelte';
 	import { getAllUsers } from '$lib/core/admin/adminService';
 	import { adminUsers, usersLoading, adminError } from '$lib/core/admin/adminStore';
@@ -16,7 +17,7 @@
 			const users = await getAllUsers();
 			adminUsers.set(users);
 		} catch (error) {
-			console.error('Error loading users:', error);
+			logger.error('Error loading users:', error);
 			adminError.set('Failed to load users');
 		} finally {
 			usersLoading.set(false);
diff --git a/src/routes/(authed)/admin/users/user-edit-sheet.svelte b/src/routes/(authed)/admin/users/user-edit-sheet.svelte
index 35251bd..893ba9b 100644
--- a/src/routes/(authed)/admin/users/user-edit-sheet.svelte
+++ b/src/routes/(authed)/admin/users/user-edit-sheet.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import * as Sheet from '$lib/components/ui/sheet/index';
 	import Button from '$lib/components/ui/button/button.svelte';
 	import Label from '$lib/components/ui/label/label.svelte';
@@ -141,7 +142,7 @@
 			addNotification('SUCCESS:User updated successfully');
 			editSheetOpen.set(false);
 		} catch (error) {
-			console.error('Error updating user:', error);
+			logger.error('Error updating user:', error);
 			addNotification('ERROR:Failed to update user');
 		} finally {
 			saving = false;
@@ -157,7 +158,7 @@
 		try {
 			availablePermissions = await buildAvailablePermissions();
 		} catch (error) {
-			console.error('Error loading permissions:', error);
+			logger.error('Error loading permissions:', error);
 		}
 		loadingPermissions = false;
 	});
diff --git a/src/routes/(authed)/departments/+page.svelte b/src/routes/(authed)/departments/+page.svelte
index 77ce3d9..870ccc4 100644
--- a/src/routes/(authed)/departments/+page.svelte
+++ b/src/routes/(authed)/departments/+page.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { asset } from '$app/paths';
 	import { permission as currentPerms } from '$lib/core/stores/permissions';
 	import { page } from '$app/stores';
@@ -22,7 +23,7 @@
 		else setCookieOnNonBrowser('department', cnt);
 		addNotification(`INFO:Selected ${cnt}`);
 		setTimeout(async () => {
-			console.log(get(departmentStore));
+			logger.info(get(departmentStore));
 			departmentStore.set(cnt);
 
 			if (refPage === 'priceslot') {
diff --git a/src/routes/(authed)/entry/+page.svelte b/src/routes/(authed)/entry/+page.svelte
index 0143c00..33349b6 100644
--- a/src/routes/(authed)/entry/+page.svelte
+++ b/src/routes/(authed)/entry/+page.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import RecipeModuleBtn from '$lib/assets/modules/recipe_btn.png';
 	import MachineInspectBtn from '$lib/assets/modules/monitoring_btn.png';
 	import SheetModuleBtn from '$lib/assets/modules/sheet_btn.png';
@@ -40,7 +41,7 @@
 
 	onMount(() => {
 		return currentPermissions.subscribe((perm) => {
-			console.log('sub get perm', JSON.stringify(perm));
+			logger.info('sub get perm', JSON.stringify(perm));
 			if (perm.length > 0) {
 				perms = perm;
 			}
diff --git a/src/routes/(authed)/recipe/material/+page.svelte b/src/routes/(authed)/recipe/material/+page.svelte
index e7beba8..625cace 100644
--- a/src/routes/(authed)/recipe/material/+page.svelte
+++ b/src/routes/(authed)/recipe/material/+page.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { onMount } from 'svelte';
 	import Button from '$lib/components/ui/button/button.svelte';
 	import { Input } from '$lib/components/ui/input';
@@ -220,7 +221,7 @@
 					addNotification(`INFO:Recipe loaded from ${recipePath}`);
 					return;
 				} catch (error) {
-					console.error('failed to parse recipe json', recipePath, error);
+					logger.error('failed to parse recipe json', recipePath, error);
 					addNotification(`ERR:Invalid recipe JSON from ${recipePath}`);
 				}
 			}
@@ -348,7 +349,7 @@
 			if (materialIndex < 0) setNextAvailableId();
 			showMaterialForm = false;
 		} catch (error: any) {
-			console.error('failed to save material', error);
+			logger.error('failed to save material', error);
 			addNotification(`ERR:Failed to save material: ${error?.message ?? error}`);
 		} finally {
 			saving = false;
@@ -427,7 +428,7 @@
 			deleteConfirmOpen = false;
 			pendingDeleteMaterial = null;
 		} catch (error: any) {
-			console.error('failed to delete material', error);
+			logger.error('failed to delete material', error);
 			addNotification(`ERR:Failed to delete material: ${error?.message ?? error}`);
 		} finally {
 			saving = false;
diff --git a/src/routes/(authed)/recipe/overview/+page.server.ts b/src/routes/(authed)/recipe/overview/+page.server.ts
index 9fb0976..df6b933 100644
--- a/src/routes/(authed)/recipe/overview/+page.server.ts
+++ b/src/routes/(authed)/recipe/overview/+page.server.ts
@@ -1,10 +1,11 @@
+import { logger } from '$lib/core/utils/logger';
 import { getRecipes } from '$lib/core/client/server';
 import { recipeData } from '$lib/core/stores/recipeStore';
 import { get } from 'svelte/store';
 
 export async function load({ cookies, params }) {
 	let dep = cookies.get('department');
-	console.log('load recipe ', dep, params);
+	logger.info('load recipe ', dep, params);
 	let recipes = await getRecipes();
 	recipes = get(recipeData);
 
diff --git a/src/routes/(authed)/recipe/overview/+page.svelte b/src/routes/(authed)/recipe/overview/+page.svelte
index edd1459..1e220c9 100644
--- a/src/routes/(authed)/recipe/overview/+page.svelte
+++ b/src/routes/(authed)/recipe/overview/+page.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import Button, { buttonVariants } from '$lib/components/ui/button/button.svelte';
 	import Input from '$lib/components/ui/input/input.svelte';
 	import { SearchIcon, RefreshCcw } from '@lucide/svelte/icons';
@@ -92,7 +93,7 @@
 		const recipeFetchInterval = setInterval(async () => {
 			// schedule check if recipe is empty
 			if (data.recipes.length == 0) {
-				console.log('loading recipe ....');
+				logger.info('loading recipe ....');
 				// recipeLoading.set(true);
 				// empty
 				await getRecipes();
diff --git a/src/routes/(authed)/recipe/topping/+page.svelte b/src/routes/(authed)/recipe/topping/+page.svelte
index c0e2a25..397f581 100644
--- a/src/routes/(authed)/recipe/topping/+page.svelte
+++ b/src/routes/(authed)/recipe/topping/+page.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { onMount } from 'svelte';
 	import Button from '$lib/components/ui/button/button.svelte';
 	import { Input } from '$lib/components/ui/input';
@@ -230,7 +231,7 @@
 					addNotification(`INFO:Recipe loaded from ${recipePath}`);
 					return;
 				} catch (error) {
-					console.error('failed to parse recipe json', recipePath, error);
+					logger.error('failed to parse recipe json', recipePath, error);
 					addNotification(`ERR:Invalid recipe JSON from ${recipePath}`);
 				}
 			}
@@ -379,7 +380,7 @@
 			listDialogOpen = false;
 			if (index < 0) setNextListId();
 		} catch (error: any) {
-			console.error('failed to save topping list', error);
+			logger.error('failed to save topping list', error);
 			addNotification(`ERR:Failed to save topping list: ${error?.message ?? error}`);
 		} finally {
 			saving = false;
@@ -415,7 +416,7 @@
 			groupDialogOpen = false;
 			if (index < 0) setNextGroupId();
 		} catch (error: any) {
-			console.error('failed to save topping group', error);
+			logger.error('failed to save topping group', error);
 			addNotification(`ERR:Failed to save topping group: ${error?.message ?? error}`);
 		} finally {
 			saving = false;
@@ -522,7 +523,7 @@
 			deleteConfirmOpen = false;
 			pendingDelete = null;
 		} catch (error: any) {
-			console.error('failed to delete topping', error);
+			logger.error('failed to delete topping', error);
 			addNotification(`ERR:Failed to delete topping: ${error?.message ?? error}`);
 		} finally {
 			saving = false;
diff --git a/src/routes/(authed)/sheet/add/[country]/[catalog]/+page.svelte b/src/routes/(authed)/sheet/add/[country]/[catalog]/+page.svelte
index 00a1b59..9a9043b 100644
--- a/src/routes/(authed)/sheet/add/[country]/[catalog]/+page.svelte
+++ b/src/routes/(authed)/sheet/add/[country]/[catalog]/+page.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { onMount, onDestroy } from 'svelte';
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
@@ -141,7 +142,7 @@
 					}
 				}
 			} catch (e) {
-				console.error('Failed to load staged menus:', e);
+				logger.error('Failed to load staged menus:', e);
 			}
 
 			// 3. Load from machine recipes (via recipeFromMachineQuery store)
@@ -411,7 +412,7 @@
 				const key = `sheet.newlyAdded.${country}.${catalog}`;
 				sessionStorage.setItem(key, JSON.stringify({ timestamp: Date.now(), pending: true }));
 			} catch (e) {
-				console.warn('Failed to store newly added marker:', e);
+				logger.warn('Failed to store newly added marker:', e);
 			}
 
 			// Go back to edit page after successful add
@@ -440,7 +441,7 @@
 		const currentSize = $existingProductCodes.size;
 		if (currentSize > 0 && currentSize !== previousCodeCount) {
 			previousCodeCount = currentSize;
-			console.log('[Add] existingProductCodes updated, reloading available codes:', currentSize);
+			logger.info('[Add] existingProductCodes updated, reloading available codes:', currentSize);
 			loadAvailableProductCodes();
 		}
 	});
@@ -456,7 +457,7 @@
 			try {
 				boxid = (await adb.pull('/sdcard/coffeevending/.bid')) || undefined;
 			} catch (e) {
-				console.warn('Failed to get boxid from machine:', e);
+				logger.warn('Failed to get boxid from machine:', e);
 			}
 		}
 		requestListMenu(country, boxid);
diff --git a/src/routes/(authed)/sheet/edit/[country]/[catalog]/+page.svelte b/src/routes/(authed)/sheet/edit/[country]/[catalog]/+page.svelte
index 92b7eb0..20e1fb7 100644
--- a/src/routes/(authed)/sheet/edit/[country]/[catalog]/+page.svelte
+++ b/src/routes/(authed)/sheet/edit/[country]/[catalog]/+page.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { onMount, onDestroy } from 'svelte';
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
@@ -331,7 +332,7 @@
 					name_desc_v2: item.name_desc_v2
 				});
 			} catch (error) {
-				console.error('[Parse] Error parsing menu item:', error, item);
+				logger.error('[Parse] Error parsing menu item:', error, item);
 			}
 		}
 
@@ -720,13 +721,13 @@
 					}
 					return;
 				} catch (error) {
-					console.error('Failed to parse recipe JSON:', error);
+					logger.error('Failed to parse recipe JSON:', error);
 				}
 			}
 
 			addNotification('ERR:Cannot load recipe from machine');
 		} catch (error) {
-			console.error('Failed to load preview:', error);
+			logger.error('Failed to load preview:', error);
 			addNotification('ERR:Failed to load preview');
 		} finally {
 			previewLoading = false;
@@ -927,7 +928,7 @@
 						cells[priceColIdx - 1] = item.price;
 					}
 
-					console.log('[Edit] Building new price row:', {
+					logger.info('[Edit] Building new price row:', {
 						code: item.code,
 						priceColIdx,
 						nameColIdx,
@@ -1206,12 +1207,12 @@
 				await adb.push(androidPath, file.content);
 				pushProgress = { current: i + 1, total: filesToPush.length };
 
-				console.log(`[GenLayout] Pushed ${i + 1}/${filesToPush.length}: ${androidPath}`);
+				logger.info(`[GenLayout] Pushed ${i + 1}/${filesToPush.length}: ${androidPath}`);
 			}
 
 			addNotification(`INFO:Pushed ${filesToPush.length} layout files to Android`);
 		} catch (error) {
-			console.error('[GenLayout] Push error:', error);
+			logger.error('[GenLayout] Push error:', error);
 			addNotification(`ERR:Failed to push files: ${error}`);
 		} finally {
 			pushingToAndroid = false;
@@ -1242,14 +1243,14 @@
 				await adb.push(androidPath, file.content);
 				pushProgress = { current: i + 1, total: files.length };
 
-				console.log(`[GenLayout] Pushed ${i + 1}/${files.length}: ${androidPath}`);
+				logger.info(`[GenLayout] Pushed ${i + 1}/${files.length}: ${androidPath}`);
 			}
 
 			addNotification(`INFO:Pushed ${files.length} layout files to Android`);
 
 			openRestartDialog('push-complete');
 		} catch (error) {
-			console.error('[GenLayout] Push error:', error);
+			logger.error('[GenLayout] Push error:', error);
 			addNotification(`ERR:Failed to push files: ${error}`);
 		} finally {
 			pushingToAndroid = false;
@@ -1288,7 +1289,7 @@
 			restartDialogOpen = false;
 			restartDialogSource = 'manual';
 		} catch (error) {
-			console.error('[GenLayout] Restart error:', error);
+			logger.error('[GenLayout] Restart error:', error);
 			addNotification(`ERR:Failed to restart app: ${error}`);
 		} finally {
 			restarting = false;
@@ -1365,7 +1366,7 @@
 				}
 			}
 		} catch (e) {
-			console.warn('[Edit] Failed to load newly added marker:', e);
+			logger.warn('[Edit] Failed to load newly added marker:', e);
 		}
 	}
 
@@ -1384,7 +1385,7 @@
 				sessionStorage.removeItem(key);
 			}
 		} catch (e) {
-			console.warn('[Edit] Failed to read previous max row index:', e);
+			logger.warn('[Edit] Failed to read previous max row index:', e);
 		}
 
 		// Find items with row_index higher than previous max (truly new items)
@@ -1397,13 +1398,13 @@
 
 		if (newIndices.length > 0) {
 			newlyAddedRowIndices = new Set(newIndices);
-			console.log('[Edit] Detected newly added items at row_indices:', newIndices);
+			logger.info('[Edit] Detected newly added items at row_indices:', newIndices);
 			// Clear after 60 seconds
 			setTimeout(() => {
 				newlyAddedRowIndices = new Set();
 			}, 60000);
 		} else {
-			console.log('[Edit] No new items detected (previousMax:', previousMaxRowIndex, ')');
+			logger.info('[Edit] No new items detected (previousMax:', previousMaxRowIndex, ')');
 		}
 	}
 
@@ -1420,7 +1421,7 @@
 		const unsubData = sheetData.subscribe((data) => {
 			if (data.length > 0) {
 				menuItems = parseMenuItems(data);
-				console.log(`[Edit] Parsed ${menuItems.length} menu items from WebSocket stream`);
+				logger.info(`[Edit] Parsed ${menuItems.length} menu items from WebSocket stream`);
 			}
 		});
 		unsubscribers.push(unsubData);
@@ -1428,7 +1429,7 @@
 		// Subscribe to streamMeta for completion status
 		const unsubMeta = sheetStreamMeta.subscribe((meta) => {
 			if (meta?.status === 'complete') {
-				console.log('[Edit] Stream complete, total items:', meta.total_items);
+				logger.info('[Edit] Stream complete, total items:', meta.total_items);
 
 				// Detect newly added item if we're coming back from add page
 				detectNewlyAddedItem();
@@ -1443,7 +1444,7 @@
 					}
 				}
 				if (allCodes.length > 0) {
-					console.log('[Edit] Requesting prices for', allCodes.length, 'product codes');
+					logger.info('[Edit] Requesting prices for', allCodes.length, 'product codes');
 					requestSheetPrice(country, allCodes);
 				}
 			} else if (meta?.status === 'error') {
@@ -1485,7 +1486,7 @@
 			setTimeout(async () => {
 				const requested = await requestCatalogMenu(country, catalog);
 				if (requested) {
-					console.log('[Edit] Requested menu data via WebSocket');
+					logger.info('[Edit] Requested menu data via WebSocket');
 				} else {
 					addNotification('ERR:Failed to request menu data');
 					sheetLoading.set(false);
@@ -1500,7 +1501,7 @@
 		})();
 
 		// Data will arrive via WebSocket streaming through sheetStore
-		console.log('[Edit] Waiting for data via WebSocket streaming...');
+		logger.info('[Edit] Waiting for data via WebSocket streaming...');
 	});
 
 	// Exit room on unmount
@@ -1633,7 +1634,7 @@
 			const key = `sheet.maxRowIndex.${country}.${catalog}`;
 			sessionStorage.setItem(key, String(maxRowIndex));
 		} catch (e) {
-			console.warn('[Edit] Failed to store max row index:', e);
+			logger.warn('[Edit] Failed to store max row index:', e);
 		}
 
 		addMenuLoading = true;
@@ -1678,7 +1679,7 @@
 									recipe: recipe01_query
 								}));
 
-								console.log(
+								logger.info(
 									'[Edit] Loaded',
 									Object.keys(recipe01_query).length,
 									'recipes from machine'
@@ -1686,11 +1687,11 @@
 								break;
 							}
 						} catch (parseError) {
-							console.warn('[Edit] Failed to parse recipe JSON from', recipePath, parseError);
+							logger.warn('[Edit] Failed to parse recipe JSON from', recipePath, parseError);
 						}
 					}
 				} catch (e) {
-					console.warn('[Edit] Failed to load machine recipe:', e);
+					logger.warn('[Edit] Failed to load machine recipe:', e);
 				}
 			}
 		} finally {
diff --git a/src/routes/(authed)/tools/adv-upload/+page.svelte b/src/routes/(authed)/tools/adv-upload/+page.svelte
index 8c95d2b..613e46b 100644
--- a/src/routes/(authed)/tools/adv-upload/+page.svelte
+++ b/src/routes/(authed)/tools/adv-upload/+page.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { auth } from '$lib/core/stores/auth';
 	import { addNotification } from '$lib/core/stores/noti';
 	import Button from '$lib/components/ui/button/button.svelte';
@@ -108,7 +109,7 @@
 				AdbInstance.instance ? 'INFO:Machine connected' : 'WARN:No machine selected'
 			);
 		} catch (error) {
-			console.error('[Adv] connect error:', error);
+			logger.error('[Adv] connect error:', error);
 			addNotification(`ERR:Connect failed: ${error instanceof Error ? error.message : 'unknown'}`);
 		} finally {
 			connecting = false;
@@ -318,7 +319,7 @@
 				addNotification(`INFO:Pushed ${success} video(s) to machine (${targetDir})`);
 			}
 		} catch (error) {
-			console.error('[Adv] push to machine error:', error);
+			logger.error('[Adv] push to machine error:', error);
 			addNotification(`ERR:Push error: ${error instanceof Error ? error.message : 'unknown'}`);
 		} finally {
 			pushingToMachine = false;
@@ -389,7 +390,7 @@
 			} catch (error) {
 				files[index].status = 'error';
 				files[index].error = error instanceof Error ? error.message : 'Unknown error';
-				console.error(`Upload error for ${item.file.name}:`, error);
+				logger.error(`Upload error for ${item.file.name}:`, error);
 			}
 		}
 
@@ -429,7 +430,7 @@
 			await uploadManifestText(text, uid, displayName, email);
 			addNotification(`INFO:Manifest uploaded (${active.length} active file(s))`);
 		} catch (error) {
-			console.error('[Adv] selected manifest error:', error);
+			logger.error('[Adv] selected manifest error:', error);
 			addNotification(`ERR:Manifest failed: ${error instanceof Error ? error.message : 'unknown'}`);
 		} finally {
 			generatingManifest = false;
@@ -522,7 +523,7 @@
 			addNotification(`INFO:Machine adv folder synced (${targets.length} file(s))`);
 			return true;
 		} catch (error) {
-			console.error('[Adv] machine sync error:', error);
+			logger.error('[Adv] machine sync error:', error);
 			addNotification(`ERR:Machine sync failed: ${error instanceof Error ? error.message : 'unknown'}`);
 			return false;
 		} finally {
@@ -567,7 +568,7 @@
 			}
 			addNotification('INFO:Manifest (from machine) uploaded to server');
 		} catch (error) {
-			console.error('[Adv] machine manifest error:', error);
+			logger.error('[Adv] machine manifest error:', error);
 			addNotification(`ERR:Machine manifest failed: ${error instanceof Error ? error.message : 'unknown'}`);
 		} finally {
 			generatingManifest = false;
diff --git a/src/routes/(authed)/tools/brew/+page.svelte b/src/routes/(authed)/tools/brew/+page.svelte
index 219ed16..11f5457 100644
--- a/src/routes/(authed)/tools/brew/+page.svelte
+++ b/src/routes/(authed)/tools/brew/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { logger } from '$lib/core/utils/logger';
+
 	import Button from '$lib/components/ui/button/button.svelte';
 	import Spinner from '$lib/components/ui/spinner/spinner.svelte';
 	import * as Dialog from '$lib/components/ui/dialog/index.js';
@@ -71,7 +73,7 @@
 	// clear out event
 
 	GlobalEventBus.on('recipe-event', (d: any) => {
-		console.log('[recipe-ev] get event: ', d);
+		logger.info('[recipe-ev] get event: ', d);
 		if (d?.type == 'load-recipe' && d?.status == 'end') {
 			addNotification('INFO:Get data, waiting for reloading ...');
 			// load finish
@@ -81,13 +83,13 @@
 			if (recipeRaw) {
 				devRecipe = recipeRaw;
 				// update material & topping
-				console.log('check dev recipe', devRecipe);
+				logger.info('check dev recipe', devRecipe);
 			}
 			// data.recipes = r01Q.recipe;
 
 			buildOverviewForBrewing();
 
-			console.log('refresh by m2 mem recipe data done');
+			logger.info('refresh by m2 mem recipe data done');
 			recipeLoading = false;
 
 			addNotification('INFO:Load recipe from memories success!');
@@ -110,7 +112,7 @@
 		let instance = adb.getAdbInstance();
 		// recipeFromMachineLoading.set(true);
 		referenceFromPage.set('brew');
-		console.log('check instance', instance);
+		logger.info('check instance', instance);
 		if (instance) {
 			recipeLoading = true;
 
@@ -129,7 +131,7 @@
 				}
 			} else {
 				try {
-					console.log('instance passed!');
+					logger.info('instance passed!');
 					const recipePaths = [
 						`${sourceDir}/cfg/recipe_branch_dev.json`,
 						`${sourceDir}/coffeethai02.json`
@@ -137,7 +139,7 @@
 
 					for (const recipePath of recipePaths) {
 						const dev_recipe = await pullTextWithRetry(recipePath);
-						console.log('dev recipe pull result', {
+						logger.info('dev recipe pull result', {
 							recipePath,
 							loaded: dev_recipe != undefined,
 							size: dev_recipe?.length ?? 0
@@ -149,7 +151,7 @@
 							buildOverviewForBrewing();
 							return;
 						} catch (error) {
-							console.error('failed to parse recipe json', recipePath, error);
+							logger.error('failed to parse recipe json', recipePath, error);
 							addNotification(`ERROR:Invalid recipe JSON from ${recipePath}`);
 						}
 					}
@@ -276,7 +278,7 @@
 				return false;
 			}
 		} catch (e) {
-			console.error('error on auto connect brew page', e);
+			logger.error('error on auto connect brew page', e);
 			addNotification('ERROR:Failed to auto connect, please try again');
 		}
 	}
@@ -349,7 +351,7 @@
 	}
 
 	afterNavigate(async () => {
-		console.log('after navigate brew');
+		logger.info('after navigate brew');
 		await startFetchRecipeFromMachine();
 	});
 
@@ -577,7 +579,7 @@
 				)
 			);
 		} catch (error) {
-			console.error('failed to persist staged menus to Android', error);
+			logger.error('failed to persist staged menus to Android', error);
 			addNotification('WARN:Failed to save draft menus to Android');
 		}
 	}
@@ -612,7 +614,7 @@
 			buildOverviewForBrewing();
 			return true;
 		} catch (error) {
-			console.error('failed to load staged menus from Android', error);
+			logger.error('failed to load staged menus from Android', error);
 			addNotification('WARN:Failed to load draft menus from Android');
 			return false;
 		}
@@ -796,7 +798,18 @@
 		persistStagedMenus();
 		clearMenuSaveState(productCode);
 		addNotification(`INFO:Menu saved: ${productCode}`);
+
+		// Sync devRecipe from recipeFromMachine before rebuild —
+		// the dialog's save handler may have updated recipeFromMachine
+		// with user edits, and we want buildOverviewForBrewing() to
+		// use the latest data rather than stale devRecipe.
+		const latest = get(recipeFromMachine);
+		if (latest) {
+			devRecipe = latest;
+		}
+
 		buildOverviewForBrewing();
+		refresh_counter += 1;
 	}
 
 	onMount(() => {
diff --git a/src/routes/(authed)/tools/create-menu/+page.svelte b/src/routes/(authed)/tools/create-menu/+page.svelte
index bd81d1c..091aa90 100644
--- a/src/routes/(authed)/tools/create-menu/+page.svelte
+++ b/src/routes/(authed)/tools/create-menu/+page.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import Button from '$lib/components/ui/button/button.svelte';
 	import Input from '$lib/components/ui/input/input.svelte';
 	import Label from '$lib/components/ui/label/label.svelte';
@@ -338,7 +339,7 @@
 						addNotification('INFO:Recipe loaded');
 						return;
 					} catch (error) {
-						console.error('failed to parse recipe json', recipePath, error);
+						logger.error('failed to parse recipe json', recipePath, error);
 					}
 				}
 
@@ -364,11 +365,11 @@
 				// No country file means Thailand
 				detectedCountry = 'THAI';
 			}
-			console.log('[CreateMenu] Detected country:', detectedCountry, '-> prefix:', detectedCountryCode);
+			logger.info('[CreateMenu] Detected country:', detectedCountry, '-> prefix:', detectedCountryCode);
 		} catch (error) {
 			// Error reading file means Thailand (default)
 			detectedCountry = 'THAI';
-			console.log('[CreateMenu] Country file not found, defaulting to THAI');
+			logger.info('[CreateMenu] Country file not found, defaulting to THAI');
 		} finally {
 			countryLoading = false;
 		}
@@ -764,7 +765,7 @@
 				)
 			);
 		} catch (error) {
-			console.error('failed to persist staged menus to Android', error);
+			logger.error('failed to persist staged menus to Android', error);
 			addNotification('WARN:Failed to save draft menus to Android');
 		}
 	}
@@ -798,7 +799,7 @@
 			}
 			return true;
 		} catch (error) {
-			console.error('failed to load staged menus from Android', error);
+			logger.error('failed to load staged menus from Android', error);
 			addNotification('WARN:Failed to load draft menus from Android');
 			return false;
 		}
@@ -973,7 +974,7 @@
 			);
 			return;
 		}
-		console.log(
+		logger.info(
 			'[Create Menu] save all draft menus',
 			menus.map((menu) => menu.productCode)
 		);
@@ -1171,7 +1172,7 @@
 			try {
 				boxid = (await adb.pull('/sdcard/coffeevending/.bid')) || undefined;
 			} catch (e) {
-				console.warn('Failed to get boxid from machine:', e);
+				logger.warn('Failed to get boxid from machine:', e);
 			}
 		}
 		requestListMenu('tha', boxid);
diff --git a/src/routes/(authed)/tools/image-upload/+page.svelte b/src/routes/(authed)/tools/image-upload/+page.svelte
index 757eb84..073d815 100644
--- a/src/routes/(authed)/tools/image-upload/+page.svelte
+++ b/src/routes/(authed)/tools/image-upload/+page.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { auth } from '$lib/core/stores/auth';
 	import { addNotification } from '$lib/core/stores/noti';
 	import Button from '$lib/components/ui/button/button.svelte';
@@ -171,7 +172,7 @@
 			} catch (error) {
 				files[index].status = 'error';
 				files[index].error = error instanceof Error ? error.message : 'Unknown error';
-				console.error(`Upload error for ${item.file.name}:`, error);
+				logger.error(`Upload error for ${item.file.name}:`, error);
 			}
 		}
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index caf81ce..714bbe7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <!-- This is common file and will render through all pages -->
 
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import '../app.css';
 	import favicon from '$lib/assets/favicon.svg';
 
@@ -28,6 +29,7 @@
 	import { connectToWebsocket } from '$lib/core/stores/websocketStore';
 	import { GlobalEventBus } from '$lib/core/utils/eventBus';
 	import AnnouncementDialog from '$lib/components/AnnouncementDialog.svelte';
+	import RemoteShellConfirmDialog from '$lib/components/RemoteShellConfirmDialog.svelte';
 	import * as semver from 'semver';
 	import { env } from '$env/dynamic/public';
 
@@ -41,7 +43,7 @@
 	}
 
 	onMount(() => {
-		console.log('base url', window.location.origin, document.cookie);
+		logger.info('base url', window.location.origin, document.cookie);
 
 		onAuthStateChanged(auth, async function (s) {
 			authStore.set(s);
@@ -60,14 +62,14 @@
 			}
 		});
 		return authStore.subscribe(async function (user) {
-			// console.log(`store get ${JSON.stringify(user)}`);
+			// logger.info(`store get ${JSON.stringify(user)}`);
 
 			// reloading permissions
 			if (get(currentPermissions).length == 0 && user != null) {
 				// need update
 				let currentUser = user;
 				currentPermissions.set(await getUserPermission(currentUser));
-				console.log('reloading permissions ... ');
+				logger.info('reloading permissions ... ');
 			}
 
 			if (!get(departmentStore)) {
@@ -77,7 +79,7 @@
 						: extractCookieOnNonBrowser()['department'];
 				if (saved) {
 					departmentStore.set(saved.value);
-					console.log('get dep', get(departmentStore));
+					logger.info('get dep', get(departmentStore));
 				}
 			}
 		});
@@ -93,4 +95,5 @@
 <ModeWatcher />
 <Toaster />
 <AnnouncementDialog />
+<RemoteShellConfirmDialog />
 {@render children()}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8ba4b46..48238a5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { Label } from '$lib/components/ui/label/index.js';
 	import { Input } from '$lib/components/ui/input/index.js';
@@ -18,7 +19,7 @@
 	onMount(() => {
 		let existed_account = get(authStore);
 		let current_user_logged = auth.currentUser;
-		console.log(
+		logger.info(
 			`has acc ${JSON.stringify(existed_account)}, from session: ${JSON.stringify(current_user_logged)}`
 		);
 
diff --git a/src/routes/api/adv-manifest/+server.ts b/src/routes/api/adv-manifest/+server.ts
index c532f1e..b236b25 100644
--- a/src/routes/api/adv-manifest/+server.ts
+++ b/src/routes/api/adv-manifest/+server.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 import { json, error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 import { env } from '$env/dynamic/public';
@@ -33,7 +34,7 @@ export const POST: RequestHandler = async ({ request }) => {
 
 		return json(await response.json());
 	} catch (err) {
-		console.error('[Adv Manifest Proxy] Error:', err);
+		logger.error('[Adv Manifest Proxy] Error:', err);
 		if (err && typeof err === 'object' && 'status' in err) {
 			throw err;
 		}
diff --git a/src/routes/api/adv-upload/+server.ts b/src/routes/api/adv-upload/+server.ts
index 877a12d..9b134d0 100644
--- a/src/routes/api/adv-upload/+server.ts
+++ b/src/routes/api/adv-upload/+server.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 import { json, error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 import { env } from '$env/dynamic/public';
@@ -25,7 +26,7 @@ export const POST: RequestHandler = async ({ request }) => {
 			`${ADV_API_BASE}/adv/upload/${encodeURIComponent(country)}/${encodeURIComponent(uid)}/${encodeURIComponent(displayName)}/${encodeURIComponent(email)}` +
 			`?regenerate=${encodeURIComponent(regenerate)}`;
 
-		console.log('[Adv Upload Proxy] Endpoint:', endpoint, 'file:', file.name);
+		logger.info('[Adv Upload Proxy] Endpoint:', endpoint, 'file:', file.name);
 
 		// Upstream expects the multipart field name `files`.
 		const uploadFormData = new FormData();
@@ -44,7 +45,7 @@ export const POST: RequestHandler = async ({ request }) => {
 		const result = await response.json();
 		return json(result);
 	} catch (err) {
-		console.error('[Adv Upload Proxy] Error:', err);
+		logger.error('[Adv Upload Proxy] Error:', err);
 
 		if (err && typeof err === 'object' && 'status' in err) {
 			throw err;
diff --git a/src/routes/api/image-upload/+server.ts b/src/routes/api/image-upload/+server.ts
index aabd5bb..e8cc5ba 100644
--- a/src/routes/api/image-upload/+server.ts
+++ b/src/routes/api/image-upload/+server.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 import { json, error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 import { env } from '$env/dynamic/public';
@@ -28,7 +29,7 @@ export const POST: RequestHandler = async ({ request }) => {
 			endpoint = `${IMAGE_API_BASE}/image/${encodeURIComponent(folder)}/upload/${encodeURIComponent(uid)}/${encodeURIComponent(displayName)}/${encodeURIComponent(email)}`;
 		}
 
-		console.log('[Image Upload Proxy] Endpoint:', endpoint);
+		logger.info('[Image Upload Proxy] Endpoint:', endpoint);
 
 		// Create new FormData for the upstream request
 		const uploadFormData = new FormData();
@@ -47,7 +48,7 @@ export const POST: RequestHandler = async ({ request }) => {
 		const result = await response.json();
 		return json(result);
 	} catch (err) {
-		console.error('[Image Upload Proxy] Error:', err);
+		logger.error('[Image Upload Proxy] Error:', err);
 
 		if (err && typeof err === 'object' && 'status' in err) {
 			throw err;
diff --git a/src/routes/api/sheet/stream/+server.ts b/src/routes/api/sheet/stream/+server.ts
index 5ecd79c..6b3d1b0 100644
--- a/src/routes/api/sheet/stream/+server.ts
+++ b/src/routes/api/sheet/stream/+server.ts
@@ -1,3 +1,4 @@
+import { logger } from '$lib/core/utils/logger';
 import { json } from '@sveltejs/kit';
 
 // In-memory store for streamed catalog data
@@ -23,22 +24,22 @@ export async function POST({ request }) {
 
 		// Handle different message types
 		if (msg === 'start') {
-			console.log(`[API] Stream started for batch ${batch_id}`);
+			logger.info(`[API] Stream started for batch ${batch_id}`);
 		} else if (msg === 'chunk') {
 			batch.chunks.push(content);
-			console.log(`[API] Received chunk ${current_chunk}/${total_chunks} for batch ${batch_id}`);
+			logger.info(`[API] Received chunk ${current_chunk}/${total_chunks} for batch ${batch_id}`);
 		} else if (msg === 'end') {
 			batch.status = 'complete';
-			console.log(`[API] Stream complete for batch ${batch_id}, total chunks: ${batch.chunks.length}`);
+			logger.info(`[API] Stream complete for batch ${batch_id}, total chunks: ${batch.chunks.length}`);
 		} else if (msg === 'error') {
 			batch.status = 'error';
 			batch.error = content;
-			console.log(`[API] Stream error for batch ${batch_id}:`, content);
+			logger.info(`[API] Stream error for batch ${batch_id}:`, content);
 		}
 
 		return json({ status: 'received', batch_id });
 	} catch (error) {
-		console.error('[API] Error processing stream:', error);
+		logger.error('[API] Error processing stream:', error);
 		return json({ status: 'error', message: String(error) }, { status: 500 });
 	}
 }
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index a6a0cda..b474aa0 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts">import { logger } from '$lib/core/utils/logger';
+
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { env } from '$env/dynamic/public';
@@ -60,7 +61,7 @@
 				// 	credentials: 'include'
 				// });
 				//
-				console.log('login success!');
+				logger.info('login success!');
 
 				if (browser && 'cookieStore' in window) await cookieStore.set('logged_in', 'true');
 				else {
@@ -70,7 +71,7 @@
 				goto('/entry');
 			}
 		} catch (error: any) {
-			console.error(error);
+			logger.error(error);
 
 			// TODO:
 			authStore.set(null);