diff --git a/docs/adr/ADR-0007-rejected-fromStore-derived.md b/docs/adr/ADR-0007-rejected-fromStore-derived.md
new file mode 100644
index 00000000..a8c35acc
--- /dev/null
+++ b/docs/adr/ADR-0007-rejected-fromStore-derived.md
@@ -0,0 +1,61 @@
+# ADR-0007: REJECTED — `fromStore` + multiple `$derived` in Svelte 5
+
+## Status
+REJECTED — pattern forbidden in ss-tools frontend.
+
+## Context
+`fromStore(store)` returns a reactive object whose `.current` property
+reflects the underlying Svelte writable store. Using it with multiple
+`$derived(runState.current?.xxx)` values creates persistent `render_effect`
+instances via Svelte's `createSubscriber` on every reactive re-evaluation.
+
+### Observed failure (ss-tools, May 2026)
+`TranslationRunGlobalIndicator` used 6 `$derived` reading `runState.current`.
+Each `$derived` re-evaluation (triggered by store update) called `subscribe()`
+which called `render_effect()` inside `createSubscriber`. The `render_effect`
+teardown queues a microtask that decrements the subscriber count. When all
+teardowns execute, subscriber count drops to zero, which triggers `increment(version)`,
+which marks all `$derived` as dirty again — creating an **infinite reactive flush loop**.
+
+### Symptoms
+- After ~300 store poll cycles, the browser tab reaches 100% CPU on 2 cores.
+- Svelte runtime (`flush` → `Ve` → `yn` → `fn`) throws `Uncaught` repeatedly.
+- `CTFFznDe.js` chunk enters infinite loop.
+- Page becomes completely unresponsive.
+
+## Decision
+`fromStore` MUST NOT be used with `$derived` when the `.current` object is
+read by more than one `$derived` in the same component.
+
+Use `$effect(() => store.subscribe(s => state = s))` instead — this creates
+exactly ONE subscription per component lifecycle, with no accumulating
+`render_effect` instances.
+
+## Consequences
+### Positive
+- Store subscription is created once per component mount and cleaned up on destroy.
+- No accumulating `render_effect` instances → no infinite reactive loop.
+- Works correctly in Svelte 5.43.x.
+
+### Negative
+- Requires explicit `$state` initial value and `$effect` subscription.
+- Slightly more verbose than `fromStore`.
+
+## Migration
+Replace:
+```javascript
+const state = fromStore(store);
+let foo = $derived(state.current?.foo || null);
+let bar = $derived(state.current?.bar || 0);
+```
+
+With:
+```javascript
+let _state = $state(initialValue);
+$effect(() => {
+    const unsub = store.subscribe(s => { _state = s; });
+    return () => unsub();
+});
+let foo = $derived(_state?.foo || null);
+let bar = $derived(_state?.bar || 0);
+```
diff --git a/frontend/src/lib/components/layout/Sidebar.svelte b/frontend/src/lib/components/layout/Sidebar.svelte
index e26fa652..729a999b 100644
--- a/frontend/src/lib/components/layout/Sidebar.svelte
+++ b/frontend/src/lib/components/layout/Sidebar.svelte
@@ -187,12 +187,11 @@
     closeMobile();
   }
 
-  // Close mobile overlay on route change
+  // Close mobile overlay on route change — depends only on page.url.pathname, NOT isMobileOpen.
+  // Otherwise clicking the burger (which sets isMobileOpen=true) would immediately close it.
   $effect(() => {
-    if (isMobileOpen) {
-      page.url.pathname;
-      closeMobile();
-    }
+    const _pathname = page.url.pathname;
+    closeMobile();
   });
 
   onMount(() => {
diff --git a/frontend/src/lib/components/translate/TranslationRunGlobalIndicator.svelte b/frontend/src/lib/components/translate/TranslationRunGlobalIndicator.svelte
index 367f55f7..4edd40b4 100644
--- a/frontend/src/lib/components/translate/TranslationRunGlobalIndicator.svelte
+++ b/frontend/src/lib/components/translate/TranslationRunGlobalIndicator.svelte
@@ -9,7 +9,6 @@
 <!-- @UX_FEEDBACK Rich stats during active run; compact auto-dismiss for terminal states -->
 <script>
 	import { translationRunStore, stopTranslationRun } from '$lib/stores/translationRun.js';
-	import { fromStore } from 'svelte/store';
 	import { page } from '$app/state';
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/i18n';
@@ -17,7 +16,17 @@
 	import { cancelRun } from '$lib/api/translate.js';
 	import { addToast } from '$lib/toasts.js';
 
-	const runState = fromStore(translationRunStore);
+	// Subscribe to store via $effect + subscribe (NOT fromStore + $derived).
+	// @REJECTED fromStore + multiple $derived(runState.current.xxx) creates render_effect
+	// instances via createSubscriber on every $derived re-evaluation. Over time these
+	// accumulate and trigger an infinite Svelte reactive flush loop after ~300 polls.
+	// @RATIONALE $effect(() => store.subscribe(s => state = s)) creates exactly ONE
+	// subscription per component lifecycle — no accumulating render_effects.
+	let storeState = $state({ uxState: 'idle', totalRecords: 0, successfulRecords: 0, failedRecords: 0, skippedRecords: 0, progressPct: 0, runId: null, jobId: null });
+	$effect(() => {
+		const unsub = translationRunStore.subscribe(s => { storeState = s; });
+		return () => unsub();
+	});
 
 	// Hide on the translate page itself to avoid duplication
 	let isOnTranslatePage = $derived(
@@ -29,7 +38,7 @@
 	let dismissed = $state(false);
 	let isCancelling = $state(false);
 
-	let uxState = $derived(runState.current?.uxState || 'idle');
+	let uxState = $derived(storeState?.uxState || 'idle');
 
 	let show = $derived.by(() => {
 		if (dismissed) return false;
@@ -52,11 +61,11 @@
 		return '';
 	});
 
-	let totalRecords = $derived(runState.current?.totalRecords || 0);
-	let successfulRecords = $derived(runState.current?.successfulRecords || 0);
-	let failedRecords = $derived(runState.current?.failedRecords || 0);
-	let skippedRecords = $derived(runState.current?.skippedRecords || 0);
-	let progressPct = $derived(runState.current?.progressPct || 0);
+	let totalRecords = $derived(storeState?.totalRecords || 0);
+	let successfulRecords = $derived(storeState?.successfulRecords || 0);
+	let failedRecords = $derived(storeState?.failedRecords || 0);
+	let skippedRecords = $derived(storeState?.skippedRecords || 0);
+	let progressPct = $derived(storeState?.progressPct || 0);
 
 	// Auto-dismiss terminal states after a few seconds
 	$effect(() => {
@@ -78,7 +87,7 @@
 	});
 
 	function handleClick() {
-		const jobId = runState.current?.jobId;
+		const jobId = storeState?.jobId;
 		if (jobId) {
 			goto(`/translate/${jobId}`);
 		}
@@ -86,7 +95,7 @@
 
 	async function handleCancel(e) {
 		e.stopPropagation();
-		const runId = runState.current?.runId;
+		const runId = storeState?.runId;
 		if (!runId || isCancelling) return;
 		isCancelling = true;
 		try {
diff --git a/frontend/src/lib/stores/translationRun.js b/frontend/src/lib/stores/translationRun.js
index 03521e84..9b79fd00 100644
--- a/frontend/src/lib/stores/translationRun.js
+++ b/frontend/src/lib/stores/translationRun.js
@@ -149,16 +149,6 @@ async function pollStatus() {
 		const data = await fetchRunStatus(currentState.runId);
 		if (!data) return;
 
-		// Guard: if runId was cleared (by handleRunComplete clearing it via updateTranslationRunState
-		// while we were awaiting fetchRunStatus), skip the store update to avoid restoring the runId
-		// and causing the progress bar to stay visible indefinitely.
-		let latestState;
-		translationRunStore.subscribe(s => { latestState = s; })();
-		if (!latestState || !latestState.runId) {
-			stopTranslationRun();
-			return;
-		}
-
 		const s = data?.status;
 		const insertS = data?.insert_status;
 
diff --git a/frontend/src/routes/translate/[id]/+page.svelte b/frontend/src/routes/translate/[id]/+page.svelte
index b73c26b7..de21b4da 100644
--- a/frontend/src/routes/translate/[id]/+page.svelte
+++ b/frontend/src/routes/translate/[id]/+page.svelte
@@ -31,7 +31,6 @@
 		startTranslationRun,
 		resetTranslationRun,
 		clearOnCompleteCallback,
-		updateTranslationRunState,
 	} from '$lib/stores/translationRun.js';
 
   const LANGUAGE_LABELS = {
@@ -158,13 +157,18 @@
   let runState = fromStore(translationRunStore);
   let currentRunId = $derived(runState.current?.runId || null);
   let completedRuns = $state([]);
+  let expandedRunIds = $state([]);
   let isRunning = $state(false);
   let isFullRun = $state(false);
 	let runError = $state('');
 	let showPageBulkReplace = $state(false);
+	/** Local flag to hide progress bar when run completes — avoids touching the store
+	 *  and triggering cascading reactive updates through fromStore. */
+	let runComplete = $state(false);
 
   async function handleTriggerRun(full = false) {
     isRunning = true;
+    runComplete = false;
     isFullRun = full;
     runError = '';
     try {
@@ -178,25 +182,36 @@
   }
 
   function handleRunComplete(statusData) {
-    if (!isRunning) return; // Idempotent: already handled
+    if (runComplete) return; // Idempotent: run already marked complete
+    const finishedRunId = currentRunId;
     isRunning = false;
-    // Clear runId so currentRunId becomes null and the progress bar section
-    // collapses, revealing completed run results below. Keep uxState intact
-    // so TranslationRunGlobalIndicator still shows terminal banner until auto-dismiss.
-    updateTranslationRunState({ runId: null });
-    const statusLabel = statusData?.status || _('translate.run.completed');
+    runComplete = true;
+    expandedRunIds = [];
     if (statusData?.status !== 'CANCELLED') {
       loadRunHistory();
     }
-    addToast(`${_('translate.run.run_id')} ${statusLabel.toLowerCase()}`, 'info');
+    addToast(`${_('translate.run.run_id')} ${finishedRunId}`, 'info');
   }
 
   async function loadRunHistory() {
     try {
       const data = await fetchRunHistory(jobId, { page_size: 5 });
-      completedRuns = data?.items || [];
+      completedRuns = (data?.items || []).filter(
+        (run) => run && typeof run.id === 'string' && run.id.trim().length > 0
+      );
+      expandedRunIds = expandedRunIds.filter((runId) => completedRuns.some((run) => run.id === runId));
     } catch (_err) {
       completedRuns = [];
+      expandedRunIds = [];
+    }
+  }
+
+  function toggleRunDetails(runId) {
+    if (!runId) return;
+    if (expandedRunIds.includes(runId)) {
+      expandedRunIds = expandedRunIds.filter((id) => id !== runId);
+    } else {
+      expandedRunIds = [...expandedRunIds, runId];
     }
   }
 
@@ -1360,12 +1375,11 @@
             </div>
           {/if}
 
-          {#if currentRunId}
+          {#if currentRunId && !runComplete}
             <TranslationRunProgress
               runId={currentRunId}
               onRetry={handleRetryRun}
               onRetryInsert={handleRetryInsert}
-              onComplete={handleRunComplete}
             />
           {/if}
 
@@ -1382,7 +1396,46 @@
               </div>
               <div class="space-y-3">
                 {#each completedRuns as run}
-                  <TranslationRunResult runId={run.id} onRefresh={loadRunHistory} />
+                  <div class="border border-gray-200 rounded-lg bg-white">
+                    <div class="flex items-center justify-between gap-3 p-4">
+                      <div class="min-w-0">
+                        <div class="flex items-center gap-2 flex-wrap">
+                          <span class="text-xs text-gray-500">{$t.translate?.run?.run_id}</span>
+                          <code class="text-xs text-gray-700 break-all">{run.id}</code>
+                          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium
+                            {run.status === 'COMPLETED' ? 'bg-green-100 text-green-700' : ''}
+                            {run.status === 'FAILED' ? 'bg-red-100 text-red-700' : ''}
+                            {run.status === 'CANCELLED' ? 'bg-gray-100 text-gray-700' : ''}
+                            {run.status !== 'COMPLETED' && run.status !== 'FAILED' && run.status !== 'CANCELLED' ? 'bg-yellow-100 text-yellow-700' : ''}"
+                          >
+                            {run.status}
+                          </span>
+                        </div>
+                        <div class="mt-2 flex flex-wrap gap-3 text-xs text-gray-500">
+                          <span>{$t.translate?.run?.total}: {run.total_records || 0}</span>
+                          <span>{$t.translate?.run?.success}: {run.successful_records || 0}</span>
+                          <span>{$t.translate?.run?.failed}: {run.failed_records || 0}</span>
+                          <span>{$t.translate?.run?.skipped}: {run.skipped_records || 0}</span>
+                        </div>
+                        {#if run.error_message}
+                          <p class="mt-2 text-xs text-red-600 break-words">{run.error_message}</p>
+                        {/if}
+                      </div>
+                      <button
+                        onclick={() => toggleRunDetails(run.id)}
+                        class="shrink-0 px-3 py-1.5 text-xs border border-gray-300 text-gray-700 rounded hover:bg-gray-50 transition-colors"
+                      >
+                        {expandedRunIds.includes(run.id)
+                          ? ($t.translate?.run?.hide_details || 'Hide details')
+                          : ($t.translate?.run?.show_details || 'Show details')}
+                      </button>
+                    </div>
+                    {#if expandedRunIds.includes(run.id)}
+                      <div class="border-t border-gray-200 p-4">
+                        <TranslationRunResult runId={run.id} onRefresh={loadRunHistory} />
+                      </div>
+                    {/if}
+                  </div>
                 {/each}
               </div>
             </div>