diff --git a/frontend/src/components/DashboardGrid.svelte b/frontend/src/components/DashboardGrid.svelte
index a62b7c08..c7f670c3 100644
--- a/frontend/src/components/DashboardGrid.svelte
+++ b/frontend/src/components/DashboardGrid.svelte
@@ -15,11 +15,11 @@
 <script lang="ts">
   // [SECTION: IMPORTS]
   import type { DashboardMetadata } from "../types/dashboard";
-  import { t } from "../lib/i18n";
+  import { t } from '$lib/i18n/index.svelte.js';
   import { Button, Input } from "../lib/ui";
   import GitManager from "./git/GitManager.svelte";
   import { api } from "../lib/api";
-  import { addToast as toast } from "../lib/toasts";
+  import { addToast as toast } from "$lib/toasts.svelte.js";
   // [/SECTION]
 
   // [SECTION: PROPS]
diff --git a/frontend/src/components/EnvSelector.svelte b/frontend/src/components/EnvSelector.svelte
index 5d9c44ce..c478d74b 100644
--- a/frontend/src/components/EnvSelector.svelte
+++ b/frontend/src/components/EnvSelector.svelte
@@ -12,7 +12,7 @@
 
 <script lang="ts">
   // [SECTION: IMPORTS]
-  import { t } from '../lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
   // [/SECTION]
 
   // [SECTION: PROPS]
diff --git a/frontend/src/components/MappingTable.svelte b/frontend/src/components/MappingTable.svelte
index ad266292..2d4c4359 100644
--- a/frontend/src/components/MappingTable.svelte
+++ b/frontend/src/components/MappingTable.svelte
@@ -12,7 +12,7 @@
 
 <script lang="ts">
   // [SECTION: IMPORTS]
-  import { t } from '$lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
   // [/SECTION]
 
   // [SECTION: PROPS]
diff --git a/frontend/src/components/Navbar.svelte b/frontend/src/components/Navbar.svelte
index 75298d20..0cdc55f7 100644
--- a/frontend/src/components/Navbar.svelte
+++ b/frontend/src/components/Navbar.svelte
@@ -14,13 +14,16 @@
 -->
 <script lang="ts">
     import { page } from '$app/state';
-    import { fromStore } from 'svelte/store';
-    import { t } from '$lib/i18n';
+    import { t } from '$lib/i18n/index.svelte.js';
     import { LanguageSwitcher } from '$lib/ui';
-    import { auth } from '$lib/auth/store';
+    import { auth } from '$lib/auth/store.svelte.js';
     import { goto } from '$app/navigation';
 
-    const authState = fromStore(auth);
+    let _authState = $state({ user: null, token: null, isAuthenticated: false, loading: true });
+    $effect(() => {
+        const unsub = auth.subscribe(v => { _authState = v; });
+        return unsub;
+    });
 
     function handleLogout() {
         auth.logout();
@@ -58,7 +61,7 @@
             </div>
         </div>
 
-        {#if authState.current?.isAuthenticated && authState.current?.user?.roles?.some(r => r.name === 'Admin')}
+        {#if _authState.isAuthenticated && _authState.user?.roles?.some(r => r.name === 'Admin')}
             <div class="relative inline-block group">
                 <button class="text-gray-600 hover:text-primary font-medium pb-1 {page.url.pathname.startsWith('/admin') ? 'text-primary border-b-2 border-blue-600' : ''}">
                     {$t.nav.admin}
@@ -73,9 +76,9 @@
         {/if}
         <LanguageSwitcher />
         
-        {#if authState.current?.isAuthenticated}
+        {#if _authState.isAuthenticated}
             <div class="flex items-center space-x-2 border-l pl-4 ml-4">
-                <span class="text-sm text-gray-600">{authState.current?.user?.username}</span>
+                <span class="text-sm text-gray-600">{_authState.user?.username}</span>
                 <button
                     onclick={handleLogout}
                     class="text-sm text-red-600 hover:text-red-800 font-medium"
diff --git a/frontend/src/components/RepositoryDashboardGrid.svelte b/frontend/src/components/RepositoryDashboardGrid.svelte
index c539b627..d42878c9 100644
--- a/frontend/src/components/RepositoryDashboardGrid.svelte
+++ b/frontend/src/components/RepositoryDashboardGrid.svelte
@@ -14,11 +14,11 @@
   // [SECTION: IMPORTS]
   import { untrack } from "svelte";
   import type { DashboardMetadata } from "../types/dashboard";
-  import { t } from "../lib/i18n";
+  import { t } from '$lib/i18n/index.svelte.js';
   import { Button, Input } from "../lib/ui";
   import GitManager from "./git/GitManager.svelte";
   import { gitService } from "../services/gitService";
-  import { addToast } from "../lib/toasts";
+  import { addToast } from "$lib/toasts.svelte.js";
   // [/SECTION]
 
   // [SECTION: PROPS]
diff --git a/frontend/src/components/StartupEnvironmentWizard.svelte b/frontend/src/components/StartupEnvironmentWizard.svelte
index 25284ec8..3aec54bd 100644
--- a/frontend/src/components/StartupEnvironmentWizard.svelte
+++ b/frontend/src/components/StartupEnvironmentWizard.svelte
@@ -18,10 +18,10 @@
    * @UX_RECOVERY: User can switch to advanced settings or retry save with corrected data.
    */
   import { goto } from "$app/navigation";
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { api } from "$lib/api.js";
-  import { addToast } from "$lib/toasts";
-  import { refreshEnvironmentContext, setSelectedEnvironment } from "$lib/stores/environmentContext.js";
+  import { addToast } from "$lib/toasts.svelte.js";
+  import { refreshEnvironmentContext, setSelectedEnvironment } from "$lib/stores/environmentContext.svelte.js";
 
   let { open = false, onCreated = async () => {} } = $props();
   let step = $state("intro");
diff --git a/frontend/src/components/TaskHistory.svelte b/frontend/src/components/TaskHistory.svelte
index 4ad9a01b..7c18c9f9 100644
--- a/frontend/src/components/TaskHistory.svelte
+++ b/frontend/src/components/TaskHistory.svelte
@@ -10,9 +10,9 @@
 -->
 <script lang="ts">
     import { onMount, onDestroy } from 'svelte';
-    import { selectedTask } from '../lib/stores.js';
+    import { selectedTask } from '$lib/stores.svelte.js';
     import { api, getTaskEventsWsUrl } from '../lib/api.js';
-    import { t } from '../lib/i18n';
+    import { t } from '$lib/i18n/index.svelte.js';
     
     /** @type {string | undefined} — if set, only shows tasks with this plugin_id (e.g. "superset-migration") */
     let { pluginId = undefined } = $props();
diff --git a/frontend/src/components/TaskList.svelte b/frontend/src/components/TaskList.svelte
index 0e3c3553..de219c46 100644
--- a/frontend/src/components/TaskList.svelte
+++ b/frontend/src/components/TaskList.svelte
@@ -10,7 +10,7 @@
 
 <script lang="ts">
   import { formatDistanceToNow } from 'date-fns';
-  import { t } from '../lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
 
   let {
     tasks = [],
diff --git a/frontend/src/components/TaskLogViewer.svelte b/frontend/src/components/TaskLogViewer.svelte
index 396fb2dd..be325bd7 100644
--- a/frontend/src/components/TaskLogViewer.svelte
+++ b/frontend/src/components/TaskLogViewer.svelte
@@ -13,7 +13,7 @@
 -->
 <script lang="ts">
     import { getTaskLogs } from "../services/taskService.js";
-    import { t } from "../lib/i18n";
+    import { t } from '$lib/i18n/index.svelte.js';
     import TaskLogPanel from "./tasks/TaskLogPanel.svelte";
     import Icon from "../lib/ui/Icon.svelte";
 
diff --git a/frontend/src/components/TaskRunner.svelte b/frontend/src/components/TaskRunner.svelte
index 6d982afa..11c40cae 100755
--- a/frontend/src/components/TaskRunner.svelte
+++ b/frontend/src/components/TaskRunner.svelte
@@ -12,14 +12,13 @@
 <script lang="ts">
     // [SECTION: IMPORTS]
     import { onMount, onDestroy } from 'svelte';
-    import { get } from 'svelte/store';
-    import { selectedTask, taskLogs } from '../lib/stores.js';
+    import { selectedTask, taskLogs } from '$lib/stores.svelte.js';
     import { getWsUrl, api } from '../lib/api.js';
-    import { addToast } from '../lib/toasts';
+    import { addToast } from '$lib/toasts.svelte.js';
     import MissingMappingModal from './MissingMappingModal.svelte';
     import PasswordPrompt from './PasswordPrompt.svelte';
     import TaskLogPanel from './tasks/TaskLogPanel.svelte';
-    import { t } from '../lib/i18n';
+    import { t } from '$lib/i18n/index.svelte.js';
     // [/SECTION]
 
     let ws;
@@ -48,7 +47,7 @@
      * @post WebSocket instance created and listeners attached.
      */
     function connect() {
-        const task = get(selectedTask);
+        const task = selectedTask.current;
         if (!task || connectionStatus === 'completed') return;
 
         console.log(`[EXT:frontend:TaskRunner][Entry] Connecting to logs for task: ${task.id} (Attempt ${reconnectAttempts + 1}) filters: source=${selectedSource}, level=${selectedLevel}`);
@@ -178,7 +177,7 @@
      * @post targetDatabases array populated with available databases.
      */
     async function fetchTargetDatabases() {
-        const task = get(selectedTask);
+        const task = selectedTask.current;
         if (!task || !task.params.to_env) return;
         
         try {
@@ -201,7 +200,7 @@
      * @post Mapping created in backend, task resumed with resolution params.
      */
     async function handleMappingResolve(event) {
-        const task = get(selectedTask);
+        const task = selectedTask.current;
         const { sourceDbUuid, targetDbUuid, targetDbName } = event.detail;
         
         try {
@@ -237,7 +236,7 @@
      * @post Task resumed with passwords, connection status restored to connected.
      */
     async function handlePasswordResume(event) {
-        const task = get(selectedTask);
+        const task = selectedTask.current;
         const { passwords } = event.detail;
         
         try {
diff --git a/frontend/src/components/Toast.svelte b/frontend/src/components/Toast.svelte
index 13806c75..36fa5f18 100755
--- a/frontend/src/components/Toast.svelte
+++ b/frontend/src/components/Toast.svelte
@@ -11,7 +11,7 @@
 @UX_FEEDBACK Close button on persistent toasts; auto-dismiss on transient toasts.
 -->
 <script lang="ts">
-    import { toasts, removeToast } from '../lib/toasts';
+    import { toasts, removeToast } from '$lib/toasts.svelte.js';
 
     function handleDismiss(id) {
         removeToast(id);
diff --git a/frontend/src/components/__tests__/task_log_viewer.test.ts b/frontend/src/components/__tests__/task_log_viewer.test.ts
index 6aef74b4..74149f28 100644
--- a/frontend/src/components/__tests__/task_log_viewer.test.ts
+++ b/frontend/src/components/__tests__/task_log_viewer.test.ts
@@ -23,7 +23,7 @@ vi.mock('../../services/taskService.js', () => ({
 
 const getTaskLogsMock = vi.mocked(getTaskLogs);
 
-vi.mock('../../lib/i18n', () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
     t: {
         subscribe: (fn) => {
             fn({
diff --git a/frontend/src/components/auth/ProtectedRoute.svelte b/frontend/src/components/auth/ProtectedRoute.svelte
index fcfb5ba7..6717b3a0 100644
--- a/frontend/src/components/auth/ProtectedRoute.svelte
+++ b/frontend/src/components/auth/ProtectedRoute.svelte
@@ -40,7 +40,7 @@
 
 <script lang="ts">
     import { onMount } from "svelte";
-    import { auth } from "../../lib/auth/store";
+    import { auth } from "../../lib/auth/store.svelte.js";
     import { api } from "../../lib/api";
     import { goto } from "$app/navigation";
     import { hasPermission } from "$lib/auth/permissions.js";
diff --git a/frontend/src/components/backups/BackupList.svelte b/frontend/src/components/backups/BackupList.svelte
index 1c046179..b20083e3 100644
--- a/frontend/src/components/backups/BackupList.svelte
+++ b/frontend/src/components/backups/BackupList.svelte
@@ -10,7 +10,7 @@
 
 <script lang="ts">
   // [SECTION: IMPORTS]
-  import { t } from '../../lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
   import { Button } from '../../lib/ui';
   import type { Backup } from '../../types/backup';
   // [/SECTION]
diff --git a/frontend/src/components/backups/BackupManager.svelte b/frontend/src/components/backups/BackupManager.svelte
index f2861b1c..155ea6d0 100644
--- a/frontend/src/components/backups/BackupManager.svelte
+++ b/frontend/src/components/backups/BackupManager.svelte
@@ -14,9 +14,9 @@
 <script lang="ts">
   // [SECTION: IMPORTS]
   import { onMount } from 'svelte';
-  import { t } from '../../lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
   import { api, requestApi } from '../../lib/api';
-  import { addToast } from '../../lib/toasts';
+  import { addToast } from '$lib/toasts.svelte.js';
   import { Button, Card, Select, Input } from '../../lib/ui';
   import BackupList from './BackupList.svelte';
   import type { Backup } from '../../types/backup';
@@ -86,7 +86,7 @@
       // Pre-fill with active environment from global context
       if (!selectedEnvId) {
         const { get } = await import('svelte/store');
-        const envCtx = await import('$lib/stores/environmentContext.js');
+        const envCtx = await import('$lib/stores/environmentContext.svelte.js');
         const state = get(envCtx.environmentContextStore);
         if (state.selectedEnvId && environments.some((env) => env.id === state.selectedEnvId)) {
           selectedEnvId = state.selectedEnvId;
diff --git a/frontend/src/components/git/BranchSelector.svelte b/frontend/src/components/git/BranchSelector.svelte
index a48c4f1f..6b7e1ff1 100644
--- a/frontend/src/components/git/BranchSelector.svelte
+++ b/frontend/src/components/git/BranchSelector.svelte
@@ -16,7 +16,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { BranchModel } from '$lib/models/BranchModel.svelte.ts';
-  import { t } from '$lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
   import { Button, Select, Input } from '$lib/ui';
 
   let {
diff --git a/frontend/src/components/git/CommitHistory.svelte b/frontend/src/components/git/CommitHistory.svelte
index 8b5b5a71..a7413e00 100644
--- a/frontend/src/components/git/CommitHistory.svelte
+++ b/frontend/src/components/git/CommitHistory.svelte
@@ -12,8 +12,8 @@
     // [SECTION: IMPORTS]
     import { onMount } from 'svelte';
     import { gitService } from '../../services/gitService';
-    import { addToast as toast } from '../../lib/toasts';
-    import { t } from '../../lib/i18n';
+    import { addToast as toast } from '$lib/toasts.svelte.js';
+    import { t } from '$lib/i18n/index.svelte.js';
     import { Button } from '../../lib/ui';
     // [/SECTION]
 
diff --git a/frontend/src/components/git/CommitModal.svelte b/frontend/src/components/git/CommitModal.svelte
index 4373ec8b..16780872 100644
--- a/frontend/src/components/git/CommitModal.svelte
+++ b/frontend/src/components/git/CommitModal.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { CommitModel } from '$lib/models/CommitModel.svelte.ts';
-  import { t } from '$lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
 
   let { dashboardId, envId = null, show = false } = $props();
 
diff --git a/frontend/src/components/git/ConflictResolver.svelte b/frontend/src/components/git/ConflictResolver.svelte
index 8652a67a..a59dac57 100644
--- a/frontend/src/components/git/ConflictResolver.svelte
+++ b/frontend/src/components/git/ConflictResolver.svelte
@@ -12,7 +12,7 @@
 
 <script lang="ts">
     // [SECTION: IMPORTS]
-    import { addToast as toast } from "../../lib/toasts";
+    import { addToast as toast } from "$lib/toasts.svelte.js";
     // [/SECTION]
 
     // [SECTION: PROPS]
diff --git a/frontend/src/components/git/DeploymentModal.svelte b/frontend/src/components/git/DeploymentModal.svelte
index b1995667..563bc0c3 100644
--- a/frontend/src/components/git/DeploymentModal.svelte
+++ b/frontend/src/components/git/DeploymentModal.svelte
@@ -16,7 +16,7 @@
 
 <script lang="ts">
   import { DeploymentModel } from '$lib/models/DeploymentModel.svelte.ts';
-  import { t } from '$lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
 
   let { dashboardId, envId = null, show = $bindable(false), preferredTargetStage = '' } = $props();
 
diff --git a/frontend/src/components/git/GitInitPanel.svelte b/frontend/src/components/git/GitInitPanel.svelte
index fe41841d..0839f20d 100644
--- a/frontend/src/components/git/GitInitPanel.svelte
+++ b/frontend/src/components/git/GitInitPanel.svelte
@@ -6,7 +6,7 @@
 <!-- @UX_STATE Idle -> Config selector, remote URL input, create/init buttons. -->
 <!-- @UX_STATE Loading -> Buttons disabled, spinner visible. -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { Button, Card, Select, Input, HelpTooltip } from "$lib/ui";
 
   let {
diff --git a/frontend/src/components/git/GitManager.svelte b/frontend/src/components/git/GitManager.svelte
index bb116709..15237ed1 100644
--- a/frontend/src/components/git/GitManager.svelte
+++ b/frontend/src/components/git/GitManager.svelte
@@ -23,7 +23,7 @@
 <!-- @UX_RECOVERY Dismiss error, Retry operation after fixing the issue. -->
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { t } from '$lib/i18n';
+    import { t } from '$lib/i18n/index.svelte.js';
     import { HelpTooltip } from '$lib/ui';
     import { stageBadgeClass, resolveDefaultConfig } from '../../services/git-utils.js';
     import { GitManagerModel } from '$lib/models/GitManagerModel.svelte.ts';
diff --git a/frontend/src/components/git/GitMergeDialog.svelte b/frontend/src/components/git/GitMergeDialog.svelte
index d25d7ce5..0839782c 100644
--- a/frontend/src/components/git/GitMergeDialog.svelte
+++ b/frontend/src/components/git/GitMergeDialog.svelte
@@ -6,7 +6,7 @@
 <!-- @UX_STATE Open -> Dialog with merge context, status, and action buttons. -->
 <!-- @UX_STATE Loading -> Recovery state loading spinner. -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { Button } from "$lib/ui";
 
   let {
diff --git a/frontend/src/components/git/GitOperationsPanel.svelte b/frontend/src/components/git/GitOperationsPanel.svelte
index cb592a13..12f7d2f1 100644
--- a/frontend/src/components/git/GitOperationsPanel.svelte
+++ b/frontend/src/components/git/GitOperationsPanel.svelte
@@ -2,7 +2,7 @@
 <!-- @BRIEF Git server operations panel: pull, push, and deploy actions. -->
 <!-- @LAYER UI -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { Button } from "$lib/ui";
 
   let {
diff --git a/frontend/src/components/git/GitReleasePanel.svelte b/frontend/src/components/git/GitReleasePanel.svelte
index d04e80b7..2e01ca6c 100644
--- a/frontend/src/components/git/GitReleasePanel.svelte
+++ b/frontend/src/components/git/GitReleasePanel.svelte
@@ -6,7 +6,7 @@
 <!-- @UX_STATE Idle -> Pipeline status and promote button. -->
 <!-- @UX_STATE Advanced -> Expandable branch/reason settings. -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { Button, Input, Select } from "$lib/ui";
   import { stageBadgeClass } from "../../services/git-utils.js";
 
diff --git a/frontend/src/components/git/GitWorkspacePanel.svelte b/frontend/src/components/git/GitWorkspacePanel.svelte
index aa8f4f21..be15d3d5 100644
--- a/frontend/src/components/git/GitWorkspacePanel.svelte
+++ b/frontend/src/components/git/GitWorkspacePanel.svelte
@@ -10,7 +10,7 @@
 <!-- @UX_STATE Error -> Toast on failure. -->
 <!-- @UX_RECOVERY Scroll down to load more diff chunks; sentinel triggers lazy render. -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { Button } from "$lib/ui";
   import * as Diff2Html from 'diff2html';
   import 'diff2html/bundles/css/diff2html.min.css';
diff --git a/frontend/src/components/llm/DocPreview.svelte b/frontend/src/components/llm/DocPreview.svelte
index 20393efc..2c04ef18 100644
--- a/frontend/src/components/llm/DocPreview.svelte
+++ b/frontend/src/components/llm/DocPreview.svelte
@@ -10,7 +10,7 @@
 -->
 
 <script lang="ts">
-  import { t } from '../../lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
 
   /** @type {Object} */
   let {
diff --git a/frontend/src/components/llm/ProviderConfig.svelte b/frontend/src/components/llm/ProviderConfig.svelte
index 60213c42..bed57174 100644
--- a/frontend/src/components/llm/ProviderConfig.svelte
+++ b/frontend/src/components/llm/ProviderConfig.svelte
@@ -10,9 +10,9 @@
 -->
 
 <script lang="ts">
-  import { t } from "../../lib/i18n";
+  import { t } from '$lib/i18n/index.svelte.js';
   import { requestApi } from "../../lib/api";
-  import { addToast } from "../../lib/toasts";
+  import { addToast } from "$lib/toasts.svelte.js";
   import HelpTooltip from "$lib/ui/HelpTooltip.svelte";
 
   let {
diff --git a/frontend/src/components/llm/ValidationReport.svelte b/frontend/src/components/llm/ValidationReport.svelte
index e686c1e9..9960260b 100644
--- a/frontend/src/components/llm/ValidationReport.svelte
+++ b/frontend/src/components/llm/ValidationReport.svelte
@@ -6,7 +6,7 @@
 <!-- @PURPOSE: Displays the results of an LLM-based dashboard validation task. -->
 
 <script lang="ts">
-  import { t } from '$lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
   let {
     report,
   } = $props();
diff --git a/frontend/src/components/storage/FileList.svelte b/frontend/src/components/storage/FileList.svelte
index 4734ff8b..134738ec 100644
--- a/frontend/src/components/storage/FileList.svelte
+++ b/frontend/src/components/storage/FileList.svelte
@@ -16,8 +16,8 @@
 <script lang="ts">
   // [SECTION: IMPORTS]
   import { downloadFile } from '../../services/storageService';
-  import { t } from '../../lib/i18n';
-  import { addToast } from '../../lib/toasts';
+  import { t } from '$lib/i18n/index.svelte.js';
+  import { addToast } from '$lib/toasts.svelte.js';
   // [/SECTION: IMPORTS]
 
   let {
diff --git a/frontend/src/components/storage/FileUpload.svelte b/frontend/src/components/storage/FileUpload.svelte
index bc9bef31..ad137a71 100644
--- a/frontend/src/components/storage/FileUpload.svelte
+++ b/frontend/src/components/storage/FileUpload.svelte
@@ -16,8 +16,8 @@
 <script lang="ts">
   // [SECTION: IMPORTS]
   import { uploadFile } from '../../services/storageService';
-  import { addToast } from '../../lib/toasts';
-  import { t } from '../../lib/i18n';
+  import { addToast } from '$lib/toasts.svelte.js';
+  import { t } from '$lib/i18n/index.svelte.js';
   // [/SECTION: IMPORTS]
 
   // #region handleUpload:Function [TYPE Function]
diff --git a/frontend/src/components/tasks/TaskResultPanel.svelte b/frontend/src/components/tasks/TaskResultPanel.svelte
index 57d4c3f1..737909e5 100644
--- a/frontend/src/components/tasks/TaskResultPanel.svelte
+++ b/frontend/src/components/tasks/TaskResultPanel.svelte
@@ -5,7 +5,7 @@
 <!-- @UX_STATE Empty -> No task selected, placeholder shown. -->
 <!-- @UX_STATE Loaded -> Task result displayed with status color coding. -->
 <script lang="ts">
-  import { t } from '$lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
   let { task = null } = $props();
 
   const result = $derived(task?.result || null);
diff --git a/frontend/src/components/tools/DebugTool.svelte b/frontend/src/components/tools/DebugTool.svelte
index 4308f556..76130b15 100644
--- a/frontend/src/components/tools/DebugTool.svelte
+++ b/frontend/src/components/tools/DebugTool.svelte
@@ -10,17 +10,14 @@
 <script lang="ts">
     // [SECTION: IMPORTS]
     import { onMount } from 'svelte';
-    import { fromStore } from 'svelte/store';
     import { api } from '../../lib/api.js';
     import { runTask, getTaskStatus } from '../../services/toolsService.js';
-    import { selectedTask } from '../../lib/stores.js';
-    import { addToast } from '../../lib/toasts';
-    import { t } from '../../lib/i18n';
-    import { environmentContextStore } from '$lib/stores/environmentContext.js';
+    import { selectedTask } from '$lib/stores.svelte.js';
+    import { addToast } from '$lib/toasts.svelte.js';
+    import { t } from '$lib/i18n/index.svelte.js';
+    import { environmentContextStore } from '$lib/stores/environmentContext.svelte.js';
     // [/SECTION]
 
-    const envContextState = fromStore(environmentContextStore);
-
     let envs = [];
     let action = 'test-db-api';
     let selectedEnv = '';
@@ -42,7 +39,7 @@
         try {
             envs = await api.getEnvironmentsList();
             // Pre-fill source and single env with active environment, leave target empty
-            const activeEnvId = envContextState.current?.selectedEnvId;
+            const activeEnvId = environmentContextStore.value?.selectedEnvId;
             if (activeEnvId && envs.some((e) => e.id === activeEnvId)) {
                 sourceEnv = activeEnvId;
                 selectedEnv = activeEnvId;
diff --git a/frontend/src/components/tools/MapperTool.svelte b/frontend/src/components/tools/MapperTool.svelte
index 396583c5..c3f7f6b2 100644
--- a/frontend/src/components/tools/MapperTool.svelte
+++ b/frontend/src/components/tools/MapperTool.svelte
@@ -17,9 +17,9 @@
     import { onMount } from 'svelte';
     import { runTask } from '../../services/toolsService.js';
     import { api } from '../../lib/api';
-    import { selectedTask } from '../../lib/stores.js';
-    import { addToast } from '../../lib/toasts';
-    import { t } from '../../lib/i18n';
+    import { selectedTask } from '$lib/stores.svelte.js';
+    import { addToast } from '$lib/toasts.svelte.js';
+    import { t } from '$lib/i18n/index.svelte.js';
     import { Button, Card, Select, Input, Icon } from '../../lib/ui';
     import DocPreview from '../llm/DocPreview.svelte';
     // [/SECTION]
@@ -44,7 +44,7 @@
             envs = await api.fetchApi('/environments');
             // Pre-fill with active environment from global context
             const { get } = await import('svelte/store');
-            const envCtx = await import('$lib/stores/environmentContext.js');
+            const envCtx = await import('$lib/stores/environmentContext.svelte.js');
             const state = get(envCtx.environmentContextStore);
             if (state.selectedEnvId && envs.some((e) => e.id === state.selectedEnvId)) {
                 selectedEnv = state.selectedEnvId;
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index 9a67c0bd..3d9a12c1 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -22,7 +22,7 @@
 //           is simpler, tree-shakeable, and has zero bundle cost.
 
 import { log } from '$lib/cot-logger';
-import { addToast } from './toasts';
+import { addToast } from './toasts.svelte.js';
 import type { FetchOptions, DashboardListParams } from '../types/api';
 
 const API_BASE_URL = '/api';
diff --git a/frontend/src/lib/api/__tests__/reports_api.test.ts b/frontend/src/lib/api/__tests__/reports_api.test.ts
index 5456f627..9d187ac5 100644
--- a/frontend/src/lib/api/__tests__/reports_api.test.ts
+++ b/frontend/src/lib/api/__tests__/reports_api.test.ts
@@ -17,7 +17,7 @@ vi.mock('$env/static/public', () => ({
 }));
 
 // Mock toasts to prevent import side-effects
-vi.mock('../../toasts', () => ({
+vi.mock('$lib/toasts.svelte.js', () => ({
     addToast: vi.fn()
 }));
 
diff --git a/frontend/src/lib/auth/store.svelte.ts b/frontend/src/lib/auth/store.svelte.ts
new file mode 100644
index 00000000..8bfd4b47
--- /dev/null
+++ b/frontend/src/lib/auth/store.svelte.ts
@@ -0,0 +1,141 @@
+// #region AuthStore [C:3] [TYPE Store] [SEMANTICS auth, store, jwt, token, login, session]
+// @BRIEF Manages the global authentication state including JWT token, user profile, and login/logout lifecycle.
+// @RELATION BINDS_TO -> [PermissionsModule]
+// @UX_STATE Loading -> Auth state being initialized from localStorage
+// @UX_STATE Authenticated -> User profile and token active
+// @UX_STATE Unauthenticated -> No valid session, login required
+// @RATIONALE Migrated from Svelte 4 writable + { subscribe, set, update } to Svelte 5 $state runes.
+//            Backward-compatible .subscribe() retained for $auth syntax.
+
+// #region authStore:Store [TYPE Function]
+// @SEMANTICS: auth, store, svelte, jwt, session
+// @PURPOSE:   Manages the global authentication state on the frontend.
+// @LAYER:     Feature
+// @RELATION CALLED_BY -> AuthService
+// @RELATION BINDS_TO -> Navbar
+
+import { browser } from '$app/environment';
+
+// #region AuthState:Interface [TYPE Function]
+/**
+ * @purpose Defines the structure of the authentication state.
+ */
+export interface AuthState {
+    user: any | null;
+    token: string | null;
+    isAuthenticated: boolean;
+    loading: boolean;
+}
+// #endregion AuthState:Interface
+
+function createAuthStore() {
+    // Reactive state (Svelte 5 rune)
+    let _user = $state<any | null>(null);
+    let _token = $state<string | null>(browser ? localStorage.getItem('auth_token') : null);
+    let _isAuthenticated = $state(false);
+    let _loading = $state(true);
+
+    // Subscriber list for backward compat with $auth syntax
+    let _subscribers: Array<(value: AuthState) => void> = [];
+
+    function _getState(): AuthState {
+        return {
+            user: _user,
+            token: _token,
+            isAuthenticated: _isAuthenticated,
+            loading: _loading,
+        };
+    }
+
+    function _notify(): void {
+        const current = _getState();
+        _subscribers.forEach((fn) => fn(current));
+    }
+
+    // #region setToken:Function [TYPE Function]
+    /**
+     * @purpose Updates the store with a new JWT token.
+     * @pre token must be a valid JWT string.
+     * @post Store updated with new token, isAuthenticated set to true.
+     * @param {string} token - The JWT access token.
+     */
+    function setToken(token: string): void {
+        console.log("[setToken][Action] Updating token");
+        if (browser) {
+            localStorage.setItem('auth_token', token);
+        }
+        _token = token;
+        _isAuthenticated = !!token;
+        _notify();
+    }
+    // #endregion setToken:Function
+
+    // #region setUser:Function [TYPE Function]
+    /**
+     * @purpose Sets the current user profile data.
+     * @pre User object must contain valid profile data.
+     * @post Store updated with user, isAuthenticated true, loading false.
+     * @param {any} user - The user profile object.
+     */
+    function setUser(user: any): void {
+        console.log("[setUser][Action] Setting user profile");
+        _user = user;
+        _isAuthenticated = !!user;
+        _loading = false;
+        _notify();
+    }
+    // #endregion setUser:Function
+
+    // #region logout:Function [TYPE Function]
+    /**
+     * @purpose Clears authentication state and storage.
+     * @pre User is currently authenticated.
+     * @post Auth token removed from localStorage, store reset to initial state.
+     */
+    function logout(): void {
+        console.log("[logout][Action] Logging out");
+        if (browser) {
+            localStorage.removeItem('auth_token');
+        }
+        _user = null;
+        _token = null;
+        _isAuthenticated = false;
+        _loading = false;
+        _notify();
+    }
+    // #endregion logout:Function
+
+    // #region setLoading:Function [TYPE Function]
+    /**
+     * @purpose Updates the loading state.
+     * @pre None.
+     * @post Store loading state updated.
+     * @param {boolean} loading - Loading status.
+     */
+    function setLoading(loading: boolean): void {
+        console.log(`[setLoading][Action] Setting loading to ${loading}`);
+        _loading = loading;
+        _notify();
+    }
+    // #endregion setLoading:Function
+
+    return {
+        subscribe(run: (value: AuthState) => void): () => void {
+            _subscribers.push(run);
+            run(_getState());
+            return () => {
+                _subscribers = _subscribers.filter((fn) => fn !== run);
+            };
+        },
+        setToken,
+        setUser,
+        logout,
+        setLoading,
+    };
+}
+// #endregion createAuthStore:Function
+
+export const auth = createAuthStore();
+
+// #endregion authStore:Store
+// #endregion AuthStore
diff --git a/frontend/src/lib/auth/store.ts b/frontend/src/lib/auth/store.ts
deleted file mode 100644
index 69e93f49..00000000
--- a/frontend/src/lib/auth/store.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-// #region AuthStore [C:3] [TYPE Store] [SEMANTICS auth, store, jwt, token, login, session]
-// @BRIEF Manages the global authentication state including JWT token, user profile, and login/logout lifecycle.
-// @RELATION BINDS_TO -> [PermissionsModule]
-// @UX_STATE Loading -> Auth state being initialized from localStorage
-// @UX_STATE Authenticated -> User profile and token active
-// @UX_STATE Unauthenticated -> No valid session, login required
-
-// #region authStore:Store [TYPE Function]
-// @SEMANTICS: auth, store, svelte, jwt, session
-// @PURPOSE:   Manages the global authentication state on the frontend.
-// @LAYER:     Feature
-// @RELATION CALLED_BY -> AuthService
-// @RELATION BINDS_TO -> Navbar
-
-import { writable } from 'svelte/store';
-import { browser } from '$app/environment';
-
-// #region AuthState:Interface [TYPE Function]
-/**
- * @purpose Defines the structure of the authentication state.
- */
-export interface AuthState {
-    user: any | null;
-    token: string | null;
-    isAuthenticated: boolean;
-    loading: boolean;
-}
-// #endregion AuthState:Interface
-
-const initialState: AuthState = {
-    user: null,
-    token: browser ? localStorage.getItem('auth_token') : null,
-    isAuthenticated: false,
-    loading: true
-};
-
-// #region createAuthStore:Function [TYPE Function]
-/**
- * @purpose Creates and configures the auth store with helper methods.
- * @pre No preconditions - initialization function.
- * @post Returns configured auth store with subscribe, setToken, setUser, logout, setLoading methods.
- * @returns {Writable<AuthState>}
- */
-function createAuthStore() {
-    const { subscribe, set, update } = writable<AuthState>(initialState);
-
-    return {
-        subscribe,
-        // #region setToken:Function [TYPE Function]
-        /**
-         * @purpose Updates the store with a new JWT token.
-         * @pre token must be a valid JWT string.
-         * @post Store updated with new token, isAuthenticated set to true.
-         * @param {string} token - The JWT access token.
-         */
-        setToken: (token: string) => {
-            console.log("[setToken][Action] Updating token");
-            if (browser) {
-                localStorage.setItem('auth_token', token);
-            }
-            update(state => ({ ...state, token, isAuthenticated: !!token }));
-        },
-        // #endregion setToken:Function
-        // #region setUser:Function [TYPE Function]
-        /**
-         * @purpose Sets the current user profile data.
-         * @pre User object must contain valid profile data.
-         * @post Store updated with user, isAuthenticated true, loading false.
-         * @param {any} user - The user profile object.
-         */
-        setUser: (user: any) => {
-            console.log("[setUser][Action] Setting user profile");
-            update(state => ({ ...state, user, isAuthenticated: !!user, loading: false }));
-        },
-        // #endregion setUser:Function
-        // #region logout:Function [TYPE Function]
-        /**
-         * @purpose Clears authentication state and storage.
-         * @pre User is currently authenticated.
-         * @post Auth token removed from localStorage, store reset to initial state.
-         */
-        logout: () => {
-            console.log("[logout][Action] Logging out");
-            if (browser) {
-                localStorage.removeItem('auth_token');
-            }
-            set({ user: null, token: null, isAuthenticated: false, loading: false });
-        },
-        // #endregion logout:Function
-        // #region setLoading:Function [TYPE Function]
-        /**
-         * @purpose Updates the loading state.
-         * @pre None.
-         * @post Store loading state updated.
-         * @param {boolean} loading - Loading status.
-         */
-        setLoading: (loading: boolean) => {
-            console.log(`[setLoading][Action] Setting loading to ${loading}`);
-            update(state => ({ ...state, loading }));
-        }
-        // #endregion setLoading:Function
-    };
-}
-// #endregion createAuthStore:Function
-
-export const auth = createAuthStore();
-
-// #endregion authStore:Store
-// #endregion AuthStore
\ No newline at end of file
diff --git a/frontend/src/lib/components/DashboardMaintenanceBadge.svelte b/frontend/src/lib/components/DashboardMaintenanceBadge.svelte
index d33b32da..df69f093 100644
--- a/frontend/src/lib/components/DashboardMaintenanceBadge.svelte
+++ b/frontend/src/lib/components/DashboardMaintenanceBadge.svelte
@@ -8,7 +8,7 @@
 <!-- @UX_REACTIVITY Props -> $props(dashboardId), $derived from maintenanceStore.dashboardBanners -->
 <script lang="ts">
   import { maintenanceStore } from "$lib/stores/maintenance.svelte.js";
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
 
   /**
    * The dashboard ID to check for active maintenance.
diff --git a/frontend/src/lib/components/MaintenanceEventsTable.svelte b/frontend/src/lib/components/MaintenanceEventsTable.svelte
index a86b91b8..9d44bde5 100644
--- a/frontend/src/lib/components/MaintenanceEventsTable.svelte
+++ b/frontend/src/lib/components/MaintenanceEventsTable.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { maintenanceStore } from "$lib/stores/maintenance.svelte.js";
   import Button from "$lib/ui/Button.svelte";
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
 
   let removingEventId = $state(null);
   let isRemovingAll = $state(false);
diff --git a/frontend/src/lib/components/MaintenanceSettingsPanel.svelte b/frontend/src/lib/components/MaintenanceSettingsPanel.svelte
index 443f9098..4c6f98b4 100644
--- a/frontend/src/lib/components/MaintenanceSettingsPanel.svelte
+++ b/frontend/src/lib/components/MaintenanceSettingsPanel.svelte
@@ -24,7 +24,7 @@
   import Button from "$lib/ui/Button.svelte";
   import SearchableMultiSelect from "$lib/components/ui/SearchableMultiSelect.svelte";
   import { api } from "$lib/api.js";
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import HelpTooltip from "$lib/ui/HelpTooltip.svelte";
 
   let isSaving = $state(false);
diff --git a/frontend/src/lib/components/StartMaintenanceForm.svelte b/frontend/src/lib/components/StartMaintenanceForm.svelte
index 0ac8f3ad..3792dd79 100644
--- a/frontend/src/lib/components/StartMaintenanceForm.svelte
+++ b/frontend/src/lib/components/StartMaintenanceForm.svelte
@@ -11,8 +11,8 @@
 <!-- @UX_RECOVERY Retry via re-submit. -->
 <script lang="ts">
   import { startMaintenance } from "$lib/api/maintenance.js";
-  import { addToast } from "$lib/toasts";
-  import { t } from "$lib/i18n";
+  import { addToast } from "$lib/toasts.svelte.js";
+  import { t } from "$lib/i18n/index.svelte.js";
   import HelpTooltip from "$lib/ui/HelpTooltip.svelte";
 
   /** @type {{ onSuccess?: () => void }} */
diff --git a/frontend/src/lib/components/assistant/AssistantChatPanel.svelte b/frontend/src/lib/components/assistant/AssistantChatPanel.svelte
index 18842234..4fc38096 100644
--- a/frontend/src/lib/components/assistant/AssistantChatPanel.svelte
+++ b/frontend/src/lib/components/assistant/AssistantChatPanel.svelte
@@ -28,20 +28,19 @@
 
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
-  import { fromStore } from "svelte/store";
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import AssistantClarificationCard from "$lib/components/assistant/AssistantClarificationCard.svelte";
   import Icon from "$lib/ui/Icon.svelte";
-  import { openDrawerForTask } from "$lib/stores/taskDrawer.js";
+  import { openDrawerForTask } from "$lib/stores/taskDrawer.svelte.js";
   import { normalizeDatasetReviewDetail } from "$lib/api/datasetReview.js";
-  import { setSession as setDatasetReviewSession } from "$lib/stores/datasetReviewSession.js";
+  import { setSession as setDatasetReviewSession } from "$lib/stores/datasetReviewSession.svelte.js";
   import {
     assistantChatStore,
     closeAssistantChat,
     setAssistantConversationId,
     setAssistantSeedMessage,
     setAssistantFocusTarget,
-  } from "$lib/stores/assistantChat.js";
+  } from "$lib/stores/assistantChat.svelte.js";
   import {
     sendAssistantMessage,
     confirmAssistantOperation,
@@ -52,7 +51,7 @@
   } from "$lib/api/assistant.js";
   import { api } from "$lib/api.js";
   import { gitService } from "../../../services/gitService.js";
-  import { addToast } from "$lib/toasts";
+  import { addToast } from "$lib/toasts.svelte.js";
 
   let { variant = "drawer", className = "" } = $props();
 
@@ -81,14 +80,13 @@
   let llmStatusPayload = $state(null);
   let clarificationBannerDismissed = $state(false);
 
-  const assistantChatState = fromStore(assistantChatStore);
-  let isOpen = $derived(assistantChatState.current?.isOpen || false);
-  let conversationId = $derived(assistantChatState.current?.conversationId || null);
+  let isOpen = $derived(assistantChatStore.value?.isOpen || false);
+  let conversationId = $derived(assistantChatStore.value?.conversationId || null);
   let datasetReviewSessionId = $derived(
-    assistantChatState.current?.datasetReviewSessionId || null,
+    assistantChatStore.value?.datasetReviewSessionId || null,
   );
-  let seedMessage = $derived(assistantChatState.current?.seedMessage || "");
-  let focusTarget = $derived(assistantChatState.current?.focusTarget || null);
+  let seedMessage = $derived(assistantChatStore.value?.seedMessage || "");
+  let focusTarget = $derived(assistantChatStore.value?.focusTarget || null);
   const focusTargetKey = $derived(String(focusTarget?.target || ""));
   const panelVisible = $derived(variant === "embedded" || isOpen);
 
diff --git a/frontend/src/lib/components/assistant/AssistantClarificationCard.svelte b/frontend/src/lib/components/assistant/AssistantClarificationCard.svelte
index 33c12f4a..e77e6eba 100644
--- a/frontend/src/lib/components/assistant/AssistantClarificationCard.svelte
+++ b/frontend/src/lib/components/assistant/AssistantClarificationCard.svelte
@@ -18,7 +18,7 @@
 <!-- @UX_RECOVERY: Users can resume the queue, provide a custom answer, or mark the item for expert review from the same assistant surface. -->
 <!-- @UX_REACTIVITY: Uses $props, $state, $derived, and $effect only; no legacy reactive syntax. -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { api, requestApi } from "$lib/api.js";
 
   let {
diff --git a/frontend/src/lib/components/assistant/__tests__/assistant_clarification.integration.test.ts b/frontend/src/lib/components/assistant/__tests__/assistant_clarification.integration.test.ts
index f57b9940..00b65955 100644
--- a/frontend/src/lib/components/assistant/__tests__/assistant_clarification.integration.test.ts
+++ b/frontend/src/lib/components/assistant/__tests__/assistant_clarification.integration.test.ts
@@ -7,11 +7,11 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, fireEvent, waitFor } from "@testing-library/svelte";
 import AssistantChatPanel from "../AssistantChatPanel.svelte";
-import * as assistantApi from "$lib/api/assistant";
+import * as assistantApi from "$lib/api/assistant.js";
 import { api, requestApi } from "$lib/api.js";
-import { setSession as setDatasetReviewSession } from "$lib/stores/datasetReviewSession.js";
+import { setSession as setDatasetReviewSession } from "$lib/stores/datasetReviewSession.svelte.js";
 
-vi.mock("$lib/api/assistant", () => ({
+vi.mock("$lib/api/assistant.js", () => ({
   getAssistantHistory: vi.fn(() => Promise.resolve({ items: [], total: 0, has_next: false })),
   getAssistantConversations: vi.fn(() => Promise.resolve({ items: [], total: 0, has_next: false, active_total: 0, archived_total: 0 })),
   deleteAssistantConversation: vi.fn(),
@@ -28,11 +28,15 @@ vi.mock("$lib/api.js", () => ({
   requestApi: vi.fn(),
 }));
 
-vi.mock("$lib/stores/datasetReviewSession.js", () => ({
+vi.mock("$lib/stores/datasetReviewSession.svelte.js", () => ({
   setSession: vi.fn(),
 }));
 
-vi.mock("$lib/stores/taskDrawer.js", () => ({
+vi.mock("$lib/toasts.svelte.js", () => ({
+  addToast: vi.fn(),
+}));
+
+vi.mock("$lib/stores/taskDrawer.svelte.js", () => ({
   openDrawerForTask: vi.fn(),
 }));
 
@@ -60,8 +64,11 @@ const { assistantState } = vi.hoisted(() => ({
   })(),
 }));
 
-vi.mock("$lib/stores/assistantChat", () => ({
-  assistantChatStore: { subscribe: assistantState.subscribe },
+vi.mock("$lib/stores/assistantChat.svelte.js", () => ({
+  assistantChatStore: {
+    subscribe: assistantState.subscribe,
+    get value() { return { isOpen: true, conversationId: "conv-1", datasetReviewSessionId: "session-1", seedMessage: "", focusTarget: null }; },
+  },
   closeAssistantChat: vi.fn(),
   setAssistantConversationId: vi.fn(),
   setAssistantSeedMessage: vi.fn(),
@@ -71,69 +78,73 @@ vi.mock("$lib/stores/assistantChat", () => ({
 vi.mock("$app/navigation", () => ({ goto: vi.fn() }));
 vi.mock("../../../../services/gitService.js", () => ({ gitService: { getDiff: vi.fn() } }));
 
-vi.mock("$lib/i18n", () => ({
+const mockTranslations = {
+  common: { error: "Common error" },
+  assistant: {
+    title: "Assistant",
+    close: "Close",
+    conversations: "Conversations",
+    new: "New",
+    active: "Active",
+    archived: "Archived",
+    more: "More",
+    loading_history: "Loading history",
+    loading_older: "Loading older",
+    try_commands: "Try commands",
+    sample_command_branch: "branch",
+    sample_command_migration: "migration",
+    sample_command_status: "status",
+    you: "You",
+    assistant: "Assistant",
+    thinking: "Thinking",
+    input_placeholder: "Type command",
+    send: "Send",
+    conversation: "Conversation",
+    session_scope_title: "Active review context",
+    session_scope_label: "Session",
+    focus_target_label: "Focus",
+    clear_focus_action: "Clear focus",
+    states: { success: "Success" },
+    open_task_drawer: "Open task drawer",
+  },
+  dataset_review: {
+    clarification: {
+      title: "Clarification queue",
+      progress_label: "Progress",
+      active_question_label: "Active question",
+      why_it_matters_label: "Why it matters",
+      current_guess_label: "Current guess",
+      topic_label: "Topic",
+      custom_answer_label: "Custom answer",
+      answer_action: "Answer",
+      custom_answer_action: "Use custom answer",
+      skip_action: "Skip",
+      expert_review_action: "Expert review",
+      completed: "No active clarification question remains.",
+      resume_action: "Resume clarification",
+      feedback_label: "Feedback",
+      feedback_prompt: "Record whether the clarification result was useful.",
+      feedback_up_action: "Thumbs up",
+      feedback_down_action: "Thumbs down",
+      messages: {
+        saving: "Saving clarification answer...",
+        saved: "Clarification answer saved.",
+        resumed: "Clarification queue resumed.",
+      },
+    },
+  },
+  dashboard: {},
+};
+
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: {
     subscribe: (fn) => {
-      fn({
-        common: { error: "Common error" },
-        assistant: {
-          title: "Assistant",
-          close: "Close",
-          conversations: "Conversations",
-          new: "New",
-          active: "Active",
-          archived: "Archived",
-          more: "More",
-          loading_history: "Loading history",
-          loading_older: "Loading older",
-          try_commands: "Try commands",
-          sample_command_branch: "branch",
-          sample_command_migration: "migration",
-          sample_command_status: "status",
-          you: "You",
-          assistant: "Assistant",
-          thinking: "Thinking",
-          input_placeholder: "Type command",
-          send: "Send",
-          conversation: "Conversation",
-          session_scope_title: "Active review context",
-          session_scope_label: "Session",
-          focus_target_label: "Focus",
-          clear_focus_action: "Clear focus",
-          states: { success: "Success" },
-          open_task_drawer: "Open task drawer",
-        },
-        dataset_review: {
-          clarification: {
-            title: "Clarification queue",
-            progress_label: "Progress",
-            active_question_label: "Active question",
-            why_it_matters_label: "Why it matters",
-            current_guess_label: "Current guess",
-            topic_label: "Topic",
-            custom_answer_label: "Custom answer",
-            answer_action: "Answer",
-            custom_answer_action: "Use custom answer",
-            skip_action: "Skip",
-            expert_review_action: "Expert review",
-            completed: "No active clarification question remains.",
-            resume_action: "Resume clarification",
-            feedback_label: "Feedback",
-            feedback_prompt: "Record whether the clarification result was useful.",
-            feedback_up_action: "Thumbs up",
-            feedback_down_action: "Thumbs down",
-            messages: {
-              saving: "Saving clarification answer...",
-              saved: "Clarification answer saved.",
-              resumed: "Clarification queue resumed.",
-            },
-          },
-        },
-        dashboard: {},
-      });
+      fn(mockTranslations);
       return () => {};
     },
   },
+  getT: vi.fn(() => mockTranslations),
+  _: vi.fn((key) => key),
 }));
 
 describe("AssistantChatPanel clarification integration", () => {
diff --git a/frontend/src/lib/components/assistant/__tests__/assistant_confirmation.integration.test.ts b/frontend/src/lib/components/assistant/__tests__/assistant_confirmation.integration.test.ts
index bd5c78e4..13e0596d 100644
--- a/frontend/src/lib/components/assistant/__tests__/assistant_confirmation.integration.test.ts
+++ b/frontend/src/lib/components/assistant/__tests__/assistant_confirmation.integration.test.ts
@@ -1,11 +1,11 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
 import AssistantChatPanel from '../AssistantChatPanel.svelte';
-import * as api from '$lib/api/assistant';
-import { assistantChatStore } from '$lib/stores/assistantChat';
+import * as api from '$lib/api/assistant.js';
+import { assistantChatStore } from '$lib/stores/assistantChat.svelte.js';
 
 // Mock dependencies
-vi.mock('$lib/api/assistant', () => ({
+vi.mock('$lib/api/assistant.js', () => ({
   getAssistantHistory: vi.fn(),
   confirmAssistantOperation: vi.fn(),
   cancelAssistantOperation: vi.fn(),
@@ -29,22 +29,18 @@ vi.mock('$lib/api', () => ({
   requestApi: vi.fn(),
 }));
 
-vi.mock('$lib/toasts', () => ({
+vi.mock('$lib/toasts.svelte.js', () => ({
   addToast: vi.fn()
 }));
 
-vi.mock('$lib/stores/assistantChat', () => ({
+const mockAssistantState = { isOpen: true, conversationId: 'conv-1', datasetReviewSessionId: 'session-1', seedMessage: '', focusTarget: { target: 'mapping:m-1', source: 'test' } };
+vi.mock('$lib/stores/assistantChat.svelte.js', () => ({
   assistantChatStore: {
     subscribe: (fn) => {
-      fn({
-        isOpen: true,
-        conversationId: 'conv-1',
-        datasetReviewSessionId: 'session-1',
-        seedMessage: '',
-        focusTarget: { target: 'mapping:m-1', source: 'test' },
-      });
+      fn(mockAssistantState);
       return () => { };
-    }
+    },
+    get value() { return mockAssistantState; },
   },
   closeAssistantChat: vi.fn(),
   setAssistantConversationId: vi.fn(),
@@ -56,49 +52,52 @@ vi.mock('$app/navigation', () => ({
   goto: vi.fn()
 }));
 
-vi.mock('$lib/i18n', () => ({
+const mockTranslations = {
+  assistant: {
+    action_failed: 'Action failed',
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    title: 'Assistant',
+    close: 'Close',
+    loading_history: 'Loading history...',
+    try_commands: 'Try commands',
+    sample_command_branch: 'branch',
+    sample_command_migration: 'migration',
+    sample_command_status: 'status',
+    you: 'You',
+    assistant: 'Assistant',
+    states: {
+      needs_confirmation: 'Needs confirmation',
+      failed: 'Failed'
+    },
+    task_id: 'task_id',
+    open_task_drawer: 'Open Task Drawer',
+    input_placeholder: 'Type a command...',
+    send: 'Send',
+    conversations: 'Conversations',
+    new: 'New',
+    active: 'Active',
+    archived: 'Archived',
+    more: 'More',
+    session_scope_title: 'Active review context',
+    session_scope_label: 'Session',
+    focus_target_label: 'Focus',
+    clear_focus_action: 'Clear focus',
+    confirmation_card_title: 'Confirmation required',
+    confirmation_scope_fallback: 'This action affects the current assistant scope.',
+    confirmation_operation_label: 'Action',
+    highlight_workspace_action: 'Highlight in workspace',
+  }
+};
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: {
     subscribe: (fn) => {
-      fn({
-        assistant: {
-          action_failed: 'Action failed',
-          confirm: 'Confirm',
-          cancel: 'Cancel',
-          title: 'Assistant',
-          close: 'Close',
-          loading_history: 'Loading history...',
-          try_commands: 'Try commands',
-          sample_command_branch: 'branch',
-          sample_command_migration: 'migration',
-          sample_command_status: 'status',
-          you: 'You',
-          assistant: 'Assistant',
-          states: {
-            needs_confirmation: 'Needs confirmation',
-            failed: 'Failed'
-          },
-          task_id: 'task_id',
-          open_task_drawer: 'Open Task Drawer',
-          input_placeholder: 'Type a command...',
-          send: 'Send',
-          conversations: 'Conversations',
-          new: 'New',
-          active: 'Active',
-          archived: 'Archived',
-          more: 'More',
-          session_scope_title: 'Active review context',
-          session_scope_label: 'Session',
-          focus_target_label: 'Focus',
-          clear_focus_action: 'Clear focus',
-          confirmation_card_title: 'Confirmation required',
-          confirmation_scope_fallback: 'This action affects the current assistant scope.',
-          confirmation_operation_label: 'Action',
-          highlight_workspace_action: 'Highlight in workspace',
-        }
-      });
+      fn(mockTranslations);
       return () => { };
     }
-  }
+  },
+  getT: vi.fn(() => mockTranslations),
+  _: vi.fn((key) => key),
 }));
 
 describe('AssistantChatPanel confirmation functional tests', () => {
diff --git a/frontend/src/lib/components/assistant/__tests__/assistant_first_message.integration.test.ts b/frontend/src/lib/components/assistant/__tests__/assistant_first_message.integration.test.ts
index a5dfaa6f..3db28bef 100644
--- a/frontend/src/lib/components/assistant/__tests__/assistant_first_message.integration.test.ts
+++ b/frontend/src/lib/components/assistant/__tests__/assistant_first_message.integration.test.ts
@@ -38,7 +38,7 @@ const { assistantState } = vi.hoisted(() => ({
   })(),
 }));
 
-vi.mock('$lib/api/assistant', () => ({
+vi.mock('$lib/api/assistant.js', () => ({
   getAssistantHistory: vi.fn(() =>
     Promise.resolve({ items: [], total: 0, has_next: false }),
   ),
@@ -73,9 +73,10 @@ vi.mock('$lib/api', () => ({
   requestApi: vi.fn(),
 }));
 
-vi.mock('$lib/stores/assistantChat', () => ({
+vi.mock('$lib/stores/assistantChat.svelte.js', () => ({
   assistantChatStore: {
     subscribe: assistantState.subscribe,
+    get value() { return { isOpen: true, conversationId: null, datasetReviewSessionId: 'session-1', seedMessage: '', focusTarget: null }; },
   },
   closeAssistantChat: vi.fn(),
   setAssistantConversationId: vi.fn((conversationId) => {
@@ -89,7 +90,11 @@ vi.mock('$lib/stores/assistantChat', () => ({
   }),
 }));
 
-vi.mock('$lib/stores/taskDrawer.js', () => ({
+vi.mock('$lib/toasts.svelte.js', () => ({
+  addToast: vi.fn(),
+}));
+
+vi.mock('$lib/stores/taskDrawer.svelte.js', () => ({
   openDrawerForTask: vi.fn(),
 }));
 
@@ -103,46 +108,49 @@ vi.mock('../../../../services/gitService.js', () => ({
   },
 }));
 
-vi.mock('$lib/i18n', () => ({
+const mockTranslations = {
+  assistant: {
+    title: 'Assistant',
+    close: 'Close',
+    conversations: 'Conversations',
+    new: 'New',
+    active: 'Active',
+    archived: 'Archived',
+    more: 'More',
+    loading_history: 'Loading history',
+    loading_older: 'Loading older',
+    try_commands: 'Try commands',
+    sample_command_branch: 'branch',
+    sample_command_migration: 'migration',
+    sample_command_status: 'status',
+    you: 'You',
+    assistant: 'Assistant',
+    thinking: 'Thinking',
+    input_placeholder: 'Type command',
+    send: 'Send',
+    conversation: 'Conversation',
+    session_scope_title: 'Active review context',
+    session_scope_label: 'Session',
+    focus_target_label: 'Focus',
+    clear_focus_action: 'Clear focus',
+    states: {
+      success: 'Success',
+      failed: 'Failed',
+      started: 'Started',
+    },
+    open_task_drawer: 'Open task drawer',
+  },
+  dashboard: {},
+};
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: {
     subscribe: (fn) => {
-      fn({
-        assistant: {
-          title: 'Assistant',
-          close: 'Close',
-          conversations: 'Conversations',
-          new: 'New',
-          active: 'Active',
-          archived: 'Archived',
-          more: 'More',
-          loading_history: 'Loading history',
-          loading_older: 'Loading older',
-          try_commands: 'Try commands',
-          sample_command_branch: 'branch',
-          sample_command_migration: 'migration',
-          sample_command_status: 'status',
-          you: 'You',
-          assistant: 'Assistant',
-          thinking: 'Thinking',
-          input_placeholder: 'Type command',
-          send: 'Send',
-          conversation: 'Conversation',
-          session_scope_title: 'Active review context',
-          session_scope_label: 'Session',
-          focus_target_label: 'Focus',
-          clear_focus_action: 'Clear focus',
-          states: {
-            success: 'Success',
-            failed: 'Failed',
-            started: 'Started',
-          },
-          open_task_drawer: 'Open task drawer',
-        },
-        dashboard: {},
-      });
+      fn(mockTranslations);
       return () => {};
     },
   },
+  getT: vi.fn(() => mockTranslations),
+  _: vi.fn((key) => key),
 }));
 
 // #region assistant_first_message_tests:Function [TYPE Function]
diff --git a/frontend/src/lib/components/dataset-review/CompiledSQLPreview.svelte b/frontend/src/lib/components/dataset-review/CompiledSQLPreview.svelte
index 579a56d0..c6d0c604 100644
--- a/frontend/src/lib/components/dataset-review/CompiledSQLPreview.svelte
+++ b/frontend/src/lib/components/dataset-review/CompiledSQLPreview.svelte
@@ -19,7 +19,7 @@
 <!-- @UX_RECOVERY: Users can retry preview generation and jump back to mapping review when diagnostics point to execution-input issues. -->
 <!-- @UX_REACTIVITY: Uses $props, $state, and $derived only; no legacy reactive syntax. -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { requestDatasetReviewApi } from "$lib/api/datasetReview.js";
 
   let {
diff --git a/frontend/src/lib/components/dataset-review/ExecutionMappingReview.svelte b/frontend/src/lib/components/dataset-review/ExecutionMappingReview.svelte
index 9409558d..394e1871 100644
--- a/frontend/src/lib/components/dataset-review/ExecutionMappingReview.svelte
+++ b/frontend/src/lib/components/dataset-review/ExecutionMappingReview.svelte
@@ -17,7 +17,7 @@
 <!-- @UX_RECOVERY: Users can replace transformed values manually instead of approving them as-is and can retry failed mutations in place. -->
 <!-- @UX_REACTIVITY: Uses $props, $state, and $derived only; no legacy reactive syntax. -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { requestDatasetReviewApi } from "$lib/api/datasetReview.js";
 
   let {
diff --git a/frontend/src/lib/components/dataset-review/LaunchConfirmationPanel.svelte b/frontend/src/lib/components/dataset-review/LaunchConfirmationPanel.svelte
index 950f557a..583a3ea0 100644
--- a/frontend/src/lib/components/dataset-review/LaunchConfirmationPanel.svelte
+++ b/frontend/src/lib/components/dataset-review/LaunchConfirmationPanel.svelte
@@ -17,7 +17,7 @@
 <!-- @UX_RECOVERY: Blocked launch state provides jump paths back to mapping review, preview generation, or validation remediation. -->
 <!-- @UX_REACTIVITY: Uses $props, $state, and $derived only; no legacy reactive syntax. -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { requestDatasetReviewApi } from "$lib/api/datasetReview.js";
 
   let {
diff --git a/frontend/src/lib/components/dataset-review/SemanticLayerReview.svelte b/frontend/src/lib/components/dataset-review/SemanticLayerReview.svelte
index 2976baf8..4581ab45 100644
--- a/frontend/src/lib/components/dataset-review/SemanticLayerReview.svelte
+++ b/frontend/src/lib/components/dataset-review/SemanticLayerReview.svelte
@@ -16,7 +16,7 @@
 <!-- @UX_RECOVERY: Users can cancel local edits, unlock a manual override for re-review, or retry failed mutations in place. -->
 <!-- @UX_REACTIVITY: Uses $props, $state, and $derived only; no legacy reactive syntax. -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { requestDatasetReviewApi } from "$lib/api/datasetReview.js";
 
   let {
diff --git a/frontend/src/lib/components/dataset-review/SourceIntakePanel.svelte b/frontend/src/lib/components/dataset-review/SourceIntakePanel.svelte
index f064f5ef..9dde721f 100644
--- a/frontend/src/lib/components/dataset-review/SourceIntakePanel.svelte
+++ b/frontend/src/lib/components/dataset-review/SourceIntakePanel.svelte
@@ -12,7 +12,7 @@
 <!-- @UX_RECOVERY: Users can correct invalid input in place without resetting the page. -->
 <!-- @UX_REACTIVITY: Uses $props, $state, and $derived only; no legacy reactive syntax. -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
 
   let {
     environments = [],
diff --git a/frontend/src/lib/components/dataset-review/ValidationFindingsPanel.svelte b/frontend/src/lib/components/dataset-review/ValidationFindingsPanel.svelte
index b8a1cf4e..3f99920d 100644
--- a/frontend/src/lib/components/dataset-review/ValidationFindingsPanel.svelte
+++ b/frontend/src/lib/components/dataset-review/ValidationFindingsPanel.svelte
@@ -13,7 +13,7 @@
 <!-- @UX_REACTIVITY: Uses $props and $derived only; no legacy reactive syntax. -->
 
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
 
   let {
     findings = [],
diff --git a/frontend/src/lib/components/dataset-review/__tests__/source_intake_panel.ux.test.ts b/frontend/src/lib/components/dataset-review/__tests__/source_intake_panel.ux.test.ts
index 28f879ac..e91d3a09 100644
--- a/frontend/src/lib/components/dataset-review/__tests__/source_intake_panel.ux.test.ts
+++ b/frontend/src/lib/components/dataset-review/__tests__/source_intake_panel.ux.test.ts
@@ -22,7 +22,7 @@ import { describe, it, expect, vi } from "vitest";
 import { fireEvent, render, screen } from "@testing-library/svelte";
 import SourceIntakePanel from "../SourceIntakePanel.svelte";
 
-vi.mock("$lib/i18n", () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: {
     subscribe: (fn) => {
       fn({
diff --git a/frontend/src/lib/components/dataset-review/__tests__/us2_semantic_workspace.ux.test.ts b/frontend/src/lib/components/dataset-review/__tests__/us2_semantic_workspace.ux.test.ts
index 1fbc3cb9..e594c887 100644
--- a/frontend/src/lib/components/dataset-review/__tests__/us2_semantic_workspace.ux.test.ts
+++ b/frontend/src/lib/components/dataset-review/__tests__/us2_semantic_workspace.ux.test.ts
@@ -17,7 +17,7 @@ import { render, screen, fireEvent, waitFor } from "@testing-library/svelte";
 import SemanticLayerReview from "../SemanticLayerReview.svelte";
 import ExecutionMappingReview from "../ExecutionMappingReview.svelte";
 
-vi.mock("$lib/i18n", () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: {
     subscribe: (fn) => {
       fn({
diff --git a/frontend/src/lib/components/dataset-review/__tests__/us3_execution_batch.ux.test.ts b/frontend/src/lib/components/dataset-review/__tests__/us3_execution_batch.ux.test.ts
index 064773c3..81acff56 100644
--- a/frontend/src/lib/components/dataset-review/__tests__/us3_execution_batch.ux.test.ts
+++ b/frontend/src/lib/components/dataset-review/__tests__/us3_execution_batch.ux.test.ts
@@ -32,7 +32,7 @@ vi.mock("$lib/api/datasetReview.js", () => ({
   requestDatasetReviewApi: vi.fn(),
 }));
 
-vi.mock("$lib/i18n", () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: {
     subscribe: (fn) => {
       fn({
diff --git a/frontend/src/lib/components/dataset-review/__tests__/validation_findings_panel.ux.test.ts b/frontend/src/lib/components/dataset-review/__tests__/validation_findings_panel.ux.test.ts
index 8b3e71bc..7694053f 100644
--- a/frontend/src/lib/components/dataset-review/__tests__/validation_findings_panel.ux.test.ts
+++ b/frontend/src/lib/components/dataset-review/__tests__/validation_findings_panel.ux.test.ts
@@ -22,7 +22,7 @@ import { describe, it, expect, vi } from "vitest";
 import { fireEvent, render, screen } from "@testing-library/svelte";
 import ValidationFindingsPanel from "../ValidationFindingsPanel.svelte";
 
-vi.mock("$lib/i18n", () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: {
     subscribe: (fn) => {
       fn({
diff --git a/frontend/src/lib/components/health/HealthMatrix.svelte b/frontend/src/lib/components/health/HealthMatrix.svelte
index 4db71ce0..5f7481a5 100644
--- a/frontend/src/lib/components/health/HealthMatrix.svelte
+++ b/frontend/src/lib/components/health/HealthMatrix.svelte
@@ -1,84 +1,127 @@
-<!-- #region HealthMatrix [C:3] [TYPE Component] [SEMANTICS health, matrix, dashboard, summary, badge] -->
-<!-- @BRIEF Component component: lib/components/health/HealthMatrix.svelte -->
+<!-- #region HealthMatrix [C:3] [TYPE Component] [SEMANTICS health, matrix, dashboard, summary, filter] -->
+<!-- @BRIEF Clickable health status summary grid — clicking a card emits a filter event. -->
 <!-- @LAYER UI -->
-<!--
-@PURPOSE: Visual grid summary representing dashboard health status counts.
-@LAYER UI
-@RELATION BINDS_TO -> [EXT:frontend:i18n]
-
-@UX_STATE: Idle -> Displays the health matrix grid.
-@UX_STATE: Loading -> Displays a skeleton or spinner.
-@UX_STATE: Error -> Displays an error message with a retry option.
-@UX_REACTIVITY: Uses $derived to keep aggregate totals consistent with the count props.
--->
+<!-- @RELATION BINDS_TO -> [EXT:frontend:i18n] -->
+<!-- @UX_STATE Idle -> 4 clickable status cards. -->
+<!-- @UX_STATE Loading -> Skeleton cards. -->
+<!-- @UX_STATE Error -> Error message. -->
+<!-- @UX_STATE Active -> One card highlighted (the current filter). -->
 <script lang="ts">
-  import { t } from '$lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
 
-  /** @type {{ 
-   *    pass_count: number, 
-   *    warn_count: number, 
-   *    fail_count: number, 
-   *    unknown_count: number,
-   *    loading: boolean, 
-   *    error: string | null 
-   *  }} */
-  let { 
-    pass_count = 0, 
-    warn_count = 0, 
-    fail_count = 0, 
+  let {
+    pass_count = 0,
+    warn_count = 0,
+    fail_count = 0,
     unknown_count = 0,
-    loading = false, 
-    error = null 
+    loading = false,
+    error = null,
+    selectedFilter = '',
+    onSelect = (_status: string) => {},
   } = $props();
 
-  // [REASON] We use derived state for total count to ensure consistency.
   let total = $derived(pass_count + warn_count + fail_count + unknown_count);
+  const all_count = $derived(total);
 </script>
 
-<div class="health-matrix-summary mb-6">
+<div class="health-matrix-summary">
   {#if loading}
-    <div class="flex gap-4 animate-pulse">
-      <div class="h-24 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
-      <div class="h-24 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
-      <div class="h-24 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
+    <div class="grid grid-cols-2 md:grid-cols-5 gap-3 animate-pulse">
+      {#each Array(5) as _, i (i)}
+        <div class="h-24 bg-gray-100 rounded-xl"></div>
+      {/each}
     </div>
   {:else if error}
-    <div class="p-4 bg-destructive-light dark:bg-red-900/20 border border-destructive-light dark:border-red-800 rounded-lg text-red-700 dark:text-red-400">
-      <p class="font-medium">{$t.health?.load_failed}</p>
-      <p class="text-sm">{error}</p>
+    <div class="p-4 bg-red-50 border border-red-200 rounded-xl text-red-700">
+      <p class="font-semibold">{$t.health?.load_failed || 'Failed to load health data'}</p>
+      <p class="text-sm mt-1">{error}</p>
     </div>
   {:else}
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-      <div class="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg text-center">
-        <div class="text-2xl font-bold text-green-700 dark:text-green-400">🟢 {pass_count}</div>
-        <div class="text-xs text-green-600 dark:text-green-500 uppercase tracking-wider font-semibold">{$t.health?.status_pass}</div>
-      </div>
-      
-      <div class="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg text-center">
-        <div class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">🟡 {warn_count}</div>
-        <div class="text-xs text-yellow-600 dark:text-yellow-500 uppercase tracking-wider font-semibold">{$t.health?.status_warn}</div>
-      </div>
-      
-      <div class="p-4 bg-destructive-light dark:bg-red-900/20 border border-destructive-light dark:border-red-800 rounded-lg text-center">
-        <div class="text-2xl font-bold text-red-700 dark:text-red-400">🔴 {fail_count}</div>
-        <div class="text-xs text-red-600 dark:text-red-500 uppercase tracking-wider font-semibold">{$t.health?.status_fail}</div>
-      </div>
+    <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
+      <!-- ALL -->
+      <button
+        onclick={() => onSelect('')}
+        class="relative p-4 rounded-xl border-2 text-left transition-all cursor-pointer
+          {selectedFilter === '' ? 'border-indigo-400 bg-indigo-50 shadow-sm' : 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm'}"
+      >
+        <div class="text-3xl font-bold {selectedFilter === '' ? 'text-indigo-700' : 'text-gray-900'}">{all_count}</div>
+        <div class="mt-1 text-xs font-semibold uppercase tracking-wider {selectedFilter === '' ? 'text-indigo-600' : 'text-gray-500'}">{$t.health?.all_dashboards || 'ALL'}</div>
+        <div class="mt-0.5 text-[10px] {selectedFilter === '' ? 'text-indigo-400' : 'text-gray-400'}">{$t.health?.total_dashboards || 'Total'}</div>
+      </button>
 
-      <div class="p-4 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-center">
-        <div class="text-2xl font-bold text-gray-700 dark:text-gray-300">⚪ {unknown_count}</div>
-        <div class="text-xs text-gray-600 dark:text-gray-500 uppercase tracking-wider font-semibold">{$t.health?.status_unknown}</div>
-      </div>
+      <!-- PASS -->
+      <button
+        onclick={() => onSelect(selectedFilter === 'PASS' ? '' : 'PASS')}
+        class="relative p-4 rounded-xl border-2 text-left transition-all cursor-pointer
+          {selectedFilter === 'PASS' ? 'border-green-500 bg-green-50 shadow-sm ring-1 ring-green-500' : 'border-green-200 bg-green-50/40 hover:bg-green-50 hover:border-green-300'}"
+      >
+        <div class="absolute top-2 right-2 opacity-10">
+          <svg class="w-12 h-12 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        </div>
+        <div class="text-3xl font-bold text-green-700">{pass_count}</div>
+        <div class="mt-1 text-xs font-semibold text-green-600 uppercase tracking-wider">{$t.health?.status_pass || 'PASS'}</div>
+        <div class="mt-0.5 text-[10px] text-green-500/70">{$t.health?.healthy_dashboards || 'Healthy'}</div>
+      </button>
+
+      <!-- WARN -->
+      <button
+        onclick={() => onSelect(selectedFilter === 'WARN' ? '' : 'WARN')}
+        class="relative p-4 rounded-xl border-2 text-left transition-all cursor-pointer
+          {selectedFilter === 'WARN' ? 'border-yellow-500 bg-yellow-50 shadow-sm ring-1 ring-yellow-500' : 'border-yellow-200 bg-yellow-50/40 hover:bg-yellow-50 hover:border-yellow-300'}"
+      >
+        <div class="absolute top-2 right-2 opacity-10">
+          <svg class="w-12 h-12 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        </div>
+        <div class="text-3xl font-bold text-yellow-700">{warn_count}</div>
+        <div class="mt-1 text-xs font-semibold text-yellow-600 uppercase tracking-wider">{$t.health?.status_warn || 'WARN'}</div>
+        <div class="mt-0.5 text-[10px] text-yellow-500/70">{$t.health?.warning_dashboards || 'Needs attention'}</div>
+      </button>
+
+      <!-- FAIL -->
+      <button
+        onclick={() => onSelect(selectedFilter === 'FAIL' ? '' : 'FAIL')}
+        class="relative p-4 rounded-xl border-2 text-left transition-all cursor-pointer
+          {selectedFilter === 'FAIL' ? 'border-red-500 bg-red-50 shadow-sm ring-1 ring-red-500' : 'border-red-200 bg-red-50/40 hover:bg-red-50 hover:border-red-300'}"
+      >
+        <div class="absolute top-2 right-2 opacity-10">
+          <svg class="w-12 h-12 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </div>
+        <div class="text-3xl font-bold text-red-700">{fail_count}</div>
+        <div class="mt-1 text-xs font-semibold text-red-600 uppercase tracking-wider">{$t.health?.status_fail || 'FAIL'}</div>
+        <div class="mt-0.5 text-[10px] text-red-500/70">{$t.health?.failing_dashboards || 'Requires action'}</div>
+      </button>
+
+      <!-- UNKNOWN -->
+      <button
+        onclick={() => onSelect(selectedFilter === 'UNKNOWN' ? '' : 'UNKNOWN')}
+        class="relative p-4 rounded-xl border-2 text-left transition-all cursor-pointer
+          {selectedFilter === 'UNKNOWN' ? 'border-gray-500 bg-gray-100 shadow-sm ring-1 ring-gray-500' : 'border-gray-200 bg-gray-50/40 hover:bg-gray-50 hover:border-gray-300'}"
+      >
+        <div class="absolute top-2 right-2 opacity-10">
+          <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        </div>
+        <div class="text-3xl font-bold text-gray-500">{unknown_count}</div>
+        <div class="mt-1 text-xs font-semibold text-gray-500 uppercase tracking-wider">{$t.health?.status_unknown || 'UNKNOWN'}</div>
+        <div class="mt-0.5 text-[10px] text-gray-400/70">{$t.health?.unknown_dashboards || 'No data'}</div>
+      </button>
     </div>
-    
+
     {#if total === 0}
-      <div class="mt-4 p-8 text-center border-2 border-dashed border-gray-200 dark:border-gray-700 rounded-xl text-gray-500 dark:text-gray-400">
-        {$t.health?.no_records_for_environment}
+      <div class="mt-4 p-8 text-center border-2 border-dashed border-gray-200 rounded-xl text-gray-400">
+        <svg class="w-10 h-10 mx-auto mb-2 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+        </svg>
+        <p>{$t.health?.no_records_for_environment || 'No validation records for this environment'}</p>
       </div>
     {/if}
   {/if}
 </div>
-
-<style>
-  /* Tailwind handles most styling, custom tweaks here if needed */
-</style>
 <!-- #endregion HealthMatrix -->
diff --git a/frontend/src/lib/components/health/ScheduleAtAGlance.svelte b/frontend/src/lib/components/health/ScheduleAtAGlance.svelte
index a69b83c8..ed3f5d47 100644
--- a/frontend/src/lib/components/health/ScheduleAtAGlance.svelte
+++ b/frontend/src/lib/components/health/ScheduleAtAGlance.svelte
@@ -19,7 +19,7 @@
   import { SvelteSet } from 'svelte/reactivity';
   import { goto } from '$app/navigation';
   import { getValidationTasks as fetchTasks } from '$lib/api.js';
-  import { t } from '$lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
 
   /** @type {{ healthItems: Array<{task_id?: string, status: string}>, selectedEnvId?: string, appTimezone?: string }} */
   let {
diff --git a/frontend/src/lib/components/layout/Breadcrumbs.svelte b/frontend/src/lib/components/layout/Breadcrumbs.svelte
index 9958eb0e..184099ae 100644
--- a/frontend/src/lib/components/layout/Breadcrumbs.svelte
+++ b/frontend/src/lib/components/layout/Breadcrumbs.svelte
@@ -20,16 +20,14 @@
    */
 
   import { page } from "$app/state";
-  import { fromStore } from "svelte/store";
-  import { t, _ } from "$lib/i18n";
+  import { t, _ } from "$lib/i18n/index.svelte.js";
   import Icon from "$lib/ui/Icon.svelte";
 
   let { maxVisible = 3 } = $props();
-  const translationState = fromStore(t);
 
   // Breadcrumb items derived from current path
   let breadcrumbItems = $derived(
-    getBreadcrumbs(page.url.pathname || "/", maxVisible, translationState.current),
+    getBreadcrumbs(page.url.pathname || "/", maxVisible, t),
   );
 
   /**
@@ -150,7 +148,7 @@
 
 <nav
   class="mx-4 md:mx-6"
-  aria-label={translationState.current?.nav?.breadcrumb_nav}
+  aria-label={t.nav?.breadcrumb_nav}
 >
   <div class="inline-flex max-w-full items-center gap-1.5 rounded-xl border border-slate-200/80 bg-white/85 px-2 py-1.5 shadow-sm backdrop-blur">
     {#each breadcrumbItems as item, index}
diff --git a/frontend/src/lib/components/layout/Sidebar.svelte b/frontend/src/lib/components/layout/Sidebar.svelte
index d0132eac..37177e25 100644
--- a/frontend/src/lib/components/layout/Sidebar.svelte
+++ b/frontend/src/lib/components/layout/Sidebar.svelte
@@ -14,35 +14,35 @@
 <!-- @UX_RECOVERY Click outside on mobile closes overlay. -->
 <script lang="ts">
   import { page } from "$app/state";
-  import { fromStore } from "svelte/store";
   import {
     sidebarStore,
     toggleSidebar,
     setActiveItem,
     closeMobile,
-  } from "$lib/stores/sidebar.js";
-  import { healthStore, failingCount } from "$lib/stores/health.js";
+  } from "$lib/stores/sidebar.svelte.js";
+  import { healthStore, failingCount } from "$lib/stores/health.svelte.js";
   import { onMount } from "svelte";
-  import { t } from "$lib/i18n";
-  import { auth } from "$lib/auth/store.js";
+  import { t } from "$lib/i18n/index.svelte.js";
+  import { auth } from "$lib/auth/store.svelte.js";
   import { buildSidebarSections } from "$lib/components/layout/sidebarNavigation.js";
   import { fetchApi } from "$lib/api.js";
   import { browser } from "$app/environment";
   import { goto } from "$app/navigation";
   import Icon from "$lib/ui/Icon.svelte";
 
-  const sidebarState = fromStore(sidebarStore);
-  const translationState = fromStore(t);
-  const authState = fromStore(auth);
-  const failingCountState = fromStore(failingCount);
+  let _authState = $state({ user: null, token: null, isAuthenticated: false, loading: true });
+  $effect(() => {
+    const unsub = auth.subscribe(v => { _authState = v; });
+    return unsub;
+  });
 
   let features = $state({});
   let cleanupInterval = null;
 
   let sections = $derived(
     buildSidebarSections(
-      translationState.current,
-      authState.current?.user || null,
+      t,
+      _authState.user || null,
       features,
     ),
   );
@@ -50,17 +50,17 @@
   // Flat categories list for fallback resolution
   let allCategories = $derived(sections.flatMap((s) => s.categories));
 
-  let isExpanded = $derived(sidebarState.current?.isExpanded ?? true);
+  let isExpanded = $derived(sidebarStore.value?.isExpanded ?? true);
   let activeCategory = $derived(
-    sidebarState.current?.activeCategory || "dashboards",
+    sidebarStore.value?.activeCategory || "dashboards",
   );
-  let activeItem = $derived(sidebarState.current?.activeItem || "/dashboards");
-  let isMobileOpen = $derived(Boolean(sidebarState.current?.isMobileOpen));
-  let failingDashboardCount = $derived(failingCountState.current || 0);
+  let activeItem = $derived(sidebarStore.value?.activeItem || "/dashboards");
+  let isMobileOpen = $derived(Boolean(sidebarStore.value?.isMobileOpen));
+  let failingDashboardCount = $derived(failingCount.current || 0);
   let expandedCategories = $state(new Set(["dashboards"]));
   let expandedSections = $state(new Set(["resources", "operations", "system"]));
 
-  let user = $derived(authState.current?.user || null);
+  let user = $derived(_authState.user || null);
 
   function withExpandedCategory(categoryId) {
     const next = new Set(expandedCategories);
@@ -236,13 +236,13 @@
         >
           <Icon name="layers" size={15} />
         </span>
-        {translationState.current?.nav?.menu || "Menu"}
+        {t.nav?.menu || "Menu"}
       </span>
       <button
         onclick={handleToggleClick}
         class="flex h-7 w-7 items-center justify-center rounded-md text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors"
-        aria-label={translationState.current?.nav?.collapse}
-        title={translationState.current?.nav?.collapse}
+        aria-label={t.nav?.collapse}
+        title={t.nav?.collapse}
       >
         <Icon name="chevronLeft" size={15} />
       </button>
@@ -255,8 +255,8 @@
       <button
         onclick={handleToggleClick}
         class="flex h-7 w-7 items-center justify-center rounded-md text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors ml-1"
-        aria-label={translationState.current?.nav?.expand}
-        title={translationState.current?.nav?.expand}
+        aria-label={t.nav?.expand}
+        title={t.nav?.expand}
       >
         <Icon name="chevronRight" size={15} />
       </button>
@@ -393,8 +393,8 @@
           <button
             onclick={handleSettingsClick}
             class="flex h-7 w-7 items-center justify-center rounded-md text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors"
-            aria-label={translationState.current?.nav?.settings}
-            title={translationState.current?.nav?.settings}
+            aria-label={t.nav?.settings}
+            title={t.nav?.settings}
           >
             <Icon name="settings" size={15} />
           </button>
@@ -406,8 +406,8 @@
         <button
           onclick={handleProfileClick}
           class="flex items-center justify-center rounded-lg px-1 py-1 hover:bg-gray-100 transition-colors"
-          aria-label={translationState.current?.nav?.profile}
-          title={translationState.current?.nav?.profile}
+          aria-label={t.nav?.profile}
+          title={t.nav?.profile}
         >
           <span
             class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-indigo-100 to-indigo-200 text-indigo-700 text-xs font-bold ring-1 ring-indigo-200"
@@ -418,8 +418,8 @@
         <button
           onclick={handleToggleClick}
           class="flex h-7 w-7 items-center justify-center rounded-md text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors"
-          aria-label={translationState.current?.nav?.expand}
-          title={translationState.current?.nav?.expand}
+          aria-label={t.nav?.expand}
+          title={t.nav?.expand}
         >
           <Icon name="chevronRight" size={15} />
         </button>
diff --git a/frontend/src/lib/components/layout/TaskDrawer.svelte b/frontend/src/lib/components/layout/TaskDrawer.svelte
index c3be87eb..1961a12c 100644
--- a/frontend/src/lib/components/layout/TaskDrawer.svelte
+++ b/frontend/src/lib/components/layout/TaskDrawer.svelte
@@ -53,16 +53,15 @@
    */
 
   import { onDestroy } from "svelte";
-  import { fromStore } from "svelte/store";
-  import { taskDrawerStore, closeDrawer } from "$lib/stores/taskDrawer.js";
-  import { assistantChatStore } from "$lib/stores/assistantChat.js";
+  import { taskDrawerStore, closeDrawer } from "$lib/stores/taskDrawer.svelte.js";
+  import { assistantChatStore } from "$lib/stores/assistantChat.svelte.js";
   import TaskLogViewer from "../../../components/TaskLogViewer.svelte";
   import PasswordPrompt from "../../../components/PasswordPrompt.svelte";
   import { getReportTypeProfile } from "../reports/reportTypeProfiles.js";
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { api, getWsUrl } from "$lib/api.js";
   import Icon from "$lib/ui/Icon.svelte";
-  import { addToast } from "$lib/toasts";
+  import { addToast } from "$lib/toasts.svelte.js";
   import { gitService } from "../../../services/gitService.js";
 
   let ws = null;
@@ -77,12 +76,9 @@
   let showDiff = $state(false);
   let isDiffLoading = $state(false);
 
-  const taskDrawerState = fromStore(taskDrawerStore);
-  const assistantChatState = fromStore(assistantChatStore);
-
-  let isOpen = $derived(Boolean(taskDrawerState.current?.isOpen));
-  let activeTaskId = $derived(taskDrawerState.current?.activeTaskId || null);
-  let isAssistantOpen = $derived(Boolean(assistantChatState.current?.isOpen));
+  let isOpen = $derived(Boolean(taskDrawerStore.value?.isOpen));
+  let activeTaskId = $derived(taskDrawerStore.value?.activeTaskId || null);
+  let isAssistantOpen = $derived(Boolean(assistantChatStore.value?.isOpen));
   let assistantOffset = $derived(
     isAssistantOpen ? "min(100vw, 28rem)" : "0px",
   );
diff --git a/frontend/src/lib/components/layout/TopNavbar.svelte b/frontend/src/lib/components/layout/TopNavbar.svelte
index ce4cffb8..2d4434d0 100644
--- a/frontend/src/lib/components/layout/TopNavbar.svelte
+++ b/frontend/src/lib/components/layout/TopNavbar.svelte
@@ -62,18 +62,18 @@
   import { page } from "$app/state";
   import { api } from "$lib/api.js";
   import { getReports } from "$lib/api/reports.js";
-  import { activityStore } from "$lib/stores/activity.js";
+  import { activityStore } from "$lib/stores/activity.svelte.js";
   import {
     taskDrawerStore,
     openDrawerForTask,
     openDrawer,
     setTaskDrawerAutoOpenPreference,
-  } from "$lib/stores/taskDrawer.js";
-  import { sidebarStore, toggleMobileSidebar } from "$lib/stores/sidebar.js";
-  import { t } from "$lib/i18n";
-  import { auth } from "$lib/auth/store.js";
+  } from "$lib/stores/taskDrawer.svelte.js";
+  import { sidebarStore, toggleMobileSidebar } from "$lib/stores/sidebar.svelte.js";
+  import { t } from "$lib/i18n/index.svelte.js";
+  import { auth } from "$lib/auth/store.svelte.js";
   import { hasPermission } from "$lib/auth/permissions.js";
-  import { toggleAssistantChat } from "$lib/stores/assistantChat.js";
+  import { toggleAssistantChat } from "$lib/stores/assistantChat.svelte.js";
   import Icon from "$lib/ui/Icon.svelte";
   import LanguageSwitcher from "$lib/ui/LanguageSwitcher.svelte";
   import {
@@ -81,9 +81,7 @@
     initializeEnvironmentContext,
     setSelectedEnvironment,
     selectedEnvironmentStore,
-  } from "$lib/stores/environmentContext.js";
-  import { fromStore } from "svelte/store";
-
+  } from "$lib/stores/environmentContext.svelte.js";
   let showUserMenu = $state(false);
   let isSearchFocused = $state(false);
   let searchQuery = $state("");
@@ -96,26 +94,26 @@
   const SEARCH_MIN_LENGTH = 2;
   const SEARCH_LIMIT = 5;
 
-  const sidebarState = fromStore(sidebarStore);
-  const activityState = fromStore(activityStore);
-  const authState = fromStore(auth);
-  const environmentContextState = fromStore(environmentContextStore);
-  const selectedEnvironmentState = fromStore(selectedEnvironmentStore);
+  let _authState = $state({ user: null, token: null, isAuthenticated: false, loading: true });
+  $effect(() => {
+    const unsub = auth.subscribe(v => { _authState = v; });
+    return unsub;
+  });
 
-  let isExpanded = $derived(sidebarState.current?.isExpanded ?? true);
-  let activeCount = $derived(activityState.current?.activeCount || 0);
-  let recentTasks = $derived(activityState.current?.recentTasks || []);
-  let user = $derived(authState.current?.user || null);
+  let isExpanded = $derived(sidebarStore.value?.isExpanded ?? true);
+  let activeCount = $derived(activityStore.value?.activeCount || 0);
+  let recentTasks = $derived(activityStore.value?.recentTasks || []);
+  let user = $derived(_authState.user || null);
   let canOpenSettings = $derived(
     hasPermission(user, "admin:settings", "READ"),
   );
   let globalEnvironments = $derived(
-    environmentContextState.current?.environments || [],
+    environmentContextStore.value?.environments || [],
   );
   let globalSelectedEnvId = $derived(
-    environmentContextState.current?.selectedEnvId || "",
+    environmentContextStore.value?.selectedEnvId || "",
   );
-  let globalSelectedEnv = $derived(selectedEnvironmentState.current);
+  let globalSelectedEnv = $derived(selectedEnvironmentStore.value);
   let isProdContext = $derived(
     String(globalSelectedEnv?.stage || "").toUpperCase() === "PROD" ||
       Boolean(globalSelectedEnv?.is_production),
diff --git a/frontend/src/lib/components/layout/__tests__/test_sidebar.svelte.js b/frontend/src/lib/components/layout/__tests__/test_sidebar.svelte.js
index 3cd9f4fc..11a2aa10 100644
--- a/frontend/src/lib/components/layout/__tests__/test_sidebar.svelte.js
+++ b/frontend/src/lib/components/layout/__tests__/test_sidebar.svelte.js
@@ -42,7 +42,7 @@ describe('Sidebar Component', () => {
 
   describe('Store State', () => {
     it('should have correct initial expanded state', async () => {
-      const { sidebarStore } = await import('$lib/stores/sidebar.js');
+      const { sidebarStore } = await import('$lib/stores/sidebar.svelte.js');
       
       let state = null;
       const unsubscribe = sidebarStore.subscribe(s => { state = s; });
@@ -52,7 +52,7 @@ describe('Sidebar Component', () => {
     });
 
     it('should toggle sidebar expansion', async () => {
-      const { sidebarStore, toggleSidebar } = await import('$lib/stores/sidebar.js');
+      const { sidebarStore, toggleSidebar } = await import('$lib/stores/sidebar.svelte.js');
       
       let state = null;
       const unsub1 = sidebarStore.subscribe(s => { state = s; });
@@ -67,7 +67,7 @@ describe('Sidebar Component', () => {
     });
 
     it('should track mobile open state', async () => {
-      const { sidebarStore, setMobileOpen } = await import('$lib/stores/sidebar.js');
+      const { sidebarStore, setMobileOpen } = await import('$lib/stores/sidebar.svelte.js');
       
       setMobileOpen(true);
       
@@ -78,10 +78,10 @@ describe('Sidebar Component', () => {
     });
 
     it('should close mobile sidebar', async () => {
-      const { sidebarStore, closeMobile } = await import('$lib/stores/sidebar.js');
+      const { sidebarStore, closeMobile, setMobileOpen } = await import('$lib/stores/sidebar.svelte.js');
       
       // First open mobile
-      sidebarStore.update(s => ({ ...s, isMobileOpen: true }));
+      setMobileOpen(true);
       
       let state = null;
       const unsub1 = sidebarStore.subscribe(s => { state = s; });
@@ -96,7 +96,7 @@ describe('Sidebar Component', () => {
     });
 
     it('should toggle mobile sidebar', async () => {
-      const { sidebarStore, toggleMobileSidebar } = await import('$lib/stores/sidebar.js');
+      const { sidebarStore, toggleMobileSidebar } = await import('$lib/stores/sidebar.svelte.js');
       
       toggleMobileSidebar();
       
@@ -113,7 +113,7 @@ describe('Sidebar Component', () => {
     });
 
     it('should set active category and item', async () => {
-      const { sidebarStore, setActiveItem } = await import('$lib/stores/sidebar.js');
+      const { sidebarStore, setActiveItem } = await import('$lib/stores/sidebar.svelte.js');
       
       setActiveItem('datasets', '/datasets');
       
@@ -127,7 +127,7 @@ describe('Sidebar Component', () => {
 
   describe('Persistence', () => {
     it('should save state to localStorage on toggle', async () => {
-      const { toggleSidebar } = await import('$lib/stores/sidebar.js');
+      const { toggleSidebar } = await import('$lib/stores/sidebar.svelte.js');
       
       toggleSidebar();
       
@@ -143,7 +143,7 @@ describe('Sidebar Component', () => {
       }));
       
       vi.resetModules();
-      const { sidebarStore } = await import('$lib/stores/sidebar.js');
+      const { sidebarStore } = await import('$lib/stores/sidebar.svelte.js');
       
       let state = null;
       const unsub = sidebarStore.subscribe(s => { state = s; });
@@ -156,35 +156,39 @@ describe('Sidebar Component', () => {
 
   describe('UX States', () => {
     it('should support expanded state', async () => {
-      const { sidebarStore } = await import('$lib/stores/sidebar.js');
-      
-      sidebarStore.update(s => ({ ...s, isExpanded: true }));
+      const { sidebarStore, toggleSidebar } = await import('$lib/stores/sidebar.svelte.js');
       
+      // Default is expanded; if collapsed, toggle
       let state = null;
-      const unsub = sidebarStore.subscribe(s => { state = s; });
-      unsub();
+      const unsub1 = sidebarStore.subscribe(s => { state = s; });
+      unsub1();
+      if (!state.isExpanded) toggleSidebar();
       
+      const unsub2 = sidebarStore.subscribe(s => { state = s; });
+      unsub2();
       // Expanded state means isExpanded = true
       expect(state.isExpanded).toBe(true);
     });
 
     it('should support collapsed state', async () => {
-      const { sidebarStore } = await import('$lib/stores/sidebar.js');
-      
-      sidebarStore.update(s => ({ ...s, isExpanded: false }));
+      const { sidebarStore, toggleSidebar } = await import('$lib/stores/sidebar.svelte.js');
       
+      // Default is expanded; toggle to collapse
       let state = null;
-      const unsub = sidebarStore.subscribe(s => { state = s; });
-      unsub();
+      const unsub1 = sidebarStore.subscribe(s => { state = s; });
+      unsub1();
+      if (state.isExpanded) toggleSidebar();
       
+      const unsub2 = sidebarStore.subscribe(s => { state = s; });
+      unsub2();
       // Collapsed state means isExpanded = false
       expect(state.isExpanded).toBe(false);
     });
 
     it('should support mobile overlay state', async () => {
-      const { sidebarStore } = await import('$lib/stores/sidebar.js');
+      const { sidebarStore, setMobileOpen } = await import('$lib/stores/sidebar.svelte.js');
       
-      sidebarStore.update(s => ({ ...s, isMobileOpen: true }));
+      setMobileOpen(true);
       
       let state = null;
       const unsub = sidebarStore.subscribe(s => { state = s; });
@@ -203,7 +207,7 @@ describe('Sidebar Component', () => {
     it('should have default active category dashboards', async () => {
       // Note: This test may fail if localStorage has stored state from previous tests
       // The store loads from localStorage on initialization, so we test the setter instead
-      const { sidebarStore, setActiveItem } = await import('$lib/stores/sidebar.js');
+      const { sidebarStore, setActiveItem } = await import('$lib/stores/sidebar.svelte.js');
       
       // Set to default explicitly to test the setActiveItem function works
       setActiveItem('dashboards', '/dashboards');
@@ -217,11 +221,11 @@ describe('Sidebar Component', () => {
     });
 
     it('should change active category', async () => {
-      const { setActiveItem } = await import('$lib/stores/sidebar.js');
+      const { setActiveItem } = await import('$lib/stores/sidebar.svelte.js');
       
       setActiveItem('admin', '/settings');
       
-      const { sidebarStore } = await import('$lib/stores/sidebar.js');
+      const { sidebarStore } = await import('$lib/stores/sidebar.svelte.js');
       let state = null;
       const unsub = sidebarStore.subscribe(s => { state = s; });
       unsub();
diff --git a/frontend/src/lib/components/layout/__tests__/test_taskDrawer.svelte.js b/frontend/src/lib/components/layout/__tests__/test_taskDrawer.svelte.js
index 1ed075c3..3c2f9f98 100644
--- a/frontend/src/lib/components/layout/__tests__/test_taskDrawer.svelte.js
+++ b/frontend/src/lib/components/layout/__tests__/test_taskDrawer.svelte.js
@@ -13,7 +13,7 @@ describe('TaskDrawer Component Store Tests', () => {
 
   describe('Initial State', () => {
     it('should have isOpen false initially', async () => {
-      const { taskDrawerStore } = await import('$lib/stores/taskDrawer.js');
+      const { taskDrawerStore } = await import('$lib/stores/taskDrawer.svelte.js');
       
       let state = null;
       const unsubscribe = taskDrawerStore.subscribe(s => { state = s; });
@@ -23,7 +23,7 @@ describe('TaskDrawer Component Store Tests', () => {
     });
 
     it('should have null activeTaskId initially', async () => {
-      const { taskDrawerStore } = await import('$lib/stores/taskDrawer.js');
+      const { taskDrawerStore } = await import('$lib/stores/taskDrawer.svelte.js');
       
       let state = null;
       const unsubscribe = taskDrawerStore.subscribe(s => { state = s; });
@@ -33,7 +33,7 @@ describe('TaskDrawer Component Store Tests', () => {
     });
 
     it('should have empty resourceTaskMap initially', async () => {
-      const { taskDrawerStore } = await import('$lib/stores/taskDrawer.js');
+      const { taskDrawerStore } = await import('$lib/stores/taskDrawer.svelte.js');
       
       let state = null;
       const unsubscribe = taskDrawerStore.subscribe(s => { state = s; });
@@ -45,7 +45,7 @@ describe('TaskDrawer Component Store Tests', () => {
 
   describe('UX States - Open/Close', () => {
     it('should open drawer for specific task', async () => {
-      const { taskDrawerStore, openDrawerForTask } = await import('$lib/stores/taskDrawer.js');
+      const { taskDrawerStore, openDrawerForTask } = await import('$lib/stores/taskDrawer.svelte.js');
       
       openDrawerForTask('task-123');
       
@@ -58,7 +58,7 @@ describe('TaskDrawer Component Store Tests', () => {
     });
 
     it('should open drawer in list mode', async () => {
-      const { taskDrawerStore, openDrawer } = await import('$lib/stores/taskDrawer.js');
+      const { taskDrawerStore, openDrawer } = await import('$lib/stores/taskDrawer.svelte.js');
       
       openDrawer();
       
@@ -71,7 +71,7 @@ describe('TaskDrawer Component Store Tests', () => {
     });
 
     it('should close drawer', async () => {
-      const { taskDrawerStore, openDrawerForTask, closeDrawer } = await import('$lib/stores/taskDrawer.js');
+      const { taskDrawerStore, openDrawerForTask, closeDrawer } = await import('$lib/stores/taskDrawer.svelte.js');
       
       // First open drawer
       openDrawerForTask('task-123');
@@ -92,7 +92,7 @@ describe('TaskDrawer Component Store Tests', () => {
 
   describe('Resource-Task Mapping', () => {
     it('should update resource-task mapping', async () => {
-      const { taskDrawerStore, updateResourceTask } = await import('$lib/stores/taskDrawer.js');
+      const { taskDrawerStore, updateResourceTask } = await import('$lib/stores/taskDrawer.svelte.js');
       
       updateResourceTask('dashboard-1', 'task-123', 'RUNNING');
       
@@ -107,7 +107,7 @@ describe('TaskDrawer Component Store Tests', () => {
     });
 
     it('should remove mapping on SUCCESS status', async () => {
-      const { taskDrawerStore, updateResourceTask } = await import('$lib/stores/taskDrawer.js');
+      const { taskDrawerStore, updateResourceTask } = await import('$lib/stores/taskDrawer.svelte.js');
       
       // First add a running task
       updateResourceTask('dashboard-1', 'task-123', 'RUNNING');
@@ -126,7 +126,7 @@ describe('TaskDrawer Component Store Tests', () => {
     });
 
     it('should remove mapping on ERROR status', async () => {
-      const { taskDrawerStore, updateResourceTask } = await import('$lib/stores/taskDrawer.js');
+      const { taskDrawerStore, updateResourceTask } = await import('$lib/stores/taskDrawer.svelte.js');
       
       updateResourceTask('dataset-1', 'task-456', 'RUNNING');
       
@@ -144,7 +144,7 @@ describe('TaskDrawer Component Store Tests', () => {
     });
 
     it('should remove mapping on IDLE status', async () => {
-      const { taskDrawerStore, updateResourceTask } = await import('$lib/stores/taskDrawer.js');
+      const { taskDrawerStore, updateResourceTask } = await import('$lib/stores/taskDrawer.svelte.js');
       
       updateResourceTask('storage-1', 'task-789', 'RUNNING');
       
@@ -162,7 +162,7 @@ describe('TaskDrawer Component Store Tests', () => {
     });
 
     it('should keep mapping for WAITING_INPUT status', async () => {
-      const { taskDrawerStore, updateResourceTask } = await import('$lib/stores/taskDrawer.js');
+      const { taskDrawerStore, updateResourceTask } = await import('$lib/stores/taskDrawer.svelte.js');
       
       updateResourceTask('dashboard-1', 'task-789', 'WAITING_INPUT');
       
@@ -177,7 +177,7 @@ describe('TaskDrawer Component Store Tests', () => {
     });
 
     it('should keep mapping for RUNNING status', async () => {
-      const { taskDrawerStore, updateResourceTask } = await import('$lib/stores/taskDrawer.js');
+      const { taskDrawerStore, updateResourceTask } = await import('$lib/stores/taskDrawer.svelte.js');
       
       updateResourceTask('dashboard-1', 'task-abc', 'RUNNING');
       
@@ -194,7 +194,7 @@ describe('TaskDrawer Component Store Tests', () => {
 
   describe('Task Retrieval', () => {
     it('should get task for resource', async () => {
-      const { updateResourceTask, getTaskForResource } = await import('$lib/stores/taskDrawer.js');
+      const { updateResourceTask, getTaskForResource } = await import('$lib/stores/taskDrawer.svelte.js');
       
       updateResourceTask('dashboard-1', 'task-123', 'RUNNING');
       
@@ -206,7 +206,7 @@ describe('TaskDrawer Component Store Tests', () => {
     });
 
     it('should return null for resource without task', async () => {
-      const { getTaskForResource } = await import('$lib/stores/taskDrawer.js');
+      const { getTaskForResource } = await import('$lib/stores/taskDrawer.svelte.js');
       
       const taskInfo = getTaskForResource('non-existent');
       expect(taskInfo).toBeNull();
@@ -215,7 +215,7 @@ describe('TaskDrawer Component Store Tests', () => {
 
   describe('Multiple Resources', () => {
     it('should handle multiple resource-task mappings', async () => {
-      const { taskDrawerStore, updateResourceTask } = await import('$lib/stores/taskDrawer.js');
+      const { taskDrawerStore, updateResourceTask } = await import('$lib/stores/taskDrawer.svelte.js');
       
       updateResourceTask('dashboard-1', 'task-1', 'RUNNING');
       updateResourceTask('dashboard-2', 'task-2', 'RUNNING');
@@ -229,7 +229,7 @@ describe('TaskDrawer Component Store Tests', () => {
     });
 
     it('should update existing mapping', async () => {
-      const { taskDrawerStore, updateResourceTask } = await import('$lib/stores/taskDrawer.js');
+      const { taskDrawerStore, updateResourceTask } = await import('$lib/stores/taskDrawer.svelte.js');
       
       updateResourceTask('dashboard-1', 'task-1', 'RUNNING');
       updateResourceTask('dashboard-1', 'task-2', 'SUCCESS');
diff --git a/frontend/src/lib/components/layout/__tests__/test_topNavbar.svelte.js b/frontend/src/lib/components/layout/__tests__/test_topNavbar.svelte.js
index 10f871f1..979c0d20 100644
--- a/frontend/src/lib/components/layout/__tests__/test_topNavbar.svelte.js
+++ b/frontend/src/lib/components/layout/__tests__/test_topNavbar.svelte.js
@@ -27,7 +27,7 @@ describe('TopNavbar Component Store Tests', () => {
 
   describe('Sidebar Store Integration', () => {
     it('should read isExpanded from sidebarStore', async () => {
-      const { sidebarStore } = await import('$lib/stores/sidebar.js');
+      const { sidebarStore } = await import('$lib/stores/sidebar.svelte.js');
       
       let state = null;
       const unsubscribe = sidebarStore.subscribe(s => { state = s; });
@@ -37,7 +37,7 @@ describe('TopNavbar Component Store Tests', () => {
     });
 
     it('should toggle sidebar via toggleMobileSidebar', async () => {
-      const { sidebarStore, toggleMobileSidebar } = await import('$lib/stores/sidebar.js');
+      const { sidebarStore, toggleMobileSidebar } = await import('$lib/stores/sidebar.svelte.js');
       
       let state = null;
       const unsub1 = sidebarStore.subscribe(s => { state = s; });
@@ -54,7 +54,7 @@ describe('TopNavbar Component Store Tests', () => {
 
   describe('Activity Store Integration', () => {
     it('should have zero activeCount initially', async () => {
-      const { activityStore } = await import('$lib/stores/activity.js');
+      const { activityStore } = await import('$lib/stores/activity.svelte.js');
       
       let state = null;
       const unsubscribe = activityStore.subscribe(s => { state = s; });
@@ -64,8 +64,8 @@ describe('TopNavbar Component Store Tests', () => {
     });
 
     it('should count RUNNING tasks as active', async () => {
-      const { updateResourceTask } = await import('$lib/stores/taskDrawer.js');
-      const { activityStore } = await import('$lib/stores/activity.js');
+      const { updateResourceTask } = await import('$lib/stores/taskDrawer.svelte.js');
+      const { activityStore } = await import('$lib/stores/activity.svelte.js');
       
       // Add a running task
       updateResourceTask('dashboard-1', 'task-1', 'RUNNING');
@@ -78,8 +78,8 @@ describe('TopNavbar Component Store Tests', () => {
     });
 
     it('should not count SUCCESS tasks as active', async () => {
-      const { updateResourceTask } = await import('$lib/stores/taskDrawer.js');
-      const { activityStore } = await import('$lib/stores/activity.js');
+      const { updateResourceTask } = await import('$lib/stores/taskDrawer.svelte.js');
+      const { activityStore } = await import('$lib/stores/activity.svelte.js');
       
       // Add a success task
       updateResourceTask('dashboard-1', 'task-1', 'SUCCESS');
@@ -92,8 +92,8 @@ describe('TopNavbar Component Store Tests', () => {
     });
 
     it('should not count WAITING_INPUT as active', async () => {
-      const { updateResourceTask } = await import('$lib/stores/taskDrawer.js');
-      const { activityStore } = await import('$lib/stores/activity.js');
+      const { updateResourceTask } = await import('$lib/stores/taskDrawer.svelte.js');
+      const { activityStore } = await import('$lib/stores/activity.svelte.js');
       
       // Add a waiting input task - should NOT be counted as active per contract
       // Only RUNNING tasks count as active
@@ -109,7 +109,7 @@ describe('TopNavbar Component Store Tests', () => {
 
   describe('Task Drawer Integration', () => {
     it('should open drawer for specific task', async () => {
-      const { taskDrawerStore, openDrawerForTask } = await import('$lib/stores/taskDrawer.js');
+      const { taskDrawerStore, openDrawerForTask } = await import('$lib/stores/taskDrawer.svelte.js');
       
       openDrawerForTask('task-123');
       
@@ -122,7 +122,7 @@ describe('TopNavbar Component Store Tests', () => {
     });
 
     it('should open drawer in list mode', async () => {
-      const { taskDrawerStore, openDrawer } = await import('$lib/stores/taskDrawer.js');
+      const { taskDrawerStore, openDrawer } = await import('$lib/stores/taskDrawer.svelte.js');
       
       openDrawer();
       
@@ -135,7 +135,7 @@ describe('TopNavbar Component Store Tests', () => {
     });
 
     it('should close drawer', async () => {
-      const { taskDrawerStore, openDrawerForTask, closeDrawer } = await import('$lib/stores/taskDrawer.js');
+      const { taskDrawerStore, openDrawerForTask, closeDrawer } = await import('$lib/stores/taskDrawer.svelte.js');
       
       // First open drawer
       openDrawerForTask('task-123');
@@ -155,8 +155,8 @@ describe('TopNavbar Component Store Tests', () => {
 
   describe('UX States', () => {
     it('should support activity badge with count > 0', async () => {
-      const { updateResourceTask } = await import('$lib/stores/taskDrawer.js');
-      const { activityStore } = await import('$lib/stores/activity.js');
+      const { updateResourceTask } = await import('$lib/stores/taskDrawer.svelte.js');
+      const { activityStore } = await import('$lib/stores/activity.svelte.js');
       
       updateResourceTask('dashboard-1', 'task-1', 'RUNNING');
       updateResourceTask('dashboard-2', 'task-2', 'RUNNING');
@@ -170,8 +170,8 @@ describe('TopNavbar Component Store Tests', () => {
     });
 
     it('should show 9+ for counts exceeding 9', async () => {
-      const { updateResourceTask } = await import('$lib/stores/taskDrawer.js');
-      const { activityStore } = await import('$lib/stores/activity.js');
+      const { updateResourceTask } = await import('$lib/stores/taskDrawer.svelte.js');
+      const { activityStore } = await import('$lib/stores/activity.svelte.js');
       
       // Add 10 running tasks
       for (let i = 0; i < 10; i++) {
diff --git a/frontend/src/lib/components/llm/UrlParser.svelte b/frontend/src/lib/components/llm/UrlParser.svelte
index b622e508..37d36df5 100644
--- a/frontend/src/lib/components/llm/UrlParser.svelte
+++ b/frontend/src/lib/components/llm/UrlParser.svelte
@@ -16,8 +16,8 @@
    * @prop {string} envId — Environment ID for context
    */
   import { api } from '$lib/api.js';
-  import { t } from '$lib/i18n';
-  import { addToast } from '$lib/toasts';
+  import { t } from '$lib/i18n/index.svelte.js';
+  import { addToast } from '$lib/toasts.svelte.js';
 
   let { onAdd = undefined, envId = '' } = $props();
 
diff --git a/frontend/src/lib/components/llm/ValidationTaskForm.svelte b/frontend/src/lib/components/llm/ValidationTaskForm.svelte
index 3e646bd8..3e3513cd 100644
--- a/frontend/src/lib/components/llm/ValidationTaskForm.svelte
+++ b/frontend/src/lib/components/llm/ValidationTaskForm.svelte
@@ -14,12 +14,13 @@
 <!-- @UX_FEEDBACK Toast on validation errors, provider switch warnings -->
 <!-- @UX_RECOVERY Back button to previous step; clear and retry on errors -->
 <script lang="ts">
-  import { t } from '$lib/i18n';
-  import { addToast } from '$lib/toasts';
-  import { environmentContextStore } from '$lib/stores/environmentContext.js';
+  import { t } from '$lib/i18n/index.svelte.js';
+  import { addToast } from '$lib/toasts.svelte.js';
+  import { environmentContextStore } from '$lib/stores/environmentContext.svelte.js';
   import { api } from '$lib/api.js';
   import UrlParser from './UrlParser.svelte';
   import SearchableMultiSelect from '$lib/components/ui/SearchableMultiSelect.svelte';
+  import HelpTooltip from '$lib/ui/HelpTooltip.svelte';
 
   // ── Props ─────────────────────────────────────────────────────
   /**
@@ -92,9 +93,12 @@
   );
 
   // ── Step 4: Schedule ──────────────────────────────────────────
-  /** @type {'manual'|'cron'} */
+  /** @type {'manual'|'scheduled'} */
   let scheduleType = $state('manual');
-  let cronExpression = $state('');
+  /** @type {number[]} */
+  let scheduleDays = $state([]);
+  let scheduleStartTime = $state('02:00');
+  let scheduleEndTime = $state('03:00');
 
   // ── Initialization from initialData (edit mode) ───────────────
   // $effect captures prop values once on mount, avoiding state_referenced_locally warning
@@ -112,8 +116,18 @@
       executeChartData = initialData.execute_chart_data ?? false;
       llmBatchSize = initialData.llm_batch_size ?? 1;
       promptTemplate = initialData.prompt_template ?? '';
-      scheduleType = initialData.schedule && initialData.schedule !== 'manual' ? 'cron' : 'manual';
-      cronExpression = initialData.cron_expression ?? '';
+      // Schedule: use raw schedule_days, window_start, window_end from server
+      if (initialData.schedule_days && initialData.schedule_days.length > 0) {
+        scheduleType = 'scheduled';
+        scheduleDays = [...initialData.schedule_days];
+        scheduleStartTime = initialData.window_start || '02:00';
+        scheduleEndTime = initialData.window_end || '03:00';
+      } else {
+        scheduleType = 'manual';
+        scheduleDays = [];
+        scheduleStartTime = '02:00';
+        scheduleEndTime = '03:00';
+      }
       // Set default prompt if not provided
       if (!promptTemplate) {
         promptTemplate = screenshotEnabled
@@ -124,80 +138,6 @@
     }
   });
 
-  // ── Helpers ───────────────────────────────────────────────────
-
-  /**
-   * Parse a cron expression to list of day numbers (0=Sunday).
-   * Supports simple weekday patterns like "0 8 * * 1-5" or "0 0 * * 0,6".
-   * Returns null for non-cron patterns or on failure.
-   * @param {string} cron
-   * @returns {number[] | null}
-   */
-  function parseCronToDays(cron) {
-    if (!cron || typeof cron !== 'string') return null;
-    const parts = cron.trim().split(/\s+/);
-    if (parts.length < 5) return null;
-    const dayField = parts[4]; // 5th field (0-7, 0=Sunday)
-    if (dayField === '*' || dayField === '?') return null; // every day
-    try {
-      const days = new Set();
-      for (const segment of dayField.split(',')) {
-        const range = segment.split('-').map(Number);
-        if (range.length === 2) {
-          for (let d = range[0]; d <= range[1]; d++) {
-            days.add(d % 7); // normalise 7→0 (Sunday)
-          }
-        } else {
-          days.add(Number(segment) % 7);
-        }
-      }
-      return [...days].sort();
-    } catch {
-      return null;
-    }
-  }
-
-  /**
-   * Extract time window (HH:MM) from cron minute+hour fields.
-   * @param {string} cron
-   * @returns {{ start: string|null, end: string|null }}
-   */
-  function parseCronToTimeWindow(cron) {
-    if (!cron || typeof cron !== 'string') return { start: null, end: null };
-    const parts = cron.trim().split(/\s+/);
-    if (parts.length < 5) return { start: null, end: null };
-    const minute = parts[0];
-    const hour = parts[1];
-    if (minute === '*' || hour === '*' || /\D/.test(minute) || /\D/.test(hour)) {
-      return { start: null, end: null };
-    }
-    const h = hour.padStart(2, '0');
-    const m = minute.padStart(2, '0');
-    const start = `${h}:${m}`;
-    // End = 1 hour after start
-    const endH = (parseInt(hour) + 1) % 24;
-    return { start, end: `${String(endH).padStart(2, '0')}:${m}` };
-  }
-
-  /**
-   * Human-readable description of a cron expression (reuses ScheduleConfig pattern).
-   * @param {string} cron
-   * @returns {string}
-   */
-  function getCronDescription(cron) {
-    const parts = (cron || '').split(' ');
-    if (parts.length !== 5) return cron || '';
-    if (parts[1] === '*' && parts[2] === '*' && parts[4] === '*') {
-      const hour = parts[0] === '*' ? '' : parts[0];
-      const min = parts[1];
-      if (parts[0] === '*') {
-        return 'at :' + min + ' past the hour';
-      }
-      return 'Daily at ' + hour + ':' + min;
-    }
-    return 'Cron: ' + cron;
-  }
-
   function getDefaultPrompt() {
     return screenshotEnabled
       ? ($t.validation?.prompt_default_a || 'Analyze this dashboard screenshot for issues with chart rendering, data accuracy, and visual consistency.')
@@ -258,8 +198,8 @@
       if (llmBatchSize < 1) errs.llmBatchSize = 'Minimum is 1';
     }
     if (currentStep === 4) {
-      if (scheduleType === 'cron' && !cronExpression.trim()) {
-        errs.cronExpression = $t.validation?.form_validation_required || 'Required';
+      if (scheduleType === 'scheduled' && scheduleDays.length === 0) {
+        errs.scheduleDays = $t.validation?.schedule_days_required || 'Select at least one day';
       }
     }
     return errs;
@@ -287,17 +227,37 @@
     }
   }
 
-  // ── Schedule display (client-side, no backend call) ──────────
-  let cronDays = $derived(
-    scheduleType === 'cron' ? parseCronToDays(cronExpression) : null
-  );
-  let cronTimeWindow = $derived(
-    scheduleType === 'cron' ? parseCronToTimeWindow(cronExpression) : null
-  );
-  const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-  let cronDayLabels = $derived(
-    cronDays ? cronDays.map((d) => dayNames[d]).join(', ') : null
-  );
+  const dayNames = $derived([
+    $t.validation?.days_sun || 'Sun',
+    $t.validation?.days_mon || 'Mon',
+    $t.validation?.days_tue || 'Tue',
+    $t.validation?.days_wed || 'Wed',
+    $t.validation?.days_thu || 'Thu',
+    $t.validation?.days_fri || 'Fri',
+    $t.validation?.days_sat || 'Sat',
+  ]);
+
+  function toggleDay(day: number) {
+    if (scheduleDays.includes(day)) {
+      scheduleDays = scheduleDays.filter((d) => d !== day);
+    } else {
+      scheduleDays = [...scheduleDays, day].sort();
+    }
+  }
+
+  let scheduleWindowLabel = $derived.by(() => {
+    if (!scheduleStartTime || !scheduleEndTime) return '';
+    const startH = parseInt(scheduleStartTime.split(':')[0]);
+    const endH = parseInt(scheduleEndTime.split(':')[0]);
+    const startM = parseInt(scheduleStartTime.split(':')[1]);
+    const endM = parseInt(scheduleEndTime.split(':')[1]);
+    const durationMin = (endH * 60 + endM) - (startH * 60 + startM);
+    if (durationMin <= 0) return $t.validation?.window_invalid || 'Window must end after start';
+    if (durationMin < 60) return `${durationMin} min`;
+    const hours = Math.floor(durationMin / 60);
+    const mins = durationMin % 60;
+    return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
+  });
 
   // Watch environment changes to load dashboards
   $effect(() => {
@@ -369,9 +329,9 @@
       llm_batch_size: screenshotEnabled ? 1 : llmBatchSize,
       provider_id: selectedProviderId,
       prompt_template: promptTemplate.trim() || undefined,
-      schedule_days: scheduleType === 'cron' ? parseCronToDays(cronExpression) : null,
-      window_start: scheduleType === 'cron' ? parseCronToTimeWindow(cronExpression).start : null,
-      window_end: scheduleType === 'cron' ? parseCronToTimeWindow(cronExpression).end : null,
+      schedule_days: scheduleType === 'scheduled' ? [...scheduleDays] : null,
+      window_start: scheduleType === 'scheduled' ? scheduleStartTime : null,
+      window_end: scheduleType === 'scheduled' ? scheduleEndTime : null,
       is_active: true,
     };
 
@@ -809,7 +769,7 @@
       <div class="p-6 space-y-6">
         <h2 class="text-lg font-semibold text-gray-900">{$t.validation?.step_schedule || 'Schedule'}</h2>
 
-        <!-- Manual -->
+        <!-- Manual trigger -->
         <label class="flex items-start gap-3 p-4 border rounded-lg cursor-pointer transition-colors {scheduleType === 'manual' ? 'border-blue-300 bg-blue-50' : 'border-gray-200 hover:bg-gray-50'}">
           <input
             type="radio"
@@ -819,80 +779,154 @@
             onchange={() => { scheduleType = 'manual'; }}
             class="mt-0.5 text-blue-600 focus:ring-blue-500"
           />
-          <div>
-            <span class="text-sm font-medium text-gray-900">
-              {$t.validation?.schedule_manual || 'Manual trigger only'}
-            </span>
+          <div class="flex-1">
+            <div class="flex items-center gap-2">
+              <span class="text-sm font-medium text-gray-900">
+                {$t.validation?.schedule_manual || 'Manual trigger only'}
+              </span>
+              <HelpTooltip text={$t.validation?.help_schedule_manual || 'Run this validation task manually from the task detail page. No automatic execution.'} />
+            </div>
             <p class="text-xs text-gray-500 mt-0.5">
               {$t.validation?.manual_only || 'Run this validation task on-demand only'}
             </p>
           </div>
         </label>
 
-        <!-- Scheduled (reuses ScheduleConfig cron pattern) -->
-        <label class="flex items-start gap-3 p-4 border rounded-lg cursor-pointer transition-colors {scheduleType === 'cron' ? 'border-blue-300 bg-blue-50' : 'border-gray-200 hover:bg-gray-50'}">
-          <input
-            type="radio"
-            name="schedule"
-            value="cron"
-            checked={scheduleType === 'cron'}
-            onchange={() => { scheduleType = 'cron'; }}
-            class="mt-0.5 text-blue-600 focus:ring-blue-500"
-          />
-          <div class="flex-1">
-            <span class="text-sm font-medium text-gray-900">
-              {$t.validation?.schedule_cron || 'Scheduled (cron expression)'}
-            </span>
-            {#if scheduleType === 'cron'}
-              <div class="mt-3 space-y-3">
-                <!-- Cron input + preset dropdown (reuses ScheduleConfig pattern) -->
-                <div class="flex gap-2">
-                  <input
-                    type="text"
-                    bind:value={cronExpression}
-                    placeholder="0 2 * * *"
-                    class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono focus-visible:ring-2 focus-visible:ring-blue-500 outline-none {stepErrors.cronExpression ? 'border-red-400' : ''}"
-                    aria-invalid={!!stepErrors.cronExpression}
-                  />
-                  <select
-                    bind:value={cronExpression}
-                    class="px-3 py-2 border border-gray-300 rounded-lg text-sm"
-                  >
-                    <option value="0 2 * * *">{$t.translate?.schedule?.preset_daily || 'Daily at 02:00'}</option>
-                    <option value="0 */6 * * *">{$t.translate?.schedule?.preset_every_6h || 'Every 6 hours'}</option>
-                    <option value="30 1 * * 0">{$t.translate?.schedule?.preset_weekly || 'Weekly (Sun 01:30)'}</option>
-                    <option value="0 3 1 * *">{$t.translate?.schedule?.preset_monthly || 'Monthly (1st at 03:00)'}</option>
-                    <option value="*/15 * * * *">{$t.translate?.schedule?.preset_every_15min || 'Every 15 min'}</option>
-                  </select>
-                </div>
-                <!-- Human-readable cron description -->
-                <p class="text-xs text-gray-400">{getCronDescription(cronExpression)}</p>
-                {#if stepErrors.cronExpression}
-                  <p class="text-xs text-red-500">{stepErrors.cronExpression}</p>
-                {/if}
+        <!-- Scheduled: day toggles + time window -->
+        <div class="relative">
+          <label class="flex items-start gap-3 p-4 border rounded-lg cursor-pointer transition-colors {scheduleType === 'scheduled' ? 'border-blue-300 bg-blue-50' : 'border-gray-200 hover:bg-gray-50'}">
+            <input
+              type="radio"
+              name="schedule"
+              value="scheduled"
+              checked={scheduleType === 'scheduled'}
+              onchange={() => { scheduleType = 'scheduled'; }}
+              class="mt-0.5 text-blue-600 focus:ring-blue-500"
+            />
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-2">
+                <span class="text-sm font-medium text-gray-900">
+                  {$t.validation?.schedule_scheduled || 'Scheduled'}
+                </span>
+                <HelpTooltip text={$t.validation?.help_schedule_scheduled || 'The task runs automatically on the selected days. It executes once within the configured time window. Scheduler must be running on the server.'} />
+              </div>
+              <p class="text-xs text-gray-500 mt-0.5">
+                {$t.validation?.scheduled_desc || 'Run automatically on selected days at specified time'}
+              </p>
+            </div>
+          </label>
 
-                <!-- Schedule summary (client-side derived) -->
-                {#if cronExpression.trim() && cronDays && cronDays.length > 0}
-                  <div class="bg-gray-50 rounded-lg p-3 space-y-1.5">
-                    <p class="text-xs font-medium text-gray-600">{$t.validation?.schedule_summary || 'Schedule summary'}</p>
-                    <div class="flex flex-wrap gap-1">
-                      {#each cronDays as day}
-                        <span class="inline-flex items-center px-2 py-0.5 bg-blue-50 text-blue-700 rounded-full text-xs font-medium">
-                          {dayNames[day]}
-                        </span>
-                      {/each}
-                    </div>
-                    {#if cronTimeWindow?.start}
-                      <p class="text-xs text-gray-500">
-                        {$t.validation?.window || 'Window'}: {cronTimeWindow.start} – {cronTimeWindow.end}
-                      </p>
-                    {/if}
-                  </div>
+          {#if scheduleType === 'scheduled'}
+            <div class="mt-3 ml-8 space-y-4">
+              <!-- Day-of-week toggles -->
+              <div>
+                <div class="flex items-center gap-1.5 mb-2">
+                  <label class="block text-xs font-medium text-gray-600">
+                    {$t.validation?.schedule_days_label || 'Days of week'}
+                  </label>
+                  <HelpTooltip text={$t.validation?.help_schedule_days || 'Select which days the validation task should run. Hold any combination of days.'} />
+                </div>
+                <div class="flex flex-wrap gap-1.5">
+                  {#each dayNames as name, day (day)}
+                    <button
+                      onclick={() => toggleDay(day)}
+                      class="px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors focus:outline-none focus:ring-2 focus:ring-blue-400"
+                      class:bg-blue-600={scheduleDays.includes(day)}
+                      class:text-white={scheduleDays.includes(day)}
+                      class:border-blue-600={scheduleDays.includes(day)}
+                      class:bg-white={!scheduleDays.includes(day)}
+                      class:text-gray-700={!scheduleDays.includes(day)}
+                      class:border-gray-300={!scheduleDays.includes(day)}
+                      class:hover:bg-gray-50={!scheduleDays.includes(day)}
+                      aria-pressed={scheduleDays.includes(day)}
+                    >
+                      {name}
+                    </button>
+                  {/each}
+                </div>
+                {#if stepErrors.scheduleDays}
+                  <p class="mt-1 text-xs text-red-500">{stepErrors.scheduleDays}</p>
                 {/if}
               </div>
-            {/if}
-          </div>
-        </label>
+
+              <!-- Quick selection helpers -->
+              <div class="flex gap-2">
+                <button
+                  onclick={() => { scheduleDays = [0,1,2,3,4,5,6]; }}
+                  class="text-xs text-blue-600 hover:text-blue-800 underline"
+                >
+                  {$t.validation?.every_day || 'Every day'}
+                </button>
+                <button
+                  onclick={() => { scheduleDays = [1,2,3,4,5]; }}
+                  class="text-xs text-blue-600 hover:text-blue-800 underline"
+                >
+                  {$t.validation?.weekdays || 'Weekdays'}
+                </button>
+                <button
+                  onclick={() => { scheduleDays = []; }}
+                  class="text-xs text-gray-500 hover:text-gray-700 underline"
+                >
+                  {$t.validation?.clear || 'Clear'}
+                </button>
+              </div>
+
+              <!-- Time window -->
+              <div>
+                <div class="flex items-center gap-1.5 mb-2">
+                  <span class="block text-xs font-medium text-gray-600">
+                    {$t.validation?.time_window || 'Time window'}
+                  </span>
+                  <HelpTooltip text={$t.validation?.help_schedule_window || 'The task runs once within this window. Set the earliest possible start time and the deadline. The actual execution time depends on scheduler capacity.'} />
+                </div>
+                <div class="grid grid-cols-2 gap-4">
+                  <div>
+                    <label for="schedule-start" class="block text-xs font-medium text-gray-600 mb-1">
+                      {$t.validation?.window_start || 'Start time'}
+                    </label>
+                    <input
+                      id="schedule-start"
+                      type="time"
+                      bind:value={scheduleStartTime}
+                      class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
+                    />
+                  </div>
+                  <div>
+                    <label for="schedule-end" class="block text-xs font-medium text-gray-600 mb-1">
+                      {$t.validation?.window_end || 'End time'}
+                    </label>
+                    <input
+                      id="schedule-end"
+                      type="time"
+                      bind:value={scheduleEndTime}
+                      class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- Window duration summary -->
+              {#if scheduleStartTime && scheduleEndTime && scheduleDays.length > 0}
+                <div class="bg-gray-50 rounded-lg p-3 space-y-1.5">
+                  <p class="text-xs font-medium text-gray-600">{$t.validation?.schedule_summary || 'Schedule summary'}</p>
+                  <div class="flex flex-wrap gap-1">
+                    {#each scheduleDays as day}
+                      <span class="inline-flex items-center px-2 py-0.5 bg-blue-50 text-blue-700 rounded-full text-xs font-medium">
+                        {dayNames[day]}
+                      </span>
+                    {/each}
+                  </div>
+                  <p class="text-xs text-gray-500">
+                    {$t.validation?.window || 'Window'}: {scheduleStartTime} – {scheduleEndTime}
+                    {#if scheduleWindowLabel}
+                      <span class="ml-1 text-gray-400">({scheduleWindowLabel})</span>
+                    {/if}
+                  </p>
+                </div>
+              {/if}
+            </div>
+          {/if}
+        </div>
       </div>
 
     <!-- ────── Step 5: Review ────── -->
@@ -983,8 +1017,18 @@
               <p class="text-sm text-gray-900">{$t.validation?.manual_trigger || 'Manual trigger'}</p>
             {:else}
               <p class="text-sm text-gray-900">{$t.validation?.scheduled || 'Scheduled'}</p>
-              <p class="text-xs text-gray-500 mt-0.5">
-                {($t.validation?.cron_expression || 'Cron: {expr}').replace('{expr}', cronExpression)}
+              {#if scheduleDays.length > 0}
+                <div class="flex flex-wrap gap-1 mt-1.5">
+                  {#each scheduleDays as day}
+                    <span class="inline-flex items-center px-2 py-0.5 bg-blue-50 text-blue-700 rounded-full text-xs font-medium">{dayNames[day]}</span>
+                  {/each}
+                </div>
+              {/if}
+              <p class="text-xs text-gray-500 mt-1">
+                {scheduleStartTime} – {scheduleEndTime}
+                {#if scheduleWindowLabel}
+                  <span class="ml-1 text-gray-400">({scheduleWindowLabel})</span>
+                {/if}
               </p>
             {/if}
           </div>
diff --git a/frontend/src/lib/components/llm/ValidationTaskReport.svelte b/frontend/src/lib/components/llm/ValidationTaskReport.svelte
index 974940c1..504ce1db 100644
--- a/frontend/src/lib/components/llm/ValidationTaskReport.svelte
+++ b/frontend/src/lib/components/llm/ValidationTaskReport.svelte
@@ -1,7 +1,7 @@
 <!-- #region ValidationTaskReport [C:2] [TYPE Component] [SEMANTICS llm, validation, report] -->
 <!-- @BRIEF Simple validation report display component — shows status badge and summary text. -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
 
   interface ValidationReport {
     status: string;
diff --git a/frontend/src/lib/components/llm/__tests__/validation_task_form.v2.test.ts b/frontend/src/lib/components/llm/__tests__/validation_task_form.v2.test.ts
index 100a1702..c830b982 100644
--- a/frontend/src/lib/components/llm/__tests__/validation_task_form.v2.test.ts
+++ b/frontend/src/lib/components/llm/__tests__/validation_task_form.v2.test.ts
@@ -142,55 +142,57 @@ describe('ValidationTaskForm — schedule fields', () => {
     expect(source).toContain('window_end:');
   });
 
-  it('schedule_days uses parseCronToDays for cron type', () => {
+  it('schedule_days comes from scheduleDays state (v2 schedule API)', () => {
     const source = readSource(FORM_PATH);
     if (!source) return;
 
-    expect(source).toContain('parseCronToDays(cronExpression)');
+    expect(source).toContain('schedule_days:');
   });
 
-  it('window_start uses parseCronToTimeWindow for cron type', () => {
+  it('window_start comes from scheduleStartTime state (v2 schedule API)', () => {
     const source = readSource(FORM_PATH);
     if (!source) return;
 
-    expect(source).toContain('parseCronToTimeWindow(cronExpression).start');
+    expect(source).toContain('window_start:');
   });
 });
 // #endregion ScheduleFields
 
 
-// #region CronPresetDropdown [C:2] [TYPE Class] [SEMANTICS test, cron, preset, dropdown]
-// @BRIEF Verify cron preset dropdown values are correct.
-describe('ValidationTaskForm — cron preset dropdown', () => {
-  it('has daily at 02:00 preset', () => {
+// #region ScheduleTypeDropdown [C:2] [TYPE Class] [SEMANTICS test, schedule, type, dropdown]
+// @BRIEF Verify schedule type dropdown values are correct (v2 schedule API).
+describe('ValidationTaskForm — schedule type dropdown', () => {
+  it('has manual and scheduled type options', () => {
     const source = readSource(FORM_PATH);
     if (!source) return;
 
-    expect(source).toContain('0 2 * * *');
+    expect(source).toContain("'manual'");
+    expect(source).toContain("'scheduled'");
   });
 
-  it('has every 6 hours preset', () => {
+  it('scheduleType defaults to manual', () => {
     const source = readSource(FORM_PATH);
     if (!source) return;
 
-    expect(source).toContain('0 */6 * * *');
+    expect(source).toContain("= $state('manual')");
   });
 
-  it('has weekly preset', () => {
+  it('has scheduleDays state for day selection', () => {
     const source = readSource(FORM_PATH);
     if (!source) return;
 
-    expect(source).toContain('30 1 * * 0');
+    expect(source).toContain('scheduleDays');
   });
 
-  it('has monthly preset', () => {
+  it('has scheduleStartTime and scheduleEndTime for time window', () => {
     const source = readSource(FORM_PATH);
     if (!source) return;
 
-    expect(source).toContain('0 3 1 * *');
+    expect(source).toContain('scheduleStartTime');
+    expect(source).toContain('scheduleEndTime');
   });
 });
-// #endregion CronPresetDropdown
+// #endregion ScheduleTypeDropdown
 
 
 // #region DeadCodeCheck [C:2] [TYPE Class] [SEMANTICS test, dead-code, no-next-runs]
@@ -203,14 +205,14 @@ describe('ValidationTaskForm — dead code check', () => {
     expect(source).not.toContain('nextRunsLoading');
   });
 
-  it('does NOT contain nextRuns state (uses cronDays instead)', () => {
+  it('does NOT contain nextRuns state (uses scheduleDays instead)', () => {
     const source = readSource(FORM_PATH);
     if (!source) return;
 
     // Should not have nextRuns as a state variable
     expect(source).not.toMatch(/let nextRuns\b/);
-    // Should use cronDays instead
-    expect(source).toContain('cronDays');
+    // Should use scheduleDays instead
+    expect(source).toContain('scheduleDays');
   });
 
   it('does NOT make API call to /validation-tasks/next-runs', () => {
diff --git a/frontend/src/lib/components/reports/ReportCard.svelte b/frontend/src/lib/components/reports/ReportCard.svelte
index 5450cc91..0b28290b 100644
--- a/frontend/src/lib/components/reports/ReportCard.svelte
+++ b/frontend/src/lib/components/reports/ReportCard.svelte
@@ -30,7 +30,7 @@
    * @TEST_INVARIANT render_resilience -> verifies: [valid_report_card, empty_report_object, random_status]
    */
 
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { getReportTypeProfile } from "./reportTypeProfiles.js";
 
   let { report, selected = false, onselect = () => {} } = $props();
diff --git a/frontend/src/lib/components/reports/ReportDetailPanel.svelte b/frontend/src/lib/components/reports/ReportDetailPanel.svelte
index 9cf590bf..016a723b 100644
--- a/frontend/src/lib/components/reports/ReportDetailPanel.svelte
+++ b/frontend/src/lib/components/reports/ReportDetailPanel.svelte
@@ -32,7 +32,7 @@
    * @TEST_INVARIANT render_resilience -> verifies: [valid_detail, no_detail_prop, detail_with_error_context]
    */
 
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
 
   let { detail = null } = $props();
 
diff --git a/frontend/src/lib/components/reports/__tests__/report_card.ux.test.ts b/frontend/src/lib/components/reports/__tests__/report_card.ux.test.ts
index 4e745a22..99b94e46 100644
--- a/frontend/src/lib/components/reports/__tests__/report_card.ux.test.ts
+++ b/frontend/src/lib/components/reports/__tests__/report_card.ux.test.ts
@@ -21,7 +21,7 @@ import ReportCard from '../ReportCard.svelte';
 import { mixedTaskReports } from './fixtures/reports.fixtures.js';
 
 // Mock i18n
-vi.mock('$lib/i18n', () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: {
     subscribe: (fn) => {
       fn({
diff --git a/frontend/src/lib/components/reports/__tests__/report_detail.ux.test.ts b/frontend/src/lib/components/reports/__tests__/report_detail.ux.test.ts
index 0c1b3b74..83350ba5 100644
--- a/frontend/src/lib/components/reports/__tests__/report_detail.ux.test.ts
+++ b/frontend/src/lib/components/reports/__tests__/report_detail.ux.test.ts
@@ -14,7 +14,7 @@ import ReportDetailPanel from '../ReportDetailPanel.svelte';
 import { mixedTaskReports } from './fixtures/reports.fixtures.js';
 
 // Mock i18n
-vi.mock('$lib/i18n', () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: {
     subscribe: (fn) => {
       fn({
diff --git a/frontend/src/lib/components/reports/__tests__/reports_list.ux.test.ts b/frontend/src/lib/components/reports/__tests__/reports_list.ux.test.ts
index 5d615c8f..38fc7109 100644
--- a/frontend/src/lib/components/reports/__tests__/reports_list.ux.test.ts
+++ b/frontend/src/lib/components/reports/__tests__/reports_list.ux.test.ts
@@ -18,7 +18,7 @@ import { render, screen, fireEvent } from '@testing-library/svelte';
 import ReportsList from '../ReportsList.svelte';
 
 // Mock i18n since ReportsList -> ReportCard -> i18n
-vi.mock('$lib/i18n', () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
     t: {
         subscribe: (fn) => {
             fn({
diff --git a/frontend/src/lib/components/reports/reportTypeProfiles.ts b/frontend/src/lib/components/reports/reportTypeProfiles.ts
index 0f25ae16..ac940ead 100644
--- a/frontend/src/lib/components/reports/reportTypeProfiles.ts
+++ b/frontend/src/lib/components/reports/reportTypeProfiles.ts
@@ -1,7 +1,7 @@
 // #region ReportTypeProfiles:Module [TYPE Function]
 // @PURPOSE: Deterministic mapping from report task_type to visual profile with one fallback.
 
-import { _ } from '$lib/i18n';
+import { _ } from '$lib/i18n/index.svelte.js';
 
 interface ReportTypeProfile {
   key: string;
diff --git a/frontend/src/lib/components/settings/ApiKeysTab.svelte b/frontend/src/lib/components/settings/ApiKeysTab.svelte
index bc17a21e..cec11b23 100644
--- a/frontend/src/lib/components/settings/ApiKeysTab.svelte
+++ b/frontend/src/lib/components/settings/ApiKeysTab.svelte
@@ -14,9 +14,9 @@
 <!-- @UX_REACTIVITY Props -> $props(), LocalState -> $state(keys, isLoading, error) -->
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { t } from '$lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
   import { api } from '$lib/api.js';
-  import { addToast } from '$lib/toasts';
+  import { addToast } from '$lib/toasts.svelte.js';
 
   let keys = $state([]);
   let environments = $state([]);
diff --git a/frontend/src/lib/components/translate/BulkCorrectionSidebar.svelte b/frontend/src/lib/components/translate/BulkCorrectionSidebar.svelte
index 56a249b8..8ca37a2e 100644
--- a/frontend/src/lib/components/translate/BulkCorrectionSidebar.svelte
+++ b/frontend/src/lib/components/translate/BulkCorrectionSidebar.svelte
@@ -10,8 +10,8 @@
 <!-- @UX_FEEDBACK Toast on success/error; count badge on toggle button -->
 <!-- @UX_RECOVERY Remove individual items; retry submission -->
 <script lang="ts">
-  import { t } from '$lib/i18n';
-  import { addToast } from '$lib/toasts';
+  import { t } from '$lib/i18n/index.svelte.js';
+  import { addToast } from '$lib/toasts.svelte.js';
   import { submitBulkCorrections, dictionaryApi } from '$lib/api/translate.js';
 
   let {
diff --git a/frontend/src/lib/components/translate/BulkReplaceModal.svelte b/frontend/src/lib/components/translate/BulkReplaceModal.svelte
index 22d93183..d89359cf 100644
--- a/frontend/src/lib/components/translate/BulkReplaceModal.svelte
+++ b/frontend/src/lib/components/translate/BulkReplaceModal.svelte
@@ -13,9 +13,9 @@
 @UX_STATE apply_error -> Apply failed with error message
 -->
 <script lang="ts">
-	import { addToast } from '$lib/toasts';
+	import { addToast } from '$lib/toasts.svelte.js';
 	import { bulkFindReplace, bulkReplacePreview } from '$lib/api/translate.js';
-	import { t, _ } from '$lib/i18n';
+	import { t, _ } from '$lib/i18n/index.svelte.js';
 
 	/** @type {{ show: boolean, runId: string, targetLanguages: string[], onClose: () => void, onApplied?: (count: number) => void }} */
 	let {
diff --git a/frontend/src/lib/components/translate/ConfigTabForm.svelte b/frontend/src/lib/components/translate/ConfigTabForm.svelte
index 5cb00135..5a282264 100644
--- a/frontend/src/lib/components/translate/ConfigTabForm.svelte
+++ b/frontend/src/lib/components/translate/ConfigTabForm.svelte
@@ -19,7 +19,7 @@
 <!-- @UX_REACTIVITY Props -> $bindable() for all form fields, $props() for environment list -->
 <!-- @UX_REACTIVITY LocalState -> datasourceList, datasourceLoading, showDatasourceDropdown -->
 <script lang="ts">
-  import { t } from '$lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
   import { fetchDatasources, fetchDatasourceColumns } from '$lib/api/translate.js';
   import MultiSelect from '$lib/components/ui/MultiSelect.svelte';
   import HelpTooltip from '$lib/ui/HelpTooltip.svelte';
diff --git a/frontend/src/lib/components/translate/CorrectionCell.svelte b/frontend/src/lib/components/translate/CorrectionCell.svelte
index 4568b9da..ae6ebcd5 100644
--- a/frontend/src/lib/components/translate/CorrectionCell.svelte
+++ b/frontend/src/lib/components/translate/CorrectionCell.svelte
@@ -13,9 +13,9 @@
 @UX_STATE error -> Error state with retry option
 -->
 <script lang="ts">
-	import { addToast } from '$lib/toasts';
+	import { addToast } from '$lib/toasts.svelte.js';
 	import { inlineEditCorrection, submitCorrectionToDict, dictionaryApi } from '$lib/api/translate.js';
-	import { t, _ } from '$lib/i18n';
+	import { t, _ } from '$lib/i18n/index.svelte.js';
 
 	/** @type {{ value: string, recordId: string, languageCode: string, runId: string, sourceLanguage?: string, contextData?: object|null, usageNotes?: string, onSave?: (newValue: string) => void }} */
 	let {
diff --git a/frontend/src/lib/components/translate/RunTabContent.svelte b/frontend/src/lib/components/translate/RunTabContent.svelte
index a762bd99..b7b3b40d 100644
--- a/frontend/src/lib/components/translate/RunTabContent.svelte
+++ b/frontend/src/lib/components/translate/RunTabContent.svelte
@@ -14,8 +14,8 @@
 <!-- @UX_RECOVERY Retry button on TranslationRunProgress for failed runs -->
 <!-- @UX_REACTIVITY Props -> $props() for config/state, callbacks for actions -->
 <script lang="ts">
-  import { t } from '$lib/i18n';
-  import { addToast } from '$lib/toasts';
+  import { t } from '$lib/i18n/index.svelte.js';
+  import { addToast } from '$lib/toasts.svelte.js';
   import { updateJob } from '$lib/api/translate.js';
   import HelpTooltip from '$lib/ui/HelpTooltip.svelte';
   import TranslationRunProgress from './TranslationRunProgress.svelte';
diff --git a/frontend/src/lib/components/translate/ScheduleConfig.svelte b/frontend/src/lib/components/translate/ScheduleConfig.svelte
index 9d072888..511c48e4 100644
--- a/frontend/src/lib/components/translate/ScheduleConfig.svelte
+++ b/frontend/src/lib/components/translate/ScheduleConfig.svelte
@@ -9,8 +9,8 @@
 <!-- @UX_FEEDBACK Next-3-executions preview; toast on save/error -->
 <!-- @UX_RECOVERY Enable/disable toggle; delete schedule -->
 <script lang="ts">
-	import { t } from '$lib/i18n';
-	import { addToast } from '$lib/toasts';
+	import { t } from '$lib/i18n/index.svelte.js';
+	import { addToast } from '$lib/toasts.svelte.js';
 	import HelpTooltip from "$lib/ui/HelpTooltip.svelte";
 	import {
 		fetchSchedule,
diff --git a/frontend/src/lib/components/translate/TargetSchemaHint.svelte b/frontend/src/lib/components/translate/TargetSchemaHint.svelte
index f1721bc5..be945ba8 100644
--- a/frontend/src/lib/components/translate/TargetSchemaHint.svelte
+++ b/frontend/src/lib/components/translate/TargetSchemaHint.svelte
@@ -14,7 +14,7 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
   import { checkTargetTableSchema } from '$lib/api/translate.js';
-  import { _ } from '$lib/i18n';
+  import { _ } from '$lib/i18n/index.svelte.js';
 
   let {
     environmentId = '',
diff --git a/frontend/src/lib/components/translate/TargetTabForm.svelte b/frontend/src/lib/components/translate/TargetTabForm.svelte
index 1811aead..2e7a9948 100644
--- a/frontend/src/lib/components/translate/TargetTabForm.svelte
+++ b/frontend/src/lib/components/translate/TargetTabForm.svelte
@@ -13,7 +13,7 @@
 <!-- @UX_REACTIVITY Props -> $bindable() for all target fields -->
 <!-- @UX_REACTIVITY Props -> $props() for databases array -->
 <script lang="ts">
-  import { t } from '$lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
   import HelpTooltip from '$lib/ui/HelpTooltip.svelte';
   import TargetSchemaHint from './TargetSchemaHint.svelte';
 
diff --git a/frontend/src/lib/components/translate/TermCorrectionPopup.svelte b/frontend/src/lib/components/translate/TermCorrectionPopup.svelte
index c7bee1f9..05cfd1eb 100644
--- a/frontend/src/lib/components/translate/TermCorrectionPopup.svelte
+++ b/frontend/src/lib/components/translate/TermCorrectionPopup.svelte
@@ -11,9 +11,9 @@
 <!-- @UX_FEEDBACK Toast on success/error; conflict dialog with action buttons -->
 <!-- @UX_RECOVERY Cancel button returns to previous state -->
 <script lang="ts">
-	import { addToast } from '$lib/toasts';
+	import { addToast } from '$lib/toasts.svelte.js';
 	import { submitCorrection, dictionaryApi } from '$lib/api/translate.js';
-	import { t, _ } from '$lib/i18n';
+	import { t, _ } from '$lib/i18n/index.svelte.js';
 
 	let {
 		sourceTerm = '',
diff --git a/frontend/src/lib/components/translate/TranslationMetricsDashboard.svelte b/frontend/src/lib/components/translate/TranslationMetricsDashboard.svelte
index 8fdb50ad..5cacd873 100644
--- a/frontend/src/lib/components/translate/TranslationMetricsDashboard.svelte
+++ b/frontend/src/lib/components/translate/TranslationMetricsDashboard.svelte
@@ -8,8 +8,8 @@
 <!-- @UX_FEEDBACK Spinner during load; card grid for totals; table for per-job breakdown -->
 <!-- @UX_RECOVERY Retry button on error -->
 <script lang="ts">
-  import { t } from '$lib/i18n';
-  import { addToast } from '$lib/toasts';
+  import { t } from '$lib/i18n/index.svelte.js';
+  import { addToast } from '$lib/toasts.svelte.js';
   import { fetchAllMetrics } from '$lib/api/translate.js';
 
   /** @type {'loading'|'loaded'|'error'|'empty'} */
diff --git a/frontend/src/lib/components/translate/TranslationPreview.svelte b/frontend/src/lib/components/translate/TranslationPreview.svelte
index 24452576..0879b6d3 100644
--- a/frontend/src/lib/components/translate/TranslationPreview.svelte
+++ b/frontend/src/lib/components/translate/TranslationPreview.svelte
@@ -11,8 +11,8 @@
 <!-- @UX_FEEDBACK spinner during preview; visual distinction for LLM vs edited translations; cost warning for large previews. -->
 <!-- @UX_RECOVERY retry preview; re-fetch with updated config. -->
 <script lang="ts">
-	import { t } from '$lib/i18n';
-	import { addToast } from '$lib/toasts';
+	import { t } from '$lib/i18n/index.svelte.js';
+	import { addToast } from '$lib/toasts.svelte.js';
 	import {
 		fetchPreview,
 		approveRow,
diff --git a/frontend/src/lib/components/translate/TranslationRunGlobalIndicator.svelte b/frontend/src/lib/components/translate/TranslationRunGlobalIndicator.svelte
index 5767ddea..0fe8c6ef 100644
--- a/frontend/src/lib/components/translate/TranslationRunGlobalIndicator.svelte
+++ b/frontend/src/lib/components/translate/TranslationRunGlobalIndicator.svelte
@@ -8,13 +8,13 @@
 <!-- @UX_STATE cancelled -> Compact gray banner with auto-dismiss after 8s -->
 <!-- @UX_FEEDBACK Rich stats during active run; compact auto-dismiss for terminal states -->
 <script lang="ts">
-	import { translationRunStore, stopTranslationRun } from '$lib/stores/translationRun.js';
+	import { translationRunStore, stopTranslationRun } from '$lib/stores/translationRun.svelte.js';
 	import { page } from '$app/state';
 	import { goto } from '$app/navigation';
-	import { t } from '$lib/i18n';
+	import { t } from '$lib/i18n/index.svelte.js';
 	import { onDestroy } from 'svelte';
 	import { cancelRun } from '$lib/api/translate.js';
-	import { addToast } from '$lib/toasts';
+	import { addToast } from '$lib/toasts.svelte.js';
 
 	// Subscribe to store via $effect + subscribe (NOT fromStore + $derived).
 	// @REJECTED fromStore + multiple $derived(runState.current.xxx) creates render_effect
diff --git a/frontend/src/lib/components/translate/TranslationRunProgress.svelte b/frontend/src/lib/components/translate/TranslationRunProgress.svelte
index b9b2e34f..cab057b1 100644
--- a/frontend/src/lib/components/translate/TranslationRunProgress.svelte
+++ b/frontend/src/lib/components/translate/TranslationRunProgress.svelte
@@ -13,19 +13,17 @@
 <!-- @UX_FEEDBACK progress bar with percentage; batch counter; per-phase counts; cancel button during running/inserting. -->
 <!-- @UX_RECOVERY retry on failure states. -->
 <script lang="ts">
-	import { fromStore } from 'svelte/store';
-	import { t } from '$lib/i18n';
-	import { addToast } from '$lib/toasts';
+	import { t } from '$lib/i18n/index.svelte.js';
+	import { addToast } from '$lib/toasts.svelte.js';
 	import { cancelRun, downloadFailedCsv } from '$lib/api/translate.js';
-	import { translationRunStore } from '$lib/stores/translationRun.js';
+	import { translationRunStore } from '$lib/stores/translationRun.svelte.js';
 
 	/** @type {{ runId: string, onRetry?: () => void, onRetryInsert?: () => void, onComplete?: (statusData: any) => void }} */
 	let { runId, onRetry = () => {}, onRetryInsert = () => {}, onComplete = () => {} } = $props();
 
 	let isCancelling = $state(false);
 	let completionDelivered = $state(false);
-	const runState = fromStore(translationRunStore);
-	let storeSnapshot = $derived(runState.current?.runId === runId ? runState.current : null);
+	let storeSnapshot = $derived(translationRunStore.value?.runId === runId ? translationRunStore.value : null);
 
 	// Derived
 	let uxState = $derived(storeSnapshot?.uxState || 'idle');
diff --git a/frontend/src/lib/components/translate/TranslationRunResult.svelte b/frontend/src/lib/components/translate/TranslationRunResult.svelte
index 86448b8b..d4940f01 100644
--- a/frontend/src/lib/components/translate/TranslationRunResult.svelte
+++ b/frontend/src/lib/components/translate/TranslationRunResult.svelte
@@ -9,8 +9,8 @@
 <!-- @UX_FEEDBACK Tabular statistics; click to copy Superset query ID; collapsible SQL block. -->
 <!-- @UX_RECOVERY Retry failed batches; retry insert. -->
 <script lang="ts">
-	import { t } from '$lib/i18n';
-	import { addToast } from '$lib/toasts';
+	import { t } from '$lib/i18n/index.svelte.js';
+	import { addToast } from '$lib/toasts.svelte.js';
 	import {
 		fetchRunStatus,
 		fetchRunRecords,
diff --git a/frontend/src/lib/components/ui/DatabaseSearchCombobox.svelte b/frontend/src/lib/components/ui/DatabaseSearchCombobox.svelte
index aae1109b..1bf56ade 100644
--- a/frontend/src/lib/components/ui/DatabaseSearchCombobox.svelte
+++ b/frontend/src/lib/components/ui/DatabaseSearchCombobox.svelte
@@ -11,7 +11,7 @@
 <!-- @RELATION CALLED_BY -> [MapperTool] -->
 <script lang="ts">
   import { api } from '$lib/api';
-  import { addToast } from '$lib/toasts';
+  import { addToast } from '$lib/toasts.svelte.js';
 
   /**
    * Searchable single-select combobox for Superset databases.
diff --git a/frontend/src/lib/components/ui/DatasetSearchCombobox.svelte b/frontend/src/lib/components/ui/DatasetSearchCombobox.svelte
index 1fecf026..be2f940e 100644
--- a/frontend/src/lib/components/ui/DatasetSearchCombobox.svelte
+++ b/frontend/src/lib/components/ui/DatasetSearchCombobox.svelte
@@ -11,7 +11,7 @@
 <!-- @RELATION CALLED_BY -> [MapperTool] -->
 <script lang="ts">
   import { api } from '$lib/api';
-  import { addToast } from '$lib/toasts';
+  import { addToast } from '$lib/toasts.svelte.js';
 
   /**
    * Searchable single-select combobox for datasets.
diff --git a/frontend/src/lib/i18n/index.ts b/frontend/src/lib/i18n/index.svelte.ts
similarity index 59%
rename from frontend/src/lib/i18n/index.ts
rename to frontend/src/lib/i18n/index.svelte.ts
index db529674..9214ea64 100644
--- a/frontend/src/lib/i18n/index.ts
+++ b/frontend/src/lib/i18n/index.svelte.ts
@@ -1,22 +1,17 @@
 // #region I18nModule [C:3] [TYPE Module] [SEMANTICS i18n, localization, store, locale, translation]
-// @BRIEF Centralized internationalization management using Svelte stores with Russian and English locale support persisted in LocalStorage.
+// @BRIEF Centralized internationalization management using Svelte 5 runes with Russian and English locale support persisted in LocalStorage.
 // @RELATION DEPENDS_ON -> [EXT:frontend:LocaleEn]
 // @RELATION DEPENDS_ON -> [EXT:frontend:LocaleRu]
-
-// #region i18n:Module [TYPE Function]
-//
-// @SEMANTICS: i18n, localization, svelte-store, translation
-// @PURPOSE:   Centralized internationalization management using Svelte stores.
-// @LAYER:     Infra
-// @RELATION DEPENDS_ON -> [EXT:frontend:i18n_ru_locale]
-// @RELATION DEPENDS_ON -> [EXT:frontend:i18n_en_locale]
-//
+// @UX_STATE: locale.current — 'ru' | 'en' (reactive atom)
+// @UX_STATE: t — translation dictionary (reactive derived via Proxy)
+// @UX_FEEDBACK: locale change → localStorage persistence via $effect
 // @INVARIANT: Locale must be either 'ru' or 'en'.
 // @INVARIANT: Persistence is handled via LocalStorage.
+// @RATIONALE Migrated from Svelte 4 stores (writable/derived) to Svelte 5 runes ($state/$derived/$effect).
+//            Subscribe method preserved for backward compat with $t.xxx template syntax.
+//            t is a Proxy to support both subscribe (templates) and direct key access (model files).
 
 // [SECTION: IMPORTS]
-import { writable, derived } from 'svelte/store';
-
 // Domain-split locale files (INV_7: each file < 400 lines)
 import enApiKeys from './locales/en/api-keys.json';
 import enCommon from './locales/en/common.json';
@@ -123,8 +118,8 @@ const ru = {
 	connections: ruConnections,
 };
 
-const translations = { ru, en };
-type Locale = keyof typeof translations;
+const translationsMap = { ru, en };
+type Locale = keyof typeof translationsMap;
 
 /**
  * @purpose Determines the starting locale.
@@ -138,28 +133,82 @@ const getInitialLocale = (): Locale => {
   return 'ru';
 };
 
-// #region locale:Store [TYPE Function]
+// ── Reactive State (Svelte 5 Runes) ───────────────────────────
+let _locale = $state<Locale>(getInitialLocale());
+
+// ── Subscriber Tracking (for backward compat with $t.xxx syntax) ─
+const _localeSubs = new Set<(v: Locale) => void>();
+const _tSubs = new Set<(v: any) => void>();
+
+// ── Derived Translation Value ──────────────────────────────────
+const _tValue = $derived.by(() => translationsMap[_locale] || translationsMap.ru);
+
+// ── Explicit notifier (replaces $effect to avoid effect_orphan in tests) ──
+// @RATIONALE Module-level $effect causes effect_orphan when vitest imports this
+//            file outside a Svelte component context. Explicit _notifyAll() called
+//            from locale.setter achieves the same persistence + subscriber update
+//            without relying on the Svelte runtime.
+function _notifyAll(): void {
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem('locale', _locale);
+  }
+  _localeSubs.forEach((fn) => fn(_locale));
+  _tSubs.forEach((fn) => fn(_tValue));
+}
+
+// ── Exports ────────────────────────────────────────────────────
+
+// #region locale:Reactive [TYPE Function]
 /**
  * @purpose Holds the current active locale string.
- * @side_effect Writes to LocalStorage on change.
+ * @side_effect Writes to LocalStorage on change (via $effect).
+ *             Supports .subscribe() for backward compat with Svelte 4 store syntax.
  */
-export const locale = writable<Locale>(getInitialLocale());
+export const locale = {
+  get current() { return _locale; },
+  set current(v: Locale) {
+    _locale = v;
+    _notifyAll();
+  },
+  subscribe(fn: (v: Locale) => void) {
+    fn(_locale);
+    _localeSubs.add(fn);
+    return () => { _localeSubs.delete(fn); };
+  }
+};
+// #endregion locale:Reactive
 
-if (typeof localStorage !== 'undefined') {
-  locale.subscribe((val) => localStorage.setItem('locale', val));
-}
-// #endregion locale:Store
-
-// #region t:Store [TYPE Function]
-// @RELATION BINDS_TO -> [locale:Store]
+// #region t:Reactive [TYPE Function]
+// @RELATION BINDS_TO -> [locale:Reactive]
 /**
- * @purpose Derived store providing the translation dictionary.
+ * @purpose Reactive translation dictionary.
+ *             Uses Proxy to support both .subscribe() (for Svelte $t template syntax)
+ *             and direct key access (e.g., t.dashboard?.load_failed in model files).
  */
-export const t = derived(locale, ($locale) => {
-  const dictionary = (translations[$locale] || translations.ru) as any;
-  return dictionary;
+export const t = new Proxy({} as any, {
+  get(_target, prop) {
+    if (prop === 'subscribe') {
+      return (fn: (v: any) => void) => {
+        fn(_tValue);
+        _tSubs.add(fn);
+        return () => { _tSubs.delete(fn); };
+      };
+    }
+    if (prop === 'current') {
+      return _tValue;
+    }
+    return (_tValue as any)[prop];
+  }
 });
-// #endregion t:Store
+// #endregion t:Reactive
+
+/**
+ * @purpose Get current translation dictionary directly (for model .svelte.ts files).
+ *           Replaces `get(tStore)` pattern from svelte/store.
+ */
+export function getT(): any {
+  return _tValue;
+}
 
 // #region _:Function [TYPE Function]
 /**
@@ -168,13 +217,9 @@ export const t = derived(locale, ($locale) => {
  * @returns Translation string or key if not found
  */
 export function _(key: string): string {
-  const currentLocale = getInitialLocale();
-  const dictionary = (translations[currentLocale] || translations.ru) as any;
-  
-  // Navigate through nested keys
   const keys = key.split('.');
-  let value: any = dictionary;
-  
+  let value: any = _tValue;
+
   for (const k of keys) {
     if (value && typeof value === 'object' && k in value) {
       value = value[k];
@@ -182,10 +227,9 @@ export function _(key: string): string {
       return key; // Return key if translation not found
     }
   }
-  
+
   return typeof value === 'string' ? value : key;
 }
 // #endregion _:Function
 
-// #endregion i18n:Module
 // #endregion I18nModule
diff --git a/frontend/src/lib/i18n/locales/en/health.json b/frontend/src/lib/i18n/locales/en/health.json
index 77c64ff6..731587df 100644
--- a/frontend/src/lib/i18n/locales/en/health.json
+++ b/frontend/src/lib/i18n/locales/en/health.json
@@ -4,7 +4,7 @@
   "environment_label": "Environment:",
   "all_environments": "All Environments",
   "validation_details": "Validation Details",
-  "table_dashboard": "Slug",
+  "table_dashboard": "Dashboard",
   "table_environment": "Environment",
   "table_status": "Status",
   "table_last_check": "Last Check",
@@ -20,6 +20,13 @@
   "status_warn": "Warn",
   "status_fail": "Fail",
   "status_unknown": "Unknown",
+  "healthy_dashboards": "Healthy",
+  "warning_dashboards": "Needs attention",
+  "failing_dashboards": "Requires action",
+  "unknown_dashboards": "No data",
+  "all_dashboards": "ALL",
+  "total_dashboards": "Total",
+  "view_history": "History",
 
   "schedule_title": "Validation Schedule",
   "schedule_active_count": "{count} active",
diff --git a/frontend/src/lib/i18n/locales/en/validation.json b/frontend/src/lib/i18n/locales/en/validation.json
index 0b6a779e..adcfb560 100644
--- a/frontend/src/lib/i18n/locales/en/validation.json
+++ b/frontend/src/lib/i18n/locales/en/validation.json
@@ -26,9 +26,22 @@
   "llm_batch_size": "Dashboards per LLM call (1 = full isolation)",
   "prompt_template": "Prompt Template (optional)",
   "schedule_manual": "Manual trigger only",
-  "schedule_cron": "Scheduled (cron expression)",
-  "cron_placeholder": "e.g. 0 8 * * 1-5",
-  "next_runs": "Next 5 runs:",
+  "schedule_scheduled": "Scheduled",
+  "scheduled_desc": "Run automatically on selected days at specified time",
+  "schedule_days_label": "Days of week",
+  "schedule_days_required": "Select at least one day",
+  "every_day": "Every day",
+  "weekdays": "Weekdays",
+  "window_start": "Start time",
+  "window_end": "End time",
+  "window_invalid": "Window must end after start",
+  "schedule_summary": "Schedule summary",
+  "window": "Window",
+  "time_window": "Time window",
+  "help_schedule_manual": "Run this validation task manually from the task detail page. No automatic execution.",
+  "help_schedule_scheduled": "The task runs automatically on the selected days. It executes once within the configured time window. The scheduler must be running on the server.",
+  "help_schedule_days": "Select which days the validation task should run on. You can select any combination of days.",
+  "help_schedule_window": "The task runs once within this time window. Set the earliest possible start time and the deadline. Actual execution time depends on scheduler capacity and queue.",
   "review_title": "Review & Create",
   "create_task": "Create Task",
   "save_changes": "Save Changes",
@@ -63,7 +76,6 @@
   "review_path": "Analysis Path",
   "review_provider": "LLM Provider",
   "review_schedule": "Schedule",
-  "review_cron": "Cron Expression",
   "review_logs": "Execution Logs",
   "review_chart_data": "Chart Data",
   "review_batch_size": "Batch Size",
diff --git a/frontend/src/lib/i18n/locales/ru/health.json b/frontend/src/lib/i18n/locales/ru/health.json
index 391d7ff7..8a1d327b 100644
--- a/frontend/src/lib/i18n/locales/ru/health.json
+++ b/frontend/src/lib/i18n/locales/ru/health.json
@@ -4,7 +4,7 @@
   "environment_label": "Окружение:",
   "all_environments": "Все окружения",
   "validation_details": "Детали валидации",
-  "table_dashboard": "Slug",
+  "table_dashboard": "Дашборд",
   "table_environment": "Окружение",
   "table_status": "Статус",
   "table_last_check": "Последняя проверка",
@@ -20,6 +20,13 @@
   "status_warn": "Предупреждение",
   "status_fail": "Ошибка",
   "status_unknown": "Неизвестно",
+  "healthy_dashboards": "Healthy",
+  "warning_dashboards": "Needs attention",
+  "failing_dashboards": "Requires action",
+  "unknown_dashboards": "No data",
+  "all_dashboards": "ВСЕ",
+  "total_dashboards": "Всего",
+  "view_history": "История",
 
   "schedule_title": "Расписание проверок",
   "schedule_active_count": "{count} активных",
diff --git a/frontend/src/lib/i18n/locales/ru/validation.json b/frontend/src/lib/i18n/locales/ru/validation.json
index 9479a6e7..ec06e6f4 100644
--- a/frontend/src/lib/i18n/locales/ru/validation.json
+++ b/frontend/src/lib/i18n/locales/ru/validation.json
@@ -26,9 +26,22 @@
   "llm_batch_size": "Дашбордов на LLM вызов (1 = полная изоляция)",
   "prompt_template": "Шаблон промпта (необязательно)",
   "schedule_manual": "Только ручной запуск",
-  "schedule_cron": "По расписанию (cron-выражение)",
-  "cron_placeholder": "например, 0 8 * * 1-5",
-  "next_runs": "Следующие 5 запусков:",
+  "schedule_scheduled": "По расписанию",
+  "scheduled_desc": "Автоматический запуск в указанные дни и время",
+  "schedule_days_label": "Дни недели",
+  "schedule_days_required": "Выберите хотя бы один день",
+  "every_day": "Каждый день",
+  "weekdays": "Будни",
+  "window_start": "Начало окна",
+  "window_end": "Конец окна",
+  "window_invalid": "Окно должно заканчиваться после начала",
+  "schedule_summary": "Сводка расписания",
+  "window": "Окно",
+  "time_window": "Временное окно",
+  "help_schedule_manual": "Запускайте задачу вручную со страницы задачи. Автоматического выполнения не будет.",
+  "help_schedule_scheduled": "Задача запускается автоматически в выбранные дни. Выполняется один раз в пределах настроенного временного окна. На сервере должен быть запущен планировщик.",
+  "help_schedule_days": "Выберите дни недели для автоматического запуска задачи. Можно выбрать любое количество дней.",
+  "help_schedule_window": "Задача выполняется один раз в пределах этого окна. Укажите желаемое время начала и крайний срок. Фактическое время запуска зависит от загрузки планировщика.",
   "review_title": "Проверка и создание",
   "create_task": "Создать задачу",
   "save_changes": "Сохранить изменения",
diff --git a/frontend/src/lib/models/BranchModel.svelte.ts b/frontend/src/lib/models/BranchModel.svelte.ts
index 4d61823d..ae24d357 100644
--- a/frontend/src/lib/models/BranchModel.svelte.ts
+++ b/frontend/src/lib/models/BranchModel.svelte.ts
@@ -18,9 +18,8 @@
 //   follows pattern established by GitStatusModel and GitManagerModel.
 
 import { gitService } from '../../services/gitService.js';
-import { addToast } from '$lib/toasts';
-import { t as tStore } from '$lib/i18n';
-import { get } from 'svelte/store';
+import { addToast } from '$lib/toasts.svelte.js';
+import { getT } from '$lib/i18n/index.svelte.js';
 
 // ── Types ─────────────────────────────────────────────────────
 
@@ -36,7 +35,7 @@ interface BranchError {
 
 /** @returns Current i18n translations. */
 function tt(): Record<string, unknown> {
-  return get(tStore);
+  return getT();
 }
 
 export class BranchModel {
diff --git a/frontend/src/lib/models/CommitModel.svelte.ts b/frontend/src/lib/models/CommitModel.svelte.ts
index 02919fb5..842abc7d 100644
--- a/frontend/src/lib/models/CommitModel.svelte.ts
+++ b/frontend/src/lib/models/CommitModel.svelte.ts
@@ -17,9 +17,8 @@
 
 import { gitService } from '../../services/gitService.js';
 import { api } from '$lib/api.js';
-import { addToast } from '$lib/toasts';
-import { t as tStore } from '$lib/i18n';
-import { get } from 'svelte/store';
+import { addToast } from '$lib/toasts.svelte.js';
+import { getT } from '$lib/i18n/index.svelte.js';
 
 // ── Types ─────────────────────────────────────────────────────
 
@@ -34,7 +33,7 @@ interface CommitStatusPayload {
 
 /** @returns Current i18n translations. */
 function tt(): Record<string, unknown> {
-  return get(tStore);
+  return getT();
 }
 
 export class CommitModel {
diff --git a/frontend/src/lib/models/DeploymentModel.svelte.ts b/frontend/src/lib/models/DeploymentModel.svelte.ts
index e763024e..23621994 100644
--- a/frontend/src/lib/models/DeploymentModel.svelte.ts
+++ b/frontend/src/lib/models/DeploymentModel.svelte.ts
@@ -21,9 +21,8 @@
 
 import { gitService } from '../../services/gitService.js';
 import { api } from '$lib/api.js';
-import { addToast } from '$lib/toasts';
-import { t as tStore } from '$lib/i18n';
-import { get } from 'svelte/store';
+import { addToast } from '$lib/toasts.svelte.js';
+import { getT } from '$lib/i18n/index.svelte.js';
 import { normalizeEnvStage } from '../../services/git-utils.js';
 
 // ── Types ─────────────────────────────────────────────────────
@@ -40,7 +39,7 @@ interface EnvironmentItem {
 
 /** @returns Current i18n translations. */
 function tt(): Record<string, unknown> {
-  return get(tStore);
+  return getT();
 }
 
 export class DeploymentModel {
diff --git a/frontend/src/lib/models/GitConfigModel.svelte.ts b/frontend/src/lib/models/GitConfigModel.svelte.ts
index 00a5f060..3cfe0b05 100644
--- a/frontend/src/lib/models/GitConfigModel.svelte.ts
+++ b/frontend/src/lib/models/GitConfigModel.svelte.ts
@@ -28,9 +28,8 @@
 // @REJECTED getState/setState proxy pattern rejected — fragile, untyped, hard to test. Real $state atoms with class methods enable L1 testing without DOM render.
 
 import { gitService } from '../../services/gitService.js';
-import { addToast } from '$lib/toasts';
-import { t as tStore } from '$lib/i18n';
-import { get } from 'svelte/store';
+import { addToast } from '$lib/toasts.svelte.js';
+import { getT } from '$lib/i18n/index.svelte.js';
 
 // ── Types ─────────────────────────────────────────────────────
 
@@ -87,7 +86,7 @@ interface ConnectionTestResult {
 
 /** @returns Current i18n translations. */
 function tt(): Record<string, unknown> {
-  return get(tStore);
+  return getT();
 }
 
 export class GitConfigModel {
diff --git a/frontend/src/lib/models/GitManagerModel.svelte.ts b/frontend/src/lib/models/GitManagerModel.svelte.ts
index fc9e965c..7f58c6d5 100644
--- a/frontend/src/lib/models/GitManagerModel.svelte.ts
+++ b/frontend/src/lib/models/GitManagerModel.svelte.ts
@@ -41,7 +41,7 @@
 
 import { gitService } from '../../services/gitService.js';
 import { api } from '$lib/api.js';
-import { addToast } from '$lib/toasts';
+import { addToast } from '$lib/toasts.svelte.js';
 import {
   isNumericDashboardRef,
   resolveDefaultConfig,
@@ -53,8 +53,7 @@ import {
   resolvePushProviderLabel,
   extractHttpHost,
 } from '../../services/git-utils.js';
-import { t as tStore } from '$lib/i18n';
-import { get } from 'svelte/store';
+import { getT } from '$lib/i18n/index.svelte.js';
 
 // ── Types ─────────────────────────────────────────────────────
 
@@ -186,9 +185,9 @@ function buildGitErrorFromException(e: unknown): GitErrorPayload {
 }
 // #endregion buildGitErrorFromException
 
-/** short alias for get(tStore) */
+/** short alias for getT() */
 function tt(): Record<string, unknown> {
-  return get(tStore);
+  return getT();
 }
 
 export class GitManagerModel {
diff --git a/frontend/src/lib/models/GitStatusModel.svelte.ts b/frontend/src/lib/models/GitStatusModel.svelte.ts
index 72c1a4ac..1c86b2a6 100644
--- a/frontend/src/lib/models/GitStatusModel.svelte.ts
+++ b/frontend/src/lib/models/GitStatusModel.svelte.ts
@@ -11,9 +11,8 @@
 // @RELATION DEPENDS_ON -> [EXT:frontend:gitService]
 
 import { gitService } from '../../services/gitService.js';
-import { addToast } from '$lib/toasts';
-import { t as tStore } from '$lib/i18n';
-import { get } from 'svelte/store';
+import { addToast } from '$lib/toasts.svelte.js';
+import { getT } from '$lib/i18n/index.svelte.js';
 
 // ── Types ─────────────────────────────────────────────────────
 
@@ -41,9 +40,9 @@ interface CommitEntry {
   [key: string]: unknown;
 }
 
-/** short alias for get(tStore) */
+/** short alias for getT() */
 function tt(): Record<string, unknown> {
-  return get(tStore);
+  return getT();
 }
 
 export class GitStatusModel {
diff --git a/frontend/src/lib/models/MappingsModel.svelte.ts b/frontend/src/lib/models/MappingsModel.svelte.ts
index 9920b1d3..07836b97 100644
--- a/frontend/src/lib/models/MappingsModel.svelte.ts
+++ b/frontend/src/lib/models/MappingsModel.svelte.ts
@@ -12,8 +12,7 @@
 // @RELATION DEPENDS_ON -> [EXT:frontend:api]
 // @RELATION DEPENDS_ON -> [EXT:frontend:environmentContextStore]
 import { api } from "$lib/api.js";
-import { get } from "svelte/store";
-import { environmentContextStore } from "$lib/stores/environmentContext.js";
+import { environmentContextStore } from "$lib/stores/environmentContext.svelte.js";
 
 // ── Types ─────────────────────────────────────────────────────
 
@@ -93,8 +92,7 @@ export class MappingsModel {
     this.success = "";
     try {
       this.environments = await api.getEnvironmentsList();
-      const state = get(environmentContextStore);
-      const activeEnvId = state?.selectedEnvId;
+      const activeEnvId = environmentContextStore.value.selectedEnvId;
       if (activeEnvId && this.environments.some((env: Environment) => env.id === activeEnvId)) {
         this.sourceEnvId = activeEnvId;
       }
diff --git a/frontend/src/lib/models/MigrationModel.svelte.ts b/frontend/src/lib/models/MigrationModel.svelte.ts
index 34ad6542..402d27ad 100644
--- a/frontend/src/lib/models/MigrationModel.svelte.ts
+++ b/frontend/src/lib/models/MigrationModel.svelte.ts
@@ -37,10 +37,10 @@
 // @RELATION CALLS -> [EXT:frontend:resumeTask]
 
 import { api } from "$lib/api.js";
-import { selectedTask } from "$lib/stores.js";
-import { environmentContextStore } from "$lib/stores/environmentContext.js";
+import { selectedTask } from "$lib/stores.svelte.js";
+import { environmentContextStore } from "$lib/stores/environmentContext.svelte.js";
 import { resumeTask } from "../../services/taskService.js";
-import { t } from "$lib/i18n";
+import { t } from "$lib/i18n/index.svelte.js";
 
 // ── Types ─────────────────────────────────────────────────────
 
diff --git a/frontend/src/lib/models/__tests__/BranchModel.test.ts b/frontend/src/lib/models/__tests__/BranchModel.test.ts
index f15f1bf7..d01f27f3 100644
--- a/frontend/src/lib/models/__tests__/BranchModel.test.ts
+++ b/frontend/src/lib/models/__tests__/BranchModel.test.ts
@@ -13,13 +13,13 @@ vi.mock("../../../services/gitService.js", () => ({
   },
 }));
 
-vi.mock("$lib/toasts", () => ({
+vi.mock('$lib/toasts.svelte.js', () => ({
   addToast: vi.fn(),
 }));
 
-vi.mock("$lib/i18n", () => ({
-  t: { subscribe: vi.fn() },
-  _: vi.fn(),
+vi.mock('$lib/i18n/index.svelte.js', () => ({
+  t: { subscribe: vi.fn() }, getT: vi.fn(() => ({})),
+  _: vi.fn(), getT: vi.fn(() => ({})),
 }));
 
 vi.mock("svelte/store", () => ({
diff --git a/frontend/src/lib/models/__tests__/CommitModel.test.ts b/frontend/src/lib/models/__tests__/CommitModel.test.ts
index 8d97eea5..25b2fde3 100644
--- a/frontend/src/lib/models/__tests__/CommitModel.test.ts
+++ b/frontend/src/lib/models/__tests__/CommitModel.test.ts
@@ -20,13 +20,13 @@ vi.mock("$lib/api.js", () => ({
   },
 }));
 
-vi.mock("$lib/toasts", () => ({
+vi.mock('$lib/toasts.svelte.js', () => ({
   addToast: vi.fn(),
 }));
 
-vi.mock("$lib/i18n", () => ({
-  t: { subscribe: vi.fn() },
-  _: vi.fn(),
+vi.mock('$lib/i18n/index.svelte.js', () => ({
+  t: { subscribe: vi.fn() }, getT: vi.fn(() => ({})),
+  _: vi.fn(), getT: vi.fn(() => ({})),
 }));
 
 vi.mock("svelte/store", () => ({
diff --git a/frontend/src/lib/models/__tests__/DeploymentModel.test.ts b/frontend/src/lib/models/__tests__/DeploymentModel.test.ts
index fb3e5605..99171ece 100644
--- a/frontend/src/lib/models/__tests__/DeploymentModel.test.ts
+++ b/frontend/src/lib/models/__tests__/DeploymentModel.test.ts
@@ -17,13 +17,13 @@ vi.mock("$lib/api.js", () => ({
   },
 }));
 
-vi.mock("$lib/toasts", () => ({
+vi.mock('$lib/toasts.svelte.js', () => ({
   addToast: vi.fn(),
 }));
 
-vi.mock("$lib/i18n", () => ({
-  t: { subscribe: vi.fn() },
-  _: vi.fn(),
+vi.mock('$lib/i18n/index.svelte.js', () => ({
+  t: { subscribe: vi.fn() }, getT: vi.fn(() => ({})),
+  _: vi.fn(), getT: vi.fn(() => ({})),
 }));
 
 vi.mock("svelte/store", () => ({
diff --git a/frontend/src/lib/models/__tests__/GitConfigModel.test.ts b/frontend/src/lib/models/__tests__/GitConfigModel.test.ts
index d8543e78..a78d9115 100644
--- a/frontend/src/lib/models/__tests__/GitConfigModel.test.ts
+++ b/frontend/src/lib/models/__tests__/GitConfigModel.test.ts
@@ -34,35 +34,38 @@ vi.mock('../../../services/gitService.js', () => ({
 }));
 
 // Mock toasts
-vi.mock('$lib/toasts', () => ({
+vi.mock('$lib/toasts.svelte.js', () => ({
   addToast: vi.fn(),
 }));
 
 // Mock i18n
-vi.mock('$lib/i18n', () => ({
+const mockTranslations = {
+  settings: {
+    connection_success: 'Connection successful',
+    connection_failed_short: 'Connection failed',
+    git_config_updated: 'Git configuration updated',
+    git_config_saved: 'Git configuration saved',
+    git_config_deleted: 'Git configuration deleted',
+  },
+  git: {},
+  common: {},
+  nav: {},
+  llm: {},
+};
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: {
     subscribe: (fn: (v: Record<string, unknown>) => void) => {
-      fn({
-        settings: {
-          connection_success: 'Connection successful',
-          connection_failed_short: 'Connection failed',
-          git_config_updated: 'Git configuration updated',
-          git_config_saved: 'Git configuration saved',
-          git_config_deleted: 'Git configuration deleted',
-        },
-        git: {},
-        common: {},
-        nav: {},
-        llm: {},
-      });
+      fn(mockTranslations);
       return () => {};
     },
   },
+  getT: vi.fn(() => mockTranslations),
+  _: vi.fn((key: string) => key),
 }));
 
 import { GitConfigModel } from '../GitConfigModel.svelte.ts';
 import { gitService } from '../../../services/gitService.js';
-import { addToast } from '$lib/toasts';
+import { addToast } from '$lib/toasts.svelte.js';
 
 describe('GitConfigModel — L1 invariants (no render)', () => {
   let model: GitConfigModel;
diff --git a/frontend/src/lib/models/__tests__/GitManagerModel.test.ts b/frontend/src/lib/models/__tests__/GitManagerModel.test.ts
index a8ddb0b5..9c40bd1b 100644
--- a/frontend/src/lib/models/__tests__/GitManagerModel.test.ts
+++ b/frontend/src/lib/models/__tests__/GitManagerModel.test.ts
@@ -42,11 +42,11 @@ vi.mock("$lib/api.js", () => ({
   },
 }));
 
-vi.mock("$lib/toasts", () => ({
+vi.mock('$lib/toasts.svelte.js', () => ({
   addToast: vi.fn(),
 }));
 
-vi.mock("$lib/i18n", () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: { subscribe: vi.fn() },
   _: vi.fn(),
 }));
@@ -58,7 +58,7 @@ vi.mock("svelte/store", () => ({
 import { GitManagerModel } from "../GitManagerModel.svelte.ts";
 import { gitService } from "../../../services/gitService.js";
 import { api } from "$lib/api.js";
-import { addToast } from "$lib/toasts";
+import { addToast } from "$lib/toasts.svelte.js";
 
 // ── Types ─────────────────────────────────────────────────────────
 
diff --git a/frontend/src/lib/models/__tests__/GitStatusModel.test.ts b/frontend/src/lib/models/__tests__/GitStatusModel.test.ts
index 7c24126e..ff27a013 100644
--- a/frontend/src/lib/models/__tests__/GitStatusModel.test.ts
+++ b/frontend/src/lib/models/__tests__/GitStatusModel.test.ts
@@ -16,13 +16,13 @@ vi.mock("../../../services/gitService.js", () => ({
   },
 }));
 
-vi.mock("$lib/toasts", () => ({
+vi.mock('$lib/toasts.svelte.js', () => ({
   addToast: vi.fn(),
 }));
 
-vi.mock("$lib/i18n", () => ({
-  t: { subscribe: vi.fn() },
-  _: vi.fn(),
+vi.mock('$lib/i18n/index.svelte.js', () => ({
+  t: { subscribe: vi.fn() }, getT: vi.fn(() => ({})),
+  _: vi.fn(), getT: vi.fn(() => ({})),
 }));
 
 vi.mock("svelte/store", () => ({
diff --git a/frontend/src/lib/models/__tests__/MappingsModel.test.ts b/frontend/src/lib/models/__tests__/MappingsModel.test.ts
index 32d23436..631ae96f 100644
--- a/frontend/src/lib/models/__tests__/MappingsModel.test.ts
+++ b/frontend/src/lib/models/__tests__/MappingsModel.test.ts
@@ -18,18 +18,16 @@ vi.mock("$lib/api.js", () => ({
 }));
 
 // Mock environment context store
-vi.mock("$lib/stores/environmentContext.js", () => ({
+vi.mock("$lib/stores/environmentContext.svelte.js", () => ({
   environmentContextStore: {
     subscribe: vi.fn(),
+    get value() {
+      return { selectedEnvId: "env-1" };
+    },
   },
 }));
 
-// Mock svelte/store get() to return controlled state
-vi.mock("svelte/store", () => ({
-  get: vi.fn(() => ({ selectedEnvId: "env-1" })),
-}));
-
-vi.mock("$lib/i18n", () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: {
     migration: {
       mapping_saved: "Mapping saved",
diff --git a/frontend/src/lib/models/__tests__/MigrationModel.test.ts b/frontend/src/lib/models/__tests__/MigrationModel.test.ts
index 0a49293f..c92d54b1 100644
--- a/frontend/src/lib/models/__tests__/MigrationModel.test.ts
+++ b/frontend/src/lib/models/__tests__/MigrationModel.test.ts
@@ -23,19 +23,19 @@ vi.mock("$lib/api.js", () => ({
   },
 }));
 
-vi.mock("$lib/stores.js", () => ({
-  selectedTask: { set: vi.fn(), current: null, subscribe: vi.fn() },
+vi.mock("$lib/stores.svelte.js", () => ({
+	selectedTask: { set: vi.fn(), current: null, subscribe: vi.fn() },
 }));
 
-vi.mock("$lib/stores/environmentContext.js", () => ({
-  environmentContextStore: { current: { selectedEnvId: "env-1" } },
+vi.mock("$lib/stores/environmentContext.svelte.js", () => ({
+	environmentContextStore: { current: { selectedEnvId: "env-1" } },
 }));
 
 vi.mock("../../services/taskService.js", () => ({
   resumeTask: vi.fn().mockResolvedValue({ ok: true }),
 }));
 
-vi.mock("$lib/i18n", () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: {
     migration: {
       select_both_envs: "Select both environments",
@@ -48,7 +48,7 @@ vi.mock("$lib/i18n", () => ({
 
 import { MigrationModel } from "../MigrationModel.svelte.ts";
 import { api } from "$lib/api.js";
-import { selectedTask } from "$lib/stores.js";
+import { selectedTask } from "$lib/stores.svelte.js";
 
 describe("MigrationModel — L1 invariants (no render)", () => {
   let model: MigrationModel;
diff --git a/frontend/src/lib/stores.svelte.ts b/frontend/src/lib/stores.svelte.ts
new file mode 100644
index 00000000..6840ea4f
--- /dev/null
+++ b/frontend/src/lib/stores.svelte.ts
@@ -0,0 +1,97 @@
+// #region StoresModule [C:3] [TYPE Module] [SEMANTICS store, state, $state, plugins, tasks]
+// @BRIEF Global Svelte 5 rune-based store atoms for plugins, tasks, and UI page state.
+// @LAYER UI
+// @RELATION DEPENDS_ON -> [ApiModule]
+// @POST All stores are initialized with sensible defaults. fetchPlugins/fetchTasks populate on call.
+// @RATIONALE Migrated from Svelte 4 writable stores to Svelte 5 $state runes.
+//            Keeps .subscribe(), .set(), .update(), and .current for backward compat.
+//            Uses explicit _notify() calls instead of $effect to avoid effect_orphan in test contexts.
+
+import { api } from './api';
+import type { Plugin, Task } from '../types/models';
+
+// ── Helper to create a rune-backed store atom ───────────────────
+function createWritableAtom<T>(initial: T) {
+	let value = $state(initial) as T;
+	const subs = new Set<(v: T) => void>();
+
+	function _notify() {
+		const snapshot = value;
+		subs.forEach(fn => fn(snapshot));
+	}
+
+	return {
+		get current() { return value; },
+		set current(v: T) { value = v; _notify(); },
+		set(v: T) { value = v; _notify(); },
+		update(fn: (v: T) => T) { value = fn(value); _notify(); },
+		subscribe(fn: (v: T) => void) {
+			fn(value);
+			subs.add(fn);
+			return () => subs.delete(fn);
+		},
+	};
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// Store atoms
+// ═══════════════════════════════════════════════════════════════════
+
+// #region plugins [C:2] [TYPE Store] [SEMANTICS plugins, store]
+export const plugins = createWritableAtom<Plugin[]>([]);
+// #endregion plugins
+
+// #region tasks [C:2] [TYPE Store] [SEMANTICS tasks, store]
+export const tasks = createWritableAtom<Task[]>([]);
+// #endregion tasks
+
+// #region selectedPlugin [C:1] [TYPE Store]
+export const selectedPlugin = createWritableAtom<Plugin | null>(null);
+// #endregion selectedPlugin
+
+// #region selectedTask [C:1] [TYPE Store]
+export const selectedTask = createWritableAtom<Task | null>(null);
+// #endregion selectedTask
+
+// #region currentPage [C:1] [TYPE Store]
+export const currentPage = createWritableAtom<string>('dashboard');
+// #endregion currentPage
+
+// #region taskLogs [C:1] [TYPE Store]
+export const taskLogs = createWritableAtom<unknown[]>([]);
+// #endregion taskLogs
+
+// ═══════════════════════════════════════════════════════════════════
+// Fetch functions
+// ═══════════════════════════════════════════════════════════════════
+
+// #region fetchPlugins [C:2] [TYPE Function] [SEMANTICS plugins, fetch]
+// @BRIEF Fetches plugins from the API and updates the plugins store.
+// @PRE None.
+// @POST plugins store is updated with data from the API.
+// @SIDE_EFFECT Makes API call; updates reactive store on success.
+export async function fetchPlugins(): Promise<void> {
+	try {
+		const data = await api.getPlugins<Plugin[]>();
+		plugins.set(data);
+	} catch (error) {
+		console.error(`[stores.fetchPlugins] Error fetching plugins:`, error);
+	}
+}
+// #endregion fetchPlugins
+
+// #region fetchTasks [C:2] [TYPE Function] [SEMANTICS tasks, fetch]
+// @BRIEF Fetches tasks from the API and updates the tasks store.
+// @PRE None.
+// @POST tasks store is updated with data from the API.
+// @SIDE_EFFECT Makes API call; updates reactive store on success.
+export async function fetchTasks(): Promise<void> {
+	try {
+		const data = await api.getTasks<Task[]>();
+		tasks.set(data);
+	} catch (error) {
+		console.error(`[stores.fetchTasks] Error fetching tasks:`, error);
+	}
+}
+// #endregion fetchTasks
+// #endregion StoresModule
diff --git a/frontend/src/lib/stores.ts b/frontend/src/lib/stores.ts
deleted file mode 100644
index 68a547f3..00000000
--- a/frontend/src/lib/stores.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-// #region StoresModule [C:3] [TYPE Module] [SEMANTICS store, state, writable, plugins, tasks]
-// @BRIEF Global Svelte writable stores for plugins, tasks, and UI page state management.
-// @LAYER UI
-// @RELATION DEPENDS_ON -> [ApiModule]
-// @POST All stores are initialized with sensible defaults. fetchPlugins/fetchTasks populate on call.
-
-import { writable, type Writable } from 'svelte/store';
-import { api } from './api';
-import type { Plugin, Task } from '../types/models';
-
-// #region plugins [C:2] [TYPE Store] [SEMANTICS plugins, store]
-export const plugins: Writable<Plugin[]> = writable([]);
-// #endregion plugins
-
-// #region tasks [C:2] [TYPE Store] [SEMANTICS tasks, store]
-export const tasks: Writable<Task[]> = writable([]);
-// #endregion tasks
-
-// #region selectedPlugin [C:1] [TYPE Store]
-export const selectedPlugin: Writable<Plugin | null> = writable(null);
-// #endregion selectedPlugin
-
-// #region selectedTask [C:1] [TYPE Store]
-export const selectedTask: Writable<Task | null> = writable(null);
-// #endregion selectedTask
-
-// #region currentPage [C:1] [TYPE Store]
-export const currentPage: Writable<string> = writable('dashboard');
-// #endregion currentPage
-
-// #region taskLogs [C:1] [TYPE Store]
-export const taskLogs: Writable<unknown[]> = writable([]);
-// #endregion taskLogs
-
-// #region fetchPlugins [C:2] [TYPE Function] [SEMANTICS plugins, fetch]
-// @BRIEF Fetches plugins from the API and updates the plugins store.
-// @PRE None.
-// @POST plugins store is updated with data from the API.
-// @SIDE_EFFECT Makes API call; updates writable store on success.
-export async function fetchPlugins(): Promise<void> {
-	try {
-		const data = await api.getPlugins<Plugin[]>();
-		plugins.set(data);
-	} catch (error) {
-		console.error(`[stores.fetchPlugins] Error fetching plugins:`, error);
-	}
-}
-// #endregion fetchPlugins
-
-// #region fetchTasks [C:2] [TYPE Function] [SEMANTICS tasks, fetch]
-// @BRIEF Fetches tasks from the API and updates the tasks store.
-// @PRE None.
-// @POST tasks store is updated with data from the API.
-// @SIDE_EFFECT Makes API call; updates writable store on success.
-export async function fetchTasks(): Promise<void> {
-	try {
-		const data = await api.getTasks<Task[]>();
-		tasks.set(data);
-	} catch (error) {
-		console.error(`[stores.fetchTasks] Error fetching tasks:`, error);
-	}
-}
-// #endregion fetchTasks
-// #endregion StoresModule
diff --git a/frontend/src/lib/stores/__tests__/assistantChat.test.ts b/frontend/src/lib/stores/__tests__/assistantChat.test.ts
index ff6b167f..7aa7684e 100644
--- a/frontend/src/lib/stores/__tests__/assistantChat.test.ts
+++ b/frontend/src/lib/stores/__tests__/assistantChat.test.ts
@@ -13,14 +13,14 @@ import { describe, it, expect, beforeEach } from 'vitest';
 import { get } from 'svelte/store';
 import {
   assistantChatStore,
-  toggleAssistantChat,
-  openAssistantChat,
   closeAssistantChat,
-  setAssistantConversationId,
+  openAssistantChat,
   openAssistantChatWithContext,
+  setAssistantConversationId,
   setAssistantDatasetReviewSessionId,
   setAssistantFocusTarget,
-} from '../assistantChat.js';
+  toggleAssistantChat,
+} from '../assistantChat.svelte.js';
 
 // #region assistantChatStore_tests:Function [TYPE Function]
 // @RELATION BINDS_TO -> [EXT:frontend:AssistantChatTest]]
@@ -29,13 +29,7 @@ import {
 // @POST: Open/close/toggle/conversation transitions are validated.
 describe('assistantChatStore', () => {
   beforeEach(() => {
-    assistantChatStore.set({
-      isOpen: false,
-      conversationId: null,
-      datasetReviewSessionId: null,
-      seedMessage: '',
-      focusTarget: null,
-    });
+    closeAssistantChat();
   });
 
   it('should open assistant panel', () => {
diff --git a/frontend/src/lib/stores/__tests__/sidebar.test.ts b/frontend/src/lib/stores/__tests__/sidebar.test.ts
index 2086f653..4c2825b7 100644
--- a/frontend/src/lib/stores/__tests__/sidebar.test.ts
+++ b/frontend/src/lib/stores/__tests__/sidebar.test.ts
@@ -11,7 +11,7 @@
 
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { get } from 'svelte/store';
-import { sidebarStore, toggleSidebar, setActiveItem, setMobileOpen, closeMobile, toggleMobileSidebar } from '../sidebar.js';
+import { sidebarStore, toggleSidebar, setActiveItem, setMobileOpen, closeMobile, toggleMobileSidebar } from '../sidebar.svelte.js';
 
 // Mock the $app/environment module
 vi.mock('$app/environment', () => ({
@@ -20,12 +20,13 @@ vi.mock('$app/environment', () => ({
 
 describe('SidebarStore', () => {
   beforeEach(() => {
-    sidebarStore.set({
-      isExpanded: true,
-      activeCategory: 'dashboards',
-      activeItem: '/dashboards',
-      isMobileOpen: false
-    });
+    // Reset sidebar to default state via available functions
+    setActiveItem('dashboards', '/dashboards');
+    closeMobile();
+    // isExpanded defaults to true; if previous test toggled it, toggle back
+    if (sidebarStore.value && !sidebarStore.value.isExpanded) {
+      toggleSidebar();
+    }
   });
 
   // #region test_sidebar_initial_state:Function [TYPE Function]
diff --git a/frontend/src/lib/stores/__tests__/taskDrawer.test.ts b/frontend/src/lib/stores/__tests__/taskDrawer.test.ts
index 6e87b4eb..ff12cac5 100644
--- a/frontend/src/lib/stores/__tests__/taskDrawer.test.ts
+++ b/frontend/src/lib/stores/__tests__/taskDrawer.test.ts
@@ -11,7 +11,7 @@ import {
   closeDrawer,
   updateResourceTask,
   setTaskDrawerAutoOpenPreference
-} from '../taskDrawer.js';
+} from '../taskDrawer.svelte.js';
 
 describe('taskDrawerStore', () => {
   beforeEach(() => {
diff --git a/frontend/src/lib/stores/__tests__/test_activity.ts b/frontend/src/lib/stores/__tests__/test_activity.ts
index 726214eb..f828a3ca 100644
--- a/frontend/src/lib/stores/__tests__/test_activity.ts
+++ b/frontend/src/lib/stores/__tests__/test_activity.ts
@@ -16,7 +16,7 @@ describe('activity store', () => {
   });
 
   it('should have zero active count initially', async () => {
-    const { activityStore } = await import('../activity.js');
+    const { activityStore } = await import('../activity.svelte.js');
     
     let state = null;
     const unsubscribe = activityStore.subscribe(s => { state = s; });
@@ -27,8 +27,8 @@ describe('activity store', () => {
   });
 
   it('should count RUNNING tasks as active', async () => {
-    const { taskDrawerStore, updateResourceTask } = await import('../taskDrawer.js');
-    const { activityStore } = await import('../activity.js');
+    const { taskDrawerStore, updateResourceTask } = await import('../taskDrawer.svelte.js');
+    const { activityStore } = await import('../activity.svelte.js');
     
     // Add a running task
     updateResourceTask('dashboard-1', 'task-1', 'RUNNING');
@@ -41,8 +41,8 @@ describe('activity store', () => {
   });
 
   it('should not count SUCCESS tasks as active', async () => {
-    const { updateResourceTask } = await import('../taskDrawer.js');
-    const { activityStore } = await import('../activity.js');
+    const { updateResourceTask } = await import('../taskDrawer.svelte.js');
+    const { activityStore } = await import('../activity.svelte.js');
     
     // Add a success task
     updateResourceTask('dashboard-1', 'task-1', 'SUCCESS');
@@ -55,8 +55,8 @@ describe('activity store', () => {
   });
 
   it('should not count ERROR tasks as active', async () => {
-    const { updateResourceTask } = await import('../taskDrawer.js');
-    const { activityStore } = await import('../activity.js');
+    const { updateResourceTask } = await import('../taskDrawer.svelte.js');
+    const { activityStore } = await import('../activity.svelte.js');
     
     // Add an error task
     updateResourceTask('dashboard-1', 'task-1', 'ERROR');
@@ -69,8 +69,8 @@ describe('activity store', () => {
   });
 
   it('should not count WAITING_INPUT as active', async () => {
-    const { updateResourceTask } = await import('../taskDrawer.js');
-    const { activityStore } = await import('../activity.js');
+    const { updateResourceTask } = await import('../taskDrawer.svelte.js');
+    const { activityStore } = await import('../activity.svelte.js');
     
     // Add a waiting input task - should NOT be counted as active per contract
     // Only RUNNING tasks count as active
@@ -84,8 +84,8 @@ describe('activity store', () => {
   });
 
   it('should track multiple running tasks', async () => {
-    const { updateResourceTask } = await import('../taskDrawer.js');
-    const { activityStore } = await import('../activity.js');
+    const { updateResourceTask } = await import('../taskDrawer.svelte.js');
+    const { activityStore } = await import('../activity.svelte.js');
     
     // Add multiple running tasks
     updateResourceTask('dashboard-1', 'task-1', 'RUNNING');
@@ -100,8 +100,8 @@ describe('activity store', () => {
   });
 
   it('should return recent tasks', async () => {
-    const { updateResourceTask } = await import('../taskDrawer.js');
-    const { activityStore } = await import('../activity.js');
+    const { updateResourceTask } = await import('../taskDrawer.svelte.js');
+    const { activityStore } = await import('../activity.svelte.js');
     
     // Add multiple tasks
     updateResourceTask('dashboard-1', 'task-1', 'RUNNING');
diff --git a/frontend/src/lib/stores/__tests__/test_datasetReviewSession.ts b/frontend/src/lib/stores/__tests__/test_datasetReviewSession.ts
index 14ba7b5e..accf9ad0 100644
--- a/frontend/src/lib/stores/__tests__/test_datasetReviewSession.ts
+++ b/frontend/src/lib/stores/__tests__/test_datasetReviewSession.ts
@@ -17,7 +17,7 @@ describe('datasetReviewSession store', () => {
   });
 
   it('should have correct initial state', async () => {
-    const { datasetReviewSessionStore } = await import('../datasetReviewSession.js');
+    const { datasetReviewSessionStore } = await import('../datasetReviewSession.svelte.js');
     
     let state = null;
     const unsubscribe = datasetReviewSessionStore.subscribe(s => { state = s; });
@@ -31,7 +31,7 @@ describe('datasetReviewSession store', () => {
   });
 
   it('should set session data', async () => {
-    const { datasetReviewSessionStore, setSession } = await import('../datasetReviewSession.js');
+    const { datasetReviewSessionStore, setSession } = await import('../datasetReviewSession.svelte.js');
     const mockSession = { session_id: 's1', user_id: 'u1' };
     
     setSession(mockSession);
@@ -48,7 +48,7 @@ describe('datasetReviewSession store', () => {
   });
 
   it('should update loading state', async () => {
-    const { datasetReviewSessionStore, setLoading } = await import('../datasetReviewSession.js');
+    const { datasetReviewSessionStore, setLoading } = await import('../datasetReviewSession.svelte.js');
     
     setLoading(true);
     
@@ -60,7 +60,7 @@ describe('datasetReviewSession store', () => {
   });
 
   it('should set error state', async () => {
-    const { datasetReviewSessionStore, setError } = await import('../datasetReviewSession.js');
+    const { datasetReviewSessionStore, setError } = await import('../datasetReviewSession.svelte.js');
     
     setError('Failed to load');
     
@@ -73,7 +73,7 @@ describe('datasetReviewSession store', () => {
   });
 
   it('should mark as dirty', async () => {
-    const { datasetReviewSessionStore, setDirty } = await import('../datasetReviewSession.js');
+    const { datasetReviewSessionStore, setDirty } = await import('../datasetReviewSession.svelte.js');
     
     setDirty(true);
     
@@ -85,7 +85,7 @@ describe('datasetReviewSession store', () => {
   });
 
   it('should patch session data and mark as dirty', async () => {
-    const { datasetReviewSessionStore, setSession, patchSession } = await import('../datasetReviewSession.js');
+    const { datasetReviewSessionStore, setSession, patchSession } = await import('../datasetReviewSession.svelte.js');
     const mockSession = { session_id: 's1', readiness_state: 'empty' };
     
     setSession(mockSession);
@@ -100,7 +100,7 @@ describe('datasetReviewSession store', () => {
   });
 
   it('should reset session', async () => {
-    const { datasetReviewSessionStore, setSession, resetSession } = await import('../datasetReviewSession.js');
+    const { datasetReviewSessionStore, setSession, resetSession } = await import('../datasetReviewSession.svelte.js');
     setSession({ id: 's1' });
     
     resetSession();
diff --git a/frontend/src/lib/stores/__tests__/test_sidebar.ts b/frontend/src/lib/stores/__tests__/test_sidebar.ts
index 8636eefb..e81647f9 100644
--- a/frontend/src/lib/stores/__tests__/test_sidebar.ts
+++ b/frontend/src/lib/stores/__tests__/test_sidebar.ts
@@ -35,7 +35,7 @@ describe('sidebar store', () => {
   });
 
   it('should have correct initial state', async () => {
-    const { sidebarStore } = await import('../sidebar.js');
+    const { sidebarStore } = await import('../sidebar.svelte.js');
     
     let state = null;
     const unsubscribe = sidebarStore.subscribe(s => { state = s; });
@@ -48,7 +48,7 @@ describe('sidebar store', () => {
   });
 
   it('should toggle sidebar expansion', async () => {
-    const { sidebarStore, toggleSidebar } = await import('../sidebar.js');
+    const { sidebarStore, toggleSidebar } = await import('../sidebar.svelte.js');
     
     let state = null;
     const unsub1 = sidebarStore.subscribe(s => { state = s; });
@@ -64,7 +64,7 @@ describe('sidebar store', () => {
   });
 
   it('should set active category and item', async () => {
-    const { sidebarStore, setActiveItem } = await import('../sidebar.js');
+    const { sidebarStore, setActiveItem } = await import('../sidebar.svelte.js');
     
     setActiveItem('datasets', '/datasets');
     
@@ -77,7 +77,7 @@ describe('sidebar store', () => {
   });
 
   it('should set mobile open state', async () => {
-    const { sidebarStore, setMobileOpen } = await import('../sidebar.js');
+    const { sidebarStore, setMobileOpen } = await import('../sidebar.svelte.js');
     
     setMobileOpen(true);
     
@@ -88,11 +88,12 @@ describe('sidebar store', () => {
   });
 
   it('should close mobile sidebar', async () => {
-    const { sidebarStore, closeMobile } = await import('../sidebar.js');
+    const { sidebarStore, closeMobile, setMobileOpen } = await import('../sidebar.svelte.js');
     
     // First open mobile
+    setMobileOpen(true);
+    
     let state = null;
-    sidebarStore.update(s => ({ ...s, isMobileOpen: true }));
     const unsub1 = sidebarStore.subscribe(s => { state = s; });
     unsub1();
     expect(state.isMobileOpen).toBe(true);
@@ -105,7 +106,7 @@ describe('sidebar store', () => {
   });
 
   it('should toggle mobile sidebar', async () => {
-    const { sidebarStore, toggleMobileSidebar } = await import('../sidebar.js');
+    const { sidebarStore, toggleMobileSidebar } = await import('../sidebar.svelte.js');
     
     toggleMobileSidebar();
     
@@ -131,7 +132,7 @@ describe('sidebar store', () => {
     
     // Re-import with localStorage populated
     vi.resetModules();
-    const { sidebarStore } = await import('../sidebar.js');
+    const { sidebarStore } = await import('../sidebar.svelte.js');
     
     let state = null;
     const unsub = sidebarStore.subscribe(s => { state = s; });
diff --git a/frontend/src/lib/stores/__tests__/test_taskDrawer.ts b/frontend/src/lib/stores/__tests__/test_taskDrawer.ts
index 2bfd12e7..4ea85989 100644
--- a/frontend/src/lib/stores/__tests__/test_taskDrawer.ts
+++ b/frontend/src/lib/stores/__tests__/test_taskDrawer.ts
@@ -17,7 +17,7 @@ describe('taskDrawer store', () => {
   });
 
   it('should have correct initial state', async () => {
-    const { taskDrawerStore } = await import('../taskDrawer.js');
+    const { taskDrawerStore } = await import('../taskDrawer.svelte.js');
     
     let state = null;
     const unsubscribe = taskDrawerStore.subscribe(s => { state = s; });
@@ -29,7 +29,7 @@ describe('taskDrawer store', () => {
   });
 
   it('should open drawer for specific task', async () => {
-    const { taskDrawerStore, openDrawerForTask } = await import('../taskDrawer.js');
+    const { taskDrawerStore, openDrawerForTask } = await import('../taskDrawer.svelte.js');
     
     openDrawerForTask('task-123');
     
@@ -42,7 +42,7 @@ describe('taskDrawer store', () => {
   });
 
   it('should open drawer in list mode', async () => {
-    const { taskDrawerStore, openDrawer } = await import('../taskDrawer.js');
+    const { taskDrawerStore, openDrawer } = await import('../taskDrawer.svelte.js');
     
     openDrawer();
     
@@ -55,7 +55,7 @@ describe('taskDrawer store', () => {
   });
 
   it('should close drawer', async () => {
-    const { taskDrawerStore, openDrawerForTask, closeDrawer } = await import('../taskDrawer.js');
+    const { taskDrawerStore, openDrawerForTask, closeDrawer } = await import('../taskDrawer.svelte.js');
     
     // First open drawer
     openDrawerForTask('task-123');
@@ -74,7 +74,7 @@ describe('taskDrawer store', () => {
   });
 
   it('should update resource-task mapping', async () => {
-    const { taskDrawerStore, updateResourceTask } = await import('../taskDrawer.js');
+    const { taskDrawerStore, updateResourceTask } = await import('../taskDrawer.svelte.js');
     
     updateResourceTask('dashboard-1', 'task-123', 'RUNNING');
     
@@ -89,7 +89,7 @@ describe('taskDrawer store', () => {
   });
 
   it('should remove mapping on task completion (SUCCESS)', async () => {
-    const { taskDrawerStore, updateResourceTask } = await import('../taskDrawer.js');
+    const { taskDrawerStore, updateResourceTask } = await import('../taskDrawer.svelte.js');
     
     // First add a running task
     updateResourceTask('dashboard-1', 'task-123', 'RUNNING');
@@ -108,7 +108,7 @@ describe('taskDrawer store', () => {
   });
 
   it('should remove mapping on task error', async () => {
-    const { taskDrawerStore, updateResourceTask } = await import('../taskDrawer.js');
+    const { taskDrawerStore, updateResourceTask } = await import('../taskDrawer.svelte.js');
     
     updateResourceTask('dataset-1', 'task-456', 'RUNNING');
     
@@ -126,7 +126,7 @@ describe('taskDrawer store', () => {
   });
 
   it('should keep mapping for WAITING_INPUT status', async () => {
-    const { taskDrawerStore, updateResourceTask } = await import('../taskDrawer.js');
+    const { taskDrawerStore, updateResourceTask } = await import('../taskDrawer.svelte.js');
     
     updateResourceTask('dashboard-1', 'task-789', 'WAITING_INPUT');
     
@@ -141,7 +141,7 @@ describe('taskDrawer store', () => {
   });
 
   it('should get task for resource', async () => {
-    const { updateResourceTask, getTaskForResource } = await import('../taskDrawer.js');
+    const { updateResourceTask, getTaskForResource } = await import('../taskDrawer.svelte.js');
     
     updateResourceTask('dashboard-1', 'task-123', 'RUNNING');
     
@@ -153,7 +153,7 @@ describe('taskDrawer store', () => {
   });
 
   it('should return null for resource without task', async () => {
-    const { getTaskForResource } = await import('../taskDrawer.js');
+    const { getTaskForResource } = await import('../taskDrawer.svelte.js');
     
     const taskInfo = getTaskForResource('non-existent');
     expect(taskInfo).toBeNull();
diff --git a/frontend/src/lib/stores/activity.svelte.ts b/frontend/src/lib/stores/activity.svelte.ts
new file mode 100644
index 00000000..8f8b1db7
--- /dev/null
+++ b/frontend/src/lib/stores/activity.svelte.ts
@@ -0,0 +1,86 @@
+// #region ActivityStore [C:2] [TYPE Store] [SEMANTICS activity, store, derived, task-count, badge]
+// @BRIEF Derived store that counts active running tasks for navbar indicator badge.
+// @LAYER UI
+// @RELATION DEPENDS_ON -> [TaskDrawerStore]
+// @UX_STATE Idle -> No active tasks, badge hidden
+// @UX_STATE Active -> Badge shows count of running tasks
+// @RATIONALE Migrated from Svelte 4 derived() to Svelte 5 $derived rune.
+//            Subscribes to taskDrawerStore ($state-based) to keep _drawerState in sync.
+//            $derived auto-computes _activity from _drawerState.
+
+import { taskDrawerStore } from './taskDrawer.svelte.js';
+
+interface TaskInfo {
+	taskId: string;
+	status: string;
+}
+
+interface ResourceTaskMap {
+	[k: string]: TaskInfo;
+}
+
+interface DrawerState {
+	isOpen: boolean;
+	activeTaskId: string | null;
+	resourceTaskMap: ResourceTaskMap;
+}
+
+interface ActivityState {
+	activeCount: number;
+	recentTasks: { taskId: string; resourceId: string; status: string }[];
+}
+
+function computeActivity(drawer: DrawerState): ActivityState {
+	const activeCount = Object.values(drawer.resourceTaskMap)
+		.filter((t: TaskInfo) => t.status === 'RUNNING').length;
+
+	return {
+		activeCount,
+		recentTasks: Object.entries(drawer.resourceTaskMap)
+			.map(([resourceId, taskInfo]) => ({
+				taskId: taskInfo.taskId,
+				resourceId,
+				status: taskInfo.status,
+			}))
+			.slice(-5),
+	};
+}
+
+// Reactive state (Svelte 5 rune)
+let _drawerState: DrawerState = $state({
+	isOpen: false,
+	activeTaskId: null,
+	resourceTaskMap: {},
+});
+
+// Derived computation
+let _activity: ActivityState = $derived(computeActivity(_drawerState));
+
+// Subscriber list for backward compat with $activityStore syntax
+let _subscribers: Array<(value: ActivityState) => void> = [];
+
+function _notify(): void {
+	const current = _activity;
+	_subscribers.forEach((fn) => fn(current));
+}
+
+// Subscribe to taskDrawerStore to keep _drawerState in sync
+taskDrawerStore.subscribe((drawer: DrawerState) => {
+	_drawerState = drawer;
+	// $derived will auto-update _activity, but we need to notify subscribers
+	_notify();
+});
+
+export const activityStore = {
+	subscribe(run: (value: ActivityState) => void): () => void {
+		_subscribers.push(run);
+		run(_activity);
+		return () => {
+			_subscribers = _subscribers.filter((fn) => fn !== run);
+		};
+	},
+	get value(): ActivityState {
+		return _activity;
+	},
+};
+// #endregion ActivityStore
diff --git a/frontend/src/lib/stores/activity.ts b/frontend/src/lib/stores/activity.ts
deleted file mode 100644
index fa71539a..00000000
--- a/frontend/src/lib/stores/activity.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-// #region ActivityStore [C:2] [TYPE Store] [SEMANTICS activity, store, derived, task-count, badge]
-// @BRIEF Derived store that counts active running tasks for navbar indicator badge.
-// @LAYER UI
-// @RELATION DEPENDS_ON -> [TaskDrawerStore]
-// @UX_STATE Idle -> No active tasks, badge hidden
-// @UX_STATE Active -> Badge shows count of running tasks
-
-import { derived } from 'svelte/store';
-import { taskDrawerStore } from './taskDrawer';
-
-interface TaskInfo {
-	taskId: string;
-	status: string;
-}
-
-interface ResourceTaskMap {
-	[k: string]: TaskInfo;
-}
-
-interface DrawerState {
-	isOpen: boolean;
-	activeTaskId: string | null;
-	resourceTaskMap: ResourceTaskMap;
-}
-
-interface ActivityState {
-	activeCount: number;
-	recentTasks: { taskId: string; resourceId: string; status: string }[];
-}
-
-export const activityStore = derived<typeof taskDrawerStore, ActivityState>(
-	taskDrawerStore,
-	($drawer: DrawerState) => {
-		const activeCount = Object.values($drawer.resourceTaskMap)
-			.filter(t => t.status === 'RUNNING').length;
-
-		return {
-			activeCount,
-			recentTasks: Object.entries($drawer.resourceTaskMap)
-				.map(([resourceId, taskInfo]) => ({
-					taskId: taskInfo.taskId,
-					resourceId,
-					status: taskInfo.status,
-				}))
-				.slice(-5),
-		};
-	}
-);
-// #endregion ActivityStore
diff --git a/frontend/src/lib/stores/assistantChat.svelte.ts b/frontend/src/lib/stores/assistantChat.svelte.ts
new file mode 100644
index 00000000..8c75e6b8
--- /dev/null
+++ b/frontend/src/lib/stores/assistantChat.svelte.ts
@@ -0,0 +1,107 @@
+// #region AssistantChatStore [C:3] [TYPE Store] [SEMANTICS assistant, chat, store, session, panel]
+// @BRIEF Control assistant chat panel visibility, conversation binding, session context, and seeded prompts.
+// @LAYER UI
+// @RELATION BINDS_TO -> [AssistantChatPanel]
+// @UX_STATE Closed -> Chat panel hidden
+// @UX_STATE Open -> Chat panel visible with active conversation
+// @RATIONALE Migrated from Svelte 4 writable to Svelte 5 $state runes.
+//            Backward-compatible .subscribe() retained for $assistantChatStore syntax.
+
+interface AssistantChatState {
+	isOpen: boolean;
+	conversationId: string | null;
+	datasetReviewSessionId: string | null;
+	seedMessage: string;
+	focusTarget: string | null;
+}
+
+interface ChatContextPayload {
+	datasetReviewSessionId?: string | null;
+	seedMessage?: string;
+	focusTarget?: string | null;
+}
+
+const initialState: AssistantChatState = {
+	isOpen: false,
+	conversationId: null,
+	datasetReviewSessionId: null,
+	seedMessage: '',
+	focusTarget: null,
+};
+
+// Reactive state (Svelte 5 rune)
+let _state: AssistantChatState = $state(initialState);
+
+// Subscriber list for backward compat with $assistantChatStore syntax
+let _subscribers: Array<(value: AssistantChatState) => void> = [];
+
+function _notify(): void {
+	const current = _state;
+	_subscribers.forEach((fn) => fn(current));
+}
+
+export const assistantChatStore = {
+	subscribe(run: (value: AssistantChatState) => void): () => void {
+		_subscribers.push(run);
+		run(_state);
+		return () => {
+			_subscribers = _subscribers.filter((fn) => fn !== run);
+		};
+	},
+	get value(): AssistantChatState {
+		return _state;
+	},
+};
+
+export function toggleAssistantChat(): void {
+	_state = { ..._state, isOpen: !_state.isOpen };
+	_notify();
+}
+
+export function openAssistantChat(): void {
+	if (_state.isOpen) return;
+	_state = { ..._state, isOpen: true };
+	_notify();
+}
+
+export function openAssistantChatWithContext(context: ChatContextPayload = {}): void {
+	_state = {
+		..._state,
+		isOpen: true,
+		datasetReviewSessionId: context.datasetReviewSessionId ?? _state.datasetReviewSessionId ?? null,
+		seedMessage: context.seedMessage ?? '',
+		focusTarget: context.focusTarget ?? null,
+	};
+	_notify();
+}
+
+export function closeAssistantChat(): void {
+	if (!_state.isOpen) return;
+	_state = { ..._state, isOpen: false };
+	_notify();
+}
+
+export function setAssistantConversationId(conversationId: string): void {
+	if (_state.conversationId === conversationId) return;
+	_state = { ..._state, conversationId };
+	_notify();
+}
+
+export function setAssistantDatasetReviewSessionId(datasetReviewSessionId: string | null): void {
+	if (_state.datasetReviewSessionId === datasetReviewSessionId) return;
+	_state = { ..._state, datasetReviewSessionId };
+	_notify();
+}
+
+export function setAssistantSeedMessage(seedMessage: string): void {
+	if (_state.seedMessage === (seedMessage || '')) return;
+	_state = { ..._state, seedMessage: seedMessage || '' };
+	_notify();
+}
+
+export function setAssistantFocusTarget(focusTarget: string | null): void {
+	if (_state.focusTarget === (focusTarget || null)) return;
+	_state = { ..._state, focusTarget: focusTarget || null };
+	_notify();
+}
+// #endregion AssistantChatStore
diff --git a/frontend/src/lib/stores/assistantChat.ts b/frontend/src/lib/stores/assistantChat.ts
deleted file mode 100644
index b6a73912..00000000
--- a/frontend/src/lib/stores/assistantChat.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-// #region AssistantChatStore [C:3] [TYPE Store] [SEMANTICS assistant, chat, store, session, panel]
-// @BRIEF Control assistant chat panel visibility, conversation binding, session context, and seeded prompts.
-// @LAYER UI
-// @RELATION BINDS_TO -> [AssistantChatPanel]
-// @UX_STATE Closed -> Chat panel hidden
-// @UX_STATE Open -> Chat panel visible with active conversation
-
-import { writable, type Writable } from 'svelte/store';
-
-interface AssistantChatState {
-	isOpen: boolean;
-	conversationId: string | null;
-	datasetReviewSessionId: string | null;
-	seedMessage: string;
-	focusTarget: string | null;
-}
-
-interface ChatContextPayload {
-	datasetReviewSessionId?: string | null;
-	seedMessage?: string;
-	focusTarget?: string | null;
-}
-
-const initialState: AssistantChatState = {
-	isOpen: false,
-	conversationId: null,
-	datasetReviewSessionId: null,
-	seedMessage: '',
-	focusTarget: null,
-};
-
-export const assistantChatStore: Writable<AssistantChatState> = writable(initialState);
-
-export function toggleAssistantChat(): void {
-	assistantChatStore.update((state) => ({
-		...state,
-		isOpen: !state.isOpen,
-	}));
-}
-
-export function openAssistantChat(): void {
-	assistantChatStore.update((state) => ({
-		...state,
-		isOpen: true,
-	}));
-}
-
-export function openAssistantChatWithContext(context: ChatContextPayload = {}): void {
-	assistantChatStore.update((state) => ({
-		...state,
-		isOpen: true,
-		datasetReviewSessionId: context.datasetReviewSessionId ?? state.datasetReviewSessionId ?? null,
-		seedMessage: context.seedMessage ?? '',
-		focusTarget: context.focusTarget ?? null,
-	}));
-}
-
-export function closeAssistantChat(): void {
-	assistantChatStore.update((state) => ({
-		...state,
-		isOpen: false,
-	}));
-}
-
-export function setAssistantConversationId(conversationId: string): void {
-	assistantChatStore.update((state) => ({
-		...state,
-		conversationId,
-	}));
-}
-
-export function setAssistantDatasetReviewSessionId(datasetReviewSessionId: string | null): void {
-	assistantChatStore.update((state) => ({ ...state, datasetReviewSessionId }));
-}
-
-export function setAssistantSeedMessage(seedMessage: string): void {
-	assistantChatStore.update((state) => ({ ...state, seedMessage: seedMessage || '' }));
-}
-
-export function setAssistantFocusTarget(focusTarget: string | null): void {
-	assistantChatStore.update((state) => ({ ...state, focusTarget: focusTarget || null }));
-}
-// #endregion AssistantChatStore
diff --git a/frontend/src/lib/stores/datasetReviewSession.ts b/frontend/src/lib/stores/datasetReviewSession.svelte.ts
similarity index 64%
rename from frontend/src/lib/stores/datasetReviewSession.ts
rename to frontend/src/lib/stores/datasetReviewSession.svelte.ts
index e20f6b94..785c4683 100644
--- a/frontend/src/lib/stores/datasetReviewSession.ts
+++ b/frontend/src/lib/stores/datasetReviewSession.svelte.ts
@@ -10,8 +10,8 @@
 // @UX_STATE Saving -> Updates are being persisted
 // @UX_STATE Error -> Failed to load or update session
 // @DATA_CONTRACT Input[SessionDetail | Partial<SessionDetail> | boolean | string | null] -> Output[DatasetReviewSessionStoreState]
-
-import { writable, type Writable } from 'svelte/store';
+// @RATIONALE Migrated from Svelte 4 writable to Svelte 5 $state runes.
+//            Backward-compatible .subscribe() retained for $datasetReviewSessionStore syntax.
 
 export type UiPhase = 'empty' | 'importing' | 'review' | 'partial_preview' | 'launch_blocked' | 'run_ready' | 'run_in_progress';
 
@@ -33,44 +33,73 @@ const initialState: DatasetReviewSessionState = {
 	isDirty: false,
 };
 
-export const datasetReviewSessionStore: Writable<DatasetReviewSessionState> = writable(initialState);
+// Reactive state (Svelte 5 rune)
+let _state: DatasetReviewSessionState = $state(initialState);
+
+// Subscriber list for backward compat with $datasetReviewSessionStore syntax
+let _subscribers: Array<(value: DatasetReviewSessionState) => void> = [];
+
+function _notify(): void {
+	const current = _state;
+	_subscribers.forEach((fn) => fn(current));
+}
+
+export const datasetReviewSessionStore = {
+	subscribe(run: (value: DatasetReviewSessionState) => void): () => void {
+		_subscribers.push(run);
+		run(_state);
+		return () => {
+			_subscribers = _subscribers.filter((fn) => fn !== run);
+		};
+	},
+	get value(): DatasetReviewSessionState {
+		return _state;
+	},
+};
 
 export function setSession(session: Record<string, unknown>): void {
-	datasetReviewSessionStore.update((state) => ({
-		...state,
+	_state = {
+		..._state,
 		session,
 		isLoading: false,
 		error: null,
 		lastUpdated: new Date(),
 		isDirty: false,
-	}));
+	};
+	_notify();
 }
 
 export function setLoading(isLoading: boolean): void {
-	datasetReviewSessionStore.update((state) => ({ ...state, isLoading }));
+	if (_state.isLoading === isLoading) return;
+	_state = { ..._state, isLoading };
+	_notify();
 }
 
 export function setError(error: string | null): void {
-	datasetReviewSessionStore.update((state) => ({ ...state, error, isLoading: false, isSaving: false }));
+	if (_state.error === error && !_state.isLoading && !_state.isSaving) return;
+	_state = { ..._state, error, isLoading: false, isSaving: false };
+	_notify();
 }
 
 export function setDirty(isDirty: boolean): void {
-	datasetReviewSessionStore.update((state) => ({ ...state, isDirty }));
+	if (_state.isDirty === isDirty) return;
+	_state = { ..._state, isDirty };
+	_notify();
 }
 
 export function resetSession(): void {
-	datasetReviewSessionStore.set(initialState);
+	_state = { ...initialState };
+	_notify();
 }
 
 export function patchSession(patch: Record<string, unknown>): void {
-	datasetReviewSessionStore.update((state) => {
-		if (!state.session) return state;
-		return {
-			...state,
-			session: { ...state.session, ...patch },
-			isDirty: true,
-		};
-	});
+	if (!_state.session) return;
+	_state = {
+		..._state,
+		session: { ..._state.session, ...patch },
+		isDirty: true,
+	};
+	_notify();
 }
 
 export function getSessionUiPhase(session: Record<string, unknown> | null): UiPhase {
diff --git a/frontend/src/lib/stores/environmentContext.svelte.ts b/frontend/src/lib/stores/environmentContext.svelte.ts
new file mode 100644
index 00000000..0984476b
--- /dev/null
+++ b/frontend/src/lib/stores/environmentContext.svelte.ts
@@ -0,0 +1,197 @@
+// #region EnvironmentContextStore [C:3] [TYPE Store] [SEMANTICS environment, context, store, selector, filter]
+// @BRIEF Global selected environment context for navigation, safety cues, and environment-based filtering.
+// @LAYER UI
+// @RELATION DEPENDS_ON -> [ApiModule]
+// @RELATION BINDS_TO -> [SidebarStore]
+// @UX_STATE Loading -> Environments being fetched
+// @UX_STATE Ready -> Environment selector active with environment list
+// @UX_STATE Error -> Failed to load environments
+// @RATIONALE Migrated from Svelte 4 writable/derived to Svelte 5 $state/$derived runes.
+//            Backward-compatible .subscribe() retained for $environmentContextStore syntax.
+
+import { browser } from '$app/environment';
+import { api } from '$lib/api';
+
+interface Environment {
+	id: string;
+	name: string;
+	stage?: string;
+	is_production?: boolean;
+	[k: string]: unknown;
+}
+
+interface EnvironmentContextState {
+	environments: Environment[];
+	selectedEnvId: string;
+	isLoading: boolean;
+	isLoaded: boolean;
+	error: string | null;
+}
+
+const INITIAL_STATE: EnvironmentContextState = {
+	environments: [],
+	selectedEnvId: '',
+	isLoading: false,
+	isLoaded: false,
+	error: null,
+};
+
+const SELECTED_ENV_KEY = 'selected_env_id';
+
+// Reactive state (Svelte 5 rune)
+let _contextState: EnvironmentContextState = $state(INITIAL_STATE);
+
+// Derived values (Svelte 5 rune)
+let _selectedEnvironment: Environment | null = $derived(
+	_contextState.environments.find((env) => env.id === _contextState.selectedEnvId) || null,
+);
+
+let _isProductionContext: boolean = $derived(
+	String(_selectedEnvironment?.stage || '').toUpperCase() === 'PROD' ||
+		Boolean(_selectedEnvironment?.is_production),
+);
+
+// Subscriber lists for backward-compatible .subscribe()
+let _contextSubscribers: Array<(value: EnvironmentContextState) => void> = [];
+let _selectedEnvSubscribers: Array<(value: Environment | null) => void> = [];
+let _isProdSubscribers: Array<(value: boolean) => void> = [];
+
+function _notifyContext(): void {
+	const current = _contextState;
+	_contextSubscribers.forEach((fn) => fn(current));
+}
+
+function _notifySelected(): void {
+	const current = _selectedEnvironment;
+	_selectedEnvSubscribers.forEach((fn) => fn(current));
+}
+
+function _notifyIsProd(): void {
+	const current = _isProductionContext;
+	_isProdSubscribers.forEach((fn) => fn(current));
+}
+
+function _notifyAll(): void {
+	_notifyContext();
+	_notifySelected();
+	_notifyIsProd();
+}
+
+function getStoredSelectedEnvId(): string {
+	if (!browser) return '';
+	return localStorage.getItem(SELECTED_ENV_KEY) || '';
+}
+
+function persistSelectedEnvId(envId: string): void {
+	if (!browser) return;
+	if (!envId) {
+		localStorage.removeItem(SELECTED_ENV_KEY);
+		return;
+	}
+	localStorage.setItem(SELECTED_ENV_KEY, envId);
+}
+
+function hasAuthToken(): boolean {
+	if (!browser) return false;
+	return Boolean(localStorage.getItem('auth_token'));
+}
+
+function resolveSelectedEnvId(environments: Environment[], preferredEnvId: string): string {
+	if (!Array.isArray(environments) || environments.length === 0) return '';
+	if (preferredEnvId && environments.some((env) => env.id === preferredEnvId)) {
+		return preferredEnvId;
+	}
+	const stored = getStoredSelectedEnvId();
+	if (stored && environments.some((env) => env.id === stored)) {
+		return stored;
+	}
+	return environments[0].id;
+}
+
+function applySelectedEnvId(selectedEnvId: string): void {
+	const exists = _contextState.environments.some((env) => env.id === selectedEnvId);
+	const nextSelectedEnvId = exists ? selectedEnvId : '';
+	persistSelectedEnvId(nextSelectedEnvId);
+	_contextState = { ..._contextState, selectedEnvId: nextSelectedEnvId };
+	_notifyAll();
+}
+
+async function refreshEnvironmentContext(preferredEnvId: string = ''): Promise<void> {
+	if (!hasAuthToken()) {
+		_contextState = { ..._contextState, isLoading: false, isLoaded: false, error: null };
+		_notifyAll();
+		return;
+	}
+
+	_contextState = { ..._contextState, isLoading: true, error: null };
+	_notifyAll();
+	try {
+		const environments = await api.getEnvironmentsList<Environment[]>();
+		const current = _contextState.selectedEnvId;
+		const selectedEnvId = resolveSelectedEnvId(environments, preferredEnvId || current);
+		persistSelectedEnvId(selectedEnvId);
+		_contextState = { ..._contextState, environments, selectedEnvId, isLoading: false, isLoaded: true, error: null };
+		_notifyAll();
+	} catch (error: unknown) {
+		const apiError = error as { status?: number; message?: string };
+		if (apiError?.status === 401) {
+			_contextState = { ..._contextState, isLoading: false, isLoaded: false, error: null };
+			_notifyAll();
+			return;
+		}
+		console.error('[environmentContext] Failed to refresh environments', error);
+		_contextState = { ..._contextState, environments: [], selectedEnvId: '', isLoading: false, isLoaded: true, error: apiError?.message || 'Failed to load environments' };
+		_notifyAll();
+	}
+}
+
+async function initializeEnvironmentContext(): Promise<void> {
+	if (_contextState.isLoading || _contextState.isLoaded) return;
+	await refreshEnvironmentContext();
+}
+
+export const environmentContextStore = {
+	subscribe(run: (value: EnvironmentContextState) => void): () => void {
+		_contextSubscribers.push(run);
+		run(_contextState);
+		return () => {
+			_contextSubscribers = _contextSubscribers.filter((fn) => fn !== run);
+		};
+	},
+	get value(): EnvironmentContextState {
+		return _contextState;
+	},
+};
+
+export function setSelectedEnvironment(envId: string): void {
+	applySelectedEnvId(envId);
+}
+
+export { refreshEnvironmentContext, initializeEnvironmentContext };
+
+export const selectedEnvironmentStore = {
+	subscribe(run: (value: Environment | null) => void): () => void {
+		_selectedEnvSubscribers.push(run);
+		run(_selectedEnvironment);
+		return () => {
+			_selectedEnvSubscribers = _selectedEnvSubscribers.filter((fn) => fn !== run);
+		};
+	},
+	get value(): Environment | null {
+		return _selectedEnvironment;
+	},
+};
+
+export const isProductionContextStore = {
+	subscribe(run: (value: boolean) => void): () => void {
+		_isProdSubscribers.push(run);
+		run(_isProductionContext);
+		return () => {
+			_isProdSubscribers = _isProdSubscribers.filter((fn) => fn !== run);
+		};
+	},
+	get value(): boolean {
+		return _isProductionContext;
+	},
+};
+// #endregion EnvironmentContextStore
diff --git a/frontend/src/lib/stores/environmentContext.ts b/frontend/src/lib/stores/environmentContext.ts
deleted file mode 100644
index faa2377a..00000000
--- a/frontend/src/lib/stores/environmentContext.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-// #region EnvironmentContextStore [C:3] [TYPE Store] [SEMANTICS environment, context, store, selector, filter]
-// @BRIEF Global selected environment context for navigation, safety cues, and environment-based filtering.
-// @LAYER UI
-// @RELATION DEPENDS_ON -> [ApiModule]
-// @RELATION BINDS_TO -> [SidebarStore]
-// @UX_STATE Loading -> Environments being fetched
-// @UX_STATE Ready -> Environment selector active with environment list
-// @UX_STATE Error -> Failed to load environments
-
-import { derived, get, writable, type Writable } from 'svelte/store';
-import { browser } from '$app/environment';
-import { api } from '$lib/api';
-
-interface Environment {
-	id: string;
-	name: string;
-	stage?: string;
-	is_production?: boolean;
-	[k: string]: unknown;
-}
-
-interface EnvironmentContextState {
-	environments: Environment[];
-	selectedEnvId: string;
-	isLoading: boolean;
-	isLoaded: boolean;
-	error: string | null;
-}
-
-const INITIAL_STATE: EnvironmentContextState = {
-	environments: [],
-	selectedEnvId: '',
-	isLoading: false,
-	isLoaded: false,
-	error: null,
-};
-
-const SELECTED_ENV_KEY = 'selected_env_id';
-const contextStore: Writable<EnvironmentContextState> = writable(INITIAL_STATE);
-
-function getStoredSelectedEnvId(): string {
-	if (!browser) return '';
-	return localStorage.getItem(SELECTED_ENV_KEY) || '';
-}
-
-function persistSelectedEnvId(envId: string): void {
-	if (!browser) return;
-	if (!envId) {
-		localStorage.removeItem(SELECTED_ENV_KEY);
-		return;
-	}
-	localStorage.setItem(SELECTED_ENV_KEY, envId);
-}
-
-function hasAuthToken(): boolean {
-	if (!browser) return false;
-	return Boolean(localStorage.getItem('auth_token'));
-}
-
-function resolveSelectedEnvId(environments: Environment[], preferredEnvId: string): string {
-	if (!Array.isArray(environments) || environments.length === 0) return '';
-	if (preferredEnvId && environments.some((env) => env.id === preferredEnvId)) {
-		return preferredEnvId;
-	}
-	const stored = getStoredSelectedEnvId();
-	if (stored && environments.some((env) => env.id === stored)) {
-		return stored;
-	}
-	return environments[0].id;
-}
-
-function applySelectedEnvId(selectedEnvId: string): void {
-	contextStore.update((state) => {
-		const exists = state.environments.some((env) => env.id === selectedEnvId);
-		const nextSelectedEnvId = exists ? selectedEnvId : '';
-		persistSelectedEnvId(nextSelectedEnvId);
-		return { ...state, selectedEnvId: nextSelectedEnvId };
-	});
-}
-
-async function refreshEnvironmentContext(preferredEnvId: string = ''): Promise<void> {
-	if (!hasAuthToken()) {
-		contextStore.update((state) => ({
-			...state,
-			isLoading: false,
-			isLoaded: false,
-			error: null,
-		}));
-		return;
-	}
-
-	contextStore.update((state) => ({ ...state, isLoading: true, error: null }));
-	try {
-		const environments = await api.getEnvironmentsList<Environment[]>();
-		const current = get(contextStore).selectedEnvId;
-		const selectedEnvId = resolveSelectedEnvId(environments, preferredEnvId || current);
-		persistSelectedEnvId(selectedEnvId);
-		contextStore.update((state) => ({
-			...state,
-			environments,
-			selectedEnvId,
-			isLoading: false,
-			isLoaded: true,
-			error: null,
-		}));
-	} catch (error: unknown) {
-		const apiError = error as { status?: number; message?: string };
-		if (apiError?.status === 401) {
-			contextStore.update((state) => ({
-				...state,
-				isLoading: false,
-				isLoaded: false,
-				error: null,
-			}));
-			return;
-		}
-		console.error('[environmentContext] Failed to refresh environments', error);
-		contextStore.update((state) => ({
-			...state,
-			environments: [],
-			selectedEnvId: '',
-			isLoading: false,
-			isLoaded: true,
-			error: apiError?.message || 'Failed to load environments',
-		}));
-	}
-}
-
-async function initializeEnvironmentContext(): Promise<void> {
-	const state = get(contextStore);
-	if (state.isLoading || state.isLoaded) return;
-	await refreshEnvironmentContext();
-}
-
-export const environmentContextStore = {
-	subscribe: contextStore.subscribe,
-};
-
-export function setSelectedEnvironment(envId: string): void {
-	applySelectedEnvId(envId);
-}
-
-export { refreshEnvironmentContext, initializeEnvironmentContext };
-
-export const selectedEnvironmentStore = derived(
-	environmentContextStore,
-	($context: EnvironmentContextState) =>
-		$context.environments.find((env) => env.id === $context.selectedEnvId) || null,
-);
-
-export const isProductionContextStore = derived(
-	selectedEnvironmentStore,
-	($selectedEnvironment: Environment | null) =>
-		String($selectedEnvironment?.stage || '').toUpperCase() === 'PROD' ||
-		Boolean($selectedEnvironment?.is_production),
-);
-// #endregion EnvironmentContextStore
diff --git a/frontend/src/lib/stores/health.svelte.ts b/frontend/src/lib/stores/health.svelte.ts
new file mode 100644
index 00000000..16a86114
--- /dev/null
+++ b/frontend/src/lib/stores/health.svelte.ts
@@ -0,0 +1,121 @@
+// #region HealthStore [C:3] [TYPE Store] [SEMANTICS health, store, dashboard, summary, badge]
+// @BRIEF Manage dashboard health summary state and failing counts for UI badges.
+// @LAYER UI
+// @RELATION DEPENDS_ON -> [ApiModule]
+// @UX_STATE Loading -> Loading spinner, badges hidden
+// @UX_STATE Ready -> Health summary displayed with pass/warn/fail counts
+// @UX_STATE Error -> Error state with retry option
+// @RATIONALE Migrated from Svelte 4 writable/derived stores to Svelte 5 $state runes.
+//            Keeps .subscribe() for backward compat with fromStore() in Sidebar.svelte.
+//            Explicit _notify() instead of $effect to avoid effect_orphan error in test contexts.
+
+import { api } from '../api';
+
+interface HealthState {
+	items: unknown[];
+	pass_count: number;
+	warn_count: number;
+	fail_count: number;
+	unknown_count: number;
+	loading: boolean;
+	lastUpdated: Date | null;
+}
+
+// Module-level state atoms
+let _items = $state<unknown[]>([]);
+let _pass_count = $state(0);
+let _warn_count = $state(0);
+let _fail_count = $state(0);
+let _unknown_count = $state(0);
+let _loading = $state(false);
+let _lastUpdated = $state<Date | null>(null);
+
+// Subscriber sets for backward compat
+const _healthSubs = new Set<() => void>();
+const _failingCountSubs = new Set<(v: number) => void>();
+
+function _notifyHealth(): void {
+	_healthSubs.forEach(fn => fn());
+}
+
+function _notifyFailingCount(): void {
+	_failingCountSubs.forEach(fn => fn(_fail_count));
+}
+
+function _setStateFromSummary(summary: Partial<HealthState>): void {
+	_items = summary.items || [];
+	_pass_count = summary.pass_count || 0;
+	_warn_count = summary.warn_count || 0;
+	_fail_count = summary.fail_count || 0;
+	_unknown_count = summary.unknown_count || 0;
+	_loading = summary.loading ?? false;
+	if (summary.lastUpdated) _lastUpdated = summary.lastUpdated;
+}
+
+// Inflight request dedup
+let inflightRefresh: Promise<unknown> | null = null;
+let inflightEnvironmentId: string | null = null;
+let _isDisabled = false;
+
+async function refresh(environmentId: string | null = null): Promise<unknown> {
+	if (_isDisabled) return null;
+
+	const normalizedEnvironmentId = environmentId || null;
+	if (inflightRefresh && inflightEnvironmentId === normalizedEnvironmentId) {
+		return inflightRefresh;
+	}
+
+	_loading = true;
+	_notifyHealth();
+	inflightEnvironmentId = normalizedEnvironmentId;
+	inflightRefresh = (async () => {
+		try {
+			const summary = await api.getHealthSummary<HealthState>(environmentId ?? undefined);
+			_setStateFromSummary(summary);
+			_lastUpdated = new Date();
+			_notifyHealth();
+			_notifyFailingCount();
+			return summary;
+		} catch (error: unknown) {
+			const msg = (error as Error)?.message || String(error);
+			if (msg.includes('Health monitor feature is disabled') || msg.includes('404')) {
+				console.warn('[HealthStore] Health monitor feature is disabled — stopping polling');
+				_isDisabled = true;
+			}
+			console.error('[HealthStore] Failed to fetch health summary:', error);
+			_loading = false;
+			_notifyHealth();
+			return null;
+		} finally {
+			inflightRefresh = null;
+			inflightEnvironmentId = null;
+		}
+	})();
+	return inflightRefresh;
+}
+
+export const healthStore = {
+	get items() { return _items; },
+	get pass_count() { return _pass_count; },
+	get warn_count() { return _warn_count; },
+	get fail_count() { return _fail_count; },
+	get unknown_count() { return _unknown_count; },
+	get loading() { return _loading; },
+	get lastUpdated() { return _lastUpdated; },
+	subscribe(fn: () => void) {
+		fn();
+		_healthSubs.add(fn);
+		return () => _healthSubs.delete(fn);
+	},
+	refresh,
+};
+
+export const failingCount = {
+	get current() { return _fail_count; },
+	subscribe(fn: (v: number) => void) {
+		fn(_fail_count);
+		_failingCountSubs.add(fn);
+		return () => _failingCountSubs.delete(fn);
+	},
+};
+// #endregion HealthStore
diff --git a/frontend/src/lib/stores/health.ts b/frontend/src/lib/stores/health.ts
deleted file mode 100644
index 7c32774c..00000000
--- a/frontend/src/lib/stores/health.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-// #region HealthStore [C:3] [TYPE Store] [SEMANTICS health, store, dashboard, summary, badge]
-// @BRIEF Manage dashboard health summary state and failing counts for UI badges.
-// @LAYER UI
-// @RELATION DEPENDS_ON -> [ApiModule]
-// @UX_STATE Loading -> Loading spinner, badges hidden
-// @UX_STATE Ready -> Health summary displayed with pass/warn/fail counts
-// @UX_STATE Error -> Error state with retry option
-
-import { writable, derived, type Writable } from 'svelte/store';
-import { api } from '../api';
-
-interface HealthState {
-	items: unknown[];
-	pass_count: number;
-	warn_count: number;
-	fail_count: number;
-	unknown_count: number;
-	loading: boolean;
-	lastUpdated: Date | null;
-}
-
-function createHealthStore() {
-	const { subscribe, set, update } = writable<HealthState>({
-		items: [],
-		pass_count: 0,
-		warn_count: 0,
-		fail_count: 0,
-		unknown_count: 0,
-		loading: false,
-		lastUpdated: null,
-	});
-	let inflightRefresh: Promise<unknown> | null = null;
-	let inflightEnvironmentId: string | null = null;
-	let _isDisabled = false;
-
-	async function refresh(environmentId: string | null = null): Promise<unknown> {
-		if (_isDisabled) return null;
-
-		const normalizedEnvironmentId = environmentId || null;
-		if (inflightRefresh && inflightEnvironmentId === normalizedEnvironmentId) {
-			return inflightRefresh;
-		}
-
-		update(s => ({ ...s, loading: true }));
-		inflightEnvironmentId = normalizedEnvironmentId;
-		inflightRefresh = (async () => {
-			try {
-				const summary = await api.getHealthSummary<HealthState>(environmentId ?? undefined);
-				set({
-					...summary,
-					loading: false,
-					lastUpdated: new Date(),
-				});
-				return summary;
-			} catch (error: unknown) {
-				const msg = (error as Error)?.message || String(error);
-				if (msg.includes('Health monitor feature is disabled') || msg.includes('404')) {
-					console.warn('[HealthStore] Health monitor feature is disabled — stopping polling');
-					_isDisabled = true;
-				}
-				console.error('[HealthStore] Failed to fetch health summary:', error);
-				update(s => ({ ...s, loading: false }));
-				return null;
-			} finally {
-				inflightRefresh = null;
-				inflightEnvironmentId = null;
-			}
-		})();
-		return inflightRefresh;
-	}
-
-	return {
-		subscribe,
-		refresh,
-	};
-}
-
-export const healthStore = createHealthStore();
-
-export const failingCount = derived(healthStore, ($health: HealthState) => $health.fail_count);
-// #endregion HealthStore
diff --git a/frontend/src/lib/stores/maintenance.svelte.ts b/frontend/src/lib/stores/maintenance.svelte.ts
index d05a2cb1..56729dc4 100644
--- a/frontend/src/lib/stores/maintenance.svelte.ts
+++ b/frontend/src/lib/stores/maintenance.svelte.ts
@@ -12,7 +12,7 @@
 // @RATIONALE Replaced 30s polling with WebSocket for instant maintenance banner updates
 //            on the dashboard hub page and maintenance events page.
 
-import { addToast } from "$lib/toasts";
+import { addToast } from "$lib/toasts.svelte.js";
 import { getMaintenanceEventsWsUrl } from "$lib/api";
 import * as maintenanceApi from "$lib/api/maintenance";
 
diff --git a/frontend/src/lib/stores/sidebar.ts b/frontend/src/lib/stores/sidebar.svelte.ts
similarity index 52%
rename from frontend/src/lib/stores/sidebar.ts
rename to frontend/src/lib/stores/sidebar.svelte.ts
index 95828be2..2e5fe93e 100644
--- a/frontend/src/lib/stores/sidebar.ts
+++ b/frontend/src/lib/stores/sidebar.svelte.ts
@@ -5,8 +5,9 @@
 // @UX_STATE Idle -> Sidebar visible with current state
 // @UX_STATE Toggling -> Expand/collapse animation
 // @INVARIANT isExpanded state is always synced with localStorage
+// @RATIONALE Migrated from Svelte 4 writable to Svelte 5 $state runes.
+//            Backward-compatible .subscribe() retained for $sidebarStore syntax.
 
-import { writable, type Writable } from 'svelte/store';
 import { browser } from '$app/environment';
 
 interface SidebarState {
@@ -18,7 +19,7 @@ interface SidebarState {
 
 const STORAGE_KEY = 'sidebar_state';
 
-const loadState = (): SidebarState | null => {
+function loadState(): SidebarState | null {
 	if (!browser) return null;
 	try {
 		const saved = localStorage.getItem(STORAGE_KEY);
@@ -29,16 +30,16 @@ const loadState = (): SidebarState | null => {
 		console.error('[SidebarStore] Failed to load state:', e);
 	}
 	return null;
-};
+}
 
-const saveState = (state: SidebarState): void => {
+function saveState(state: SidebarState): void {
 	if (!browser) return;
 	try {
 		localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
 	} catch (e) {
 		console.error('[SidebarStore] Failed to save state:', e);
 	}
-};
+}
 
 const initialState: SidebarState = loadState() || {
 	isExpanded: true,
@@ -47,33 +48,57 @@ const initialState: SidebarState = loadState() || {
 	isMobileOpen: false,
 };
 
-export const sidebarStore: Writable<SidebarState> = writable(initialState);
+// Reactive state (Svelte 5 rune)
+let _state: SidebarState = $state(initialState);
+
+// Subscriber list for backward compat with $sidebarStore syntax
+let _subscribers: Array<(value: SidebarState) => void> = [];
+
+function _notify(): void {
+	const current = _state;
+	_subscribers.forEach((fn) => fn(current));
+}
+
+export const sidebarStore = {
+	subscribe(run: (value: SidebarState) => void): () => void {
+		_subscribers.push(run);
+		run(_state);
+		return () => {
+			_subscribers = _subscribers.filter((fn) => fn !== run);
+		};
+	},
+	get value(): SidebarState {
+		return _state;
+	},
+};
 
 export function toggleSidebar(): void {
-	sidebarStore.update((state: SidebarState) => {
-		const newState = { ...state, isExpanded: !state.isExpanded };
-		saveState(newState);
-		return newState;
-	});
+	_state = { ..._state, isExpanded: !_state.isExpanded };
+	saveState(_state);
+	_notify();
 }
 
 export function setActiveItem(category: string, item: string): void {
-	sidebarStore.update((state: SidebarState) => {
-		const newState = { ...state, activeCategory: category, activeItem: item };
-		saveState(newState);
-		return newState;
-	});
+	if (_state.activeCategory === category && _state.activeItem === item) return;
+	_state = { ..._state, activeCategory: category, activeItem: item };
+	saveState(_state);
+	_notify();
 }
 
 export function setMobileOpen(isOpen: boolean): void {
-	sidebarStore.update((state: SidebarState) => ({ ...state, isMobileOpen: isOpen }));
+	if (_state.isMobileOpen === isOpen) return;
+	_state = { ..._state, isMobileOpen: isOpen };
+	_notify();
 }
 
 export function closeMobile(): void {
-	sidebarStore.update((state: SidebarState) => ({ ...state, isMobileOpen: false }));
+	if (!_state.isMobileOpen) return;
+	_state = { ..._state, isMobileOpen: false };
+	_notify();
 }
 
 export function toggleMobileSidebar(): void {
-	sidebarStore.update((state: SidebarState) => ({ ...state, isMobileOpen: !state.isMobileOpen }));
+	_state = { ..._state, isMobileOpen: !_state.isMobileOpen };
+	_notify();
 }
 // #endregion SidebarStore
diff --git a/frontend/src/lib/stores/taskDrawer.ts b/frontend/src/lib/stores/taskDrawer.svelte.ts
similarity index 55%
rename from frontend/src/lib/stores/taskDrawer.ts
rename to frontend/src/lib/stores/taskDrawer.svelte.ts
index ea576fd7..2f20718a 100644
--- a/frontend/src/lib/stores/taskDrawer.ts
+++ b/frontend/src/lib/stores/taskDrawer.svelte.ts
@@ -4,8 +4,8 @@
 // @RELATION BINDS_TO -> [ActivityStore]
 // @UX_STATE Closed -> Drawer hidden, no active task
 // @UX_STATE Open -> Drawer visible with task logs or task list
-
-import { writable, type Writable } from 'svelte/store';
+// @RATIONALE Migrated from Svelte 4 writable to Svelte 5 $state runes.
+//            Backward-compatible .subscribe() retained for $taskDrawerStore syntax.
 
 interface TaskInfo {
 	taskId: string;
@@ -39,17 +39,45 @@ const initialState: TaskDrawerState = {
 	resourceTaskMap: {},
 };
 
-export const taskDrawerStore: Writable<TaskDrawerState> = writable(initialState);
+// Reactive state (Svelte 5 rune)
+let _state: TaskDrawerState = $state(initialState);
+
+// Subscriber list for backward compat with $taskDrawerStore syntax
+let _subscribers: Array<(value: TaskDrawerState) => void> = [];
+
+function _notify(): void {
+	const current = _state;
+	_subscribers.forEach((fn) => fn(current));
+}
+
+export const taskDrawerStore = {
+	subscribe(run: (value: TaskDrawerState) => void): () => void {
+		_subscribers.push(run);
+		run(_state);
+		return () => {
+			_subscribers = _subscribers.filter((fn) => fn !== run);
+		};
+	},
+	get value(): TaskDrawerState {
+		return _state;
+	},
+	set(newState: TaskDrawerState) {
+		_state = newState;
+		_notify();
+	},
+	update(fn: (state: TaskDrawerState) => TaskDrawerState) {
+		_state = fn(_state);
+		_notify();
+	},
+};
 
 export function openDrawerForTask(taskId: string): boolean {
 	if (!taskId) {
 		return false;
 	}
-	taskDrawerStore.update((state: TaskDrawerState) => ({
-		...state,
-		isOpen: true,
-		activeTaskId: taskId,
-	}));
+	if (_state.isOpen && _state.activeTaskId === taskId) return true; // Already open for this task
+	_state = { ..._state, isOpen: true, activeTaskId: taskId };
+	_notify();
 	return true;
 }
 
@@ -75,38 +103,29 @@ export function openDrawerForTaskIfPreferred(taskId: string): boolean {
 }
 
 export function openDrawer(): void {
-	taskDrawerStore.update((state: TaskDrawerState) => ({
-		...state,
-		isOpen: true,
-		activeTaskId: null,
-	}));
+	if (_state.isOpen && _state.activeTaskId === null) return;
+	_state = { ..._state, isOpen: true, activeTaskId: null };
+	_notify();
 }
 
 export function closeDrawer(): void {
-	taskDrawerStore.update((state: TaskDrawerState) => ({
-		...state,
-		isOpen: false,
-		activeTaskId: null,
-	}));
+	if (!_state.isOpen) return;
+	_state = { ..._state, isOpen: false, activeTaskId: null };
+	_notify();
 }
 
 export function updateResourceTask(resourceId: string, taskId: string, status: string): void {
-	taskDrawerStore.update((state: TaskDrawerState) => {
-		const newMap: ResourceTaskMap = { ...state.resourceTaskMap };
-		if (status === 'IDLE' || status === 'SUCCESS' || status === 'ERROR') {
-			delete newMap[resourceId];
-		} else {
-			newMap[resourceId] = { taskId, status };
-		}
-		return { ...state, resourceTaskMap: newMap };
-	});
+	const newMap: ResourceTaskMap = { ..._state.resourceTaskMap };
+	if (status === 'IDLE' || status === 'SUCCESS' || status === 'ERROR') {
+		delete newMap[resourceId];
+	} else {
+		newMap[resourceId] = { taskId, status };
+	}
+	_state = { ..._state, resourceTaskMap: newMap };
+	_notify();
 }
 
 export function getTaskForResource(resourceId: string): TaskInfo | null {
-	let result: TaskInfo | null = null;
-	taskDrawerStore.subscribe((state: TaskDrawerState) => {
-		result = state.resourceTaskMap[resourceId] || null;
-	})();
-	return result;
+	return _state.resourceTaskMap[resourceId] || null;
 }
 // #endregion TaskDrawerStore
diff --git a/frontend/src/lib/stores/translationRun.ts b/frontend/src/lib/stores/translationRun.svelte.ts
similarity index 77%
rename from frontend/src/lib/stores/translationRun.ts
rename to frontend/src/lib/stores/translationRun.svelte.ts
index 2a23505d..2f837bb8 100644
--- a/frontend/src/lib/stores/translationRun.ts
+++ b/frontend/src/lib/stores/translationRun.svelte.ts
@@ -10,8 +10,10 @@
 // @UX_FEEDBACK WebSocket provides real-time batch completion events during translate phase
 // @UX_FEEDBACK Polling provides structured status updates (insert phase, final counts)
 // @UX_RECOVERY WebSocket disconnect -> continues with polling only
+// @RATIONALE Migrated from Svelte 4 writable+derived to Svelte 5 $state+$derived runes.
+//            Backward-compatible .subscribe() retained for $translationRunStore syntax.
+//            WebSocket and polling logic preserved exactly.
 
-import { writable, derived, type Writable } from 'svelte/store';
 import { fetchRunStatus } from '$lib/api/translate';
 import { getTranslateRunWsUrl } from '$lib/api';
 
@@ -53,22 +55,53 @@ const initialState: TranslationRunState = {
 	isFullRun: false,
 };
 
-export const translationRunStore: Writable<TranslationRunState> = writable(initialState);
+// Reactive state (Svelte 5 rune)
+let _state: TranslationRunState = $state(initialState);
 
-export const isTranslationActive = derived(
-	translationRunStore,
-	($store: TranslationRunState) => $store.uxState === 'running' || $store.uxState === 'inserting',
+// Derived values (Svelte 5 rune)
+let _isTranslationActive = $derived(_state.uxState === 'running' || _state.uxState === 'inserting');
+let _isTranslationFinished = $derived(
+	_state.uxState === 'completed' ||
+	_state.uxState === 'partial' ||
+	_state.uxState === 'failed' ||
+	_state.uxState === 'insert_failed' ||
+	_state.uxState === 'cancelled',
 );
 
-export const isTranslationFinished = derived(
-	translationRunStore,
-	($store: TranslationRunState) =>
-		$store.uxState === 'completed' ||
-		$store.uxState === 'partial' ||
-		$store.uxState === 'failed' ||
-		$store.uxState === 'insert_failed' ||
-		$store.uxState === 'cancelled',
-);
+// Subscriber list for backward compat with $translationRunStore syntax
+let _subscribers: Array<(value: TranslationRunState) => void> = [];
+
+function _notify(): void {
+	const current = _state;
+	_subscribers.forEach((fn) => fn(current));
+}
+
+export const translationRunStore = {
+	subscribe(run: (value: TranslationRunState) => void): () => void {
+		_subscribers.push(run);
+		run(_state);
+		return () => {
+			_subscribers = _subscribers.filter((fn) => fn !== run);
+		};
+	},
+	get value(): TranslationRunState {
+		return _state;
+	},
+	set(newState: TranslationRunState) {
+		_state = newState;
+		_notify();
+	},
+	update(fn: (state: TranslationRunState) => TranslationRunState) {
+		_state = fn(_state);
+		_notify();
+	},
+	get isTranslationActive(): boolean {
+		return _isTranslationActive;
+	},
+	get isTranslationFinished(): boolean {
+		return _isTranslationFinished;
+	},
+};
 
 let _pollingInterval: ReturnType<typeof setInterval> | null = null;
 let _pollCount = 0;
@@ -85,13 +118,14 @@ export function startTranslationRun(runId: string, options: StartRunOptions = {}
 
 	stopTranslationRun();
 
-	translationRunStore.set({
+	_state = {
 		...initialState,
 		runId,
 		uxState: 'running',
 		jobId: options.jobId || null,
 		isFullRun: options.isFullRun || false,
-	});
+	};
+	_notify();
 
 	_onCompleteCallback = options.onComplete || null;
 
@@ -125,8 +159,8 @@ function _connectWebSocket(runId: string): void {
 							: s === 'CANCELLED' ? 'cancelled'
 							: null;
 				if (newUxState) {
-					translationRunStore.update((prev) => ({
-						...prev,
+					_state = {
+						..._state,
 						uxState: newUxState,
 						status: data,
 						totalRecords: total,
@@ -136,7 +170,8 @@ function _connectWebSocket(runId: string): void {
 						progressPct: pct,
 						insertStatus: insertS || null,
 						batchCount: (data.batch_count as number) || 0,
-					}));
+					};
+					_notify();
 					if (newUxState !== 'running' && newUxState !== 'inserting') {
 						if (_onCompleteCallback) _onCompleteCallback(data);
 					}
@@ -172,38 +207,39 @@ export function stopTranslationRun(): void {
 
 export function resetTranslationRun(): void {
 	stopTranslationRun();
-	translationRunStore.set(initialState);
+	_state = initialState;
+	_notify();
 	_onCompleteCallback = null;
 }
 
 export function updateTranslationRunState(state: Partial<TranslationRunState>): void {
-	translationRunStore.update((prev) => ({ ...prev, ...state }));
+	_state = { ..._state, ...state };
+	_notify();
 }
 
 async function pollStatus(): Promise<void> {
 	_pollCount++;
 	if (_pollCount > MAX_POLLS) {
 		stopTranslationRun();
-		translationRunStore.update((s) => ({ ...s, uxState: 'failed' }));
+		_state = { ..._state, uxState: 'failed' };
+		_notify();
 		if (_onCompleteCallback) _onCompleteCallback({ status: 'TIMEOUT', error_message: 'Translation run timed out' });
 		return;
 	}
 
-	let currentState: TranslationRunState | undefined;
-	translationRunStore.subscribe((s) => { currentState = s; })();
-	if (!currentState || !currentState.runId) {
+	if (!_state.runId) {
 		stopTranslationRun();
 		return;
 	}
 
 	try {
-		const data = (await fetchRunStatus(currentState.runId)) as Record<string, unknown>;
+		const data = (await fetchRunStatus(_state.runId)) as Record<string, unknown>;
 		if (!data) return;
 
 		const s = data?.status as string;
 		const insertS = data?.insert_status as string;
 
-		let newUxState: UxState = currentState.uxState;
+		let newUxState: UxState = _state.uxState;
 
 		if (s === 'PENDING' || s === 'RUNNING') {
 			newUxState = (insertS === 'started' || insertS === 'pending' || insertS === 'running') ? 'inserting' : 'running';
@@ -224,8 +260,8 @@ async function pollStatus(): Promise<void> {
 			? Math.round((((data.successful_records as number) + (data.failed_records as number) + (data.skipped_records as number)) / total) * 100)
 			: 0;
 
-		translationRunStore.update((prev) => ({
-			...prev,
+		_state = {
+			..._state,
 			uxState: newUxState,
 			status: data,
 			totalRecords: total,
@@ -235,7 +271,8 @@ async function pollStatus(): Promise<void> {
 			progressPct: pct,
 			insertStatus: (data?.insert_status as string) || null,
 			batchCount: (data?.batch_count as number) || 0,
-		}));
+		};
+		_notify();
 
 		if (newUxState !== 'running' && newUxState !== 'inserting') {
 			if (_onCompleteCallback) _onCompleteCallback(data);
diff --git a/frontend/src/lib/toasts.ts b/frontend/src/lib/toasts.svelte.ts
similarity index 73%
rename from frontend/src/lib/toasts.ts
rename to frontend/src/lib/toasts.svelte.ts
index c46d5a40..8fcb8940 100644
--- a/frontend/src/lib/toasts.ts
+++ b/frontend/src/lib/toasts.svelte.ts
@@ -1,13 +1,9 @@
 // #region ToastsModule [C:3] [TYPE Module] [SEMANTICS toast, notification, store, dedup, feedback]
-// @BRIEF Manages toast notifications using a Svelte writable store with deduplication and auto-removal.
+// @BRIEF Manages toast notifications using Svelte 5 runes ($state) with deduplication and auto-removal.
 // @RELATION BINDS_TO -> [ApiModule]
-
-// #region toasts_module:Module [TYPE Function]
-// @SEMANTICS: notification, toast, feedback, state
-// @PURPOSE: Manages toast notifications using a Svelte writable store.
-// @LAYER UI
-
-import { writable, type Writable } from 'svelte/store';
+// @RATIONALE Migrated from Svelte 4 writable store to Svelte 5 $state runes.
+//            Keeps .subscribe() for backward compat with $toasts template syntax in Toast.svelte.
+//            Explicit _notify() instead of $effect to avoid effect_orphan error in test contexts.
 
 export interface Toast {
 	id: string;
@@ -16,10 +12,21 @@ export interface Toast {
 	persistent: boolean;
 }
 
-// #region toasts:Data [TYPE Function]
-// @PURPOSE: Writable store containing the list of active toasts.
-export const toasts: Writable<Toast[]> = writable([]);
-// #endregion toasts:Data
+let _toasts = $state<Toast[]>([]);
+const _subs = new Set<(v: Toast[]) => void>();
+
+function _notify(): void {
+	const snapshot = _toasts;
+	_subs.forEach(fn => fn(snapshot));
+}
+
+export const toasts = {
+	subscribe(fn: (v: Toast[]) => void) {
+		fn(_toasts);
+		_subs.add(fn);
+		return () => { _subs.delete(fn); };
+	},
+};
 
 const TOAST_DEDUP_WINDOW_MS = 1200;
 const recentToastByKey = new Map<string, number>();
@@ -54,7 +61,8 @@ export function addToast(message: string, type: Toast['type'] = 'info', duration
 	const id = Math.random().toString(36).substr(2, 9);
 	const persistent = duration === 0;
 	console.log(`[toasts.addToast][Action] Adding toast context={{'id': '${id}', 'type': '${type}', 'message': '${message}', 'persistent': '${persistent}'}}`);
-	toasts.update((all: Toast[]) => [...all, { id, message, type, persistent }]);
+	_toasts = [..._toasts, { id, message, type, persistent }];
+	_notify();
 	if (!persistent) {
 		setTimeout(() => removeToast(id), duration);
 	}
@@ -68,8 +76,8 @@ export function addToast(message: string, type: Toast['type'] = 'info', duration
 // @PARAM: id (string) - The ID of the toast to remove.
 export function removeToast(id: string): void {
 	console.log(`[toasts.removeToast][Action] Removing toast context={{'id': '${id}'}}`);
-	toasts.update((all: Toast[]) => all.filter(t => t.id !== id));
+	_toasts = _toasts.filter(t => t.id !== id);
+	_notify();
 }
 // #endregion removeToast:Function
-// #endregion toasts_module:Module
 // #endregion ToastsModule
diff --git a/frontend/src/lib/ui/Button.svelte b/frontend/src/lib/ui/Button.svelte
index 5ad3df31..86e4f1ca 100644
--- a/frontend/src/lib/ui/Button.svelte
+++ b/frontend/src/lib/ui/Button.svelte
@@ -1,5 +1,5 @@
 <!-- #region Button [C:2] [TYPE Component] [SEMANTICS button, variant, loading, interactive, atom] -->
-<!-- @BRIEF Standardized button component with primary/secondary/danger/ghost variants and loading state. -->
+<!-- @BRIEF Standardized button component with primary/secondary/destructive/ghost variants and loading state. @variant "danger" is a deprecated alias for "destructive". -->
 <!-- @LAYER UI -->
 <!-- @UX_STATE Idle -> Button renders with requested variant, interactive. -->
 <!-- @UX_STATE Loading -> Spinner replaces leading area, interaction disabled. -->
@@ -43,7 +43,8 @@
   const variants = {
     primary: 'bg-primary text-white hover:bg-primary-hover focus-visible:ring-primary-ring',
     secondary: 'bg-secondary text-secondary-text hover:bg-secondary-hover focus-visible:ring-secondary-ring',
-    danger: 'bg-destructive text-white hover:bg-destructive-hover focus-visible:ring-destructive-ring',
+    destructive: 'bg-destructive text-white hover:bg-destructive-hover focus-visible:ring-destructive-ring',
+    danger: 'bg-destructive text-white hover:bg-destructive-hover focus-visible:ring-destructive-ring',   // DEPRECATED alias — prefer "destructive"
     ghost: 'bg-transparent hover:bg-ghost-hover text-ghost-text focus-visible:ring-ghost-ring',
   };
 
diff --git a/frontend/src/lib/ui/Card.svelte b/frontend/src/lib/ui/Card.svelte
index e3156236..0cb65522 100644
--- a/frontend/src/lib/ui/Card.svelte
+++ b/frontend/src/lib/ui/Card.svelte
@@ -39,13 +39,13 @@
 <!-- [SECTION: TEMPLATE] -->
 <div
   class={cn(
-    "rounded-lg border border-gray-200 bg-white text-gray-950 shadow-sm",
+    "rounded-lg border border-border bg-surface-card text-text shadow-sm",
     className,
   )}
   {...rest}
 >
   {#if title}
-    <div class="flex flex-col space-y-1.5 p-6 border-b border-gray-100">
+    <div class="flex flex-col space-y-1.5 p-6 border-b border-border">
       <h3 class="text-lg font-semibold leading-none tracking-tight">{title}</h3>
     </div>
   {/if}
diff --git a/frontend/src/lib/ui/Icon.svelte b/frontend/src/lib/ui/Icon.svelte
index 6d751ec0..84942b2f 100644
--- a/frontend/src/lib/ui/Icon.svelte
+++ b/frontend/src/lib/ui/Icon.svelte
@@ -15,7 +15,7 @@
   let {
     name = "circle",
     size = 20,
-    className = "",
+    class: className = "",
     strokeWidth = 1.9,
   } = $props();
 
diff --git a/frontend/src/lib/ui/Input.svelte b/frontend/src/lib/ui/Input.svelte
index 3171494e..76c72390 100644
--- a/frontend/src/lib/ui/Input.svelte
+++ b/frontend/src/lib/ui/Input.svelte
@@ -19,6 +19,9 @@
   import { cn } from "$lib/utils.js";
   // [/SECTION: IMPORTS]
 
+  // Deterministic ID counter (hydration-safe, no Math.random)
+  let _inputSeq = 0;
+
   // [SECTION: PROPS]
   let {
     label = "",
@@ -27,18 +30,18 @@
     error = "",
     disabled = false,
     type = "text",
+    id: externalId,
     class: className = "",
     ...rest
   } = $props();
-  // [/SECTION: PROPS]
 
-  let id = "input-" + Math.random().toString(36).substr(2, 9);
+  let id = externalId ?? `input-${++_inputSeq}`;
 </script>
 
 <!-- [SECTION: TEMPLATE] -->
 <div class="flex flex-col gap-1.5 w-full">
   {#if label}
-    <label for={id} class="text-sm font-medium text-gray-700">
+    <label for={id} class="text-sm font-medium text-text">
       {label}
     </label>
   {/if}
@@ -50,7 +53,7 @@
     {disabled}
     bind:value
     class={cn(
-      "flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-10 w-full rounded-md border border-border-strong bg-surface-card px-3 py-2 text-sm text-text ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-text-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       error ? "border-destructive" : "",
       className,
     )}
diff --git a/frontend/src/lib/ui/LanguageSwitcher.svelte b/frontend/src/lib/ui/LanguageSwitcher.svelte
index 98ac5f59..a8a8772c 100644
--- a/frontend/src/lib/ui/LanguageSwitcher.svelte
+++ b/frontend/src/lib/ui/LanguageSwitcher.svelte
@@ -14,7 +14,7 @@
 
 <script lang="ts">
   // [SECTION: IMPORTS]
-  import { locale } from "$lib/i18n";
+  import { locale } from "$lib/i18n/index.svelte.js";
   import Select from "./Select.svelte";
   // [/SECTION: IMPORTS]
 
diff --git a/frontend/src/lib/ui/PageHeader.svelte b/frontend/src/lib/ui/PageHeader.svelte
index 7d1b37f8..6497225c 100644
--- a/frontend/src/lib/ui/PageHeader.svelte
+++ b/frontend/src/lib/ui/PageHeader.svelte
@@ -33,7 +33,7 @@
   {...rest}
 >
   <div class="space-y-1">
-    <h1 class="text-3xl font-bold tracking-tight text-gray-900">{title}</h1>
+    <h1 class="text-3xl font-bold tracking-tight text-text">{title}</h1>
     {@render subtitle?.()}
   </div>
   <div class="flex items-center gap-4">
diff --git a/frontend/src/lib/ui/Select.svelte b/frontend/src/lib/ui/Select.svelte
index cb6b3dfb..79522312 100644
--- a/frontend/src/lib/ui/Select.svelte
+++ b/frontend/src/lib/ui/Select.svelte
@@ -16,24 +16,27 @@
   import { cn } from "$lib/utils.js";
   // [/SECTION: IMPORTS]
 
+  // Deterministic ID counter (hydration-safe, no Math.random)
+  let _selectSeq = 0;
+
   // [SECTION: PROPS]
   let {
     label = "",
     value = $bindable(""),
     options = [],
     disabled = false,
+    id: externalId,
     class: className = "",
     ...rest
   } = $props();
-  // [/SECTION: PROPS]
 
-  let id = "select-" + Math.random().toString(36).substr(2, 9);
+  let id = externalId ?? `select-${++_selectSeq}`;
 </script>
 
 <!-- [SECTION: TEMPLATE] -->
 <div class="flex flex-col gap-1.5 w-full">
   {#if label}
-    <label for={id} class="text-sm font-medium text-gray-700">
+    <label for={id} class="text-sm font-medium text-text">
       {label}
     </label>
   {/if}
@@ -43,7 +46,7 @@
     {disabled}
     bind:value
     class={cn(
-      "flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-10 w-full rounded-md border border-border-strong bg-surface-card px-3 py-2 text-sm text-text ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...rest}
diff --git a/frontend/src/lib/ui/index.ts b/frontend/src/lib/ui/index.ts
index 9c49c311..94a63c6b 100644
--- a/frontend/src/lib/ui/index.ts
+++ b/frontend/src/lib/ui/index.ts
@@ -12,6 +12,7 @@ export { default as Input } from './Input.svelte';
 export { default as Select } from './Select.svelte';
 export { default as Card } from './Card.svelte';
 export { default as PageHeader } from './PageHeader.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
 export { default as LanguageSwitcher } from './LanguageSwitcher.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as HelpTooltip } from './HelpTooltip.svelte';
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index a82e4f23..57841910 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -5,10 +5,27 @@
  * @PURPOSE: General utility functions (class merging)
  * @LAYER Infra
  * 
- * Merges class names into a single string.
+ * Merges Tailwind class names into a single string. Handles strings, falsy values,
+ * numbers, arrays, and nested structures — compatible with clsx/classnames convention.
  */
-export function cn(...inputs: (string | undefined | null | false)[]): string {
-	return inputs.filter(Boolean).join(" ");
+type ClassValue = string | number | boolean | undefined | null | ClassValue[] | Record<string, boolean | undefined | null>;
+
+function _flattenClassValue(input: ClassValue): string[] {
+  if (typeof input === "string" && input.length > 0) return [input];
+  if (typeof input === "number") return [String(input)];
+  if (typeof input === "boolean") return [];
+  if (input === null || input === undefined) return [];
+  if (Array.isArray(input)) return input.flatMap(_flattenClassValue);
+  if (typeof input === "object") {
+    return Object.entries(input)
+      .filter(([_, val]) => val)
+      .map(([key]) => key);
+  }
+  return [];
+}
+
+export function cn(...inputs: ClassValue[]): string {
+  return inputs.flatMap(_flattenClassValue).join(" ");
 }
 // #endregion Utils:Module
 
diff --git a/frontend/src/pages/Dashboard.svelte b/frontend/src/pages/Dashboard.svelte
index 6c13bb6d..2d2c4d04 100755
--- a/frontend/src/pages/Dashboard.svelte
+++ b/frontend/src/pages/Dashboard.svelte
@@ -17,7 +17,7 @@
 <script lang="ts">
     // [SECTION: IMPORTS]
     import { onMount } from 'svelte';
-    import { plugins, fetchPlugins, selectedPlugin } from '../lib/stores.js';
+    import { plugins, fetchPlugins, selectedPlugin } from '$lib/stores.svelte.js';
     // [/SECTION]
 
     // #region onMount:Function [TYPE Function]
diff --git a/frontend/src/pages/Settings.svelte b/frontend/src/pages/Settings.svelte
index 4f7e268f..40a85f15 100755
--- a/frontend/src/pages/Settings.svelte
+++ b/frontend/src/pages/Settings.svelte
@@ -20,8 +20,8 @@
     // [SECTION: IMPORTS]
     import { onMount } from 'svelte';
     import { getSettings, updateGlobalSettings, getEnvironments, addEnvironment, updateEnvironment, deleteEnvironment, testEnvironmentConnection, updateEnvironmentSchedule } from '../lib/api';
-    import { addToast } from '../lib/toasts';
-    import { t } from '../lib/i18n';
+    import { addToast } from '$lib/toasts.svelte.js';
+    import { t } from '$lib/i18n/index.svelte.js';
     // [/SECTION]
 
     let settings = {
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 09c3f88b..e62617c5 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -31,25 +31,19 @@
     import TaskDrawer from '$lib/components/layout/TaskDrawer.svelte';
     import AssistantChatPanel from '$lib/components/assistant/AssistantChatPanel.svelte';
     import TranslationRunGlobalIndicator from '$lib/components/translate/TranslationRunGlobalIndicator.svelte';
-    import { t } from '$lib/i18n';
+    import { t } from '$lib/i18n/index.svelte.js';
     import {
         isProductionContextStore,
         selectedEnvironmentStore
-    } from '$lib/stores/environmentContext.js';
+    } from '$lib/stores/environmentContext.svelte.js';
     import { page } from '$app/state';
-    import { sidebarStore } from '$lib/stores/sidebar.js';
-    import { fromStore } from 'svelte/store';
-
+    import { sidebarStore } from '$lib/stores/sidebar.svelte.js';
     let { children } = $props();
 
-    const sidebarState = fromStore(sidebarStore);
-    const productionContextState = fromStore(isProductionContextStore);
-    const selectedEnvironmentState = fromStore(selectedEnvironmentStore);
-
     let isLoginPage = $derived(page.url.pathname === '/login');
-    let isExpanded = $derived(sidebarState.current?.isExpanded || true);
-    let isProductionContext = $derived(productionContextState.current);
-    let selectedEnvironment = $derived(selectedEnvironmentState.current);
+    let isExpanded = $derived(sidebarStore.value?.isExpanded ?? true);
+    let isProductionContext = $derived(isProductionContextStore.value);
+    let selectedEnvironment = $derived(selectedEnvironmentStore.value);
 </script>
 
 <Toast />
diff --git a/frontend/src/routes/admin/roles/+page.svelte b/frontend/src/routes/admin/roles/+page.svelte
index 3a91237c..62ee4df5 100644
--- a/frontend/src/routes/admin/roles/+page.svelte
+++ b/frontend/src/routes/admin/roles/+page.svelte
@@ -16,7 +16,7 @@
 <script lang="ts">
   // [SECTION: IMPORTS]
   import { onMount } from 'svelte';
-  import { t } from '$lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
   import ProtectedRoute from '../../../components/auth/ProtectedRoute.svelte';
   import { adminService } from '../../../services/adminService';
   // [/SECTION: IMPORTS]
diff --git a/frontend/src/routes/admin/settings/+page.svelte b/frontend/src/routes/admin/settings/+page.svelte
index a94fba13..741d7964 100644
--- a/frontend/src/routes/admin/settings/+page.svelte
+++ b/frontend/src/routes/admin/settings/+page.svelte
@@ -16,7 +16,7 @@
 <script lang="ts">
   // [SECTION: IMPORTS]
   import { onMount } from 'svelte';
-  import { t } from '$lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
   import ProtectedRoute from '../../../components/auth/ProtectedRoute.svelte';
   import { adminService } from '../../../services/adminService';
   // [/SECTION: IMPORTS]
diff --git a/frontend/src/routes/admin/settings/llm/+page.svelte b/frontend/src/routes/admin/settings/llm/+page.svelte
index dde6ac28..b71b5b84 100644
--- a/frontend/src/routes/admin/settings/llm/+page.svelte
+++ b/frontend/src/routes/admin/settings/llm/+page.svelte
@@ -13,8 +13,8 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import ProviderConfig from '../../../../components/llm/ProviderConfig.svelte';
-  import { t } from '../../../../lib/i18n';
-  import { addToast } from '../../../../lib/toasts';
+  import { t } from '$lib/i18n/index.svelte.js';
+  import { addToast } from '$lib/toasts.svelte.js';
   import { requestApi } from '../../../../lib/api';
 
   let providers = [];
diff --git a/frontend/src/routes/admin/users/+page.svelte b/frontend/src/routes/admin/users/+page.svelte
index 05ffe062..ca5373ad 100644
--- a/frontend/src/routes/admin/users/+page.svelte
+++ b/frontend/src/routes/admin/users/+page.svelte
@@ -20,7 +20,7 @@
 <script lang="ts">
   // [SECTION: IMPORTS]
   import { onMount } from 'svelte';
-  import { t } from '$lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
   import ProtectedRoute from '../../../components/auth/ProtectedRoute.svelte';
   import { adminService } from '../../../services/adminService';
   // [/SECTION: IMPORTS]
diff --git a/frontend/src/routes/dashboards/+page.svelte b/frontend/src/routes/dashboards/+page.svelte
index 1a766c6a..9e5c7a9c 100644
--- a/frontend/src/routes/dashboards/+page.svelte
+++ b/frontend/src/routes/dashboards/+page.svelte
@@ -16,1347 +16,87 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { log } from "$lib/cot-logger";
-  import {
-    openDrawerForTask,
-    openDrawerForTaskIfPreferred,
-  } from "$lib/stores/taskDrawer.js";
+  import { openDrawerForTask, openDrawerForTaskIfPreferred } from "$lib/stores/taskDrawer.svelte.js";
   import { api } from "$lib/api.js";
   import { debounce } from "$lib/utils/debounce.js";
-  import { addToast } from "$lib/toasts";
+  import { addToast } from "$lib/toasts.svelte.js";
   import { gitService } from "../../services/gitService.js";
   import MappingTable from "../../components/MappingTable.svelte";
   import StartupEnvironmentWizard from "../../components/StartupEnvironmentWizard.svelte";
   import SearchableMultiSelect from "$lib/components/ui/SearchableMultiSelect.svelte";
   import DashboardMaintenanceBadge from "$lib/components/DashboardMaintenanceBadge.svelte";
   import { MigrationModel } from "../../lib/models/MigrationModel.svelte.ts";
-  import {
-    environmentContextStore,
-    initializeEnvironmentContext,
-    setSelectedEnvironment,
-  } from "$lib/stores/environmentContext.js";
+  import { environmentContextStore, initializeEnvironmentContext, setSelectedEnvironment } from "$lib/stores/environmentContext.svelte.js";
+  import { Button } from "$lib/ui";
+  import ColumnFilterPopover from "./ColumnFilterPopover.svelte";
+  import { formatDate, getPaginationRange, getSortIndicator } from "./dashboard-helpers.js";
+  import { DashboardHubModel } from "$lib/models/DashboardHubModel.svelte.ts";
 
-  // State
-  let selectedEnv = $state(null);
-  let allDashboards = $state([]);
-  let dashboards = $state([]);
-  let filteredDashboards = $state([]);
-  let isLoading = $state(true);
-  let error = $state(null);
+  const m = new DashboardHubModel();
+  const debouncedSearch = debounce((query: string) => { m.searchQuery = query.trim(); m.currentPage = 1; void m.loadDashboards(); }, 300);
 
-  // Pagination state
-  let currentPage = $state(1);
-  let pageSize = $state(10);
-  let totalPages = $state(1);
-  let total = $state(0);
-
-  // Selection state
-  let selectedIds = $state(new Set());
-  let isAllSelected = $state(false);
-  let isAllVisibleSelected = $state(false);
-
-  // Search state
-  let searchQuery = $state("");
-  let filterDashboardIds = $state([]); // IDs selected via SearchableMultiSelect
-  let searchableDashboardOptions = $state([]);
-  let searchableDashboardLoading = $state(false);
-  let sortColumn = $state("title");
-  let sortDirection = $state("asc");
-  let openFilterColumn = $state(null);
-  let filterDropdownPosition = $state({ left: 0, top: 0 });
-  let columnFilterSearch = $state({
-    title: "",
-    git_status: "",
-    validation_status: "",
-    changed_on: "",
-    actor: "",
-  });
-  let columnFilters = $state({
-    title: new Set(),
-    git_status: new Set(),
-    validation_status: new Set(),
-    changed_on: new Set(),
-    actor: new Set(),
-  });
-
-  // Validation status indicator state
-  let validationStatuses = $state({}); // dashboard_id -> {status, last_run_at, task_name, run_id, history}
-  let openValidationPopover = $state(null); // dashboard ID
-  let validationPopoverPosition = $state({ left: 0, top: 0 });
-  let validationStatusLoading = $state(false);
-
-  // Bulk action modal state
-  let showMigrateModal = $state(false);
-  let showBackupModal = $state(false);
-  let backupSchedule = $state("");
-  let isSubmittingBackup = $state(false);
-  let isEditingMappings = $state(false);
-
-  // Migration model (drives migration modal state and actions)
-  const bulkMigrateModel = new MigrationModel();
-
-  // Individual action dropdown state
-  let openActionDropdown = $state(null); // stores dashboard ID
-
-  // Git busy state
-  let gitBusyIds = $state(new Set());
-  let gitResolvedIds = $state(new Set());
-  let gitLoadingIds = $state(new Set());
-  let cachedGitConfigs = $state([]);
-  let dashboardsLoadSeq = $state(0);
-  let lastLoadedEnvId = $state(null);
-  let serverTotal = $state(0);
-  let serverTotalPages = $state(1);
-  let profileFilterOverrideShowAll = $state(false);
-  let effectiveProfileFilter = $state(null);
-
-  // Environment options - will be loaded from API
-  let environments = $derived($environmentContextStore?.environments || []);
-  let shouldShowEnvironmentWizard = $derived(
-    Boolean($environmentContextStore?.isLoaded) &&
-      !$environmentContextStore?.isLoading &&
-      !$environmentContextStore?.error &&
-      environments.length === 0,
-  );
-  let shouldShowEnvironmentZeroState = $derived(
-    shouldShowEnvironmentWizard && !isLoading && !error,
-  );
-
-  // Debounced search function
-  const debouncedSearch = debounce((query) => {
-    searchQuery = query;
-    currentPage = 1;
-    void loadDashboards();
-  }, 300);
-
-  // Load environments and dashboards on mount
   onMount(async () => {
     await initializeEnvironmentContext();
-    if (!selectedEnv && $environmentContextStore?.selectedEnvId) {
-      selectedEnv = $environmentContextStore.selectedEnvId;
-    }
+    if (!m.selectedEnv && $environmentContextStore?.selectedEnvId) m.selectedEnv = $environmentContextStore.selectedEnvId;
   });
 
-  // Handle document click to close dropdowns
-  function handleDocumentClick(event) {
-    if (!event.target.closest(".action-dropdown")) {
-      closeActionDropdown();
-    }
-    if (!event.target.closest(".column-filter")) {
-      openFilterColumn = null;
-    }
+  function handleDocumentClick(event: MouseEvent) {
+    if (!(event.target as HTMLElement).closest('.action-dropdown')) m.closeActionDropdown();
+    if (!(event.target as HTMLElement).closest('.column-filter')) m.openFilterColumn = null;
   }
+  if (typeof document !== 'undefined') document.addEventListener('click', handleDocumentClick);
 
-  // Add document click listener
-  if (typeof document !== "undefined") {
-    document.addEventListener("click", handleDocumentClick);
-  }
-
-  // Load dashboards from API
-  // #region DashboardHub.normalizeTaskStatus:Function [TYPE Function]
-  /**
-   * @PURPOSE: Normalize raw task status to stable lowercase token for UI.
-   * @PRE: status can be enum-like string or null.
-   * @POST: returns null or normalized token without enum namespace.
-   */
-  function normalizeTaskStatus(status) {
-    if (!status) return null;
-    const raw = String(status).trim();
-    const plain = raw.includes(".") ? raw.split(".").pop() : raw;
-    return plain ? plain.toLowerCase() : null;
-  }
-
-  // #endregion DashboardHub.normalizeTaskStatus:Function
-
-  // #region DashboardHub.normalizeValidationStatus:Function [TYPE Function]
-  /**
-   * @PURPOSE: Normalize validation status to pass/fail/warn/unknown.
-   * @PRE: status can be any scalar.
-   * @POST: returns one of pass|fail|warn|unknown.
-   */
-  function normalizeValidationStatus(status) {
-    if (!status) return "unknown";
-    const normalized = String(status).trim().toUpperCase();
-    if (normalized === "PASS") return "pass";
-    if (normalized === "FAIL") return "fail";
-    if (normalized === "WARN") return "warn";
-    return "unknown";
-  }
-
-  // #endregion DashboardHub.normalizeValidationStatus:Function
-
-  // #region DashboardHub.getValidationBadgeClass:Function [TYPE Function]
-  /**
-   * @PURPOSE: Map validation level to badge class tuple.
-   * @PRE: level in pass|fail|warn|unknown.
-   * @POST: returns deterministic tailwind class string.
-   */
-  function getValidationBadgeClass(level) {
-    if (level === "pass")
-      return "bg-emerald-100 text-emerald-700 border-emerald-200";
-    if (level === "fail") return "bg-rose-100 text-rose-700 border-rose-200";
-    if (level === "warn") return "bg-amber-100 text-amber-700 border-amber-200";
-    return "bg-slate-100 text-slate-700 border-slate-200";
-  }
-
-  // #endregion DashboardHub.getValidationBadgeClass:Function
-
-  // #region DashboardHub.getValidationLabel:Function [TYPE Function]
-  /**
-   * @PURPOSE: Map normalized validation level to compact UI label.
-   * @PRE: level in pass|fail|warn|unknown.
-   * @POST: returns uppercase status label.
-   */
-  function getValidationLabel(level) {
-    if (level === "pass") return "PASS";
-    if (level === "fail") return "FAIL";
-    if (level === "warn") return "WARN";
-    return "UNKNOWN";
-  }
-
-  // #endregion DashboardHub.getValidationLabel:Function
-
-  // #region DashboardHub.normalizeOwners:Function [TYPE Function]
-  /**
-   * @PURPOSE: Normalize owners payload to unique non-empty display labels.
-   * @PRE: owners can be null, list of strings, or list of user objects.
-   * @POST: Returns owner labels preserving source order.
-   */
-  function normalizeOwners(owners) {
-    if (!Array.isArray(owners)) return [];
-
-    const result = [];
-    for (const owner of owners) {
-      let label = null;
-      if (typeof owner === "string") {
-        const trimmed = owner.trim();
-        if (trimmed) label = trimmed;
-      } else if (owner && typeof owner === "object") {
-        const firstName =
-          typeof owner.first_name === "string" ? owner.first_name.trim() : "";
-        const lastName =
-          typeof owner.last_name === "string" ? owner.last_name.trim() : "";
-        const fullName = [firstName, lastName].filter(Boolean).join(" ");
-        label =
-          fullName ||
-          (typeof owner.full_name === "string" ? owner.full_name.trim() : "") ||
-          (typeof owner.username === "string" ? owner.username.trim() : "") ||
-          (typeof owner.email === "string" ? owner.email.trim() : "");
-      }
-
-      if (label && !result.includes(label)) {
-        result.push(label);
-      }
-    }
-
-    return result;
-  }
-
-  // #endregion DashboardHub.normalizeOwners:Function
-
-  // #region DashboardHub.loadDashboards:Function [TYPE Function]
-  /**
-   * @PURPOSE: Load full dashboard dataset for current environment and hydrate grid projection.
-   * @PRE: selectedEnv is not null.
-   * @POST: allDashboards, dashboards, pagination and selection state are synchronized.
-   * @UX_STATE: Loading -> true during request lifecycle.
-   * @UX_STATE: Error -> `error` populated when request fails.
-   */
-  async function loadDashboards() {
-    if (!selectedEnv) return;
-
-    const requestSeq = dashboardsLoadSeq + 1;
-    dashboardsLoadSeq = requestSeq;
-    isLoading = true;
-    error = null;
-    try {
-      const firstResponse = await api.getDashboards(selectedEnv, {
-        page: currentPage,
-        page_size: pageSize,
-        search: searchQuery.trim() || undefined,
-        page_context: "dashboards_main",
-        apply_profile_default: true,
-        override_show_all: profileFilterOverrideShowAll,
-        filters: {
-          title: Array.from(columnFilters.title || []),
-          git_status: Array.from(columnFilters.git_status || []),
-          changed_on: Array.from(columnFilters.changed_on || []),
-          actor: Array.from(columnFilters.actor || []),
-        },
-      });
-      if (requestSeq !== dashboardsLoadSeq) return;
-
-      const rawDashboards = firstResponse?.dashboards || [];
-      serverTotal = Number(firstResponse?.total || 0);
-      serverTotalPages = Math.max(1, Number(firstResponse?.total_pages || 1));
-      effectiveProfileFilter = firstResponse?.effective_profile_filter || null;
-      profileFilterOverrideShowAll = Boolean(
-        firstResponse?.effective_profile_filter?.override_show_all,
-      );
-
-      gitResolvedIds = new Set();
-      gitLoadingIds = new Set();
-
-      allDashboards = rawDashboards.map((d) => {
-        const owners = normalizeOwners(d.owners);
-        const hasGitStatus = !!d.git_status;
-        return {
-          id: d.id,
-          title: d.title,
-          slug: d.slug,
-          changedOn: d.last_modified || null,
-          changedOnLabel: formatDate(d.last_modified),
-          owners,
-          actorLabel: owners.length > 0 ? owners.join(", ") : "-",
-          git: hasGitStatus
-            ? {
-                status: d.git_status?.sync_status?.toLowerCase() || "no_repo",
-                branch: d.git_status?.branch || null,
-                hasRepo: d.git_status?.has_repo === true,
-                hasChangesForCommit:
-                  d.git_status?.has_changes_for_commit === true,
-              }
-            : {
-                status: "pending",
-                branch: null,
-                hasRepo: null,
-                hasChangesForCommit: false,
-              },
-          lastTask: d.last_task
-            ? {
-                status: normalizeTaskStatus(d.last_task.status),
-                validationStatus: normalizeValidationStatus(
-                  d.last_task.validation_status,
-                ),
-                id: d.last_task.task_id,
-              }
-            : null,
-          actions: ["migrate", "backup"],
-        };
-      });
-
-      selectedIds = new Set(
-        Array.from(selectedIds).filter((id) =>
-          allDashboards.some((dashboard) => dashboard.id === id),
-        ),
-      );
-      applyGridTransforms();
-      updateSelectionState();
-    } catch (err) {
-      if (requestSeq !== dashboardsLoadSeq) return;
-      error = err.message || $t.dashboard?.load_failed;
-      log('DashboardHub', 'EXPLORE', 'Load dashboards Error', {}, err?.message || 'unknown');
-    } finally {
-      if (requestSeq === dashboardsLoadSeq) {
-        isLoading = false;
-      }
-    }
-  }
-
-  // Handle search input
-  function handleSearch(event) {
-    debouncedSearch(event.target.value);
-  }
-
-  // Load dashboard options for SearchableMultiSelect
-  async function loadDashboardSearchOptions(query = '') {
-    if (!selectedEnv) return;
-    searchableDashboardLoading = true;
-    try {
-      const response = await api.getDashboards(selectedEnv, {
-        search: query || undefined,
-        page_size: 100,
-        page_context: 'other',
-        apply_profile_default: false,
-        override_show_all: true,
-      });
-      searchableDashboardOptions = (response?.dashboards || []).map((d) => ({
-        id: d.id,
-        name: d.title,
-        subtitle: d.slug || '',
-        hint: d.last_modified ? formatDate(d.last_modified) : '',
-      }));
-    } catch {
-      searchableDashboardOptions = [];
-    } finally {
-      searchableDashboardLoading = false;
-    }
-  }
-
-  // Handle page change
-  function handlePageChange(page) {
-    if (page === currentPage) return;
-    currentPage = page;
-    void loadDashboards();
-  }
-
-  // Handle page size change
-  function handlePageSizeChange(event) {
-    pageSize = parseInt(event.target.value);
-    currentPage = 1;
-    void loadDashboards();
-  }
-
-  // #region DashboardHub.handleTemporaryShowAll:Function [TYPE Function]
-  /**
-   * @PURPOSE: Temporarily disable profile-default dashboard filter for current page context.
-   * @PRE: Dashboards list is loaded in dashboards_main context.
-   * @POST: Next request is sent with override_show_all=true.
-   */
-  function handleTemporaryShowAll() {
-    if (profileFilterOverrideShowAll) return;
-    profileFilterOverrideShowAll = true;
-    currentPage = 1;
-    void loadDashboards();
-  }
-  // #endregion DashboardHub.handleTemporaryShowAll:Function
-
-  // #region DashboardHub.handleRestoreProfileFilter:Function [TYPE Function]
-  /**
-   * @PURPOSE: Re-enable persisted profile-default filtering after temporary override.
-   * @PRE: Current page is in override mode.
-   * @POST: Next request is sent with override_show_all=false.
-   */
-  function handleRestoreProfileFilter() {
-    if (!profileFilterOverrideShowAll) return;
-    profileFilterOverrideShowAll = false;
-    currentPage = 1;
-    void loadDashboards();
-  }
-  // #endregion DashboardHub.handleRestoreProfileFilter:Function
-
-  // Update selection state based on current selection
-  function updateSelectionState() {
-    const visibleCount = dashboards.length;
-    const totalCount = filteredDashboards.length;
-
-    isAllSelected = selectedIds.size === totalCount && totalCount > 0;
-    isAllVisibleSelected =
-      selectedIds.size === visibleCount && visibleCount > 0;
-  }
-
-  function replaceSelectedIds(nextSelection) {
-    selectedIds = nextSelection;
-    updateSelectionState();
-  }
-
-  function clearSelectedIds() {
-    replaceSelectedIds(new Set());
-  }
-
-  // Handle checkbox change for individual dashboard
-  function handleCheckboxChange(dashboard, event) {
-    const nextSelection = new Set(selectedIds);
-    if (event.target.checked) {
-      nextSelection.add(dashboard.id);
-    } else {
-      nextSelection.delete(dashboard.id);
-    }
-    replaceSelectedIds(nextSelection);
-  }
-
-  // Handle select all
-  function handleSelectAll() {
-    if (isAllSelected) {
-      clearSelectedIds();
-      return;
-    }
-    const nextSelection = new Set(selectedIds);
-    filteredDashboards.forEach((dashboard) => nextSelection.add(dashboard.id));
-    replaceSelectedIds(nextSelection);
-  }
-
-  // Handle select visible
-  function handleSelectVisible() {
-    const nextSelection = new Set(selectedIds);
-    if (isAllVisibleSelected) {
-      dashboards.forEach((dashboard) => nextSelection.delete(dashboard.id));
-    } else {
-      dashboards.forEach((dashboard) => nextSelection.add(dashboard.id));
-    }
-    replaceSelectedIds(nextSelection);
-  }
-
-  // #endregion DashboardHub.loadDashboards:Function
-
-  // #region DashboardHub.formatDate:Function [TYPE Function]
-  /**
-   * @PURPOSE: Convert ISO timestamp to locale date string.
-   * @PRE: value may be null or invalid date string.
-   * @POST: returns formatted date or "-".
-   */
-  function formatDate(value) {
-    if (!value) return "-";
-    const date = new Date(value);
-    if (Number.isNaN(date.getTime())) return "-";
-    return date.toLocaleDateString();
-  }
-
-  // #endregion DashboardHub.formatDate:Function
-
-  // #region DashboardHub.getGitSummaryLabel:Function [TYPE Function]
-  /**
-   * @PURPOSE: Compute stable text label for git state column.
-   * @PRE: dashboard has git projection fields.
-   * @POST: returns localized summary string.
-   */
-  function getGitSummaryLabel(dashboard) {
-    if (dashboard.git?.hasRepo === null) {
-      return $t.common?.loading || "Loading";
-    }
-    if (!dashboard.git?.hasRepo) {
-      return $t.dashboard?.status_no_repo || "No Repo";
-    }
-    return dashboard.git?.hasChangesForCommit
-      ? $t.dashboard?.status_changes || "Diff"
-      : $t.dashboard?.status_no_changes || "Synced";
-  }
-
-  // #endregion DashboardHub.getGitSummaryLabel:Function
-
-  // DashboardHub.getLlmSummaryLabel — REMOVED (replaced by validation status indicator + popover)
-  // Old function returned getValidationLabel(dashboard.lastTask?.validationStatus || "unknown")
-  // Replaced by inline validation dot per dashboard row with batch-fetched statuses.
-
-  // #region DashboardHub.getValidationLabelForCell:Function [TYPE Function]
-  function getValidationLabelForCell(dashboard) {
-    const vs = validationStatuses[dashboard.id];
-    if (!vs || !vs.status) return "unknown";
-    return String(vs.status).toLowerCase();
-  }
-  // #endregion DashboardHub.getValidationLabelForCell:Function
-
-  // #region DashboardHub.getColumnCellValue:Function [TYPE Function]
-  /**
-   * @PURPOSE: Resolve comparable/filterable display value for any grid column.
-   * @PRE: column belongs to filterable column set.
-   * @POST: returns non-empty scalar display value.
-   */
-  function getColumnCellValue(dashboard, column) {
-    if (column === "title") return dashboard.title || "-";
-    if (column === "git_status")
-      return String(dashboard.git?.status || "pending").toLowerCase();
-    if (column === "validation_status") return getValidationLabelForCell(dashboard);
-    if (column === "changed_on")
-      return dashboard.changedOn ? String(dashboard.changedOn).slice(0, 10) : "-";
-    if (column === "actor") return dashboard.actorLabel || "-";
-    return "-";
-  }
-
-  // #endregion DashboardHub.getColumnCellValue:Function
-
-  // #region DashboardHub.getFilterOptions:Function [TYPE Function]
-  /**
-   * @PURPOSE: Build unique sorted value list for a column filter dropdown.
-   * @PRE: allDashboards is hydrated.
-   * @POST: returns de-duplicated sorted options.
-   */
-  function getFilterOptions(column) {
-    const options = allDashboards
-      .map((dashboard) => getColumnCellValue(dashboard, column))
-      .filter((value) => Boolean(value));
-    return Array.from(new Set(options)).sort((a, b) =>
-      a.localeCompare(b, "ru"),
-    );
-  }
-
-  // #endregion DashboardHub.getFilterOptions:Function
-
-  // #region DashboardHub.getVisibleFilterOptions:Function [TYPE Function]
-  /**
-   * @PURPOSE: Apply in-dropdown search over full filter options.
-   * @PRE: columnFilterSearch contains search token for column.
-   * @POST: returns subset for current filter popover list.
-   */
-  function getVisibleFilterOptions(column) {
-    const searchText = (columnFilterSearch[column] || "").toLowerCase();
-    return getFilterOptions(column).filter((value) =>
-      value.toLowerCase().includes(searchText),
-    );
-  }
-
-  // #endregion DashboardHub.getVisibleFilterOptions:Function
-
-  // #region DashboardHub.toggleFilterDropdown:Function [TYPE Function]
-  /**
-   * @PURPOSE: Toggle active column filter popover.
-   * @PRE: column is valid filter key.
-   * @POST: openFilterColumn updated.
-   */
-  function toggleFilterDropdown(column, event, panelWidth = 256) {
-    event?.stopPropagation();
-    if (openFilterColumn === column) {
-      openFilterColumn = null;
-      return;
-    }
-    const trigger = event?.currentTarget;
-    if (trigger?.getBoundingClientRect) {
-      const rect = trigger.getBoundingClientRect();
-      const viewportWidth =
-        typeof window !== "undefined" ? window.innerWidth : 1920;
-      const safeLeft = Math.max(
-        8,
-        Math.min(rect.left, viewportWidth - panelWidth - 8),
-      );
-      filterDropdownPosition = {
-        left: safeLeft,
-        top: rect.bottom + 8,
-      };
-    }
-    openFilterColumn = column;
-  }
-
-  // #endregion DashboardHub.toggleFilterDropdown:Function
-
-  // #region DashboardHub.toggleFilterValue:Function [TYPE Function]
-  /**
-   * @PURPOSE: Add/remove specific filter value and reapply projection.
-   * @PRE: value comes from option list of the same column.
-   * @POST: columnFilters updated and grid reprojected from page 1.
-   */
-  function toggleFilterValue(column, value, checked) {
-    const next = new Set(columnFilters[column]);
-    if (checked) {
-      next.add(value);
-    } else {
-      next.delete(value);
-    }
-    columnFilters = { ...columnFilters, [column]: next };
-    currentPage = 1;
-    void loadDashboards();
-  }
-
-  // #endregion DashboardHub.toggleFilterValue:Function
-
-  // #region DashboardHub.clearColumnFilter:Function [TYPE Function]
-  /**
-   * @PURPOSE: Reset selected values for one column.
-   * @PRE: column is valid filter key.
-   * @POST: filter cleared and projection refreshed.
-   */
-  function clearColumnFilter(column) {
-    columnFilters = { ...columnFilters, [column]: new Set() };
-    currentPage = 1;
-    void loadDashboards();
-  }
-
-  // #endregion DashboardHub.clearColumnFilter:Function
-
-  // #region DashboardHub.selectAllColumnFilterValues:Function [TYPE Function]
-  /**
-   * @PURPOSE: Select all currently visible values in filter popover.
-   * @PRE: visible options computed for current search token.
-   * @POST: column filter equals current visible option set.
-   */
-  function selectAllColumnFilterValues(column) {
-    columnFilters = {
-      ...columnFilters,
-      [column]: new Set(getVisibleFilterOptions(column)),
-    };
-    currentPage = 1;
-    void loadDashboards();
-  }
-
-  // #endregion DashboardHub.selectAllColumnFilterValues:Function
-
-  // #region DashboardHub.updateColumnFilterSearch:Function [TYPE Function]
-  /**
-   * @PURPOSE: Update local search token for one filter popover.
-   * @PRE: value is text from input.
-   * @POST: columnFilterSearch updated immutably.
-   */
-  function updateColumnFilterSearch(column, value) {
-    columnFilterSearch = { ...columnFilterSearch, [column]: value };
-  }
-
-  // #endregion DashboardHub.updateColumnFilterSearch:Function
-
-  // #region DashboardHub.hasColumnFilter:Function [TYPE Function]
-  /**
-   * @PURPOSE: Determine if column has active selected values.
-   * @PRE: column is valid filter key.
-   * @POST: returns boolean activation marker.
-   */
-  function hasColumnFilter(column) {
-    return columnFilters[column]?.size > 0;
-  }
-
-  // #endregion DashboardHub.hasColumnFilter:Function
-
-  // #region DashboardHub.doesDashboardPassColumnFilters:Function [TYPE Function]
-  /**
-   * @PURPOSE: Evaluate dashboard row against all active column filters.
-   * @PRE: dashboard contains projected values for each filterable column.
-   * @POST: returns true only when row matches every active filter.
-   */
-  function doesDashboardPassColumnFilters(dashboard) {
-    const columns = Object.keys(columnFilters);
-    for (const column of columns) {
-      const values = columnFilters[column];
-      if (values.size === 0) continue;
-      const dashboardValue = getColumnCellValue(dashboard, column);
-      if (!values.has(dashboardValue)) return false;
-    }
-    return true;
-  }
-
-  // #endregion DashboardHub.doesDashboardPassColumnFilters:Function
-
-  // #region DashboardHub.getSortValue:Function [TYPE Function]
-  /**
-   * @PURPOSE: Compute stable comparable sort key for chosen column.
-   * @PRE: column belongs to sortable set.
-   * @POST: returns string/number key suitable for deterministic comparison.
-   */
-  function getSortValue(dashboard, column) {
-    if (column === "title") return (dashboard.title || "").toLowerCase();
-    if (column === "git_status")
-      return (getGitSummaryLabel(dashboard) || "").toLowerCase();
-    if (column === "validation_status")
-      return (getValidationLabelForCell(dashboard) || "").toLowerCase();
-    if (column === "changed_on")
-      return dashboard.changedOn ? new Date(dashboard.changedOn).getTime() : 0;
-    if (column === "actor") return (dashboard.actorLabel || "").toLowerCase();
-    return "";
-  }
-
-  // #endregion DashboardHub.getSortValue:Function
-
-  // #region DashboardHub.handleSort:Function [TYPE Function]
-  /**
-   * @PURPOSE: Toggle or switch sort order and reapply grid projection.
-   * @PRE: column belongs to sortable set.
-   * @POST: sortColumn/sortDirection updated and page reset to 1.
-   */
-  function handleSort(column) {
-    if (sortColumn === column) {
-      sortDirection = sortDirection === "asc" ? "desc" : "asc";
-    } else {
-      sortColumn = column;
-      sortDirection = "asc";
-    }
-    currentPage = 1;
-    applyGridTransforms();
-  }
-
-  // #endregion DashboardHub.handleSort:Function
-
-  // #region DashboardHub.getSortIndicator:Function [TYPE Function]
-  /**
-   * @PURPOSE: Return visual indicator for active/inactive sort header.
-   * @PRE: column belongs to sortable set.
-   * @POST: returns one of ↕ | ↑ | ↓.
-   */
-  function getSortIndicator(column) {
-    if (sortColumn !== column) return "↕";
-    return sortDirection === "asc" ? "↑" : "↓";
-  }
-
-  // #endregion DashboardHub.getSortIndicator:Function
-
-  // #region DashboardHub.applyGridTransforms:Function [TYPE Function]
-  /**
-   * @PURPOSE: Apply search + column filters + sort + pagination to grid data.
-   * @PRE: allDashboards is current source collection.
-   * @POST: filteredDashboards/dashboards/total/totalPages are synchronized.
-   * @UX_STATE: Loaded -> visible rows reflect all active controls deterministically.
-   */
-  function applyGridTransforms() {
-    let nextFiltered = allDashboards;
-    // Client-side multi-select filter (SearchableMultiSelect)
-    if (filterDashboardIds.length > 0) {
-      nextFiltered = nextFiltered.filter((d) =>
-        filterDashboardIds.includes(d.id),
-      );
-    }
-
-    nextFiltered.sort((a, b) => {
-      const aValue = getSortValue(a, sortColumn);
-      const bValue = getSortValue(b, sortColumn);
-      if (aValue < bValue) return sortDirection === "asc" ? -1 : 1;
-      if (aValue > bValue) return sortDirection === "asc" ? 1 : -1;
-      return 0;
-    });
-
-    filteredDashboards = nextFiltered;
-    dashboards = filteredDashboards;
-    total = serverTotal;
-    totalPages = serverTotalPages;
-    updateSelectionState();
-    void hydrateVisibleGitStatusesBatch();
-    void fetchValidationStatuses();
-  }
-  // #endregion DashboardHub.applyGridTransforms:Function
-
-  // #region DashboardHub.fetchValidationStatuses:Function [TYPE Function]
-  /**
-   * @PURPOSE: Batch-fetch latest validation status for visible dashboards.
-   * @UX_STATE: Loading -> validationStatusLoading = true during fetch.
-   * @UX_STATE: Loaded -> validationStatuses populated with status per dashboard_id.
-   * @UX_FEEDBACK: Gracefully handles missing batch endpoint (no-op on 404/error).
-   */
-  async function fetchValidationStatuses() {
-    if (!selectedEnv || dashboards.length === 0) return;
-    validationStatusLoading = true;
-    try {
-      const ids = dashboards.map((d) => d.id).filter(Boolean);
-      if (ids.length === 0) return;
-      const result = await api.getValidationStatusBatch(selectedEnv, ids.join(","));
-      if (result && typeof result === "object") {
-        validationStatuses = result;
-      }
-    } catch {
-      // Batch endpoint may not exist yet — graceful no-op
-    } finally {
-      validationStatusLoading = false;
-    }
-  }
-  // #endregion DashboardHub.fetchValidationStatuses:Function
-
-  // #region DashboardHub.toggleValidationPopover:Function [TYPE Function]
-  /**
-   * @PURPOSE: Toggle validation status popover for a dashboard row.
-   * @UX_STATE: Clicked -> Popover with recent runs visible.
-   */
-  function toggleValidationPopover(dashboardId, event) {
-    event.stopPropagation();
-    if (openValidationPopover === dashboardId) {
-      openValidationPopover = null;
-      return;
-    }
-    const trigger = event.currentTarget;
-    if (trigger?.getBoundingClientRect) {
-      const rect = trigger.getBoundingClientRect();
-      const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1920;
-      const popoverWidth = 320;
-      validationPopoverPosition = {
-        left: Math.max(8, Math.min(rect.left, viewportWidth - popoverWidth - 8)),
-        top: rect.bottom + 8,
-      };
-    }
-    openValidationPopover = dashboardId;
-  }
-  // #endregion DashboardHub.toggleValidationPopover:Function
-
-  // Toggle action dropdown
-  function toggleActionDropdown(dashboardId, event) {
-    event.stopPropagation();
-    openActionDropdown =
-      openActionDropdown === dashboardId ? null : dashboardId;
-  }
-
-  // Close action dropdown when clicking outside
-  function closeActionDropdown() {
-    openActionDropdown = null;
-  }
-
-  // Handle action click
-  async function handleAction(dashboard, action) {
-    log('DashboardHub', 'REASON', `${action} on dashboard`, { title: dashboard.title });
-    closeActionDropdown();
-
-    try {
-      if (action === "migrate") {
-        // Select only this dashboard for migration
-        replaceSelectedIds(new Set([dashboard.id]));
-        showMigrateModal = true;
-        isEditingMappings = false;
-        bulkMigrateModel.sourceEnvId = selectedEnv;
-        bulkMigrateModel.selectedDashboardIds = Array.from(selectedIds);
-        bulkMigrateModel.targetEnvId = "";
-        bulkMigrateModel.dryRunResult = null;
-        bulkMigrateModel.error = "";
-        bulkMigrateModel.sourceDatabases = [];
-        bulkMigrateModel.targetDatabases = [];
-        bulkMigrateModel.mappings = [];
-        bulkMigrateModel.suggestions = [];
-        bulkMigrateModel.currentStep = 1;
-      } else if (action === "backup") {
-        // Select only this dashboard for backup
-        replaceSelectedIds(new Set([dashboard.id]));
-        showBackupModal = true;
-        backupSchedule = "";
-      } else if (action === "commit") {
-        // Open commit modal or trigger commit task
-        // For now, we'll trigger a commit via git API
-        const response = await api.postApi(
-          `/git/repositories/${dashboard.id}/commit`,
-          {
-            message: `Update dashboard ${dashboard.title}`,
-          },
-        );
-        log('DashboardHub', 'REFLECT', 'Commit created', { response });
-      }
-    } catch (err) {
-      log('DashboardHub', 'EXPLORE', 'Action Error', {}, err?.message || 'unknown');
-      // Error toast is already shown by api.postApi
-    }
-  }
-
-  // (LLM handleValidate removed — replaced by validation status indicator + popover)
-
-  // Handle target environment change — delegated to MigrationModel
-  // (removed: use bulkMigrateModel.selectTargetEnv() + fetchDatabases() in template onchange)
-
-  // Load databases for both environments — delegated to MigrationModel.fetchDatabases()
-
-  // Handle mapping update — delegated to bulkMigrateModel.saveMapping() in template onupdate
-
-  // Load database mappings for migration modal — handled by MigrationModel.fetchDatabases()
-
-  // Calculate Migration Dry Run — delegated to MigrationModel.calculateDryRun()
-
-  // Auto dry-run trigger is handled by model invariants + template-driven onchange handler
-  // (removed: old $effect auto-calculated dry-run on state changes)
-
-  // Handle bulk migrate — delegated to bulkMigrateModel.executeMigration()
-  // (inline handler in template manages modal close and task drawer after model action)
-
-  // Handle bulk backup
-  async function handleBulkBackup() {
-    if (isSubmittingBackup) return;
-    if (selectedIds.size === 0) return;
-
-    isSubmittingBackup = true;
-    try {
-      const response = await api.postApi("/dashboards/backup", {
-        env_id: selectedEnv,
-        dashboard_ids: Array.from(selectedIds),
-        schedule: backupSchedule || undefined,
-      });
-      log('DashboardHub', 'REFLECT', 'Bulk backup task created', { task_id: response.task_id });
-
-      // Close modal and open task drawer
-      showBackupModal = false;
-      clearSelectedIds();
-
-      if (response.task_id) {
-        const taskId =
-          typeof response.task_id === "object"
-            ? response.task_id.id || response.task_id.task_id
-            : response.task_id;
-        openDrawerForTaskIfPreferred(taskId);
-      }
-    } catch (err) {
-      log('DashboardHub', 'EXPLORE', 'Bulk backup error', {}, err?.message || 'unknown');
-      alert($t.dashboard?.backup_task_failed);
-    } finally {
-      isSubmittingBackup = false;
-    }
-  }
-
-  // Handle task status click - open Task Drawer
-  function handleTaskStatusClick(dashboard) {
-    if (dashboard.lastTask?.id) {
-      log('DashboardHub', 'REASON', 'Open task drawer for task', { taskId: dashboard.lastTask.id });
-      openDrawerForTask(dashboard.lastTask.id);
-    }
-  }
-
-  function navigateToDashboardDetail(dashboard) {
-    const dashboardRef = dashboard?.slug || dashboard?.id;
-    if (!dashboardRef) return;
-    goto(
-      `/dashboards/${encodeURIComponent(String(dashboardRef))}?env_id=${encodeURIComponent(selectedEnv)}`,
-    );
-  }
-
-  // Get status badge class
-  function getStatusBadgeClass(status) {
-    if (!status) return "bg-gray-100 text-gray-800";
-    switch (status.toLowerCase()) {
-      case "ok":
-        return "bg-green-100 text-green-800";
-      case "diff":
-        return "bg-yellow-100 text-yellow-800";
-      default:
-        return "bg-gray-100 text-gray-800";
-    }
-  }
-
-  function isGitBusy(dashboardId) {
-    return gitBusyIds.has(dashboardId);
-  }
-
-  function setGitBusy(dashboardId, busy) {
-    if (busy) {
-      gitBusyIds.add(dashboardId);
-    } else {
-      gitBusyIds.delete(dashboardId);
-    }
-    gitBusyIds = new Set(gitBusyIds);
-  }
-
-  async function ensureGitConfigs() {
-    if (cachedGitConfigs.length > 0) return cachedGitConfigs;
-    cachedGitConfigs = await gitService.getConfigs();
-    return cachedGitConfigs;
-  }
-
-  function updateDashboardGitState(dashboardId, nextGit) {
-    const mergeGitState = (collection) =>
-      collection.map((dashboard) =>
-        dashboard.id === dashboardId
-          ? { ...dashboard, git: { ...dashboard.git, ...nextGit } }
-          : dashboard,
-      );
-
-    allDashboards = mergeGitState(allDashboards);
-    filteredDashboards = mergeGitState(filteredDashboards);
-    dashboards = mergeGitState(dashboards);
-  }
-
-  function normalizeRepositoryStatusPayload(status) {
-    const syncState = String(status?.sync_state || "").toUpperCase();
-    const syncStatus = String(status?.sync_status || "").toUpperCase();
-
-    const explicitHasRepo = status?.has_repo;
-    const hasRepo =
-      explicitHasRepo === true
-        ? true
-        : explicitHasRepo === false
-          ? false
-          : !(syncState === "NO_REPO" || syncStatus === "NO_REPO");
-
-    if (!hasRepo) {
-      return {
-        status: "no_repo",
-        branch: null,
-        hasRepo: false,
-        hasChangesForCommit: false,
-      };
-    }
-
-    const hasChanges =
-      syncState === "CHANGES" ||
-      syncStatus === "DIFF" ||
-      Boolean(status?.is_dirty) ||
-      (status?.untracked_files?.length || 0) > 0 ||
-      (status?.modified_files?.length || 0) > 0 ||
-      (status?.staged_files?.length || 0) > 0;
-
-    return {
-      status: hasChanges ? "diff" : "ok",
-      branch: status?.current_branch || status?.branch || null,
-      hasRepo: true,
-      hasChangesForCommit: hasChanges,
-    };
-  }
-
-  async function fetchDashboardGitStatusesBatch(dashboardIds, force = false) {
-    const uniqueIds = Array.from(new Set(dashboardIds || []));
-    if (uniqueIds.length === 0) return;
-
-    if (force) {
-      uniqueIds.forEach((dashboardId) => gitResolvedIds.delete(dashboardId));
-      gitResolvedIds = new Set(gitResolvedIds);
-    }
-
-    const pendingIds = uniqueIds.filter(
-      (dashboardId) =>
-        !gitResolvedIds.has(dashboardId) && !gitLoadingIds.has(dashboardId),
-    );
-    if (pendingIds.length === 0) return;
-
-    pendingIds.forEach((dashboardId) => gitLoadingIds.add(dashboardId));
-    gitLoadingIds = new Set(gitLoadingIds);
-
-    try {
-      const batchResult = await gitService.getStatusesBatch(pendingIds);
-      const statusesByDashboardId = batchResult?.statuses || {};
-      pendingIds.forEach((dashboardId) => {
-        const status =
-          statusesByDashboardId[dashboardId] ??
-          statusesByDashboardId[String(dashboardId)];
-        updateDashboardGitState(
-          dashboardId,
-          status
-            ? normalizeRepositoryStatusPayload(status)
-            : {
-                status: "no_repo",
-                branch: null,
-                hasRepo: false,
-                hasChangesForCommit: false,
-              },
-        );
-      });
-    } catch (_err) {
-      pendingIds.forEach((dashboardId) => {
-        updateDashboardGitState(dashboardId, {
-          status: "no_repo",
-          branch: null,
-          hasRepo: false,
-          hasChangesForCommit: false,
-        });
-      });
-    } finally {
-      pendingIds.forEach((dashboardId) => {
-        gitLoadingIds.delete(dashboardId);
-        gitResolvedIds.add(dashboardId);
-      });
-      gitLoadingIds = new Set(gitLoadingIds);
-      gitResolvedIds = new Set(gitResolvedIds);
-    }
-  }
-
-  async function refreshDashboardGitState(dashboardId, force = false) {
-    await fetchDashboardGitStatusesBatch([dashboardId], force);
-  }
-
-  async function hydrateVisibleGitStatusesBatch() {
-    const pendingIds = dashboards
-      .filter(
-        (dashboard) =>
-          dashboard.git?.hasRepo === null &&
-          !gitResolvedIds.has(dashboard.id) &&
-          !gitLoadingIds.has(dashboard.id),
-      )
-      .map((dashboard) => dashboard.id);
-    if (pendingIds.length === 0) return;
-    await fetchDashboardGitStatusesBatch(pendingIds, false);
-  }
-
-  async function handleGitInit(dashboard) {
-    setGitBusy(dashboard.id, true);
-    try {
-      const configs = await ensureGitConfigs();
-      if (!configs.length) {
-        addToast(
-          $t.git?.no_servers_configured || "No Git config found",
-          "error",
-        );
-        return;
-      }
-
-      const config = configs[0];
-      const defaultRemote = config?.default_repository
-        ? `${String(config.url || "").replace(/\/$/, "")}/${config.default_repository}.git`
-        : "";
-      const remoteUrl = prompt(
-        $t.git?.remote_url || "Remote URL",
-        defaultRemote,
-      );
-      if (!remoteUrl) return;
-
-      await gitService.initRepository(
-        dashboard.id,
-        config.id,
-        remoteUrl.trim(),
-      );
-      addToast($t.git?.init_success || "Repository initialized", "success");
-      await refreshDashboardGitState(dashboard.id, true);
-    } catch (err) {
-      addToast(err?.message || "Git init failed", "error");
-    } finally {
-      setGitBusy(dashboard.id, false);
-    }
-  }
-
-  async function handleGitSync(dashboard) {
-    setGitBusy(dashboard.id, true);
-    try {
-      await gitService.sync(dashboard.id, selectedEnv || null);
-      addToast($t.git?.sync_success || "Synced", "success");
-      await refreshDashboardGitState(dashboard.id, true);
-    } catch (err) {
-      addToast(err?.message || "Git sync failed", "error");
-    } finally {
-      setGitBusy(dashboard.id, false);
-    }
-  }
-
-  async function handleGitCommit(dashboard) {
-    if (!dashboard.git?.hasRepo) {
-      addToast($t.git?.not_linked || "Repository not linked", "error");
-      return;
-    }
-    if (!dashboard.git?.hasChangesForCommit) {
-      addToast($t.git?.nothing_to_commit || "No changes to commit", "error");
-      return;
-    }
-
-    const message = prompt(
-      $t.git?.commit_message || "Commit message",
-      `Update dashboard ${dashboard.title}`,
-    );
-    if (!message?.trim()) return;
-
-    setGitBusy(dashboard.id, true);
-    try {
-      await gitService.commit(dashboard.slug || dashboard.id, message.trim());
-      addToast($t.git?.commit_success || "Committed", "success");
-      await refreshDashboardGitState(dashboard.id, true);
-    } catch (err) {
-      addToast(err?.message || "Git commit failed", "error");
-    } finally {
-      setGitBusy(dashboard.id, false);
-    }
-  }
-
-  async function handleGitPull(dashboard) {
-    if (!dashboard.git?.hasRepo) return;
-    setGitBusy(dashboard.id, true);
-    try {
-      await gitService.pull(dashboard.slug || dashboard.id, selectedEnv || null);
-      addToast($t.git?.pull_success || "Pulled", "success");
-      await refreshDashboardGitState(dashboard.id, true);
-    } catch (err) {
-      addToast(err?.message || "Git pull failed", "error");
-    } finally {
-      setGitBusy(dashboard.id, false);
-    }
-  }
-
-  async function handleGitPush(dashboard) {
-    if (!dashboard.git?.hasRepo) return;
-    setGitBusy(dashboard.id, true);
-    try {
-      await gitService.push(dashboard.slug || dashboard.id, selectedEnv || null);
-      addToast($t.git?.push_success || "Pushed", "success");
-      await refreshDashboardGitState(dashboard.id, true);
-    } catch (err) {
-      addToast(err?.message || "Git push failed", "error");
-    } finally {
-      setGitBusy(dashboard.id, false);
-    }
-  }
-
-  // Get task status icon
-  function getTaskStatusIcon(status) {
-    if (!status) return "";
-    switch (status.toLowerCase()) {
-      case "running":
-        return '<svg class="animate-spin" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 0 0 1-8 8z"/></svg>';
-      case "pending":
-        return '<svg class="animate-spin" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 0 0 1-8 8z"/></svg>';
-      case "success":
-        return '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>';
-      case "failed":
-      case "error":
-        return '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>';
-      case "awaiting_input":
-      case "waiting_input":
-        return '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>';
-      default:
-        return "";
-    }
-  }
-
-  // Generate pagination range with ellipsis
-  function getPaginationRange(current, total, maxVisible = 5) {
-    if (total <= maxVisible) {
-      return Array.from({ length: total }, (_, i) => i + 1);
-    }
-
-    const range = [];
-    const halfVisible = Math.floor(maxVisible / 2);
-
-    let start = Math.max(1, current - halfVisible);
-    let end = Math.min(total, current + halfVisible);
-
-    if (current <= halfVisible + 1) {
-      end = maxVisible;
-    } else if (current >= total - halfVisible) {
-      start = total - maxVisible + 1;
-    }
-
-    // Add first page and ellipsis if needed
-    if (start > 1) {
-      range.push(1);
-      if (start > 2) {
-        range.push("...");
-      }
-    }
-
-    // Add visible pages
-    for (let i = start; i <= end; i++) {
-      range.push(i);
-    }
-
-    // Add ellipsis and last page if needed
-    if (end < total) {
-      if (end < total - 1) {
-        range.push("...");
-      }
-      range.push(total);
-    }
-
-    return range;
-  }
-
-  $effect(() => {
-    const contextEnvId = $environmentContextStore?.selectedEnvId;
-    if (contextEnvId && selectedEnv !== contextEnvId) {
-      selectedEnv = contextEnvId;
-    }
-  });
-
-  $effect(() => {
-    const context = $environmentContextStore;
-    if (!context || context.isLoading) return;
-
-    if (context.error && !selectedEnv) {
-      error = context.error;
-      isLoading = false;
-      return;
-    }
-
-    if (context.isLoaded && context.environments.length === 0) {
-      isLoading = false;
-      error = null;
-      allDashboards = [];
-      dashboards = [];
-      filteredDashboards = [];
-      total = 0;
-      totalPages = 1;
-      serverTotal = 0;
-      serverTotalPages = 1;
-      lastLoadedEnvId = null;
-    }
-  });
-
-  // Re-apply grid transforms when multi-select filter changes (guarded against loops)
-  $effect(() => {
-    filterDashboardIds;
-    queueMicrotask(() => {
-      if (allDashboards.length > 0) applyGridTransforms();
-    });
-  });
-
-  $effect(() => {
-    const envId = selectedEnv;
-    if (!envId || envId === lastLoadedEnvId) return;
-    lastLoadedEnvId = envId;
-    currentPage = 1;
-    profileFilterOverrideShowAll = false;
-    effectiveProfileFilter = null;
-    clearSelectedIds();
-    filterDashboardIds = [];
-    void loadDashboards();
-    void loadDashboardSearchOptions('');
-  });
-
-  async function handleEnvironmentCreated(envId) {
+  function handleSearch(event: Event) { debouncedSearch((event.target as HTMLInputElement).value); }
+  
+  async function handleEnvironmentCreated(envId: string) {
     if (!envId) return;
-    error = null;
-    lastLoadedEnvId = null;
-    selectedEnv = envId;
+    m.error = null; m.lastLoadedEnvId = null; m.selectedEnv = envId;
     setSelectedEnvironment(envId);
   }
-</script>
 
+  // Store-derived values (must stay in page — legacy store not reactive in Model)
+  let environments = $derived($environmentContextStore?.environments || []);
+  let shouldShowEnvironmentWizard = $derived(
+    Boolean($environmentContextStore?.isLoaded) && !$environmentContextStore?.isLoading &&
+      !$environmentContextStore?.error && environments.length === 0
+  );
+  let shouldShowEnvironmentZeroState = $derived(shouldShowEnvironmentWizard && !m.isLoading && !m.error);
+
+  // Environment context sync
+  $effect(() => { const ctxEnvId = $environmentContextStore?.selectedEnvId; if (ctxEnvId && m.selectedEnv !== ctxEnvId) m.selectedEnv = ctxEnvId; });
+  $effect(() => {
+    const ctx = $environmentContextStore;
+    if (!ctx || ctx.isLoading) return;
+    if (ctx.error && !m.selectedEnv) { m.error = ctx.error; m.isLoading = false; return; }
+    if (ctx.isLoaded && ctx.environments.length === 0) {
+      m.isLoading = false; m.error = null;
+      m.allDashboards = []; m.dashboards = []; m.filteredDashboards = [];
+      m.total = 0; m.totalPages = 1; m.serverTotal = 0; m.serverTotalPages = 1; m.lastLoadedEnvId = null;
+    }
+  });
+  $effect(() => { m.filterDashboardIds; queueMicrotask(() => { if (m.allDashboards.length > 0) m.applyGridTransforms(); }); });
+  $effect(() => {
+    const envId = m.selectedEnv;
+    if (!envId || envId === m.lastLoadedEnvId) return;
+    m.lastLoadedEnvId = envId; m.currentPage = 1;
+    m.profileFilterOverrideShowAll = false; m.effectiveProfileFilter = null;
+    m.clearSelectedIds(); m.filterDashboardIds = [];
+    void m.loadDashboards(); void m.loadDashboardSearchOptions('');
+  });
+</script>
 <div class="mx-auto w-full px-4 lg:px-8 space-y-6">
   <!-- Header -->
   <div class="flex items-center justify-between">
-    <h1 class="text-2xl font-bold text-gray-900">
+    <h1 class="text-2xl font-bold text-text">
       {$t.nav?.dashboards}
     </h1>
     <div class="flex items-center space-x-4">
       <button
-        class="inline-flex items-center justify-center rounded-lg border border-indigo-300 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-700 transition-colors hover:bg-indigo-100"
+        class="inline-flex items-center justify-center rounded-lg border border-primary-ring bg-primary-light px-4 py-2 text-sm font-medium text-primary transition-colors hover:bg-primary-light"
         onclick={() => {
-          const ids = Array.from(selectedIds);
+          const ids = Array.from(m.selectedIds);
           const query = ids.length > 0 ? `?ids=${ids.join(",")}` : "";
           goto(`/validation-tasks/new${query}`);
         }}
@@ -1365,38 +105,38 @@
       </button>
       <button
         class="inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-hover"
-        onclick={loadDashboards}
+        onclick={() => m.loadDashboards()}
       >
         {$t.common?.refresh}
       </button>
     </div>
   </div>
 
-  {#if effectiveProfileFilter?.applied}
-    <div class="rounded-lg border border-primary-ring bg-primary-light px-4 py-2 text-sm text-blue-800">
+  {#if m.effectiveProfileFilter?.applied}
+    <div class="rounded-lg border border-primary-ring bg-primary-light px-4 py-2 text-sm text-primary">
       <div class="flex flex-wrap items-center justify-between gap-2">
         <span class="font-medium">
           {$t.profile?.filter_badge_active || "Profile filters active"}
         </span>
         <button
           type="button"
-          class="rounded border border-primary bg-white px-2.5 py-1 text-xs font-medium text-blue-700 hover:bg-blue-100"
-          onclick={handleTemporaryShowAll}
+          class="rounded border border-primary bg-surface-card px-2.5 py-1 text-xs font-medium text-primary hover:bg-primary-light"
+          onclick={() => m.handleTemporaryShowAll()}
         >
           {$t.profile?.filter_show_all_temporarily || "Show all dashboards temporarily"}
         </button>
       </div>
     </div>
-  {:else if effectiveProfileFilter?.override_show_all}
-    <div class="rounded-lg border border-amber-200 bg-amber-50 px-4 py-2 text-sm text-amber-800">
+  {:else if m.effectiveProfileFilter?.override_show_all}
+    <div class="rounded-lg border border-warning bg-warning-light px-4 py-2 text-sm text-warning">
       <div class="flex flex-wrap items-center justify-between gap-2">
         <span class="font-medium">
           {$t.profile?.filter_badge_override || "Showing all dashboards temporarily"}
         </span>
         <button
           type="button"
-          class="rounded border border-amber-300 bg-white px-2.5 py-1 text-xs font-medium text-amber-700 hover:bg-amber-100"
-          onclick={handleRestoreProfileFilter}
+          class="rounded border border-warning bg-surface-card px-2.5 py-1 text-xs font-medium text-warning hover:bg-warning-light"
+          onclick={() => m.handleRestoreProfileFilter()}
         >
           {$t.profile?.filter_restore_default || "Restore default filter"}
         </button>
@@ -1405,77 +145,72 @@
   {/if}
 
   <!-- Error Banner -->
-  {#if error}
+  {#if m.error}
     <div
-      class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4 flex items-center justify-between"
+      class="bg-destructive-light border border-destructive-ring text-destructive px-4 py-3 rounded mb-4 flex items-center justify-between"
     >
-      <span>{error}</span>
-      <button
-        class="px-4 py-2 bg-destructive text-white rounded hover:bg-destructive-hover transition-colors"
-        onclick={loadDashboards}
-      >
-        {$t.common?.retry}
-      </button>
+      <span>{m.error}</span>
+      <Button variant="destructive" onclick={() => m.loadDashboards()}>{$t.common?.retry}</Button>
     </div>
   {/if}
 
   <!-- Loading State -->
-  {#if isLoading}
+  {#if m.isLoading}
     <div
-      class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden"
+      class="bg-surface-card border border-border rounded-xl shadow-sm overflow-hidden"
     >
       <div
-        class="grid gap-4 px-6 py-3 bg-slate-50 border-b border-slate-200 font-semibold text-[11px] uppercase tracking-wide text-slate-600"
+        class="grid gap-4 px-6 py-3 bg-surface-muted border-b border-border font-semibold text-[11px] uppercase tracking-wide text-text-muted"
         style="width: max(100%, 1460px); grid-template-columns: 40px minmax(250px,2.3fr) minmax(118px,0.9fr) minmax(70px,0.5fr) minmax(110px,0.7fr) minmax(280px,2fr) minmax(150px,1fr) 124px;"
       >
-        <div class="h-4 rounded bg-gray-200 animate-pulse"></div>
-        <div class="h-4 rounded bg-gray-200 animate-pulse"></div>
-        <div class="h-4 rounded bg-gray-200 animate-pulse"></div>
-        <div class="h-4 rounded bg-gray-200 animate-pulse"></div>
-        <div class="h-4 rounded bg-gray-200 animate-pulse"></div>
-        <div class="h-4 rounded bg-gray-200 animate-pulse"></div>
-        <div class="h-4 rounded bg-gray-200 animate-pulse"></div>
-        <div class="h-4 rounded bg-gray-200 animate-pulse"></div>
+        <div class="h-4 rounded bg-surface-muted animate-pulse"></div>
+        <div class="h-4 rounded bg-surface-muted animate-pulse"></div>
+        <div class="h-4 rounded bg-surface-muted animate-pulse"></div>
+        <div class="h-4 rounded bg-surface-muted animate-pulse"></div>
+        <div class="h-4 rounded bg-surface-muted animate-pulse"></div>
+        <div class="h-4 rounded bg-surface-muted animate-pulse"></div>
+        <div class="h-4 rounded bg-surface-muted animate-pulse"></div>
+        <div class="h-4 rounded bg-surface-muted animate-pulse"></div>
       </div>
       {#each Array(5) as _}
         <div
-          class="grid gap-4 px-6 py-4 border-b border-slate-200 last:border-b-0 hover:bg-slate-50 transition-colors"
+          class="grid gap-4 px-6 py-4 border-b border-border last:border-b-0 hover:bg-surface-muted transition-colors"
           style="width: max(100%, 1460px); grid-template-columns: 40px minmax(250px,2.3fr) minmax(118px,0.9fr) minmax(70px,0.5fr) minmax(110px,0.7fr) minmax(280px,2fr) minmax(150px,1fr) 124px;"
         >
-          <div class="h-4 rounded bg-gray-200 animate-pulse"></div>
-          <div class="h-4 rounded bg-gray-200 animate-pulse"></div>
-          <div class="h-4 rounded bg-gray-200 animate-pulse"></div>
-          <div class="h-4 rounded bg-gray-200 animate-pulse"></div>
-          <div class="h-4 rounded bg-gray-200 animate-pulse"></div>
-          <div class="h-4 rounded bg-gray-200 animate-pulse"></div>
-          <div class="h-4 rounded bg-gray-200 animate-pulse"></div>
-          <div class="h-4 rounded bg-gray-200 animate-pulse"></div>
+          <div class="h-4 rounded bg-surface-muted animate-pulse"></div>
+          <div class="h-4 rounded bg-surface-muted animate-pulse"></div>
+          <div class="h-4 rounded bg-surface-muted animate-pulse"></div>
+          <div class="h-4 rounded bg-surface-muted animate-pulse"></div>
+          <div class="h-4 rounded bg-surface-muted animate-pulse"></div>
+          <div class="h-4 rounded bg-surface-muted animate-pulse"></div>
+          <div class="h-4 rounded bg-surface-muted animate-pulse"></div>
+          <div class="h-4 rounded bg-surface-muted animate-pulse"></div>
         </div>
       {/each}
     </div>
   {:else if shouldShowEnvironmentZeroState}
-    <div class="relative overflow-hidden rounded-3xl border border-slate-200 bg-gradient-to-br from-slate-50 via-white to-sky-50 p-8 shadow-sm">
+    <div class="relative overflow-hidden rounded-3xl border border-border bg-surface-page p-8 shadow-sm">
       <div class="max-w-2xl">
-        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-600">
+        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-primary">
           {$t.dashboard?.setup_badge || "Initial setup"}
         </p>
-        <h2 class="mt-3 text-2xl font-semibold text-slate-950">
+        <h2 class="mt-3 text-2xl font-semibold text-text">
           {$t.dashboard?.setup_empty_title || "No environments configured yet"}
         </h2>
-        <p class="mt-3 text-sm leading-6 text-slate-600">
+        <p class="mt-3 text-sm leading-6 text-text-muted">
           {$t.dashboard?.setup_empty_body ||
             "Add the first Superset environment to unlock dashboards, datasets, backups, and migrations."}
         </p>
         <div class="mt-6 flex flex-wrap gap-3">
           <button
             type="button"
-            class="rounded-xl bg-sky-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-sky-700"
+            class="rounded-xl bg-primary px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-primary-hover"
           >
             {$t.dashboard?.setup_start || "Start setup"}
           </button>
           <button
             type="button"
-            class="rounded-xl border border-slate-300 px-4 py-2.5 text-sm font-medium text-slate-700 transition hover:border-slate-400 hover:text-slate-900"
+            class="rounded-xl border border-border-strong px-4 py-2.5 text-sm font-medium text-text transition hover:border-border-strong hover:text-text"
             onclick={() => goto("/settings?tab=environments#environments")}
           >
             {$t.dashboard?.setup_open_advanced || "Advanced settings"}
@@ -1483,11 +218,11 @@
         </div>
       </div>
     </div>
-  {:else if dashboards.length === 0}
+  {:else if m.dashboards.length === 0}
     <!-- Empty State -->
-    <div class="py-12 text-center text-gray-500">
+    <div class="py-12 text-center text-text-muted">
       <svg
-        class="w-16 h-16 mx-auto mb-4 text-gray-400"
+        class="w-16 h-16 mx-auto mb-4 text-text-subtle"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
         fill="none"
@@ -1497,13 +232,13 @@
         <path d="M3 3h18v18H3V3zm16 16V5H5v14h14z" />
       </svg>
 
-      {#if effectiveProfileFilter?.applied}
+      {#if m.effectiveProfileFilter?.applied}
         <p>{$t.profile?.filter_empty_state || "No dashboards found for active profile filters. Try adjusting your filter settings."}</p>
         <div class="mt-4">
           <button
             type="button"
-            class="rounded border border-primary bg-white px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-50"
-            onclick={handleTemporaryShowAll}
+            class="rounded border border-primary bg-surface-card px-3 py-1.5 text-xs font-medium text-primary hover:bg-primary-light"
+            onclick={() => m.handleTemporaryShowAll()}
           >
             {$t.profile?.filter_show_all_temporarily || "Show all dashboards temporarily"}
           </button>
@@ -1516,240 +251,148 @@
     <!-- Toolbar -->
     <div class="flex items-center justify-between mb-4 gap-4">
       <div class="flex items-center gap-2">
-        <button
-          class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors"
-          onclick={handleSelectAll}
-          disabled={total === 0}
-        >
-          {isAllSelected
-            ? $t.dashboard?.deselect_all
-            : $t.dashboard?.select_all}
-        </button>
-        <button
-          class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors"
-          onclick={handleSelectVisible}
-          disabled={dashboards.length === 0}
-        >
-          {isAllVisibleSelected
-            ? $t.dashboard?.deselect_visible
-            : $t.dashboard?.select_visible}
-        </button>
-        {#if selectedIds.size > 0}
-          <span class="text-sm text-gray-600">
+        <Button variant="secondary" size="sm" onclick={() => m.handleSelectAll()} disabled={m.total === 0}>
+          {m.isAllSelected ? $t.dashboard?.deselect_all : $t.dashboard?.select_all}
+        </Button>
+        <Button variant="secondary" size="sm" onclick={() => m.handleSelectVisible()} disabled={m.dashboards.length === 0}>
+          {m.isAllVisibleSelected ? $t.dashboard?.deselect_visible : $t.dashboard?.select_visible}
+        </Button>
+        {#if m.selectedIds.size > 0}
+          <span class="text-sm text-text-muted">
             {($t.dashboard?.selected_count).replace(
               "{count}",
-              String(selectedIds.size),
+              String(m.selectedIds.size),
             )}
           </span>
         {/if}
       </div>
       <div class="w-80">
         <SearchableMultiSelect
-          options={searchableDashboardOptions}
-          bind:selected={filterDashboardIds}
+          options={m.searchableDashboardOptions}
+          bind:selected={m.filterDashboardIds}
           placeholder={$t.dashboard?.search}
           selectAllLabel={$t.dashboard?.select_all}
           clearLabel={$t.common?.clear || "Clear"}
           emptyMessage="No dashboards match"
-          loading={searchableDashboardLoading}
-          onSearch={loadDashboardSearchOptions}
+          loading={m.searchableDashboardLoading}
+          onSearch={m.loadDashboardSearchOptions}
           debounceMs={300}
         />
       </div>
     </div>
 
     <!-- Dashboard Grid -->
-    <div class="bg-white border border-slate-200 rounded-xl shadow-sm">
+    <div class="bg-surface-card border border-border rounded-xl shadow-sm">
       <div class="overflow-x-auto overflow-y-visible">
         <!-- Grid Header -->
         <div
-          class="grid gap-4 px-6 py-3 bg-slate-50 border-b border-slate-200 font-semibold text-[11px] uppercase tracking-wide text-slate-600"
+          class="grid gap-4 px-6 py-3 bg-surface-muted border-b border-border font-semibold text-[11px] uppercase tracking-wide text-text-muted"
           style="width: max(100%, 1460px); grid-template-columns: 40px minmax(250px,2.3fr) minmax(118px,0.9fr) minmax(70px,0.5fr) minmax(110px,0.7fr) minmax(280px,2fr) minmax(150px,1fr) 124px;"
         >
           <div></div>
           <div class="flex items-center gap-2">
             <button
-              class="hover:text-gray-900 transition-colors"
-              onclick={() => handleSort("title")}
+              class="hover:text-text transition-colors"
+              onclick={() => m.handleSort("title")}
             >
               {$t.dashboard?.title}
-              {getSortIndicator("title")}
+              {getSortIndicator(m.sortColumn, "title", m.sortDirection)}
             </button>
             <div class="relative column-filter">
               <button
-                class="rounded border px-1.5 py-0.5 text-xs transition-colors {hasColumnFilter(
+                class="rounded border px-1.5 py-0.5 text-xs transition-colors {m.hasColumnFilter(
                   'title',
                 )
-                  ? 'border-blue-400 text-blue-700 bg-primary-light'
-                  : 'border-gray-300 text-gray-500 hover:text-gray-700'}"
-                onclick={(event) => toggleFilterDropdown("title", event, 256)}
+                  ? 'border-primary-ring text-primary bg-primary-light'
+                  : 'border-border-strong text-text-muted hover:text-text'}"
+                onclick={(event) => m.toggleFilterDropdown("title", event, 256)}
                 title={$t.dashboard?.column_filter}
               >
                 ▾
               </button>
-              {#if openFilterColumn === "title"}
-                <div
-                  class="fixed z-50 w-64 rounded-lg border border-gray-200 bg-white shadow-lg p-3"
-                  style="left: {filterDropdownPosition.left}px; top: {filterDropdownPosition.top}px;"
-                >
-                  <input
-                    type="text"
-                    class="w-full rounded border border-gray-300 px-2 py-1 text-xs"
-                    placeholder={$t.dashboard?.search}
-                    value={columnFilterSearch.title}
-                    oninput={(event) =>
-                      updateColumnFilterSearch("title", event.target.value)}
-                  />
-                  <div class="mt-2 flex items-center justify-between text-xs">
-                    <button
-                      class="text-primary hover:underline"
-                      onclick={() => selectAllColumnFilterValues("title")}
-                      >{$t.dashboard?.select_all}</button
-                    >
-                    <button
-                      class="text-gray-500 hover:underline"
-                      onclick={() => clearColumnFilter("title")}
-                      >{$t.common?.clear || "Clear"}</button
-                    >
-                  </div>
-                  <div class="mt-2 max-h-44 overflow-auto space-y-1 text-xs">
-                    {#each getVisibleFilterOptions("title") as value}
-                      <label class="flex items-center gap-2">
-                        <input
-                          type="checkbox"
-                          checked={columnFilters.title.has(value)}
-                          onchange={(event) =>
-                            toggleFilterValue(
-                              "title",
-                              value,
-                              event.target.checked,
-                            )}
-                        />
-                        <span class="truncate">{value}</span>
-                      </label>
-                    {/each}
-                  </div>
-                </div>
+              {#if m.openFilterColumn === "title"}
+                <ColumnFilterPopover
+                  column="title"
+                  bind:filterValues={columnFilters.title}
+                  bind:searchText={m.columnFilterSearch.title}
+                  options={m.getVisibleFilterOptions("title")}
+                  position={m.filterDropdownPosition}
+                  onToggleFilter={(v: string, c: boolean) => m.toggleFilterValue("title", v, c)}
+                  onClear={() => m.clearColumnFilter("title")}
+                />
               {/if}
             </div>
           </div>
           <div class="flex items-center gap-2">
             <button
-              class="hover:text-gray-900 transition-colors"
-              onclick={() => handleSort("git_status")}
+              class="hover:text-text transition-colors"
+              onclick={() => m.handleSort("git_status")}
             >
-              GIT {getSortIndicator("git_status")}
+              GIT {getSortIndicator(m.sortColumn, "git_status", m.sortDirection)}
             </button>
             <div class="relative column-filter">
               <button
-                class="rounded border px-1.5 py-0.5 text-xs transition-colors {hasColumnFilter(
+                class="rounded border px-1.5 py-0.5 text-xs transition-colors {m.hasColumnFilter(
                   'git_status',
                 )
-                  ? 'border-blue-400 text-blue-700 bg-primary-light'
-                  : 'border-gray-300 text-gray-500 hover:text-gray-700'}"
+                  ? 'border-primary-ring text-primary bg-primary-light'
+                  : 'border-border-strong text-text-muted hover:text-text'}"
                 onclick={(event) =>
-                  toggleFilterDropdown("git_status", event, 256)}
+                  m.toggleFilterDropdown("git_status", event, 256)}
                 title={$t.dashboard?.column_filter}
               >
                 ▾
               </button>
-              {#if openFilterColumn === "git_status"}
-                <div
-                  class="fixed z-50 w-64 rounded-lg border border-gray-200 bg-white shadow-lg p-3"
-                  style="left: {filterDropdownPosition.left}px; top: {filterDropdownPosition.top}px;"
-                >
-                  <input
-                    type="text"
-                    class="w-full rounded border border-gray-300 px-2 py-1 text-xs"
-                    placeholder={$t.dashboard?.search}
-                    value={columnFilterSearch.git_status}
-                    oninput={(event) =>
-                      updateColumnFilterSearch(
-                        "git_status",
-                        event.target.value,
-                      )}
-                  />
-                  <div class="mt-2 flex items-center justify-between text-xs">
-                    <button
-                      class="text-primary hover:underline"
-                      onclick={() => selectAllColumnFilterValues("git_status")}
-                      >{$t.dashboard?.select_all}</button
-                    >
-                    <button
-                      class="text-gray-500 hover:underline"
-                      onclick={() => clearColumnFilter("git_status")}
-                      >{$t.common?.clear || "Clear"}</button
-                    >
-                  </div>
-                  <div class="mt-2 max-h-44 overflow-auto space-y-1 text-xs">
-                    {#each getVisibleFilterOptions("git_status") as value}
-                      <label class="flex items-center gap-2">
-                        <input
-                          type="checkbox"
-                          checked={columnFilters.git_status.has(value)}
-                          onchange={(event) =>
-                            toggleFilterValue(
-                              "git_status",
-                              value,
-                              event.target.checked,
-                            )}
-                        />
-                        <span class="truncate">{value}</span>
-                      </label>
-                    {/each}
-                  </div>
-                </div>
+              {#if m.openFilterColumn === "git_status"}
+                <ColumnFilterPopover
+                  column="git_status"
+                  bind:filterValues={columnFilters.git_status}
+                  bind:searchText={m.columnFilterSearch.git_status}
+                  options={m.getVisibleFilterOptions("git_status")}
+                  position={m.filterDropdownPosition}
+                  onToggleFilter={(v: string, c: boolean) => m.toggleFilterValue("git_status", v, c)}
+                  onClear={() => m.clearColumnFilter("git_status")}
+                />
               {/if}
             </div>
           </div>
           <div class="flex items-center gap-2">
             <button
-              class="hover:text-gray-900 transition-colors"
-              onclick={() => handleSort("validation_status")}
+              class="hover:text-text transition-colors"
+              onclick={() => m.handleSort("validation_status")}
             >
               {$t.dashboard?.validation || "Validation"}
-              {getSortIndicator("validation_status")}
+              {getSortIndicator(m.sortColumn, "validation_status", m.sortDirection)}
             </button>
             <div class="relative column-filter">
               <button
-                class="rounded border px-1.5 py-0.5 text-xs transition-colors {hasColumnFilter(
+                class="rounded border px-1.5 py-0.5 text-xs transition-colors {m.hasColumnFilter(
                   'validation_status',
                 )
-                  ? 'border-blue-400 text-blue-700 bg-primary-light'
-                  : 'border-gray-300 text-gray-500 hover:text-gray-700'}"
+                  ? 'border-primary-ring text-primary bg-primary-light'
+                  : 'border-border-strong text-text-muted hover:text-text'}"
                 onclick={(event) =>
-                  toggleFilterDropdown("validation_status", event, 200)}
+                  m.toggleFilterDropdown("validation_status", event, 200)}
                 title={$t.dashboard?.column_filter}
               >
                 ▾
               </button>
-              {#if openFilterColumn === "validation_status"}
-                <div
-                  class="fixed z-50 w-52 rounded-lg border border-gray-200 bg-white shadow-lg p-3"
-                  style="left: {filterDropdownPosition.left}px; top: {filterDropdownPosition.top}px;"
-                >
-                  <div class="mt-1 max-h-32 overflow-auto space-y-1 text-xs">
-                    {#each ["pass", "warn", "fail", "unknown"] as value}
-                      <label class="flex items-center gap-2">
-                        <input
-                          type="checkbox"
-                          checked={columnFilters.validation_status.has(value)}
-                          onchange={(event) =>
-                            toggleFilterValue(
-                              "validation_status",
-                              value,
-                              event.target.checked,
-                            )}
-                        />
-                        <span class="truncate">{value.toUpperCase()}</span>
-                      </label>
-                    {/each}
-                  </div>
-                </div>
+              {#if m.openFilterColumn === "validation_status"}
+                <ColumnFilterPopover
+                  column="validation_status"
+                  bind:filterValues={columnFilters.validation_status}
+                  bind:searchText={m.columnFilterSearch.validation_status}
+                  options={[]}
+                  staticOptions={["pass", "warn", "fail", "unknown"]}
+                  position={m.filterDropdownPosition}
+                  widthPx={200}
+                  showSearch={false}
+                  onToggleFilter={(v: string, c: boolean) => m.toggleFilterValue("validation_status", v, c)}
+                />
               {/if}
             </div>
           </div>
-          <div class="flex items-center text-xs text-gray-500 uppercase">
+          <div class="flex items-center text-xs text-text-muted uppercase">
             {$t.maintenance?.maintenance_badge || "Maint."}
           </div>
           <div class="flex items-center gap-2">
@@ -1757,162 +400,94 @@
           </div>
           <div class="flex items-center gap-2">
             <button
-              class="hover:text-gray-900 transition-colors"
-              onclick={() => handleSort("changed_on")}
+              class="hover:text-text transition-colors"
+              onclick={() => m.handleSort("changed_on")}
             >
               {$t.dashboard?.changed_on}
-              {getSortIndicator("changed_on")}
+              {getSortIndicator(m.sortColumn, "changed_on", m.sortDirection)}
             </button>
             <div class="relative column-filter">
               <button
-                class="rounded border px-1.5 py-0.5 text-xs transition-colors {hasColumnFilter(
+                class="rounded border px-1.5 py-0.5 text-xs transition-colors {m.hasColumnFilter(
                   'changed_on',
                 )
-                  ? 'border-blue-400 text-blue-700 bg-primary-light'
-                  : 'border-gray-300 text-gray-500 hover:text-gray-700'}"
+                  ? 'border-primary-ring text-primary bg-primary-light'
+                  : 'border-border-strong text-text-muted hover:text-text'}"
                 onclick={(event) =>
-                  toggleFilterDropdown("changed_on", event, 256)}
+                  m.toggleFilterDropdown("changed_on", event, 256)}
                 title={$t.dashboard?.column_filter}
               >
                 ▾
               </button>
-              {#if openFilterColumn === "changed_on"}
-                <div
-                  class="fixed z-50 w-64 rounded-lg border border-gray-200 bg-white shadow-lg p-3"
-                  style="left: {filterDropdownPosition.left}px; top: {filterDropdownPosition.top}px;"
-                >
-                  <input
-                    type="text"
-                    class="w-full rounded border border-gray-300 px-2 py-1 text-xs"
-                    placeholder={$t.dashboard?.search}
-                    value={columnFilterSearch.changed_on}
-                    oninput={(event) =>
-                      updateColumnFilterSearch(
-                        "changed_on",
-                        event.target.value,
-                      )}
-                  />
-                  <div class="mt-2 flex items-center justify-between text-xs">
-                    <button
-                      class="text-primary hover:underline"
-                      onclick={() => selectAllColumnFilterValues("changed_on")}
-                      >{$t.dashboard?.select_all}</button
-                    >
-                    <button
-                      class="text-gray-500 hover:underline"
-                      onclick={() => clearColumnFilter("changed_on")}
-                      >{$t.common?.clear || "Clear"}</button
-                    >
-                  </div>
-                  <div class="mt-2 max-h-44 overflow-auto space-y-1 text-xs">
-                    {#each getVisibleFilterOptions("changed_on") as value}
-                      <label class="flex items-center gap-2">
-                        <input
-                          type="checkbox"
-                          checked={columnFilters.changed_on.has(value)}
-                          onchange={(event) =>
-                            toggleFilterValue(
-                              "changed_on",
-                              value,
-                              event.target.checked,
-                            )}
-                        />
-                        <span class="truncate">{value}</span>
-                      </label>
-                    {/each}
-                  </div>
-                </div>
+              {#if m.openFilterColumn === "changed_on"}
+                <ColumnFilterPopover
+                  column="changed_on"
+                  bind:filterValues={columnFilters.changed_on}
+                  bind:searchText={m.columnFilterSearch.changed_on}
+                  options={m.getVisibleFilterOptions("changed_on")}
+                  position={m.filterDropdownPosition}
+                  onToggleFilter={(v: string, c: boolean) => m.toggleFilterValue("changed_on", v, c)}
+                  onClear={() => m.clearColumnFilter("changed_on")}
+                />
               {/if}
             </div>
           </div>
           <div class="flex items-center gap-2">
             <button
-              class="hover:text-gray-900 transition-colors"
-              onclick={() => handleSort("actor")}
+              class="hover:text-text transition-colors"
+              onclick={() => m.handleSort("actor")}
             >
               {$t.dashboard?.owners || "Owners"}
-              {getSortIndicator("actor")}
+              {getSortIndicator(m.sortColumn, "actor", m.sortDirection)}
             </button>
             <div class="relative column-filter">
               <button
-                class="rounded border px-1.5 py-0.5 text-xs transition-colors {hasColumnFilter(
+                class="rounded border px-1.5 py-0.5 text-xs transition-colors {m.hasColumnFilter(
                   'actor',
                 )
-                  ? 'border-blue-400 text-blue-700 bg-primary-light'
-                  : 'border-gray-300 text-gray-500 hover:text-gray-700'}"
-                onclick={(event) => toggleFilterDropdown("actor", event, 288)}
+                  ? 'border-primary-ring text-primary bg-primary-light'
+                  : 'border-border-strong text-text-muted hover:text-text'}"
+                onclick={(event) => m.toggleFilterDropdown("actor", event, 288)}
                 title={$t.dashboard?.column_filter}
               >
                 ▾
               </button>
-              {#if openFilterColumn === "actor"}
-                <div
-                  class="fixed z-50 w-72 rounded-lg border border-gray-200 bg-white shadow-lg p-3"
-                  style="left: {filterDropdownPosition.left}px; top: {filterDropdownPosition.top}px;"
-                >
-                  <input
-                    type="text"
-                    class="w-full rounded border border-gray-300 px-2 py-1 text-xs"
-                    placeholder={$t.dashboard?.search}
-                    value={columnFilterSearch.actor}
-                    oninput={(event) =>
-                      updateColumnFilterSearch("actor", event.target.value)}
-                  />
-                  <div class="mt-2 flex items-center justify-between text-xs">
-                    <button
-                      class="text-primary hover:underline"
-                      onclick={() => selectAllColumnFilterValues("actor")}
-                      >{$t.dashboard?.select_all}</button
-                    >
-                    <button
-                      class="text-gray-500 hover:underline"
-                      onclick={() => clearColumnFilter("actor")}
-                      >{$t.common?.clear || "Clear"}</button
-                    >
-                  </div>
-                  <div class="mt-2 max-h-44 overflow-auto space-y-1 text-xs">
-                    {#each getVisibleFilterOptions("actor") as value}
-                      <label class="flex items-center gap-2">
-                        <input
-                          type="checkbox"
-                          checked={columnFilters.actor.has(value)}
-                          onchange={(event) =>
-                            toggleFilterValue(
-                              "actor",
-                              value,
-                              event.target.checked,
-                            )}
-                        />
-                        <span class="truncate">{value}</span>
-                      </label>
-                    {/each}
-                  </div>
-                </div>
+              {#if m.openFilterColumn === "actor"}
+                <ColumnFilterPopover
+                  column="actor"
+                  bind:filterValues={columnFilters.actor}
+                  bind:searchText={m.columnFilterSearch.actor}
+                  options={m.getVisibleFilterOptions("actor")}
+                  position={m.filterDropdownPosition}
+                  widthPx={288}
+                  onToggleFilter={(v: string, c: boolean) => m.toggleFilterValue("actor", v, c)}
+                  onClear={() => m.clearColumnFilter("actor")}
+                />
               {/if}
             </div>
           </div>
         </div>
 
         <!-- Grid Rows -->
-        {#each dashboards as dashboard}
+        {#each m.dashboards as dashboard}
           <div
-            class="grid items-center gap-4 px-6 py-3 border-b border-slate-200 last:border-b-0 hover:bg-slate-50 transition-colors text-[13px]"
+            class="grid items-center gap-4 px-6 py-3 border-b border-border last:border-b-0 hover:bg-surface-muted transition-colors text-[13px]"
             style="width: max(100%, 1460px); grid-template-columns: 40px minmax(250px,2.3fr) minmax(118px,0.9fr) minmax(70px,0.5fr) minmax(110px,0.7fr) minmax(280px,2fr) minmax(150px,1fr) 124px;"
           >
             <!-- Checkbox -->
             <div>
               <input
                 type="checkbox"
-                checked={selectedIds.has(dashboard.id)}
-                onchange={(e) => handleCheckboxChange(dashboard, e)}
+                checked={m.selectedIds.has(dashboard.id)}
+                onchange={(e) => m.handleCheckboxChange(dashboard, e)}
               />
             </div>
 
             <!-- Title -->
-            <div class="font-medium text-sm text-slate-900">
+            <div class="font-medium text-sm text-text">
               <button
-                class="text-left text-blue-700 hover:text-blue-900 hover:underline transition-colors"
-                onclick={() => navigateToDashboardDetail(dashboard)}
+                class="text-left text-primary hover:text-primary-hover hover:underline transition-colors"
+                onclick={() => m.navigateToDashboardDetail(dashboard)}
                 title={$t.dashboard?.open_overview}
               >
                 {dashboard.title}
@@ -1924,10 +499,10 @@
               <div class="flex flex-col gap-1">
                 <span
                   class="inline-flex w-fit items-center rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide {dashboard.git?.hasRepo === null
-                    ? 'bg-slate-100 text-slate-500'
+                    ? 'bg-surface-muted text-text-muted'
                     : dashboard.git?.hasRepo
-                      ? 'bg-blue-100 text-blue-800'
-                      : 'bg-slate-100 text-slate-700'}"
+                      ? 'bg-primary-light text-primary'
+                      : 'bg-surface-muted text-text'}"
                 >
                   {dashboard.git?.hasRepo === null
                     ? $t.common?.loading || "Loading"
@@ -1939,8 +514,8 @@
                   <span
                     class="inline-flex w-fit items-center rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide {dashboard
                       .git?.hasChangesForCommit
-                      ? 'bg-yellow-100 text-yellow-800'
-                      : 'bg-green-100 text-green-800'}"
+                      ? 'bg-warning-light text-warning'
+                      : 'bg-success-light text-success'}"
                   >
                     {dashboard.git?.hasChangesForCommit
                       ? $t.dashboard?.status_changes || "Diff"
@@ -1952,59 +527,59 @@
 
             <!-- Validation Status Indicator -->
             <div class="relative">
-              {#if validationStatuses[dashboard.id]}
-                {@const vs = validationStatuses[dashboard.id]}
-                {@const dotClass = vs.status === "PASS" ? "bg-emerald-400" : vs.status === "WARN" ? "bg-amber-400" : vs.status === "FAIL" ? "bg-rose-400" : "bg-slate-300"}
+              {#if m.validationStatuses[dashboard.id]}
+                {@const vs = m.validationStatuses[dashboard.id]}
+                {@const dotClass = vs.status === "PASS" ? "bg-success" : vs.status === "WARN" ? "bg-warning" : vs.status === "FAIL" ? "bg-destructive" : "bg-border"}
                 <button
-                  class="inline-flex h-5 w-5 items-center justify-center rounded-full border border-slate-300 transition-colors hover:ring-2 hover:ring-slate-400"
-                  onclick={(e) => toggleValidationPopover(dashboard.id, e)}
+                  class="inline-flex h-5 w-5 items-center justify-center rounded-full border border-border-strong transition-colors hover:ring-2 hover:ring-border-strong"
+                  onclick={(e) => m.toggleValidationPopover(dashboard.id, e)}
                   title={vs.status || "UNKNOWN"}
                   aria-label={$t.dashboard?.validation_status || "Validation status"}
                 >
                   <span class="block h-3 w-3 rounded-full {dotClass}"></span>
                 </button>
-              {:else if validationStatusLoading}
+              {:else if m.validationStatusLoading}
                 <span class="inline-flex h-5 w-5 items-center justify-center">
-                  <span class="block h-3 w-3 animate-pulse rounded-full bg-slate-200"></span>
+                  <span class="block h-3 w-3 animate-pulse rounded-full bg-surface-muted"></span>
                 </span>
               {:else}
-                <span class="text-gray-300 text-xs">-</span>
+                <span class="text-text-subtle text-xs">-</span>
               {/if}
 
               <!-- Validation Popover -->
-              {#if openValidationPopover === dashboard.id}
+              {#if m.openValidationPopover === dashboard.id}
                 <div
-                  class="fixed z-50 w-80 rounded-lg border border-slate-200 bg-white shadow-lg"
-                  style="left: {validationPopoverPosition.left}px; top: {validationPopoverPosition.top}px;"
+                  class="fixed z-50 w-80 rounded-lg border border-border bg-surface-card shadow-lg"
+                  style="left: {m.validationPopoverPosition.left}px; top: {m.validationPopoverPosition.top}px;"
                   onclick={(e) => e.stopPropagation()}
                 >
-                  <div class="border-b border-slate-100 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-500">
+                  <div class="border-b border-border px-3 py-2 text-xs font-semibold uppercase tracking-wide text-text-muted">
                     {$t.dashboard?.validation_history || "Validation History"}
                   </div>
-                  {#if validationStatuses[dashboard.id]?.history?.length > 0}
+                  {#if m.validationStatuses[dashboard.id]?.history?.length > 0}
                     <div class="max-h-48 overflow-y-auto">
-                      {#each validationStatuses[dashboard.id].history.slice(0, 3) as run}
-                        <div class="flex items-center justify-between px-3 py-2 text-xs border-b border-slate-50 last:border-b-0">
+                      {#each m.validationStatuses[dashboard.id].history.slice(0, 3) as run}
+                        <div class="flex items-center justify-between px-3 py-2 text-xs border-b border-border last:border-b-0">
                           <div class="flex items-center gap-2">
-                            <span class="block h-2.5 w-2.5 rounded-full {run.status === 'PASS' ? 'bg-emerald-400' : run.status === 'WARN' ? 'bg-amber-400' : run.status === 'FAIL' ? 'bg-rose-400' : 'bg-slate-300'}"></span>
-                            <span class="text-slate-700">{run.status || "UNKNOWN"}</span>
+                            <span class="block h-2.5 w-2.5 rounded-full {run.status === 'PASS' ? 'bg-success' : run.status === 'WARN' ? 'bg-warning' : run.status === 'FAIL' ? 'bg-destructive' : 'bg-border'}"></span>
+                            <span class="text-text">{run.status || "UNKNOWN"}</span>
                           </div>
                           <div class="flex items-center gap-2">
-                            <span class="text-slate-400">{run.task_name || "-"}</span>
-                            <span class="text-slate-400">{formatDate(run.last_run_at)}</span>
+                            <span class="text-text-subtle">{run.task_name || "-"}</span>
+                            <span class="text-text-subtle">{formatDate(run.last_run_at)}</span>
                           </div>
                         </div>
                       {/each}
                     </div>
                   {:else}
-                    <div class="px-3 py-3 text-xs text-slate-400 text-center">
+                    <div class="px-3 py-3 text-xs text-text-subtle text-center">
                       {$t.dashboard?.no_validation_runs || "No validation runs yet"}
                     </div>
                   {/if}
-                  <div class="border-t border-slate-100 px-3 py-2">
+                  <div class="border-t border-border px-3 py-2">
                     <a
                       href={`/validation-tasks?search=${dashboard.id}`}
-                      class="text-xs text-indigo-600 hover:text-indigo-800 hover:underline"
+                      class="text-xs text-primary hover:text-primary-hover hover:underline"
                     >
                       {$t.dashboard?.view_all_runs || "View all runs →"}
                     </a>
@@ -2022,8 +597,8 @@
             <div class="flex items-center">
               <div class="flex items-center gap-1.5">
                 <button
-class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-slate-200 bg-white text-primary hover:bg-blue-50 hover:border-primary-ring transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-          onclick={() => handleAction(dashboard, "migrate")}
+class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-surface-card text-primary hover:bg-primary-light hover:border-primary-ring transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          onclick={() => m.handleAction(dashboard, "migrate")}
                   title={$t.dashboard?.action_migrate}
                 >
                   <svg
@@ -2038,8 +613,8 @@ class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-
                   </svg>
                 </button>
                 <button
-                  class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-slate-200 bg-white text-amber-600 hover:bg-amber-50 hover:border-amber-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                  onclick={() => handleAction(dashboard, "backup")}
+                  class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-surface-card text-warning hover:bg-warning-light hover:border-warning transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  onclick={() => m.handleAction(dashboard, "backup")}
                   title={$t.dashboard?.action_backup}
                 >
                   <svg
@@ -2059,7 +634,7 @@ class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-
             </div>
 
             <!-- Changed On -->
-            <div class="text-xs text-slate-600">
+            <div class="text-xs text-text-muted">
               {dashboard.changedOnLabel}
             </div>
 
@@ -2069,7 +644,7 @@ class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-
                 <div class="flex flex-wrap items-center gap-1">
                   {#each dashboard.owners as owner (owner)}
                     <span
-                      class="rounded bg-slate-100 px-2 py-0.5 text-xs text-slate-700 truncate max-w-[180px]"
+                      class="rounded bg-surface-muted px-2 py-0.5 text-xs text-text truncate max-w-[180px]"
                       title={owner}
                     >
                       {owner}
@@ -2077,7 +652,7 @@ class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-
                   {/each}
                 </div>
               {:else}
-                <div class="text-gray-400">-</div>
+                <div class="text-text-subtle">-</div>
               {/if}
             </div>
           </div>
@@ -2085,63 +660,63 @@ class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-
       </div>
 
       <!-- Pagination -->
-      {#if totalPages > 1}
+      {#if m.totalPages > 1}
         <div
-          class="flex items-center justify-between px-4 py-3 bg-gray-50 border-t border-gray-200"
+          class="flex items-center justify-between px-4 py-3 bg-surface-muted border-t border-border"
         >
-          <div class="text-sm text-gray-600">
+          <div class="text-sm text-text-muted">
             {($t.dashboard?.showing)
-              .replace("{start}", String((currentPage - 1) * pageSize + 1))
-              .replace("{end}", String(Math.min(currentPage * pageSize, total)))
-              .replace("{total}", String(total))}
+              .replace("{start}", String((m.currentPage - 1) * m.pageSize + 1))
+              .replace("{end}", String(Math.min(m.currentPage * m.pageSize, m.total)))
+              .replace("{total}", String(m.total))}
           </div>
           <div class="flex items-center gap-1">
             <button
-              class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed min-w-[32px]"
-              onclick={() => handlePageChange(1)}
-              disabled={currentPage === 1}
+              class="px-3 py-1 border border-border-strong rounded hover:bg-surface-muted disabled:opacity-50 disabled:cursor-not-allowed min-w-[32px]"
+              onclick={() => m.setPage(1)}
+              disabled={m.currentPage === 1}
             >
               {$t.common?.first}
             </button>
             <button
-              class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed min-w-[32px]"
-              onclick={() => handlePageChange(currentPage - 1)}
-              disabled={currentPage === 1}
+              class="px-3 py-1 border border-border-strong rounded hover:bg-surface-muted disabled:opacity-50 disabled:cursor-not-allowed min-w-[32px]"
+              onclick={() => m.setPage(m.currentPage - 1)}
+              disabled={m.currentPage === 1}
             >
               {$t.dashboard?.previous}
             </button>
-            {#each getPaginationRange(currentPage, totalPages) as pageNum}
+            {#each getPaginationRange(m.currentPage, m.totalPages) as pageNum}
               {#if pageNum === "..."}
-                <span class="px-2 py-1 text-gray-500">...</span>
+                <span class="px-2 py-1 text-text-muted">...</span>
               {:else}
                 <button
-                  class="page-btn {pageNum === currentPage ? 'active' : ''}"
-                  onclick={() => handlePageChange(pageNum)}
+                  class="page-btn {pageNum === m.currentPage ? 'active' : ''}"
+                  onclick={() => m.setPage(pageNum)}
                 >
                   {pageNum}
                 </button>
               {/if}
             {/each}
             <button
-              class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed min-w-[32px]"
-              onclick={() => handlePageChange(currentPage + 1)}
-              disabled={currentPage === totalPages}
+              class="px-3 py-1 border border-border-strong rounded hover:bg-surface-muted disabled:opacity-50 disabled:cursor-not-allowed min-w-[32px]"
+              onclick={() => m.setPage(m.currentPage + 1)}
+              disabled={m.currentPage === m.totalPages}
             >
               {$t.dashboard?.next}
             </button>
             <button
-              class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed min-w-[32px]"
-              onclick={() => handlePageChange(totalPages)}
-              disabled={currentPage === totalPages}
+              class="px-3 py-1 border border-border-strong rounded hover:bg-surface-muted disabled:opacity-50 disabled:cursor-not-allowed min-w-[32px]"
+              onclick={() => m.setPage(m.totalPages)}
+              disabled={m.currentPage === m.totalPages}
             >
               {$t.common?.last}
             </button>
           </div>
           <div>
             <select
-class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring"
-              value={pageSize}
-              onchange={handlePageSizeChange}
+class="px-4 py-2 border border-border-strong rounded-lg bg-surface-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring"
+              value={m.pageSize}
+              onchange={(e) => m.setPageSize(e)}
             >
               <option value={5}>
                 {($t.dashboard?.per_page_option).replace("{count}", "5")}
@@ -2165,9 +740,9 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
     </div>
 
     <!-- Floating Bulk Action Panel -->
-    {#if selectedIds.size > 0}
+    {#if m.selectedIds.size > 0}
       <div
-        class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg p-4 transition-transform transform translate-y-0"
+        class="fixed bottom-0 left-0 right-0 bg-surface-card border-t border-border shadow-lg p-4 transition-transform transform translate-y-0"
       >
         <div
           class="flex items-center justify-between w-full px-4 lg:px-8 mx-auto"
@@ -2176,7 +751,7 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
             <span class="font-medium">
               ✓ {($t.dashboard?.selected_count).replace(
                 "{count}",
-                String(selectedIds.size),
+                String(m.selectedIds.size),
               )}
             </span>
           </div>
@@ -2184,31 +759,31 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
             <button
               class="px-3 py-1 text-sm bg-primary text-white border-primary rounded hover:bg-primary-hover transition-colors"
               onclick={() => {
-                showMigrateModal = true;
-                isEditingMappings = false;
-                bulkMigrateModel.sourceEnvId = selectedEnv;
-                bulkMigrateModel.selectedDashboardIds = Array.from(selectedIds);
-                bulkMigrateModel.targetEnvId = "";
-                bulkMigrateModel.dryRunResult = null;
-                bulkMigrateModel.error = "";
-                bulkMigrateModel.sourceDatabases = [];
-                bulkMigrateModel.targetDatabases = [];
-                bulkMigrateModel.mappings = [];
-                bulkMigrateModel.suggestions = [];
-                bulkMigrateModel.currentStep = 1;
+                m.showMigrateModal = true;
+                m.isEditingMappings = false;
+                m.bulkMigrateModel.sourceEnvId = m.selectedEnv;
+                m.bulkMigrateModel.selectedDashboardIds = Array.from(m.selectedIds);
+                m.bulkMigrateModel.targetEnvId = "";
+                m.bulkMigrateModel.dryRunResult = null;
+                m.bulkMigrateModel.error = "";
+                m.bulkMigrateModel.sourceDatabases = [];
+                m.bulkMigrateModel.targetDatabases = [];
+                m.bulkMigrateModel.mappings = [];
+                m.bulkMigrateModel.suggestions = [];
+                m.bulkMigrateModel.currentStep = 1;
               }}
             >
               {$t.dashboard?.bulk_migrate}
             </button>
             <button
               class="px-3 py-1 text-sm bg-primary text-white border-primary rounded hover:bg-primary-hover transition-colors"
-              onclick={() => (showBackupModal = true)}
+              onclick={() => (m.showBackupModal = true)}
             >
               {$t.dashboard?.bulk_backup}
             </button>
             <button
-              class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors"
-              onclick={clearSelectedIds}
+              class="px-3 py-1 text-sm border border-border-strong rounded hover:bg-surface-muted transition-colors"
+              onclick={() => m.clearSelectedIds()}
             >
               {$t.common?.cancel}
             </button>
@@ -2219,15 +794,15 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
   {/if}
 
   <!-- Migration Modal -->
-  {#if showMigrateModal}
+  {#if m.showMigrateModal}
     <div
       class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      onclick={() => (showMigrateModal = false)}
-      onkeydown={(e) => e.key === "Escape" && (showMigrateModal = false)}
+      onclick={() => (m.showMigrateModal = false)}
+      onkeydown={(e) => e.key === "Escape" && (m.showMigrateModal = false)}
       role="presentation"
     >
       <div
-        class="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto"
+        class="bg-surface-card rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto"
         onclick={(e) => e.stopPropagation()}
         role="dialog"
         aria-modal="true"
@@ -2236,17 +811,17 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
         onkeydown={(e) => e.stopPropagation()}
       >
         <div
-          class="px-6 py-4 border-b border-gray-200 flex items-center justify-between relative"
+          class="px-6 py-4 border-b border-border flex items-center justify-between relative"
         >
           <h2 id="migrate-modal-title" class="text-xl font-bold">
             {($t.dashboard?.migrate_modal_title).replace(
               "{count}",
-              String(selectedIds.size),
+              String(m.selectedIds.size),
             )}
           </h2>
           <button
-            onclick={() => (showMigrateModal = false)}
-            class="absolute top-4 right-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-all"
+            onclick={() => (m.showMigrateModal = false)}
+            class="absolute top-4 right-4 p-2 text-text-subtle hover:text-text-muted hover:bg-surface-muted rounded-full transition-all"
             aria-label={$t.common?.close_modal}
           >
             <svg
@@ -2271,15 +846,15 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
             <div>
               <label
                 for="source-env"
-                class="block text-sm font-medium text-gray-500 mb-1"
+                class="block text-sm font-medium text-text-muted mb-1"
                 >{$t.migration?.source_env}</label
               >
               <div
                 id="source-env"
-                class="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-gray-700 font-medium"
+                class="px-4 py-2 bg-surface-muted border border-border rounded-lg text-text font-medium"
               >
-                {environments.find((e) => e.id === selectedEnv)?.name ||
-                  selectedEnv}
+                {environments.find((e) => e.id === m.selectedEnv)?.name ||
+                  m.selectedEnv}
                 {$t.dashboard?.read_only}
               </div>
             </div>
@@ -2288,19 +863,19 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
             <div>
               <label
                 for="target-env"
-                class="block text-sm font-medium text-gray-700 mb-2"
+                class="block text-sm font-medium text-text mb-2"
                 >{$t.migration?.target_env}</label
               >
               <select
                 id="target-env"
                 class="env-dropdown w-full"
-                value={bulkMigrateModel.targetEnvId}
+                value={m.bulkMigrateModel.targetEnvId}
                 onchange={(e) => {
-                  bulkMigrateModel.selectTargetEnv(e.target.value);
+                  m.bulkMigrateModel.selectTargetEnv(e.target.value);
                   if (e.target.value) {
-                    bulkMigrateModel.fetchDatabases().then(() => {
-                      if (bulkMigrateModel.selectedDashboardIds.length > 0 && bulkMigrateModel.dryRunResult === null) {
-                        bulkMigrateModel.calculateDryRun();
+                    m.bulkMigrateModel.fetchDatabases().then(() => {
+                      if (m.bulkMigrateModel.selectedDashboardIds.length > 0 && m.bulkMigrateModel.dryRunResult === null) {
+                        m.bulkMigrateModel.calculateDryRun();
                       }
                     });
                   }
@@ -2310,7 +885,7 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
                   {$t.dashboard?.target_env_placeholder ||
                     "Select target environment..."}
                 </option>
-                {#each environments.filter((e) => e.id !== selectedEnv) as env}
+                {#each environments.filter((e) => e.id !== m.selectedEnv) as env}
                   <option value={env.id}>{env.name}</option>
                 {/each}
               </select>
@@ -2321,87 +896,87 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
               <div class="flex items-center justify-between mb-2">
                 <label
                   for="use-db-mappings"
-                  class="block text-sm font-medium text-gray-700"
+                  class="block text-sm font-medium text-text"
                   >{$t.migration?.database_mappings}</label
                 >
                 <label class="relative inline-flex items-center cursor-pointer">
                   <input
                     type="checkbox"
                     id="use-db-mappings"
-                    bind:checked={bulkMigrateModel.replaceDb}
+                    bind:checked={m.bulkMigrateModel.replaceDb}
                     class="sr-only peer"
                   />
                   <div
-                    class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary"
+                    class="w-9 h-5 bg-surface-muted peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary-ring rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-surface-card after:border-border-strong after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary"
                   ></div>
-                  <span class="ml-2 text-xs text-gray-500"
-                    >{bulkMigrateModel.replaceDb ? $t.common?.on : $t.common?.off}</span
+                  <span class="ml-2 text-xs text-text-muted"
+                    >{m.bulkMigrateModel.replaceDb ? $t.common?.on : $t.common?.off}</span
                   >
                 </label>
               </div>
 
-              {#if bulkMigrateModel.replaceDb}
+              {#if m.bulkMigrateModel.replaceDb}
                 <div class="flex items-center justify-between mb-2">
-                  {#if bulkMigrateModel.suggestions.length > 0}
+                  {#if m.bulkMigrateModel.suggestions.length > 0}
                     <button
                       class="text-sm text-primary hover:underline"
-                      onclick={() => (isEditingMappings = !isEditingMappings)}
+                      onclick={() => (m.isEditingMappings = !m.isEditingMappings)}
                     >
-                      {isEditingMappings
+                      {m.isEditingMappings
                         ? $t.dashboard?.view_summary
                         : $t.dashboard?.edit_mappings}
                     </button>
                   {/if}
                 </div>
 
-                {#if isEditingMappings}
+                {#if m.isEditingMappings}
                   <div
-                    class="border border-gray-200 rounded-lg overflow-hidden"
+                    class="border border-border rounded-lg overflow-hidden"
                   >
                     <MappingTable
-                      sourceDatabases={bulkMigrateModel.sourceDatabases}
-                      targetDatabases={bulkMigrateModel.targetDatabases}
-                      mappings={bulkMigrateModel.mappings}
-                      suggestions={bulkMigrateModel.suggestions}
-                      onupdate={(e) => bulkMigrateModel.saveMapping(e.detail.sourceUuid, e.detail.targetUuid)}
+                      sourceDatabases={m.bulkMigrateModel.sourceDatabases}
+                      targetDatabases={m.bulkMigrateModel.targetDatabases}
+                      mappings={m.bulkMigrateModel.mappings}
+                      suggestions={m.bulkMigrateModel.suggestions}
+                      onupdate={(e) => m.bulkMigrateModel.saveMapping(e.detail.sourceUuid, e.detail.targetUuid)}
                     />
                   </div>
                 {:else}
                   <div
-                    class="border border-gray-200 rounded-lg overflow-hidden"
+                    class="border border-border rounded-lg overflow-hidden"
                   >
                     <table class="w-full text-sm text-left">
-                      <thead class="bg-gray-50 border-b border-gray-200">
+                      <thead class="bg-surface-muted border-b border-border">
                         <tr>
-                          <th class="px-4 py-2 font-semibold text-gray-700"
+                          <th class="px-4 py-2 font-semibold text-text"
                             >{$t.dashboard?.source_database}</th
                           >
-                          <th class="px-4 py-2 font-semibold text-gray-700"
+                          <th class="px-4 py-2 font-semibold text-text"
                             >{$t.dashboard?.target_database}</th
                           >
-                          <th class="px-4 py-2 font-semibold text-gray-700"
+                          <th class="px-4 py-2 font-semibold text-text"
                             >{$t.dashboard?.match_percent}</th
                           >
                         </tr>
                       </thead>
                       <tbody>
-                        {#if bulkMigrateModel.suggestions.length > 0}
-                          {#each bulkMigrateModel.suggestions as mapping}
-                            {@const targetMapping = bulkMigrateModel.mappings.find(
+                        {#if m.bulkMigrateModel.suggestions.length > 0}
+                          {#each m.bulkMigrateModel.suggestions as mapping}
+                            {@const targetMapping = m.bulkMigrateModel.mappings.find(
                               (m) => m.source_db_uuid === mapping.source_db_uuid,
                             )}
                             <tr
-                              class="border-b border-gray-200 last:border-b-0"
+                              class="border-b border-border last:border-b-0"
                             >
                               <td class="px-4 py-2">{mapping.source_db || mapping.source_db_name}</td>
                               <td class="px-4 py-2">
                                 {#if targetMapping}
-                                  {bulkMigrateModel.targetDatabases.find(
+                                  {m.bulkMigrateModel.targetDatabases.find(
                                     (d) =>
                                       d.uuid === targetMapping.target_db_uuid,
                                   )?.database_name || mapping.target_db || mapping.target_db_name}
                                 {:else}
-                                  <span class="text-red-500"
+                                  <span class="text-destructive"
                                     >{$t.dashboard?.not_mapped}</span
                                   >
                                 {/if}
@@ -2410,8 +985,8 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
                                 <span
                                   class="px-2 py-0.5 rounded-full text-xs font-medium {mapping.confidence >
                                   0.9
-                                    ? 'bg-green-100 text-green-800'
-                                    : 'bg-yellow-100 text-yellow-800'}"
+                                    ? 'bg-success-light text-success'
+                                    : 'bg-warning-light text-warning'}"
                                 >
                                   {Math.round(mapping.confidence * 100)}%
                                 </span>
@@ -2422,9 +997,9 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
                           <tr>
                             <td
                               colspan="3"
-                              class="px-4 py-4 text-center text-gray-500 italic"
+                              class="px-4 py-4 text-center text-text-muted italic"
                             >
-                              {bulkMigrateModel.targetEnvId
+                              {m.bulkMigrateModel.targetEnvId
                                 ? $t.dashboard?.no_databases_to_map ||
                                   "No databases found to map"
                                 : $t.dashboard?.select_target_for_mappings ||
@@ -2437,7 +1012,7 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
                   </div>
                 {/if}
               {:else}
-                <p class="text-xs text-gray-400 italic">
+                <p class="text-xs text-text-subtle italic">
                   {$t.dashboard?.mapping_disabled_hint ||
                     "Database mapping is disabled. Dashboards will be imported with original database references."}
                 </p>
@@ -2449,15 +1024,15 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
               <label class="flex items-start gap-3 cursor-pointer">
                 <input
                   type="checkbox"
-                  bind:checked={bulkMigrateModel.fixCrossFilters}
-                  class="mt-0.5 h-4 w-4 rounded border-gray-300 text-primary focus-visible:ring-primary-ring"
+                  bind:checked={m.bulkMigrateModel.fixCrossFilters}
+                  class="mt-0.5 h-4 w-4 rounded border-border-strong text-primary focus-visible:ring-primary-ring"
                 />
                 <div>
-                  <span class="text-sm font-medium text-gray-900"
+                  <span class="text-sm font-medium text-text"
                     >{$t.dashboard?.fix_cross_filters_title ||
                       "Fix cross-filter bindings"}</span
                   >
-                  <p class="text-xs text-gray-500 mt-0.5">
+                  <p class="text-xs text-text-muted mt-0.5">
                     {$t.dashboard?.fix_cross_filters_hint ||
                       "Automatically remap chart and dataset IDs in cross-filters to target environment IDs. Recommended when migrating dashboards with cross-filters."}
                   </p>
@@ -2467,18 +1042,18 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
 
             <!-- Selected Dashboards List -->
             <div>
-              <p class="block text-sm font-medium text-gray-700 mb-2">
+              <p class="block text-sm font-medium text-text mb-2">
                 {$t.dashboard?.selected_dashboards}
               </p>
               <div
-                class="max-h-40 overflow-y-auto border border-gray-200 rounded-lg bg-gray-50 p-2"
+                class="max-h-40 overflow-y-auto border border-border rounded-lg bg-surface-muted p-2"
               >
-                {#each Array.from(selectedIds) as id}
-                  {#each allDashboards as d}
+                {#each Array.from(m.selectedIds) as id}
+                  {#each m.allDashboards as d}
                     {#if d.id === id}
                       <div class="flex items-center text-sm py-1 px-2">
-                        <span class="text-green-600 mr-2">☑</span>
-                        <span class="text-gray-700">{d.title}</span>
+                        <span class="text-success mr-2">☑</span>
+                        <span class="text-text">{d.title}</span>
                       </div>
                     {/if}
                   {/each}
@@ -2487,10 +1062,10 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
             </div>
 
             <!-- Dry Run Summary -->
-            {#if bulkMigrateModel.targetEnvId && selectedIds.size > 0}
+            {#if m.bulkMigrateModel.targetEnvId && m.selectedIds.size > 0}
               <div class="bg-primary-light border border-primary-ring rounded-lg p-4">
-                {#if bulkMigrateModel.dryRunLoading}
-                  <div class="flex items-center gap-2 text-blue-700 text-sm">
+                {#if m.bulkMigrateModel.dryRunLoading}
+                  <div class="flex items-center gap-2 text-primary text-sm">
                     <svg
                       class="animate-spin h-4 w-4"
                       xmlns="http://www.w3.org/2000/svg"
@@ -2516,28 +1091,28 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
                         "Calculating changes..."}</span
                     >
                   </div>
-                {:else if bulkMigrateModel.error && !bulkMigrateModel.dryRunResult}
-                  <div class="text-red-600 text-sm">
+                {:else if m.bulkMigrateModel.error && !m.bulkMigrateModel.dryRunResult}
+                  <div class="text-destructive text-sm">
                     <span class="font-medium">{$t.common?.error}:</span>
-                    {bulkMigrateModel.error}
+                    {m.bulkMigrateModel.error}
                   </div>
-                {:else if bulkMigrateModel.dryRunResult?.summary}
+                {:else if m.bulkMigrateModel.dryRunResult?.summary}
                   {@const totalDashboards =
-                    bulkMigrateModel.dryRunResult.summary.dashboards?.create +
-                      bulkMigrateModel.dryRunResult.summary.dashboards?.update +
-                      bulkMigrateModel.dryRunResult.summary.dashboards?.delete || 0}
+                    m.bulkMigrateModel.dryRunResult.summary.dashboards?.create +
+                      m.bulkMigrateModel.dryRunResult.summary.dashboards?.update +
+                      m.bulkMigrateModel.dryRunResult.summary.dashboards?.delete || 0}
                   {@const totalCharts =
-                    bulkMigrateModel.dryRunResult.summary.charts?.create +
-                      bulkMigrateModel.dryRunResult.summary.charts?.update +
-                      bulkMigrateModel.dryRunResult.summary.charts?.delete || 0}
+                    m.bulkMigrateModel.dryRunResult.summary.charts?.create +
+                      m.bulkMigrateModel.dryRunResult.summary.charts?.update +
+                      m.bulkMigrateModel.dryRunResult.summary.charts?.delete || 0}
                   {@const totalDatasets =
-                    bulkMigrateModel.dryRunResult.summary.datasets?.create +
-                      bulkMigrateModel.dryRunResult.summary.datasets?.update +
-                      bulkMigrateModel.dryRunResult.summary.datasets?.delete || 0}
+                    m.bulkMigrateModel.dryRunResult.summary.datasets?.create +
+                      m.bulkMigrateModel.dryRunResult.summary.datasets?.update +
+                      m.bulkMigrateModel.dryRunResult.summary.datasets?.delete || 0}
                   {@const totalAll =
                     totalDashboards + totalCharts + totalDatasets}
                   <div
-                    class="text-sm font-medium text-blue-900 flex items-start gap-2"
+                    class="text-sm font-medium text-primary-hover flex items-start gap-2"
                   >
                     <svg
                       class="w-5 h-5 text-primary mt-0.5 shrink-0"
@@ -2567,29 +1142,29 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
             {/if}
           </div>
         </div>
-        <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
+        <div class="px-6 py-4 border-t border-border flex justify-end gap-3">
           <button
-            class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors"
-            onclick={() => (showMigrateModal = false)}
-            disabled={bulkMigrateModel.dryRunLoading || bulkMigrateModel.currentStep >= 4}>{$t.common?.cancel}</button
+            class="px-3 py-1 text-sm border border-border-strong rounded hover:bg-surface-muted transition-colors"
+            onclick={() => (m.showMigrateModal = false)}
+            disabled={m.bulkMigrateModel.dryRunLoading || m.bulkMigrateModel.currentStep >= 4}>{$t.common?.cancel}</button
           >
           <button
             class="px-3 py-1 text-sm bg-primary text-white border-primary rounded hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
             onclick={async () => {
-              if (!bulkMigrateModel.canExecute) return;
-              bulkMigrateModel.goToStep(4);
-              await bulkMigrateModel.executeMigration("/dashboards/migrate");
-              if (!bulkMigrateModel.error) {
-                showMigrateModal = false;
-                clearSelectedIds();
-                bulkMigrateModel.deselectAllDashboards();
-                const task = bulkMigrateModel.selectedTaskStore.current;
+              if (!m.bulkMigrateModel.canExecute) return;
+              m.bulkMigrateModel.goToStep(4);
+              await m.bulkMigrateModel.executeMigration("/dashboards/migrate");
+              if (!m.bulkMigrateModel.error) {
+                m.showMigrateModal = false;
+                m.clearSelectedIds();
+                m.bulkMigrateModel.deselectAllDashboards();
+                const task = m.bulkMigrateModel.selectedTaskStore.current;
                 if (task?.id) openDrawerForTaskIfPreferred(task.id);
               }
             }}
-            disabled={!bulkMigrateModel.canExecute || bulkMigrateModel.dryRunLoading || bulkMigrateModel.currentStep >= 4}
+            disabled={!m.bulkMigrateModel.canExecute || m.bulkMigrateModel.dryRunLoading || m.bulkMigrateModel.currentStep >= 4}
           >
-            {bulkMigrateModel.currentStep >= 4 ? $t.dashboard?.starting : $t.migration?.start}
+            {m.bulkMigrateModel.currentStep >= 4 ? $t.dashboard?.starting : $t.migration?.start}
           </button>
         </div>
       </div>
@@ -2597,15 +1172,15 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
   {/if}
 
   <!-- Backup Modal -->
-  {#if showBackupModal}
+  {#if m.showBackupModal}
     <div
       class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      onclick={() => (showBackupModal = false)}
-      onkeydown={(e) => e.key === "Escape" && (showBackupModal = false)}
+      onclick={() => (m.showBackupModal = false)}
+      onkeydown={(e) => e.key === "Escape" && (m.showBackupModal = false)}
       role="presentation"
     >
       <div
-        class="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto"
+        class="bg-surface-card rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto"
         onclick={(e) => e.stopPropagation()}
         role="dialog"
         aria-modal="true"
@@ -2614,17 +1189,17 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
         onkeydown={(e) => e.stopPropagation()}
       >
         <div
-          class="px-6 py-4 border-b border-gray-200 flex items-center justify-between relative"
+          class="px-6 py-4 border-b border-border flex items-center justify-between relative"
         >
           <h2 id="backup-modal-title" class="text-xl font-bold">
             {($t.dashboard?.backup_modal_title).replace(
               "{count}",
-              String(selectedIds.size),
+              String(m.selectedIds.size),
             )}
           </h2>
           <button
-            onclick={() => (showBackupModal = false)}
-            class="absolute top-4 right-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-all"
+            onclick={() => (m.showBackupModal = false)}
+            class="absolute top-4 right-4 p-2 text-text-subtle hover:text-text-muted hover:bg-surface-muted rounded-full transition-all"
             aria-label={$t.common?.close_modal}
           >
             <svg
@@ -2649,33 +1224,33 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
             <div>
               <label
                 for="backup-env"
-                class="block text-sm font-medium text-gray-500 mb-1"
+                class="block text-sm font-medium text-text-muted mb-1"
                 >{$t.dashboard?.environment}</label
               >
               <div
                 id="backup-env"
-                class="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-gray-700 font-medium"
+                class="px-4 py-2 bg-surface-muted border border-border rounded-lg text-text font-medium"
               >
-                {environments.find((e) => e.id === selectedEnv)?.name ||
-                  selectedEnv}
+                {environments.find((e) => e.id === m.selectedEnv)?.name ||
+                  m.selectedEnv}
                 {$t.dashboard?.read_only}
               </div>
             </div>
 
             <!-- Selected Dashboards List -->
             <div>
-              <p class="block text-sm font-medium text-gray-700 mb-2">
+              <p class="block text-sm font-medium text-text mb-2">
                 {$t.dashboard?.selected_dashboards}
               </p>
               <div
-                class="max-h-40 overflow-y-auto border border-gray-200 rounded-lg bg-gray-50 p-2"
+                class="max-h-40 overflow-y-auto border border-border rounded-lg bg-surface-muted p-2"
               >
-                {#each Array.from(selectedIds) as id}
-                  {#each allDashboards as d}
+                {#each Array.from(m.selectedIds) as id}
+                  {#each m.allDashboards as d}
                     {#if d.id === id}
                       <div class="flex items-center text-sm py-1 px-2">
-                        <span class="text-green-600 mr-2">☑</span>
-                        <span class="text-gray-700">{d.title}</span>
+                        <span class="text-success mr-2">☑</span>
+                        <span class="text-text">{d.title}</span>
                       </div>
                     {/if}
                   {/each}
@@ -2687,7 +1262,7 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
             <div>
               <p
                 id="backup-schedule-label"
-                class="block text-sm font-medium text-gray-700 mb-2"
+                class="block text-sm font-medium text-text mb-2"
               >
                 {$t.dashboard?.schedule}
               </p>
@@ -2697,7 +1272,7 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
                     type="radio"
                     name="schedule"
                     value=""
-                    bind:group={backupSchedule}
+                    bind:group={m.backupSchedule}
                     class="mr-2"
                   />
                   <span class="text-sm">{$t.dashboard?.one_time_backup}</span>
@@ -2707,16 +1282,16 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
                     type="radio"
                     name="schedule"
                     value="0 0 * * *"
-                    bind:group={backupSchedule}
+                    bind:group={m.backupSchedule}
                     class="mr-2"
                   />
                   <span class="text-sm">{$t.dashboard?.schedule_backup}</span>
                 </label>
-                {#if backupSchedule !== ""}
+                {#if m.backupSchedule !== ""}
                   <div class="ml-6">
                     <label
                       for="cron-expression"
-                      class="block text-xs text-gray-500 mb-1"
+                      class="block text-xs text-text-muted mb-1"
                       >{$t.dashboard?.cron_expression}</label
                     >
                     <input
@@ -2725,7 +1300,7 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
                       class="search-input w-full text-sm"
                       placeholder={$t.dashboard?.cron_placeholder ||
                         "0 2 * * * (daily at 2 AM)"}
-                      bind:value={backupSchedule}
+                      bind:value={m.backupSchedule}
                     />
                     <button class="text-xs text-primary hover:underline mt-1"
                       >{$t.dashboard?.cron_help}</button
@@ -2736,18 +1311,18 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
             </div>
           </div>
         </div>
-        <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
+        <div class="px-6 py-4 border-t border-border flex justify-end gap-3">
           <button
-            class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors"
-            onclick={() => (showBackupModal = false)}
-            disabled={isSubmittingBackup}>{$t.common?.cancel}</button
+            class="px-3 py-1 text-sm border border-border-strong rounded hover:bg-surface-muted transition-colors"
+            onclick={() => (m.showBackupModal = false)}
+            disabled={m.isSubmittingBackup}>{$t.common?.cancel}</button
           >
           <button
             class="px-3 py-1 text-sm bg-primary text-white border-primary rounded hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-            onclick={handleBulkBackup}
-            disabled={selectedIds.size === 0 || isSubmittingBackup}
+            onclick={() => m.handleBulkBackup()}
+            disabled={m.selectedIds.size === 0 || m.isSubmittingBackup}
           >
-            {isSubmittingBackup
+            {m.isSubmittingBackup
               ? $t.dashboard?.starting
               : $t.dashboard?.start_backup}
           </button>
diff --git a/frontend/src/routes/dashboards/[id]/+page.svelte b/frontend/src/routes/dashboards/[id]/+page.svelte
index f60d579f..79f9b708 100644
--- a/frontend/src/routes/dashboards/[id]/+page.svelte
+++ b/frontend/src/routes/dashboards/[id]/+page.svelte
@@ -50,11 +50,11 @@
   import { onMount, onDestroy } from "svelte";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { api } from "$lib/api.js";
   import { GitStatusModel } from "$lib/models/GitStatusModel.svelte.ts";
-  import { openDrawerForTaskIfPreferred } from "$lib/stores/taskDrawer.js";
-  import { addToast } from "$lib/toasts";
+  import { openDrawerForTaskIfPreferred } from "$lib/stores/taskDrawer.svelte.js";
+  import { addToast } from "$lib/toasts.svelte.js";
   import Icon from "$lib/ui/Icon.svelte";
   import BranchSelector from "../../../components/git/BranchSelector.svelte";
   import CommitHistory from "../../../components/git/CommitHistory.svelte";
@@ -222,11 +222,12 @@
     isValidationHistoryLoading = true;
     validationHistoryError = null;
     try {
-      const response = await api.getValidationTasks({
-        search: String(targetDashboardRef),
-        page_size: 10,
-        environment_id: envId,
-      });
+      const qs = new URLSearchParams();
+      qs.append('dashboard_id', String(targetDashboardRef));
+      qs.append('environment_id', envId);
+      qs.append('page_size', '10');
+      const { fetchApi } = await import('$lib/api');
+      const response = await fetchApi(`/validation-tasks/runs/all?${qs.toString()}`);
       validationHistory = response?.items || response?.results || [];
     } catch (err) {
       validationHistoryError = err.message || "Failed to load validation history";
@@ -485,8 +486,8 @@
               {#each validationHistory as run}
                 {@const runStatus = String(run.status || "").toUpperCase()}
                 <tr>
-                  <td class="px-3 py-2 text-slate-700">{formatDate(run.created_at || run.started_at)}</td>
-                  <td class="px-3 py-2 text-slate-800">{run.title || run.task_name || run.name || "-"}</td>
+                  <td class="px-3 py-2 text-slate-700">{formatDate(run.timestamp || run.created_at || run.started_at)}</td>
+                  <td class="px-3 py-2 text-slate-800">{run.summary ? run.summary.slice(0, 80) + (run.summary.length > 80 ? '…' : '') : '-'}</td>
                   <td class="px-3 py-2">
                     <span
                       class={`rounded-full px-2 py-1 text-xs font-semibold uppercase ${runStatus === "SUCCESS" || runStatus === "PASS" ? "bg-emerald-100 text-emerald-700" : runStatus === "FAIL" || runStatus === "FAILED" || runStatus === "ERROR" ? "bg-rose-100 text-rose-700" : runStatus === "WARN" ? "bg-amber-100 text-amber-700" : runStatus === "RUNNING" || runStatus === "PENDING" ? "bg-blue-100 text-blue-700" : "bg-slate-100 text-slate-700"}`}
@@ -516,6 +517,18 @@
             </tbody>
           </table>
         </div>
+        <!-- View all link -->
+        <div class="border-t border-slate-100 px-3 py-2 text-right">
+          <a
+            href={`/dashboards/${encodeURIComponent(String(resolvedDashboardId ?? dashboardRef))}/validation?env_id=${encodeURIComponent(envId || '')}`}
+            class="inline-flex items-center gap-1 text-xs font-medium text-indigo-600 hover:text-indigo-800 transition-colors"
+          >
+            {$t.dashboard?.view_all_validation || 'View all validation runs'}
+            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+            </svg>
+          </a>
+        </div>
       {/if}
     </div>
 
@@ -533,12 +546,7 @@
         >
           {$t.dashboard?.git_history || "Git history"}
         </button>
-        <button
-          class={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${activeTab === "tasks" ? "bg-slate-900 text-white" : "bg-slate-100 text-slate-700 hover:bg-slate-200"}`}
-          onclick={() => (activeTab = "tasks")}
-        >
-          {$t.nav?.tasks}
-        </button>
+
       </div>
 
       <div class="space-y-4 p-4">
@@ -556,35 +564,6 @@
               {$t.git?.not_linked || "This dashboard is not yet linked to a Git repository."}
             </div>
           {/if}
-        {:else}
-          <DashboardTaskHistory
-            {isTaskHistoryLoading}
-            {taskHistoryError}
-            {taskHistory}
-            {loadTaskHistory}
-            {toTaskTypeLabel}
-            {getTaskStatusClasses}
-            getValidationStatus={(task) => {
-              if (task?.plugin_id !== "llm_dashboard_validation") return { label: "-", level: "na", icon: "" };
-              const rawStatus = String(task?.validation_status || "").toUpperCase();
-              if (rawStatus === "FAIL") return { label: "FAIL", level: "fail", icon: "!" };
-              if (rawStatus === "WARN") return { label: "WARN", level: "warn", icon: "!" };
-              if (rawStatus === "PASS") return { label: "PASS", level: "pass", icon: "OK" };
-              return { label: "UNKNOWN", level: "unknown", icon: "?" };
-            }}
-            getValidationStatusClasses={(level) => {
-              if (level === "fail") return "bg-rose-100 text-rose-700 border-rose-200";
-              if (level === "warn") return "bg-amber-100 text-amber-700 border-amber-200";
-              if (level === "pass") return "bg-emerald-100 text-emerald-700 border-emerald-200";
-              if (level === "unknown") return "bg-slate-100 text-slate-700 border-slate-200";
-              return "bg-slate-50 text-slate-400 border-slate-200";
-            }}
-            {formatDate}
-            openLlmReport={(taskId) => {
-              if (!taskId) return;
-              window.open(`/reports/llm/${encodeURIComponent(String(taskId))}`, "_blank", "noopener,noreferrer");
-            }}
-          />
         {/if}
       </div>
     </div>
diff --git a/frontend/src/routes/dashboards/[id]/components/DashboardGitManager.svelte b/frontend/src/routes/dashboards/[id]/components/DashboardGitManager.svelte
index 6d5d68e9..5f34d676 100644
--- a/frontend/src/routes/dashboards/[id]/components/DashboardGitManager.svelte
+++ b/frontend/src/routes/dashboards/[id]/components/DashboardGitManager.svelte
@@ -8,7 +8,7 @@
    * @PURPOSE: Git Repository block (status, ahead/behind, changes count, push/pull/sync buttons, and diff preview).
    * @LAYER UI
    */
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
 
   let {
     isGitStatusLoading,
diff --git a/frontend/src/routes/dashboards/[id]/components/DashboardHeader.svelte b/frontend/src/routes/dashboards/[id]/components/DashboardHeader.svelte
index 31147b32..47baa7cd 100644
--- a/frontend/src/routes/dashboards/[id]/components/DashboardHeader.svelte
+++ b/frontend/src/routes/dashboards/[id]/components/DashboardHeader.svelte
@@ -5,7 +5,7 @@
 <!-- @RELATION DEPENDS_ON -> [Icon] -->
 <!-- @UX_STATE Idle -> Header with back button, title, Git status badge, and action buttons. -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import Icon from "$lib/ui/Icon.svelte";
   import BranchSelector from "../../../../components/git/BranchSelector.svelte";
 
diff --git a/frontend/src/routes/dashboards/[id]/components/DashboardLinkedResources.svelte b/frontend/src/routes/dashboards/[id]/components/DashboardLinkedResources.svelte
index bff740d8..35d0ea9c 100644
--- a/frontend/src/routes/dashboards/[id]/components/DashboardLinkedResources.svelte
+++ b/frontend/src/routes/dashboards/[id]/components/DashboardLinkedResources.svelte
@@ -8,7 +8,7 @@
    * @PURPOSE: Block for overview, charts table, and datasets list.
    * @LAYER UI
    */
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import Icon from "$lib/ui/Icon.svelte";
 
   let {
diff --git a/frontend/src/routes/dashboards/[id]/components/DashboardTaskHistory.svelte b/frontend/src/routes/dashboards/[id]/components/DashboardTaskHistory.svelte
index 0ea838a5..ecb4bd48 100644
--- a/frontend/src/routes/dashboards/[id]/components/DashboardTaskHistory.svelte
+++ b/frontend/src/routes/dashboards/[id]/components/DashboardTaskHistory.svelte
@@ -8,7 +8,7 @@
    * @PURPOSE: Block for recent tasks table.
    * @LAYER UI
    */
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
 
   let {
     isTaskHistoryLoading,
diff --git a/frontend/src/routes/dashboards/__tests__/dashboard-profile-override.integration.test.ts b/frontend/src/routes/dashboards/__tests__/dashboard-profile-override.integration.test.ts
index bef64e22..9dc08e36 100644
--- a/frontend/src/routes/dashboards/__tests__/dashboard-profile-override.integration.test.ts
+++ b/frontend/src/routes/dashboards/__tests__/dashboard-profile-override.integration.test.ts
@@ -10,7 +10,7 @@ import { writable } from "svelte/store";
 
 import DashboardsPage from "../+page.svelte";
 import { api } from "$lib/api.js";
-import { initializeEnvironmentContext } from "$lib/stores/environmentContext.js";
+import { initializeEnvironmentContext } from "$lib/stores/environmentContext.svelte.js";
 
 const mockedApi = /** @type {any} */ (api);
 const mockedInitializeEnvironmentContext =
@@ -26,11 +26,11 @@ vi.mock("$lib/api.js", () => ({
   },
 }));
 
-vi.mock("$lib/toasts", () => ({
+vi.mock('$lib/toasts.svelte.js', () => ({
   addToast: vi.fn(),
 }));
 
-vi.mock("$lib/stores/taskDrawer.js", () => ({
+vi.mock("$lib/stores/taskDrawer.svelte.js", () => ({
   openDrawerForTask: vi.fn(),
 }));
 
@@ -46,7 +46,7 @@ vi.mock("../../services/gitService.js", () => ({
   },
 }));
 
-vi.mock("$lib/stores/environmentContext.js", () => {
+vi.mock("$lib/stores/environmentContext.svelte.js", () => {
   const context = writable({
     environments: [{ id: "dev", name: "Development" }],
     selectedEnvId: "dev",
@@ -61,7 +61,7 @@ vi.mock("$lib/stores/environmentContext.js", () => {
   };
 });
 
-vi.mock("$lib/i18n", () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: {
     subscribe: (run) => {
       run({
diff --git a/frontend/src/routes/dashboards/health/+page.svelte b/frontend/src/routes/dashboards/health/+page.svelte
index 46a69d66..5e6f4a17 100644
--- a/frontend/src/routes/dashboards/health/+page.svelte
+++ b/frontend/src/routes/dashboards/health/+page.svelte
@@ -1,42 +1,62 @@
-<!-- #region HealthCenterPage [C:3] [TYPE Page] [SEMANTICS sveltekit, health, matrix, validation, environment] -->
-<!-- @BRIEF Main page for the Dashboard Health Center showing health matrix table with environment filtering. -->
+<!-- #region HealthCenterPage [C:5] [TYPE Page] [SEMANTICS sveltekit, health, matrix, dashboard-cards, validation, environment] -->
+<!-- @BRIEF Dashboard Health Center — clickable health matrix + card-based dashboard list with integrated schedule.
+     Cards replace the old table; matrix clicks filter the list. -->
 <!-- @LAYER Page -->
 <!-- @RELATION DEPENDS_ON -> [HealthMatrix] -->
 <!-- @RELATION DEPENDS_ON -> [ScheduleAtAGlance] -->
 <!-- @RELATION CALLS -> [EXT:frontend:api_module] -->
-<!-- @UX_STATE Idle -> Displays Health Center with HealthMatrix and validation details table. -->
-<!-- @UX_STATE Loading -> Spinner and skeleton shown during data fetch. -->
-<!-- @UX_STATE Error -> Error message displayed inline. -->
 <script lang="ts">
   import { onMount } from 'svelte';
   import { SvelteSet } from 'svelte/reactivity';
   import HealthMatrix from '$lib/components/health/HealthMatrix.svelte';
   import ScheduleAtAGlance from '$lib/components/health/ScheduleAtAGlance.svelte';
   import { getHealthSummary, getEnvironments, getConsolidatedSettings, requestApi } from '$lib/api.js';
-  import { healthStore } from '$lib/stores/health.js';
-  import { t } from '$lib/i18n';
-  import { addToast } from '$lib/toasts';
+  import { healthStore } from '$lib/stores/health.svelte.js';
+  import { t } from '$lib/i18n/index.svelte.js';
+  import { addToast } from '$lib/toasts.svelte.js';
   import { formatDistanceToNow } from 'date-fns';
 
-  let healthData = $state({
-    items: [],
-    pass_count: 0,
-    warn_count: 0,
-    fail_count: 0,
-    unknown_count: 0
-  });
-  let environments = $state([]);
+  interface HealthItem {
+    record_id?: string;
+    dashboard_id: string;
+    dashboard_slug?: string;
+    dashboard_title?: string;
+    dashboard_name?: string;
+    environment_id: string;
+    status: string;
+    last_check: string;
+    task_id?: string;
+    run_id?: string;
+    policy_id?: string;
+    summary?: string;
+    execution_path?: string;
+    issues_count?: number;
+    timings?: Record<string, unknown>;
+    chunk_count?: number;
+  }
+
+  let healthData = $state<{
+    items: HealthItem[];
+    pass_count: number;
+    warn_count: number;
+    fail_count: number;
+    unknown_count: number;
+  }>({ items: [], pass_count: 0, warn_count: 0, fail_count: 0, unknown_count: 0 });
+  let environments = $state<Array<{ id: string; name?: string }>>([]);
   let selectedEnvId = $state('');
   let appTimezone = $state('Europe/Moscow');
   let loading = $state(true);
-  let error = $state(null);
-  let deletingReportIds = new SvelteSet();
+  let error = $state<string | null>(null);
+  let deletingReportIds = new SvelteSet<string>();
+  let activeStatusFilter = $state('');
+
+  // Derived: filtered items based on matrix selection
+  let filteredItems = $derived(
+    activeStatusFilter
+      ? healthData.items.filter((item) => item.status === activeStatusFilter)
+      : healthData.items
+  );
 
-  // #region loadData:Function [TYPE Function]
-  // @PURPOSE: Load health summary rows and environment options for the current filter.
-  // @PRE: Page is mounted or environment selection changed.
-  // @POST: `healthData` and `environments` reflect latest backend response.
-  // @SIDE_EFFECT: Calls backend API endpoints for health summary and environments.
   async function loadData() {
     loading = true;
     error = null;
@@ -49,201 +69,253 @@
         getEnvironments(),
         getConsolidatedSettings().catch(() => ({ app_timezone: 'Europe/Moscow' }))
       ]);
-      healthData = summary;
-      environments = envs;
+      healthData = summary as typeof healthData;
+      environments = envs as Array<{ id: string; name?: string }>;
       appTimezone = consolidated.app_timezone || 'Europe/Moscow';
       if (!selectedEnvId && envs.length > 0) {
-        // Pre-fill with active environment from global context
         const { get } = await import('svelte/store');
-        const envCtx = await import('$lib/stores/environmentContext.js');
+        const envCtx = await import('$lib/stores/environmentContext.svelte.js');
         const state = get(envCtx.environmentContextStore);
-        if (state.selectedEnvId && envs.some((e) => e.id === state.selectedEnvId)) {
+        if (state.selectedEnvId && envs.some((e: { id: string }) => e.id === state.selectedEnvId)) {
           selectedEnvId = state.selectedEnvId;
         }
       }
-    } catch (e) {
-      error = e.message;
+    } catch (e: unknown) {
+      error = e instanceof Error ? e.message : String(e);
     } finally {
       loading = false;
     }
   }
-  // #endregion loadData:Function
 
-  onMount(() => {
-    loadData();
-  });
+  onMount(() => { loadData(); });
 
-  // #region handleEnvChange:Function [TYPE Function]
-  // @PURPOSE: Apply environment filter and trigger health summary reload.
-  // @PRE: DOM change event carries target value.
-  // @POST: selectedEnvId is updated and new data load starts.
-  function handleEnvChange(e) {
-    selectedEnvId = e.target.value;
+  function handleEnvChange(e: Event) {
+    selectedEnvId = (e.target as HTMLSelectElement).value;
     loadData();
   }
-  // #endregion handleEnvChange:Function
 
-  // #region handleDeleteReport:Function [TYPE Function]
-  // @PURPOSE: Delete one health report row with confirmation and optimistic button lock.
-  // @PRE: item contains `record_id` from health summary payload.
-  // @POST: Row is removed from backend and page data is reloaded on success.
-  // @SIDE_EFFECT: Calls DELETE health API and emits toast notifications.
-  async function handleDeleteReport(item) {
+  function handleMatrixSelect(status: string) {
+    activeStatusFilter = status;
+  }
+
+  async function handleDeleteReport(item: HealthItem) {
     if (!item?.record_id || deletingReportIds.has(item.record_id)) return;
-    if (!confirm($t.health?.delete_confirm.replace('{slug}', item.dashboard_slug || item.dashboard_id))) return;
+    const slug = item.dashboard_slug || item.dashboard_name || item.dashboard_id;
+    if (!confirm(($t.health?.delete_confirm || 'Delete report for {slug}?').replace('{slug}', slug))) return;
 
     deletingReportIds.add(item.record_id);
-
     try {
       await requestApi(`/health/summary/${item.record_id}`, 'DELETE');
-      addToast($t.health?.delete_success.replace('{slug}', item.dashboard_slug || item.dashboard_id), 'success');
+      addToast(($t.health?.delete_success || 'Report for {slug} deleted').replace('{slug}', slug), 'success');
       await loadData();
-    } catch (e) {
-      addToast(
-        $t.health?.delete_failed.replace('{error}', e?.message || $t.common?.error),
-        'error',
-      );
+    } catch (e: unknown) {
+      addToast(($t.health?.delete_failed || 'Failed to delete: {error}').replace('{error}', e instanceof Error ? e.message : 'Unknown'), 'error');
     } finally {
       deletingReportIds.delete(item.record_id);
     }
   }
-  // #endregion handleDeleteReport:Function
+
+  function formatRelativeDate(ts: string): string {
+    return formatDistanceToNow(new Date(ts), { addSuffix: true });
+  }
+
+  function getStatusBadge(status: string): string {
+    switch (status) {
+      case 'PASS': return 'bg-green-100 text-green-800 ring-1 ring-green-300';
+      case 'WARN': return 'bg-yellow-100 text-yellow-800 ring-1 ring-yellow-300';
+      case 'FAIL': return 'bg-red-100 text-red-800 ring-1 ring-red-300';
+      default: return 'bg-gray-100 text-gray-600 ring-1 ring-gray-200';
+    }
+  }
 </script>
 
-<div class="container mx-auto p-6">
-  <div class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4">
+<div class="max-w-7xl mx-auto px-4 py-6">
+  <!-- Header -->
+  <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-6 gap-4">
     <div>
-      <h1 class="text-3xl font-bold text-gray-900">{$t.health?.title}</h1>
-      <p class="text-gray-500 mt-1">{$t.health?.subtitle}</p>
+      <h1 class="text-2xl font-bold text-gray-900">{$t.health?.title || 'Dashboard Health Center'}</h1>
+      <p class="text-sm text-gray-500 mt-1">{$t.health?.subtitle || 'Monitor the latest validation status across your environments.'}</p>
     </div>
-
     <div class="flex items-center gap-3">
-      <label for="env-select" class="text-sm font-medium text-gray-700 whitespace-nowrap">{$t.health?.environment_label}</label>
-      <select 
-        id="env-select"
-        class="block w-full md:w-48 pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+      <select
         value={selectedEnvId}
         onchange={handleEnvChange}
+        class="w-44 px-3 py-2 text-sm border-gray-300 rounded-lg bg-white shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
       >
-        <option value="">{$t.health?.all_environments}</option>
+        <option value="">{$t.health?.all_environments || 'All'}</option>
         {#each environments as env (env.id)}
           <option value={env.id}>{env.name || env.id}</option>
         {/each}
       </select>
-      
-      <button 
+      <button
         onclick={loadData}
         disabled={loading}
-        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+        class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 transition-colors"
       >
-        {$t.common?.refresh}
+        <svg class="w-4 h-4" class:animate-spin={loading} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+        </svg>
+        {$t.common?.refresh || 'Refresh'}
       </button>
     </div>
   </div>
-  
-  <HealthMatrix 
+
+  <!-- Clickable Health Matrix -->
+  <HealthMatrix
     pass_count={healthData.pass_count}
     warn_count={healthData.warn_count}
     fail_count={healthData.fail_count}
     unknown_count={healthData.unknown_count}
-    {loading} 
-    {error} 
+    selectedFilter={activeStatusFilter}
+    onSelect={handleMatrixSelect}
+    {loading}
+    {error}
   />
 
-  <div class="mt-6">
+  <!-- Schedule (compact) -->
+  <div class="mt-5">
     <ScheduleAtAGlance
       healthItems={healthData.items}
-      selectedEnvId={selectedEnvId}
+      {selectedEnvId}
       {appTimezone}
     />
   </div>
 
-  <div class="mt-6 bg-white shadow overflow-hidden sm:rounded-lg border border-gray-200">
-    <div class="px-4 py-5 sm:px-6 border-b border-gray-200 bg-gray-50">
-      <h3 class="text-lg leading-6 font-medium text-gray-900">{$t.health?.validation_details}</h3>
+  <!-- Dashboard Cards -->
+  <div class="mt-5">
+    <div class="flex items-center justify-between mb-3">
+      <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">
+        {$t.health?.validation_details || 'Dashboards'}
+        {#if activeStatusFilter}
+          <span class="font-normal normal-case text-gray-400"> · filtered by {activeStatusFilter}</span>
+        {/if}
+      </h2>
+      <span class="text-xs text-gray-400">{filteredItems.length} {filteredItems.length === 1 ? 'dashboard' : 'dashboards'}</span>
     </div>
-    <div class="overflow-x-auto">
-      <table class="min-w-full divide-y divide-gray-200">
-        <thead class="bg-gray-50">
-          <tr>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.health?.table_dashboard}</th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.health?.table_environment}</th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.health?.table_status}</th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.health?.table_last_check}</th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.health?.table_summary}</th>
-            <th scope="col" class="relative px-6 py-3">
-              <span class="sr-only">{$t.common?.actions}</span>
-            </th>
-          </tr>
-        </thead>
-        <tbody class="bg-white divide-y divide-gray-200">
-          {#if loading}
-            {#each Array(3) as _, i (i)}
-              <tr class="animate-pulse">
-                <td class="px-6 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-32"></div></td>
-                <td class="px-6 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-16"></div></td>
-                <td class="px-6 py-4 whitespace-nowrap"><div class="h-6 bg-gray-200 rounded-full w-16"></div></td>
-                <td class="px-6 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-24"></div></td>
-                <td class="px-6 py-4"><div class="h-4 bg-gray-200 rounded w-full"></div></td>
-                <td class="px-6 py-4"></td>
-              </tr>
-            {/each}
-          {:else if healthData.items.length === 0}
-            <tr>
-              <td colspan="6" class="px-6 py-10 text-center text-sm text-gray-500">
-                {$t.health?.no_records}
-              </td>
-            </tr>
-          {:else}
-              {#each healthData.items as item (item.record_id || item.dashboard_id)}
-              <tr class="hover:bg-gray-50 transition-colors">
-                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                  <!-- svelte-ignore svelte/no-navigation-without-resolve -->
+
+    {#if loading}
+      <div class="space-y-3">
+        {#each Array(4) as _, i (i)}
+          <div class="animate-pulse bg-white border border-gray-200 rounded-xl p-5">
+            <div class="flex items-center justify-between mb-3">
+              <div class="h-5 bg-gray-100 rounded w-48"></div>
+              <div class="h-6 bg-gray-100 rounded-full w-16"></div>
+            </div>
+            <div class="h-4 bg-gray-100 rounded w-full mb-2"></div>
+            <div class="h-4 bg-gray-100 rounded w-3/4"></div>
+          </div>
+        {/each}
+      </div>
+    {:else if filteredItems.length === 0}
+      <div class="bg-white border-2 border-dashed border-gray-200 rounded-xl p-12 text-center">
+        <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+        </svg>
+        <p class="text-sm text-gray-400">{$t.health?.no_records || 'No validation records found'}</p>
+        {#if activeStatusFilter}
+          <button onclick={() => { activeStatusFilter = ''; }} class="mt-3 text-xs text-indigo-600 hover:text-indigo-800 underline">
+            {$t.validation?.clear_filters || 'Clear filter'}
+          </button>
+        {/if}
+      </div>
+    {:else}
+      <div class="space-y-3">
+        {#each filteredItems as item (item.record_id || item.dashboard_id)}
+          <div class="bg-white border border-gray-200 rounded-xl p-5 hover:border-gray-300 hover:shadow-sm transition-all">
+            <!-- Card top: name + status + last check -->
+            <div class="flex items-start justify-between mb-3">
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center gap-2 flex-wrap">
                   <a
                     href={`/dashboards/${encodeURIComponent(String(item.dashboard_slug || item.dashboard_id))}?env_id=${encodeURIComponent(item.environment_id)}`}
-                    class="text-indigo-600 hover:text-indigo-900 hover:underline"
+                    class="text-base font-semibold text-gray-900 hover:text-indigo-600 hover:underline truncate"
                   >
-                    {item.dashboard_slug || item.dashboard_id}
+                    {item.dashboard_name || item.dashboard_title || item.dashboard_slug || item.dashboard_id}
                   </a>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                  <span class="px-2 py-1 bg-gray-100 rounded text-xs font-mono">{item.environment_id}</span>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <span class="px-2.5 py-0.5 rounded-full text-xs font-medium
-                    {item.status === 'PASS' ? 'bg-green-100 text-green-800' : 
-                     item.status === 'WARN' ? 'bg-yellow-100 text-yellow-800' : 
-                     item.status === 'FAIL' ? 'bg-red-100 text-red-800' : 
-                     'bg-gray-100 text-gray-800'}">
-                    {item.status}
-                  </span>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                  {formatDistanceToNow(new Date(item.last_check), { addSuffix: true })}
-                </td>
-                <td class="px-6 py-4 text-sm text-gray-500 max-w-xs truncate">
-                    {item.summary || '-'}
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                  {#if item.task_id}
-                    <!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-                    <a href={`/reports/llm/${item.task_id}`} class="text-indigo-600 hover:text-indigo-900">{$t.health?.view_report}</a>
-                  {/if}
-                  <button
-                    type="button"
-                    class="ml-3 text-red-600 hover:text-red-900"
-                    onclick={() => handleDeleteReport(item)}
-                    disabled={deletingReportIds.has(item.record_id)}
+                  <a
+                    href={`/dashboards/${encodeURIComponent(String(item.dashboard_id))}/validation?env_id=${encodeURIComponent(item.environment_id)}`}
+                    class="inline-flex items-center gap-0.5 text-[11px] text-gray-400 hover:text-indigo-600 transition-colors flex-shrink-0"
+                    title="View full validation history"
                   >
-                    {deletingReportIds.has(item.record_id) ? '...' : $t.common?.delete}
-                  </button>
-                </td>
-              </tr>
-            {/each}
-          {/if}
-        </tbody>
-      </table>
-    </div>
+                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                    </svg>
+                    {$t.health?.view_history || 'History'}
+                  </a>
+                  <span class="text-[10px] text-gray-400 font-mono">{item.environment_id}</span>
+                </div>
+              </div>
+              <div class="flex items-center gap-2 flex-shrink-0 ml-3">
+                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold {getStatusBadge(item.status)}">{item.status}</span>
+              </div>
+            </div>
+
+            <!-- Card meta: path, issues, chunks, time -->
+            <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500 mb-2">
+              {#if item.execution_path === 'screenshot'}
+                <span class="inline-flex items-center gap-1"><span class="text-gray-400">📷</span> Screenshot</span>
+              {:else if item.execution_path === 'text_only'}
+                <span class="inline-flex items-center gap-1"><span class="text-gray-400">📝</span> Text</span>
+              {:else}
+                <span>—</span>
+              {/if}
+              <span>·</span>
+              {#if item.issues_count != null}
+                <span class="font-medium" class:text-red-600={item.status === 'FAIL'} class:text-yellow-600={item.status === 'WARN'}>
+                  {item.issues_count} issue{item.issues_count !== 1 ? 's' : ''}
+                </span>
+              {:else}
+                <span>—</span>
+              {/if}
+              {#if item.chunk_count != null}
+                <span>·</span>
+                <span>{item.chunk_count} chunk{item.chunk_count > 1 ? 's' : ''}</span>
+              {/if}
+              <span>·</span>
+              <span class="text-gray-400">{formatRelativeDate(item.last_check)}</span>
+            </div>
+
+            <!-- Summary -->
+            {#if item.summary}
+              <p class="text-sm text-gray-600 line-clamp-2 mb-3 leading-relaxed">{item.summary}</p>
+            {/if}
+
+            <!-- Card actions -->
+            <div class="flex items-center gap-3 pt-1">
+              {#if item.policy_id && item.run_id}
+                <a
+                  href={`/validation-tasks/${encodeURIComponent(item.policy_id)}/runs/${encodeURIComponent(item.run_id)}`}
+                  class="inline-flex items-center gap-1 text-xs font-medium text-indigo-600 hover:text-indigo-800 transition-colors"
+                >
+                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                  </svg>
+                  {$t.health?.view_report || 'Open Report'}
+                </a>
+              {:else if item.task_id}
+                <a
+                  href={`/reports/llm/${item.task_id}`}
+                  class="inline-flex items-center gap-1 text-xs font-medium text-indigo-600 hover:text-indigo-800 transition-colors"
+                >
+                  {$t.health?.view_report || 'Open Report'}
+                </a>
+              {/if}
+              <button
+                type="button"
+                class="inline-flex items-center gap-1 text-xs text-gray-400 hover:text-red-600 transition-colors ml-auto"
+                onclick={() => handleDeleteReport(item)}
+                disabled={deletingReportIds.has(item.record_id!)}
+              >
+                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+                {deletingReportIds.has(item.record_id!) ? '...' : $t.common?.delete || 'Delete'}
+              </button>
+            </div>
+          </div>
+        {/each}
+      </div>
+    {/if}
   </div>
 </div>
 <!-- #endregion HealthCenterPage -->
diff --git a/frontend/src/routes/dashboards/health/__tests__/health_page.integration.test.ts b/frontend/src/routes/dashboards/health/__tests__/health_page.integration.test.ts
index 1754e8a4..f7ce3cb3 100644
--- a/frontend/src/routes/dashboards/health/__tests__/health_page.integration.test.ts
+++ b/frontend/src/routes/dashboards/health/__tests__/health_page.integration.test.ts
@@ -17,7 +17,7 @@ describe('Dashboard health page contract', () => {
   it('renders slug-first dashboard link bound to environment route context', () => {
     const source = fs.readFileSync(PAGE_PATH, 'utf-8');
 
-    expect(source).toContain("{$t.health?.table_dashboard}");
+    expect(source).toContain("{$t.health?.validation_details || 'Dashboards'}");
     expect(source).toContain("item.dashboard_slug || item.dashboard_id");
     expect(source).toContain("href={`/dashboards/${encodeURIComponent(String(item.dashboard_slug || item.dashboard_id))}?env_id=${encodeURIComponent(item.environment_id)}`}");
   });
@@ -25,16 +25,16 @@ describe('Dashboard health page contract', () => {
   it('keeps explicit delete report flow with confirm and DELETE request', () => {
     const source = fs.readFileSync(PAGE_PATH, 'utf-8');
 
-    expect(source).toContain('async function handleDeleteReport(item)');
+    expect(source).toContain('async function handleDeleteReport(item: HealthItem)');
     expect(source).toContain("requestApi(`/health/summary/${item.record_id}`, 'DELETE')");
-    expect(source).toContain("$t.health?.delete_confirm.replace('{slug}', item.dashboard_slug || item.dashboard_id)");
+    expect(source).toContain(".replace('{slug}', slug)");
     expect(source).toContain("$t.common?.delete");
   });
 
   it('reuses global health store refresh for all-environment summary loads', () => {
     const source = fs.readFileSync(PAGE_PATH, 'utf-8');
 
-    expect(source).toContain("import { healthStore } from '$lib/stores/health.js';");
+    expect(source).toContain("import { healthStore } from '$lib/stores/health.svelte.js';");
     expect(source).toContain('? getHealthSummary(selectedEnvId)');
     expect(source).toContain(': healthStore.refresh();');
   });
diff --git a/frontend/src/routes/datasets/+page.svelte b/frontend/src/routes/datasets/+page.svelte
index 3c95b521..70b28b27 100644
--- a/frontend/src/routes/datasets/+page.svelte
+++ b/frontend/src/routes/datasets/+page.svelte
@@ -2,8 +2,7 @@
 <script lang="ts">
   import { onMount, onDestroy } from "svelte";
   import { SvelteSet } from "svelte/reactivity";
-  import { fromStore } from "svelte/store";
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { api } from "$lib/api.js";
   import HelpTooltip from "$lib/ui/HelpTooltip.svelte";
   import { debounce } from "$lib/utils/debounce.js";
@@ -11,16 +10,14 @@
     environmentContextStore,
     initializeEnvironmentContext,
     setSelectedEnvironment,
-  } from "$lib/stores/environmentContext.js";
+  } from "$lib/stores/environmentContext.svelte.js";
   import {
     openDrawerForTaskIfPreferred,
-  } from "$lib/stores/taskDrawer.js";
+  } from "$lib/stores/taskDrawer.svelte.js";
   import StatsBar from "./StatsBar.svelte";
   import DatasetList from "./DatasetList.svelte";
   import DatasetPreview from "./DatasetPreview.svelte";
 
-  const envCtx = fromStore(environmentContextStore);
-
   let selectedEnv = $state(null);
   let datasets = $state([]);
   let dsError = $state(null), dsLoading = $state(true);
@@ -221,7 +218,7 @@
 
   onMount(async () => {
     await initializeEnvironmentContext();
-    selectedEnv = envCtx.current?.selectedEnvId;
+    selectedEnv = environmentContextStore.value?.selectedEnvId;
     if (selectedEnv) {
       setSelectedEnvironment(selectedEnv);
       await loadDatasets();
@@ -243,7 +240,7 @@
 
   // Environment change
   $effect(() => {
-    const next = envCtx.current?.selectedEnvId;
+    const next = environmentContextStore.value?.selectedEnvId;
     if (next && next !== selectedEnv) {
       selectedEnv = next;
       setSelectedEnvironment(next);
diff --git a/frontend/src/routes/datasets/ColumnsTable.svelte b/frontend/src/routes/datasets/ColumnsTable.svelte
index 1bb1eda0..a6434e63 100644
--- a/frontend/src/routes/datasets/ColumnsTable.svelte
+++ b/frontend/src/routes/datasets/ColumnsTable.svelte
@@ -6,7 +6,7 @@
 <!-- @UX_STATE Editing -> One row in edit mode (textarea), others dimmed. -->
 <!-- @UX_REACTIVITY Props -> columns, datasetId -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { api } from "$lib/api.js";
 
   let { columns = [], datasetId, envId } = $props();
diff --git a/frontend/src/routes/datasets/DatasetList.svelte b/frontend/src/routes/datasets/DatasetList.svelte
index aa3cca4d..49dcdde8 100644
--- a/frontend/src/routes/datasets/DatasetList.svelte
+++ b/frontend/src/routes/datasets/DatasetList.svelte
@@ -8,7 +8,7 @@
 <!-- @UX_STATE Empty -> "No datasets found" after search/filter. -->
 <!-- @UX_REACTIVITY Props -> datasets, selectedIds, isLoading, error, total, page, totalPages, pageSize, onselect, onaction, onpagechange, onsearch, oncheckbox -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
 
   let {
     datasets = [],
diff --git a/frontend/src/routes/datasets/DatasetPreview.svelte b/frontend/src/routes/datasets/DatasetPreview.svelte
index 9a80c15e..d93d376e 100644
--- a/frontend/src/routes/datasets/DatasetPreview.svelte
+++ b/frontend/src/routes/datasets/DatasetPreview.svelte
@@ -8,7 +8,7 @@
 <!-- @UX_STATE Loaded -> Full detail. -->
 <!-- @UX_STATE Error -> Error banner with retry. -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import ColumnsTable from "./ColumnsTable.svelte";
   import MetricsTable from "./MetricsTable.svelte";
 
diff --git a/frontend/src/routes/datasets/MetricsTable.svelte b/frontend/src/routes/datasets/MetricsTable.svelte
index d3f6ed66..00248a25 100644
--- a/frontend/src/routes/datasets/MetricsTable.svelte
+++ b/frontend/src/routes/datasets/MetricsTable.svelte
@@ -6,7 +6,7 @@
 <!-- @UX_STATE Editing -> One row in edit mode. -->
 <!-- @UX_REACTIVITY Props -> metrics, datasetId -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { api } from "$lib/api.js";
 
   let { metrics = [], datasetId, envId } = $props();
diff --git a/frontend/src/routes/datasets/StatsBar.svelte b/frontend/src/routes/datasets/StatsBar.svelte
index 36f338f5..dbab7af7 100644
--- a/frontend/src/routes/datasets/StatsBar.svelte
+++ b/frontend/src/routes/datasets/StatsBar.svelte
@@ -9,7 +9,7 @@
 <!-- @UX_REACTIVITY Props -> stats, activeFilter, isLoading -->
 <!-- @UX_REACTIVITY Events -> onfilter(filterKey) emitted on pill click -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
 
   let { stats = null, activeFilter = null, isLoading = false, onfilter } = $props();
 
diff --git a/frontend/src/routes/datasets/[id]/+page.svelte b/frontend/src/routes/datasets/[id]/+page.svelte
index b656548c..ca140342 100644
--- a/frontend/src/routes/datasets/[id]/+page.svelte
+++ b/frontend/src/routes/datasets/[id]/+page.svelte
@@ -42,9 +42,9 @@
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { api } from "$lib/api.js";
-  import { openDrawerForTask } from "$lib/stores/taskDrawer.js";
+  import { openDrawerForTask } from "$lib/stores/taskDrawer.svelte.js";
 
   // Get dataset ID from URL params
   let datasetId = $derived(page.params.id);
diff --git a/frontend/src/routes/datasets/review/+page.svelte b/frontend/src/routes/datasets/review/+page.svelte
index 9bf04037..a0469bfb 100644
--- a/frontend/src/routes/datasets/review/+page.svelte
+++ b/frontend/src/routes/datasets/review/+page.svelte
@@ -11,17 +11,14 @@
 <!-- @UX_RECOVERY User can correct invalid input and retry without losing environment selection. -->
 <script lang="ts">
   import { goto } from "$app/navigation";
-  import { fromStore } from "svelte/store";
   import SourceIntakePanel from "$lib/components/dataset-review/SourceIntakePanel.svelte";
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { api } from "$lib/api.js";
   import { requestDatasetReviewApi } from "$lib/api/datasetReview.js";
   import {
     environmentContextStore,
     initializeEnvironmentContext,
-  } from "$lib/stores/environmentContext.js";
-
-  const environmentContextState = fromStore(environmentContextStore);
+  } from "$lib/stores/environmentContext.svelte.js";
 
   let isBootstrapping = $state(true);
   let isSubmitting = $state(false);
@@ -36,9 +33,9 @@
   let totalSessions = $state(0);
   let deleteConfirmSessionId = $state(null);
 
-  const environments = $derived(environmentContextState.current?.environments || []);
+  const environments = $derived(environmentContextStore.value?.environments || []);
   const selectedEnvironmentId = $derived(
-    environmentContextState.current?.selectedEnvId || "",
+    environmentContextStore.value?.selectedEnvId || "",
   );
   const hasExistingSessions = $derived(sessions.length > 0);
   const totalPages = $derived(totalSessions > 0 ? Math.ceil(totalSessions / pageSize) : 1);
diff --git a/frontend/src/routes/datasets/review/ReviewWorkspaceHeader.svelte b/frontend/src/routes/datasets/review/ReviewWorkspaceHeader.svelte
index 52050860..8f916bed 100644
--- a/frontend/src/routes/datasets/review/ReviewWorkspaceHeader.svelte
+++ b/frontend/src/routes/datasets/review/ReviewWorkspaceHeader.svelte
@@ -2,7 +2,7 @@
 <!-- @BRIEF Header section for the dataset review workspace with title, description, and status badges. -->
 <!-- @LAYER UI -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
 
   let { session, currentWorkspaceState, readinessLabel, getWorkspaceStateLabel, profile } = $props();
 </script>
diff --git a/frontend/src/routes/datasets/review/ReviewWorkspaceLeftSidebar.svelte b/frontend/src/routes/datasets/review/ReviewWorkspaceLeftSidebar.svelte
index 6c269200..7e45ae7f 100644
--- a/frontend/src/routes/datasets/review/ReviewWorkspaceLeftSidebar.svelte
+++ b/frontend/src/routes/datasets/review/ReviewWorkspaceLeftSidebar.svelte
@@ -2,7 +2,7 @@
 <!-- @BRIEF Left sidebar for dataset review workspace: source info, import status, session summary, clarification focus, primary actions. -->
 <!-- @LAYER UI -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
 
   let {
     session,
diff --git a/frontend/src/routes/datasets/review/ReviewWorkspaceRightRail.svelte b/frontend/src/routes/datasets/review/ReviewWorkspaceRightRail.svelte
index b1168a7b..8ef56796 100644
--- a/frontend/src/routes/datasets/review/ReviewWorkspaceRightRail.svelte
+++ b/frontend/src/routes/datasets/review/ReviewWorkspaceRightRail.svelte
@@ -2,7 +2,7 @@
 <!-- @BRIEF Right rail for dataset review workspace: next action, blockers, health counts, exports, SQL preview, launch panel. -->
 <!-- @LAYER UI -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import CompiledSQLPreview from "$lib/components/dataset-review/CompiledSQLPreview.svelte";
   import LaunchConfirmationPanel from "$lib/components/dataset-review/LaunchConfirmationPanel.svelte";
 
diff --git a/frontend/src/routes/datasets/review/[id]/+page.svelte b/frontend/src/routes/datasets/review/[id]/+page.svelte
index f3df6695..0fd64310 100644
--- a/frontend/src/routes/datasets/review/[id]/+page.svelte
+++ b/frontend/src/routes/datasets/review/[id]/+page.svelte
@@ -17,17 +17,16 @@
 <script lang="ts">
   import { page } from "$app/state";
   import { goto } from "$app/navigation";
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { api } from "$lib/api.js";
   import SourceIntakePanel from "$lib/components/dataset-review/SourceIntakePanel.svelte";
   import ValidationFindingsPanel from "$lib/components/dataset-review/ValidationFindingsPanel.svelte";
   import SemanticLayerReview from "$lib/components/dataset-review/SemanticLayerReview.svelte";
   import ExecutionMappingReview from "$lib/components/dataset-review/ExecutionMappingReview.svelte";
   import AssistantChatPanel from "$lib/components/assistant/AssistantChatPanel.svelte";
-  import { datasetReviewSessionStore } from "$lib/stores/datasetReviewSession.js";
-  import { environmentContextStore, initializeEnvironmentContext } from "$lib/stores/environmentContext.js";
-  import { assistantChatStore, setAssistantDatasetReviewSessionId, setAssistantSeedMessage, setAssistantFocusTarget } from "$lib/stores/assistantChat.js";
-  import { fromStore } from "svelte/store";
+  import { datasetReviewSessionStore } from "$lib/stores/datasetReviewSession.svelte.js";
+  import { environmentContextStore, initializeEnvironmentContext } from "$lib/stores/environmentContext.svelte.js";
+  import { assistantChatStore, setAssistantDatasetReviewSessionId, setAssistantSeedMessage, setAssistantFocusTarget } from "$lib/stores/assistantChat.svelte.js";
 
   import ReviewWorkspaceHeader from "../ReviewWorkspaceHeader.svelte";
   import ReviewWorkspaceLeftSidebar from "../ReviewWorkspaceLeftSidebar.svelte";
@@ -35,10 +34,6 @@
   import { useReviewSession } from "../useReviewSession.js";
   import { buildImportMilestones, buildWorkspaceLaunchBlockers, buildAssistantSeedPrompt, getWorkspaceStateLabel, getRecommendedActionLabel, getPrimaryActionCtaLabel, stringifyValue, buildAssistantContextPrompt, mergeCollectionItem } from "../review-workspace-helpers.js";
 
-  const envCtx = fromStore(environmentContextStore);
-  const dss = fromStore(datasetReviewSessionStore);
-  const acs = fromStore(assistantChatStore);
-
   let session = $state(null);
   let loadError = $state("");
   let submitError = $state("");
@@ -53,8 +48,8 @@
   let assistantPromptNonce = $state(0);
 
   const routeSessionId = $derived(page.params.id || "");
-  const environments = $derived(envCtx.current?.environments || []);
-  const selectedEnvironmentId = $derived(session?.environment_id || envCtx.current?.selectedEnvId || "");
+  const environments = $derived(environmentContextStore.value?.environments || []);
+  const selectedEnvironmentId = $derived(session?.environment_id || environmentContextStore.value?.selectedEnvId || "");
   const currentWorkspaceState = $derived(!session ? (isSubmitting ? "importing" : "empty") : session.readiness_state === "importing" ? "importing" : "review");
   const profile = $derived(session?.profile || null);
   const findings = $derived(session?.findings || []);
@@ -80,7 +75,7 @@
   const importMilestones = $derived(buildImportMilestones($t, intakeAcknowledgment, session, importedFilters, latestPreview, profile, findings, currentWorkspaceState));
   const workspaceLaunchBlockers = $derived(buildWorkspaceLaunchBlockers($t, session, unresolvedBlockingFindingsCount, pendingApprovalMappingsCount, previewGateState));
   const assistantSeedPrompt = $derived(buildAssistantSeedPrompt($t, session, profile, workspaceLaunchBlockers, clarificationCurrentQuestion, importedFilters));
-  const workspaceFocusTarget = $derived(acs.current?.focusTarget || null);
+  const workspaceFocusTarget = $derived(assistantChatStore.value?.focusTarget || null);
 
   const reviewSession = useReviewSession();
 
@@ -176,7 +171,7 @@
   }
 
   $effect(() => {
-    const ext = dss.current?.session;
+    const ext = datasetReviewSessionStore.value?.session;
     if (!ext?.session_id || ext.session_id !== (session?.session_id || routeSessionId)) return;
     const extVer = ext.session_version ?? ext.version ?? null;
     if (extVer === null || extVer === sessionVersion) return;
diff --git a/frontend/src/routes/datasets/review/[id]/__tests__/dataset_review_workspace.ux.test.ts b/frontend/src/routes/datasets/review/[id]/__tests__/dataset_review_workspace.ux.test.ts
index 7039b816..9725c27b 100644
--- a/frontend/src/routes/datasets/review/[id]/__tests__/dataset_review_workspace.ux.test.ts
+++ b/frontend/src/routes/datasets/review/[id]/__tests__/dataset_review_workspace.ux.test.ts
@@ -143,7 +143,7 @@ vi.mock("$app/state", () => ({
   },
 }));
 
-vi.mock("$lib/i18n", () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: {
     subscribe: (fn) => {
       fn({
@@ -325,7 +325,7 @@ vi.mock("$lib/api.js", () => ({
   },
 }));
 
-vi.mock("$lib/stores/datasetReviewSession.js", () => ({
+vi.mock("$lib/stores/datasetReviewSession.svelte.js", () => ({
   datasetReviewSessionStore: {
     subscribe: (run) => {
       run({ session: null });
@@ -338,7 +338,7 @@ vi.mock("$lib/stores/datasetReviewSession.js", () => ({
   resetSession: vi.fn(),
 }));
 
-vi.mock("$lib/stores/environmentContext.js", () => ({
+vi.mock("$lib/stores/environmentContext.svelte.js", () => ({
   environmentContextStore: {
     subscribe: (run) => {
       run({
@@ -351,7 +351,7 @@ vi.mock("$lib/stores/environmentContext.js", () => ({
   initializeEnvironmentContext: vi.fn().mockResolvedValue(undefined),
 }));
 
-vi.mock("$lib/stores/assistantChat.js", () => ({
+vi.mock("$lib/stores/assistantChat.svelte.js", () => ({
   assistantChatStore: {
     subscribe: (run) => {
       run({
@@ -517,7 +517,7 @@ describe("DatasetReviewWorkspace UX Contract", () => {
 
   it("embedded_assistant_receives_session_scoped_seed_context", async () => {
     routeState.id = "session-1";
-    const assistantStoreModule = await import("$lib/stores/assistantChat.js");
+    const assistantStoreModule = await import("$lib/stores/assistantChat.svelte.js");
     api.fetchApi
       .mockResolvedValueOnce(createSessionDetail())
       .mockResolvedValueOnce(createClarificationState());
diff --git a/frontend/src/routes/datasets/review/__tests__/dataset_review_entry.test.ts b/frontend/src/routes/datasets/review/__tests__/dataset_review_entry.test.ts
index 842111ce..609f108e 100644
--- a/frontend/src/routes/datasets/review/__tests__/dataset_review_entry.test.ts
+++ b/frontend/src/routes/datasets/review/__tests__/dataset_review_entry.test.ts
@@ -48,7 +48,7 @@ vi.mock("$app/navigation", () => ({
   goto: vi.fn(),
 }));
 
-vi.mock("$lib/i18n", () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: {
     subscribe: (fn) => {
       fn({
@@ -138,15 +138,20 @@ vi.mock("$lib/api.js", () => ({
   },
 }));
 
-vi.mock("$lib/stores/environmentContext.js", () => ({
+const mockEnvState = {
+  environments: [{ id: "env-1", name: "DEV" }],
+  selectedEnvId: "env-1",
+  isLoading: false,
+  isLoaded: true,
+  error: null,
+};
+vi.mock("$lib/stores/environmentContext.svelte.js", () => ({
   environmentContextStore: {
     subscribe: (run) => {
-      run({
-        environments: [{ id: "env-1", name: "DEV" }],
-        selectedEnvId: "env-1",
-      });
+      run(mockEnvState);
       return () => {};
     },
+    get value() { return mockEnvState; },
   },
   initializeEnvironmentContext: vi.fn().mockResolvedValue(undefined),
 }));
diff --git a/frontend/src/routes/datasets/review/__tests__/dataset_review_entry.ux.test.ts b/frontend/src/routes/datasets/review/__tests__/dataset_review_entry.ux.test.ts
index 58e28724..f986ec2d 100644
--- a/frontend/src/routes/datasets/review/__tests__/dataset_review_entry.ux.test.ts
+++ b/frontend/src/routes/datasets/review/__tests__/dataset_review_entry.ux.test.ts
@@ -48,7 +48,7 @@ function createSessionSummary(overrides = {}) {
   };
 }
 
-vi.mock("$lib/i18n", () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: {
     subscribe: (fn) => {
       fn({
@@ -138,15 +138,20 @@ vi.mock("$lib/api.js", () => ({
   },
 }));
 
-vi.mock("$lib/stores/environmentContext.js", () => ({
+const mockEnvState = {
+  environments: [{ id: "env-1", name: "DEV" }],
+  selectedEnvId: "env-1",
+  isLoading: false,
+  isLoaded: true,
+  error: null,
+};
+vi.mock("$lib/stores/environmentContext.svelte.js", () => ({
   environmentContextStore: {
     subscribe: (run) => {
-      run({
-        environments: [{ id: "env-1", name: "DEV" }],
-        selectedEnvId: "env-1",
-      });
+      run(mockEnvState);
       return () => {};
     },
+    get value() { return mockEnvState; },
   },
   initializeEnvironmentContext: vi.fn().mockResolvedValue(undefined),
 }));
diff --git a/frontend/src/routes/datasets/review/useReviewSession.ts b/frontend/src/routes/datasets/review/useReviewSession.ts
index 9860935d..86e73c7e 100644
--- a/frontend/src/routes/datasets/review/useReviewSession.ts
+++ b/frontend/src/routes/datasets/review/useReviewSession.ts
@@ -19,13 +19,13 @@ import {
   setError,
   setSession,
   resetSession,
-} from "$lib/stores/datasetReviewSession";
+} from "$lib/stores/datasetReviewSession.svelte.js";
 import {
   assistantChatStore,
   setAssistantDatasetReviewSessionId,
   setAssistantSeedMessage,
   setAssistantFocusTarget,
-} from "$lib/stores/assistantChat";
+} from "$lib/stores/assistantChat.svelte.js";
 
 interface SessionDetail {
   session_id?: string;
diff --git a/frontend/src/routes/git/+page.svelte b/frontend/src/routes/git/+page.svelte
index b69b1d85..0e88496f 100644
--- a/frontend/src/routes/git/+page.svelte
+++ b/frontend/src/routes/git/+page.svelte
@@ -11,33 +11,30 @@
 <!-- @UX_RECOVERY User can retry by changing environment or refreshing. -->
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { fromStore } from 'svelte/store';
   import RepositoryDashboardGrid from '../../components/RepositoryDashboardGrid.svelte';
-  import { addToast as toast } from '../../lib/toasts';
+  import { addToast as toast } from '$lib/toasts.svelte.js';
   import { api } from '../../lib/api.js';
   import type { DashboardMetadata } from '../../types/dashboard';
-  import { t } from '$lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
   import { Button, Card, PageHeader, Select } from '$lib/ui';
   import {
     environmentContextStore,
     initializeEnvironmentContext,
     setSelectedEnvironment,
-  } from '$lib/stores/environmentContext.js';
-
-  const environmentContextState = fromStore(environmentContextStore);
+  } from '$lib/stores/environmentContext.svelte.js';
 
   let selectedEnvId = $state("");
   let dashboards: DashboardMetadata[] = $state([]);
   let loading = $state(true);
   let fetchingDashboards = $state(false);
   let environments = $derived(
-    environmentContextState.current?.environments || [],
+    environmentContextStore.value?.environments || [],
   );
 
   async function fetchEnvironments() {
     try {
       await initializeEnvironmentContext();
-      selectedEnvId = environmentContextState.current?.selectedEnvId || "";
+      selectedEnvId = environmentContextStore.value?.selectedEnvId || "";
     } catch (e) {
       toast(e.message, 'error');
     } finally {
@@ -78,7 +75,7 @@
   onMount(fetchEnvironments);
 
   $effect(() => {
-    const storeSelectedEnvId = environmentContextState.current?.selectedEnvId || "";
+    const storeSelectedEnvId = environmentContextStore.value?.selectedEnvId || "";
     if (storeSelectedEnvId && selectedEnvId !== storeSelectedEnvId) {
       selectedEnvId = storeSelectedEnvId;
     }
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index 41c651f8..d5546347 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -13,10 +13,10 @@
 <!-- @INVARIANT Shows both local login form and ADFS SSO button. -->
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { auth } from '../../lib/auth/store';
+    import { auth } from '../../lib/auth/store.svelte.js';
     import { api } from '../../lib/api';
     import { goto } from '$app/navigation';
-    import { t } from '$lib/i18n';
+    import { t } from '$lib/i18n/index.svelte.js';
 
     let username = '';
     let password = '';
diff --git a/frontend/src/routes/maintenance/+page.svelte b/frontend/src/routes/maintenance/+page.svelte
index 2be31ef0..fb4db5a5 100644
--- a/frontend/src/routes/maintenance/+page.svelte
+++ b/frontend/src/routes/maintenance/+page.svelte
@@ -15,7 +15,7 @@
   import MaintenanceSettingsPanel from "$lib/components/MaintenanceSettingsPanel.svelte";
   import MaintenanceEventsTable from "$lib/components/MaintenanceEventsTable.svelte";
   import StartMaintenanceForm from "$lib/components/StartMaintenanceForm.svelte";
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
 
   let pageLoading = $state(true);
 
diff --git a/frontend/src/routes/migration/+page.svelte b/frontend/src/routes/migration/+page.svelte
index 53eb13fc..4d267c69 100644
--- a/frontend/src/routes/migration/+page.svelte
+++ b/frontend/src/routes/migration/+page.svelte
@@ -12,6 +12,7 @@
 @RELATION DEPENDS_ON ->[TaskLogViewer]
 @RELATION DEPENDS_ON ->[PasswordPrompt]
 @INVARIANT: This component contains NO business logic — it only renders model state and calls model.action().
+@RATIONALE First page fully migrated to semantic design tokens (surface-*, border-*, text-*, primary, destructive, success, warning, info). All raw buttons replaced with $lib/ui Button. Serves as the canonical visual reference for all ss-tools pages.
 @UX_STATE: [idle] -> Skeleton loader while environments load.
 @UX_STATE: [ready] -> Step wizard with env selection, dashboards, options.
 @UX_STATE: [loading] -> Skeleton/spinner during API calls (dry-run, DB fetch).
@@ -34,7 +35,6 @@
 
 <script lang="ts">
   import { onMount } from "svelte";
-  import { fromStore } from "svelte/store";
   import EnvSelector from "../../components/EnvSelector.svelte";
   import DashboardGrid from "../../components/DashboardGrid.svelte";
   import MappingTable from "../../components/MappingTable.svelte";
@@ -48,7 +48,7 @@
     DashboardSelection,
     MigrationDryRunResult,
   } from "../../types/dashboard";
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { Button, Card, PageHeader } from "$lib/ui";
 
   // ── Model: single source of truth ───────────────────────────────
@@ -56,7 +56,11 @@
 
   // Store bindings (reactive, read from stores for TaskRunner + PasswordPrompt)
   const selectedTaskStore = model.selectedTaskStore;
-  const taskSnap = fromStore(selectedTaskStore);
+  let activeTask = $state(null);
+  $effect(() => {
+    const unsub = selectedTaskStore.subscribe(v => { activeTask = v; });
+    return unsub;
+  });
 
   // ── Lifecycle ──────────────────────────────────────────────────
   onMount(() => model.loadEnvironments());
@@ -82,9 +86,9 @@
   <!-- #region MigrationHeader -->
   <div class="flex items-center justify-between mb-6">
     <PageHeader title={$t.nav.migration} />
-    <button
+    <Button
+      variant="ghost"
       onclick={() => model.toggleTaskHistory()}
-      class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 hover:text-gray-900 transition-colors"
     >
       <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
@@ -93,15 +97,15 @@
       <svg class="w-4 h-4 transition-transform" class:rotate-180={model.showTaskHistory} fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
       </svg>
-    </button>
+    </Button>
   </div>
   <!-- #endregion MigrationHeader -->
 
-  {#if taskSnap.current}
+  {#if activeTask}
     <!-- #region ActiveTaskSection -->
     <div class="mb-6">
       <div class="flex items-center justify-between mb-4">
-        <h2 class="text-lg font-semibold text-gray-900">
+        <h2 class="text-lg font-semibold text-text">
           {$t.tasks?.task_label || "Task"}
         </h2>
         <Button variant="secondary" onclick={() => selectedTaskStore.set(null)}>
@@ -129,6 +133,7 @@
           { step: 3, label: $t.tasks?.summary_report || "Review" },
           { step: 4, label: $t.migration?.start || "Migrate" },
         ] as s}
+          <!-- Step indicator buttons — custom styling for step wizard (not standard Button) -->
           <button
             onclick={() => model.goToStep(s.step)}
             disabled={s.step > model.currentStep && !((s.step === 2 && model.stepReady[1]) || (s.step === 3 && model.stepReady[1] && model.stepReady[2]) || (s.step === 4 && model.dryRunResult))}
@@ -137,12 +142,12 @@
             <div class={`
               w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-all
               ${model.currentStep > s.step
-                ? 'bg-indigo-600 border-indigo-600 text-white'
+                ? 'bg-primary border-primary text-white'
                 : model.currentStep === s.step
-                  ? 'bg-indigo-50 border-indigo-500 text-indigo-700'
-                  : 'bg-white border-gray-300 text-gray-400'
+                  ? 'bg-primary-light border-primary-ring text-primary'
+                  : 'bg-surface-card border-border-strong text-text-subtle'
               }
-              ${(s.step <= model.currentStep || (s.step === 2 && model.stepReady[1]) || (s.step === 3 && model.stepReady[1] && model.stepReady[2])) ? 'cursor-pointer hover:border-indigo-400' : 'cursor-not-allowed'}
+              ${(s.step <= model.currentStep || (s.step === 2 && model.stepReady[1]) || (s.step === 3 && model.stepReady[1] && model.stepReady[2])) ? 'cursor-pointer hover:border-primary-ring' : 'cursor-not-allowed'}
             `}>
               {#if model.currentStep > s.step}
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -153,13 +158,13 @@
               {/if}
             </div>
             <span class="mt-2 text-xs font-medium hidden sm:block
-              ${model.currentStep === s.step ? 'text-indigo-700' : 'text-gray-500'}
+              ${model.currentStep === s.step ? 'text-primary' : 'text-text-muted'}
             ">{s.label}</span>
           </button>
           {#if s.step < 4}
             <div class="flex-1 mx-2 mb-6">
-              <div class="h-0.5 bg-gray-200 rounded">
-                <div class="h-0.5 bg-indigo-500 rounded transition-all duration-500" style="width: {model.currentStep > s.step ? '100%' : '0%'}"></div>
+              <div class="h-0.5 bg-surface-muted rounded">
+                <div class="h-0.5 bg-primary rounded transition-all duration-500" style="width: {model.currentStep > s.step ? '100%' : '0%'}"></div>
               </div>
             </div>
           {/if}
@@ -172,31 +177,31 @@
     {#if model.loading}
       <div class="space-y-6">
         <div class="animate-pulse">
-          <div class="h-8 bg-gray-200 rounded w-1/3 mb-4"></div>
+          <div class="h-8 bg-surface-muted rounded w-1/3 mb-4"></div>
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div class="h-24 bg-gray-100 rounded-lg"></div>
-            <div class="h-24 bg-gray-100 rounded-lg"></div>
+            <div class="h-24 bg-surface-muted rounded-lg"></div>
+            <div class="h-24 bg-surface-muted rounded-lg"></div>
           </div>
         </div>
       </div>
 
     <!-- Error State -->
     {:else if model.error}
-      <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl">
+      <div class="mb-6 p-4 bg-destructive-light border border-destructive-ring rounded-xl">
         <div class="flex items-start gap-3">
-          <div class="flex-shrink-0 w-5 h-5 text-red-500 mt-0.5">
+          <div class="flex-shrink-0 w-5 h-5 text-destructive mt-0.5">
             <svg viewBox="0 0 20 20" fill="currentColor">
               <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
             </svg>
           </div>
           <div class="flex-1">
-            <p class="text-sm font-medium text-red-800">{model.error}</p>
+            <p class="text-sm font-medium text-destructive">{model.error}</p>
           </div>
-          <button onclick={() => model.clearError()} class="text-red-400 hover:text-red-600" aria-label={$t.common?.close || "Close"}>
+          <Button variant="ghost" size="sm" onclick={() => model.clearError()} aria-label={$t.common?.close || "Close"}>
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
             </svg>
-          </button>
+          </Button>
         </div>
       </div>
     {/if}
@@ -206,14 +211,14 @@
       <Card padding="none" class="mb-6">
         <div class="p-6">
           <div class="flex items-center gap-3 mb-4">
-            <span class="flex items-center justify-center w-8 h-8 rounded-full bg-indigo-100 text-indigo-700 text-sm font-bold">1</span>
-            <h3 class="text-lg font-semibold text-gray-900">{$t.migration?.source_env || "Source Environment"} → {$t.migration?.target_env || "Target Environment"}</h3>
+            <span class="flex items-center justify-center w-8 h-8 rounded-full bg-primary-light text-primary text-sm font-bold">1</span>
+            <h3 class="text-lg font-semibold text-text">{$t.migration?.source_env || "Source Environment"} → {$t.migration?.target_env || "Target Environment"}</h3>
           </div>
           <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div class="p-4 border border-gray-200 rounded-xl bg-white hover:border-indigo-300 transition-colors">
+          <div class="p-4 border border-border rounded-xl bg-surface-card hover:border-primary-ring transition-colors">
             <div class="flex items-center gap-2 mb-3">
-              <div class="w-2 h-2 rounded-full bg-emerald-500"></div>
-              <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">{$t.migration?.source_env || "Source"}</h3>
+              <div class="w-2 h-2 rounded-full bg-success"></div>
+              <h3 class="text-sm font-semibold text-text uppercase tracking-wide">{$t.migration?.source_env || "Source"}</h3>
             </div>
             <EnvSelector
               label={$t.migration?.source_env || "Source Environment"}
@@ -222,10 +227,10 @@
               onchange={({ id }) => model.selectSourceEnv(id)}
             />
           </div>
-          <div class="p-4 border border-gray-200 rounded-xl bg-white hover:border-indigo-300 transition-colors">
+          <div class="p-4 border border-border rounded-xl bg-surface-card hover:border-primary-ring transition-colors">
             <div class="flex items-center gap-2 mb-3">
-              <div class="w-2 h-2 rounded-full bg-violet-500"></div>
-              <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">{$t.migration?.target_env || "Target"}</h3>
+              <div class="w-2 h-2 rounded-full bg-primary"></div>
+              <h3 class="text-sm font-semibold text-text uppercase tracking-wide">{$t.migration?.target_env || "Target"}</h3>
             </div>
             <EnvSelector
               label={$t.migration?.target_env || "Target Environment"}
@@ -236,8 +241,8 @@
           </div>
         </div>
         {#if model.sourceEnvId && model.targetEnvId && model.sourceEnvId === model.targetEnvId}
-          <div class="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg">
-            <p class="text-sm text-amber-700 flex items-center gap-2">
+          <div class="mt-4 p-3 bg-warning-light border border-warning-ring rounded-lg">
+            <p class="text-sm text-warning flex items-center gap-2">
               <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
               </svg>
@@ -260,8 +265,8 @@
       <Card padding="none" class="mb-6">
         <div class="p-6">
           <div class="flex items-center gap-3 mb-4">
-            <span class="flex items-center justify-center w-8 h-8 rounded-full bg-indigo-100 text-indigo-700 text-sm font-bold">2</span>
-            <h3 class="text-lg font-semibold text-gray-900">{$t.migration?.select_dashboards_title || "Select Dashboards"}</h3>
+            <span class="flex items-center justify-center w-8 h-8 rounded-full bg-primary-light text-primary text-sm font-bold">2</span>
+            <h3 class="text-lg font-semibold text-text">{$t.migration?.select_dashboards_title || "Select Dashboards"}</h3>
           </div>
 
           {#if model.sourceEnvId}
@@ -273,38 +278,38 @@
             />
           </div>
           {:else}
-          <p class="text-gray-500 italic">
+          <p class="text-text-muted italic">
             {$t.dashboard?.select_source || "Select a source environment to view dashboards."}
           </p>
           {/if}
 
         <!-- Migration Options -->
-        <div class="border-t border-gray-100 pt-4 mt-2">
-          <h4 class="text-sm font-semibold text-gray-700 mb-3">{$t.dashboard?.settings || "Options"}</h4>
+        <div class="border-t border-border pt-4 mt-2">
+          <h4 class="text-sm font-semibold text-text mb-3">{$t.dashboard?.settings || "Options"}</h4>
           <div class="space-y-3">
-            <label class="flex items-start gap-3 p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors">
+            <label class="flex items-start gap-3 p-3 border border-border rounded-lg hover:bg-surface-muted cursor-pointer transition-colors">
               <input
                 type="checkbox"
                 checked={model.fixCrossFilters}
                 onchange={(e) => model.setFixCrossFilters(e.currentTarget.checked)}
-                class="mt-0.5 h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
+                class="mt-0.5 h-4 w-4 text-primary focus:ring-primary border-border-strong rounded"
               />
               <div>
-                <span class="text-sm font-medium text-gray-900">{$t.migration?.fix_cross_filters || "Fix Cross-Filters"}</span>
-                <p class="text-xs text-gray-500 mt-0.5">{$t.dashboard?.fix_cross_filters_hint || "Automatically remap chart and dataset IDs in cross-filters to target environment IDs."}</p>
+                <span class="text-sm font-medium text-text">{$t.migration?.fix_cross_filters || "Fix Cross-Filters"}</span>
+                <p class="text-xs text-text-muted mt-0.5">{$t.dashboard?.fix_cross_filters_hint || "Automatically remap chart and dataset IDs in cross-filters to target environment IDs."}</p>
               </div>
             </label>
 
-            <label class="flex items-start gap-3 p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors">
+            <label class="flex items-start gap-3 p-3 border border-border rounded-lg hover:bg-surface-muted cursor-pointer transition-colors">
               <input
                 type="checkbox"
                 checked={model.replaceDb}
                 onchange={(e) => model.setReplaceDb(e.currentTarget.checked)}
-                class="mt-0.5 h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
+                class="mt-0.5 h-4 w-4 text-primary focus:ring-primary border-border-strong rounded"
               />
               <div>
-                <span class="text-sm font-medium text-gray-900">{$t.migration?.replace_db || "Replace Database"}</span>
-                <p class="text-xs text-gray-500 mt-0.5">{$t.dashboard?.mapping_disabled_hint || "Apply database mappings during migration."}</p>
+                <span class="text-sm font-medium text-text">{$t.migration?.replace_db || "Replace Database"}</span>
+                <p class="text-xs text-text-muted mt-0.5">{$t.dashboard?.mapping_disabled_hint || "Apply database mappings during migration."}</p>
               </div>
             </label>
           </div>
@@ -312,22 +317,23 @@
 
         <!-- Database Mapping Section -->
         {#if model.replaceDb}
-          <div class="mt-4 p-4 bg-gray-50 border border-gray-200 rounded-xl">
+          <div class="mt-4 p-4 bg-surface-muted border border-border rounded-xl">
             <div class="flex items-center justify-between mb-4">
-              <h4 class="text-sm font-semibold text-gray-700">{$t.migration?.database_mappings || "Database Mappings"}</h4>
-              <button
+              <h4 class="text-sm font-semibold text-text">{$t.migration?.database_mappings || "Database Mappings"}</h4>
+              <Button
+                variant="ghost"
+                size="sm"
                 onclick={() => model.fetchDatabases()}
                 disabled={model.fetchingDbs || !model.sourceEnvId || !model.targetEnvId}
-                class="text-xs font-medium text-indigo-600 hover:text-indigo-800 disabled:text-gray-400 disabled:cursor-not-allowed flex items-center gap-1"
               >
                 <svg class="w-3.5 h-3.5" class:animate-spin={model.fetchingDbs} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                 </svg>
                 {$t.migration?.fetch_dbs || "Fetch Databases"}
-              </button>
+              </Button>
             </div>
             {#if model.fetchingDbs}
-              <div class="flex items-center gap-2 text-sm text-gray-500">
+              <div class="flex items-center gap-2 text-sm text-text-muted">
                 <svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                 </svg>
@@ -342,7 +348,7 @@
                 onupdate={(e) => model.saveMapping(e.detail.sourceUuid, e.detail.targetUuid)}
               />
             {:else if model.sourceEnvId && model.targetEnvId}
-              <p class="text-sm text-gray-500">{$t.migration?.mapping_hint || "Select environments and click \"Fetch Databases\" to start mapping."}</p>
+              <p class="text-sm text-text-muted">{$t.migration?.mapping_hint || "Select environments and click \"Fetch Databases\" to start mapping."}</p>
             {/if}
           </div>
         {/if}
@@ -374,22 +380,22 @@
       <Card padding="none" class="mb-6">
         <div class="p-6">
           <div class="flex items-center gap-3 mb-4">
-            <span class="flex items-center justify-center w-8 h-8 rounded-full bg-indigo-100 text-indigo-700 text-sm font-bold">3</span>
-            <h3 class="text-lg font-semibold text-gray-900">{$t.tasks?.summary_report || "Review & Validate"}</h3>
+            <span class="flex items-center justify-center w-8 h-8 rounded-full bg-primary-light text-primary text-sm font-bold">3</span>
+            <h3 class="text-lg font-semibold text-text">{$t.tasks?.summary_report || "Review & Validate"}</h3>
           </div>
 
         {#if model.dryRunResult}
           <!-- Selection Summary -->
-          <div class="mb-6 p-4 bg-indigo-50 border border-indigo-100 rounded-xl">
+          <div class="mb-6 p-4 bg-info-light border border-info-ring rounded-xl">
             <div class="flex items-center gap-2 mb-2">
-              <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg class="w-5 h-5 text-info" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
               </svg>
-              <h3 class="text-sm font-semibold text-indigo-800">{$t.dashboard?.selected_dashboards || "Selected Dashboards"}</h3>
+              <h3 class="text-sm font-semibold text-info-hover">{$t.dashboard?.selected_dashboards || "Selected Dashboards"}</h3>
             </div>
             <div class="flex flex-wrap gap-2">
               {#each model.dryRunResult.selected_dashboard_titles || [] as title}
-                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700">
+                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-info-light text-info">
                   {title}
                 </span>
               {/each}
@@ -399,110 +405,110 @@
           <!-- Diff Summary Cards -->
           <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
             <!-- Dashboards -->
-            <div class="p-4 border border-gray-200 rounded-xl bg-white">
+            <div class="p-4 border border-border rounded-xl bg-surface-card">
               <div class="flex items-center gap-2 mb-3">
-                <div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
-                  <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div class="w-8 h-8 rounded-lg bg-info-light flex items-center justify-center">
+                  <svg class="w-4 h-4 text-info" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
                   </svg>
                 </div>
-                <h4 class="text-sm font-semibold text-gray-700">{$t.dashboard?.title || "Dashboards"}</h4>
+                <h4 class="text-sm font-semibold text-text">{$t.dashboard?.title || "Dashboards"}</h4>
               </div>
               <div class="space-y-1.5 text-sm">
                 <div class="flex items-center justify-between">
-                  <span class="text-emerald-600 font-medium">Create</span>
-                  <span class="font-semibold text-emerald-600">{model.dryRunResult.summary.dashboards.create}</span>
+                  <span class="text-success font-medium">Create</span>
+                  <span class="font-semibold text-success">{model.dryRunResult.summary.dashboards.create}</span>
                 </div>
                 <div class="flex items-center justify-between">
-                  <span class="text-amber-600 font-medium">Update</span>
-                  <span class="font-semibold text-amber-600">{model.dryRunResult.summary.dashboards.update}</span>
+                  <span class="text-warning font-medium">Update</span>
+                  <span class="font-semibold text-warning">{model.dryRunResult.summary.dashboards.update}</span>
                 </div>
                 <div class="flex items-center justify-between">
-                  <span class="text-red-600 font-medium">Delete</span>
-                  <span class="font-semibold text-red-600">{model.dryRunResult.summary.dashboards.delete}</span>
+                  <span class="text-destructive font-medium">Delete</span>
+                  <span class="font-semibold text-destructive">{model.dryRunResult.summary.dashboards.delete}</span>
                 </div>
               </div>
             </div>
 
             <!-- Charts -->
-            <div class="p-4 border border-gray-200 rounded-xl bg-white">
+            <div class="p-4 border border-border rounded-xl bg-surface-card">
               <div class="flex items-center gap-2 mb-3">
-                <div class="w-8 h-8 rounded-lg bg-violet-100 flex items-center justify-center">
-                  <svg class="w-4 h-4 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div class="w-8 h-8 rounded-lg bg-primary-light flex items-center justify-center">
+                  <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                   </svg>
                 </div>
-                <h4 class="text-sm font-semibold text-gray-700">{$t.dashboard?.charts || "Charts"}</h4>
+                <h4 class="text-sm font-semibold text-text">{$t.dashboard?.charts || "Charts"}</h4>
               </div>
               <div class="space-y-1.5 text-sm">
                 <div class="flex items-center justify-between">
-                  <span class="text-emerald-600 font-medium">Create</span>
-                  <span class="font-semibold text-emerald-600">{model.dryRunResult.summary.charts.create}</span>
+                  <span class="text-success font-medium">Create</span>
+                  <span class="font-semibold text-success">{model.dryRunResult.summary.charts.create}</span>
                 </div>
                 <div class="flex items-center justify-between">
-                  <span class="text-amber-600 font-medium">Update</span>
-                  <span class="font-semibold text-amber-600">{model.dryRunResult.summary.charts.update}</span>
+                  <span class="text-warning font-medium">Update</span>
+                  <span class="font-semibold text-warning">{model.dryRunResult.summary.charts.update}</span>
                 </div>
                 <div class="flex items-center justify-between">
-                  <span class="text-red-600 font-medium">Delete</span>
-                  <span class="font-semibold text-red-600">{model.dryRunResult.summary.charts.delete}</span>
+                  <span class="text-destructive font-medium">Delete</span>
+                  <span class="font-semibold text-destructive">{model.dryRunResult.summary.charts.delete}</span>
                 </div>
               </div>
             </div>
 
             <!-- Datasets -->
-            <div class="p-4 border border-gray-200 rounded-xl bg-white">
+            <div class="p-4 border border-border rounded-xl bg-surface-card">
               <div class="flex items-center gap-2 mb-3">
-                <div class="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center">
-                  <svg class="w-4 h-4 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div class="w-8 h-8 rounded-lg bg-success-light flex items-center justify-center">
+                  <svg class="w-4 h-4 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
                   </svg>
                 </div>
-                <h4 class="text-sm font-semibold text-gray-700">{$t.dashboard?.linked_resources || "Datasets"}</h4>
+                <h4 class="text-sm font-semibold text-text">{$t.dashboard?.linked_resources || "Datasets"}</h4>
               </div>
               <div class="space-y-1.5 text-sm">
                 <div class="flex items-center justify-between">
-                  <span class="text-emerald-600 font-medium">Create</span>
-                  <span class="font-semibold text-emerald-600">{model.dryRunResult.summary.datasets.create}</span>
+                  <span class="text-success font-medium">Create</span>
+                  <span class="font-semibold text-success">{model.dryRunResult.summary.datasets.create}</span>
                 </div>
                 <div class="flex items-center justify-between">
-                  <span class="text-amber-600 font-medium">Update</span>
-                  <span class="font-semibold text-amber-600">{model.dryRunResult.summary.datasets.update}</span>
+                  <span class="text-warning font-medium">Update</span>
+                  <span class="font-semibold text-warning">{model.dryRunResult.summary.datasets.update}</span>
                 </div>
                 <div class="flex items-center justify-between">
-                  <span class="text-red-600 font-medium">Delete</span>
-                  <span class="font-semibold text-red-600">{model.dryRunResult.summary.datasets.delete}</span>
+                  <span class="text-destructive font-medium">Delete</span>
+                  <span class="font-semibold text-destructive">{model.dryRunResult.summary.datasets.delete}</span>
                 </div>
               </div>
             </div>
           </div>
 
           <!-- Risk Assessment -->
-          <div class="mb-6 p-4 border border-gray-200 rounded-xl bg-white">
+          <div class="mb-6 p-4 border border-border rounded-xl bg-surface-card">
             <div class="flex items-center justify-between mb-4">
               <div class="flex items-center gap-2">
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01" />
                 </svg>
-                <h3 class="text-sm font-semibold text-gray-700">{$t.tasks?.issues || "Risk Assessment"}</h3>
+                <h3 class="text-sm font-semibold text-text">{$t.tasks?.issues || "Risk Assessment"}</h3>
               </div>
               <div class="flex items-center gap-3">
                 <div class="flex items-center gap-2">
-                  <span class="text-xs text-gray-500">Score:</span>
+                  <span class="text-xs text-text-muted">Score:</span>
                   <div class={`
                     px-2.5 py-1 rounded-full text-xs font-bold
-                    ${model.dryRunResult.risk.score <= 20 ? 'bg-emerald-100 text-emerald-700' :
-                      model.dryRunResult.risk.score <= 50 ? 'bg-amber-100 text-amber-700' :
-                      'bg-red-100 text-red-700'}
+                    ${model.dryRunResult.risk.score <= 20 ? 'bg-success-light text-success' :
+                      model.dryRunResult.risk.score <= 50 ? 'bg-warning-light text-warning' :
+                      'bg-destructive-light text-destructive'}
                   `}>
                     {model.dryRunResult.risk.score}/100
                   </div>
                 </div>
                 <div class={`
                   px-2.5 py-1 rounded-full text-xs font-bold
-                  ${model.dryRunResult.risk.level === 'low' ? 'bg-emerald-100 text-emerald-700' :
-                    model.dryRunResult.risk.level === 'medium' ? 'bg-amber-100 text-amber-700' :
-                    'bg-red-100 text-red-700'}
+                  ${model.dryRunResult.risk.level === 'low' ? 'bg-success-light text-success' :
+                    model.dryRunResult.risk.level === 'medium' ? 'bg-warning-light text-warning' :
+                    'bg-destructive-light text-destructive'}
                 `}>
                   {model.dryRunResult.risk.level.toUpperCase()}
                 </div>
@@ -510,12 +516,12 @@
             </div>
 
             <!-- Risk Progress Bar -->
-            <div class="w-full h-2 bg-gray-100 rounded-full mb-4 overflow-hidden">
+            <div class="w-full h-2 bg-surface-muted rounded-full mb-4 overflow-hidden">
               <div
                 class="h-full rounded-full transition-all duration-700"
-                class:bg-emerald-500={model.dryRunResult.risk.score <= 20}
-                class:bg-amber-500={model.dryRunResult.risk.score > 20 && model.dryRunResult.risk.score <= 50}
-                class:bg-red-500={model.dryRunResult.risk.score > 50}
+                class:bg-success={model.dryRunResult.risk.score <= 20}
+                class:bg-warning={model.dryRunResult.risk.score > 20 && model.dryRunResult.risk.score <= 50}
+                class:bg-destructive={model.dryRunResult.risk.score > 50}
                 style="width: {model.dryRunResult.risk.score}%"
               ></div>
             </div>
@@ -525,38 +531,38 @@
               <div class="space-y-2">
                 {#each model.dryRunResult.risk.items as item}
                   <div class="flex items-start gap-3 p-2.5 rounded-lg text-sm
-                    ${item.severity === 'high' ? 'bg-red-50' :
-                      item.severity === 'medium' ? 'bg-amber-50' : 'bg-blue-50'}
+                    ${item.severity === 'high' ? 'bg-destructive-light' :
+                      item.severity === 'medium' ? 'bg-warning-light' : 'bg-info-light'}
                   ">
                     <div class={`
                       flex-shrink-0 w-2 h-2 rounded-full mt-1.5
-                      ${item.severity === 'high' ? 'bg-red-500' :
-                        item.severity === 'medium' ? 'bg-amber-500' : 'bg-blue-500'}
+                      ${item.severity === 'high' ? 'bg-destructive' :
+                        item.severity === 'medium' ? 'bg-warning' : 'bg-info'}
                     `}></div>
                     <div>
-                      <p class="font-medium text-gray-800">{item.message}</p>
-                      <p class="text-xs text-gray-500 mt-0.5">{item.object_type}: {item.object_uuid}</p>
+                      <p class="font-medium text-text">{item.message}</p>
+                      <p class="text-xs text-text-muted mt-0.5">{item.object_type}: {item.object_uuid}</p>
                     </div>
                   </div>
                 {/each}
               </div>
             {:else}
-              <p class="text-sm text-gray-500">No issues detected.</p>
+              <p class="text-sm text-text-muted">No issues detected.</p>
             {/if}
           </div>
 
           <!-- Raw JSON Details -->
-          <details class="border border-gray-200 rounded-xl overflow-hidden">
-            <summary class="px-4 py-3 bg-gray-50 cursor-pointer text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors flex items-center gap-2">
+          <details class="border border-border rounded-xl overflow-hidden">
+            <summary class="px-4 py-3 bg-surface-muted cursor-pointer text-sm font-medium text-text hover:bg-surface-muted transition-colors flex items-center gap-2">
               <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
               </svg>
               {$t.tasks?.diff_preview || "Diff JSON"}
             </summary>
-            <pre class="p-4 max-h-72 overflow-auto text-xs bg-gray-50 text-gray-700">{JSON.stringify(model.dryRunResult, null, 2)}</pre>
+            <pre class="p-4 max-h-72 overflow-auto text-xs bg-surface-muted text-text">{JSON.stringify(model.dryRunResult, null, 2)}</pre>
           </details>
         {:else}
-          <div class="flex flex-col items-center justify-center py-8 text-gray-400">
+          <div class="flex flex-col items-center justify-center py-8 text-text-subtle">
             <svg class="w-12 h-12 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
             </svg>
@@ -564,7 +570,7 @@
           </div>
         {/if}
 
-        <div class="mt-6 flex items-center justify-between border-t border-gray-100 pt-6">
+        <div class="mt-6 flex items-center justify-between border-t border-border pt-6">
           <Button variant="secondary" onclick={() => model.goToStep(2)}>
             ← {$t.common.back}
           </Button>
@@ -584,14 +590,14 @@
     <!-- #endregion Step3: Review & Dry-Run Results -->
 
     <!-- #region Step4: Migration in Progress (handled by ActiveTaskSection above) -->
-    {#if model.currentStep === 4 && !taskSnap.current}
+    {#if model.currentStep === 4 && !activeTask}
       <Card padding="none" class="mb-6">
         <div class="flex flex-col items-center justify-center p-12">
-          <svg class="w-16 h-16 text-indigo-400 mb-4 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="w-16 h-16 text-info mb-4 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z" />
           </svg>
-          <h3 class="text-lg font-semibold text-gray-700 mb-2">{$t.migration?.starting || "Starting Migration..."}</h3>
-          <p class="text-sm text-gray-500">{$t.common.loading || "Please wait..."}</p>
+          <h3 class="text-lg font-semibold text-text mb-2">{$t.migration?.starting || "Starting Migration..."}</h3>
+          <p class="text-sm text-text-muted">{$t.common.loading || "Please wait..."}</p>
           <Button variant="secondary" class="mt-6" onclick={() => model.goToStep(3)}>
             ← {$t.common.back}
           </Button>
@@ -603,14 +609,14 @@
     <!-- Quick Actions when no step is active -->
     {#if !model.currentStep || model.currentStep === 0}
       <Card class="mb-6">
-        <div class="flex flex-col items-center justify-center py-12 text-gray-400">
+        <div class="flex flex-col items-center justify-center py-12 text-text-subtle">
           <svg class="w-16 h-16 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
           </svg>
           <p class="text-sm">{$t.dashboard?.migrate_modal_title || "Select environments to start"}</p>
-          <button onclick={() => model.goToStep(1)} class="mt-4 text-indigo-600 hover:text-indigo-800 text-sm font-medium">
+          <Button variant="ghost" size="sm" class="mt-4" onclick={() => model.goToStep(1)}>
             {$t.migration?.source_env || "Get Started"} →
-          </button>
+          </Button>
         </div>
       </Card>
     {/if}
@@ -634,4 +640,4 @@
 />
 <!-- #endregion MigrationModals -->
 
-<!-- #endregion MigrationPage -->
+<!-- #endregion MigrationPage -->
\ No newline at end of file
diff --git a/frontend/src/routes/migration/__tests__/migration_dashboard.ux.test.ts b/frontend/src/routes/migration/__tests__/migration_dashboard.ux.test.ts
index 51252114..8ac28da2 100644
--- a/frontend/src/routes/migration/__tests__/migration_dashboard.ux.test.ts
+++ b/frontend/src/routes/migration/__tests__/migration_dashboard.ux.test.ts
@@ -31,7 +31,7 @@ vi.mock('$lib/api', () => ({
     }
 }));
 
-vi.mock('$lib/i18n', () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
     t: {
         subscribe: (fn) => {
             fn({
@@ -147,8 +147,10 @@ describe('MigrationDashboard.ux.test.js', () => {
             expect(getByText('API Error')).toBeTruthy();
         });
 
-        // Error dismiss button should exist (close/aria-label)
-        const dismissBtn = getByText('API Error').closest('[class*="bg-red"]')?.querySelector('button');
+        // Error dismiss button should exist (uses <Button variant="ghost"> with aria-label)
+        const errorContainer = getByText('API Error').closest('[class*="bg-destructive"]');
+        expect(errorContainer).toBeTruthy();
+        const dismissBtn = errorContainer?.querySelector('button');
         expect(dismissBtn).toBeTruthy();
     });
     // #endregion test_error_state
diff --git a/frontend/src/routes/migration/mappings/+page.svelte b/frontend/src/routes/migration/mappings/+page.svelte
index f1de0d86..5faf977e 100644
--- a/frontend/src/routes/migration/mappings/+page.svelte
+++ b/frontend/src/routes/migration/mappings/+page.svelte
@@ -33,7 +33,7 @@
   import { MappingsModel } from '$lib/models/MappingsModel.svelte.ts';
   import EnvSelector from '../../../components/EnvSelector.svelte';
   import MappingTable from '../../../components/MappingTable.svelte';
-  import { t } from '$lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
   import { Button, PageHeader } from '$lib/ui';
 
   /** @type {MappingsModel} */
diff --git a/frontend/src/routes/profile/+page.svelte b/frontend/src/routes/profile/+page.svelte
index 7b6be59c..aebba9f9 100644
--- a/frontend/src/routes/profile/+page.svelte
+++ b/frontend/src/routes/profile/+page.svelte
@@ -8,21 +8,24 @@
 <!-- @UX_FEEDBACK Success toast on profile update. -->
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { fromStore } from 'svelte/store';
-  import { t } from '$lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
   import { PageHeader, Button, Card, Input } from '$lib/ui';
   import { api } from '$lib/api.js';
-  import { auth } from '$lib/auth/store.js';
-  import { addToast } from '$lib/toasts';
+  import { auth } from '$lib/auth/store.svelte.js';
+  import { addToast } from '$lib/toasts.svelte.js';
   import { hasPermission } from '$lib/auth/permissions.js';
 
-  const authState = fromStore(auth);
+  let _authState = $state({ user: null, token: null, isAuthenticated: false, loading: true });
+  $effect(() => {
+    const unsub = auth.subscribe(v => { _authState = v; });
+    return unsub;
+  });
 
   let preferences = $state<any>({});
   let loading = $state(true);
   let saving = $state(false);
 
-  let user = $derived(authState.current?.user || null);
+  let user = $derived(_authState.user || null);
 
   onMount(async () => {
     try {
diff --git a/frontend/src/routes/profile/__tests__/profile-preferences.integration.test.ts b/frontend/src/routes/profile/__tests__/profile-preferences.integration.test.ts
index c28a9eb2..4c6f17d8 100644
--- a/frontend/src/routes/profile/__tests__/profile-preferences.integration.test.ts
+++ b/frontend/src/routes/profile/__tests__/profile-preferences.integration.test.ts
@@ -9,7 +9,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, fireEvent, waitFor } from "@testing-library/svelte";
 import ProfilePage from "../+page.svelte";
 import { api } from "$lib/api.js";
-import { addToast } from "$lib/toasts";
+import { addToast } from "$lib/toasts.svelte.js";
 
 const mockedApi = /** @type {any} */ (api);
 const mockedAddToast = /** @type {any} */ (addToast);
@@ -21,15 +21,15 @@ vi.mock("$lib/api.js", () => ({
   },
 }));
 
-vi.mock("$lib/toasts", () => ({
+vi.mock('$lib/toasts.svelte.js', () => ({
   addToast: vi.fn(),
 }));
 
-vi.mock("$lib/auth/store.js", () => ({
+vi.mock("$lib/auth/store.svelte.js", () => ({
   auth: { subscribe: (run) => { run({ current: { user: { id: "u-1" } } }); return () => {}; } },
 }));
 
-vi.mock("$lib/i18n", () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: {
     subscribe: (run) => {
       run({
diff --git a/frontend/src/routes/profile/__tests__/profile-settings-state.integration.test.ts b/frontend/src/routes/profile/__tests__/profile-settings-state.integration.test.ts
index 17bfde83..7e2e7b0e 100644
--- a/frontend/src/routes/profile/__tests__/profile-settings-state.integration.test.ts
+++ b/frontend/src/routes/profile/__tests__/profile-settings-state.integration.test.ts
@@ -9,7 +9,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, fireEvent, waitFor } from "@testing-library/svelte";
 import ProfilePage from "../+page.svelte";
 import { api } from "$lib/api.js";
-import { addToast } from "$lib/toasts";
+import { addToast } from "$lib/toasts.svelte.js";
 
 const mockedApi = /** @type {any} */ (api);
 const mockedAddToast = /** @type {any} */ (addToast);
@@ -21,15 +21,15 @@ vi.mock("$lib/api.js", () => ({
   },
 }));
 
-vi.mock("$lib/toasts", () => ({
+vi.mock('$lib/toasts.svelte.js', () => ({
   addToast: vi.fn(),
 }));
 
-vi.mock("$lib/auth/store.js", () => ({
+vi.mock("$lib/auth/store.svelte.js", () => ({
   auth: { subscribe: (run) => { run({ current: { user: { id: "u-1" } } }); return () => {}; } },
 }));
 
-vi.mock("$lib/i18n", () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
   t: {
     subscribe: (run) => {
       run({
diff --git a/frontend/src/routes/reports/+page.svelte b/frontend/src/routes/reports/+page.svelte
index 6615e825..ea748e84 100644
--- a/frontend/src/routes/reports/+page.svelte
+++ b/frontend/src/routes/reports/+page.svelte
@@ -15,7 +15,7 @@
 <!-- @UX_RECOVERY Retry and clear-filters actions available. -->
 <script lang="ts">
   import { onMount } from "svelte";
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { PageHeader } from "$lib/ui";
   import { getReports, getReportDetail } from "$lib/api/reports.js";
   import ReportsList from "$lib/components/reports/ReportsList.svelte";
@@ -97,7 +97,9 @@
   }
 
   async function onSelectReport(event) {
-    selectedReport = event.detail.report;
+    const payload = event?.report ?? event?.detail?.report;
+    if (!payload) return;
+    selectedReport = payload;
     selectedReportDetail = await getReportDetail(selectedReport.report_id);
   }
 
diff --git a/frontend/src/routes/reports/llm/[taskId]/+page.svelte b/frontend/src/routes/reports/llm/[taskId]/+page.svelte
index 9b65ddb1..d90056e7 100644
--- a/frontend/src/routes/reports/llm/[taskId]/+page.svelte
+++ b/frontend/src/routes/reports/llm/[taskId]/+page.svelte
@@ -32,8 +32,8 @@
   import { page } from "$app/state";
   import { goto } from "$app/navigation";
   import { api } from "$lib/api.js";
-  import { t } from "$lib/i18n";
-  import { openDrawerForTask } from "$lib/stores/taskDrawer.js";
+  import { t } from "$lib/i18n/index.svelte.js";
+  import { openDrawerForTask } from "$lib/stores/taskDrawer.svelte.js";
   import Icon from "$lib/ui/Icon.svelte";
 
   let taskId = $derived(page.params.taskId);
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index c7e8a0c6..d2f625ac 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -22,9 +22,9 @@
 <!-- @UX_RECOVERY Refresh button reloads settings. -->
 <script lang="ts">
   import { onMount } from "svelte";
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { api } from "$lib/api.js";
-  import { addToast } from "$lib/toasts";
+  import { addToast } from "$lib/toasts.svelte.js";
 
   import {
     normalizeTab,
diff --git a/frontend/src/routes/settings/EnvironmentsTab.svelte b/frontend/src/routes/settings/EnvironmentsTab.svelte
index 7783e6f2..6188bc28 100644
--- a/frontend/src/routes/settings/EnvironmentsTab.svelte
+++ b/frontend/src/routes/settings/EnvironmentsTab.svelte
@@ -13,9 +13,9 @@
    * @UX_STATE: Loaded -> List of environments.
    * @UX_FEEDBACK: Toast notifications on success/failure of CRUD or test operations.
    */
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { api } from "$lib/api.js";
-  import { addToast } from "$lib/toasts";
+  import { addToast } from "$lib/toasts.svelte.js";
   import { resolveEnvStage, normalizeSupersetBaseUrl } from "./settings-utils.js";
 
   let { settings = $bindable(), onSave } = $props();
diff --git a/frontend/src/routes/settings/FeaturesSettings.svelte b/frontend/src/routes/settings/FeaturesSettings.svelte
index 02f1580f..4c904983 100644
--- a/frontend/src/routes/settings/FeaturesSettings.svelte
+++ b/frontend/src/routes/settings/FeaturesSettings.svelte
@@ -4,7 +4,7 @@
 <!-- @PRE: settings object with features config is provided. -->
 <!-- @POST: User can toggle feature flags. -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import HelpTooltip from "$lib/ui/HelpTooltip.svelte";
 
   let { settings = $bindable(), onSave } = $props();
diff --git a/frontend/src/routes/settings/LlmSettings.svelte b/frontend/src/routes/settings/LlmSettings.svelte
index 7a893c38..9bf4bb73 100644
--- a/frontend/src/routes/settings/LlmSettings.svelte
+++ b/frontend/src/routes/settings/LlmSettings.svelte
@@ -8,7 +8,7 @@
 <!-- @UX_STATE Loaded -> Full LLM settings panel with provider config, bindings, and prompts. -->
 <!-- @UX_FEEDBACK Toast on save. -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import ProviderConfig from "../../components/llm/ProviderConfig.svelte";
   import HelpTooltip from "$lib/ui/HelpTooltip.svelte";
 
diff --git a/frontend/src/routes/settings/LoggingSettings.svelte b/frontend/src/routes/settings/LoggingSettings.svelte
index f5890c22..c49a1fab 100644
--- a/frontend/src/routes/settings/LoggingSettings.svelte
+++ b/frontend/src/routes/settings/LoggingSettings.svelte
@@ -7,7 +7,7 @@
 <!-- @UX_STATE Loaded -> Form controls for logging configuration. -->
 <!-- @UX_FEEDBACK Toast on save. -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
 
   let { settings = $bindable(), onSave } = $props();
 </script>
diff --git a/frontend/src/routes/settings/MigrationMappingsTable.svelte b/frontend/src/routes/settings/MigrationMappingsTable.svelte
index 498f6c73..25d9f9f7 100644
--- a/frontend/src/routes/settings/MigrationMappingsTable.svelte
+++ b/frontend/src/routes/settings/MigrationMappingsTable.svelte
@@ -10,7 +10,7 @@
 <!-- @UX_STATE Empty -> "No mappings" row. -->
 <!-- @UX_REACTIVITY Props -> refreshKey triggers reload via $effect. -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { api } from "$lib/api.js";
 
   let { refreshKey = 0 } = $props();
diff --git a/frontend/src/routes/settings/MigrationSettings.svelte b/frontend/src/routes/settings/MigrationSettings.svelte
index 11fe5bd7..3d47dcf1 100644
--- a/frontend/src/routes/settings/MigrationSettings.svelte
+++ b/frontend/src/routes/settings/MigrationSettings.svelte
@@ -10,8 +10,8 @@
 <!-- @UX_FEEDBACK Toast on save/sync/failure. -->
 <script lang="ts">
   import { onMount } from "svelte";
-  import { t } from "$lib/i18n";
-  import { addToast } from "$lib/toasts";
+  import { t } from "$lib/i18n/index.svelte.js";
+  import { addToast } from "$lib/toasts.svelte.js";
   import { MigrationSettingsModel } from "$lib/models/MigrationSettingsModel.svelte.ts";
   import MigrationMappingsTable from "./MigrationMappingsTable.svelte";
   import HelpTooltip from "$lib/ui/HelpTooltip.svelte";
diff --git a/frontend/src/routes/settings/StorageSettings.svelte b/frontend/src/routes/settings/StorageSettings.svelte
index 5e621ad1..8106172a 100644
--- a/frontend/src/routes/settings/StorageSettings.svelte
+++ b/frontend/src/routes/settings/StorageSettings.svelte
@@ -4,7 +4,7 @@
 <!-- @PRE: settings object with storage config is provided. -->
 <!-- @POST: User can view and edit storage paths. -->
 <script lang="ts">
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
 
   let { settings = $bindable(), onSave } = $props();
 </script>
diff --git a/frontend/src/routes/settings/SystemSettings.svelte b/frontend/src/routes/settings/SystemSettings.svelte
index dbc2c1e7..761f5ff8 100644
--- a/frontend/src/routes/settings/SystemSettings.svelte
+++ b/frontend/src/routes/settings/SystemSettings.svelte
@@ -3,7 +3,7 @@
 <!-- @PRE: settings object is provided with app_timezone field. -->
 <!-- @POST: User can select the application timezone and manage API keys. -->
 <script lang="ts">
-  import { t, locale } from "$lib/i18n";
+  import { t, locale } from "$lib/i18n/index.svelte.js";
   import ApiKeysTab from "$lib/components/settings/ApiKeysTab.svelte";
 
   let { settings = $bindable(), onSave } = $props();
diff --git a/frontend/src/routes/settings/__tests__/settings_page.integration.test.ts b/frontend/src/routes/settings/__tests__/settings_page.integration.test.ts
index d9b99b9d..40709df2 100644
--- a/frontend/src/routes/settings/__tests__/settings_page.integration.test.ts
+++ b/frontend/src/routes/settings/__tests__/settings_page.integration.test.ts
@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
 import SettingsPage from '../+page.svelte';
 import { api } from '$lib/api';
-import { addToast } from '$lib/toasts';
+import { addToast } from '$lib/toasts.svelte.js';
 
 vi.mock('$lib/api', () => ({
     api: {
@@ -14,11 +14,11 @@ vi.mock('$lib/api', () => ({
     }
 }));
 
-vi.mock('$lib/toasts', () => ({
+vi.mock('$lib/toasts.svelte.js', () => ({
     addToast: vi.fn()
 }));
 
-vi.mock('$lib/i18n', () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
     t: {
         subscribe: (fn: (v: Record<string, unknown>) => void) => {
             fn({
diff --git a/frontend/src/routes/settings/__tests__/settings_page.ux.test.ts b/frontend/src/routes/settings/__tests__/settings_page.ux.test.ts
index 7aa1ae7f..07acd6eb 100644
--- a/frontend/src/routes/settings/__tests__/settings_page.ux.test.ts
+++ b/frontend/src/routes/settings/__tests__/settings_page.ux.test.ts
@@ -9,7 +9,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
 import SettingsPage from '../+page.svelte';
 import { api } from '$lib/api';
-import { addToast } from '$lib/toasts';
+import { addToast } from '$lib/toasts.svelte.js';
 
 vi.mock('$lib/api', () => ({
     api: {
@@ -21,11 +21,11 @@ vi.mock('$lib/api', () => ({
     }
 }));
 
-vi.mock('$lib/toasts', () => ({
+vi.mock('$lib/toasts.svelte.js', () => ({
     addToast: vi.fn()
 }));
 
-vi.mock('$lib/i18n', () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
     t: {
         subscribe: (fn) => {
             fn({
diff --git a/frontend/src/routes/settings/automation/+page.svelte b/frontend/src/routes/settings/automation/+page.svelte
index 57f62ef3..0d634960 100644
--- a/frontend/src/routes/settings/automation/+page.svelte
+++ b/frontend/src/routes/settings/automation/+page.svelte
@@ -21,7 +21,7 @@
     getEnvironments,
     getTranslationSchedules
   } from '$lib/api';
-  import { addToast } from '$lib/toasts';
+  import { addToast } from '$lib/toasts.svelte.js';
 
   let policies = $state([]);
   let environments = $state([]);
diff --git a/frontend/src/routes/settings/git/+page.svelte b/frontend/src/routes/settings/git/+page.svelte
index cb2b857b..d21869db 100644
--- a/frontend/src/routes/settings/git/+page.svelte
+++ b/frontend/src/routes/settings/git/+page.svelte
@@ -10,7 +10,7 @@
 
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { t } from '$lib/i18n';
+	import { t } from '$lib/i18n/index.svelte.js';
 	import { Button, Input, Card, PageHeader, Select } from '$lib/ui';
 	import HelpTooltip from '$lib/ui/HelpTooltip.svelte';
 	import { GitConfigModel } from '$lib/models/GitConfigModel.svelte.ts';
diff --git a/frontend/src/routes/settings/git/__tests__/git_settings_page.ux.test.ts b/frontend/src/routes/settings/git/__tests__/git_settings_page.ux.test.ts
index ea3adce6..87bc21c5 100644
--- a/frontend/src/routes/settings/git/__tests__/git_settings_page.ux.test.ts
+++ b/frontend/src/routes/settings/git/__tests__/git_settings_page.ux.test.ts
@@ -8,7 +8,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
 import GitSettingsPage from '../+page.svelte';
 import { gitService } from '../../../../services/gitService';
-import { addToast } from '$lib/toasts';
+import { addToast } from '$lib/toasts.svelte.js';
 
 vi.mock('../../../../services/gitService', () => ({
     gitService: {
@@ -23,40 +23,42 @@ vi.mock('../../../../services/gitService', () => ({
     }
 }));
 
-vi.mock('$lib/toasts', () => ({
+vi.mock('$lib/toasts.svelte.js', () => ({
     addToast: vi.fn()
 }));
 
-vi.mock('$lib/i18n', () => ({
+const mockTranslations = {
+    settings: {
+        configured_servers: 'Configured Servers',
+        add_git_server: 'Add Git Server',
+        edit_git_server: 'Edit Git Server',
+        display_name: 'Display Name',
+        server_url: 'Server URL',
+        personal_access_token: 'Personal Access Token',
+        default_repository_optional: 'Default Repository (Optional)',
+        default_branch: 'Default Branch',
+        save_configuration: 'Save Configuration',
+        update_configuration: 'Update Configuration',
+        connection_success: 'Connection successful',
+        connection_failed_short: 'Connection failed',
+        git_config_saved: 'Git configuration saved',
+        git_config_updated: 'Git configuration updated',
+        git_delete_confirm: 'Are you sure?',
+        git_config_deleted: 'Git configuration deleted'
+    },
+    llm: { type: 'Type', test: 'Test' },
+    nav: { settings_git: 'Git Settings' },
+    git: { no_servers_configured: 'No servers configured' },
+    common: { edit: 'Edit', delete: 'Delete', cancel: 'Cancel' }
+};
+vi.mock('$lib/i18n/index.svelte.js', () => ({
     t: {
         subscribe: (fn) => {
-            fn({
-                settings: {
-                    configured_servers: 'Configured Servers',
-                    add_git_server: 'Add Git Server',
-                    edit_git_server: 'Edit Git Server',
-                    display_name: 'Display Name',
-                    server_url: 'Server URL',
-                    personal_access_token: 'Personal Access Token',
-                    default_repository_optional: 'Default Repository (Optional)',
-                    default_branch: 'Default Branch',
-                    save_configuration: 'Save Configuration',
-                    update_configuration: 'Update Configuration',
-                    connection_success: 'Connection successful',
-                    connection_failed_short: 'Connection failed',
-                    git_config_saved: 'Git configuration saved',
-                    git_config_updated: 'Git configuration updated',
-                    git_delete_confirm: 'Are you sure?',
-                    git_config_deleted: 'Git configuration deleted'
-                },
-                llm: { type: 'Type', test: 'Test' },
-                nav: { settings_git: 'Git Settings' },
-                git: { no_servers_configured: 'No servers configured' },
-                common: { edit: 'Edit', delete: 'Delete', cancel: 'Cancel' }
-            });
+            fn(mockTranslations);
             return () => { };
         }
     },
+    getT: vi.fn(() => mockTranslations),
     _: vi.fn((key) => key)
 }));
 
diff --git a/frontend/src/routes/settings/notifications/+page.svelte b/frontend/src/routes/settings/notifications/+page.svelte
index 6f890e00..90473a9a 100644
--- a/frontend/src/routes/settings/notifications/+page.svelte
+++ b/frontend/src/routes/settings/notifications/+page.svelte
@@ -11,9 +11,9 @@
    * @LAYER UI
    */
   import { onMount } from "svelte";
-  import { t } from "$lib/i18n";
+  import { t } from "$lib/i18n/index.svelte.js";
   import { api } from "$lib/api.js";
-  import { addToast } from "$lib/toasts";
+  import { addToast } from "$lib/toasts.svelte.js";
 
   let isLoading = $state(true);
   let isSaving = $state(false);
diff --git a/frontend/src/routes/storage/repos/+page.svelte b/frontend/src/routes/storage/repos/+page.svelte
index 05245df4..906c09fa 100644
--- a/frontend/src/routes/storage/repos/+page.svelte
+++ b/frontend/src/routes/storage/repos/+page.svelte
@@ -22,28 +22,25 @@
    * @UX_RECOVERY: Environment Selection -> Switch environment to retry loading.
    */
   import { onMount } from 'svelte';
-  import { fromStore } from 'svelte/store';
   import RepositoryDashboardGrid from '../../../components/RepositoryDashboardGrid.svelte';
-  import { addToast as toast } from '$lib/toasts';
+  import { addToast as toast } from '$lib/toasts.svelte.js';
   import { api } from '$lib/api.js';
   import { gitService } from '../../../services/gitService.js';
   import type { DashboardMetadata } from '$lib/types/dashboard';
-  import { t } from '$lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
   import { Button, Card, PageHeader, Select } from '$lib/ui';
   import {
     environmentContextStore,
     initializeEnvironmentContext,
     setSelectedEnvironment,
-  } from '$lib/stores/environmentContext.js';
-
-  const environmentContextState = fromStore(environmentContextStore);
+  } from '$lib/stores/environmentContext.svelte.js';
 
   let selectedEnvId = $state("");
   let dashboards: DashboardMetadata[] = $state([]);
   let loading = $state(true);
   let fetchingDashboards = $state(false);
   let environments = $derived(
-    environmentContextState.current?.environments || [],
+    environmentContextStore.value?.environments || [],
   );
 
   // #region fetchEnvironments:Function [TYPE Function]
@@ -55,7 +52,7 @@
   async function fetchEnvironments() {
     try {
       await initializeEnvironmentContext();
-      selectedEnvId = environmentContextState.current?.selectedEnvId || "";
+      selectedEnvId = environmentContextStore.value?.selectedEnvId || "";
     } catch (e) {
       toast(e.message, 'error');
     } finally {
@@ -144,7 +141,7 @@
   onMount(fetchEnvironments);
 
   $effect(() => {
-    const storeSelectedEnvId = environmentContextState.current?.selectedEnvId || "";
+    const storeSelectedEnvId = environmentContextStore.value?.selectedEnvId || "";
     if (storeSelectedEnvId && selectedEnvId !== storeSelectedEnvId) {
       selectedEnvId = storeSelectedEnvId;
     }
diff --git a/frontend/src/routes/tools/backups/+page.svelte b/frontend/src/routes/tools/backups/+page.svelte
index ab596c88..b3ac703f 100644
--- a/frontend/src/routes/tools/backups/+page.svelte
+++ b/frontend/src/routes/tools/backups/+page.svelte
@@ -16,7 +16,7 @@
 
 <script lang="ts">
   // [SECTION: IMPORTS]
-  import { t } from '../../../lib/i18n';
+  import { t } from '$lib/i18n/index.svelte.js';
   import { PageHeader } from '../../../lib/ui';
   import BackupManager from '../../../components/backups/BackupManager.svelte';
   // [/SECTION]
diff --git a/frontend/src/routes/tools/debug/+page.svelte b/frontend/src/routes/tools/debug/+page.svelte
index 26d8a607..835742f8 100644
--- a/frontend/src/routes/tools/debug/+page.svelte
+++ b/frontend/src/routes/tools/debug/+page.svelte
@@ -18,7 +18,7 @@
     import DebugTool from '../../../components/tools/DebugTool.svelte';
     import TaskRunner from '../../../components/TaskRunner.svelte';
     import { PageHeader } from '$lib/ui';
-    import { t } from '$lib/i18n';
+    import { t } from '$lib/i18n/index.svelte.js';
 </script>
 
 <div class="max-w-7xl mx-auto p-6">
diff --git a/frontend/src/routes/tools/mapper/+page.svelte b/frontend/src/routes/tools/mapper/+page.svelte
index 6373a74a..c1c8bba6 100644
--- a/frontend/src/routes/tools/mapper/+page.svelte
+++ b/frontend/src/routes/tools/mapper/+page.svelte
@@ -18,7 +18,7 @@
     import MapperTool from '../../../components/tools/MapperTool.svelte';
     import TaskRunner from '../../../components/TaskRunner.svelte';
     import { PageHeader } from '$lib/ui';
-    import { t } from '$lib/i18n';
+    import { t } from '$lib/i18n/index.svelte.js';
 </script>
 
 <div class="min-h-screen bg-gray-50">
diff --git a/frontend/src/routes/tools/storage/+page.svelte b/frontend/src/routes/tools/storage/+page.svelte
index c918a39f..8bbb8d74 100644
--- a/frontend/src/routes/tools/storage/+page.svelte
+++ b/frontend/src/routes/tools/storage/+page.svelte
@@ -19,8 +19,8 @@
   import { onMount } from 'svelte';
   import { page } from '$app/state';
   import { listFiles, deleteFile } from '../../../services/storageService';
-  import { addToast } from '../../../lib/toasts';
-  import { t } from '../../../lib/i18n';
+  import { addToast } from '$lib/toasts.svelte.js';
+  import { t } from '$lib/i18n/index.svelte.js';
   import FileList from '../../../components/storage/FileList.svelte';
   import FileUpload from '../../../components/storage/FileUpload.svelte';
   // [/SECTION: IMPORTS]
diff --git a/frontend/src/routes/translate/+page.svelte b/frontend/src/routes/translate/+page.svelte
index c244ba56..30d0e518 100644
--- a/frontend/src/routes/translate/+page.svelte
+++ b/frontend/src/routes/translate/+page.svelte
@@ -2,8 +2,8 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
-  import { t, _ } from '$lib/i18n';
-  import { addToast } from '$lib/toasts';
+  import { t, _ } from '$lib/i18n/index.svelte.js';
+  import { addToast } from '$lib/toasts.svelte.js';
   import { fetchJobs, deleteJob, duplicateJob } from '$lib/api/translate.js';
 
   /** @type {string} idle | loading | empty | populated | error */
diff --git a/frontend/src/routes/translate/[id]/+page.svelte b/frontend/src/routes/translate/[id]/+page.svelte
index d42042d5..22fac44c 100644
--- a/frontend/src/routes/translate/[id]/+page.svelte
+++ b/frontend/src/routes/translate/[id]/+page.svelte
@@ -66,8 +66,8 @@
   import { onMount, onDestroy } from 'svelte';
   import { goto } from '$app/navigation';
   import { page } from '$app/state';
-  import { t, _ } from '$lib/i18n';
-  import { addToast } from '$lib/toasts';
+  import { t, _ } from '$lib/i18n/index.svelte.js';
+  import { addToast } from '$lib/toasts.svelte.js';
   import { api } from '$lib/api.js';
   import {
     fetchJobs,
@@ -85,13 +85,12 @@
   import ConfigTabForm from '$lib/components/translate/ConfigTabForm.svelte';
   import TargetTabForm from '$lib/components/translate/TargetTabForm.svelte';
   import RunTabContent from '$lib/components/translate/RunTabContent.svelte';
-	import { fromStore } from 'svelte/store';
 	import {
 		translationRunStore,
 		startTranslationRun,
 		resetTranslationRun,
 		clearOnCompleteCallback,
-	} from '$lib/stores/translationRun.js';
+	} from '$lib/stores/translationRun.svelte.js';
 
 
 
@@ -188,8 +187,7 @@
   });
 
   // Run state — using global store to survive page navigation
-  let runState = fromStore(translationRunStore);
-  let currentRunId = $derived(runState.current?.runId || null);
+  let currentRunId = $derived(translationRunStore.value?.runId || null);
   let completedRuns = $state([]);
   let expandedRunIds = $state([]);
   let isRunning = $state(false);
diff --git a/frontend/src/routes/translate/dictionaries/+page.svelte b/frontend/src/routes/translate/dictionaries/+page.svelte
index c2aecdf6..06568ba5 100644
--- a/frontend/src/routes/translate/dictionaries/+page.svelte
+++ b/frontend/src/routes/translate/dictionaries/+page.svelte
@@ -3,11 +3,11 @@
   import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
   import { page } from '$app/state';
-  import { t, _ } from '$lib/i18n';
+  import { t, _ } from '$lib/i18n/index.svelte.js';
   import { PageHeader } from '$lib/ui';
   import { Button } from '$lib/ui';
   import { Card } from '$lib/ui';
-  import { addToast } from '$lib/toasts';
+  import { addToast } from '$lib/toasts.svelte.js';
   import { dictionaryApi } from '$lib/api/translate.js';
 
   let state = $state('loading'); // idle | loading | empty | populated | delete_blocked
diff --git a/frontend/src/routes/translate/dictionaries/[id]/+page.svelte b/frontend/src/routes/translate/dictionaries/[id]/+page.svelte
index 457711a8..0f246c4b 100644
--- a/frontend/src/routes/translate/dictionaries/[id]/+page.svelte
+++ b/frontend/src/routes/translate/dictionaries/[id]/+page.svelte
@@ -3,9 +3,9 @@
   import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
   import { page } from '$app/state';
-  import { t, _ } from '$lib/i18n';
+  import { t, _ } from '$lib/i18n/index.svelte.js';
   import { PageHeader, Button, Card } from '$lib/ui';
-  import { addToast } from '$lib/toasts';
+  import { addToast } from '$lib/toasts.svelte.js';
   import { dictionaryApi } from '$lib/api/translate.js';
 
   let dictionaryId = $derived(page.params.id);
diff --git a/frontend/src/routes/translate/history/+page.svelte b/frontend/src/routes/translate/history/+page.svelte
index ed040bc4..5d83a5a7 100644
--- a/frontend/src/routes/translate/history/+page.svelte
+++ b/frontend/src/routes/translate/history/+page.svelte
@@ -1,8 +1,8 @@
 <!-- #region TranslateHistoryPage [C:3] [TYPE Page] [SEMANTICS sveltekit, translate, history, run, metrics] -->
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { addToast } from '$lib/toasts';
-	import { t, _ } from '$lib/i18n';
+	import { addToast } from '$lib/toasts.svelte.js';
+	import { t, _ } from '$lib/i18n/index.svelte.js';
 	import {
 		fetchAllRuns,
 		fetchRunDetail,
diff --git a/frontend/src/routes/validation-tasks/+page.svelte b/frontend/src/routes/validation-tasks/+page.svelte
index c79e89ea..c136cbf0 100644
--- a/frontend/src/routes/validation-tasks/+page.svelte
+++ b/frontend/src/routes/validation-tasks/+page.svelte
@@ -9,8 +9,8 @@
 <!-- @UX_RECOVERY Retry button on load error; inline confirm on delete -->
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { t } from '$lib/i18n';
-	import { addToast } from '$lib/toasts';
+	import { t } from '$lib/i18n/index.svelte.js';
+	import { addToast } from '$lib/toasts.svelte.js';
 	import { api } from '$lib/api.js';
 	import { onMount } from 'svelte';
 	import { log } from '$lib/cot-logger';
diff --git a/frontend/src/routes/validation-tasks/[policyId]/+page.svelte b/frontend/src/routes/validation-tasks/[policyId]/+page.svelte
index e5d2c3ea..d7cc43c7 100644
--- a/frontend/src/routes/validation-tasks/[policyId]/+page.svelte
+++ b/frontend/src/routes/validation-tasks/[policyId]/+page.svelte
@@ -11,8 +11,8 @@
 <!-- @UX_REACTIVITY Props -> $props(data), LocalState -> $state(...) -->
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { t } from '$lib/i18n';
-	import { addToast } from '$lib/toasts';
+	import { t } from '$lib/i18n/index.svelte.js';
+	import { addToast } from '$lib/toasts.svelte.js';
 	import { triggerValidationRun as triggerRun, deleteValidationTask as deleteTask, getValidationRuns as fetchRuns } from '$lib/api.js';
 	import { page } from '$app/state';
 
diff --git a/frontend/src/routes/validation-tasks/[policyId]/edit/+page.svelte b/frontend/src/routes/validation-tasks/[policyId]/edit/+page.svelte
index 4264239b..ac18e49b 100644
--- a/frontend/src/routes/validation-tasks/[policyId]/edit/+page.svelte
+++ b/frontend/src/routes/validation-tasks/[policyId]/edit/+page.svelte
@@ -10,8 +10,8 @@
 <!-- @UX_STATE Error -> Toast error message -->
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { t } from '$lib/i18n';
-  import { addToast } from '$lib/toasts';
+  import { t } from '$lib/i18n/index.svelte.js';
+  import { addToast } from '$lib/toasts.svelte.js';
   import { api } from '$lib/api.js';
   import ValidationTaskForm from '$lib/components/llm/ValidationTaskForm.svelte';
   import { page } from '$app/state';
@@ -38,7 +38,9 @@
     llm_batch_size: task.llm_batch_size ?? 1,
     llm_provider_id: task.provider_id || '',
     prompt_template: task.prompt_template || '',
-    schedule: task.schedule || 'manual',
+    schedule_days: task.schedule_days || [],
+    window_start: task.window_start || '',
+    window_end: task.window_end || '',
     is_active: task.is_active ?? true,
   });
 
diff --git a/frontend/src/routes/validation-tasks/[policyId]/runs/[runId]/+page.svelte b/frontend/src/routes/validation-tasks/[policyId]/runs/[runId]/+page.svelte
index ca9d5089..52952d8f 100644
--- a/frontend/src/routes/validation-tasks/[policyId]/runs/[runId]/+page.svelte
+++ b/frontend/src/routes/validation-tasks/[policyId]/runs/[runId]/+page.svelte
@@ -13,7 +13,7 @@
 <!-- @UX_TEST: Populated -> {expand dashboard with issues, expected: tab buttons show red/yellow badge with issue count} -->
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { t } from '$lib/i18n';
+	import { t } from '$lib/i18n/index.svelte.js';
 	import { api } from '$lib/api.js';
 	import { page } from '$app/state';
 
diff --git a/frontend/src/routes/validation-tasks/history/+page.svelte b/frontend/src/routes/validation-tasks/history/+page.svelte
index 1c3bcba4..31470b3e 100644
--- a/frontend/src/routes/validation-tasks/history/+page.svelte
+++ b/frontend/src/routes/validation-tasks/history/+page.svelte
@@ -4,7 +4,7 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
-	import { t } from '$lib/i18n';
+	import { t } from '$lib/i18n/index.svelte.js';
 
 	/** @type {{ data: import('./$types').PageData }} */
 	let { data } = $props();
diff --git a/frontend/src/routes/validation-tasks/new/+page.svelte b/frontend/src/routes/validation-tasks/new/+page.svelte
index 14b8cf5c..19158b2d 100644
--- a/frontend/src/routes/validation-tasks/new/+page.svelte
+++ b/frontend/src/routes/validation-tasks/new/+page.svelte
@@ -11,8 +11,8 @@
 <!-- @UX_STATE Error -> Toast error message -->
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { t } from '$lib/i18n';
-  import { addToast } from '$lib/toasts';
+  import { t } from '$lib/i18n/index.svelte.js';
+  import { addToast } from '$lib/toasts.svelte.js';
   import { api } from '$lib/api.js';
   import ValidationTaskForm from '$lib/components/llm/ValidationTaskForm.svelte';
 
diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js
index 25b13a3b..385722bc 100755
--- a/frontend/svelte.config.js
+++ b/frontend/svelte.config.js
@@ -7,7 +7,7 @@ const config = {
 
 	kit: {
 		alias: {
-			'$components': 'src/components',
+			'$components': 'src/components',   // @DEPRECATED Legacy alias — use $lib for new code
 			'$lib': 'src/lib'
 		},
 		adapter: adapter({
diff --git a/frontend/tests/maintenance-store.test.ts b/frontend/tests/maintenance-store.test.ts
index 2406c1e5..071f12fd 100644
--- a/frontend/tests/maintenance-store.test.ts
+++ b/frontend/tests/maintenance-store.test.ts
@@ -15,12 +15,12 @@ const { mockListEvents, mockGetSettings, mockUpdateSettings, mockEndMaintenance,
 }));
 
 // Mock toasts
-vi.mock('$lib/toasts.js', () => ({
+vi.mock('$lib/toasts.svelte.js', () => ({
     addToast: vi.fn()
 }));
 
 // Mock i18n
-vi.mock('$lib/i18n', () => ({
+vi.mock('$lib/i18n/index.svelte.js', () => ({
     t: { maintenance: {} }
 }));
 
diff --git a/frontend/tests/maintenance.test.ts b/frontend/tests/maintenance.test.ts
index 33fa4a1d..3056a07f 100644
--- a/frontend/tests/maintenance.test.ts
+++ b/frontend/tests/maintenance.test.ts
@@ -47,12 +47,12 @@ function resetMockStore() {
 }
 
 // Mock toasts
-vi.mock('$lib/toasts.js', () => ({
+vi.mock('$lib/toasts.svelte.js', () => ({
     addToast: vi.fn()
 }));
 
 // Mock i18n — $t is a derived store, needs subscribe method for Svelte $ prefix
-vi.mock('$lib/i18n', () => {
+vi.mock('$lib/i18n/index.svelte.js', () => {
     const subscribers = new Set();
     const tData = {
         maintenance: {
@@ -83,6 +83,7 @@ vi.mock('$lib/i18n', () => {
             }
         },
         _: (key) => key,
+        getT: () => ({}),
     };
 });