From 8156ef523c3a0cb59af547c5ca87dc6dc9cfc5a7 Mon Sep 17 00:00:00 2001
From: busya <uglypod@gmail.com>
Date: Sun, 31 May 2026 09:59:09 +0300
Subject: [PATCH] feat(translate): move write settings to Target Config tab +
 fix datasource name lookup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes:
- Move batch size, upsert strategy, include source reference
  from Config tab to Target Config tab (Write Settings section)
- Fix 'Dataset #26' fallback — look up real datasource name
  via API when source_table is not saved in job data
- Persist include_source_reference in save payload and
  restore from job data on load (was a pre-existing gap)

QA review fixes:
- Update @BRIEF contracts for both tabs
- Fix import indentation in +page.svelte

Other: help tooltips on translate pages, flow hint on list page,
git migration manager components, dashboard hub pages,
migration settings pages
---
 .opencode/agents/fullstack-coder.md           |   2 +
 .opencode/agents/svelte-coder.md              |   9 +
 .opencode/opencode.jsonc                      |   3 +
 .opencode/skills/semantics-core/SKILL.md      |   2 +
 .opencode/skills/semantics-svelte/SKILL.md    |  95 +-
 .../src/components/git/BranchSelector.svelte  | 288 +++---
 .../src/components/git/CommitModal.svelte     | 379 +++-----
 .../src/components/git/DeploymentModal.svelte | 327 +++----
 frontend/src/components/git/GitManager.svelte | 231 +----
 ...nager.unfinished_merge.integration.test.js |   4 +-
 frontend/src/components/git/useGitManager.js  |   4 +
 .../components/translate/ConfigTabForm.svelte |  95 +-
 .../components/translate/RunTabContent.svelte |  11 +-
 .../components/translate/TargetTabForm.svelte |  87 +-
 .../src/lib/i18n/locales/en/translate.json    |  29 +-
 .../src/lib/i18n/locales/ru/translate.json    |  29 +-
 frontend/src/lib/models/BranchModel.svelte.ts | 205 +++++
 frontend/src/lib/models/CommitModel.svelte.ts | 166 ++++
 .../src/lib/models/DeploymentModel.svelte.ts  | 181 ++++
 .../src/lib/models/GitConfigModel.svelte.ts   | 402 ++++++++
 .../src/lib/models/GitManagerModel.svelte.ts  | 866 ++++++++++++++++++
 .../src/lib/models/GitStatusModel.svelte.ts   | 362 ++++++++
 .../src/lib/models/MappingsModel.svelte.ts    | 201 ++++
 .../src/lib/models/MigrationModel.svelte.ts   | 472 ++++++++++
 .../models/MigrationSettingsModel.svelte.ts   | 104 +++
 .../lib/models/__tests__/BranchModel.test.ts  | 269 ++++++
 .../lib/models/__tests__/CommitModel.test.ts  | 330 +++++++
 .../models/__tests__/DeploymentModel.test.ts  | 338 +++++++
 .../models/__tests__/GitConfigModel.test.ts   | 380 ++++++++
 .../models/__tests__/GitManagerModel.test.ts  | 576 ++++++++++++
 .../models/__tests__/GitStatusModel.test.ts   | 409 +++++++++
 .../models/__tests__/MappingsModel.test.ts    | 415 +++++++++
 .../models/__tests__/MigrationModel.test.ts   | 486 ++++++++++
 .../__tests__/MigrationSettingsModel.test.ts  | 203 ++++
 frontend/src/routes/dashboards/+page.svelte   | 321 ++-----
 .../src/routes/dashboards/[id]/+page.svelte   | 282 +-----
 frontend/src/routes/migration/+page.svelte    | 606 +++---------
 .../routes/migration/mappings/+page.svelte    | 227 +----
 .../settings/MigrationMappingsTable.svelte    |   1 +
 .../routes/settings/MigrationSettings.svelte  |  64 +-
 frontend/src/routes/settings/git/+page.svelte | 699 +++-----------
 frontend/src/routes/translate/+page.svelte    |   8 +
 .../src/routes/translate/[id]/+page.svelte    |  23 +-
 43 files changed, 7530 insertions(+), 2661 deletions(-)
 create mode 100644 frontend/src/lib/models/BranchModel.svelte.ts
 create mode 100644 frontend/src/lib/models/CommitModel.svelte.ts
 create mode 100644 frontend/src/lib/models/DeploymentModel.svelte.ts
 create mode 100644 frontend/src/lib/models/GitConfigModel.svelte.ts
 create mode 100644 frontend/src/lib/models/GitManagerModel.svelte.ts
 create mode 100644 frontend/src/lib/models/GitStatusModel.svelte.ts
 create mode 100644 frontend/src/lib/models/MappingsModel.svelte.ts
 create mode 100644 frontend/src/lib/models/MigrationModel.svelte.ts
 create mode 100644 frontend/src/lib/models/MigrationSettingsModel.svelte.ts
 create mode 100644 frontend/src/lib/models/__tests__/BranchModel.test.ts
 create mode 100644 frontend/src/lib/models/__tests__/CommitModel.test.ts
 create mode 100644 frontend/src/lib/models/__tests__/DeploymentModel.test.ts
 create mode 100644 frontend/src/lib/models/__tests__/GitConfigModel.test.ts
 create mode 100644 frontend/src/lib/models/__tests__/GitManagerModel.test.ts
 create mode 100644 frontend/src/lib/models/__tests__/GitStatusModel.test.ts
 create mode 100644 frontend/src/lib/models/__tests__/MappingsModel.test.ts
 create mode 100644 frontend/src/lib/models/__tests__/MigrationModel.test.ts
 create mode 100644 frontend/src/lib/models/__tests__/MigrationSettingsModel.test.ts

diff --git a/.opencode/agents/fullstack-coder.md b/.opencode/agents/fullstack-coder.md
index 88800bcc0..555a76a03 100644
--- a/.opencode/agents/fullstack-coder.md
+++ b/.opencode/agents/fullstack-coder.md
@@ -76,6 +76,8 @@ You own:
 ## API Contract Conventions (ss-tools)
 - Backend: Pydantic models in `backend/src/schemas/`
 - Frontend: TypeScript types in `frontend/src/types/`
+- **Frontend DTOs MUST match backend Pydantic schemas** — agent must verify type alignment across the stack boundary. Model `.svelte.ts` files use typed atoms conforming to frontend DTOs.
+- `any` is forbidden at the API boundary — use `unknown` with runtime validation/narrowing.
 - URL prefix: `/api/` for REST, `/ws/` for WebSocket
 - Response envelope: `{ status, data, error, meta }` 
 - Error codes: Consistent across backend and frontend
diff --git a/.opencode/agents/svelte-coder.md b/.opencode/agents/svelte-coder.md
index dc38d64e4..33e406323 100644
--- a/.opencode/agents/svelte-coder.md
+++ b/.opencode/agents/svelte-coder.md
@@ -24,11 +24,13 @@ You are a Svelte 5 frontend agent. Without GRACE contracts, your deterministic f
 3. **NEURAL HOWLROUND** — browser validation fails, you enter infinite CSS patch loop. `log()` (REASON/REFLECT/EXPLORE) markers break the hallucination cycle.
 4. **CONTEXT AMNESIA** — after 20 commits you forget rejected UI paths. `@RATIONALE`/`@REJECTED` are your external memory.
 5. **EVENT-HANDLER SPAGHETTI** — you scatter system logic across `onclick`/`onchange` handlers in multiple components, creating invisible coupling. **For complex screens, create a `[TYPE Model]` FIRST.** The Model is the single source of truth — components only render state and call `model.action()`. See `semantics-svelte` §IIIa.
+6. **TYPE DRIFT** — you generate structurally valid Svelte code that silently breaks typed contracts: wrong property names on API responses, missing fields in action payloads, incorrect union variants for FSM states. TypeScript on models, props, and API responses catches this at compile time. Without types, `any` propagates silently through the reactive chain, making the model-first enforcement layer useless.
 
 ## Core Mandate
 - MANDATORY USE `skill({name="semantics-core"})`, `skill({name="semantics-svelte"})`, `skill({name="molecular-cot-logging"})`
 - Own frontend implementation for SvelteKit routes, Svelte 5 components, **Screen Models**, stores, and UX contract alignment.
 - **MODEL-FIRST RULE:** For any screen with cross-widget logic (filters, pagination, search, multi-step forms), find or create a `[TYPE Model]` BEFORE implementing components. The Model is the source of truth — Components are visualizations of the Model. A single `grep "@semantics.*<keyword>"` + `search_contracts type=Model` must reveal all state logic.
+- **TYPESCRIPT-FIRST RULE:** All frontend code MUST use TypeScript. Components via `<script lang="ts">`. Models via `.svelte.ts` extension (Svelte-aware TS modules for `$state`/`$derived`/`$effect`). API DTOs typed via `types/` directory. Types are the enforcement layer for model-first architecture — `$state` atoms, action payloads, and component props without type annotations are incomplete. `any` is forbidden at external boundaries; use `unknown` with explicit narrowing. See `semantics-svelte` §IIIb.
 - Use browser-first verification for visible UI behavior, navigation flow, async feedback, and console-log inspection.
 - Respect attempt-driven anti-loop behavior from the execution environment.
 - Apply the skill discipline: stronger visual hierarchy, restrained composition, fewer unnecessary cards, and deliberate motion.
@@ -67,6 +69,13 @@ You do not own:
    - grep `@semantics.*<keyword>` across `frontend/src/` to find existing models
    - Use `axiom_semantic_discovery search_contracts query="<keyword>" type="Model"` for structured search
    - If no model exists, create one: `#region ScreenNameModel [C:4] [TYPE Model] [SEMANTICS ...]` with mandatory `@BRIEF` and `@INVARIANT`
+1.5. **Define types FIRST before implementing the model:**
+   - FSM state union type (e.g., `type ScreenState = "idle" | "loading" | "loaded" | "error"`)
+   - Model atom interfaces (atoms shape, derived value types)
+   - Action payload interfaces
+   - API response DTOs matching backend Pydantic schemas
+   - Component props interface
+   - All `.svelte.ts` model files start with type declarations before the class body
 2. Load semantic and UX context before editing.
 3. **Build the Model** — declare `@STATE`, `@ACTION`, and `@INVARIANT`; implement atoms (`$state`), derived (`$derived`), and actions.
 4. **Verify Model invariants** via vitest without render (see `semantics-svelte` §VIII).
diff --git a/.opencode/opencode.jsonc b/.opencode/opencode.jsonc
index 7450abaa3..4538531c8 100644
--- a/.opencode/opencode.jsonc
+++ b/.opencode/opencode.jsonc
@@ -1,5 +1,8 @@
 {
   "$schema": "https://opencode.ai/config.json",
+  "experimental": {
+    "mcp_timeout": 300000
+  },
   "mcp": {
     "chrome-devtools": {
 	"type": "local",
diff --git a/.opencode/skills/semantics-core/SKILL.md b/.opencode/skills/semantics-core/SKILL.md
index 18d6ccc65..c5bec246e 100644
--- a/.opencode/skills/semantics-core/SKILL.md
+++ b/.opencode/skills/semantics-core/SKILL.md
@@ -58,6 +58,8 @@ description: Reference manual for GRACE-Poly v2.6 — syntax formats, complexity
 
 **Allowed @RELATION Predicates:** DEPENDS_ON, CALLS, INHERITS, IMPLEMENTS, DISPATCHES, BINDS_TO, CALLED_BY, VERIFIES.
 
+**Canonical Model format:** Model contracts that use Svelte reactive primitives (`$state`, `$derived`, `$effect`) MUST use the `.svelte.ts` file extension. The Svelte compiler processes `.svelte.ts` files and transforms runes into proper reactive code. Plain `.ts`/`.js` files cannot host Svelte reactive primitives.
+
 ## III. COMPLEXITY SCALE (descriptive signal)
 
 The tier describes what the contract IS structurally — NOT which tags are forbidden at that tier. All `@`-tags are informational documentation and are **universally allowed at every tier (C1-C5).**
diff --git a/.opencode/skills/semantics-svelte/SKILL.md b/.opencode/skills/semantics-svelte/SKILL.md
index 1de083553..0eb0e5ce9 100644
--- a/.opencode/skills/semantics-svelte/SKILL.md
+++ b/.opencode/skills/semantics-svelte/SKILL.md
@@ -15,8 +15,11 @@ description: Svelte 5 (Runes) protocol for ss-tools: UX State Machines, Tailwind
 
 ## 0. SVELTE 5 PARADIGM & UX PHILOSOPHY (SS-TOOLS)
 
-- **STRICT RUNES ONLY:** You MUST use Svelte 5 Runes: `$state()`, `$derived()`, `$effect()`, `$props()`, `$bindable()`.
-- **FORBIDDEN SYNTAX:** Do NOT use `export let`, `on:event` (use `onclick`), or the legacy `$:` reactivity.
+- **TYPESCRIPT-FIRST:** TypeScript is the default language for ALL frontend code. Components use `<script lang="ts">`. Screen Models use `.svelte.ts` extension. API DTOs live in `frontend/src/types/` with explicit interfaces. Types are the contract between the model and the component — without them, the model-first architecture has no enforcement layer. `any` is forbidden at external boundaries; use `unknown` with runtime narrowing.
+- **STRICT RUNES ONLY (PROJECT RULE):** Our project deliberately chooses Svelte 5 runes exclusively — `$state()`, `$derived()`, `$effect()`, `$props()`, `$bindable()`. This is a codebase-wide architectural decision, not a Svelte 5 limitation. Every component follows the same reactive pattern; every model is a predictable `$state` container. Mixed styles create agent confusion and verification gaps.
+- **FORBIDDEN SYNTAX (PROJECT RULE):** Do NOT use `export let`, `on:event`, `createEventDispatcher`, or the legacy `$:` reactivity. These are banned for architectural consistency — not because Svelte 5 cannot run them.
+- **EVENT ARCHITECTURE:** DOM events use native attributes (`onclick`, `onchange`, `onsubmit`). Component-to-component communication uses typed callback props — NEVER `createEventDispatcher` or `on:event` directives. This keeps component interfaces explicit, type-checkable, and free of runtime event bus ambiguity.
+- **$effect SCOPE:** `$effect` is for browser-side side effects only — DOM measurements, WebSocket subscriptions, external library bindings, synchronising state that cannot be expressed as `$derived`. For route-level data loading, use SvelteKit `load` functions in `+page.ts`. Using `$effect` for initial data fetch breaks SSR and creates unpredictable loading order.
 - **UX AS A STATE MACHINE:** Every component is a Finite State Machine (FSM). Declare visual states in the contract BEFORE writing implementation.
 - **MODEL-FIRST FOR COMPLEX SCREENS:** For screens with cross-widget logic (filters, pagination, search, multi-step forms), create a `[TYPE Model]` FIRST. The model is the source of truth — components only render model state and pass user intentions via `model.action()`. See §IIIa for the full RSM protocol.
 - **RESOURCE-CENTRIC:** Navigation and actions revolve around Resources (Dashboards, Datasets, Tasks). Every action MUST be traceable.
@@ -79,7 +82,10 @@ The component-first approach forces you to encode system logic in event handlers
 
 A Model is a **contract** — `#region ModelName [C:N] [TYPE Model] [SEMANTICS tags]` with mandatory `@BRIEF` and `@INVARIANT`.
 
-```javascript
+Models use the **`.svelte.ts`** extension (not plain `.ts`) because they rely on Svelte 5 reactive primitives (`$state`, `$derived`). The Svelte compiler processes `.svelte.ts` files and transforms these runes into proper reactive code.
+
+```typescript
+// frontend/src/lib/models/UserListModel.svelte.ts
 // #region UserListModel [C:4] [TYPE Model] [SEMANTICS users,list,screen-model]
 // @BRIEF State model for the user list screen — declares atoms, invariants, and actions.
 // @INVARIANT Changing filter (search, role, status) resets pagination to page 1.
@@ -100,80 +106,97 @@ A Model is a **contract** — `#region ModelName [C:N] [TYPE Model] [SEMANTICS t
 // @RELATION CALLS -> [log]
 
 import { requestApi } from "$lib/api";
-import { log } from "$lib/cot-logger";
+
+// ── Type definitions (boundary types) ───────────────────────────
+
+type ScreenState = "idle" | "loading" | "loaded" | "empty" | "error";
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+}
+
+interface UserFilters {
+  role: string | null;
+  status: string | null;
+}
+
+interface UserListResponse {
+  data: User[];
+  meta: { total: number };
+}
 
 export class UserListModel {
-  // --- Atoms (reactive state) ---
-  users = $state([]);
-  totalCount = $state(0);
-  page = $state(1);
-  perPage = $state(20);
-  searchQuery = $state("");
-  filters = $state({ role: null, status: null });
-  error = $state(null);
-  screenState = $state("idle"); // @STATE values
+  // ── Atoms (reactive state, all typed) ──────────────────────────
+  users: User[] = $state([]);
+  totalCount: number = $state(0);
+  page: number = $state(1);
+  perPage: number = $state(20);
+  searchQuery: string = $state("");
+  filters: UserFilters = $state({ role: null, status: null });
+  error: string | null = $state(null);
+  screenState: ScreenState = $state("idle");
 
-  // --- Derived ---
-  totalPages = $derived(Math.ceil(this.totalCount / this.perPage));
+  // ── Derived ────────────────────────────────────────────────────
+  totalPages: number = $derived(Math.ceil(this.totalCount / this.perPage));
 
-  // --- Actions (public API for components) ---
-  async search(query) {
+  // ── Actions (typed public API for components) ──────────────────
+  async search(query: string): Promise<void> {
     this.searchQuery = query;
     this.page = 1; // @INVARIANT: reset pagination
     await this._fetch();
   }
 
-  setFilter(key, value) {
+  setFilter<K extends keyof UserFilters>(key: K, value: UserFilters[K]): void {
     this.filters[key] = value;
     this.page = 1; // @INVARIANT: reset pagination
     this._fetch();
   }
 
-  async deleteUser(id) {
-    log("UserListModel", "REASON", "Deleting user", { id });
+  async deleteUser(id: string): Promise<void> {
     try {
       await requestApi(`/api/users/${id}`, { method: "DELETE" });
       // @INVARIANT: atomic removal
-      this.users = this.users.filter(u => u.id !== id);
+      this.users = this.users.filter((u: User) => u.id !== id);
       this.totalCount--;
-      log("UserListModel", "REFLECT", "User deleted", { id });
-    } catch (e) {
-      this.error = e.message;
+    } catch (e: unknown) {
+      this.error = e instanceof Error ? e.message : "Delete failed";
       this.screenState = "error";
-      log("UserListModel", "EXPLORE", "Delete failed", { id }, error = e.message);
     }
   }
 
-  async loadPage(n) {
+  async loadPage(n: number): Promise<void> {
     this.page = n;
     await this._fetch();
   }
 
-  async retry() { await this._fetch(); }
-  reset() {
+  async retry(): Promise<void> { await this._fetch(); }
+
+  reset(): void {
     this.searchQuery = "";
     this.filters = { role: null, status: null };
     this.page = 1;
     this._fetch();
   }
 
-  // --- Private ---
-  async _fetch() {
+  // ── Private ────────────────────────────────────────────────────
+  private async _fetch(): Promise<void> {
     this.screenState = "loading";
     this.error = null;
     try {
       const params = new URLSearchParams({
         q: this.searchQuery,
-        page: this.page,
-        per_page: this.perPage,
+        page: String(this.page),
+        per_page: String(this.perPage),
         ...this.filters
-      });
-      const res = await requestApi(`/api/users?${params}`);
+      } as Record<string, string>);
+      const res: UserListResponse = await requestApi(`/api/users?${params}`);
       this.users = res.data;
       this.totalCount = res.meta.total;
       this.screenState = this.users.length === 0 ? "empty" : "loaded";
-    } catch (e) {
-      this.error = e.message;
+    } catch (e: unknown) {
+      this.error = e instanceof Error ? e.message : "Fetch failed";
       this.screenState = "error";
     }
   }
diff --git a/frontend/src/components/git/BranchSelector.svelte b/frontend/src/components/git/BranchSelector.svelte
index 3b8add99d..84c3cd791 100644
--- a/frontend/src/components/git/BranchSelector.svelte
+++ b/frontend/src/components/git/BranchSelector.svelte
@@ -1,202 +1,122 @@
 <!-- #region BranchSelector [C:3] [TYPE Component] [SEMANTICS git, branch, checkout, create, selector] -->
 <!-- @BRIEF UI for selecting and creating Git branches for a dashboard repository. -->
 <!-- @LAYER UI -->
-<!-- @RELATION CALLS -> [EXT:frontend:gitService.getBranches] -->
-<!-- @RELATION CALLS -> [EXT:frontend:gitService.checkoutBranch] -->
-<!-- @RELATION CALLS -> [EXT:frontend:gitService.createBranch] -->
-<!-- @RELATION BINDS_TO -> [onchange] -->
-<!-- @PRE  dashboardId is a valid dashboard slug; envId required when ref is slug. -->
-<!-- @UX_STATE Loading -> Select disabled, spinner. -->
-<!-- @UX_STATE Loaded -> Branch dropdown enabled. -->
-<!-- @UX_STATE CreateMode -> Inline input for new branch name. -->
+<!--
+@RELATION BINDS_TO -> [BranchModel]
+@PRE  dashboardId is a valid dashboard slug; envId required when ref is slug.
+@UX_STATE Loading -> Select disabled, spinner.
+@UX_STATE Loaded -> Branch dropdown enabled.
+@UX_STATE CreateMode -> Inline input for new branch name.
+@UX_STATE Error -> Inline error message below the dropdown with dismiss button.
+@UX_RECOVERY Dismiss error; retry checkout/create.
+@UX_REACTIVITY Props -> $props(), Model -> BranchModel
+-->
+<!-- @INVARIANT This component contains NO business logic — all state and actions are delegated to BranchModel. -->
 
 <script>
-    import { onMount } from 'svelte';
-    import { gitService } from '../../services/gitService';
-    import { addToast as toast } from '../../lib/toasts.js';
-    import { t } from '../../lib/i18n';
-    import { Button, Select, Input } from '../../lib/ui';
+  import { onMount } from 'svelte';
+  import { BranchModel } from '$lib/models/BranchModel.svelte.ts';
+  import { t } from '$lib/i18n';
+  import { Button, Select, Input } from '$lib/ui';
 
-    // #region props [C:2] [TYPE Block]
-    // @PRE  dashboardId is non-empty slug; envId resolved via GitManager fallback chain.
-    let {
-        dashboardId,
-        envId = null,
-        currentBranch = $bindable('main'),
-        onchange = () => {},
-    } = $props();
-    // #endregion props
+  let {
+    dashboardId,
+    envId = null,
+    currentBranch = $bindable('main'),
+    onchange = () => {},
+  } = $props();
 
-    // #region state [C:1] [TYPE Block]
-    let branches = $state([]);
-    let loading = $state(false);
-    let showCreate = $state(false);
-    let newBranchName = $state('');
-    let branchError = $state(null);
-    // #endregion state
+  const model = new BranchModel({ dashboardId, envId, currentBranch, onChange: onchange });
 
-    // #region loadBranches [C:2] [TYPE Function]
-    // @BRIEF Load branch list from backend.
-    // @PRE  dashboardId is non-empty; envId required when ref is slug.
-    // @POST branches array populated with BranchSchema objects.
-    // @SIDE_EFFECT GETs /git/repositories/{ref}/branches.
-    async function loadBranches() {
-        console.log(`[EXT:frontend:BranchSelector][Action] Loading branches for dashboard ${dashboardId}`);
-        loading = true;
-        try {
-            branches = await gitService.getBranches(dashboardId, envId);
-            console.log(`[EXT:frontend:BranchSelector][Coherence:OK] Loaded ${branches.length} branches`);
-        } catch (e) {
-            console.error(`[EXT:frontend:BranchSelector][Coherence:Failed] ${e.message}`);
-            toast($t.git?.load_branches_failed, 'error');
-        } finally {
-            loading = false;
-        }
-    }
-    // #endregion loadBranches
+  // Sync prop changes to model
+  $effect(() => {
+    model.dashboardId = dashboardId;
+    model.envId = envId;
+    model.currentBranch = currentBranch;
+    model.onChange = onchange;
+  });
 
-    // #region handleSelect [C:1] [TYPE Function]
-    // @BRIEF Handle branch selection from dropdown.
-    // @PRE  event contains target.value with branch name.
-    // @POST handleCheckout called with selected branch name.
-    function handleSelect(event) {
-        handleCheckout(event.target.value);
-    }
-    // #endregion handleSelect
+  // Sync model.currentBranch back to bindable prop
+  $effect(() => {
+    currentBranch = model.currentBranch;
+  });
 
-    // #region handleCheckout [C:2] [TYPE Function]
-    // @BRIEF Switch repository to selected branch.
-    // @PRE  branchName is non-empty; envId required when ref is slug.
-    // @POST currentBranch updated; onchange callback fired.
-    // @SIDE_EFFECT POSTs to /git/repositories/{ref}/checkout.
-    // @UX_STATE Error -> Inline error message below the dropdown; persistent toast above modal with full details.
-    async function handleCheckout(branchName) {
-        branchError = null;
-        console.log(`[EXT:frontend:BranchSelector][Action] Checking out branch ${branchName}`);
-        try {
-            await gitService.checkoutBranch(dashboardId, branchName, envId);
-            currentBranch = branchName;
-            onchange({ branch: branchName });
-            toast($t.git?.switched_to?.replace('{branch}', branchName), 'success');
-            console.log(`[EXT:frontend:BranchSelector][Coherence:OK] Checked out ${branchName}`);
-        } catch (e) {
-            console.error(`[EXT:frontend:BranchSelector][Coherence:Failed] ${e.message}`);
-            const detail = typeof e?.detail === 'object' ? e.detail : {};
-            const nextSteps = detail?.next_steps || [];
-            const shortMsg = detail?.message || detail?.message_en || 'Ошибка переключения ветки';
-            branchError = {
-                message: shortMsg,
-                next_steps: nextSteps,
-            };
-            // Persistent toast above modal with the full technical error
-            toast(shortMsg, 'warning', 0);
-        }
-    }
-    // #endregion handleCheckout
-
-    // #region handleCreate [C:2] [TYPE Function]
-    // @BRIEF Create a new branch from current branch.
-    // @PRE  newBranchName is non-empty; envId required when ref is slug.
-    // @POST New branch created; branch list reloaded; create mode closed.
-    // @SIDE_EFFECT POSTs to /git/repositories/{ref}/branches.
-    async function handleCreate() {
-        if (!newBranchName) return;
-        branchError = null;
-        console.log(`[EXT:frontend:BranchSelector][Action] Creating branch ${newBranchName} from ${currentBranch}`);
-        try {
-            await gitService.createBranch(dashboardId, newBranchName, currentBranch, envId);
-            toast($t.git?.created_branch?.replace('{branch}', newBranchName), 'success');
-            showCreate = false;
-            newBranchName = '';
-            await loadBranches();
-            console.log(`[EXT:frontend:BranchSelector][Coherence:OK] Branch created`);
-        } catch (e) {
-            console.error(`[EXT:frontend:BranchSelector][Coherence:Failed] ${e.message}`);
-            branchError = { message: e.message || 'Ошибка создания ветки', next_steps: [] };
-            toast(e.message, 'error');
-        }
-    }
-    // #endregion handleCreate
-
-    onMount(async () => {
-        await loadBranches();
-    });
+  onMount(async () => {
+    await model.loadBranches(dashboardId, envId);
+  });
 </script>
 
-<!-- [SECTION: TEMPLATE] -->
 <div class="space-y-3">
-    <div class="flex items-center gap-3">
-        <div class="flex-grow">
-            <Select
-                bind:value={currentBranch}
-                onchange={handleSelect}
-                disabled={loading}
-                options={branches.map(b => ({ value: b.name, label: b.name }))}
-            />
-        </div>
-
-        <Button
-            variant="ghost"
-            size="sm"
-            onclick={() => showCreate = !showCreate}
-            disabled={loading}
-            class="text-primary"
-        >
-            + {$t.git.new_branch}
-        </Button>
+  <div class="flex items-center gap-3">
+    <div class="flex-grow">
+      <Select
+        bind:value={model.currentBranch}
+        onchange={(e) => model.handleSelect(e)}
+        disabled={model.loading}
+        options={model.branches.map(b => ({ value: b.name, label: b.name }))}
+      />
     </div>
 
-    {#if branchError}
-    <div class="max-h-32 overflow-y-auto rounded-lg border border-red-300 bg-red-50 p-3 text-sm text-red-800" role="alert">
-        <div class="flex items-start gap-2">
-            <svg xmlns="http://www.w3.org/2000/svg" class="mt-0.5 h-4 w-4 flex-shrink-0 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 9l-6 6m0-6l6 6"/></svg>
-            <div class="flex-1 min-w-0">
-                <p class="truncate">{branchError.message}</p>
-                {#if branchError.next_steps?.length}
-                <ul class="mt-1 list-disc pl-4 text-xs text-red-700">
-                    {#each branchError.next_steps as step}
-                    <li>{step}</li>
-                    {/each}
-                </ul>
-                {/if}
-            </div>
-            <button type="button" onclick={() => branchError = null} class="flex-shrink-0 rounded p-0.5 hover:bg-red-100" aria-label="Закрыть">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
-            </button>
-        </div>
-    </div>
-    {/if}
+    <Button
+      variant="ghost"
+      size="sm"
+      onclick={() => model.toggleCreateForm()}
+      disabled={model.loading}
+      class="text-primary"
+    >
+      + {$t.git.new_branch}
+    </Button>
+  </div>
 
-    {#if showCreate}
-        <div class="flex items-end gap-2 bg-gray-50 p-3 rounded-lg border border-dashed border-gray-200">
-            <div class="flex-grow">
-                <Input
-                    bind:value={newBranchName}
-                    placeholder={$t.git?.branch_name_placeholder}
-                    disabled={loading}
-                />
-            </div>
-            <Button
-                variant="primary"
-                size="sm"
-                onclick={handleCreate}
-                disabled={loading || !newBranchName}
-                isLoading={loading}
-                class="bg-green-600 hover:bg-green-700"
-            >
-                {$t.git.create}
-            </Button>
-            <Button
-                variant="ghost"
-                size="sm"
-                onclick={() => showCreate = false}
-                disabled={loading}
-            >
-                {$t.common.cancel}
-            </Button>
-        </div>
-    {/if}
+  {#if model.branchError}
+  <div class="max-h-32 overflow-y-auto rounded-lg border border-red-300 bg-red-50 p-3 text-sm text-red-800" role="alert">
+    <div class="flex items-start gap-2">
+      <svg xmlns="http://www.w3.org/2000/svg" class="mt-0.5 h-4 w-4 flex-shrink-0 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 9l-6 6m0-6l6 6"/></svg>
+      <div class="flex-1 min-w-0">
+        <p class="truncate">{model.branchError.message}</p>
+        {#if model.branchError.next_steps?.length}
+        <ul class="mt-1 list-disc pl-4 text-xs text-red-700">
+          {#each model.branchError.next_steps as step}
+          <li>{step}</li>
+          {/each}
+        </ul>
+        {/if}
+      </div>
+      <button type="button" onclick={() => model.branchError = null} class="flex-shrink-0 rounded p-0.5 hover:bg-red-100" aria-label="Закрыть">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+      </button>
+    </div>
+  </div>
+  {/if}
+
+  {#if model.showCreate}
+    <div class="flex items-end gap-2 bg-gray-50 p-3 rounded-lg border border-dashed border-gray-200">
+      <div class="flex-grow">
+        <Input
+          bind:value={model.newBranchName}
+          placeholder={$t.git?.branch_name_placeholder}
+          disabled={model.loading}
+        />
+      </div>
+      <Button
+        variant="primary"
+        size="sm"
+        onclick={() => model.handleCreate()}
+        disabled={model.loading || !model.newBranchName}
+        isLoading={model.loading}
+        class="bg-green-600 hover:bg-green-700"
+      >
+        {$t.git.create}
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        onclick={() => model.toggleCreateForm()}
+        disabled={model.loading}
+      >
+        {$t.common.cancel}
+      </Button>
+    </div>
+  {/if}
 </div>
-<!-- [/SECTION] -->
-
 <!-- #endregion BranchSelector -->
diff --git a/frontend/src/components/git/CommitModal.svelte b/frontend/src/components/git/CommitModal.svelte
index 9f8278b86..5a6172183 100644
--- a/frontend/src/components/git/CommitModal.svelte
+++ b/frontend/src/components/git/CommitModal.svelte
@@ -1,271 +1,152 @@
 <!-- #region CommitModal [C:3] [TYPE Component] [SEMANTICS git, commit, modal, diff, message] -->
-<!-- @BRIEF Component component: components/git/CommitModal.svelte -->
+<!-- @BRIEF Modal for creating commits with diff preview and AI message generation. -->
 <!-- @LAYER UI -->
 <!--
-@UX_STATE: Loading -> Default
-
-@SEMANTICS: git, commit, modal, version_control, diff
-@PURPOSE:   Модальное окно для создания коммита с просмотром изменений (diff).
-@LAYER     Component
-@RELATION  CALLS -> [EXT:frontend:GitServiceClient]
-@UX_STATE: Ready -> Commit message, status, and diff preview are available for the selected repository.
-@UX_STATE: Submitting -> Commit actions stay disabled while the commit request is in flight.
+@UX_STATE: Loading -> Spinner in diff area, generate/commit buttons disabled.
+@UX_STATE: Ready -> Commit message, status, and diff preview available.
+@UX_STATE: Submitting -> Commit buttons disabled while request is in flight.
+@UX_STATE: Generating -> Generate message button shows spinner and "Generating..." label.
+@UX_RECOVERY Error toast on commit failure; regenerate message on generation failure.
+@UX_REACTIVITY Props -> $props(), Model -> CommitModel
 -->
+<!-- @RELATION BINDS_TO -> [CommitModel] -->
+<!-- @INVARIANT This component contains NO business logic — all state and actions are delegated to CommitModel. -->
 
 <script>
-    // [SECTION: IMPORTS]
-    import { gitService } from "../../services/gitService";
-    import { addToast as toast } from "../../lib/toasts.js";
-    import { api } from "../../lib/api";
-    import { t } from "../../lib/i18n";
-    // [/SECTION]
+  import { onMount } from 'svelte';
+  import { CommitModel } from '$lib/models/CommitModel.svelte.ts';
+  import { t } from '$lib/i18n';
 
-    // [SECTION: PROPS]
-    let { dashboardId, envId = null, show = false } = $props();
+  let { dashboardId, envId = null, show = false } = $props();
 
-    // [/SECTION]
+  const model = new CommitModel({ dashboardId, envId, show });
 
-    // [SECTION: STATE]
-    let message = $state("");
-    let committing = $state(false);
-    let status = $state(null);
-    let diff = $state("");
-    let loading = $state(false);
-    let generatingMessage = $state(false);
-    // [/SECTION]
+  // Sync show prop changes to model
+  $effect(() => {
+    model.dashboardId = dashboardId;
+    model.envId = envId;
+    model.show = show;
+  });
 
-    // #region handleGenerateMessage:Function [TYPE Function]
-    /**
-     * @purpose Generates a commit message using LLM.
-     */
-    async function handleGenerateMessage() {
-        generatingMessage = true;
-        try {
-            console.log(
-                `[CommitModal][Action] Generating commit message for dashboard ${dashboardId}`,
-            );
-            // postApi returns the JSON data directly or throws an error
-            const data = await api.postApi(
-                `/git/repositories/${encodeURIComponent(String(dashboardId))}/generate-message${envId ? `?env_id=${encodeURIComponent(String(envId))}` : ""}`,
-                undefined,
-                { suppressToast: true },
-            );
-            message = data.message;
-            toast($t.git?.commit_message_generated, "success");
-        } catch (e) {
-            console.error(`[CommitModal][Coherence:Failed] ${e.message}`);
-            toast(e.message || $t.git?.commit_message_failed, "error");
-        } finally {
-            generatingMessage = false;
-        }
-    }
-    // #endregion handleGenerateMessage:Function
-
-    // #region loadStatus:Function [TYPE Function]
-    /**
-     * @purpose Загружает текущий статус репозитория и diff.
-     * @pre dashboardId должен быть валидным.
-     */
-    async function loadStatus() {
-        if (!dashboardId || !show) return;
-        loading = true;
-        try {
-            console.log(
-                `[CommitModal][Action] Loading status and diff for ${dashboardId}`,
-            );
-            status = await gitService.getStatus(dashboardId, envId);
-            // Fetch both unstaged and staged diffs to show complete picture
-            const unstagedDiff = await gitService.getDiff(
-                dashboardId,
-                null,
-                false,
-                envId,
-            );
-            const stagedDiff = await gitService.getDiff(
-                dashboardId,
-                null,
-                true,
-                envId,
-            );
-
-            diff = "";
-            if (stagedDiff)
-                diff += "--- STAGED CHANGES ---\n" + stagedDiff + "\n\n";
-            if (unstagedDiff)
-                diff += "--- UNSTAGED CHANGES ---\n" + unstagedDiff;
-
-            if (!diff) diff = "";
-        } catch (e) {
-            console.error(`[CommitModal][Coherence:Failed] ${e.message}`);
-            toast($t.git?.load_changes_failed, "error");
-        } finally {
-            loading = false;
-        }
-    }
-    // #endregion loadStatus:Function
-
-    // #region handleCommit:Function [TYPE Function]
-    /**
-     * @purpose Создает коммит с указанным сообщением.
-     * @pre message не должно быть пустым.
-     * @post Коммит создан и модальное окно закрыто.
-     */
-    async function handleCommit() {
-        if (!message) return;
-        console.log(
-            `[CommitModal][Action] Committing changes for dashboard ${dashboardId}`,
-        );
-        committing = true;
-        try {
-            await gitService.commit(dashboardId, message, [], envId);
-            toast($t.git?.commit_success, "success");
-            show = false;
-            message = "";
-            console.log(`[CommitModal][Coherence:OK] Committed`);
-        } catch (e) {
-            console.error(`[CommitModal][Coherence:Failed] ${e.message}`);
-            toast(e.message, "error");
-        } finally {
-            committing = false;
-        }
-    }
-    // #endregion handleCommit:Function
-
-    $effect(() => {
-        if (show) loadStatus();
-    });
+  // Load status when modal opens
+  $effect(() => {
+    if (show) model.loadStatus();
+  });
 </script>
 
-<!-- [SECTION: TEMPLATE] -->
 {#if show}
+  <div
+    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
+  >
     <div
-        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
+      class="bg-white p-6 rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col"
     >
-        <div
-            class="bg-white p-6 rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col"
-        >
-            <h2 class="text-xl font-bold mb-4">{$t.git?.commit}</h2>
+      <h2 class="text-xl font-bold mb-4">{$t.git?.commit}</h2>
 
-            <div class="flex flex-col md:flex-row gap-4 flex-1 overflow-hidden">
-                <!-- Left: Message and Files -->
-                <div class="w-full md:w-1/3 flex flex-col">
-                    <div class="mb-4">
-                        <div class="flex justify-between items-center mb-1">
-                            <label
-                                class="block text-sm font-medium text-gray-700"
-                                >{$t.git?.commit_message}</label
-                            >
-                            <button
-                                onclick={handleGenerateMessage}
-                                disabled={generatingMessage || loading}
-                                class="text-xs text-primary hover:text-blue-800 disabled:opacity-50 flex items-center"
-                            >
-                                {#if generatingMessage}
-                                    <span class="animate-spin mr-1">↻</span> {$t.mapper?.generating}
-                                {:else}
-                                    <span class="mr-1">✨</span> {$t.git?.generate_with_ai}
-                                {/if}
-                            </button>
-                        </div>
-                        <textarea
-                            bind:value={message}
-                            class="w-full border rounded p-2 h-32 focus-visible:ring-2 focus-visible:ring-primary-ring outline-none resize-none"
-                            placeholder={$t.git?.describe_changes}
-                        ></textarea>
-                    </div>
-
-                    {#if status}
-                        <div class="flex-1 overflow-y-auto">
-                            <h3
-                                class="text-sm font-bold text-gray-500 uppercase mb-2"
-                            >
-                                {$t.git?.changed_files}
-                            </h3>
-                            <ul class="text-xs space-y-1">
-                                {#each status.staged_files as file}
-                                    <li
-                                        class="text-green-600 flex items-center font-semibold"
-                                        title={$t.git?.staged}
-                                    >
-                                        <span class="mr-2">S</span>
-                                        {file}
-                                    </li>
-                                {/each}
-                                {#each status.modified_files as file}
-                                    <li
-                                        class="text-yellow-600 flex items-center"
-                                        title={$t.git?.modified_unstaged}
-                                    >
-                                        <span class="mr-2">M</span>
-                                        {file}
-                                    </li>
-                                {/each}
-                                {#each status.untracked_files as file}
-                                    <li
-                                        class="text-primary flex items-center"
-                                        title={$t.git?.untracked}
-                                    >
-                                        <span class="mr-2">?</span>
-                                        {file}
-                                    </li>
-                                {/each}
-                            </ul>
-                        </div>
-                    {/if}
-                </div>
-
-                <!-- Right: Diff Viewer -->
-                <div
-                    class="w-full md:w-2/3 flex flex-col overflow-hidden border rounded bg-gray-50"
-                >
-                    <div
-                        class="bg-gray-200 px-3 py-1 text-xs font-bold text-gray-600 border-b"
-                    >
-                        {$t.git?.changes_preview}
-                    </div>
-                    <div class="flex-1 overflow-auto p-2">
-                        {#if loading}
-                            <div
-                                class="flex items-center justify-center h-full text-gray-500"
-                            >
-                                {$t.git?.loading_diff}
-                            </div>
-                        {:else if diff}
-                            <pre
-                                class="text-xs font-mono whitespace-pre-wrap">{diff}</pre>
-                        {:else}
-                            <div
-                                class="flex items-center justify-center h-full text-gray-500 italic"
-                            >
-                                {$t.git?.no_changes}
-                            </div>
-                        {/if}
-                    </div>
-                </div>
+      <div class="flex flex-col md:flex-row gap-4 flex-1 overflow-hidden">
+        <!-- Left: Message and Files -->
+        <div class="w-full md:w-1/3 flex flex-col">
+          <div class="mb-4">
+            <div class="flex justify-between items-center mb-1">
+              <label class="block text-sm font-medium text-gray-700"
+                >{$t.git?.commit_message}</label
+              >
+              <button
+                onclick={() => model.handleGenerateMessage()}
+                disabled={model.generatingMessage || model.loading}
+                class="text-xs text-primary hover:text-blue-800 disabled:opacity-50 flex items-center"
+              >
+                {#if model.generatingMessage}
+                  <span class="animate-spin mr-1">↻</span> {$t.mapper?.generating}
+                {:else}
+                  <span class="mr-1">✨</span> {$t.git?.generate_with_ai}
+                {/if}
+              </button>
             </div>
+            <textarea
+              bind:value={model.message}
+              class="w-full border rounded p-2 h-32 focus-visible:ring-2 focus-visible:ring-primary-ring outline-none resize-none"
+              placeholder={$t.git?.describe_changes}
+            ></textarea>
+          </div>
 
-            <div class="flex justify-end space-x-3 mt-6 pt-4 border-t">
-                <button
-                    onclick={() => (show = false)}
-                    class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded"
-                >
-                    {$t.common?.cancel}
-                </button>
-                <button
-                    onclick={handleCommit}
-                    disabled={committing ||
-                        !message ||
-                        loading ||
-                        (!status?.is_dirty &&
-                            status?.staged_files?.length === 0)}
-                    class="px-4 py-2 bg-primary text-white rounded hover:bg-primary-hover disabled:opacity-50"
-                >
-                    {committing ? $t.git?.committing : $t.git?.commit}
-                </button>
+          {#if model.status}
+            <div class="flex-1 overflow-y-auto">
+              <h3 class="text-sm font-bold text-gray-500 uppercase mb-2">
+                {$t.git?.changed_files}
+              </h3>
+              <ul class="text-xs space-y-1">
+                {#each model.status.staged_files as file}
+                  <li
+                    class="text-green-600 flex items-center font-semibold"
+                    title={$t.git?.staged}
+                  >
+                    <span class="mr-2">S</span>
+                    {file}
+                  </li>
+                {/each}
+                {#each model.status.modified_files as file}
+                  <li
+                    class="text-yellow-600 flex items-center"
+                    title={$t.git?.modified_unstaged}
+                  >
+                    <span class="mr-2">M</span>
+                    {file}
+                  </li>
+                {/each}
+                {#each model.status.untracked_files as file}
+                  <li
+                    class="text-primary flex items-center"
+                    title={$t.git?.untracked}
+                  >
+                    <span class="mr-2">?</span>
+                    {file}
+                  </li>
+                {/each}
+              </ul>
             </div>
+          {/if}
         </div>
-    </div>
-{/if}
-<!-- [/SECTION] -->
 
+        <!-- Right: Diff Viewer -->
+        <div
+          class="w-full md:w-2/3 flex flex-col overflow-hidden border rounded bg-gray-50"
+        >
+          <div class="bg-gray-200 px-3 py-1 text-xs font-bold text-gray-600 border-b">
+            {$t.git?.changes_preview}
+          </div>
+          <div class="flex-1 overflow-auto p-2">
+            {#if model.loading}
+              <div class="flex items-center justify-center h-full text-gray-500">
+                {$t.git?.loading_diff}
+              </div>
+            {:else if model.diff}
+              <pre class="text-xs font-mono whitespace-pre-wrap">{model.diff}</pre>
+            {:else}
+              <div class="flex items-center justify-center h-full text-gray-500 italic">
+                {$t.git?.no_changes}
+              </div>
+            {/if}
+          </div>
+        </div>
+      </div>
+
+      <div class="flex justify-end space-x-3 mt-6 pt-4 border-t">
+        <button
+          onclick={() => (show = false)}
+          class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded"
+        >
+          {$t.common?.cancel}
+        </button>
+        <button
+          onclick={() => model.handleCommit()}
+          disabled={!model.canCommit}
+          class="px-4 py-2 bg-primary text-white rounded hover:bg-primary-hover disabled:opacity-50"
+        >
+          {model.committing ? $t.git?.committing : $t.git?.commit}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
 <!-- #endregion CommitModal -->
diff --git a/frontend/src/components/git/DeploymentModal.svelte b/frontend/src/components/git/DeploymentModal.svelte
index abfcfe391..679ab3f66 100644
--- a/frontend/src/components/git/DeploymentModal.svelte
+++ b/frontend/src/components/git/DeploymentModal.svelte
@@ -1,240 +1,123 @@
 <!-- #region DeploymentModal [C:3] [TYPE Component] [SEMANTICS git, deploy, environment, modal, promote] -->
-<!-- @BRIEF Component component: components/git/DeploymentModal.svelte -->
+<!-- @BRIEF Modal for deploying a dashboard to a target environment with stage selection and PROD confirmation. -->
 <!-- @LAYER UI -->
 <!--
-@SEMANTICS: deployment, git, environment, modal
-@PURPOSE:   Modal for deploying a dashboard to a target environment.
-@LAYER     Component
-@RELATION  CALLS -> [GitService]
-@RELATION  DISPATCHES -> [deploy]
-
-@INVARIANT: Cannot deploy without a selected environment.
+@UX_STATE: Loading -> "Loading environments..." text visible, select disabled.
+@UX_STATE: NoCandidates -> Error message shown with close button.
+@UX_STATE: Ready -> Environment select enabled, deploy button active.
+@UX_STATE: Deploying -> Button shows spinner and "Deploying..." label.
+@UX_STATE: ConfirmProd -> Warning banner visible for PROD targets.
+@UX_FEEDBACK Success/error toast on deploy result.
+@UX_RECOVERY Close modal on error, retry deploy.
+@UX_REACTIVITY Props -> $props(), Model -> DeploymentModel
 -->
+<!-- @RELATION BINDS_TO -> [DeploymentModel] -->
+<!-- @INVARIANT This component contains NO business logic — all state and actions are delegated to DeploymentModel. -->
 
 <script>
-    // [SECTION: IMPORTS]
-    import { gitService } from "../../services/gitService";
-    import { api } from "../../lib/api.js";
-    import { addToast as toast } from "../../lib/toasts.js";
-    import { t } from "../../lib/i18n";
-    // [/SECTION]
+  import { DeploymentModel } from '$lib/models/DeploymentModel.svelte.ts';
+  import { t } from '$lib/i18n';
 
-    // [SECTION: PROPS]
-    let { dashboardId, envId = null, show = $bindable(false), preferredTargetStage = "" } = $props();
+  let { dashboardId, envId = null, show = $bindable(false), preferredTargetStage = '' } = $props();
 
-    // [/SECTION]
+  const model = new DeploymentModel({ dashboardId, envId, show, preferredTargetStage });
 
-    // [SECTION: STATE]
-    let environments = $state([]);
-    let selectedEnv = $state("");
-    let loading = $state(false);
-    let deploying = $state(false);
-    // [/SECTION]
+  // Sync prop changes to model
+  $effect(() => {
+    model.dashboardId = dashboardId;
+    model.envId = envId;
+    model.show = show;
+    model.preferredTargetStage = preferredTargetStage;
+  });
 
-    const normalizedPreferredStage = $derived(String(preferredTargetStage || "").toUpperCase());
-    const deploymentCandidates = $derived.by(() => {
-        const all = environments.filter((env) => env?.id !== envId);
-        if (!normalizedPreferredStage) return all;
-        const stageMatched = all.filter((env) => normalizeEnvStage(env) === normalizedPreferredStage);
-        return stageMatched.length > 0 ? stageMatched : all;
-    });
-    const selectedEnvironment = $derived(
-        deploymentCandidates.find((env) => env.id === selectedEnv) || null,
-    );
-    const selectedEnvironmentStage = $derived(
-        selectedEnvironment ? normalizeEnvStage(selectedEnvironment) : "",
-    );
-    const isProdTarget = $derived(selectedEnvironmentStage === "PROD");
+  // Load environments when modal opens
+  $effect(() => {
+    if (show) model.loadEnvironments();
+  });
 
-    // #region loadStatus:Watcher [TYPE Function]
-    $effect(() => {
-        if (show) loadEnvironments();
-    });
-    // #endregion loadStatus:Watcher
-
-    // #region normalizeEnvStage:Function [TYPE Function]
-    /**
-     * @purpose Normalize environment stage with legacy production fallback.
-     * @post Returns DEV/PREPROD/PROD.
-     */
-    function normalizeEnvStage(env) {
-        if (env?.is_production) return "PROD";
-        const stage = String(env?.stage || "").trim().toUpperCase();
-        if (stage === "PROD" || stage === "PREPROD") return stage;
-        return "DEV";
-    }
-    // #endregion normalizeEnvStage:Function
-
-    // #region resolveEnvUrl:Function [TYPE Function]
-    /**
-     * @purpose Resolve environment URL from consolidated or git-specific payload shape.
-     * @post Returns stable URL string.
-     */
-    function resolveEnvUrl(env) {
-        return String(env?.superset_url || env?.url || "");
-    }
-    // #endregion resolveEnvUrl:Function
-
-    // #region loadEnvironments:Function [TYPE Function]
-    /**
-     * @purpose Fetch available environments from API.
-     * @post environments state is populated.
-     * @side_effect Updates environments state.
-     */
-    async function loadEnvironments() {
-        console.log(`[EXT:frontend:DeploymentModal][Action] Loading environments`);
-        loading = true;
-        try {
-            environments = await api.getEnvironmentsList();
-            const candidates = (environments || []).filter((env) => env?.id !== envId);
-            if (normalizedPreferredStage) {
-                const stageMatched = candidates.filter((env) => normalizeEnvStage(env) === normalizedPreferredStage);
-                selectedEnv = (stageMatched[0]?.id) || (candidates[0]?.id) || "";
-            } else {
-                selectedEnv = (candidates[0]?.id) || "";
-            }
-            console.log(
-                `[EXT:frontend:DeploymentModal][Coherence:OK] Loaded ${environments.length} environments`,
-            );
-        } catch (e) {
-            console.error(`[EXT:frontend:DeploymentModal][Coherence:Failed] ${e.message}`);
-            toast($t.migration?.loading_envs_failed, "error");
-        } finally {
-            loading = false;
-        }
-    }
-    // #endregion loadEnvironments:Function
-
-    // #region handleDeploy:Function [TYPE Function]
-    /**
-     * @purpose Trigger deployment to selected environment.
-     * @pre selectedEnv must be set.
-     * @post Deploy request finishes and modal closes on success.
-     * @side_effect Triggers API call, closes modal, shows toast.
-     */
-    async function handleDeploy() {
-        if (!selectedEnv) return;
-        if (isProdTarget) {
-            const expected = String(dashboardId);
-            const confirmation = prompt(`Подтвердите deploy в PROD. Введите slug: ${expected}`);
-            if (String(confirmation || "").trim() !== expected) {
-                toast("Подтверждение PROD не пройдено. Deploy отменен.", "error");
-                return;
-            }
-        }
-        console.log(`[EXT:frontend:DeploymentModal][Action] Deploying to ${selectedEnv}`);
-        deploying = true;
-        try {
-            const result = await gitService.deploy(dashboardId, selectedEnv, envId);
-            toast(
-                result.message || $t.git?.deploy_success,
-                "success",
-            );
-            show = false;
-            console.log(`[EXT:frontend:DeploymentModal][Coherence:OK] Deployment triggered`);
-        } catch (e) {
-            console.error(`[EXT:frontend:DeploymentModal][Coherence:Failed] ${e.message}`);
-            toast(e.message, "error");
-        } finally {
-            deploying = false;
-        }
-    }
-    // #endregion handleDeploy:Function
+  // Sync show changes back to parent
+  $effect(() => {
+    show = model.show;
+  });
 </script>
 
-<!-- [SECTION: TEMPLATE] -->
 {#if show}
-    <div
-        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-    >
-        <div class="bg-white p-6 rounded-lg shadow-xl w-96">
-            <h2 class="text-xl font-bold mb-4">{$t.git?.deploy}</h2>
+  <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+    <div class="bg-white p-6 rounded-lg shadow-xl w-96">
+      <h2 class="text-xl font-bold mb-4">{$t.git?.deploy}</h2>
 
-            {#if loading}
-                <p class="text-gray-500">{$t.migration?.loading_envs}</p>
-            {:else if deploymentCandidates.length === 0}
-                <p class="text-red-500 mb-4">
-                    {$t.git?.no_deploy_envs}
-                </p>
-                <div class="flex justify-end">
-                    <button
-                        onclick={() => (show = false)}
-                        class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300"
-                    >
-                        {$t.common?.close}
-                    </button>
-                </div>
-            {:else}
-                {#if normalizedPreferredStage}
-                    <p class="mb-3 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800">
-                        GitFlow target stage: {normalizedPreferredStage}
-                    </p>
-                {/if}
-                <div class="mb-6">
-                    <label for="deployment-target-env" class="block text-sm font-medium text-gray-700 mb-2"
-                        >{$t.migration?.target_env}</label
-                    >
-                    <select
-                        id="deployment-target-env"
-                        bind:value={selectedEnv}
-                        class="w-full border rounded p-2 focus-visible:ring-2 focus-visible:ring-primary-ring outline-none bg-white"
-                    >
-                        {#each deploymentCandidates as env}
-                            <option value={env.id}
-                                >{env.name} [{normalizeEnvStage(env)}] ({resolveEnvUrl(env)})</option
-                            >
-                        {/each}
-                    </select>
-                </div>
-                {#if isProdTarget}
-                    <p class="mb-3 rounded border border-destructive-light bg-destructive-light px-3 py-2 text-xs text-red-800">
-                        Внимание: выбрано PROD окружение. Потребуется подтверждение перед deploy.
-                    </p>
-                {/if}
-
-                <div class="flex justify-end space-x-3">
-                    <button
-                        onclick={() => (show = false)}
-                        class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded"
-                    >
-                        {$t.common?.cancel}
-                    </button>
-                    <button
-                        onclick={handleDeploy}
-                        disabled={deploying || !selectedEnv}
-                        class={`px-4 py-2 text-white rounded disabled:opacity-50 flex items-center ${isProdTarget ? 'bg-destructive hover:bg-destructive-hover' : 'bg-green-600 hover:bg-green-700'}`}
-                    >
-                        {#if deploying}
-                            <svg
-                                class="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                            >
-                                <circle
-                                    class="opacity-25"
-                                    cx="12"
-                                    cy="12"
-                                    r="10"
-                                    stroke="currentColor"
-                                    stroke-width="4"
-                                ></circle>
-                                <path
-                                    class="opacity-75"
-                                    fill="currentColor"
-                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                                ></path>
-                            </svg>
-                            {$t.git?.deploying}
-                        {:else}
-                            {$t.git?.deploy}
-                        {/if}
-                    </button>
-                </div>
-            {/if}
+      {#if model.loading}
+        <p class="text-gray-500">{$t.migration?.loading_envs}</p>
+      {:else if model.deploymentCandidates.length === 0}
+        <p class="text-red-500 mb-4">
+          {$t.git?.no_deploy_envs}
+        </p>
+        <div class="flex justify-end">
+          <button
+            onclick={() => (show = false)}
+            class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300"
+          >
+            {$t.common?.close}
+          </button>
         </div>
-    </div>
-{/if}
-<!-- [/SECTION] -->
+      {:else}
+        {#if model.normalizedPreferredStage}
+          <p class="mb-3 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800">
+            GitFlow target stage: {model.normalizedPreferredStage}
+          </p>
+        {/if}
+        <div class="mb-6">
+          <label for="deployment-target-env" class="block text-sm font-medium text-gray-700 mb-2"
+            >{$t.migration?.target_env}</label
+          >
+          <select
+            id="deployment-target-env"
+            bind:value={model.selectedEnv}
+            class="w-full border rounded p-2 focus-visible:ring-2 focus-visible:ring-primary-ring outline-none bg-white"
+          >
+            {#each model.deploymentCandidates as env}
+              <option value={env.id}
+                >{env.name} [{model.normalizeEnvStage(env)}] ({model.resolveEnvUrl(env)})</option
+              >
+            {/each}
+          </select>
+        </div>
+        {#if model.isProdTarget}
+          <p class="mb-3 rounded border border-destructive-light bg-destructive-light px-3 py-2 text-xs text-red-800">
+            Внимание: выбрано PROD окружение. Потребуется подтверждение перед deploy.
+          </p>
+        {/if}
 
+        <div class="flex justify-end space-x-3">
+          <button
+            onclick={() => (show = false)}
+            class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded"
+          >
+            {$t.common?.cancel}
+          </button>
+          <button
+            onclick={() => model.handleDeploy()}
+            disabled={model.deploying || !model.selectedEnv}
+            class={`px-4 py-2 text-white rounded disabled:opacity-50 flex items-center ${model.isProdTarget ? 'bg-destructive hover:bg-destructive-hover' : 'bg-green-600 hover:bg-green-700'}`}
+          >
+            {#if model.deploying}
+              <svg
+                class="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              {$t.git?.deploying}
+            {:else}
+              {$t.git?.deploy}
+            {/if}
+          </button>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
 <!-- #endregion DeploymentModal -->
diff --git a/frontend/src/components/git/GitManager.svelte b/frontend/src/components/git/GitManager.svelte
index 80a366ed8..2cd98ec9e 100644
--- a/frontend/src/components/git/GitManager.svelte
+++ b/frontend/src/components/git/GitManager.svelte
@@ -9,9 +9,8 @@
 <!-- @RELATION USES -> [EXT:frontend:BranchSelector] -->
 <!-- @RELATION USES -> [EXT:frontend:DeploymentModal] -->
 <!-- @RELATION USES -> [EXT:frontend:ConflictResolver] -->
-<!-- @RELATION CALLS -> [EXT:frontend:gitService] -->
-<!-- @RELATION DEPENDS_ON -> [GitUtils] -->
-<!-- @RELATION DEPENDS_ON -> [UseGitManager] -->
+<!-- @RELATION BINDS_TO -> [GitManagerModel] -->
+<!-- @INVARIANT This component contains NO business logic — only renders model state and calls model.action(). -->
 <!-- @RATIONALE Decomposed from 1220→~370 lines by extracting sub-panels, utils, and composable handlers per INV_7. -->
 <!-- @REJECTED Keeping all logic inline was rejected because it exceeded 150-line contract limit. -->
 <!-- @UX_STATE CheckingStatus -> Spinner. -->
@@ -24,10 +23,10 @@
 <!-- @UX_RECOVERY Dismiss error, Retry operation after fixing the issue. -->
 <script>
     import { onMount } from 'svelte';
-    import { gitService } from '../../services/gitService';
-    import { addToast as toast } from '../../lib/toasts.js';
     import { t } from '$lib/i18n';
-    import { PageHeader, HelpTooltip } from '$lib/ui';
+    import { HelpTooltip } from '$lib/ui';
+    import { stageBadgeClass, resolveDefaultConfig } from '../../services/git-utils.js';
+    import { GitManagerModel } from '$lib/models/GitManagerModel.svelte.ts';
     import BranchSelector from './BranchSelector.svelte';
     import DeploymentModal from './DeploymentModal.svelte';
     import ConflictResolver from './ConflictResolver.svelte';
@@ -36,160 +35,24 @@
     import GitReleasePanel from './GitReleasePanel.svelte';
     import GitOperationsPanel from './GitOperationsPanel.svelte';
     import GitMergeDialog from './GitMergeDialog.svelte';
-    import { normalizeEnvStage, stageBadgeClass, resolveCurrentEnvironmentId, applyGitflowStageDefaults, isNumericDashboardRef, resolveDefaultConfig, resolvePushProviderLabel, extractHttpHost } from '../../services/git-utils.js';
-    import { createGitHandlers } from './useGitManager.js';
 
     let { dashboardId, envId = null, dashboardTitle = '', show = $bindable(false) } = $props();
 
-    // ── State ─────────────────────────────────────────────────
-    let currentBranch = $state('main');
-    let showDeployModal = $state(false);
-    let loading = $state(false);
-    let initialized = $state(false);
-    let checkingStatus = $state(true);
-    let configs = $state([]);
-    let selectedConfigId = $state('');
-    let remoteUrl = $state('');
-    let creatingRemoteRepo = $state(false);
-    let activeTab = $state('workspace');
-    let showAdvancedPromote = $state(false);
-    let promoting = $state(false);
-    let promoteFromBranch = $state('dev');
-    let promoteToBranch = $state('preprod');
-    let promoteMode = $state('mr');
-    let promoteReason = $state('');
-    let currentEnvStage = $state('');
-    let preferredDeployTargetStage = $state('');
-    let commitMessage = $state('');
-    let committing = $state(false);
-    let generatingMessage = $state(false);
-    let workspaceStatus = $state(null);
-    let workspaceDiff = $state('');
-    let workspaceLoading = $state(false);
-    let isPulling = $state(false);
-    let isPushing = $state(false);
-    let autoPushAfterCommit = $state(true);
-    let repositoryProvider = $state('');
-    let repositoryBindingRemoteUrl = $state('');
-    let repositoryConfigUrl = $state('');
-    let showUnfinishedMergeDialog = $state(false);
-    let unfinishedMergeContext = $state(null);
-    let copyingUnfinishedMergeCommands = $state(false);
-    let mergeRecoveryLoading = $state(false);
-    let mergeConflicts = $state([]);
-    let showConflictResolver = $state(false);
-    let mergeResolveInProgress = $state(false);
-    let mergeAbortInProgress = $state(false);
-    let mergeContinueInProgress = $state(false);
-    // ── Git Error state (persistent error banner in modal) ─────
-    let gitError = $state(null);
-    let gitErrorType = $state('error');
+    const model = new GitManagerModel({ dashboardId, envId, dashboardTitle });
 
-    // ── Derived ───────────────────────────────────────────────
-    const hasWorkspaceChanges = $derived.by(() => {
-        if (!workspaceStatus) return false;
-        return [...(workspaceStatus.staged_files || []), ...(workspaceStatus.modified_files || []), ...(workspaceStatus.untracked_files || [])].length > 0;
+    $effect(() => {
+        model.envId = envId;
     });
-    const changedFilesCount = $derived.by(() => {
-        if (!workspaceStatus) return 0;
-        return [...(workspaceStatus.staged_files || []), ...(workspaceStatus.modified_files || []), ...(workspaceStatus.untracked_files || [])].length;
+
+    $effect(() => {
+        model.repositoryConfigUrl = resolveDefaultConfig(model.configs, model.selectedConfigId)?.url || '';
     });
-    const pushProviderLabel = $derived(resolvePushProviderLabel(configs, selectedConfigId, repositoryProvider));
-    const originHost = $derived(extractHttpHost(repositoryBindingRemoteUrl));
-    const configHost = $derived(extractHttpHost(repositoryConfigUrl));
-    const hasOriginConfigMismatch = $derived(originHost && configHost && originHost !== configHost);
 
-    // ── Resolve envId with localStorage fallback ──────────────
-    let resolvedEnvId = $derived(resolveCurrentEnvironmentId(envId));
-
-    // ── State proxy for composable ────────────────────────────
-    function getState() {
-        return {
-            dashboardId, envId: resolvedEnvId, dashboardTitle, toast, t,
-            currentBranch, showDeployModal, loading, initialized, checkingStatus,
-            configs, selectedConfigId, remoteUrl, creatingRemoteRepo,
-            activeTab, showAdvancedPromote, promoting, promoteFromBranch, promoteToBranch, promoteMode, promoteReason,
-            currentEnvStage, preferredDeployTargetStage,
-            commitMessage, committing, generatingMessage, workspaceStatus, workspaceDiff, workspaceLoading,
-            isPulling, isPushing, autoPushAfterCommit, repositoryProvider, repositoryBindingRemoteUrl, repositoryConfigUrl,
-            showUnfinishedMergeDialog, unfinishedMergeContext, copyingUnfinishedMergeCommands,
-            mergeRecoveryLoading, mergeConflicts, showConflictResolver, mergeResolveInProgress, mergeAbortInProgress, mergeContinueInProgress,
-            gitError, gitErrorType,
-            hasWorkspaceChanges,
-            normalizeEnvStageFn: normalizeEnvStage,
-            applyGitflowStageDefaultsFn: applyGitflowStageDefaults,
-            resolveEnvId: () => resolveCurrentEnvironmentId(envId),
-            clearGitError: () => { gitError = null; gitErrorType = 'error'; },
-        };
-    }
-    function setState(patch) {
-        for (const [k, v] of Object.entries(patch)) {
-            if (k === 'currentBranch') currentBranch = v;
-            else if (k === 'showDeployModal') showDeployModal = v;
-            else if (k === 'loading') loading = v;
-            else if (k === 'initialized') initialized = v;
-            else if (k === 'checkingStatus') checkingStatus = v;
-            else if (k === 'configs') configs = v;
-            else if (k === 'selectedConfigId') selectedConfigId = v;
-            else if (k === 'remoteUrl') remoteUrl = v;
-            else if (k === 'creatingRemoteRepo') creatingRemoteRepo = v;
-            else if (k === 'activeTab') activeTab = v;
-            else if (k === 'showAdvancedPromote') showAdvancedPromote = v;
-            else if (k === 'promoting') promoting = v;
-            else if (k === 'promoteFromBranch') promoteFromBranch = v;
-            else if (k === 'promoteToBranch') promoteToBranch = v;
-            else if (k === 'promoteMode') promoteMode = v;
-            else if (k === 'promoteReason') promoteReason = v;
-            else if (k === 'currentEnvStage') currentEnvStage = v;
-            else if (k === 'preferredDeployTargetStage') preferredDeployTargetStage = v;
-            else if (k === 'commitMessage') commitMessage = v;
-            else if (k === 'committing') committing = v;
-            else if (k === 'generatingMessage') generatingMessage = v;
-            else if (k === 'workspaceStatus') workspaceStatus = v;
-            else if (k === 'workspaceDiff') workspaceDiff = v;
-            else if (k === 'workspaceLoading') workspaceLoading = v;
-            else if (k === 'isPulling') isPulling = v;
-            else if (k === 'isPushing') isPushing = v;
-            else if (k === 'autoPushAfterCommit') autoPushAfterCommit = v;
-            else if (k === 'repositoryProvider') repositoryProvider = v;
-            else if (k === 'repositoryBindingRemoteUrl') repositoryBindingRemoteUrl = v;
-            else if (k === 'repositoryConfigUrl') repositoryConfigUrl = v;
-            else if (k === 'showUnfinishedMergeDialog') showUnfinishedMergeDialog = v;
-            else if (k === 'unfinishedMergeContext') unfinishedMergeContext = v;
-            else if (k === 'copyingUnfinishedMergeCommands') copyingUnfinishedMergeCommands = v;
-            else if (k === 'mergeRecoveryLoading') mergeRecoveryLoading = v;
-            else if (k === 'mergeConflicts') mergeConflicts = v;
-            else if (k === 'showConflictResolver') showConflictResolver = v;
-            else if (k === 'mergeResolveInProgress') mergeResolveInProgress = v;
-            else if (k === 'mergeAbortInProgress') mergeAbortInProgress = v;
-            else if (k === 'mergeContinueInProgress') mergeContinueInProgress = v;
-            else if (k === 'gitError') gitError = v;
-            else if (k === 'gitErrorType') gitErrorType = v;
-        }
-    }
-
-    const h = createGitHandlers(getState, setState);
-
-    function closeModal() { show = false; gitError = null; gitErrorType = 'error'; }
+    function closeModal() { show = false; model.clearGitError(); }
     function handleBackdropClick(e) { if (e.target === e.currentTarget) closeModal(); }
 
-    $effect(() => { repositoryConfigUrl = resolveDefaultConfig(configs, selectedConfigId)?.url || ''; });
-
-    onMount(async () => {
-        try {
-            configs = await gitService.getConfigs();
-            const dc = resolveDefaultConfig(configs, selectedConfigId);
-            if (dc?.id) selectedConfigId = dc.id;
-        } catch (_e) { configs = []; }
-        await Promise.all([h.checkStatus(), h.loadCurrentEnvironmentStage()]);
-        if (initialized) {
-            try {
-                const binding = await gitService.getRepositoryBinding(dashboardId, resolvedEnvId);
-                repositoryProvider = binding?.provider || '';
-                repositoryBindingRemoteUrl = binding?.remote_url || '';
-                if (binding?.config_id) selectedConfigId = String(binding.config_id);
-            } catch (_e) { repositoryProvider = ''; repositoryBindingRemoteUrl = ''; }
-        }
+    onMount(() => {
+        model.initialize();
     });
 </script>
 
@@ -214,36 +77,36 @@
             </div>
 
             <!-- Git Error Banner -->
-            {#if gitError}
+            {#if model.gitError}
             <div
-                class="mx-6 mt-4 flex items-start gap-3 rounded-lg border p-4 text-sm shadow-sm {gitErrorType === 'warning' ? 'border-amber-300 bg-amber-50 text-amber-900' : 'border-red-300 bg-red-50 text-red-900'}"
+                class="mx-6 mt-4 flex items-start gap-3 rounded-lg border p-4 text-sm shadow-sm {model.gitErrorType === 'warning' ? 'border-amber-300 bg-amber-50 text-amber-900' : 'border-red-300 bg-red-50 text-red-900'}"
                 role="alert"
                 aria-live="polite"
             >
                 <div class="mt-0.5 flex-shrink-0">
-                    {#if gitErrorType === 'warning'}
+                    {#if model.gitErrorType === 'warning'}
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" 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 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
                     {:else}
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 9l-6 6m0-6l6 6"/></svg>
                     {/if}
                 </div>
                 <div class="flex-1 space-y-2">
-                    <p class="font-medium">{gitError.message || gitError}</p>
-                    {#if gitError.files?.length}
+                    <p class="font-medium">{model.gitError.message || model.gitError}</p>
+                    {#if model.gitError.files?.length}
                     <details class="text-xs text-red-700/80">
-                        <summary class="cursor-pointer font-medium">Файлы, которые будут перезаписаны ({gitError.files.length})</summary>
+                        <summary class="cursor-pointer font-medium">Файлы, которые будут перезаписаны ({model.gitError.files.length})</summary>
                         <ul class="mt-1 list-disc space-y-0.5 pl-5">
-                            {#each gitError.files as file}
+                            {#each model.gitError.files as file}
                             <li><code class="rounded bg-red-100/50 px-1">{file}</code></li>
                             {/each}
                         </ul>
                     </details>
                     {/if}
-                    {#if gitError.next_steps?.length}
+                    {#if model.gitError.next_steps?.length}
                     <div class="text-xs">
                         <span class="font-medium">Рекомендации:</span>
                         <ol class="mt-1 list-decimal space-y-0.5 pl-5">
-                            {#each gitError.next_steps as step}
+                            {#each model.gitError.next_steps as step}
                             <li>{step}</li>
                             {/each}
                         </ol>
@@ -252,8 +115,8 @@
                 </div>
                 <button
                     type="button"
-                    onclick={() => { gitError = null; gitErrorType = 'error'; }}
-                    class="flex-shrink-0 rounded p-1 transition-colors {gitErrorType === 'warning' ? 'hover:bg-amber-100' : 'hover:bg-red-100'}"
+                    onclick={() => model.clearGitError()}
+                    class="flex-shrink-0 rounded p-1 transition-colors {model.gitErrorType === 'warning' ? 'hover:bg-amber-100' : 'hover:bg-red-100'}"
                     aria-label="Закрыть"
                 >
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
@@ -264,67 +127,67 @@
             <!-- Body: height fills space, scroll is inside GitWorkspacePanel diff panel -->
             <div class="flex flex-col p-6" style="height: calc(92vh - 80px);">
 
-            {#if checkingStatus}
+            {#if model.checkingStatus}
                 <div class="flex justify-center py-12"><div class="h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div></div>
-            {:else if !initialized}
-                <GitInitPanel {configs} bind:selectedConfigId bind:remoteUrl {creatingRemoteRepo} {loading} onCreateRemoteRepo={h.handleCreateRemoteRepo} onInit={h.handleInit} />
+            {:else if !model.initialized}
+                <GitInitPanel configs={model.configs} bind:selectedConfigId={model.selectedConfigId} bind:remoteUrl={model.remoteUrl} creatingRemoteRepo={model.creatingRemoteRepo} loading={model.loading} onCreateRemoteRepo={() => model.handleCreateRemoteRepo()} onInit={() => model.handleInit()} />
             {:else}
                 <div class="flex min-h-0 flex-1 flex-col gap-4">
-                    {#if hasOriginConfigMismatch}
-                        <div class="rounded-lg border border-amber-300 bg-amber-50 p-3 text-sm text-amber-800"><div class="font-semibold">Git server mismatch detected</div><div class="mt-1">Configured: <code>{configHost}</code>, origin: <code>{originHost}</code>.</div></div>
+                    {#if model.hasOriginConfigMismatch}
+                        <div class="rounded-lg border border-amber-300 bg-amber-50 p-3 text-sm text-amber-800"><div class="font-semibold">Git server mismatch detected</div><div class="mt-1">Configured: <code>{model.configHost}</code>, origin: <code>{model.originHost}</code>.</div></div>
                     {/if}
                     <div class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-slate-200 bg-white px-4 py-3 shadow-sm">
                         <div class="flex items-center gap-3">
-                            <span class={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-bold uppercase tracking-wider ${stageBadgeClass(currentEnvStage)}`}>
+                            <span class={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-bold uppercase tracking-wider ${stageBadgeClass(model.currentEnvStage)}`}>
                                 <span class="h-1.5 w-1.5 rounded-full bg-current opacity-60"></span>
-                                {currentEnvStage || 'DEV'}
+                                {model.currentEnvStage || 'DEV'}
                             </span>
                             <span class="hidden text-xs text-slate-500 sm:inline">·</span>
                             <span class="flex items-center gap-1.5 text-sm text-slate-600">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
-                                <span class="hidden sm:inline">Ветка:</span> <strong class="font-mono text-slate-800">{currentBranch}</strong>
+                                <span class="hidden sm:inline">Ветка:</span> <strong class="font-mono text-slate-800">{model.currentBranch}</strong>
                             </span>
-                            {#if changedFilesCount > 0}
+                            {#if model.changedFilesCount > 0}
                                 <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-700 ring-1 ring-inset ring-amber-200">
                                     <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
-                                    {changedFilesCount} изменений
+                                    {model.changedFilesCount} изменений
                                 </span>
                             {/if}
                         </div>
-                        <div class="flex w-full items-center gap-1 sm:w-64"><BranchSelector {dashboardId} envId={resolvedEnvId} bind:currentBranch /><HelpTooltip text={$t.git?.hint_branch_selector || ''} /></div>
+                        <div class="flex w-full items-center gap-1 sm:w-64"><BranchSelector {dashboardId} envId={model.resolvedEnvId} bind:currentBranch={model.currentBranch} /><HelpTooltip text={$t.git?.hint_branch_selector || ''} /></div>
                     </div>
                     <div class="flex flex-wrap items-center gap-1 border-b border-slate-200 pb-0">
-                        <button class={`relative -mb-px inline-flex items-center gap-2 rounded-t-lg px-4 py-2.5 text-sm font-medium transition-colors ${activeTab === 'workspace' ? 'border border-b-white bg-white text-blue-700 shadow-sm' : 'border border-transparent text-slate-500 hover:bg-slate-100 hover:text-slate-700'}`} onclick={() => (activeTab = 'workspace')}>
+                        <button class={`relative -mb-px inline-flex items-center gap-2 rounded-t-lg px-4 py-2.5 text-sm font-medium transition-colors ${model.activeTab === 'workspace' ? 'border border-b-white bg-white text-blue-700 shadow-sm' : 'border border-transparent text-slate-500 hover:bg-slate-100 hover:text-slate-700'}`} onclick={() => (model.activeTab = 'workspace')}>
                             <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                             Фиксация изменений
                             <HelpTooltip text={$t.git?.hint_workspace || ''} />
                         </button>
-                        <button class={`relative -mb-px inline-flex items-center gap-2 rounded-t-lg px-4 py-2.5 text-sm font-medium transition-colors ${activeTab === 'release' ? 'border border-b-white bg-white text-blue-700 shadow-sm' : 'border border-transparent text-slate-500 hover:bg-slate-100 hover:text-slate-700'}`} onclick={() => (activeTab = 'release')}>
+                        <button class={`relative -mb-px inline-flex items-center gap-2 rounded-t-lg px-4 py-2.5 text-sm font-medium transition-colors ${model.activeTab === 'release' ? 'border border-b-white bg-white text-blue-700 shadow-sm' : 'border border-transparent text-slate-500 hover:bg-slate-100 hover:text-slate-700'}`} onclick={() => (model.activeTab = 'release')}>
                             <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                             Релиз
                             <HelpTooltip text={$t.git?.hint_release || ''} />
                         </button>
-                        <button class={`relative -mb-px inline-flex items-center gap-2 rounded-t-lg px-4 py-2.5 text-sm font-medium transition-colors ${activeTab === 'operations' ? 'border border-b-white bg-white text-blue-700 shadow-sm' : 'border border-transparent text-slate-500 hover:bg-slate-100 hover:text-slate-700'}`} onclick={() => (activeTab = 'operations')}>
+                        <button class={`relative -mb-px inline-flex items-center gap-2 rounded-t-lg px-4 py-2.5 text-sm font-medium transition-colors ${model.activeTab === 'operations' ? 'border border-b-white bg-white text-blue-700 shadow-sm' : 'border border-transparent text-slate-500 hover:bg-slate-100 hover:text-slate-700'}`} onclick={() => (model.activeTab = 'operations')}>
                             <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                             Серверные операции
                             <HelpTooltip text={$t.git?.hint_operations || ''} />
                         </button>
                     </div>
-                    {#if activeTab === 'workspace'}
-                        <GitWorkspacePanel {hasWorkspaceChanges} {changedFilesCount} {workspaceLoading} {workspaceDiff} {committing} {generatingMessage} bind:commitMessage bind:autoPushAfterCommit {loading} {pushProviderLabel} onSync={h.handleSync} onGenerateMessage={h.handleGenerateMessage} onCommit={h.handleCommit} />
-                    {:else if activeTab === 'release'}
-                        <GitReleasePanel {currentEnvStage} bind:promoteFromBranch bind:promoteToBranch bind:promoteMode bind:promoteReason {preferredDeployTargetStage} bind:showAdvancedPromote {promoting} onPromote={h.handlePromote} />
+                    {#if model.activeTab === 'workspace'}
+                        <GitWorkspacePanel hasWorkspaceChanges={model.hasWorkspaceChanges} changedFilesCount={model.changedFilesCount} workspaceLoading={model.workspaceLoading} workspaceDiff={model.workspaceDiff} committing={model.committing} generatingMessage={model.generatingMessage} bind:commitMessage={model.commitMessage} bind:autoPushAfterCommit={model.autoPushAfterCommit} loading={model.loading} pushProviderLabel={model.pushProviderLabel} onSync={() => model.handleSync()} onGenerateMessage={() => model.handleGenerateMessage()} onCommit={() => model.handleCommit()} />
+                    {:else if model.activeTab === 'release'}
+                        <GitReleasePanel currentEnvStage={model.currentEnvStage} bind:promoteFromBranch={model.promoteFromBranch} bind:promoteToBranch={model.promoteToBranch} bind:promoteMode={model.promoteMode} bind:promoteReason={model.promoteReason} preferredDeployTargetStage={model.preferredDeployTargetStage} bind:showAdvancedPromote={model.showAdvancedPromote} promoting={model.promoting} onPromote={() => model.handlePromote()} />
                     {:else}
-                        <GitOperationsPanel {isPulling} {isPushing} {workspaceStatus} {currentEnvStage} onPull={h.handlePull} onPush={h.handlePush} onDeploy={h.openDeployModal} />
+                        <GitOperationsPanel isPulling={model.isPulling} isPushing={model.isPushing} workspaceStatus={model.workspaceStatus} currentEnvStage={model.currentEnvStage} onPull={() => model.handlePull()} onPush={() => model.handlePush()} onDeploy={() => model.openDeployModal()} />
                     {/if}
                 </div>
             {/if}
         </div>
 
-        <GitMergeDialog bind:show={showUnfinishedMergeDialog} {unfinishedMergeContext} {mergeRecoveryLoading} {mergeResolveInProgress} {mergeAbortInProgress} {mergeContinueInProgress} {copyingUnfinishedMergeCommands} onRefresh={h.loadMergeRecoveryState} onCopyCommands={h.handleCopyUnfinishedMergeCommands} onOpenConflictResolver={h.handleOpenConflictResolver} onAbortMerge={h.handleAbortUnfinishedMerge} onContinueMerge={h.handleContinueUnfinishedMerge} onClose={h.closeUnfinishedMergeDialog} />
+        <GitMergeDialog bind:show={model.showUnfinishedMergeDialog} unfinishedMergeContext={model.unfinishedMergeContext} mergeRecoveryLoading={model.mergeRecoveryLoading} mergeResolveInProgress={model.mergeResolveInProgress} mergeAbortInProgress={model.mergeAbortInProgress} mergeContinueInProgress={model.mergeContinueInProgress} copyingUnfinishedMergeCommands={model.copyingUnfinishedMergeCommands} onRefresh={() => model.loadMergeRecoveryState()} onCopyCommands={() => model.handleCopyUnfinishedMergeCommands()} onOpenConflictResolver={() => model.handleOpenConflictResolver()} onAbortMerge={() => model.handleAbortUnfinishedMerge()} onContinueMerge={() => model.handleContinueUnfinishedMerge()} onClose={() => model.closeUnfinishedMergeDialog()} />
     </div>
 </div>
 {/if}
-<ConflictResolver conflicts={mergeConflicts} bind:show={showConflictResolver} onresolve={h.handleResolveConflicts} />
-<DeploymentModal {dashboardId} envId={resolvedEnvId} preferredTargetStage={preferredDeployTargetStage} bind:show={showDeployModal} />
+<ConflictResolver conflicts={model.mergeConflicts} bind:show={model.showConflictResolver} onresolve={(e) => model.handleResolveConflicts(e)} />
+<DeploymentModal {dashboardId} envId={model.resolvedEnvId} preferredTargetStage={model.preferredDeployTargetStage} bind:show={model.showDeployModal} />
 <!-- #endregion GitManager -->
diff --git a/frontend/src/components/git/__tests__/git_manager.unfinished_merge.integration.test.js b/frontend/src/components/git/__tests__/git_manager.unfinished_merge.integration.test.js
index 3d123dbab..4046af662 100644
--- a/frontend/src/components/git/__tests__/git_manager.unfinished_merge.integration.test.js
+++ b/frontend/src/components/git/__tests__/git_manager.unfinished_merge.integration.test.js
@@ -22,8 +22,8 @@ describe('GitManager unfinished merge dialog contract', () => {
     expect(handlers).toContain('showUnfinishedMergeDialog: true');
     expect(handlers).toContain('handlers.openUnfinishedMergeDialogFromError(e)');
     expect(handlers).toContain('await handlers.loadMergeRecoveryState();');
-    expect(manager).toContain('h.handlePull');
-    expect(manager).toContain('h.loadMergeRecoveryState');
+    expect(manager).toContain('model.handlePull');
+    expect(manager).toContain('model.loadMergeRecoveryState');
   });
 
   it('renders unresolved-merge dialog details and web recovery actions', () => {
diff --git a/frontend/src/components/git/useGitManager.js b/frontend/src/components/git/useGitManager.js
index 71498ca55..e60f0a38a 100644
--- a/frontend/src/components/git/useGitManager.js
+++ b/frontend/src/components/git/useGitManager.js
@@ -1,4 +1,8 @@
 // #region UseGitManager [C:3] [TYPE Module] [SEMANTICS git, handlers, composable, orchestration]
+// @DEPRECATED [2026-05] Use GitManagerModel instead.
+// All state and actions have been migrated to frontend/src/lib/models/GitManagerModel.svelte.js
+// This file is kept for backward compatibility with existing components.
+// New code should import GitManagerModel directly.
 // @BRIEF Composable for GitManager handler functions — extracted to reduce component size per INV_7.
 // @RELATION DEPENDS_ON -> [EXT:frontend:gitService]
 // @RELATION DEPENDS_ON -> [GitUtils]
diff --git a/frontend/src/lib/components/translate/ConfigTabForm.svelte b/frontend/src/lib/components/translate/ConfigTabForm.svelte
index 92d103732..11c67a070 100644
--- a/frontend/src/lib/components/translate/ConfigTabForm.svelte
+++ b/frontend/src/lib/components/translate/ConfigTabForm.svelte
@@ -1,7 +1,7 @@
 <!-- #region ConfigTabForm [C:4] [TYPE Component] [SEMANTICS translate, config, datasource, llm, columns] -->
 <!-- @BRIEF Configuration tab content for Translation Job — datasource selection with auto-detected
      DB dialect, column mapping, LLM provider, target languages (multi-select from LANGUAGES),
-     dictionaries, batch size, upsert strategy. -->
+     dictionaries, disable reasoning toggle. -->
 <!-- @LAYER UI -->
 <!-- @RELATION DEPENDS_ON -> [EXT:frontend:fetchDatasources] -->
 <!-- @RELATION DEPENDS_ON -> [EXT:frontend:fetchDatasourceColumns] -->
@@ -22,6 +22,7 @@
   import { t } from '$lib/i18n';
   import { fetchDatasources, fetchDatasourceColumns } from '$lib/api/translate.js';
   import MultiSelect from '$lib/components/ui/MultiSelect.svelte';
+  import HelpTooltip from '$lib/ui/HelpTooltip.svelte';
 
   const LANGUAGE_LABELS = {
     ru: 'Русский', en: 'English', de: 'Deutsch', fr: 'Français', es: 'Español',
@@ -55,10 +56,7 @@
     llmProviders = [],
     dictionaryIds = $bindable([]),
     availableDictionaries = [],
-    batchSize = $bindable(50),
-    includeSourceReference = $bindable(true),
     disableReasoning = $bindable(false),
-    upsertStrategy = $bindable('MERGE'),
     validationErrors = {},
     onEnvChange = () => {},
   } = $props();
@@ -169,8 +167,9 @@
     <h2 class="text-lg font-semibold text-gray-900 mb-4">{$t.translate?.config?.basic_info}</h2>
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
       <div class="md:col-span-2">
-        <label class="block text-sm font-medium text-gray-700 mb-1">
+        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
           {$t.translate?.config?.name} <span class="text-red-500">*</span>
+          <HelpTooltip text={$t.translate?.config?.help_name || ''} />
         </label>
         <input
           type="text"
@@ -183,7 +182,10 @@
         {/if}
       </div>
       <div class="md:col-span-2">
-        <label class="block text-sm font-medium text-gray-700 mb-1">{$t.translate?.config?.description}</label>
+        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
+          {$t.translate?.config?.description}
+          <HelpTooltip text={$t.translate?.config?.help_description || ''} />
+        </label>
         <textarea
           bind:value={description}
           rows="2"
@@ -199,7 +201,10 @@
     <h2 class="text-lg font-semibold text-gray-900 mb-4">{$t.translate?.config?.datasource}</h2>
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
       <div>
-        <label class="block text-sm font-medium text-gray-700 mb-1">{$t.translate?.config?.environment}</label>
+        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
+          {$t.translate?.config?.environment}
+          <HelpTooltip text={$t.translate?.config?.help_environment || ''} />
+        </label>
         <select
           bind:value={environmentId}
           onchange={onEnvChange}
@@ -212,7 +217,10 @@
         </select>
       </div>
       <div class="relative">
-        <label class="block text-sm font-medium text-gray-700 mb-1">{$t.translate?.config?.datasource_id}</label>
+        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
+          {$t.translate?.config?.datasource_id}
+          <HelpTooltip text={$t.translate?.config?.help_datasource || ''} />
+        </label>
         <input
           type="text"
           bind:value={datasourceSearch}
@@ -282,8 +290,9 @@
 
     <!-- Translation Column -->
     <div class="mb-4">
-      <label class="block text-sm font-medium text-gray-700 mb-1">
+      <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
         {$t.translate?.config?.translation_column} <span class="text-red-500">*</span>
+        <HelpTooltip text={$t.translate?.config?.help_translation_column || ''} />
       </label>
       <select
         bind:value={translationColumn}
@@ -302,7 +311,10 @@
     <!-- Key Mapping (source -> target pairs) -->
     <div class="mb-4">
       <div class="flex items-center justify-between mb-2">
-        <label class="block text-sm font-medium text-gray-700">{$t.translate?.config?.key_columns}</label>
+        <label class="block text-sm font-medium text-gray-700 flex items-center gap-1">
+          {$t.translate?.config?.key_columns}
+          <HelpTooltip text={$t.translate?.config?.help_key_columns || ''} />
+        </label>
         {#if sourceKeyCols.length > 0}
           <button
             onclick={() => { sourceKeyCols = []; targetKeyCols = []; }}
@@ -385,7 +397,10 @@
 
     <!-- Context Columns -->
     <div>
-      <label class="block text-sm font-medium text-gray-700 mb-2">{$t.translate?.config?.context_columns}</label>
+      <label class="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
+        {$t.translate?.config?.context_columns}
+        <HelpTooltip text={$t.translate?.config?.help_context_columns || ''} />
+      </label>
       {#if columnList.length === 0}
         <p class="text-xs text-gray-400">{$t.translate?.config?.select_datasource_hint}</p>
       {:else}
@@ -414,7 +429,10 @@
     <h2 class="text-lg font-semibold text-gray-900 mb-4">{$t.translate?.config?.llm_settings}</h2>
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
       <div>
-        <label class="block text-sm font-medium text-gray-700 mb-1">{$t.translate?.config?.provider}</label>
+        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
+          {$t.translate?.config?.provider}
+          <HelpTooltip text={$t.translate?.config?.help_provider || ''} />
+        </label>
         <select bind:value={providerId} class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
           <option value="">{$t.translate?.config?.select_provider}</option>
           {#each llmProviders as provider}
@@ -423,52 +441,23 @@
         </select>
       </div>
       <div>
+        <div class="flex items-center gap-1 mb-1">
+          <span class="text-sm font-medium text-gray-700">{$t.translate?.config?.target_language}</span>
+          <span class="text-red-500">*</span>
+          <HelpTooltip text={$t.translate?.config?.help_target_language || ''} />
+        </div>
         <MultiSelect
-          label={$t.translate?.config?.target_language}
+          label=""
           options={LANGUAGES}
           bind:selected={targetLanguages}
           searchable={true}
           placeholder={$t.translate?.config?.target_language_search_placeholder || 'Search languages...'}
-          required={true}
+          required={false}
         />
         {#if targetLanguages.length === 0}
           <p class="text-xs text-amber-600 mt-1">{$t.translate?.config?.target_language_required || 'Select at least one target language'}</p>
         {/if}
       </div>
-      <div>
-        <label class="block text-sm font-medium text-gray-700 mb-1">{$t.translate?.config?.batch_size}</label>
-        <input
-          type="number"
-          bind:value={batchSize}
-          min="1"
-          max="1000"
-          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
-        />
-      </div>
-      <div>
-        <label class="block text-sm font-medium text-gray-700 mb-1">{$t.translate?.config?.upsert_strategy}</label>
-        <select bind:value={upsertStrategy} class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
-          <option value="MERGE">{$t.translate?.config?.upsert_merge}</option>
-          <option value="INSERT">{$t.translate?.config?.upsert_insert}</option>
-          <option value="UPDATE">{$t.translate?.config?.upsert_update}</option>
-        </select>
-      </div>
-    </div>
-    <!-- Include source language as reference copy -->
-    <div class="mt-4 pt-4 border-t border-gray-100">
-      <label class="flex items-start gap-3 cursor-pointer">
-        <input
-          type="checkbox"
-          bind:checked={includeSourceReference}
-          class="mt-0.5 rounded border-gray-300 text-primary focus-visible:ring-primary-ring"
-        />
-        <div>
-          <span class="text-sm font-medium text-gray-700">{$t.translate?.config?.include_source_reference || 'Include source language in translations'}</span>
-          <p class="text-xs text-gray-400 mt-0.5">
-            {$t.translate?.config?.include_source_reference_hint || 'The original text will be stored as a verified reference copy in its detected language'}
-          </p>
-        </div>
-      </label>
     </div>
 
     <!-- Disable reasoning toggle -->
@@ -480,7 +469,10 @@
           class="mt-0.5 rounded border-gray-300 text-primary focus-visible:ring-primary-ring"
         />
         <div>
-          <span class="text-sm font-medium text-gray-700">{$t.translate?.config?.disable_reasoning || 'Disable reasoning (save tokens)'}</span>
+          <span class="text-sm font-medium text-gray-700 flex items-center gap-1">
+            {$t.translate?.config?.disable_reasoning || 'Disable reasoning (save tokens)'}
+            <HelpTooltip text={$t.translate?.config?.help_disable_reasoning || ''} />
+          </span>
           <p class="text-xs text-gray-400 mt-0.5">
             {$t.translate?.config?.disable_reasoning_hint || 'Saves output tokens by suppressing Chain of Thought reasoning'}
           </p>
@@ -491,7 +483,10 @@
 
   <!-- Dictionary Attachment -->
   <section class="bg-white border border-gray-200 rounded-lg p-6">
-    <h2 class="text-lg font-semibold text-gray-900 mb-4">{$t.translate?.config?.terminology_dictionaries}</h2>
+    <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
+      {$t.translate?.config?.terminology_dictionaries}
+      <HelpTooltip text={$t.translate?.config?.help_dictionaries || ''} />
+    </h2>
     {#if availableDictionaries.length === 0}
       <p class="text-sm text-gray-400">
         {$t.translate?.config?.no_dictionaries}
diff --git a/frontend/src/lib/components/translate/RunTabContent.svelte b/frontend/src/lib/components/translate/RunTabContent.svelte
index da852c9d2..5c5b02439 100644
--- a/frontend/src/lib/components/translate/RunTabContent.svelte
+++ b/frontend/src/lib/components/translate/RunTabContent.svelte
@@ -17,6 +17,7 @@
   import { t } from '$lib/i18n';
   import { addToast } from '$lib/toasts.js';
   import { updateJob } from '$lib/api/translate.js';
+  import HelpTooltip from '$lib/ui/HelpTooltip.svelte';
   import TranslationRunProgress from './TranslationRunProgress.svelte';
   import TranslationRunResult from './TranslationRunResult.svelte';
 
@@ -87,7 +88,10 @@
             </svg>
           </div>
           <div class="flex-1 min-w-0">
-            <h3 class="text-sm font-semibold text-gray-900">{$t.translate?.config?.run_incremental}</h3>
+            <h3 class="text-sm font-semibold text-gray-900 flex items-center gap-1">
+              {$t.translate?.config?.run_incremental}
+              <HelpTooltip text={$t.translate?.config?.help_incremental || ''} />
+            </h3>
             <p class="text-xs text-gray-500 mt-1">{$t.translate?.config?.run_incremental_desc}</p>
             <button
               onclick={() => onTriggerRun(false)}
@@ -109,7 +113,10 @@
             </svg>
           </div>
           <div class="flex-1 min-w-0">
-            <h3 class="text-sm font-semibold text-gray-900">{$t.translate?.config?.run_full}</h3>
+            <h3 class="text-sm font-semibold text-gray-900 flex items-center gap-1">
+              {$t.translate?.config?.run_full}
+              <HelpTooltip text={$t.translate?.config?.help_full || ''} />
+            </h3>
             <p class="text-xs text-gray-500 mt-1">{$t.translate?.config?.run_full_desc}</p>
             <button
               onclick={() => onTriggerRun(true)}
diff --git a/frontend/src/lib/components/translate/TargetTabForm.svelte b/frontend/src/lib/components/translate/TargetTabForm.svelte
index d45a4f8e5..3e032c740 100644
--- a/frontend/src/lib/components/translate/TargetTabForm.svelte
+++ b/frontend/src/lib/components/translate/TargetTabForm.svelte
@@ -1,6 +1,7 @@
 <!-- #region TargetTabForm [C:3] [TYPE Component] [SEMANTICS translate, target, schema, database] -->
 <!-- @BRIEF Target configuration tab — target schema/table/database selection, target column
      mapping (translated text, language code, source text, detected language columns),
+     Write Settings (batch size, upsert strategy, source reference),
      and schema validation hint (TargetSchemaHint). -->
 <!-- @LAYER UI -->
 <!-- @RELATION DEPENDS_ON -> [TargetSchemaHint] -->
@@ -13,6 +14,7 @@
 <!-- @UX_REACTIVITY Props -> $props() for databases array -->
 <script>
   import { t } from '$lib/i18n';
+  import HelpTooltip from '$lib/ui/HelpTooltip.svelte';
   import TargetSchemaHint from './TargetSchemaHint.svelte';
 
   let {
@@ -25,6 +27,9 @@
     targetSourceLanguageColumn = $bindable(''),
     targetKeyCols = $bindable([]),
     translationColumn = $bindable(''),
+    batchSize = $bindable(50),
+    includeSourceReference = $bindable(true),
+    upsertStrategy = $bindable('MERGE'),
     environmentId = '',
     databases = [],
     databasesLoading = false,
@@ -35,7 +40,10 @@
   <h2 class="text-lg font-semibold text-gray-900 mb-4">{$t.translate?.config?.target_table_title}</h2>
   <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
     <div>
-      <label class="block text-sm font-medium text-gray-700 mb-1">{$t.translate?.config?.target_schema}</label>
+      <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
+        {$t.translate?.config?.target_schema}
+        <HelpTooltip text={$t.translate?.config?.help_target_schema || ''} />
+      </label>
       <input
         type="text"
         bind:value={targetSchema}
@@ -44,7 +52,10 @@
       />
     </div>
     <div>
-      <label class="block text-sm font-medium text-gray-700 mb-1">{$t.translate?.config?.target_table}</label>
+      <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
+        {$t.translate?.config?.target_table}
+        <HelpTooltip text={$t.translate?.config?.help_target_table || ''} />
+      </label>
       <input
         type="text"
         bind:value={targetTable}
@@ -53,8 +64,9 @@
       />
     </div>
     <div class="md:col-span-2">
-      <label class="block text-sm font-medium text-gray-700 mb-1">
+      <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
         {$t.translate?.config?.target_database}
+        <HelpTooltip text={$t.translate?.config?.help_target_database || ''} />
       </label>
       <select
         bind:value={targetDatabaseId}
@@ -80,12 +92,15 @@
 
   <!-- Target Column Mapping -->
   <div class="mt-4 pt-4 border-t border-gray-100">
-    <h3 class="text-sm font-semibold text-gray-900 mb-3">{$t.translate?.config?.target_column_mapping_title || 'Target Column Mapping'}</h3>
-    <p class="text-xs text-gray-400 mb-3">{$t.translate?.config?.target_column_mapping_description || 'Configure which columns receive translated data, language codes, source text, and detected source language during INSERT.'}</p>
+    <h3 class="text-sm font-semibold text-gray-900 mb-3 flex items-center gap-2">
+      {$t.translate?.config?.target_column_mapping_title || 'Target Column Mapping'}
+      <HelpTooltip text={$t.translate?.config?.target_column_mapping_description || ''} />
+    </h3>
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
       <div>
-        <label class="block text-sm font-medium text-gray-700 mb-1">
+        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
           {$t.translate?.config?.target_column_label}
+          <HelpTooltip text={$t.translate?.config?.help_target_column || ''} />
         </label>
         <input
           type="text"
@@ -96,8 +111,9 @@
         <p class="text-xs text-gray-400 mt-1">{$t.translate?.config?.target_column_hint}</p>
       </div>
       <div>
-        <label class="block text-sm font-medium text-gray-700 mb-1">
+        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
           {$t.translate?.config?.target_language_column_label}
+          <HelpTooltip text={$t.translate?.config?.help_target_language_column || ''} />
         </label>
         <input
           type="text"
@@ -108,8 +124,9 @@
         <p class="text-xs text-gray-400 mt-1">{$t.translate?.config?.target_language_column_hint}</p>
       </div>
       <div>
-        <label class="block text-sm font-medium text-gray-700 mb-1">
+        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
           {$t.translate?.config?.target_source_column_label}
+          <HelpTooltip text={$t.translate?.config?.help_target_source_column || ''} />
         </label>
         <input
           type="text"
@@ -120,8 +137,9 @@
         <p class="text-xs text-gray-400 mt-1">{$t.translate?.config?.target_source_column_hint}</p>
       </div>
       <div>
-        <label class="block text-sm font-medium text-gray-700 mb-1">
+        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
           {$t.translate?.config?.target_source_language_column_label}
+          <HelpTooltip text={$t.translate?.config?.help_target_source_language_column || ''} />
         </label>
         <input
           type="text"
@@ -134,6 +152,57 @@
     </div>
   </div>
 
+  <!-- Write Settings: batch size, upsert strategy, source reference -->
+  <div class="mt-4 pt-4 border-t border-gray-100">
+    <h3 class="text-sm font-semibold text-gray-900 mb-3">
+      {$t.translate?.config?.write_settings || 'Write Settings'}
+    </h3>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
+          {$t.translate?.config?.batch_size}
+          <HelpTooltip text={$t.translate?.config?.help_batch_size || ''} />
+        </label>
+        <input
+          type="number"
+          bind:value={batchSize}
+          min="1"
+          max="1000"
+          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
+        />
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
+          {$t.translate?.config?.upsert_strategy}
+          <HelpTooltip text={$t.translate?.config?.help_upsert_strategy || ''} />
+        </label>
+        <select bind:value={upsertStrategy} class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
+          <option value="MERGE">{$t.translate?.config?.upsert_merge}</option>
+          <option value="INSERT">{$t.translate?.config?.upsert_insert}</option>
+          <option value="UPDATE">{$t.translate?.config?.upsert_update}</option>
+        </select>
+      </div>
+    </div>
+    <div class="mt-3">
+      <label class="flex items-start gap-3 cursor-pointer">
+        <input
+          type="checkbox"
+          bind:checked={includeSourceReference}
+          class="mt-0.5 rounded border-gray-300 text-primary focus-visible:ring-primary-ring"
+        />
+        <div>
+          <span class="text-sm font-medium text-gray-700 flex items-center gap-1">
+            {$t.translate?.config?.include_source_reference || 'Include source language in translations'}
+            <HelpTooltip text={$t.translate?.config?.help_include_source_reference || ''} />
+          </span>
+          <p class="text-xs text-gray-400 mt-0.5">
+            {$t.translate?.config?.include_source_reference_hint || 'The original text will be stored as a verified reference copy in its detected language'}
+          </p>
+        </div>
+      </label>
+    </div>
+  </div>
+
   <!-- Schema hint: проверка целевой таблицы -->
   <TargetSchemaHint
     {environmentId}
diff --git a/frontend/src/lib/i18n/locales/en/translate.json b/frontend/src/lib/i18n/locales/en/translate.json
index 25435c982..4bb6ee34c 100644
--- a/frontend/src/lib/i18n/locales/en/translate.json
+++ b/frontend/src/lib/i18n/locales/en/translate.json
@@ -72,6 +72,7 @@
     "target_source_column_hint": "Column where original source text will be inserted",
     "target_source_language_column_label": "Source Language Column",
     "target_source_language_column_hint": "Column where detected source language (BCP-47) will be inserted",
+    "write_settings": "Write Settings",
     "batch_size": "Batch Size",
     "upsert_strategy": "Strategy",
     "upsert_merge": "UPSERT (MERGE)",
@@ -118,7 +119,30 @@
     "disable_reasoning_hint": "Saves output tokens by suppressing Chain of Thought reasoning",
     "mark_ready": "Mark as READY",
     "save_job_first": "Save the job first",
-    "breadcrumb_job": "Job"
+    "breadcrumb_job": "Job",
+    "help_name": "A unique job name for quick identification in the list.",
+    "help_description": "Optional description — notes for the team about the purpose of this job.",
+    "help_environment": "The Superset environment where the source dataset resides. Changing the environment will reset the dataset selection.",
+    "help_datasource": "The dataset (table or SQL query) from Superset that contains the text to translate. Start typing to search.",
+    "help_translation_column": "The column containing the source text to be sent to the LLM for translation. Must contain string values. The language of each row is auto-detected (lingua detector, BCP-47). If a row is empty or the language is undetermined ('und'), it will require review.",
+    "help_key_columns": "Columns that form a unique row key. Used for UPSERT/MERGE into the target table and for tracking changes.",
+    "help_context_columns": "Additional columns passed to the LLM as context. Helps improve translation quality (e.g., category, author).",
+    "help_provider": "The LLM provider that will perform the translation. Choose a provider that supports the required languages.",
+    "help_target_language": "Languages to translate the text into. You can select multiple — a single LLM call translates each row into ALL selected languages at once. ⚠️ Important: the system auto-detects each source row's language (lingua detector). If the detected language matches one of the target languages, translation for THAT language is SKIPPED — the original text is saved as-is. Example: source 'Hello world' is detected as 'en'. If 'English (en)' is selected as a target, this row is skipped for en (stays 'Hello world') but translated into other selected languages (e.g., 'Привет мир' for ru).",
+    "help_batch_size": "Number of rows sent to the LLM per request. Smaller batches = higher quality but more tokens spent on overhead.",
+    "help_upsert_strategy": "Write strategy for the target table: UPSERT (MERGE) — insert or update; INSERT — new rows only; UPDATE — existing rows only.",
+    "help_include_source_reference": "Save the original text in a separate column as a reference copy. Useful for verification and auditing.",
+    "help_disable_reasoning": "Disable LLM Chain-of-Thought reasoning. Saves tokens (~20-30%) but may reduce quality for complex translations.",
+    "help_dictionaries": "Terminology dictionaries for forced term mapping. Improves translation consistency within the subject domain.",
+    "help_target_schema": "The database schema (namespace) where translated data will be written. E.g., public.",
+    "help_target_table": "The target table name for translated data. If the table does not exist, data will be inserted via SQL Lab.",
+    "help_target_database": "Database connection (SQL Lab) through which translated rows will be INSERTed.",
+    "help_target_column": "Target table column where translated text will be written. Must support a string type.",
+    "help_target_language_column": "Column for the translation language code (ISO 639-1, e.g., 'en', 'ru'). Used for multilingual storage.",
+    "help_target_source_column": "Column for saving the original source text before translation. Required if 'Include source text' is enabled.",
+    "help_target_source_language_column": "Column for the automatically detected source language code (BCP-47). Filled by the LLM during translation.",
+    "help_incremental": "Translates only rows with new key values (new keys). Previously translated rows are not re-fetched from the LLM — results come from cache. Faster and cheaper. Recommended for regular updates. For scheduled runs, baseline expiry is checked: if the last successful run was >90 days ago, a full translation is automatically triggered.",
+    "help_full": "Re-translates ALL rows from the datasource from scratch, ignoring the cache from previous runs. Useful when settings, dictionaries, or provider change. Takes more time and tokens. Language auto-detection (detected_lang) runs for every row on each full run."
   },
   "preview": {
     "title": "Preview",
@@ -212,7 +236,8 @@
     "job_duplicated": "Job duplicated",
     "duplicate_failed": "Failed to duplicate job",
     "job_deleted": "Job deleted",
-    "delete_failed": "Failed to delete job"
+    "delete_failed": "Failed to delete job",
+    "jobs_flow_hint": "Flow: create a job → configure datasource and LLM → run translation → check run history."
   },
   "history": {
     "title": "Translation History",
diff --git a/frontend/src/lib/i18n/locales/ru/translate.json b/frontend/src/lib/i18n/locales/ru/translate.json
index 7b5cc6480..872f7462a 100644
--- a/frontend/src/lib/i18n/locales/ru/translate.json
+++ b/frontend/src/lib/i18n/locales/ru/translate.json
@@ -72,6 +72,7 @@
     "target_source_column_hint": "Колонка, в которую будет вставлен оригинальный исходный текст",
     "target_source_language_column_label": "Колонка языка источника",
     "target_source_language_column_hint": "Колонка, в которую будет вставлен обнаруженный язык источника (BCP-47)",
+    "write_settings": "Настройки записи",
     "batch_size": "Размер пакета",
     "upsert_strategy": "Стратегия",
     "upsert_merge": "UPSERT (MERGE)",
@@ -118,7 +119,30 @@
     "disable_reasoning_hint": "Экономит токены на выходе, отключая цепочку рассуждений (Chain of Thought)",
     "mark_ready": "Пометить как готово",
     "save_job_first": "Сначала сохраните задание",
-    "breadcrumb_job": "Задание"
+    "breadcrumb_job": "Задание",
+    "help_name": "Уникальное название задания для быстрой идентификации в списке.",
+    "help_description": "Опциональное описание — заметки для команды о назначении задания.",
+    "help_environment": "Superset-окружение, в котором находится исходный датасет. Смена окружения сбросит выбор датасета.",
+    "help_datasource": "Датасет (таблица или SQL-запрос) из Superset, содержащий текст для перевода. Начните печатать для поиска.",
+    "help_translation_column": "Колонка с исходным текстом, который будет отправлен на перевод в LLM. Должна содержать строковые значения. Язык каждой строки определяется автоматически (lingua-детектор, BCP-47). Если строка пустая или язык не определён (und) — потребуется проверка.",
+    "help_key_columns": "Колонки, образующие уникальный ключ строки. Используются для UPSERT/MERGE в целевую таблицу и для отслеживания изменений.",
+    "help_context_columns": "Дополнительные колонки, передаваемые в LLM как контекст. Помогают улучшить качество перевода (например, категория, автор).",
+    "help_provider": "LLM-провайдер, который будет выполнять перевод. Выберите провайдер с поддержкой нужных языков.",
+    "help_target_language": "Языки, на которые нужно перевести текст. Можно выбрать несколько — за один проход LLM переведёт строку на все языки сразу. ⚠️ Важно: система автоматически определяет язык каждой исходной строки (lingua-детектор). Если обнаруженный язык совпадает с одним из целевых — для этой строки перевод на данный язык НЕ выполняется, а исходный текст сохраняется как есть. Пример: исходная строка 'Hello world' определена как 'en'. Если 'English (en)' выбран как целевой язык, эта строка будет пропущена для en-перевода (останется 'Hello world'), но будет переведена на остальные выбранные языки (например, 'Привет мир' для ru).",
+    "help_batch_size": "Количество строк, отправляемых в LLM за один запрос. Меньше пакет = выше качество, но больше токенов на оверхед.",
+    "help_upsert_strategy": "Стратегия записи в целевую таблицу: UPSERT (MERGE) — вставка или обновление; INSERT — только новые строки; UPDATE — только обновление существующих.",
+    "help_include_source_reference": "Сохранить оригинальный текст в отдельной колонке как эталонную копию. Полезно для верификации и аудита.",
+    "help_disable_reasoning": "Отключить Chain-of-Thought рассуждения LLM. Экономит токены (~20-30%), но может снизить качество сложных переводов.",
+    "help_dictionaries": "Терминологические словари для принудительного сопоставления терминов. Повышают консистентность перевода в рамках предметной области.",
+    "help_target_schema": "Схема (namespace) базы данных, в которую будут записаны переведённые данные. Например: public.",
+    "help_target_table": "Имя целевой таблицы для записи переведённых данных. Если таблицы нет — данные будут вставлены через SQL Lab.",
+    "help_target_database": "Подключение к базе данных (SQL Lab), через которое будет выполняться INSERT переведённых строк.",
+    "help_target_column": "Колонка целевой таблицы, в которую будет записан переведённый текст. Должна поддерживать строковый тип.",
+    "help_target_language_column": "Колонка для кода языка перевода (ISO 639-1, например 'en', 'ru'). Используется при мультиязычном хранении.",
+    "help_target_source_column": "Колонка для сохранения оригинального исходного текста перед переводом. Требуется, если включена опция 'Сохранять исходный текст'.",
+    "help_target_source_language_column": "Колонка для кода автоматически определённого языка источника (BCP-47). Заполняется LLM при переводе.",
+    "help_incremental": "Переводит только строки с новыми значениями ключей (новые ключи). Ранее переведённые строки не перезапрашиваются у LLM — результат берётся из кэша. Быстрее и дешевле. Рекомендуется для регулярных обновлений. Для расписаний также проверяется 'baseline expiry': если последний успешный запуск был >90 дней назад — автоматически выполняется полный перевод.",
+    "help_full": "Переводит ВСЕ строки из источника заново, игнорируя кэш предыдущих запусков. Полезно при изменении настроек, словарей или провайдера. Занимает больше времени и токенов. При каждом запуске выполняется автоматическое определение языка (detected_lang) для каждой строки."
   },
   "preview": {
     "title": "Предпросмотр",
@@ -213,7 +237,8 @@
     "job_duplicated": "Задание дублировано",
     "duplicate_failed": "Не удалось дублировать задание",
     "job_deleted": "Задание удалено",
-    "delete_failed": "Не удалось удалить задание"
+    "delete_failed": "Не удалось удалить задание",
+    "jobs_flow_hint": "Flow: создайте задание → настройте источник данных и LLM → запустите перевод → проверьте историю запусков."
   },
   "history": {
     "title": "История переводов",
diff --git a/frontend/src/lib/models/BranchModel.svelte.ts b/frontend/src/lib/models/BranchModel.svelte.ts
new file mode 100644
index 000000000..f6e230695
--- /dev/null
+++ b/frontend/src/lib/models/BranchModel.svelte.ts
@@ -0,0 +1,205 @@
+// frontend/src/lib/models/BranchModel.svelte.ts
+// #region BranchModel [C:4] [TYPE Model] [SEMANTICS git,branch,checkout,create,screen-model]
+// @BRIEF State model for branch selector — list, checkout, and create Git branches.
+// @INVARIANT Loading guards checkout and create operations — only one operation runs at a time.
+// @STATE idle         — Branch list loaded, dropdown enabled.
+// @STATE loading      — Fetching branch list.
+// @STATE createMode   — Inline create form visible.
+// @STATE checking_out — Branch checkout in progress.
+// @STATE creating     — Branch creation in progress.
+// @ACTION loadBranches(dashboardId, envId)   — Fetch branch list from API.
+// @ACTION handleCheckout(dashboardId, branchName, envId) — Checkout a branch.
+// @ACTION handleCreate(dashboardId, branchName, sourceBranch, envId) — Create a new branch.
+// @ACTION handleSelect(event)                 — Handle dropdown selection.
+// @ACTION toggleCreateForm()                  — Toggle create form visibility.
+// @RELATION DEPENDS_ON -> [EXT:frontend:gitService]
+// @RELATION DEPENDS_ON -> [ToastsModule]
+// @REJECTED Inline $state in BranchSelector.svelte rejected — model extraction enables L1 tests without DOM render,
+//   follows pattern established by GitStatusModel and GitManagerModel.
+
+import { gitService } from '../../services/gitService.js';
+import { addToast } from '$lib/toasts.js';
+import { t as tStore } from '$lib/i18n';
+import { get } from 'svelte/store';
+
+// ── Types ─────────────────────────────────────────────────────
+
+interface BranchItem {
+  name: string;
+  [key: string]: unknown;
+}
+
+interface BranchError {
+  message: string;
+  next_steps: string[];
+}
+
+/** @returns Current i18n translations. */
+function tt(): Record<string, unknown> {
+  return get(tStore);
+}
+
+export class BranchModel {
+  // ── Identity ───────────────────────────────────────────────
+  /** Dashboard slug for git API calls. */
+  dashboardId: string = $state('');
+  /** Environment ID for scoped git operations. */
+  envId: string | null = $state(null);
+  /** Current active branch name. Updated on checkout. */
+  currentBranch: string = $state('main');
+  /** Callback invoked when branch changes. */
+  onChange: ((event: { branch: string }) => void) | null = $state(null);
+
+  // ── Branch List ────────────────────────────────────────────
+  /** Array of branch objects from the API. */
+  branches: BranchItem[] = $state([]);
+  /** True while fetching branches. */
+  loading: boolean = $state(false);
+
+  // ── Create Form ────────────────────────────────────────────
+  /** True when the create-branch form is visible. */
+  showCreate: boolean = $state(false);
+  /** New branch name input value. */
+  newBranchName: string = $state('');
+  /** Error object { message, next_steps? } from last failed checkout/create. */
+  branchError: BranchError | null = $state(null);
+
+  // ── Operation Loading Flags ────────────────────────────────
+  /** True while a checkout is in progress. */
+  checkingOut: boolean = $state(false);
+  /** True while a branch creation is in progress. */
+  creating: boolean = $state(false);
+
+  constructor({
+    dashboardId = '',
+    envId = null,
+    currentBranch = 'main',
+    onChange = null,
+  }: {
+    dashboardId?: string;
+    envId?: string | null;
+    currentBranch?: string;
+    onChange?: ((event: { branch: string }) => void) | null;
+  } = {}) {
+    this.dashboardId = dashboardId;
+    this.envId = envId;
+    this.currentBranch = currentBranch;
+    this.onChange = onChange;
+  }
+
+  // ── Branch List ────────────────────────────────────────────
+
+  /**
+   * Fetch branch list from the backend.
+   * @SIDE_EFFECT GETs /git/repositories/{ref}/branches.
+   */
+  async loadBranches(dashboardId?: string, envId?: string | null): Promise<void> {
+    const ref = dashboardId || this.dashboardId;
+    const eid = envId !== undefined ? envId : this.envId;
+    if (!ref) return;
+    this.loading = true;
+    this.branchError = null;
+    try {
+      this.branches = await gitService.getBranches(ref, eid);
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : 'Failed to load branches';
+      addToast((tt().git as Record<string, string>)?.load_branches_failed || msg, 'error');
+      this.branches = [];
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  // ── Select (sync) ──────────────────────────────────────────
+
+  /**
+   * Handle dropdown selection — delegates to handleCheckout.
+   */
+  handleSelect(event: { target?: { value?: string } }): void {
+    const branchName = event?.target?.value;
+    if (!branchName) return;
+    void this.handleCheckout(this.dashboardId, branchName, this.envId);
+  }
+
+  // ── Checkout ───────────────────────────────────────────────
+
+  /**
+   * Switch repository to the selected branch.
+   * @POST currentBranch updated; onChange callback fired on success.
+   * @SIDE_EFFECT POSTs to /git/repositories/{ref}/checkout.
+   */
+  async handleCheckout(dashboardId?: string, branchName?: string, envId?: string | null): Promise<void> {
+    const ref = dashboardId || this.dashboardId;
+    const eid = envId !== undefined ? envId : this.envId;
+    if (!branchName || !ref) return;
+    this.branchError = null;
+    this.checkingOut = true;
+    try {
+      await gitService.checkoutBranch(ref, branchName, eid);
+      this.currentBranch = branchName;
+      if (typeof this.onChange === 'function') {
+        this.onChange({ branch: branchName });
+      }
+      addToast(
+        ((tt().git as Record<string, string>)?.switched_to || 'Switched to {branch}').replace('{branch}', branchName),
+        'success',
+      );
+    } catch (e: unknown) {
+      const err = e as Record<string, unknown>;
+      const detail = typeof err?.detail === 'object' ? err.detail as Record<string, unknown> : {};
+      const shortMsg = (detail?.message as string) || (detail?.message_en as string) || (err.message as string) || 'Branch switch failed';
+      this.branchError = {
+        message: shortMsg,
+        next_steps: Array.isArray(detail?.next_steps) ? detail.next_steps as string[] : [],
+      };
+      addToast(shortMsg, 'warning', 0);
+    } finally {
+      this.checkingOut = false;
+    }
+  }
+
+  // ── Create Branch ──────────────────────────────────────────
+
+  /**
+   * Create a new branch from the current branch.
+   * @POST On success: branch list reloaded, create form closed, input cleared.
+   * @SIDE_EFFECT POSTs to /git/repositories/{ref}/branches.
+   */
+  async handleCreate(dashboardId?: string, branchName?: string, sourceBranch?: string, envId?: string | null): Promise<void> {
+    const ref = dashboardId || this.dashboardId;
+    const eid = envId !== undefined ? envId : this.envId;
+    const name = branchName || this.newBranchName;
+    const source = sourceBranch || this.currentBranch;
+    if (!name || !ref) return;
+    this.branchError = null;
+    this.creating = true;
+    try {
+      await gitService.createBranch(ref, name, source, eid);
+      addToast(
+        ((tt().git as Record<string, string>)?.created_branch || 'Created branch {branch}').replace('{branch}', name),
+        'success',
+      );
+      this.showCreate = false;
+      this.newBranchName = '';
+      await this.loadBranches(ref, eid);
+    } catch (e: unknown) {
+      this.branchError = { message: e instanceof Error ? e.message : 'Branch creation failed', next_steps: [] };
+      addToast(e instanceof Error ? e.message : 'Branch creation failed', 'error');
+    } finally {
+      this.creating = false;
+    }
+  }
+
+  // ── UI Actions (sync) ──────────────────────────────────────
+
+  /**
+   * Toggle create branch form visibility.
+   */
+  toggleCreateForm(): void {
+    this.showCreate = !this.showCreate;
+    if (!this.showCreate) {
+      this.newBranchName = '';
+    }
+  }
+}
+// #endregion BranchModel
diff --git a/frontend/src/lib/models/CommitModel.svelte.ts b/frontend/src/lib/models/CommitModel.svelte.ts
new file mode 100644
index 000000000..7f07b09da
--- /dev/null
+++ b/frontend/src/lib/models/CommitModel.svelte.ts
@@ -0,0 +1,166 @@
+// frontend/src/lib/models/CommitModel.svelte.ts
+// #region CommitModel [C:4] [TYPE Model] [SEMANTICS git,commit,message,diff,screen-model]
+// @BRIEF State model for commit modal — message generation, status loading, commit with optional push.
+// @INVARIANT commit and generateMessage are mutually exclusive — only one runs at a time.
+// @STATE idle           — No operation in progress, form ready.
+// @STATE loading        — Fetching git status and diff.
+// @STATE generating     — AI commit message generation in progress.
+// @STATE committing     — Commit (and optional push) in progress.
+// @ACTION loadStatus()              — Fetch git status + staged and unstaged diff.
+// @ACTION handleGenerateMessage()   — Generate AI commit message via API.
+// @ACTION handleCommit()            — Commit changes and optionally push.
+// @RELATION DEPENDS_ON -> [EXT:frontend:gitService]
+// @RELATION DEPENDS_ON -> [EXT:frontend:api]
+// @RELATION DEPENDS_ON -> [ToastsModule]
+// @REJECTED Inline $state in CommitModal.svelte rejected — model extraction enables L1 tests without DOM render,
+//   follows pattern established by GitManagerModel and GitStatusModel.
+
+import { gitService } from '../../services/gitService.js';
+import { api } from '$lib/api.js';
+import { addToast } from '$lib/toasts.js';
+import { t as tStore } from '$lib/i18n';
+import { get } from 'svelte/store';
+
+// ── Types ─────────────────────────────────────────────────────
+
+interface CommitStatusPayload {
+  is_dirty?: boolean;
+  current_branch?: string;
+  staged_files?: string[];
+  modified_files?: string[];
+  untracked_files?: string[];
+  [key: string]: unknown;
+}
+
+/** @returns Current i18n translations. */
+function tt(): Record<string, unknown> {
+  return get(tStore);
+}
+
+export class CommitModel {
+  // ── Identity ───────────────────────────────────────────────
+  /** Dashboard slug or reference for git API calls. */
+  dashboardId: string = $state('');
+  /** Environment ID for scoped git operations. */
+  envId: string | null = $state(null);
+  /** Modal visibility controlled externally. */
+  show: boolean = $state(false);
+
+  // ── Commit Message ─────────────────────────────────────────
+  /** Current commit message text. */
+  message: string = $state('');
+  /** True while a commit is in progress. */
+  committing: boolean = $state(false);
+  /** True while AI message generation is in progress. */
+  generatingMessage: boolean = $state(false);
+  /** True to auto-push after commit. */
+  autoPushAfterCommit: boolean = $state(true);
+
+  // ── Git Status ─────────────────────────────────────────────
+  /** Git status payload (is_dirty, staged_files, etc.). */
+  status: CommitStatusPayload | null = $state(null);
+  /** Combined staged + unstaged diff string. */
+  diff: string = $state('');
+  /** True while loading status and diff. */
+  loading: boolean = $state(false);
+
+  // ── Derived ────────────────────────────────────────────────
+
+  /** Commit button is disabled when there's nothing to commit. */
+  canCommit: boolean = $derived.by(() => {
+    if (this.committing || this.loading) return false;
+    if (!this.message) return false;
+    if (!this.status) return false;
+    const hasChanges =
+      this.status.is_dirty ||
+      (Array.isArray(this.status.staged_files) && this.status.staged_files.length > 0);
+    return hasChanges;
+  });
+
+  constructor({ dashboardId = '', envId = null, show = false }: { dashboardId?: string; envId?: string | null; show?: boolean } = {}) {
+    this.dashboardId = dashboardId;
+    this.envId = envId;
+    this.show = show;
+  }
+
+  // ── Status Loading ─────────────────────────────────────────
+
+  /**
+   * Fetch current git status and diff for the dashboard.
+   * @SIDE_EFFECT Sets status, diff, loading lifecycle.
+   */
+  async loadStatus(): Promise<void> {
+    if (!this.dashboardId || !this.show) return;
+    this.loading = true;
+    try {
+      this.status = await gitService.getStatus(this.dashboardId, this.envId);
+      const unstagedDiff: string = await gitService.getDiff(this.dashboardId, null, false, this.envId);
+      const stagedDiff: string = await gitService.getDiff(this.dashboardId, null, true, this.envId);
+
+      let combined = '';
+      if (stagedDiff) combined += '--- STAGED CHANGES ---\n' + stagedDiff + '\n\n';
+      if (unstagedDiff) combined += '--- UNSTAGED CHANGES ---\n' + unstagedDiff;
+      this.diff = combined || '';
+    } catch (e: unknown) {
+      const errMsg = e instanceof Error ? e.message : 'Failed to load status';
+      addToast((tt().git as Record<string, string>)?.load_changes_failed || errMsg, 'error');
+      this.status = null;
+      this.diff = '';
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  // ── Generate Message ───────────────────────────────────────
+
+  /**
+   * Generate an AI commit message from the dashboard diff.
+   * @SIDE_EFFECT POSTs to /git/repositories/{ref}/generate-message.
+   */
+  async handleGenerateMessage(): Promise<void> {
+    this.generatingMessage = true;
+    try {
+      const data: { message?: string } = await api.postApi(
+        `/git/repositories/${encodeURIComponent(String(this.dashboardId))}/generate-message${
+          this.envId ? `?env_id=${encodeURIComponent(String(this.envId))}` : ''
+        }`,
+        undefined,
+        { suppressToast: true },
+      );
+      this.message = data?.message || '';
+      addToast((tt().git as Record<string, string>)?.commit_message_generated || 'Commit message generated', 'success');
+    } catch (e: unknown) {
+      addToast(e instanceof Error ? e.message : (tt().git as Record<string, string>)?.commit_message_failed || 'Failed to generate message', 'error');
+    } finally {
+      this.generatingMessage = false;
+    }
+  }
+
+  // ── Commit ─────────────────────────────────────────────────
+
+  /**
+   * Commit changes and optionally push to remote.
+   * @PRE message is non-empty; status has changes.
+   * @POST On success: message cleared, toast shown, modal closed.
+   */
+  async handleCommit(): Promise<void> {
+    if (!this.message || !this.canCommit) return;
+    this.committing = true;
+    try {
+      await gitService.commit(this.dashboardId, this.message, [], this.envId);
+      if (this.autoPushAfterCommit) {
+        await gitService.push(this.dashboardId, this.envId);
+        addToast((tt().git as Record<string, string>)?.commit_and_push_success || 'Committed and pushed', 'success');
+      } else {
+        addToast((tt().git as Record<string, string>)?.commit_success || 'Committed successfully', 'success');
+      }
+      this.show = false;
+      this.message = '';
+    } catch (e: unknown) {
+      addToast(e instanceof Error ? e.message : 'Commit failed', 'error');
+    } finally {
+      this.committing = false;
+    }
+  }
+}
+// #endregion CommitModel
diff --git a/frontend/src/lib/models/DeploymentModel.svelte.ts b/frontend/src/lib/models/DeploymentModel.svelte.ts
new file mode 100644
index 000000000..ccbf6fae1
--- /dev/null
+++ b/frontend/src/lib/models/DeploymentModel.svelte.ts
@@ -0,0 +1,181 @@
+// frontend/src/lib/models/DeploymentModel.svelte.ts
+// #region DeploymentModel [C:4] [TYPE Model] [SEMANTICS git,deploy,environment,screen-model]
+// @BRIEF State model for deployment modal — load environments, select target, deploy with prod confirmation.
+// @INVARIANT Cannot deploy without a selected environment (selectedEnv must be set).
+// @INVARIANT Deploy and loading are mutually exclusive — only one operation runs at a time.
+// @STATE idle         — Environments loaded, selection ready.
+// @STATE loading      — Fetching environments from API.
+// @STATE deploying    — Deploy request in flight.
+// @STATE confirm_prod — Prod confirmation prompt shown before deployment.
+// @ACTION loadEnvironments()          — Fetch available environments from API.
+// @ACTION handleDeploy(dashboardId)   — Deploy to selected environment with prod confirmation.
+// @ACTION normalizeEnvStage(env)      — Normalize environment stage with legacy fallback.
+// @ACTION resolveEnvUrl(env)          — Resolve environment URL from payload shape.
+// @RELATION DEPENDS_ON -> [EXT:frontend:gitService]
+// @RELATION DEPENDS_ON -> [EXT:frontend:api]
+// @RELATION DEPENDS_ON -> [ToastsModule]
+// @RELATION DEPENDS_ON -> [GitUtils]
+// @REJECTED Inline $state in DeploymentModal.svelte rejected — model extraction enables L1 tests without DOM render.
+//   Prod confirmation logic previously duplicated across useGitManager.js and DeploymentModal.svelte
+//   is now unified in this model.
+
+import { gitService } from '../../services/gitService.js';
+import { api } from '$lib/api.js';
+import { addToast } from '$lib/toasts.js';
+import { t as tStore } from '$lib/i18n';
+import { get } from 'svelte/store';
+import { normalizeEnvStage } from '../../services/git-utils.js';
+
+// ── Types ─────────────────────────────────────────────────────
+
+interface EnvironmentItem {
+  id: string;
+  name?: string;
+  stage?: string;
+  is_production?: boolean;
+  superset_url?: string;
+  url?: string;
+  [key: string]: unknown;
+}
+
+/** @returns Current i18n translations. */
+function tt(): Record<string, unknown> {
+  return get(tStore);
+}
+
+export class DeploymentModel {
+  // ── Identity ───────────────────────────────────────────────
+  /** Dashboard slug or reference for deploy calls. */
+  dashboardId: string = $state('');
+  /** Source environment ID (current). */
+  envId: string | null = $state(null);
+  /** Modal visibility controlled externally. */
+  show: boolean = $state(false);
+  /** Preferred target stage hint (DEV/PREPROD/PROD) from GitFlow. */
+  preferredTargetStage: string = $state('');
+
+  // ── Environment List ───────────────────────────────────────
+  /** All available environments from the API. */
+  environments: EnvironmentItem[] = $state([]);
+  /** Selected environment ID for deployment. */
+  selectedEnv: string = $state('');
+  /** True while fetching environments. */
+  loading: boolean = $state(false);
+  /** True while deploying. */
+  deploying: boolean = $state(false);
+
+  // ── Derived State ──────────────────────────────────────────
+
+  /** Normalized preferred target stage (uppercased). */
+  normalizedPreferredStage: string = $derived(String(this.preferredTargetStage || '').toUpperCase());
+
+  /** Environments eligible for deployment (filtered out current env). */
+  deploymentCandidates: EnvironmentItem[] = $derived.by(() => {
+    const all = this.environments.filter((env: EnvironmentItem) => env?.id !== this.envId);
+    if (!this.normalizedPreferredStage) return all;
+    const stageMatched = all.filter(
+      (env: EnvironmentItem) => normalizeEnvStage(env) === this.normalizedPreferredStage,
+    );
+    return stageMatched.length > 0 ? stageMatched : all;
+  });
+
+  /** Currently selected environment object. */
+  selectedEnvironment: EnvironmentItem | null = $derived(
+    this.deploymentCandidates.find((env: EnvironmentItem) => env.id === this.selectedEnv) || null,
+  );
+
+  /** Stage of the selected environment. */
+  selectedEnvironmentStage: string = $derived(
+    this.selectedEnvironment ? normalizeEnvStage(this.selectedEnvironment) : '',
+  );
+
+  /** True when selected environment is PROD. */
+  isProdTarget: boolean = $derived(this.selectedEnvironmentStage === 'PROD');
+
+  constructor({ dashboardId = '', envId = null, show = false, preferredTargetStage = '' }: { dashboardId?: string; envId?: string | null; show?: boolean; preferredTargetStage?: string } = {}) {
+    this.dashboardId = dashboardId;
+    this.envId = envId;
+    this.show = show;
+    this.preferredTargetStage = preferredTargetStage;
+  }
+
+  // ── Environment Utilities ──────────────────────────────────
+
+  /**
+   * Normalize environment stage with legacy production fallback.
+   * Re-exported from git-utils.js for convenience.
+   */
+  normalizeEnvStage(env: EnvironmentItem): string {
+    return normalizeEnvStage(env);
+  }
+
+  /**
+   * Resolve environment URL from consolidated or git-specific payload shape.
+   */
+  resolveEnvUrl(env: EnvironmentItem): string {
+    return String(env?.superset_url || env?.url || '');
+  }
+
+  // ── Load Environments ──────────────────────────────────────
+
+  /**
+   * Fetch available environments from API and select the preferred candidate.
+   * @SIDE_EFFECT Sets environments, selectedEnv; shows toast on failure.
+   */
+  async loadEnvironments(): Promise<void> {
+    this.loading = true;
+    try {
+      this.environments = await api.getEnvironmentsList();
+      const candidates = (this.environments || []).filter((env: EnvironmentItem) => env?.id !== this.envId);
+      if (this.normalizedPreferredStage) {
+        const stageMatched = candidates.filter(
+          (env: EnvironmentItem) => normalizeEnvStage(env) === this.normalizedPreferredStage,
+        );
+        this.selectedEnv = stageMatched[0]?.id || candidates[0]?.id || '';
+      } else {
+        this.selectedEnv = candidates[0]?.id || '';
+      }
+    } catch (e: unknown) {
+      addToast((tt().migration as Record<string, string>)?.loading_envs_failed || 'Failed to load environments', 'error');
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  // ── Deploy ─────────────────────────────────────────────────
+
+  /**
+   * Deploy dashboard to the selected environment.
+   * Shows a prompt confirmation when targeting PROD.
+   * @POST On success: modal closes, success toast shown.
+   *        On failure: error toast shown.
+   * @SIDE_EFFECT Calls gitService.deploy; shows prompt for PROD.
+   */
+  async handleDeploy(): Promise<void> {
+    if (!this.selectedEnv) return;
+
+    // PROD confirmation prompt
+    if (this.isProdTarget) {
+      const expected = String(this.dashboardId);
+      const confirmation = prompt(
+        `Подтвердите deploy в PROD. Введите slug: ${expected}`,
+      );
+      if (String(confirmation || '').trim() !== expected) {
+        addToast('Подтверждение PROD не пройдено. Deploy отменен.', 'error');
+        return;
+      }
+    }
+
+    this.deploying = true;
+    try {
+      const result: { message?: string } = await gitService.deploy(this.dashboardId, this.selectedEnv, this.envId);
+      addToast(result?.message || (tt().git as Record<string, string>)?.deploy_success || 'Deployed successfully', 'success');
+      this.show = false;
+    } catch (e: unknown) {
+      addToast(e instanceof Error ? e.message : 'Deploy failed', 'error');
+    } finally {
+      this.deploying = false;
+    }
+  }
+}
+// #endregion DeploymentModel
diff --git a/frontend/src/lib/models/GitConfigModel.svelte.ts b/frontend/src/lib/models/GitConfigModel.svelte.ts
new file mode 100644
index 000000000..f763ed1ff
--- /dev/null
+++ b/frontend/src/lib/models/GitConfigModel.svelte.ts
@@ -0,0 +1,402 @@
+// frontend/src/lib/models/GitConfigModel.svelte.ts
+// #region GitConfigModel [C:4] [TYPE Model] [SEMANTICS git,config,settings,screen-model]
+// @BRIEF State model for Git configuration management — CRUD operations on git server configs and Gitea repository management.
+// @INVARIANT Config list is loaded before edit/create operations are attempted (loadConfigs() on mount).
+// @INVARIANT Loading states are mutually exclusive per operation type (configsLoading, saving, testingConnection, deleting, giteaReposLoading, giteaCreating, giteaDeleting).
+// @STATE idle         — Config list loaded, no operation in progress.
+// @STATE loading      — Fetching configs from API.
+// @STATE saving       — Saving config (create or update).
+// @STATE testing      — Testing connection to git server.
+// @STATE deleting     — Deleting a git config.
+// @STATE gitea_loading   — Loading Gitea repositories.
+// @STATE gitea_creating  — Creating Gitea repository.
+// @STATE gitea_deleting  — Deleting Gitea repository.
+// @ACTION loadConfigs()      — GET /git/config
+// @ACTION selectConfig(id)   — Set selected config ID
+// @ACTION startCreate()      — Reset form for new config creation
+// @ACTION startEdit(id)      — Populate form from existing config
+// @ACTION cancelEdit()       — Reset form and editing state
+// @ACTION saveConfig()       — POST or PUT config based on isEditing
+// @ACTION deleteConfig(id)   — DELETE /git/config/{id}
+// @ACTION testConnection()   — POST /git/config/test
+// @ACTION loadGiteaRepos()   — GET Gitea repositories for selected config
+// @ACTION createRemoteRepo() — POST Gitea repository
+// @ACTION deleteRemoteRepo(repo) — DELETE Gitea repository
+// @RELATION DEPENDS_ON -> [EXT:frontend:gitService]
+// @RELATION DEPENDS_ON -> [ToastsModule]
+// @REJECTED Inline $state + separate functions in GitDashboardPage rejected — duplicated API logic, hard to test, violated DRY model pattern established by GitManagerModel and MigrationSettingsModel.
+// @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.js';
+import { t as tStore } from '$lib/i18n';
+import { get } from 'svelte/store';
+
+// ── Types ─────────────────────────────────────────────────────
+
+interface GitConfigItem {
+  id: string | number;
+  name?: string;
+  provider?: string;
+  url?: string;
+  pat?: string;
+  status?: string;
+  default_repository?: string;
+  default_branch?: string;
+  [key: string]: unknown;
+}
+
+interface GitConfigFormData {
+  name: string;
+  provider: string;
+  url: string;
+  pat: string;
+  default_repository: string;
+  default_branch: string;
+}
+
+interface GiteaRepoForm {
+  name: string;
+  private: boolean;
+  description: string;
+  auto_init: boolean;
+  default_branch: string;
+}
+
+interface GiteaRepo {
+  name?: string;
+  full_name?: string;
+  [key: string]: unknown;
+}
+
+interface ConnectionTestPayload {
+  name: string;
+  provider: string;
+  url: string;
+  pat: string;
+  default_repository: string;
+  default_branch: string;
+  config_id: string | number | null;
+}
+
+interface ConnectionTestResult {
+  status: string;
+  message?: string;
+  [key: string]: unknown;
+}
+
+/** @returns Current i18n translations. */
+function tt(): Record<string, unknown> {
+  return get(tStore);
+}
+
+export class GitConfigModel {
+  // ── Config list ──────────────────────────────────────────────
+  /** List of Git server configurations. */
+  configs: GitConfigItem[] = $state([]);
+  /** True while fetching configs. */
+  configsLoading: boolean = $state(false);
+  /** Error message from last failed config load. */
+  configsError: string = $state('');
+
+  // ── Selection / editing ─────────────────────────────────────
+  /** Currently selected config ID (used for Gitea context). */
+  selectedConfigId: string = $state('');
+  /** True when editing an existing config (vs creating new). */
+  isEditing: boolean = $state(false);
+  /** ID of the config being edited (null when creating). */
+  editingConfigId: string | number | null = $state(null);
+
+  // ── Form data ────────────────────────────────────────────────
+  /** Form fields for adding/editing a git config. */
+  formData: GitConfigFormData = $state({
+    name: '',
+    provider: 'GITHUB',
+    url: 'https://github.com',
+    pat: '',
+    default_repository: '',
+    default_branch: 'main',
+  });
+
+  // ── Connection testing ───────────────────────────────────────
+  /** True while testing a connection. */
+  testingConnection: boolean = $state(false);
+  /** Result from last connection test (null = not tested). */
+  connectionTestResult: ConnectionTestResult | null = $state(null);
+
+  // ── Saving ───────────────────────────────────────────────────
+  /** True while saving a config (create or update). */
+  saving: boolean = $state(false);
+  /** Error message from last failed save. */
+  saveError: string = $state('');
+  /** Success message from last successful save. */
+  saveSuccess: string = $state('');
+
+  // ── Deleting ─────────────────────────────────────────────────
+  /** True while deleting a config. */
+  deleting: boolean = $state(false);
+
+  // ── Gitea repos ─────────────────────────────────────────────
+  /** List of Gitea repositories for the selected config. */
+  giteaRepos: GiteaRepo[] = $state([]);
+  /** True while loading Gitea repos. */
+  giteaReposLoading: boolean = $state(false);
+  /** True while creating a Gitea repo. */
+  giteaCreating: boolean = $state(false);
+  /** True while deleting a Gitea repo. */
+  giteaDeleting: boolean = $state(false);
+  /** Selected config ID for Gitea operations. */
+  selectedGiteaConfigId: string = $state('');
+
+  /** Form fields for creating a new Gitea repository. */
+  newGiteaRepo: GiteaRepoForm = $state({
+    name: '',
+    private: true,
+    description: '',
+    auto_init: true,
+    default_branch: 'main',
+  });
+
+  // ── Helpers ──────────────────────────────────────────────────
+
+  /** @private Convenient access to i18n store value. */
+  get _t(): Record<string, unknown> {
+    return tt();
+  }
+
+  // ── Actions: Config CRUD ─────────────────────────────────────
+
+  /**
+   * Fetch all Git server configurations.
+   * @POST configs is populated from API; configsLoading cycles true→false.
+   */
+  async loadConfigs(): Promise<void> {
+    this.configsLoading = true;
+    this.configsError = '';
+    try {
+      this.configs = await gitService.getConfigs();
+    } catch (e: unknown) {
+      this.configsError = e instanceof Error ? e.message : 'Failed to load git configs';
+      addToast(e instanceof Error ? e.message : 'Failed to load git configs', 'error');
+    } finally {
+      this.configsLoading = false;
+    }
+  }
+
+  /**
+   * Select a config by ID (sync, no API call).
+   * @POST selectedConfigId is set.
+   */
+  selectConfig(id: string): void {
+    this.selectedConfigId = id;
+  }
+
+  /**
+   * Reset form for creating a new config.
+   * @POST isEditing=false, editingConfigId=null, formData reset to defaults.
+   */
+  startCreate(): void {
+    this.isEditing = false;
+    this.editingConfigId = null;
+    this.formData = {
+      name: '',
+      provider: 'GITHUB',
+      url: 'https://github.com',
+      pat: '',
+      default_repository: '',
+      default_branch: 'main',
+    };
+    this.saveError = '';
+    this.saveSuccess = '';
+  }
+
+  /**
+   * Populate form from an existing config for editing.
+   * @POST isEditing=true, editingConfigId set, formData populated.
+   */
+  startEdit(id: string | number): void {
+    const config = this.configs.find((c: GitConfigItem) => c.id === id);
+    if (!config) return;
+    this.isEditing = true;
+    this.editingConfigId = config.id as string | number;
+    this.formData = {
+      name: config.name || '',
+      provider: config.provider || 'GITHUB',
+      url: config.url || 'https://github.com',
+      pat: config.pat || '',
+      default_repository: config.default_repository || '',
+      default_branch: config.default_branch || 'main',
+    };
+    this.saveError = '';
+    this.saveSuccess = '';
+  }
+
+  /**
+   * Cancel editing / reset form to initial state.
+   * @POST Form and editing state fully reset (same as startCreate).
+   */
+  cancelEdit(): void {
+    this.startCreate();
+  }
+
+  /**
+   * Save config — creates new or updates existing based on isEditing.
+   * @POST On success: configs updated, form reset, success toast.
+   *       On failure: saveError set, error toast.
+   */
+  async saveConfig(): Promise<void> {
+    this.saving = true;
+    this.saveError = '';
+    this.saveSuccess = '';
+    try {
+      if (this.isEditing) {
+        const updated = await gitService.updateConfig(this.editingConfigId, this.formData);
+        this.configs = this.configs.map((c: GitConfigItem) => (c.id === this.editingConfigId ? updated : c));
+        this.saveSuccess = (this._t?.settings as Record<string, unknown>)?.git_config_updated as string || 'Git configuration updated';
+        addToast(this.saveSuccess, 'success');
+      } else {
+        const saved = await gitService.createConfig(this.formData);
+        this.configs = [...this.configs, saved];
+        this.saveSuccess = (this._t?.settings as Record<string, unknown>)?.git_config_saved as string || 'Git configuration saved';
+        addToast(this.saveSuccess, 'success');
+      }
+      this.cancelEdit();
+    } catch (e: unknown) {
+      this.saveError = e instanceof Error ? e.message : 'Failed to save git config';
+      addToast(e instanceof Error ? e.message : 'Failed to save git config', 'error');
+    } finally {
+      this.saving = false;
+    }
+  }
+
+  /**
+   * Delete a git config by ID.
+   * @SIDE_EFFECT DELETE API call; removes config from local list.
+   */
+  async deleteConfig(id: string | number): Promise<void> {
+    this.deleting = true;
+    try {
+      await gitService.deleteConfig(id);
+      this.configs = this.configs.filter((c: GitConfigItem) => c.id !== id);
+      addToast((this._t?.settings as Record<string, unknown>)?.git_config_deleted as string || 'Git configuration deleted', 'success');
+      if (this.selectedGiteaConfigId === id) {
+        this.selectedGiteaConfigId = '';
+        this.giteaRepos = [];
+      }
+    } catch (e: unknown) {
+      addToast(e instanceof Error ? e.message : 'Failed to delete git config', 'error');
+    } finally {
+      this.deleting = false;
+    }
+  }
+
+  /**
+   * Test connection to the git server with current formData.
+   * @POST connectionTestResult set; success/error toast shown.
+   */
+  async testConnection(): Promise<void> {
+    this.testingConnection = true;
+    this.connectionTestResult = null;
+    try {
+      const testPayload: ConnectionTestPayload = {
+        ...this.formData,
+        config_id: null,
+      };
+      if (this.isEditing && this.editingConfigId) {
+        testPayload.config_id = this.editingConfigId;
+      }
+      const result: ConnectionTestResult = await gitService.testConnection(testPayload);
+      this.connectionTestResult = result;
+      if (result.status === 'success') {
+        addToast((this._t?.settings as Record<string, unknown>)?.connection_success as string || 'Connection successful', 'success');
+      } else {
+        addToast(
+          result.message || (this._t?.settings as Record<string, unknown>)?.connection_failed_short as string || 'Connection failed',
+          'error',
+        );
+      }
+    } catch (e: unknown) {
+      addToast((this._t?.settings as Record<string, unknown>)?.connection_failed_short as string || 'Connection failed', 'error');
+    } finally {
+      this.testingConnection = false;
+    }
+  }
+
+  // ── Actions: Gitea repositories ──────────────────────────────
+
+  /**
+   * Load Gitea repositories for the selected config.
+   * @POST giteaRepos populated from API.
+   */
+  async loadGiteaRepos(): Promise<void> {
+    if (!this.selectedGiteaConfigId) {
+      this.giteaRepos = [];
+      return;
+    }
+    this.giteaReposLoading = true;
+    try {
+      this.giteaRepos = await gitService.listGiteaRepositories(this.selectedGiteaConfigId);
+    } catch (e: unknown) {
+      addToast(e instanceof Error ? e.message : 'Failed to load Gitea repos', 'error');
+      this.giteaRepos = [];
+    } finally {
+      this.giteaReposLoading = false;
+    }
+  }
+
+  /**
+   * Create a new repository on the selected Gitea server.
+   * @PRE selectedGiteaConfigId is set; newGiteaRepo.name is non-empty.
+   * @POST Repository created; form reset; repos list reloaded.
+   */
+  async createRemoteRepo(): Promise<void> {
+    if (!this.selectedGiteaConfigId || !this.newGiteaRepo.name?.trim()) return;
+    this.giteaCreating = true;
+    try {
+      await gitService.createGiteaRepository(this.selectedGiteaConfigId, {
+        ...this.newGiteaRepo,
+        name: this.newGiteaRepo.name.trim(),
+      } satisfies GiteaRepoForm);
+      addToast('Gitea repository created', 'success');
+      this.newGiteaRepo = {
+        name: '',
+        private: true,
+        description: '',
+        auto_init: true,
+        default_branch: 'main',
+      };
+      await this.loadGiteaRepos();
+    } catch (e: unknown) {
+      addToast(e instanceof Error ? e.message : 'Failed to create Gitea repo', 'error');
+    } finally {
+      this.giteaCreating = false;
+    }
+  }
+
+  /**
+   * Delete a repository on the selected Gitea server.
+   * @POST Repository deleted on Gitea; repos list reloaded.
+   */
+  async deleteRemoteRepo(repo: GiteaRepo): Promise<void> {
+    if (!this.selectedGiteaConfigId) return;
+    const fullName = String(repo.full_name || '');
+    const parts = fullName.split('/');
+    const owner = parts.length > 1 ? parts[0] : '';
+    const repoName = parts.length > 1 ? parts[1] : repo.name;
+    if (!owner || !repoName) {
+      addToast('Cannot resolve repository owner/name', 'error');
+      return;
+    }
+    this.giteaDeleting = true;
+    try {
+      await gitService.deleteGiteaRepository(this.selectedGiteaConfigId, owner, repoName);
+      addToast('Gitea repository deleted', 'success');
+      await this.loadGiteaRepos();
+    } catch (e: unknown) {
+      addToast(e instanceof Error ? e.message : 'Failed to delete Gitea repo', 'error');
+    } finally {
+      this.giteaDeleting = false;
+    }
+  }
+}
+// #endregion GitConfigModel
diff --git a/frontend/src/lib/models/GitManagerModel.svelte.ts b/frontend/src/lib/models/GitManagerModel.svelte.ts
new file mode 100644
index 000000000..f6bb6e387
--- /dev/null
+++ b/frontend/src/lib/models/GitManagerModel.svelte.ts
@@ -0,0 +1,866 @@
+// frontend/src/lib/models/GitManagerModel.svelte.ts
+// #region GitManagerModel [C:4] [TYPE Model] [SEMANTICS git,workspace,screen-model,state,repository]
+// @BRIEF State model for the Git workspace panel — declares atoms, invariants, and actions.
+// @INVARIANT Loading states are mutually exclusive per operation:
+//   checkingStatus, loading, workspaceLoading, committing, isPulling, isPushing,
+//   generatingMessage, promoting, mergeResolveInProgress, mergeAbortInProgress,
+//   mergeContinueInProgress, mergeRecoveryLoading, creatingRemoteRepo.
+//   At most one of these loading flags is true at any time.
+// @INVARIANT Git error is always cleared before any new operation (clearError before try).
+// @INVARIANT Repository binding (configId, provider, remoteUrl) is loaded only after initialized=true.
+// @STATE uninitialized   — No repository bound to dashboard.
+// @STATE initialized     — Repository exists, tab workspace/release/operations available.
+// @STATE checking        — Initial status check in progress.
+// @STATE error           — Persistent error banner visible with message and dismiss action.
+// @ACTION checkStatus()              — Checks if repository is initialized; loads workspace on success.
+// @ACTION loadWorkspace()            — Loads workspace status and diff.
+// @ACTION handleSync()               — Synchronizes dashboard state with Git.
+// @ACTION handleGenerateMessage()    — Generates AI commit message from diff.
+// @ACTION handleCommit()             — Stages and commits workspace changes.
+// @ACTION handlePromote(...)         — Promotes changes between branches.
+// @ACTION handlePull()               — Pulls from remote.
+// @ACTION handlePush()               — Pushes to remote.
+// @ACTION openDeployModal()          — Opens deployment target modal.
+// @ACTION handleCreateRemoteRepo()   — Creates remote repository on provider.
+// @ACTION handleInit()               — Initializes local repository from remote URL.
+// @ACTION loadMergeRecoveryState()   — Loads merge recovery state.
+// @ACTION closeUnfinishedMergeDialog() — Closes merge dialog and resets state.
+// @ACTION handleOpenConflictResolver() — Loads conflicts and opens resolver.
+// @ACTION handleResolveConflicts(event) — Applies conflict resolutions.
+// @ACTION handleAbortUnfinishedMerge()  — Aborts in-progress merge.
+// @ACTION handleContinueUnfinishedMerge() — Finalizes merge commit.
+// @ACTION handleCopyUnfinishedMergeCommands() — Copies commands to clipboard.
+// @ACTION clearGitError()            — Clears the persistent error banner.
+// @ACTION initialize(dashboardId, envId, dashboardTitle) — Bootstraps state on mount.
+// @RELATION DEPENDS_ON -> [EXT:frontend:gitService]
+// @RELATION DEPENDS_ON -> [EXT:frontend:api]
+// @RELATION DEPENDS_ON -> [GitUtils]
+// @RELATION DEPENDS_ON -> [ToastsModule]
+// @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 { api } from '$lib/api.js';
+import { addToast } from '$lib/toasts.js';
+import {
+  isNumericDashboardRef,
+  resolveDefaultConfig,
+  extractUnfinishedMergeContext,
+  buildSuggestedRepoName,
+  resolveCurrentEnvironmentId,
+  normalizeEnvStage,
+  applyGitflowStageDefaults,
+  resolvePushProviderLabel,
+  extractHttpHost,
+} from '../../services/git-utils.js';
+import { t as tStore } from '$lib/i18n';
+import { get } from 'svelte/store';
+
+// ── Types ─────────────────────────────────────────────────────
+
+interface GitConfig {
+  id: string | number;
+  provider?: string;
+  url?: string;
+  [key: string]: unknown;
+}
+
+interface WorkspaceStatus {
+  current_branch?: string;
+  staged_files?: string[];
+  modified_files?: string[];
+  untracked_files?: string[];
+  is_dirty?: boolean;
+  [key: string]: unknown;
+}
+
+interface GitErrorPayload {
+  message: string;
+  status: number;
+  error_code: string | null;
+  files: unknown[];
+  next_steps: string[];
+  detail: Record<string, unknown> | null;
+  errorType?: string;
+}
+
+interface UnfinishedMergeContext {
+  message?: string;
+  repositoryPath?: string;
+  gitDir?: string;
+  currentBranch?: string;
+  mergeHead?: string;
+  mergeMessagePreview?: string;
+  nextSteps?: string[];
+  commands?: string[];
+  conflictsCount?: number;
+  [key: string]: unknown;
+}
+
+interface MergeConflict {
+  file_path: string;
+  [key: string]: unknown;
+}
+
+interface RepositoryBinding {
+  provider?: string;
+  remote_url?: string;
+  config_id?: string | number;
+  [key: string]: unknown;
+}
+
+interface PromotePayload {
+  from_branch: string;
+  to_branch: string;
+  mode: string;
+  title: string;
+  description?: string;
+  reason?: string;
+}
+
+interface PromoteResponse {
+  url?: string;
+  [key: string]: unknown;
+}
+
+interface MergeStatus {
+  has_unfinished_merge?: boolean;
+  repository_path?: string;
+  git_dir?: string;
+  current_branch?: string;
+  merge_head?: string;
+  merge_message_preview?: string;
+  conflicts_count?: number;
+  [key: string]: unknown;
+}
+
+interface CreateRepoPayload {
+  name: string;
+  private: boolean;
+  description: string;
+  auto_init: boolean;
+  default_branch: string;
+}
+
+interface CreateRepoResult {
+  clone_url?: string;
+  html_url?: string;
+  [key: string]: unknown;
+}
+
+interface EnvironmentItem {
+  id: string;
+  [key: string]: unknown;
+}
+
+interface NumericDashboardRefCheck {
+  isNumericDashboardRef: typeof isNumericDashboardRef;
+  resolveEnvId: () => string | null;
+  normalizeEnvStageFn: typeof normalizeEnvStage;
+  applyGitflowStageDefaultsFn: typeof applyGitflowStageDefaults;
+}
+
+interface GitflowStageDefaults {
+  promoteFromBranch?: string;
+  promoteToBranch?: string;
+  preferredDeployTargetStage?: string;
+}
+
+// #region buildGitErrorFromException [C:2] [TYPE Function]
+// @BRIEF Extract structured gitError payload from a caught exception for modal error banner.
+// @PRE  e is an Error object with optional .status, .detail, .error_code properties.
+// @POST Returns { message, status, error_code, files, next_steps, detail } for state.
+function buildGitErrorFromException(e: unknown): GitErrorPayload {
+  if (!e) return { message: 'Неизвестная ошибка Git', status: 500, error_code: null, files: [], next_steps: [], detail: null };
+  const err = e as Record<string, unknown>;
+  const detail = err?.detail || (typeof err?.detail === 'string' ? { message: err.detail } : null) || null;
+  const detailObj = typeof detail === 'object' ? detail as Record<string, unknown> : null;
+  return {
+    message: (detailObj?.message as string) || (detailObj?.message_en as string) || (err.message as string) || 'Произошла ошибка Git',
+    status: (err?.status as number) || 500,
+    error_code: (err?.error_code as string) || (detailObj?.error_code as string) || null,
+    files: (detailObj?.files as unknown[]) || [],
+    next_steps: (detailObj?.next_steps as string[]) || (detailObj?.next_steps_en as string[]) || [],
+    detail: detailObj,
+  };
+}
+// #endregion buildGitErrorFromException
+
+/** short alias for get(tStore) */
+function tt(): Record<string, unknown> {
+  return get(tStore);
+}
+
+export class GitManagerModel {
+  // ── Props (synced from component) ────────────────────────────
+  dashboardId: string = $state('');
+  /** Raw envId from props (null = not set). resolvedEnvId adds localStorage fallback. */
+  envId: string | null = $state(null);
+  dashboardTitle: string = $state('');
+
+  // ── Branch & Status ─────────────────────────────────────────
+  initialized: boolean = $state(false);
+  loading: boolean = $state(false);
+  checkingStatus: boolean = $state(true);
+  currentBranch: string = $state('main');
+  activeTab: string = $state('workspace');
+
+  // ── Configs & Remote ────────────────────────────────────────
+  configs: GitConfig[] = $state([]);
+  selectedConfigId: string = $state('');
+  remoteUrl: string = $state('');
+  creatingRemoteRepo: boolean = $state(false);
+  repositoryProvider: string = $state('');
+  repositoryBindingRemoteUrl: string = $state('');
+  repositoryConfigUrl: string = $state('');
+
+  // ── Commit ──────────────────────────────────────────────────
+  commitMessage: string = $state('');
+  committing: boolean = $state(false);
+  generatingMessage: boolean = $state(false);
+  autoPushAfterCommit: boolean = $state(true);
+
+  // ── Workspace ───────────────────────────────────────────────
+  workspaceStatus: WorkspaceStatus | null = $state(null);
+  workspaceDiff: string = $state('');
+  workspaceLoading: boolean = $state(false);
+
+  // ── Pull / Push ─────────────────────────────────────────────
+  isPulling: boolean = $state(false);
+  isPushing: boolean = $state(false);
+
+  // ── Promote ─────────────────────────────────────────────────
+  showAdvancedPromote: boolean = $state(false);
+  promoting: boolean = $state(false);
+  promoteFromBranch: string = $state('dev');
+  promoteToBranch: string = $state('preprod');
+  promoteMode: string = $state('mr');
+  promoteReason: string = $state('');
+
+  // ── Environment ─────────────────────────────────────────────
+  currentEnvStage: string = $state('');
+  preferredDeployTargetStage: string = $state('');
+
+  // ── Deploy ──────────────────────────────────────────────────
+  showDeployModal: boolean = $state(false);
+
+  // ── Merge Recovery ──────────────────────────────────────────
+  showUnfinishedMergeDialog: boolean = $state(false);
+  unfinishedMergeContext: UnfinishedMergeContext | null = $state(null);
+  copyingUnfinishedMergeCommands: boolean = $state(false);
+  mergeRecoveryLoading: boolean = $state(false);
+  mergeConflicts: MergeConflict[] = $state([]);
+  showConflictResolver: boolean = $state(false);
+  mergeResolveInProgress: boolean = $state(false);
+  mergeAbortInProgress: boolean = $state(false);
+  mergeContinueInProgress: boolean = $state(false);
+
+  // ── Error Banner ────────────────────────────────────────────
+  gitError: GitErrorPayload | null = $state(null);
+  gitErrorType: string = $state('error');
+
+  // ── Derived ─────────────────────────────────────────────────
+
+  /** Resolved envId with localStorage fallback. */
+  resolvedEnvId: string | null = $derived(resolveCurrentEnvironmentId(this.envId));
+
+  /** True when there are any workspace changes (staged, modified, or untracked). */
+  hasWorkspaceChanges: boolean = $derived.by(() => {
+    if (!this.workspaceStatus) return false;
+    const w = this.workspaceStatus;
+    return [...(w.staged_files || []), ...(w.modified_files || []), ...(w.untracked_files || [])].length > 0;
+  });
+
+  /** Total count of changed files (staged + modified + untracked). */
+  changedFilesCount: number = $derived.by(() => {
+    if (!this.workspaceStatus) return 0;
+    const w = this.workspaceStatus;
+    return [...(w.staged_files || []), ...(w.modified_files || []), ...(w.untracked_files || [])].length;
+  });
+
+  /** Lower-case provider label for auto-push checkbox text. */
+  pushProviderLabel: string = $derived(resolvePushProviderLabel(this.configs, this.selectedConfigId, this.repositoryProvider));
+
+  /** Origin host from repository binding URL. */
+  originHost: string = $derived(extractHttpHost(this.repositoryBindingRemoteUrl));
+
+  /** Config host from default config URL. Synced from component via model.repositoryConfigUrl. */
+  configHost: string = $derived(extractHttpHost(this.repositoryConfigUrl));
+
+  /** True when origin and config hosts differ (server mismatch warning). */
+  hasOriginConfigMismatch: boolean = $derived(!!(this.originHost && this.configHost && this.originHost !== this.configHost));
+
+  constructor({ dashboardId = '', envId = null, dashboardTitle = '' }: { dashboardId?: string; envId?: string | null; dashboardTitle?: string } = {}) {
+    this.dashboardId = dashboardId;
+    this.envId = envId;
+    this.dashboardTitle = dashboardTitle;
+  }
+
+  // ── Helpers ──────────────────────────────────────────────────
+
+  /** Clear the persistent error banner. */
+  clearGitError(): void {
+    this.gitError = null;
+    this.gitErrorType = 'error';
+  }
+
+  /** @private Set the persistent error banner + show persistent toast. */
+  _setGitError(e: unknown, errorType?: string): void {
+    const err = buildGitErrorFromException(e);
+    err.errorType = errorType || (err.status >= 500 ? 'error' : err.status === 409 ? 'warning' : 'error');
+    this.gitError = err;
+    this.gitErrorType = err.errorType;
+    addToast(err.message, err.errorType === 'warning' ? 'warning' : 'error', 0);
+  }
+
+  /** @private Convenient access to i18n store value for translations. */
+  get _t(): Record<string, unknown> {
+    return tt();
+  }
+
+  /** @private Collect current scalar + helper snapshot for handler context. */
+  _snapshot(): NumericDashboardRefCheck {
+    return {
+      isNumericDashboardRef,
+      resolveEnvId: () => resolveCurrentEnvironmentId(this.envId),
+      normalizeEnvStageFn: normalizeEnvStage,
+      applyGitflowStageDefaultsFn: applyGitflowStageDefaults,
+    };
+  }
+
+  // ── Initialization ───────────────────────────────────────────
+
+  /**
+   * Bootstrap state on mount: load configs, check status, resolve env stage,
+   * and load repository binding if initialized.
+   */
+  async initialize(): Promise<void> {
+    this.loading = true;
+    try {
+      this.configs = await gitService.getConfigs();
+      const dc = resolveDefaultConfig(this.configs, this.selectedConfigId);
+      if (dc?.id) this.selectedConfigId = String(dc.id);
+    } catch (_e: unknown) {
+      this.configs = [];
+    }
+    this.loading = false;
+    await Promise.all([this.checkStatus(), this.loadCurrentEnvironmentStage()]);
+    if (this.initialized) {
+      try {
+        const binding: RepositoryBinding = await gitService.getRepositoryBinding(this.dashboardId, this.resolvedEnvId);
+        this.repositoryProvider = binding?.provider || '';
+        this.repositoryBindingRemoteUrl = binding?.remote_url || '';
+        if (binding?.config_id) this.selectedConfigId = String(binding.config_id);
+      } catch (_e: unknown) {
+        this.repositoryProvider = '';
+        this.repositoryBindingRemoteUrl = '';
+      }
+    }
+  }
+
+  // ── Environment Stage ────────────────────────────────────────
+
+  /**
+   * Resolve current environment stage (DEV/PREPROD/PROD) and apply GitFlow defaults.
+   * @SIDE_EFFECT Fetches /environments from API.
+   */
+  async loadCurrentEnvironmentStage(): Promise<void> {
+    const currentEnvId = resolveCurrentEnvironmentId(this.envId);
+    if (!currentEnvId) return;
+    try {
+      const environments: EnvironmentItem[] = await api.getEnvironmentsList();
+      const currentEnv = (environments || []).find((item: EnvironmentItem) => item.id === currentEnvId);
+      if (!currentEnv) return;
+      const stage = normalizeEnvStage(currentEnv);
+      this.currentEnvStage = stage;
+      const defaults: GitflowStageDefaults = applyGitflowStageDefaults(stage);
+      if (defaults.promoteFromBranch !== undefined) this.promoteFromBranch = defaults.promoteFromBranch;
+      if (defaults.promoteToBranch !== undefined) this.promoteToBranch = defaults.promoteToBranch;
+      if (defaults.preferredDeployTargetStage !== undefined) this.preferredDeployTargetStage = defaults.preferredDeployTargetStage;
+    } catch (e: unknown) {
+      console.error(`[GitManagerModel][loadCurrentEnvironmentStage] Failed: ${e instanceof Error ? e.message : String(e)}`);
+    }
+  }
+
+  // ── Check Status ─────────────────────────────────────────────
+
+  /**
+   * Check if Git repository is initialized for the dashboard.
+   * @POST initialized=true if repository found and workspace loaded.
+   */
+  async checkStatus(): Promise<void> {
+    if (isNumericDashboardRef(this.dashboardId)) {
+      this.checkingStatus = false;
+      this.initialized = false;
+      addToast('GitManager requires dashboard slug. Numeric ID is forbidden.', 'error');
+      return;
+    }
+    this.checkingStatus = true;
+    if (!this.resolvedEnvId) {
+      this.initialized = false;
+      this.checkingStatus = false;
+      return;
+    }
+    try {
+      await gitService.getBranches(this.dashboardId, this.resolvedEnvId);
+      this.initialized = true;
+      await this.loadWorkspace();
+    } catch (_e: unknown) {
+      this.initialized = false;
+    } finally {
+      this.checkingStatus = false;
+    }
+  }
+
+  // ── Workspace ────────────────────────────────────────────────
+
+  /**
+   * Load Git workspace status and diff for initialized repository.
+   * @SIDE_EFFECT Fetches /status and /diff for the dashboard repository.
+   */
+  async loadWorkspace(): Promise<void> {
+    if (!this.initialized) return;
+    this.clearGitError();
+    this.workspaceLoading = true;
+    try {
+      const ws: WorkspaceStatus = await gitService.getStatus(this.dashboardId, this.resolvedEnvId);
+      const sd: string = await gitService.getDiff(this.dashboardId, null, true, this.resolvedEnvId);
+      const ud: string = await gitService.getDiff(this.dashboardId, null, false, this.resolvedEnvId);
+      this.workspaceStatus = ws;
+      this.workspaceDiff = [sd, ud].filter(Boolean).join('\n\n');
+      this.currentBranch = ws?.current_branch || this.currentBranch;
+    } catch (e: unknown) {
+      this._setGitError(e);
+    } finally {
+      this.workspaceLoading = false;
+    }
+  }
+
+  // ── Sync ─────────────────────────────────────────────────────
+
+  /**
+   * Synchronize local dashboard state with Git repository.
+   * @SIDE_EFFECT POSTs to /git/repositories/{ref}/sync.
+   */
+  async handleSync(): Promise<void> {
+    if (isNumericDashboardRef(this.dashboardId)) {
+      addToast('GitManager requires dashboard slug. Numeric ID is forbidden.', 'error');
+      return;
+    }
+    this.clearGitError();
+    this.loading = true;
+    try {
+      const sourceEnvId = this.resolvedEnvId || localStorage.getItem('selected_env_id');
+      await gitService.sync(this.dashboardId, sourceEnvId, this.resolvedEnvId);
+      addToast((this._t?.git as Record<string, unknown>)?.sync_success as string || 'Состояние дашборда синхронизировано с Git', 'success');
+      await this.loadWorkspace();
+    } catch (e: unknown) {
+      this._setGitError(e);
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  // ── Generate Message ─────────────────────────────────────────
+
+  /**
+   * Generate AI commit message from dashboard diff.
+   * @SIDE_EFFECT POSTs to /git/repositories/{ref}/generate-message.
+   */
+  async handleGenerateMessage(): Promise<void> {
+    this.clearGitError();
+    this.generatingMessage = true;
+    try {
+      const data: { message?: string } = await api.postApi(
+        `/git/repositories/${encodeURIComponent(String(this.dashboardId))}/generate-message${
+          this.resolvedEnvId ? `?env_id=${encodeURIComponent(String(this.resolvedEnvId))}` : ''
+        }`,
+        undefined,
+        { suppressToast: true },
+      );
+      this.commitMessage = data?.message || '';
+      addToast((this._t?.git as Record<string, unknown>)?.commit_message_generated as string || 'Сообщение для коммита сгенерировано', 'success');
+    } catch (e: unknown) {
+      this._setGitError(e);
+    } finally {
+      this.generatingMessage = false;
+    }
+  }
+
+  // ── Commit ───────────────────────────────────────────────────
+
+  /**
+   * Stage and commit workspace changes, optionally push.
+   * @PRE  commitMessage is non-empty; hasWorkspaceChanges is true.
+   */
+  async handleCommit(): Promise<void> {
+    if (!this.commitMessage || !this.hasWorkspaceChanges) return;
+    this.clearGitError();
+    this.committing = true;
+    try {
+      await gitService.commit(this.dashboardId, this.commitMessage, [], this.resolvedEnvId);
+      if (this.autoPushAfterCommit) {
+        await gitService.push(this.dashboardId, this.resolvedEnvId);
+        addToast((this._t?.git as Record<string, unknown>)?.commit_and_push_success as string || 'Коммит создан и отправлен в remote', 'success');
+      } else {
+        addToast((this._t?.git as Record<string, unknown>)?.commit_success as string || 'Коммит успешно создан', 'success');
+      }
+      this.commitMessage = '';
+      await this.loadWorkspace();
+    } catch (e: unknown) {
+      this._setGitError(e);
+    } finally {
+      this.committing = false;
+    }
+  }
+
+  // ── Promote ──────────────────────────────────────────────────
+
+  /**
+   * Promote changes between branches via MR or direct merge.
+   * @SIDE_EFFECT Opens MR URL in new tab (MR mode).
+   */
+  async handlePromote(): Promise<void> {
+    if (!this.promoteFromBranch || !this.promoteToBranch || this.promoteFromBranch === this.promoteToBranch) {
+      addToast('Выберите разные исходную и целевую ветки', 'error');
+      return;
+    }
+    if (this.promoteMode === 'direct' && !String(this.promoteReason || '').trim()) {
+      addToast('Для небезопасного прямого переноса укажите причину', 'error');
+      return;
+    }
+    this.clearGitError();
+    this.promoting = true;
+    try {
+      const response: PromoteResponse = await gitService.promote(
+        this.dashboardId,
+        {
+          from_branch: this.promoteFromBranch,
+          to_branch: this.promoteToBranch,
+          mode: this.promoteMode,
+          title: `Promote ${this.promoteFromBranch} -> ${this.promoteToBranch}: ${this.dashboardTitle || this.dashboardId}`,
+          description: this.promoteMode === 'direct' ? `Unsafe direct promote.\nReason: ${this.promoteReason}` : undefined,
+          reason: this.promoteMode === 'direct' ? this.promoteReason : undefined,
+        } satisfies PromotePayload,
+        this.resolvedEnvId,
+      );
+      if (this.promoteMode === 'direct') {
+        addToast('Прямой перенос выполнен. Нарушение политики записано в логи.', 'warning');
+      } else {
+        if (response?.url) window.open(response.url, '_blank', 'noopener,noreferrer');
+        addToast('Merge Request создан на Git сервере', 'success');
+      }
+    } catch (e: unknown) {
+      this._setGitError(e);
+    } finally {
+      this.promoting = false;
+    }
+  }
+
+  // ── Pull ─────────────────────────────────────────────────────
+
+  /**
+   * Pull changes from remote repository.
+   * @SIDE_EFFECT POSTs to /pull; opens merge dialog on GIT_UNFINISHED_MERGE.
+   */
+  async handlePull(): Promise<void> {
+    this.clearGitError();
+    this.isPulling = true;
+    try {
+      await gitService.pull(this.dashboardId, this.resolvedEnvId);
+      addToast((this._t?.git as Record<string, unknown>)?.pull_success as string || 'Изменения получены из Git', 'success');
+      await this.loadWorkspace();
+    } catch (e: unknown) {
+      const handled = this.openUnfinishedMergeDialogFromError(e);
+      if (handled) {
+        await this.loadMergeRecoveryState();
+      } else {
+        this._setGitError(e);
+      }
+    } finally {
+      this.isPulling = false;
+    }
+  }
+
+  // ── Push ─────────────────────────────────────────────────────
+
+  /**
+   * Push local commits to remote repository.
+   * @SIDE_EFFECT POSTs to /push.
+   */
+  async handlePush(): Promise<void> {
+    this.clearGitError();
+    this.isPushing = true;
+    try {
+      await gitService.push(this.dashboardId, this.resolvedEnvId);
+      addToast((this._t?.git as Record<string, unknown>)?.push_success as string || 'Изменения отправлены в Git', 'success');
+      await this.loadWorkspace();
+    } catch (e: unknown) {
+      this._setGitError(e);
+    } finally {
+      this.isPushing = false;
+    }
+  }
+
+  // ── Deploy Modal ─────────────────────────────────────────────
+
+  /**
+   * Open deployment target modal with PROD confirmation prompt.
+   */
+  openDeployModal(): void {
+    if (this.currentEnvStage === 'PROD') {
+      const expected = String(this.dashboardId);
+      const confirmation = prompt(`Подтвердите деплой в PROD. Введите slug дашборда: ${expected}`);
+      if (String(confirmation || '').trim() !== expected) {
+        addToast('Подтверждение PROD не пройдено. Деплой отменен.', 'error');
+        return;
+      }
+    }
+    this.showDeployModal = true;
+  }
+
+  // ── Remote Repository ────────────────────────────────────────
+
+  /**
+   * Create a remote repository on the selected Git provider.
+   * @SIDE_EFFECT POSTs to /git/config/{id}/repositories; prompts user for repo name.
+   */
+  async handleCreateRemoteRepo(): Promise<void> {
+    const config = resolveDefaultConfig(this.configs, this.selectedConfigId);
+    if (!config) {
+      addToast((this._t?.git as Record<string, unknown>)?.init_validation_error as string || 'Сначала выберите Git сервер', 'error');
+      return;
+    }
+    if (!this.selectedConfigId && config.id) this.selectedConfigId = String(config.id);
+    const suggestedName = buildSuggestedRepoName(this.dashboardTitle, this.dashboardId);
+    const inputName = prompt(`Repository name for ${config.provider}:`, suggestedName);
+    const repoName = String(inputName || '').trim();
+    if (!repoName) return;
+    this.clearGitError();
+    this.creatingRemoteRepo = true;
+    try {
+      const repo: CreateRepoResult = await gitService.createRemoteRepository(config.id, {
+        name: repoName,
+        private: true,
+        description: `Superset dashboard ${this.dashboardId}: ${this.dashboardTitle || repoName}`,
+        auto_init: true,
+        default_branch: 'main',
+      } satisfies CreateRepoPayload);
+      const url = repo?.clone_url || repo?.html_url || '';
+      if (!url) throw new Error('Remote repository created, but URL is empty');
+      this.remoteUrl = url;
+      addToast(`Repository created on ${config.provider}`, 'success');
+    } catch (e: unknown) {
+      if ((e as Record<string, unknown>)?.status === 409 && /already exists/i.test(String((e as Error)?.message || ''))) {
+        addToast((this._t?.git as Record<string, unknown>)?.repo_already_exists as string || 'Repository already exists. Enter its URL below and click Init.', 'warning', 0);
+      } else {
+        this._setGitError(e, 'warning');
+      }
+    } finally {
+      this.creatingRemoteRepo = false;
+    }
+  }
+
+  // ── Init Repository ──────────────────────────────────────────
+
+  /**
+   * Initialize local Git repository for the dashboard: clone remote.
+   * @SIDE_EFFECT POSTs to /git/repositories/{ref}/init.
+   */
+  async handleInit(): Promise<void> {
+    if (!this.selectedConfigId || !this.remoteUrl) {
+      addToast((this._t?.git as Record<string, unknown>)?.init_validation_error as string || 'Заполните все поля', 'error');
+      return;
+    }
+    if (!this.resolvedEnvId && !isNumericDashboardRef(this.dashboardId)) {
+      addToast('Environment must be selected to initialize Git for this dashboard.', 'error');
+      return;
+    }
+    this.clearGitError();
+    this.loading = true;
+    try {
+      await gitService.initRepository(this.dashboardId, this.selectedConfigId, this.remoteUrl, this.resolvedEnvId);
+      addToast((this._t?.git as Record<string, unknown>)?.init_success as string || 'Репозиторий инициализирован', 'success');
+      const provider = resolveDefaultConfig(this.configs, this.selectedConfigId)?.provider || '';
+      this.initialized = true;
+      this.repositoryProvider = provider;
+      await this.loadWorkspace();
+    } catch (e: unknown) {
+      this._setGitError(e);
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  // ── Merge Recovery ───────────────────────────────────────────
+
+  /**
+   * Parse error for unfinished merge context and open dialog.
+   * @POST Returns true and opens dialog if merge context found.
+   */
+  openUnfinishedMergeDialogFromError(error: unknown): boolean {
+    const context = extractUnfinishedMergeContext(error);
+    if (!context) return false;
+    this.unfinishedMergeContext = context;
+    this.showUnfinishedMergeDialog = true;
+    return true;
+  }
+
+  /**
+   * Load merge recovery state from backend for unfinished merge.
+   * @SIDE_EFFECT GETs /merge/status from backend.
+   */
+  async loadMergeRecoveryState(): Promise<void> {
+    this.clearGitError();
+    this.mergeRecoveryLoading = true;
+    try {
+      const status: MergeStatus = await gitService.getMergeStatus(this.dashboardId, this.resolvedEnvId);
+      if (!status?.has_unfinished_merge) {
+        this.closeUnfinishedMergeDialog();
+        return;
+      }
+      this.unfinishedMergeContext = {
+        ...(this.unfinishedMergeContext || {}),
+        message: this.unfinishedMergeContext?.message || ((this._t?.git as Record<string, unknown>)?.unfinished_merge as Record<string, unknown>)?.default_message as string || '',
+        repositoryPath: String(status.repository_path || this.unfinishedMergeContext?.repositoryPath || ''),
+        gitDir: String(status.git_dir || this.unfinishedMergeContext?.gitDir || ''),
+        currentBranch: String(status.current_branch || this.unfinishedMergeContext?.currentBranch || ''),
+        mergeHead: String(status.merge_head || this.unfinishedMergeContext?.mergeHead || ''),
+        mergeMessagePreview: String(status.merge_message_preview || ''),
+        nextSteps: Array.isArray(this.unfinishedMergeContext?.nextSteps) ? this.unfinishedMergeContext.nextSteps : [],
+        commands: Array.isArray(this.unfinishedMergeContext?.commands) ? this.unfinishedMergeContext.commands : [],
+        conflictsCount: Number(status.conflicts_count || 0),
+      };
+    } catch (e: unknown) {
+      this._setGitError(e);
+    } finally {
+      this.mergeRecoveryLoading = false;
+    }
+  }
+
+  /**
+   * Close unfinished merge dialog and reset merge state.
+   */
+  closeUnfinishedMergeDialog(): void {
+    this.showUnfinishedMergeDialog = false;
+    this.unfinishedMergeContext = null;
+    this.mergeConflicts = [];
+    this.showConflictResolver = false;
+  }
+
+  /**
+   * Load merge conflicts and open conflict resolver UI.
+   * @SIDE_EFFECT GETs /merge/conflicts from backend.
+   */
+  async handleOpenConflictResolver(): Promise<void> {
+    this.clearGitError();
+    this.mergeRecoveryLoading = true;
+    try {
+      const mc: MergeConflict[] = await gitService.getMergeConflicts(this.dashboardId, this.resolvedEnvId);
+      if (!Array.isArray(mc) || mc.length === 0) {
+        addToast(((this._t?.git as Record<string, unknown>)?.unfinished_merge as Record<string, unknown>)?.no_conflicts as string || 'No unresolved conflicts were found', 'info');
+        return;
+      }
+      this.mergeConflicts = mc;
+      this.showConflictResolver = true;
+    } catch (e: unknown) {
+      this._setGitError(e);
+    } finally {
+      this.mergeRecoveryLoading = false;
+    }
+  }
+
+  /**
+   * Apply conflict resolutions and stage resolved files.
+   * @SIDE_EFFECT POSTs resolutions to /merge/resolve.
+   */
+  async handleResolveConflicts(event: CustomEvent): Promise<void> {
+    const detail = event?.detail || {};
+    const resolutions: Array<{ file_path: string; resolution: unknown }> = Object.entries(detail).map(([fp, r]) => ({ file_path: fp, resolution: r }));
+    if (!resolutions.length) {
+      addToast(((this._t?.git as Record<string, unknown>)?.unfinished_merge as Record<string, unknown>)?.resolve_empty as string || 'No conflict resolutions selected', 'warning');
+      return;
+    }
+    this.clearGitError();
+    this.mergeResolveInProgress = true;
+    try {
+      await gitService.resolveMergeConflicts(this.dashboardId, resolutions, this.resolvedEnvId);
+      addToast(((this._t?.git as Record<string, unknown>)?.unfinished_merge as Record<string, unknown>)?.resolve_success as string || 'Conflicts were resolved and staged', 'success');
+      this.showConflictResolver = false;
+      await this.loadMergeRecoveryState();
+      await this.loadWorkspace();
+    } catch (e: unknown) {
+      this._setGitError(e);
+    } finally {
+      this.mergeResolveInProgress = false;
+    }
+  }
+
+  /**
+   * Abort current unfinished merge.
+   * @SIDE_EFFECT POSTs to /merge/abort.
+   */
+  async handleAbortUnfinishedMerge(): Promise<void> {
+    this.clearGitError();
+    this.mergeAbortInProgress = true;
+    try {
+      await gitService.abortMerge(this.dashboardId, this.resolvedEnvId);
+      addToast(((this._t?.git as Record<string, unknown>)?.unfinished_merge as Record<string, unknown>)?.abort_success as string || 'Merge was aborted', 'success');
+      this.closeUnfinishedMergeDialog();
+      await this.loadWorkspace();
+    } catch (e: unknown) {
+      this._setGitError(e);
+    } finally {
+      this.mergeAbortInProgress = false;
+    }
+  }
+
+  /**
+   * Finalize unfinished merge by creating merge commit.
+   * @SIDE_EFFECT POSTs to /merge/continue.
+   */
+  async handleContinueUnfinishedMerge(): Promise<void> {
+    this.clearGitError();
+    this.mergeContinueInProgress = true;
+    try {
+      await gitService.continueMerge(this.dashboardId, '', this.resolvedEnvId);
+      addToast(((this._t?.git as Record<string, unknown>)?.unfinished_merge as Record<string, unknown>)?.continue_success as string || 'Merge commit created successfully', 'success');
+      this.closeUnfinishedMergeDialog();
+      await this.loadWorkspace();
+    } catch (e: unknown) {
+      this._setGitError(e);
+      await this.loadMergeRecoveryState();
+    } finally {
+      this.mergeContinueInProgress = false;
+    }
+  }
+
+  /**
+   * Get shell commands text for manual merge recovery.
+   */
+  getUnfinishedMergeCommandsText(): string {
+    if (!this.unfinishedMergeContext?.commands?.length) return '';
+    return this.unfinishedMergeContext.commands.join('\n');
+  }
+
+  /**
+   * Copy merge recovery commands to clipboard.
+   */
+  async handleCopyUnfinishedMergeCommands(): Promise<void> {
+    const text = this.getUnfinishedMergeCommandsText();
+    if (!text) {
+      addToast(((this._t?.git as Record<string, unknown>)?.unfinished_merge as Record<string, unknown>)?.copy_empty as string || 'Команды для копирования отсутствуют', 'warning');
+      return;
+    }
+    this.copyingUnfinishedMergeCommands = true;
+    try {
+      await navigator.clipboard.writeText(text);
+      addToast(((this._t?.git as Record<string, unknown>)?.unfinished_merge as Record<string, unknown>)?.copy_success as string || 'Команды скопированы в буфер обмена', 'success');
+    } catch (_e: unknown) {
+      addToast(((this._t?.git as Record<string, unknown>)?.unfinished_merge as Record<string, unknown>)?.copy_failed as string || 'Не удалось скопировать команды', 'error');
+    } finally {
+      this.copyingUnfinishedMergeCommands = false;
+    }
+  }
+}
+// #endregion GitManagerModel
diff --git a/frontend/src/lib/models/GitStatusModel.svelte.ts b/frontend/src/lib/models/GitStatusModel.svelte.ts
new file mode 100644
index 000000000..0599a46d0
--- /dev/null
+++ b/frontend/src/lib/models/GitStatusModel.svelte.ts
@@ -0,0 +1,362 @@
+// frontend/src/lib/models/GitStatusModel.svelte.ts
+// #region GitStatusModel [C:4] [TYPE Model] [SEMANTICS git,status,dashboard,sync,screen-model]
+// @BRIEF State model for a dashboard's git repository status and sync operations.
+// @INVARIANT Sync/pull/push operations are mutually exclusive — only one runs at a time.
+// @ACTION syncRepository() — sync dashboard state to Git (returns true on success)
+// @ACTION pullRepository() — pull latest changes from remote
+// @ACTION pushRepository() — push local commits to remote
+// @ACTION loadStatus() — fetch current git status
+// @ACTION loadDiffPreview() — fetch staged + unstaged diff
+// @ACTION loadHistory() — fetch commit history
+// @RELATION DEPENDS_ON -> [EXT:frontend:gitService]
+
+import { gitService } from '../../services/gitService.js';
+import { addToast } from '$lib/toasts.js';
+import { t as tStore } from '$lib/i18n';
+import { get } from 'svelte/store';
+
+// ── Types ─────────────────────────────────────────────────────
+
+interface GitStatusPayload {
+  sync_state?: string;
+  current_branch?: string | null;
+  has_repo?: boolean;
+  modified_files?: string[];
+  staged_files?: string[];
+  untracked_files?: string[];
+  ahead_count?: number;
+  behind_count?: number;
+  [key: string]: unknown;
+}
+
+interface MetaInfo {
+  dotClass: string;
+  pillClass: string;
+  label: string;
+}
+
+interface CommitEntry {
+  id: string;
+  message: string;
+  [key: string]: unknown;
+}
+
+/** short alias for get(tStore) */
+function tt(): Record<string, unknown> {
+  return get(tStore);
+}
+
+export class GitStatusModel {
+  // ── Identity ───────────────────────────────────────────────
+  /** Dashboard slug or reference used for git API calls. */
+  dashboardId: string = $state('');
+  /** Environment ID for scoped git operations. */
+  envId: string | null = $state(null);
+
+  // ── Git Status ─────────────────────────────────────────────
+  /** Raw git status payload from the API. */
+  gitStatus: GitStatusPayload | null = $state(null);
+  /** True while fetching git status. */
+  statusLoading: boolean = $state(false);
+  /** Error message from last status fetch, or null. */
+  statusError: string | null = $state(null);
+
+  // ── Git Diff Preview ───────────────────────────────────────
+  /** Concatenated staged + unstaged diff string. */
+  diffPreview: string = $state('');
+  /** True while loading diff preview. */
+  diffLoading: boolean = $state(false);
+
+  // ── Sync Operations ────────────────────────────────────────
+  /** True while a git sync operation is in progress. */
+  syncing: boolean = $state(false);
+  /** True while a git pull is in progress. */
+  pulling: boolean = $state(false);
+  /** True while a git push is in progress. */
+  pushing: boolean = $state(false);
+
+  // ── Branch ─────────────────────────────────────────────────
+  /** Current active branch name. */
+  currentBranch: string = $state('main');
+
+  // ── Commit History ─────────────────────────────────────────
+  /** Array of commit objects from getHistory(). */
+  gitHistory: CommitEntry[] = $state([]);
+  /** True while loading commit history. */
+  historyLoading: boolean = $state(false);
+
+  // ── Derived State ──────────────────────────────────────────
+
+  /** True when the dashboard has an initialized git repository. */
+  hasGitRepo: boolean = $derived.by(() => {
+    if (!this.gitStatus) return false;
+    if (this.gitStatus.has_repo === false) return false;
+    return this.gitStatus.sync_state !== 'NO_REPO' || Boolean(this.gitStatus.current_branch);
+  });
+
+  /**
+   * Resolved sync state label.
+   * One of: NO_REPO, SYNCED, CHANGES, AHEAD_REMOTE, BEHIND_REMOTE, DIVERGED.
+   */
+  syncState: string = $derived.by(() => {
+    if (!this.gitStatus || this.gitStatus.has_repo === false) return 'NO_REPO';
+    const explicitState = String(this.gitStatus.sync_state || '').toUpperCase();
+    const changedCount =
+      (this.gitStatus?.modified_files?.length || 0) +
+      (this.gitStatus?.staged_files?.length || 0) +
+      (this.gitStatus?.untracked_files?.length || 0);
+    const ahead = Number(this.gitStatus?.ahead_count || 0);
+    const behind = Number(this.gitStatus?.behind_count || 0);
+    if (explicitState && explicitState !== 'UNKNOWN' && explicitState !== 'NO_REPO') {
+      return explicitState;
+    }
+    if (changedCount > 0) return 'CHANGES';
+    if (ahead > 0 && behind > 0) return 'DIVERGED';
+    if (ahead > 0) return 'AHEAD_REMOTE';
+    if (behind > 0) return 'BEHIND_REMOTE';
+    if (this.gitStatus?.current_branch) return 'SYNCED';
+    return 'NO_REPO';
+  });
+
+  /** All changed files (staged + modified + untracked), deduplicated. */
+  allChangedFilesList: string[] = $derived.by(() => {
+    if (!this.gitStatus) return [];
+    const staged = this.gitStatus.staged_files || [];
+    const modified = this.gitStatus.modified_files || [];
+    const untracked = this.gitStatus.untracked_files || [];
+    return [...staged, ...modified, ...untracked].filter(
+      (file: string, idx: number, arr: string[]) => arr.indexOf(file) === idx,
+    );
+  });
+
+  /** Number of changed files matching chart paths (/charts/ or charts/). */
+  changedChartsCount: number = $derived.by(() => {
+    return this.allChangedFilesList.filter(
+      (f: string) => f.includes('/charts/') || f.includes('charts/'),
+    ).length;
+  });
+
+  /** Number of changed files matching dataset paths (/datasets/ or datasets/). */
+  changedDatasetsCount: number = $derived.by(() => {
+    return this.allChangedFilesList.filter(
+      (f: string) => f.includes('/datasets/') || f.includes('datasets/'),
+    ).length;
+  });
+
+  /** True when there are any changes to commit. */
+  hasChangesToCommit: boolean = $derived.by(() => this.allChangedFilesList.length > 0);
+
+  /** Display metadata (dotClass, pillClass, label) for the current sync state. */
+  meta: MetaInfo = $derived.by(() => {
+    const syncState = this.syncState;
+    const _t = tt();
+    if (syncState === 'SYNCED') {
+      return {
+        dotClass: 'bg-emerald-500',
+        pillClass: 'bg-emerald-100 text-emerald-800 border-emerald-200',
+        label: (_t?.git as Record<string, Record<string, string>>)?.repo_status?.synced || 'Synced',
+      };
+    }
+    if (syncState === 'CHANGES') {
+      return {
+        dotClass: 'bg-amber-500',
+        pillClass: 'bg-amber-100 text-amber-800 border-amber-200',
+        label: (_t?.git as Record<string, Record<string, string>>)?.repo_status?.changes || 'Modified',
+      };
+    }
+    if (syncState === 'AHEAD_REMOTE') {
+      return {
+        dotClass: 'bg-blue-500',
+        pillClass: 'bg-blue-100 text-blue-800 border-blue-200',
+        label: (_t?.git as Record<string, Record<string, string>>)?.repo_status?.ahead_remote || 'Ahead',
+      };
+    }
+    if (syncState === 'BEHIND_REMOTE') {
+      return {
+        dotClass: 'bg-indigo-500',
+        pillClass: 'bg-indigo-100 text-indigo-800 border-indigo-200',
+        label: (_t?.git as Record<string, Record<string, string>>)?.repo_status?.behind_remote || 'Behind',
+      };
+    }
+    if (syncState === 'DIVERGED') {
+      return {
+        dotClass: 'bg-rose-500',
+        pillClass: 'bg-rose-100 text-rose-800 border-rose-200',
+        label: (_t?.git as Record<string, Record<string, string>>)?.repo_status?.diverged || 'Diverged',
+      };
+    }
+    return {
+      dotClass: 'bg-slate-400',
+      pillClass: 'bg-slate-100 text-slate-700 border-slate-200',
+      label: (_t?.git as Record<string, Record<string, string>>)?.repo_status?.no_repo || 'Uninitialized',
+    };
+  });
+
+  constructor() {}
+
+  // ── Initialization ─────────────────────────────────────────
+
+  /**
+   * Set dashboard reference and envId for git operations.
+   */
+  initialize(dashboardId: string, envId: string | null = null): void {
+    this.dashboardId = dashboardId;
+    this.envId = envId;
+  }
+
+  // ── Status ─────────────────────────────────────────────────
+
+  /**
+   * Fetch current git status for the dashboard.
+   * @SIDE_EFFECT Sets statusLoading, gitStatus, statusError, currentBranch.
+   */
+  async loadStatus(): Promise<void> {
+    if (!this.dashboardId) return;
+    this.statusLoading = true;
+    this.statusError = null;
+    this.diffPreview = '';
+    try {
+      const status: GitStatusPayload = await gitService.getStatus(this.dashboardId, this.envId || null);
+      this.gitStatus = status;
+      if (status?.current_branch) {
+        this.currentBranch = status.current_branch;
+      }
+    } catch (err: unknown) {
+      this.statusError = err instanceof Error ? err.message : 'Failed to load Git status';
+      this.gitStatus = {
+        sync_state: 'NO_REPO',
+        current_branch: null,
+        has_repo: false,
+        modified_files: [],
+        staged_files: [],
+        untracked_files: [],
+        ahead_count: 0,
+        behind_count: 0,
+      };
+    } finally {
+      this.statusLoading = false;
+    }
+  }
+
+  // ── Diff Preview ───────────────────────────────────────────
+
+  /**
+   * Load staged and unstaged diff preview.
+   * @SIDE_EFFECT Sets diffPreview, diffLoading; shows toast when no changes.
+   */
+  async loadDiffPreview(): Promise<void> {
+    if (!this.hasGitRepo) return;
+    this.diffLoading = true;
+    try {
+      const staged: string = await gitService.getDiff(this.dashboardId, null, true, this.envId || null);
+      const unstaged: string = await gitService.getDiff(this.dashboardId, null, false, this.envId || null);
+      this.diffPreview = [staged, unstaged].filter(Boolean).join('\n\n');
+      if (!this.diffPreview) {
+        addToast((tt().git as Record<string, string>)?.no_changes || 'No changes detected', 'info');
+      }
+    } catch (err: unknown) {
+      addToast(err instanceof Error ? err.message : 'Failed to load diff', 'error');
+    } finally {
+      this.diffLoading = false;
+    }
+  }
+
+  // ── Sync ───────────────────────────────────────────────────
+
+  /**
+   * Synchronize dashboard state with Git repository.
+   * @SIDE_EFFECT POSTs to /sync; shows toast; reloads status.
+   * @returns {Promise<boolean>} true on success, false on failure or guard skip.
+   */
+  async syncRepository(): Promise<boolean> {
+    if (!this.hasGitRepo) {
+      addToast((tt().git as Record<string, string>)?.not_linked || 'Repository is not initialized', 'error');
+      return false;
+    }
+    if (this.syncing) return false;
+    this.syncing = true;
+    try {
+      await gitService.sync(this.dashboardId, this.envId || null, this.envId || null);
+      addToast((tt().git as Record<string, string>)?.sync_success || 'Dashboard state synced to Git', 'success');
+      await this.loadStatus();
+      return true;
+    } catch (err: unknown) {
+      addToast(err instanceof Error ? err.message : 'Git sync failed', 'error');
+      return false;
+    } finally {
+      this.syncing = false;
+    }
+  }
+
+  // ── Pull ───────────────────────────────────────────────────
+
+  /**
+   * Pull latest changes from remote repository.
+   * @SIDE_EFFECT POSTs to /pull; shows toast; reloads status.
+   */
+  async pullRepository(): Promise<void> {
+    if (!this.hasGitRepo || this.pulling) return;
+    this.pulling = true;
+    try {
+      await gitService.pull(this.dashboardId, this.envId || null);
+      addToast((tt().git as Record<string, string>)?.pull_success || 'Changes pulled from remote', 'success');
+      await this.loadStatus();
+    } catch (err: unknown) {
+      addToast(err instanceof Error ? err.message : 'Git pull failed', 'error');
+    } finally {
+      this.pulling = false;
+    }
+  }
+
+  // ── Push ───────────────────────────────────────────────────
+
+  /**
+   * Push local commits to remote repository.
+   * @SIDE_EFFECT POSTs to /push; shows toast; reloads status.
+   */
+  async pushRepository(): Promise<void> {
+    if (!this.hasGitRepo || this.pushing) return;
+    this.pushing = true;
+    try {
+      await gitService.push(this.dashboardId, this.envId || null);
+      addToast((tt().git as Record<string, string>)?.push_success || 'Changes pushed to remote', 'success');
+      await this.loadStatus();
+    } catch (err: unknown) {
+      addToast(err instanceof Error ? err.message : 'Git push failed', 'error');
+    } finally {
+      this.pushing = false;
+    }
+  }
+
+  // ── History ────────────────────────────────────────────────
+
+  /**
+   * Fetch commit history.
+   * @SIDE_EFFECT Sets gitHistory, historyLoading.
+   */
+  async loadHistory(limit: number = 50): Promise<void> {
+    if (!this.dashboardId) return;
+    this.historyLoading = true;
+    try {
+      this.gitHistory = await gitService.getHistory(this.dashboardId, limit, this.envId || null);
+    } catch (err: unknown) {
+      this.gitHistory = [];
+      addToast(err instanceof Error ? err.message : 'Failed to load history', 'error');
+    } finally {
+      this.historyLoading = false;
+    }
+  }
+
+  // ── Branch ─────────────────────────────────────────────────
+
+  /**
+   * Handle branch change from a BranchSelector event.
+   */
+  handleBranchChange(event: { detail?: { branch?: string } }): void {
+    const nextBranch = event?.detail?.branch;
+    if (!nextBranch) return;
+    this.currentBranch = nextBranch;
+    void this.loadStatus();
+  }
+}
+// #endregion GitStatusModel
diff --git a/frontend/src/lib/models/MappingsModel.svelte.ts b/frontend/src/lib/models/MappingsModel.svelte.ts
new file mode 100644
index 000000000..9920b1d3d
--- /dev/null
+++ b/frontend/src/lib/models/MappingsModel.svelte.ts
@@ -0,0 +1,201 @@
+// frontend/src/lib/models/MappingsModel.svelte.ts
+// #region MappingsModel [C:4] [TYPE Model] [SEMANTICS mapping,database,screen-model]
+// @BRIEF State model for the standalone database mappings page.
+// @REJECTED Inline $state + handler functions in migration/mappings/+page.svelte was rejected — the RSM pattern (semantics-svelte §IIIa) requires model-first architecture with L1 testability.
+// @INVARIANT Changing source environment resets target databases, mappings, suggestions, and targetEnvId.
+// @INVARIANT Changing target environment resets target databases, mappings, and suggestions.
+// @ACTION loadEnvironments() — loads environments, pre-fills source from active context
+// @ACTION selectSourceEnv(id) — selects source, resets dependent state
+// @ACTION selectTargetEnv(id) — selects target, resets mapped state
+// @ACTION fetchDatabases() — loads source/target databases, existing mappings, suggestions
+// @ACTION saveMapping(srcUuid, tgtUuid) — saves a mapping pair
+// @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";
+
+// ── Types ─────────────────────────────────────────────────────
+
+interface Environment {
+  id: string;
+  name: string;
+  [key: string]: unknown;
+}
+
+interface Database {
+  uuid: string;
+  database_name: string;
+  [key: string]: unknown;
+}
+
+interface Mapping {
+  id?: string | number;
+  source_db_uuid?: string;
+  target_db_uuid?: string;
+  source_db_name?: string;
+  target_db_name?: string;
+  [key: string]: unknown;
+}
+
+interface Suggestion {
+  source_db_uuid?: string;
+  target_db_uuid?: string;
+  confidence?: number;
+  [key: string]: unknown;
+}
+
+export class MappingsModel {
+  // ── Atoms (reactive state) ──────────────────────────────────────
+
+  /** Environments available for source/target selection. */
+  environments: Environment[] = $state([]);
+
+  /** Currently selected source environment ID. */
+  sourceEnvId: string = $state("");
+
+  /** Currently selected target environment ID. */
+  targetEnvId: string = $state("");
+
+  /** Databases from the source environment. */
+  sourceDatabases: Database[] = $state([]);
+
+  /** Databases from the target environment. */
+  targetDatabases: Database[] = $state([]);
+
+  /** Saved mapping pairs between source and target databases. */
+  mappings: Mapping[] = $state([]);
+
+  /** AI-suggested mapping pairs. */
+  suggestions: Suggestion[] = $state([]);
+
+  /** True while environments are being fetched on mount. */
+  loading: boolean = $state(true);
+
+  /** True while databases/mappings/suggestions are being fetched. */
+  fetchingDbs: boolean = $state(false);
+
+  /** Error message from last failed API call. */
+  error: string = $state("");
+
+  /** Success confirmation message (e.g. after saving a mapping). */
+  success: string = $state("");
+
+  // ── Actions ─────────────────────────────────────────────────────
+
+  /**
+   * Load environments list. Pre-fills source from active context.
+   * @POST loading=false and environments populated on success, or error set on failure.
+   */
+  async loadEnvironments(): Promise<void> {
+    this.loading = true;
+    this.error = "";
+    this.success = "";
+    try {
+      this.environments = await api.getEnvironmentsList();
+      const state = get(environmentContextStore);
+      const activeEnvId = state?.selectedEnvId;
+      if (activeEnvId && this.environments.some((env: Environment) => env.id === activeEnvId)) {
+        this.sourceEnvId = activeEnvId;
+      }
+    } catch (e: unknown) {
+      this.error = e instanceof Error ? e.message : "Failed to load environments";
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  /**
+   * Select source environment. Resets all dependent state.
+   * @INVARIANT Resets target env ID, sourceDatabases, targetDatabases, mappings, suggestions.
+   */
+  selectSourceEnv(id: string): void {
+    if (id === this.sourceEnvId) return;
+    this.sourceEnvId = id;
+    this.targetEnvId = "";
+    this.sourceDatabases = [];
+    this.targetDatabases = [];
+    this.mappings = [];
+    this.suggestions = [];
+    this.error = "";
+    this.success = "";
+  }
+
+  /**
+   * Select target environment. Resets mapped database state.
+   * @INVARIANT Resets targetDatabases, mappings, suggestions.
+   */
+  selectTargetEnv(id: string): void {
+    if (id === this.targetEnvId) return;
+    this.targetEnvId = id;
+    this.targetDatabases = [];
+    this.mappings = [];
+    this.suggestions = [];
+    this.error = "";
+    this.success = "";
+  }
+
+  /**
+   * Fetch databases, mappings, and AI suggestions for current env pair.
+   * @PRE sourceEnvId and targetEnvId are both non-empty.
+   * @POST fetchingDbs=false and sourceDatabases/targetDatabases/mappings/suggestions updated or error set.
+   */
+  async fetchDatabases(): Promise<void> {
+    if (!this.sourceEnvId || !this.targetEnvId) return;
+    this.fetchingDbs = true;
+    this.error = "";
+    this.success = "";
+    try {
+      const [src, tgt, maps, sugs] = await Promise.all([
+        api.requestApi(`/environments/${this.sourceEnvId}/databases`),
+        api.requestApi(`/environments/${this.targetEnvId}/databases`),
+        api.requestApi(
+          `/mappings?source_env_id=${this.sourceEnvId}&target_env_id=${this.targetEnvId}`,
+        ),
+        api.postApi("/mappings/suggest", {
+          source_env_id: this.sourceEnvId,
+          target_env_id: this.targetEnvId,
+        }),
+      ]);
+      this.sourceDatabases = src;
+      this.targetDatabases = tgt;
+      this.mappings = maps;
+      this.suggestions = sugs;
+    } catch (e: unknown) {
+      this.error = e instanceof Error ? e.message : "Failed to fetch databases";
+    } finally {
+      this.fetchingDbs = false;
+    }
+  }
+
+  /**
+   * Save a database mapping between source and target.
+   * @INVARIANT Replaces existing mapping for the same source database UUID.
+   * @POST Mapping persisted; local mappings array updated; success or error feedback set.
+   */
+  async saveMapping(sourceUuid: string, targetUuid: string): Promise<void> {
+    const sDb = this.sourceDatabases.find((d: Database) => d.uuid === sourceUuid);
+    const tDb = this.targetDatabases.find((d: Database) => d.uuid === targetUuid);
+    if (!sDb || !tDb) return;
+    try {
+      const savedMapping = await api.postApi("/mappings", {
+        source_env_id: this.sourceEnvId,
+        target_env_id: this.targetEnvId,
+        source_db_uuid: sourceUuid,
+        target_db_uuid: targetUuid,
+        source_db_name: sDb.database_name,
+        target_db_name: tDb.database_name,
+      });
+      this.mappings = [
+        ...this.mappings.filter((m: Mapping) => m.source_db_uuid !== sourceUuid),
+        savedMapping,
+      ];
+      this.success = "Mapping saved successfully";
+      this.error = "";
+    } catch (e: unknown) {
+      this.error = e instanceof Error ? e.message : "Failed to save mapping";
+      this.success = "";
+    }
+  }
+}
+// #endregion MappingsModel
diff --git a/frontend/src/lib/models/MigrationModel.svelte.ts b/frontend/src/lib/models/MigrationModel.svelte.ts
new file mode 100644
index 000000000..34ad6542a
--- /dev/null
+++ b/frontend/src/lib/models/MigrationModel.svelte.ts
@@ -0,0 +1,472 @@
+// frontend/src/lib/models/MigrationModel.svelte.ts
+// #region MigrationModel [C:4] [TYPE Model] [SEMANTICS migration,dashboard,dry-run,environment,screen-model]
+// @BRIEF State model for the migration screen — declares atoms, invariants, and all actions.
+// @REJECTED Inline $state + handler functions in MigrationPage/+page.svelte was rejected because it scattered business logic across event handlers, made testing impossible without DOM render, and violated the RSM pattern established in semantics-svelte §IIIa.
+// @INVARIANT Changing source environment resets dashboard selection to empty.
+// @INVARIANT Changing source environment resets databases, mappings, and suggestions.
+// @INVARIANT Changing source environment clears dry-run result.
+// @INVARIANT Migration execution is blocked unless source≠target, distinct, and ≥1 dashboard selected.
+// @INVARIANT Dry-run must complete (dryRunResult != null) before advancing to execution step.
+// @INVARIANT Password prompt only appears when selectedTask.status === "AWAITING_INPUT" with type "database_password".
+// @STATE idle       — Initial state, environments loading.
+// @STATE ready      — Environments loaded, awaiting user configuration.
+// @STATE loading    — Fetching dashboards, databases, or dry-run in progress.
+// @STATE review     — Dry-run completed, awaiting user decision.
+// @STATE executing  — Migration task submitted, task runner active.
+// @STATE error      — API call failed, error message available.
+// @ACTION loadEnvironments()             — Fetches environments, pre-fills source from active context.
+// @ACTION selectSourceEnv(envId)         — Sets source, triggers dashboard/database/mapping reset.
+// @ACTION selectTargetEnv(envId)         — Sets target environment.
+// @ACTION toggleDashboard(id)            — Toggles dashboard selection.
+// @ACTION setReplaceDb(bool)             — Toggles database replacement option.
+// @ACTION setFixCrossFilters(bool)       — Toggles cross-filter fixing.
+// @ACTION fetchDatabases()               — Loads source/target databases, existing mappings, and AI suggestions.
+// @ACTION saveMapping(sourceUuid, targetUuid) — Saves a database mapping pair.
+// @ACTION calculateDryRun()              — Sends dry-run request, stores result, advances to step 3.
+// @ACTION executeMigration()             — Validates preconditions, sends migration request, activates task view.
+// @ACTION resumeMigration(passwords)     — Resumes a paused migration task with passwords.
+// @ACTION goToStep(n)                    — Navigates wizard step, gated by step readiness.
+// @ACTION clearError()                   — Clears the error message.
+// @ACTION openLogViewer(task)            — Opens the log viewer modal for a task.
+// @ACTION closeLogViewer()               — Closes the log viewer modal.
+// @ACTION toggleTaskHistory()            — Toggles task history panel visibility.
+// @ATOM showMigrateModal                 — Visibility of migration modal (used by dashboards page).
+// @RELATION DEPENDS_ON -> [EXT:frontend:api]
+// @RELATION BINDS_TO -> [selectedTask]
+// @RELATION BINDS_TO -> [environmentContextStore]
+// @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 { resumeTask } from "../../services/taskService.js";
+import { t } from "$lib/i18n";
+
+// ── Types ─────────────────────────────────────────────────────
+
+type ScreenState = "idle" | "ready" | "loading" | "review" | "executing" | "error";
+
+interface Environment {
+  id: string;
+  name: string;
+  [key: string]: unknown;
+}
+
+interface Dashboard {
+  id: string;
+  [key: string]: unknown;
+}
+
+interface Database {
+  uuid: string;
+  database_name: string;
+  [key: string]: unknown;
+}
+
+interface Mapping {
+  id?: number;
+  source_db_uuid?: string;
+  target_db_uuid?: string;
+  source_db_name?: string;
+  target_db_name?: string;
+  [key: string]: unknown;
+}
+
+interface DryRunResult {
+  summary?: Record<string, unknown>;
+  risk?: { score: number; level: string; items: unknown[] };
+  selected_dashboard_titles?: string[];
+  [key: string]: unknown;
+}
+
+interface DashboardSelection {
+  selected_ids: string[];
+  source_env_id: string;
+  target_env_id: string;
+  replace_db_config: boolean;
+  fix_cross_filters: boolean;
+}
+
+interface LogViewerTask {
+  id: string;
+  status: string;
+  [key: string]: unknown;
+}
+
+interface PasswordRequest {
+  type: string;
+  databases?: string[];
+  error_message?: string;
+}
+
+interface ActiveTask {
+  id: string;
+  plugin_id?: string;
+  status: string;
+  logs?: unknown[];
+  params?: Record<string, unknown>;
+  input_request?: PasswordRequest;
+  [key: string]: unknown;
+}
+
+export class MigrationModel {
+  // ── Atoms (reactive state) ──────────────────────────────────────
+
+  // Wizard step
+  currentStep: number = $state(1);   // 1=environments, 2=dashboards, 3=review, 4=execute
+
+  // Environments
+  environments: Environment[] = $state([]);
+  sourceEnvId: string = $state("");
+  targetEnvId: string = $state("");
+
+  // Migration options
+  replaceDb: boolean = $state(false);
+  fixCrossFilters: boolean = $state(true);
+
+  // Dashboards
+  dashboards: Dashboard[] = $state([]);
+  selectedDashboardIds: string[] = $state([]);
+
+  // Database mappings
+  sourceDatabases: Database[] = $state([]);
+  targetDatabases: Database[] = $state([]);
+  mappings: Mapping[] = $state([]);
+  suggestions: Record<string, unknown>[] = $state([]);
+
+  // Loading & error
+  loading: boolean = $state(true);
+  error: string = $state("");
+  fetchingDbs: boolean = $state(false);
+  dryRunLoading: boolean = $state(false);
+
+  // Dry-run result
+  dryRunResult: DryRunResult | null = $state(null);
+
+  // Task history panel
+  showTaskHistory: boolean = $state(false);
+
+  // Log viewer modal
+  showLogViewer: boolean = $state(false);
+  logViewerTaskId: string | null = $state(null);
+  logViewerTaskStatus: string | null = $state(null);
+
+  // Migration modal visibility (used by dashboards page)
+  showMigrateModal: boolean = $state(false);
+
+  // Password prompt
+  showPasswordPrompt: boolean = $state(false);
+  passwordPromptDatabases: string[] = $state([]);
+  passwordPromptErrorMessage: string = $state("");
+
+  // Store refs (read-only reactive bindings)
+  selectedTaskStore = selectedTask;
+  envContextStore = environmentContextStore;
+
+  // ── Derived ─────────────────────────────────────────────────────
+
+  /** Whether each wizard step is ready to proceed. */
+  stepReady = $derived<Record<number, boolean>>({
+    1: this.sourceEnvId !== "" && this.targetEnvId !== "" && this.sourceEnvId !== this.targetEnvId,
+    2: this.selectedDashboardIds.length > 0,
+    3: true, // review is always ready if we got here
+  });
+
+  /** Human-readable screen state derived from atoms. */
+  screenState: ScreenState = $derived(
+    this.loading ? "idle"
+    : this.error ? "error"
+    : this.dryRunLoading || this.fetchingDbs ? "loading"
+    : this.dryRunResult ? "review"
+    : this.currentStep >= 4 ? "executing"
+    : "ready"
+  );
+
+  /** Whether environments are distinct and valid. */
+  envsReady: boolean = $derived(this.stepReady[1]);
+
+  /** Whether migration can be executed. */
+  canExecute: boolean = $derived(this.dryRunResult != null && this.stepReady[2]);
+
+  // ── Actions ─────────────────────────────────────────────────────
+
+  /** Load environments list. Pre-fills source from active context. */
+  async loadEnvironments(): Promise<void> {
+    this.loading = true;
+    this.error = "";
+    try {
+      this.environments = await api.getEnvironmentsList();
+      const activeEnvId = this.envContextStore.current?.selectedEnvId;
+      if (activeEnvId && this.environments.some((env: Environment) => env.id === activeEnvId)) {
+        this.sourceEnvId = activeEnvId;
+      }
+    } catch (e: unknown) {
+      this.error = e instanceof Error ? e.message : "Failed to load environments";
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  /**
+   * Select source environment. Triggers dashboard refetch.
+   * @INVARIANT Resets dashboard selection, databases, mappings, and dry-run result.
+   */
+  selectSourceEnv(envId: string): void {
+    if (envId === this.sourceEnvId) return;
+    this.sourceEnvId = envId;
+    // @INVARIANT: reset dependent selections
+    this.selectedDashboardIds = [];
+    this.dashboards = [];
+    this.sourceDatabases = [];
+    this.targetDatabases = [];
+    this.mappings = [];
+    this.suggestions = [];
+    this.dryRunResult = null;
+    if (envId) this._fetchDashboards(envId);
+  }
+
+  /** Select target environment. Resets dry-run result. */
+  selectTargetEnv(envId: string): void {
+    if (envId === this.targetEnvId) return;
+    this.targetEnvId = envId;
+    this.dryRunResult = null;
+  }
+
+  /** Toggle database replacement option. Resets databases when toggling on. */
+  setReplaceDb(val: boolean): void {
+    this.replaceDb = val;
+    if (!val) {
+      this.sourceDatabases = [];
+      this.targetDatabases = [];
+      this.mappings = [];
+      this.suggestions = [];
+    }
+    this.dryRunResult = null;
+  }
+
+  /** Toggle cross-filter fixing. */
+  setFixCrossFilters(val: boolean): void {
+    this.fixCrossFilters = val;
+    this.dryRunResult = null;
+  }
+
+  /** Toggle a dashboard in the selection set. */
+  toggleDashboard(id: string): void {
+    if (this.selectedDashboardIds.includes(id)) {
+      this.selectedDashboardIds = this.selectedDashboardIds.filter((i) => i !== id);
+    } else {
+      this.selectedDashboardIds = [...this.selectedDashboardIds, id];
+    }
+    this.dryRunResult = null;
+  }
+
+  /** Select all dashboards. */
+  selectAllDashboards(): void {
+    this.selectedDashboardIds = this.dashboards.map((d) => d.id);
+    this.dryRunResult = null;
+  }
+
+  /** Deselect all dashboards. */
+  deselectAllDashboards(): void {
+    this.selectedDashboardIds = [];
+    this.dryRunResult = null;
+  }
+
+  /** Fetch databases, mappings, and AI suggestions for current env pair. */
+  async fetchDatabases(): Promise<void> {
+    if (!this.sourceEnvId || !this.targetEnvId) return;
+    this.fetchingDbs = true;
+    this.error = "";
+    try {
+      const [src, tgt, maps, sugs] = await Promise.all([
+        api.requestApi(`/environments/${this.sourceEnvId}/databases`),
+        api.requestApi(`/environments/${this.targetEnvId}/databases`),
+        api.requestApi(`/mappings?source_env_id=${this.sourceEnvId}&target_env_id=${this.targetEnvId}`),
+        api.postApi("/mappings/suggest", {
+          source_env_id: this.sourceEnvId,
+          target_env_id: this.targetEnvId,
+        }),
+      ]);
+      this.sourceDatabases = src;
+      this.targetDatabases = tgt;
+      this.mappings = maps;
+      this.suggestions = sugs;
+    } catch (e: unknown) {
+      this.error = e instanceof Error ? e.message : "Failed to fetch databases";
+    } finally {
+      this.fetchingDbs = false;
+    }
+  }
+
+  /** Save a database mapping between source and target. */
+  async saveMapping(sourceUuid: string, targetUuid: string): Promise<void> {
+    const sDb = this.sourceDatabases.find((d: Database) => d.uuid === sourceUuid);
+    const tDb = this.targetDatabases.find((d: Database) => d.uuid === targetUuid);
+    if (!sDb || !tDb) return;
+    try {
+      const savedMapping = await api.postApi("/mappings", {
+        source_env_id: this.sourceEnvId,
+        target_env_id: this.targetEnvId,
+        source_db_uuid: sourceUuid,
+        target_db_uuid: targetUuid,
+        source_db_name: sDb.database_name,
+        target_db_name: tDb.database_name,
+      });
+      this.mappings = [
+        ...this.mappings.filter((m: Mapping) => m.source_db_uuid !== sourceUuid),
+        savedMapping,
+      ];
+    } catch (e: unknown) {
+      this.error = e instanceof Error ? e.message : "Failed to save mapping";
+    }
+  }
+
+  /** Run dry-run analysis. Sets dryRunResult and advances to step 3 on success. */
+  async calculateDryRun(): Promise<void> {
+    if (!this._validatePreconditions()) return;
+    this.error = "";
+    this.dryRunLoading = true;
+    try {
+      this.dryRunResult = await api.postApi("/migration/dry-run", this._buildSelection());
+      this.currentStep = 3;
+    } catch (e: unknown) {
+      this.error = e instanceof Error ? e.message : "Dry-run failed";
+      this.dryRunResult = null;
+    } finally {
+      this.dryRunLoading = false;
+    }
+  }
+
+  /** Execute migration. Submits task and activates task runner view. */
+  async executeMigration(endpoint: string = "/migration/execute"): Promise<void> {
+    if (!this._validatePreconditions()) return;
+    this.error = "";
+    try {
+      this.dryRunResult = null;
+      const result = await api.postApi(endpoint, this._buildSelection());
+      await new Promise((r) => setTimeout(r, 500));
+      try {
+        const task = await api.getTask(result.task_id);
+        this.selectedTaskStore.set(task);
+      } catch {
+        this.selectedTaskStore.set({
+          id: result.task_id,
+          plugin_id: "superset-migration",
+          status: "RUNNING",
+          logs: [],
+          params: {},
+        });
+      }
+    } catch (e: unknown) {
+      this.error = e instanceof Error ? e.message : "Migration execution failed";
+    }
+  }
+
+  /** Resume a paused migration task with database passwords. */
+  async resumeMigration(passwords: Record<string, string>): Promise<void> {
+    const task = this.selectedTaskStore.current;
+    if (!task) return;
+    try {
+      await resumeTask(task.id, passwords);
+      this.showPasswordPrompt = false;
+    } catch (e: unknown) {
+      this.passwordPromptErrorMessage = e instanceof Error ? e.message : (t.migration?.resume_failed || "Resume failed");
+    }
+  }
+
+  /** Navigate to a wizard step. Gated by step readiness. */
+  goToStep(step: number): void {
+    if (
+      step <= this.currentStep ||
+      (step === 2 && this.stepReady[1]) ||
+      (step === 3 && this.stepReady[1] && this.stepReady[2]) ||
+      (step === 4 && this.dryRunResult)
+    ) {
+      this.currentStep = step;
+    }
+  }
+
+  /** Clear error message. */
+  clearError(): void {
+    this.error = "";
+  }
+
+  /** Open log viewer for a task. */
+  openLogViewer(task: LogViewerTask): void {
+    this.logViewerTaskId = task.id;
+    this.logViewerTaskStatus = task.status;
+    this.showLogViewer = true;
+  }
+
+  /** Close log viewer. */
+  closeLogViewer(): void {
+    this.showLogViewer = false;
+    this.logViewerTaskId = null;
+    this.logViewerTaskStatus = null;
+  }
+
+  /** Toggle task history panel. */
+  toggleTaskHistory(): void {
+    this.showTaskHistory = !this.showTaskHistory;
+  }
+
+  /** Watch for password-prompt signals from active task. Call in an $effect. */
+  checkPasswordPrompt(): void {
+    const activeTask = this.selectedTaskStore.current;
+    if (
+      !activeTask ||
+      activeTask.status !== "AWAITING_INPUT" ||
+      !activeTask.input_request
+    ) {
+      return;
+    }
+    const req = activeTask.input_request;
+    if (req.type === "database_password") {
+      this.passwordPromptDatabases = req.databases || [];
+      this.passwordPromptErrorMessage = req.error_message || "";
+      this.showPasswordPrompt = true;
+    }
+  }
+
+  // ── Private ─────────────────────────────────────────────────────
+
+  /** Fetch dashboards for the given environment. Resets selection. */
+  async _fetchDashboards(envId: string): Promise<void> {
+    try {
+      this.dashboards = await api.requestApi(`/environments/${envId}/dashboards`);
+      this.selectedDashboardIds = [];   // @INVARIANT: reset on env change
+    } catch (e: unknown) {
+      this.error = e instanceof Error ? e.message : "Failed to fetch dashboards";
+      this.dashboards = [];
+    }
+  }
+
+  /** Build the DashboardSelection payload for API calls. */
+  _buildSelection(): DashboardSelection {
+    return {
+      selected_ids: this.selectedDashboardIds,
+      source_env_id: this.sourceEnvId,
+      target_env_id: this.targetEnvId,
+      replace_db_config: this.replaceDb,
+      fix_cross_filters: this.fixCrossFilters,
+    };
+  }
+
+  /** Validate preconditions for migration/dry-run. Returns false and sets error if invalid. */
+  _validatePreconditions(): boolean {
+    if (!this.sourceEnvId || !this.targetEnvId) {
+      this.error = t.migration?.select_both_envs || "Please select both source and target environments.";
+      return false;
+    }
+    if (this.sourceEnvId === this.targetEnvId) {
+      this.error = t.migration?.different_envs || "Source and target environments must be different.";
+      return false;
+    }
+    if (this.selectedDashboardIds.length === 0) {
+      this.error = t.migration?.select_dashboards || "Please select at least one dashboard to migrate.";
+      return false;
+    }
+    return true;
+  }
+}
+// #endregion MigrationModel
diff --git a/frontend/src/lib/models/MigrationSettingsModel.svelte.ts b/frontend/src/lib/models/MigrationSettingsModel.svelte.ts
new file mode 100644
index 000000000..b167270aa
--- /dev/null
+++ b/frontend/src/lib/models/MigrationSettingsModel.svelte.ts
@@ -0,0 +1,104 @@
+// frontend/src/lib/models/MigrationSettingsModel.svelte.ts
+// #region MigrationSettingsModel [C:4] [TYPE Model] [SEMANTICS settings,migration,sync,screen-model]
+// @BRIEF State model for migration sync settings — cron schedule, sync-now, loading/saving/syncing state.
+// @INVARIANT Settings are loaded before they can be saved or synced.
+// @INVARIANT Sync-now updates settings (re-fetches cron) on completion.
+// @ACTION loadSettings() — GET /migration/settings
+// @ACTION saveSettings(data) — PUT /migration/settings
+// @ACTION triggerSyncNow() — POST /migration/sync-now
+// @RELATION DEPENDS_ON -> [EXT:frontend:api]
+// @REJECTED Using inline $state + separate functions in MigrationSettings.svelte was rejected because it duplicated API logic, made testing harder, and violated the DRY model pattern established by MigrationModel and MappingsModel.
+import { api } from "$lib/api.js";
+
+// ── Types ─────────────────────────────────────────────────────
+
+interface SettingsPayload {
+  cron: string;
+}
+
+interface SyncResult {
+  synced_count: number;
+  failed_count: number;
+}
+
+export class MigrationSettingsModel {
+  // ── Atoms (reactive state) ──────────────────────────────────────
+
+  /** Current cron expression. */
+  cron: string = $state("0 2 * * *");
+
+  /** True while saving settings. */
+  saving: boolean = $state(false);
+
+  /** True while syncing. */
+  syncing: boolean = $state(false);
+
+  /** Error message from last failed API call. */
+  error: string = $state("");
+
+  /** Success confirmation message. */
+  success: string = $state("");
+
+  /** Incremented to trigger parent-side refresh after sync. */
+  refreshKey: number = $state(0);
+
+  // ── Actions ─────────────────────────────────────────────────────
+
+  /**
+   * Load migration settings from the API.
+   * @POST cron is updated from API response on success, or error is set on failure.
+   */
+  async loadSettings(): Promise<void> {
+    this.error = "";
+    try {
+      const settingsRes = await api.requestApi("/migration/settings");
+      this.cron = settingsRes.cron;
+    } catch (err: unknown) {
+      this.error = err instanceof Error ? err.message : "Failed to load migration settings";
+      console.error("[MigrationSettingsModel] Failed to load:", err);
+    }
+  }
+
+  /**
+   * Save migration settings (cron) to the API.
+   * @POST On success: success message is set. On failure: error is set.
+   */
+  async saveSettings(data: SettingsPayload): Promise<void> {
+    this.saving = true;
+    this.error = "";
+    this.success = "";
+    try {
+      await api.requestApi("/migration/settings", "PUT", data);
+      this.success = "Settings saved successfully";
+    } catch (err: unknown) {
+      this.error = err instanceof Error ? err.message : "Failed to save migration settings";
+    } finally {
+      this.saving = false;
+    }
+  }
+
+  /**
+   * Trigger an immediate sync via the API.
+   * @POST On success: refreshKey increments, settings reload, success message set.
+   *       On failure: error is set.
+   */
+  async triggerSyncNow(): Promise<void> {
+    this.syncing = true;
+    this.error = "";
+    this.success = "";
+    try {
+      const result: SyncResult = await api.postApi("/migration/sync-now", {});
+      this.success = `Synced ${result.synced_count} environment(s)${
+        result.failed_count > 0 ? `, ${result.failed_count} failed` : ""
+      }`;
+      this.refreshKey++;
+      await this.loadSettings();
+    } catch (err: unknown) {
+      this.error = err instanceof Error ? err.message : "Sync failed";
+      console.error("[MigrationSettingsModel] Sync failed:", err);
+    } finally {
+      this.syncing = false;
+    }
+  }
+}
+// #endregion MigrationSettingsModel
diff --git a/frontend/src/lib/models/__tests__/BranchModel.test.ts b/frontend/src/lib/models/__tests__/BranchModel.test.ts
new file mode 100644
index 000000000..b99da1cd8
--- /dev/null
+++ b/frontend/src/lib/models/__tests__/BranchModel.test.ts
@@ -0,0 +1,269 @@
+// frontend/src/lib/models/__tests__/BranchModel.test.ts
+// #region BranchModelTests [C:3] [TYPE Module] [SEMANTICS test,model,branch,checkout,create]
+// @BRIEF L1 unit tests for BranchModel — no DOM render, mocks API + toast + i18n.
+// @RELATION BINDS_TO -> [BranchModel]
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+// ── Mocks ────────────────────────────────────────────────────────
+vi.mock("../../../services/gitService.js", () => ({
+  gitService: {
+    getBranches: vi.fn(),
+    checkoutBranch: vi.fn(),
+    createBranch: vi.fn(),
+  },
+}));
+
+vi.mock("$lib/toasts.js", () => ({
+  addToast: vi.fn(),
+}));
+
+vi.mock("$lib/i18n", () => ({
+  t: { subscribe: vi.fn() },
+  _: vi.fn(),
+}));
+
+vi.mock("svelte/store", () => ({
+  get: vi.fn(() => ({ git: {} })),
+}));
+
+import { BranchModel } from "../BranchModel.svelte.ts";
+import { gitService } from "../../../services/gitService.js";
+
+// ── Types ─────────────────────────────────────────────────────────
+
+interface BranchFixture {
+  name: string;
+  [key: string]: unknown;
+}
+
+interface CheckoutError {
+  message: string;
+  detail?: { message?: string; next_steps?: string[] };
+}
+
+// ── Helpers ──────────────────────────────────────────────────────
+
+/** Create a model with default values. */
+function createModel(overrides: Partial<{ dashboardId: string; envId: string | null; currentBranch: string; onChange: ((event: { branch: string }) => void) | null }> = {}): BranchModel {
+  return new BranchModel({
+    dashboardId: "test-dashboard",
+    envId: "env-123",
+    currentBranch: "main",
+    onChange: null,
+    ...overrides,
+  });
+}
+
+// ── Suite ────────────────────────────────────────────────────────
+
+describe("BranchModel — L1 invariants (no render)", () => {
+  let model: BranchModel;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    model = createModel();
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: loadBranches
+  // ═══════════════════════════════════════════════════════════════
+  describe("loadBranches", () => {
+    it("fetches branches via gitService.getBranches", async () => {
+      const branches: BranchFixture[] = [{ name: "main" }, { name: "develop" }];
+      vi.mocked(gitService.getBranches).mockResolvedValueOnce(branches);
+
+      await model.loadBranches("test-dashboard", "env-123");
+
+      expect(gitService.getBranches).toHaveBeenCalledWith("test-dashboard", "env-123");
+      expect(model.branches).toEqual(branches);
+      expect(model.loading).toBe(false);
+    });
+
+    it("uses default dashboardId when not passed", async () => {
+      vi.mocked(gitService.getBranches).mockResolvedValueOnce([]);
+
+      await model.loadBranches();
+
+      expect(gitService.getBranches).toHaveBeenCalledWith("test-dashboard", "env-123");
+    });
+
+    it("sets loading lifecycle", async () => {
+      vi.mocked(gitService.getBranches).mockImplementation(() => new Promise((r) => setTimeout(r, 10)));
+
+      const promise = model.loadBranches("test-dashboard", "env-123");
+      expect(model.loading).toBe(true);
+      await promise;
+      expect(model.loading).toBe(false);
+    });
+
+    it("sets error on API failure", async () => {
+      vi.mocked(gitService.getBranches).mockRejectedValueOnce(new Error("Failed to load"));
+
+      await model.loadBranches("test-dashboard", "env-123");
+
+      expect(model.branches).toEqual([]);
+      expect(model.loading).toBe(false);
+    });
+
+    it("sets empty branches and error on failure", async () => {
+      vi.mocked(gitService.getBranches).mockRejectedValueOnce(new Error("Network error"));
+
+      await model.loadBranches("test-dashboard", "env-123");
+
+      expect(model.branches).toEqual([]);
+      expect(model.loading).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: handleCheckout
+  // ═══════════════════════════════════════════════════════════════
+  describe("handleCheckout", () => {
+    it("calls gitService.checkoutBranch with correct args", async () => {
+      vi.mocked(gitService.checkoutBranch).mockResolvedValueOnce({});
+
+      await model.handleCheckout("test-dashboard", "develop", "env-123");
+
+      expect(gitService.checkoutBranch).toHaveBeenCalledWith("test-dashboard", "develop", "env-123");
+      expect(model.currentBranch).toBe("develop");
+      expect(model.checkingOut).toBe(false);
+    });
+
+    it("does nothing when branchName is empty", async () => {
+      await model.handleCheckout("test-dashboard", "", "env-123");
+
+      expect(gitService.checkoutBranch).not.toHaveBeenCalled();
+    });
+
+    it("fires onChange callback on success", async () => {
+      const onChange = vi.fn();
+      model.onChange = onChange;
+      vi.mocked(gitService.checkoutBranch).mockResolvedValueOnce({});
+
+      await model.handleCheckout("test-dashboard", "feature", "env-123");
+
+      expect(onChange).toHaveBeenCalledWith({ branch: "feature" });
+    });
+
+    it("sets branchError on failure", async () => {
+      const error: CheckoutError = {
+        message: "Checkout failed",
+        detail: { message: "Uncommitted changes", next_steps: ["Stash or commit"] },
+      };
+      vi.mocked(gitService.checkoutBranch).mockRejectedValueOnce(error);
+
+      await model.handleCheckout("test-dashboard", "develop", "env-123");
+
+      expect(model.branchError).not.toBeNull();
+      expect(model.branchError!.message).toBe("Uncommitted changes");
+      expect(model.branchError!.next_steps).toContain("Stash or commit");
+      expect(model.checkingOut).toBe(false);
+    });
+
+    it("uses default dashboardId and envId when not passed", async () => {
+      vi.mocked(gitService.checkoutBranch).mockResolvedValueOnce({});
+
+      await model.handleCheckout(undefined, "develop", undefined);
+
+      expect(gitService.checkoutBranch).toHaveBeenCalledWith("test-dashboard", "develop", "env-123");
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: handleCreate
+  // ═══════════════════════════════════════════════════════════════
+  describe("handleCreate", () => {
+    it("calls gitService.createBranch with correct args", async () => {
+      vi.mocked(gitService.createBranch).mockResolvedValueOnce({});
+      vi.mocked(gitService.getBranches).mockResolvedValueOnce([]);
+
+      await model.handleCreate("test-dashboard", "feature-x", "main", "env-123");
+
+      expect(gitService.createBranch).toHaveBeenCalledWith(
+        "test-dashboard",
+        "feature-x",
+        "main",
+        "env-123",
+      );
+      expect(model.creating).toBe(false);
+    });
+
+    it("reloads branches on success", async () => {
+      const updatedBranches: BranchFixture[] = [{ name: "main" }, { name: "feature-x" }];
+      vi.mocked(gitService.createBranch).mockResolvedValueOnce({});
+      vi.mocked(gitService.getBranches).mockResolvedValueOnce(updatedBranches);
+
+      await model.handleCreate("test-dashboard", "feature-x", "main", "env-123");
+
+      expect(gitService.getBranches).toHaveBeenCalledWith("test-dashboard", "env-123");
+      expect(model.branches).toEqual(updatedBranches);
+    });
+
+    it("resets create form on success", async () => {
+      model.showCreate = true;
+      model.newBranchName = "feature-x";
+      vi.mocked(gitService.createBranch).mockResolvedValueOnce({});
+      vi.mocked(gitService.getBranches).mockResolvedValueOnce([]);
+
+      await model.handleCreate("test-dashboard", "feature-x", "main", "env-123");
+
+      expect(model.showCreate).toBe(false);
+      expect(model.newBranchName).toBe("");
+    });
+
+    it("does nothing when name is empty", async () => {
+      await model.handleCreate("test-dashboard", "", "main", "env-123");
+
+      expect(gitService.createBranch).not.toHaveBeenCalled();
+    });
+
+    it("sets error on API failure", async () => {
+      vi.mocked(gitService.createBranch).mockRejectedValueOnce(new Error("Create failed"));
+
+      await model.handleCreate("test-dashboard", "feature-x", "main", "env-123");
+
+      expect(model.branchError).not.toBeNull();
+      expect(model.branchError!.message).toBe("Create failed");
+      expect(model.creating).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: toggleCreateForm
+  // ═══════════════════════════════════════════════════════════════
+  describe("toggleCreateForm", () => {
+    it("toggles showCreate from false to true", () => {
+      model.showCreate = false;
+      model.toggleCreateForm();
+      expect(model.showCreate).toBe(true);
+    });
+
+    it("toggles showCreate from true to false and clears newBranchName", () => {
+      model.showCreate = true;
+      model.newBranchName = "wip";
+      model.toggleCreateForm();
+      expect(model.showCreate).toBe(false);
+      expect(model.newBranchName).toBe("");
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: handleSelect
+  // ═══════════════════════════════════════════════════════════════
+  describe("handleSelect", () => {
+    it("calls handleCheckout with branch name from event", async () => {
+      vi.mocked(gitService.checkoutBranch).mockResolvedValueOnce({});
+
+      await model.handleSelect({ target: { value: "develop" } });
+
+      expect(gitService.checkoutBranch).toHaveBeenCalledWith("test-dashboard", "develop", "env-123");
+    });
+
+    it("does nothing when event has no value", async () => {
+      await model.handleSelect({ target: { value: "" } });
+
+      expect(gitService.checkoutBranch).not.toHaveBeenCalled();
+    });
+  });
+});
+// #endregion BranchModelTests
diff --git a/frontend/src/lib/models/__tests__/CommitModel.test.ts b/frontend/src/lib/models/__tests__/CommitModel.test.ts
new file mode 100644
index 000000000..18bb17a84
--- /dev/null
+++ b/frontend/src/lib/models/__tests__/CommitModel.test.ts
@@ -0,0 +1,330 @@
+// frontend/src/lib/models/__tests__/CommitModel.test.ts
+// #region CommitModelTests [C:3] [TYPE Module] [SEMANTICS test,model,commit]
+// @BRIEF L1 unit tests for CommitModel — no DOM render, mocks API + toast + i18n.
+// @RELATION BINDS_TO -> [CommitModel]
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+// ── Mocks ────────────────────────────────────────────────────────
+vi.mock("../../../services/gitService.js", () => ({
+  gitService: {
+    getStatus: vi.fn(),
+    getDiff: vi.fn(),
+    commit: vi.fn(),
+    push: vi.fn(),
+  },
+}));
+
+vi.mock("$lib/api.js", () => ({
+  api: {
+    postApi: vi.fn(),
+  },
+}));
+
+vi.mock("$lib/toasts.js", () => ({
+  addToast: vi.fn(),
+}));
+
+vi.mock("$lib/i18n", () => ({
+  t: { subscribe: vi.fn() },
+  _: vi.fn(),
+}));
+
+vi.mock("svelte/store", () => ({
+  get: vi.fn(() => ({ git: {} })),
+}));
+
+import { CommitModel } from "../CommitModel.svelte.ts";
+import { gitService } from "../../../services/gitService.js";
+import { api } from "$lib/api.js";
+
+// ── Types ─────────────────────────────────────────────────────────
+
+interface StatusFixture {
+  is_dirty: boolean;
+  current_branch: string;
+  staged_files: string[];
+  modified_files: string[];
+  untracked_files: string[];
+  [key: string]: unknown;
+}
+
+// ── Helpers ──────────────────────────────────────────────────────
+
+/** Create a model with default constructor values. */
+function createModel(overrides: Partial<{ dashboardId: string; envId: string | null; show: boolean }> = {}): CommitModel {
+  return new CommitModel({
+    dashboardId: "test-dashboard",
+    envId: "env-123",
+    show: true,
+    ...overrides,
+  });
+}
+
+/** Minimal git status payload. */
+function makeStatus(overrides: Partial<StatusFixture> = {}): StatusFixture {
+  return {
+    is_dirty: true,
+    current_branch: "main",
+    staged_files: ["file1.py"],
+    modified_files: [],
+    untracked_files: [],
+    ...overrides,
+  };
+}
+
+// ── Suite ────────────────────────────────────────────────────────
+
+describe("CommitModel — L1 invariants (no render)", () => {
+  let model: CommitModel;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    model = createModel();
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: loadStatus calls gitService
+  // ═══════════════════════════════════════════════════════════════
+  describe("loadStatus", () => {
+    it("fetches status and diff via gitService", async () => {
+      const status = makeStatus();
+      vi.mocked(gitService.getStatus).mockResolvedValueOnce(status);
+      vi.mocked(gitService.getDiff).mockResolvedValueOnce("staged diff content");
+      vi.mocked(gitService.getDiff).mockResolvedValueOnce("unstaged diff content");
+
+      await model.loadStatus();
+
+      expect(gitService.getStatus).toHaveBeenCalledWith("test-dashboard", "env-123");
+      expect(gitService.getDiff).toHaveBeenCalledWith("test-dashboard", null, true, "env-123");
+      expect(gitService.getDiff).toHaveBeenCalledWith("test-dashboard", null, false, "env-123");
+      expect(model.status).toEqual(status);
+      expect(model.loading).toBe(false);
+    });
+
+    it("combines staged and unstaged diff", async () => {
+      vi.mocked(gitService.getStatus).mockResolvedValueOnce(makeStatus());
+      vi.mocked(gitService.getDiff).mockResolvedValueOnce("staged content");
+      vi.mocked(gitService.getDiff).mockResolvedValueOnce("unstaged content");
+
+      await model.loadStatus();
+
+      expect(model.diff).toContain("STAGED CHANGES");
+      expect(model.diff).toContain("UNSTAGED CHANGES");
+      expect(model.diff).toContain("staged content");
+      expect(model.diff).toContain("unstaged content");
+    });
+
+    it("sets empty diff when there are no changes", async () => {
+      vi.mocked(gitService.getStatus).mockResolvedValueOnce(makeStatus());
+      vi.mocked(gitService.getDiff).mockResolvedValueOnce(null);
+      vi.mocked(gitService.getDiff).mockResolvedValueOnce(null);
+
+      await model.loadStatus();
+
+      expect(model.diff).toBe("");
+    });
+
+    it("sets error on API failure", async () => {
+      vi.mocked(gitService.getStatus).mockRejectedValueOnce(new Error("Network error"));
+
+      await model.loadStatus();
+
+      expect(model.status).toBeNull();
+      expect(model.diff).toBe("");
+      expect(model.loading).toBe(false);
+    });
+
+    it("does nothing when dashboardId is empty", async () => {
+      model.dashboardId = "";
+      await model.loadStatus();
+      expect(gitService.getStatus).not.toHaveBeenCalled();
+    });
+
+    it("does nothing when show is false", async () => {
+      model.show = false;
+      await model.loadStatus();
+      expect(gitService.getStatus).not.toHaveBeenCalled();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: loading lifecycle
+  // ═══════════════════════════════════════════════════════════════
+  describe("loading lifecycle", () => {
+    it("loadStatus sets loading true then false", async () => {
+      vi.mocked(gitService.getStatus).mockImplementation(() => new Promise((r) => setTimeout(r, 10)));
+      vi.mocked(gitService.getDiff).mockResolvedValueOnce("");
+      vi.mocked(gitService.getDiff).mockResolvedValueOnce("");
+
+      const promise = model.loadStatus();
+      expect(model.loading).toBe(true);
+      await promise;
+      expect(model.loading).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: handleGenerateMessage
+  // ═══════════════════════════════════════════════════════════════
+  describe("handleGenerateMessage", () => {
+    it("calls api.postApi and sets message", async () => {
+      vi.mocked(api.postApi).mockResolvedValueOnce({ message: "AI generated commit message" });
+
+      await model.handleGenerateMessage();
+
+      expect(api.postApi).toHaveBeenCalledWith(
+        expect.stringContaining("/git/repositories/test-dashboard/generate-message"),
+        undefined,
+        { suppressToast: true },
+      );
+      expect(model.message).toBe("AI generated commit message");
+      expect(model.generatingMessage).toBe(false);
+    });
+
+    it("sets error on API failure", async () => {
+      vi.mocked(api.postApi).mockRejectedValueOnce(new Error("Generation failed"));
+
+      await model.handleGenerateMessage();
+
+      expect(model.generatingMessage).toBe(false);
+    });
+
+    it("appends env_id when envId is set", async () => {
+      vi.mocked(api.postApi).mockResolvedValueOnce({ message: "msg" });
+
+      await model.handleGenerateMessage();
+
+      expect(api.postApi).toHaveBeenCalledWith(
+        expect.stringContaining("env_id=env-123"),
+        undefined,
+        { suppressToast: true },
+      );
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: committing lifecycle
+  // ═══════════════════════════════════════════════════════════════
+  describe("committing lifecycle", () => {
+    it("sets committing true then false", async () => {
+      model.message = "fix: test";
+      model.status = makeStatus();
+      vi.mocked(gitService.commit).mockImplementation(() => new Promise((r) => setTimeout(r, 10)));
+
+      const promise = model.handleCommit();
+      expect(model.committing).toBe(true);
+      await promise;
+      expect(model.committing).toBe(false);
+    });
+
+    it("resets committing on failure", async () => {
+      model.message = "fix: test";
+      model.status = makeStatus();
+      vi.mocked(gitService.commit).mockRejectedValueOnce(new Error("Commit rejected"));
+
+      await model.handleCommit();
+
+      expect(model.committing).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: handleCommit calls gitService.commit
+  // ═══════════════════════════════════════════════════════════════
+  describe("handleCommit — API calls", () => {
+    it("calls gitService.commit with correct args", async () => {
+      model.message = "fix: resolve issue";
+      model.status = makeStatus();
+      model.autoPushAfterCommit = false;
+      vi.mocked(gitService.commit).mockResolvedValueOnce({});
+
+      await model.handleCommit();
+
+      expect(gitService.commit).toHaveBeenCalledWith(
+        "test-dashboard",
+        "fix: resolve issue",
+        [],
+        "env-123",
+      );
+    });
+
+    it("calls push when autoPushAfterCommit is true", async () => {
+      model.message = "fix: auto-push";
+      model.status = makeStatus();
+      model.autoPushAfterCommit = true;
+      vi.mocked(gitService.commit).mockResolvedValueOnce({});
+      vi.mocked(gitService.push).mockResolvedValueOnce({});
+
+      await model.handleCommit();
+
+      expect(gitService.push).toHaveBeenCalledWith("test-dashboard", "env-123");
+    });
+
+    it("does not call push when autoPushAfterCommit is false", async () => {
+      model.message = "fix: no-push";
+      model.status = makeStatus();
+      model.autoPushAfterCommit = false;
+      vi.mocked(gitService.commit).mockResolvedValueOnce({});
+
+      await model.handleCommit();
+
+      expect(gitService.push).not.toHaveBeenCalled();
+    });
+
+    it("clears message and closes modal on success", async () => {
+      model.message = "fix: done";
+      model.status = makeStatus();
+      model.autoPushAfterCommit = false;
+      vi.mocked(gitService.commit).mockResolvedValueOnce({});
+
+      await model.handleCommit();
+
+      expect(model.message).toBe("");
+      expect(model.show).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: canCommit derived
+  // ═══════════════════════════════════════════════════════════════
+  describe("canCommit derived", () => {
+    it("is false when loading", () => {
+      model.loading = true;
+      model.message = "fix";
+      model.status = makeStatus();
+      expect(model.canCommit).toBe(false);
+    });
+
+    it("is false when committing", () => {
+      model.committing = true;
+      model.message = "fix";
+      model.status = makeStatus();
+      expect(model.canCommit).toBe(false);
+    });
+
+    it("is false when message is empty", () => {
+      model.message = "";
+      model.status = makeStatus();
+      expect(model.canCommit).toBe(false);
+    });
+
+    it("is false when status is null", () => {
+      model.message = "fix";
+      model.status = null;
+      expect(model.canCommit).toBe(false);
+    });
+
+    it("is false when there are no changes", () => {
+      model.message = "fix";
+      model.status = makeStatus({ is_dirty: false, staged_files: [] });
+      expect(model.canCommit).toBe(false);
+    });
+
+    it("is true when ready to commit", () => {
+      model.message = "fix: ready";
+      model.status = makeStatus();
+      expect(model.canCommit).toBe(true);
+    });
+  });
+});
+// #endregion CommitModelTests
diff --git a/frontend/src/lib/models/__tests__/DeploymentModel.test.ts b/frontend/src/lib/models/__tests__/DeploymentModel.test.ts
new file mode 100644
index 000000000..4ac890eba
--- /dev/null
+++ b/frontend/src/lib/models/__tests__/DeploymentModel.test.ts
@@ -0,0 +1,338 @@
+// frontend/src/lib/models/__tests__/DeploymentModel.test.ts
+// #region DeploymentModelTests [C:3] [TYPE Module] [SEMANTICS test,model,deployment]
+// @BRIEF L1 unit tests for DeploymentModel — no DOM render, mocks API + toast + i18n.
+// @RELATION BINDS_TO -> [DeploymentModel]
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+// ── Mocks ────────────────────────────────────────────────────────
+vi.mock("../../../services/gitService.js", () => ({
+  gitService: {
+    deploy: vi.fn(),
+  },
+}));
+
+vi.mock("$lib/api.js", () => ({
+  api: {
+    getEnvironmentsList: vi.fn(),
+  },
+}));
+
+vi.mock("$lib/toasts.js", () => ({
+  addToast: vi.fn(),
+}));
+
+vi.mock("$lib/i18n", () => ({
+  t: { subscribe: vi.fn() },
+  _: vi.fn(),
+}));
+
+vi.mock("svelte/store", () => ({
+  get: vi.fn(() => ({ git: {}, migration: {} })),
+}));
+
+import { DeploymentModel } from "../DeploymentModel.svelte.ts";
+import { gitService } from "../../../services/gitService.js";
+import { api } from "$lib/api.js";
+
+// ── Types ─────────────────────────────────────────────────────────
+
+interface EnvironmentFixture {
+  id: string;
+  name: string;
+  stage: string;
+  is_production: boolean;
+  superset_url: string;
+  [key: string]: unknown;
+}
+
+// ── Helpers ──────────────────────────────────────────────────────
+
+/** Create a model with default values. */
+function createModel(overrides: Partial<{ dashboardId: string; envId: string | null; show: boolean; preferredTargetStage: string }> = {}): DeploymentModel {
+  return new DeploymentModel({
+    dashboardId: "test-dashboard",
+    envId: "current-env-id",
+    show: true,
+    preferredTargetStage: "",
+    ...overrides,
+  });
+}
+
+/** Create a mock environment object. */
+function makeEnv(id: string, name: string, stage: string, overrides: Partial<EnvironmentFixture> = {}): EnvironmentFixture {
+  return {
+    id,
+    name,
+    stage,
+    is_production: stage === "PROD",
+    superset_url: `https://${name}.example.com`,
+    ...overrides,
+  };
+}
+
+// ── Suite ────────────────────────────────────────────────────────
+
+describe("DeploymentModel — L1 invariants (no render)", () => {
+  let model: DeploymentModel;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    model = createModel();
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: loadEnvironments
+  // ═══════════════════════════════════════════════════════════════
+  describe("loadEnvironments", () => {
+    it("fetches environments via api.getEnvironmentsList", async () => {
+      const envs = [makeEnv("env-1", "Dev", "DEV"), makeEnv("env-2", "Prod", "PROD")];
+      vi.mocked(api.getEnvironmentsList).mockResolvedValueOnce(envs);
+
+      await model.loadEnvironments();
+
+      expect(api.getEnvironmentsList).toHaveBeenCalledTimes(1);
+      expect(model.environments).toEqual(envs);
+      expect(model.loading).toBe(false);
+    });
+
+    it("selects first candidate when no preferred stage", async () => {
+      const envs = [
+        makeEnv("current-env-id", "Current", "DEV"),
+        makeEnv("target-1", "Target", "DEV"),
+        makeEnv("target-2", "Prod", "PROD"),
+      ];
+      vi.mocked(api.getEnvironmentsList).mockResolvedValueOnce(envs);
+
+      await model.loadEnvironments();
+
+      // "current-env-id" is filtered out, first remaining is "target-1"
+      expect(model.selectedEnv).toBe("target-1");
+    });
+
+    it("selects stage-matched candidate when preferred stage is set", async () => {
+      model.preferredTargetStage = "PROD";
+      const envs = [
+        makeEnv("current-env-id", "Current", "DEV"),
+        makeEnv("target-1", "Stage", "PREPROD"),
+        makeEnv("target-2", "Prod", "PROD"),
+      ];
+      vi.mocked(api.getEnvironmentsList).mockResolvedValueOnce(envs);
+
+      await model.loadEnvironments();
+
+      expect(model.selectedEnv).toBe("target-2");
+    });
+
+    it("falls back to first candidate when preferred stage has no match", async () => {
+      model.preferredTargetStage = "PROD";
+      const envs = [
+        makeEnv("current-env-id", "Current", "DEV"),
+        makeEnv("target-1", "Stage", "PREPROD"),
+      ];
+      vi.mocked(api.getEnvironmentsList).mockResolvedValueOnce(envs);
+
+      await model.loadEnvironments();
+
+      expect(model.selectedEnv).toBe("target-1");
+    });
+
+    it("sets error on API failure", async () => {
+      vi.mocked(api.getEnvironmentsList).mockRejectedValueOnce(new Error("Failed to load"));
+
+      await model.loadEnvironments();
+
+      expect(model.environments).toEqual([]);
+      expect(model.loading).toBe(false);
+    });
+
+    it("sets loading lifecycle", async () => {
+      vi.mocked(api.getEnvironmentsList).mockImplementation(() => new Promise((r) => setTimeout(r, 10)));
+
+      const promise = model.loadEnvironments();
+      expect(model.loading).toBe(true);
+      await promise;
+      expect(model.loading).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: Derived computations
+  // ═══════════════════════════════════════════════════════════════
+  describe("derived state", () => {
+    it("normalizedPreferredStage is uppercase", () => {
+      model.preferredTargetStage = "prod";
+      expect(model.normalizedPreferredStage).toBe("PROD");
+
+      model.preferredTargetStage = "Preprod";
+      expect(model.normalizedPreferredStage).toBe("PREPROD");
+
+      model.preferredTargetStage = "";
+      expect(model.normalizedPreferredStage).toBe("");
+    });
+
+    it("deploymentCandidates filters out current envId", () => {
+      model.envId = "env-1";
+      model.environments = [
+        makeEnv("env-1", "Current", "DEV"),
+        makeEnv("env-2", "Stage", "PREPROD"),
+      ];
+
+      expect(model.deploymentCandidates).toHaveLength(1);
+      expect(model.deploymentCandidates[0].id).toBe("env-2");
+    });
+
+    it("deploymentCandidates filters by preferred stage when matched", () => {
+      model.preferredTargetStage = "PREPROD";
+      model.envId = "env-1";
+      model.environments = [
+        makeEnv("env-1", "Current", "DEV"),
+        makeEnv("env-2", "Stage", "PREPROD"),
+        makeEnv("env-3", "Prod", "PROD"),
+      ];
+
+      expect(model.deploymentCandidates).toHaveLength(1);
+      expect(model.deploymentCandidates[0].id).toBe("env-2");
+    });
+
+    it("deploymentCandidates returns all when no preferred stage", () => {
+      model.preferredTargetStage = "";
+      model.envId = "env-1";
+      model.environments = [
+        makeEnv("env-1", "Current", "DEV"),
+        makeEnv("env-2", "Stage", "PREPROD"),
+        makeEnv("env-3", "Prod", "PROD"),
+      ];
+
+      expect(model.deploymentCandidates).toHaveLength(2);
+    });
+
+    it("isProdTarget is true when selected env stage is PROD", () => {
+      model.envId = "env-1";
+      model.environments = [
+        makeEnv("env-1", "Current", "DEV"),
+        makeEnv("env-2", "Prod", "PROD"),
+      ];
+      model.selectedEnv = "env-2";
+
+      expect(model.isProdTarget).toBe(true);
+    });
+
+    it("isProdTarget is false when selected env is not PROD", () => {
+      model.envId = "env-1";
+      model.environments = [
+        makeEnv("env-1", "Current", "DEV"),
+        makeEnv("env-2", "Stage", "PREPROD"),
+      ];
+      model.selectedEnv = "env-2";
+
+      expect(model.isProdTarget).toBe(false);
+    });
+
+    it("normalizeEnvStage returns PROD for is_production environments", () => {
+      const env = makeEnv("e1", "Legacy Prod", "DEV", { is_production: true });
+      expect(model.normalizeEnvStage(env)).toBe("PROD");
+    });
+
+    it("resolveEnvUrl falls back through superset_url, url, empty string", () => {
+      expect(model.resolveEnvUrl({ id: "e1", superset_url: "https://superset.example.com" }))
+        .toBe("https://superset.example.com");
+      expect(model.resolveEnvUrl({ id: "e2", url: "https://fallback.example.com" }))
+        .toBe("https://fallback.example.com");
+      expect(model.resolveEnvUrl({ id: "e3" }))
+        .toBe("");
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: handleDeploy
+  // ═══════════════════════════════════════════════════════════════
+  describe("handleDeploy", () => {
+    it("calls gitService.deploy with correct args", async () => {
+      model.envId = "env-1";
+      model.environments = [
+        makeEnv("env-1", "Current", "DEV"),
+        makeEnv("target-1", "Target", "PREPROD"),
+      ];
+      model.selectedEnv = "target-1";
+      vi.mocked(gitService.deploy).mockResolvedValueOnce({ message: "Deployed" });
+
+      await model.handleDeploy();
+
+      expect(gitService.deploy).toHaveBeenCalledWith("test-dashboard", "target-1", "env-1");
+      expect(model.deploying).toBe(false);
+    });
+
+    it("closes modal on success", async () => {
+      model.envId = "env-1";
+      model.environments = [
+        makeEnv("env-1", "Current", "DEV"),
+        makeEnv("target-1", "Target", "PREPROD"),
+      ];
+      model.selectedEnv = "target-1";
+      model.show = true;
+      vi.mocked(gitService.deploy).mockResolvedValueOnce({});
+
+      await model.handleDeploy();
+
+      expect(model.show).toBe(false);
+    });
+
+    it("does nothing when no environment is selected", async () => {
+      model.selectedEnv = "";
+
+      await model.handleDeploy();
+
+      expect(gitService.deploy).not.toHaveBeenCalled();
+    });
+
+    it("sets deploying lifecycle", async () => {
+      model.envId = "env-1";
+      model.environments = [
+        makeEnv("env-1", "Current", "DEV"),
+        makeEnv("target-1", "Target", "PREPROD"),
+      ];
+      model.selectedEnv = "target-1";
+      vi.mocked(gitService.deploy).mockImplementation(() => new Promise((r) => setTimeout(r, 10)));
+
+      const promise = model.handleDeploy();
+      expect(model.deploying).toBe(true);
+      await promise;
+      expect(model.deploying).toBe(false);
+    });
+
+    it("resets deploying on failure", async () => {
+      model.envId = "env-1";
+      model.environments = [
+        makeEnv("env-1", "Current", "DEV"),
+        makeEnv("target-1", "Target", "PREPROD"),
+      ];
+      model.selectedEnv = "target-1";
+      vi.mocked(gitService.deploy).mockRejectedValueOnce(new Error("Deploy failed"));
+
+      await model.handleDeploy();
+
+      expect(model.deploying).toBe(false);
+    });
+
+    it("requires prod confirmation for PROD target", async () => {
+      model.envId = "env-1";
+      model.environments = [
+        makeEnv("env-1", "Current", "DEV"),
+        makeEnv("env-2", "Production", "PROD"),
+      ];
+      model.selectedEnv = "env-2";
+
+      // Mock window.prompt to return wrong slug
+      const originalPrompt = globalThis.prompt;
+      globalThis.prompt = vi.fn(() => "wrong-slug") as unknown as typeof globalThis.prompt;
+
+      await model.handleDeploy();
+
+      expect(gitService.deploy).not.toHaveBeenCalled();
+      expect(model.deploying).toBe(false);
+
+      globalThis.prompt = originalPrompt;
+    });
+  });
+});
+// #endregion DeploymentModelTests
diff --git a/frontend/src/lib/models/__tests__/GitConfigModel.test.ts b/frontend/src/lib/models/__tests__/GitConfigModel.test.ts
new file mode 100644
index 000000000..36629ca60
--- /dev/null
+++ b/frontend/src/lib/models/__tests__/GitConfigModel.test.ts
@@ -0,0 +1,380 @@
+// frontend/src/lib/models/__tests__/GitConfigModel.test.ts
+// #region GitConfigModelTests [C:3] [TYPE Module] [SEMANTICS test,model,git-config]
+// @BRIEF L1 unit tests for GitConfigModel @INVARIANT guarantees — no DOM render.
+// @RELATION BINDS_TO -> [GitConfigModel]
+// @TEST_INVARIANT: loadConfigs-populates-list -> VERIFIED_BY: [test_loadConfigs_sets_configs_from_api]
+// @TEST_INVARIANT: loadConfigs-loading-flag -> VERIFIED_BY: [test_loadConfigs_sets_loading_true_then_false]
+// @TEST_INVARIANT: loadConfigs-error-handling -> VERIFIED_BY: [test_loadConfigs_handles_api_error]
+// @TEST_INVARIANT: selectConfig-sets-id -> VERIFIED_BY: [test_selectConfig_sets_selectedConfig]
+// @TEST_INVARIANT: startCreate-resets-form -> VERIFIED_BY: [test_startCreate_resets_form_state]
+// @TEST_INVARIANT: startEdit-populates-form -> VERIFIED_BY: [test_startEdit_populates_form_from_config]
+// @TEST_INVARIANT: cancelEdit-resets-state -> VERIFIED_BY: [test_cancelEdit_resets_to_initial_state]
+// @TEST_INVARIANT: saveConfig-creates-POST -> VERIFIED_BY: [test_saveConfig_creates_new_config]
+// @TEST_INVARIANT: saveConfig-updates-PUT -> VERIFIED_BY: [test_saveConfig_updates_existing_config]
+// @TEST_INVARIANT: saveConfig-error -> VERIFIED_BY: [test_saveConfig_handles_error]
+// @TEST_INVARIANT: deleteConfig-sends-DELETE -> VERIFIED_BY: [test_deleteConfig_sends_delete_request]
+// @TEST_INVARIANT: testConnection-sends-POST -> VERIFIED_BY: [test_testConnection_sends_post_and_stores_result]
+// @TEST_INVARIANT: loadGiteaRepos-fetches -> VERIFIED_BY: [test_loadGiteaRepos_fetches_repos]
+// @TEST_INVARIANT: createRemoteRepo-sends-POST -> VERIFIED_BY: [test_createRemoteRepo_sends_post]
+// @TEST_INVARIANT: deleteRemoteRepo-sends-DELETE -> VERIFIED_BY: [test_deleteRemoteRepo_sends_delete]
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// Mock gitService
+vi.mock('../../../services/gitService.js', () => ({
+  gitService: {
+    getConfigs: vi.fn(),
+    createConfig: vi.fn(),
+    updateConfig: vi.fn(),
+    deleteConfig: vi.fn(),
+    testConnection: vi.fn(),
+    listGiteaRepositories: vi.fn(),
+    createGiteaRepository: vi.fn(),
+    deleteGiteaRepository: vi.fn(),
+  },
+}));
+
+// Mock toasts
+vi.mock('$lib/toasts.js', () => ({
+  addToast: vi.fn(),
+}));
+
+// Mock i18n
+vi.mock('$lib/i18n', () => ({
+  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: {},
+      });
+      return () => {};
+    },
+  },
+}));
+
+import { GitConfigModel } from '../GitConfigModel.svelte.ts';
+import { gitService } from '../../../services/gitService.js';
+import { addToast } from '$lib/toasts.js';
+
+describe('GitConfigModel — L1 invariants (no render)', () => {
+  let model: GitConfigModel;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    model = new GitConfigModel();
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // loadConfigs
+  // ═══════════════════════════════════════════════════════════════
+  describe('loadConfigs', () => {
+    it('sets configs from API', async () => {
+      const mockConfigs = [{ id: 'c1', name: 'Test', provider: 'GITHUB' }];
+      vi.mocked(gitService.getConfigs).mockResolvedValueOnce(mockConfigs);
+
+      await model.loadConfigs();
+
+      expect(gitService.getConfigs).toHaveBeenCalledOnce();
+      expect(model.configs).toEqual(mockConfigs);
+    });
+
+    it('sets configsLoading true then false', async () => {
+      vi.mocked(gitService.getConfigs).mockImplementation(() => new Promise((r) => setTimeout(r, 10)));
+
+      const promise = model.loadConfigs();
+      expect(model.configsLoading).toBe(true);
+      await promise;
+      expect(model.configsLoading).toBe(false);
+    });
+
+    it('handles API error', async () => {
+      vi.mocked(gitService.getConfigs).mockRejectedValueOnce(new Error('Network error'));
+
+      await model.loadConfigs();
+
+      expect(model.configsError).toBe('Network error');
+      expect(model.configs).toEqual([]);
+      expect(addToast).toHaveBeenCalledWith('Network error', 'error');
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // selectConfig
+  // ═══════════════════════════════════════════════════════════════
+  describe('selectConfig', () => {
+    it('sets selectedConfig', () => {
+      model.selectConfig('conf-1');
+      expect(model.selectedConfigId).toBe('conf-1');
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // startCreate
+  // ═══════════════════════════════════════════════════════════════
+  describe('startCreate', () => {
+    it('resets form state to defaults', () => {
+      // Set non-default state first
+      model.isEditing = true;
+      model.editingConfigId = 'old-id';
+      model.formData = { name: 'Old', provider: 'GITLAB', url: 'https://old.com', pat: 'xxx', default_repository: 'org/repo', default_branch: 'dev' };
+
+      model.startCreate();
+
+      expect(model.isEditing).toBe(false);
+      expect(model.editingConfigId).toBeNull();
+      expect(model.formData).toEqual({
+        name: '',
+        provider: 'GITHUB',
+        url: 'https://github.com',
+        pat: '',
+        default_repository: '',
+        default_branch: 'main',
+      });
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // startEdit
+  // ═══════════════════════════════════════════════════════════════
+  describe('startEdit', () => {
+    it('populates form from config', () => {
+      model.configs = [
+        { id: 'c1', name: 'Prod', provider: 'GITHUB', url: 'https://github.com/org', pat: 'tok_xxx', default_repository: 'my-org/my-repo', default_branch: 'main' },
+      ];
+
+      model.startEdit('c1');
+
+      expect(model.isEditing).toBe(true);
+      expect(model.editingConfigId).toBe('c1');
+      expect(model.formData).toEqual({
+        name: 'Prod',
+        provider: 'GITHUB',
+        url: 'https://github.com/org',
+        pat: 'tok_xxx',
+        default_repository: 'my-org/my-repo',
+        default_branch: 'main',
+      });
+    });
+
+    it('does nothing for unknown id', () => {
+      model.configs = [{ id: 'c1', name: 'Prod' }];
+      model.startEdit('unknown');
+      expect(model.isEditing).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // cancelEdit
+  // ═══════════════════════════════════════════════════════════════
+  describe('cancelEdit', () => {
+    it('resets to initial state', () => {
+      model.isEditing = true;
+      model.editingConfigId = 'c1';
+      model.formData.name = 'Dirty';
+
+      model.cancelEdit();
+
+      expect(model.isEditing).toBe(false);
+      expect(model.editingConfigId).toBeNull();
+      expect(model.formData.name).toBe('');
+      expect(model.formData.provider).toBe('GITHUB');
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // saveConfig
+  // ═══════════════════════════════════════════════════════════════
+  describe('saveConfig', () => {
+    it('creates new config (POST)', async () => {
+      const saved = { id: 'new-1', name: 'New', provider: 'GITHUB', url: 'https://github.com', pat: 'tok', status: 'CONNECTED' };
+      vi.mocked(gitService.createConfig).mockResolvedValueOnce(saved);
+      const formSnapshot = { name: 'New', provider: 'GITHUB', url: 'https://github.com', pat: 'tok', default_repository: '', default_branch: 'main' };
+      model.formData = { ...formSnapshot };
+
+      await model.saveConfig();
+
+      expect(gitService.createConfig).toHaveBeenCalledWith(formSnapshot);
+      expect(gitService.updateConfig).not.toHaveBeenCalled();
+      expect(model.configs).toContainEqual(saved);
+      expect(model.isEditing).toBe(false);
+      expect(addToast).toHaveBeenCalledWith('Git configuration saved', 'success');
+    });
+
+    it('updates existing config (PUT)', async () => {
+      model.configs = [{ id: 'c1', name: 'Old', provider: 'GITHUB', url: 'https://github.com', pat: 'tok', status: 'CONNECTED' }];
+      model.isEditing = true;
+      model.editingConfigId = 'c1';
+      const formSnapshot = { name: 'Updated', provider: 'GITHUB', url: 'https://github.com', pat: 'tok', default_repository: '', default_branch: 'main' };
+      model.formData = { ...formSnapshot };
+      const updated = { id: 'c1', name: 'Updated', provider: 'GITHUB', url: 'https://github.com', pat: 'tok', status: 'CONNECTED' };
+      vi.mocked(gitService.updateConfig).mockResolvedValueOnce(updated);
+
+      await model.saveConfig();
+
+      expect(gitService.updateConfig).toHaveBeenCalledWith('c1', formSnapshot);
+      expect(gitService.createConfig).not.toHaveBeenCalled();
+      expect(model.configs[0].name).toBe('Updated');
+      expect(addToast).toHaveBeenCalledWith('Git configuration updated', 'success');
+    });
+
+    it('handles error', async () => {
+      vi.mocked(gitService.createConfig).mockRejectedValueOnce(new Error('Save failed'));
+
+      await model.saveConfig();
+
+      expect(model.saveError).toBe('Save failed');
+      expect(addToast).toHaveBeenCalledWith('Save failed', 'error');
+      expect(model.saving).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // deleteConfig
+  // ═══════════════════════════════════════════════════════════════
+  describe('deleteConfig', () => {
+    it('sends DELETE request and removes from list', async () => {
+      model.configs = [
+        { id: 'c1', name: 'C1' },
+        { id: 'c2', name: 'C2' },
+      ];
+      vi.mocked(gitService.deleteConfig).mockResolvedValueOnce({});
+
+      await model.deleteConfig('c1');
+
+      expect(gitService.deleteConfig).toHaveBeenCalledWith('c1');
+      expect(model.configs).toHaveLength(1);
+      expect(model.configs[0].id).toBe('c2');
+      expect(addToast).toHaveBeenCalledWith('Git configuration deleted', 'success');
+    });
+
+    it('clears gitea state when deleting selected config', async () => {
+      model.selectedGiteaConfigId = 'gitea-1';
+      model.giteaRepos = [{ name: 'repo1' }];
+      vi.mocked(gitService.deleteConfig).mockResolvedValueOnce({});
+
+      await model.deleteConfig('gitea-1');
+
+      expect(model.selectedGiteaConfigId).toBe('');
+      expect(model.giteaRepos).toEqual([]);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // testConnection
+  // ═══════════════════════════════════════════════════════════════
+  describe('testConnection', () => {
+    it('sends POST and stores result on success', async () => {
+      vi.mocked(gitService.testConnection).mockResolvedValueOnce({ status: 'success' });
+      model.formData = { name: 'Test', provider: 'GITHUB', url: 'https://github.com', pat: 'tok', default_repository: '', default_branch: 'main' };
+
+      await model.testConnection();
+
+      expect(gitService.testConnection).toHaveBeenCalledWith(expect.objectContaining({
+        name: 'Test',
+        config_id: null,
+      }));
+      expect(model.connectionTestResult).toEqual({ status: 'success' });
+      expect(addToast).toHaveBeenCalledWith('Connection successful', 'success');
+    });
+
+    it('includes config_id when editing', async () => {
+      model.isEditing = true;
+      model.editingConfigId = 'c1';
+      vi.mocked(gitService.testConnection).mockResolvedValueOnce({ status: 'success' });
+
+      await model.testConnection();
+
+      expect(gitService.testConnection).toHaveBeenCalledWith(expect.objectContaining({
+        config_id: 'c1',
+      }));
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // loadGiteaRepos
+  // ═══════════════════════════════════════════════════════════════
+  describe('loadGiteaRepos', () => {
+    it('fetches repos for selected config', async () => {
+      const repos = [{ name: 'repo1', full_name: 'user/repo1' }];
+      vi.mocked(gitService.listGiteaRepositories).mockResolvedValueOnce(repos);
+      model.selectedGiteaConfigId = 'gitea-1';
+
+      await model.loadGiteaRepos();
+
+      expect(gitService.listGiteaRepositories).toHaveBeenCalledWith('gitea-1');
+      expect(model.giteaRepos).toEqual(repos);
+    });
+
+    it('clears repos when no config selected', async () => {
+      model.giteaRepos = [{ name: 'stale' }];
+      model.selectedGiteaConfigId = '';
+
+      await model.loadGiteaRepos();
+
+      expect(model.giteaRepos).toEqual([]);
+      expect(gitService.listGiteaRepositories).not.toHaveBeenCalled();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // createRemoteRepo
+  // ═══════════════════════════════════════════════════════════════
+  describe('createRemoteRepo', () => {
+    it('sends POST to create Gitea repo', async () => {
+      model.selectedGiteaConfigId = 'gitea-1';
+      model.newGiteaRepo = { name: 'new-repo', private: true, description: 'desc', auto_init: true, default_branch: 'main' };
+      vi.mocked(gitService.createGiteaRepository).mockResolvedValueOnce({});
+      vi.mocked(gitService.listGiteaRepositories).mockResolvedValueOnce([]);
+
+      await model.createRemoteRepo();
+
+      expect(gitService.createGiteaRepository).toHaveBeenCalledWith('gitea-1', {
+        name: 'new-repo',
+        private: true,
+        description: 'desc',
+        auto_init: true,
+        default_branch: 'main',
+      });
+      expect(gitService.listGiteaRepositories).toHaveBeenCalled();
+    });
+
+    it('does nothing with empty name', async () => {
+      model.newGiteaRepo.name = '  ';
+      await model.createRemoteRepo();
+      expect(gitService.createGiteaRepository).not.toHaveBeenCalled();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // deleteRemoteRepo
+  // ═══════════════════════════════════════════════════════════════
+  describe('deleteRemoteRepo', () => {
+    it('sends DELETE with parsed owner/repo', async () => {
+      model.selectedGiteaConfigId = 'gitea-1';
+      vi.mocked(gitService.deleteGiteaRepository).mockResolvedValueOnce({});
+      vi.mocked(gitService.listGiteaRepositories).mockResolvedValueOnce([]);
+
+      await model.deleteRemoteRepo({ full_name: 'my-org/my-repo', name: 'my-repo' });
+
+      expect(gitService.deleteGiteaRepository).toHaveBeenCalledWith('gitea-1', 'my-org', 'my-repo');
+    });
+
+    it('handles repo without full_name (cannot determine owner, returns early)', async () => {
+      model.selectedGiteaConfigId = 'gitea-1';
+
+      await model.deleteRemoteRepo({ name: 'simple-repo' });
+
+      expect(gitService.deleteGiteaRepository).not.toHaveBeenCalled();
+      expect(addToast).toHaveBeenCalledWith('Cannot resolve repository owner/name', 'error');
+    });
+  });
+});
+// #endregion GitConfigModelTests
diff --git a/frontend/src/lib/models/__tests__/GitManagerModel.test.ts b/frontend/src/lib/models/__tests__/GitManagerModel.test.ts
new file mode 100644
index 000000000..228aca4e7
--- /dev/null
+++ b/frontend/src/lib/models/__tests__/GitManagerModel.test.ts
@@ -0,0 +1,576 @@
+// frontend/src/lib/models/__tests__/GitManagerModel.test.ts
+// #region GitManagerModelTests [C:3] [TYPE Module] [SEMANTICS test,model,git-manager]
+// @BRIEF L1 unit tests for GitManagerModel — no DOM render, mocks all API + toast + i18n.
+// @RELATION BINDS_TO -> [GitManagerModel]
+// @TEST_INVARIANT: derived-computations -> VERIFIED_BY: [test_hasWorkspaceChanges_true_when_changes, test_changedFilesCount_aggregates_all_categories, test_derived_no_workspaceStatus]
+// @TEST_INVARIANT: loading-state-lifecycle -> VERIFIED_BY: [test_checkStatus_sets_checkingStatus_lifecycle, test_handleCommit_sets_committing_lifecycle]
+// @TEST_INVARIANT: mutual-exclusion -> VERIFIED_BY: [test_mutual_exclusion_defaults_all_false]
+// @TEST_INVARIANT: error-handling -> VERIFIED_BY: [test_handleCommit_sets_gitError_on_api_failure, test_handleCommit_clears_gitError_before_operation]
+// @TEST_INVARIANT: commit-calls-api -> VERIFIED_BY: [test_handleCommit_calls_gitService_commit_with_correct_args, test_handleCommit_calls_push_when_autoPushAfterCommit]
+// @TEST_INVARIANT: promote-calls-api -> VERIFIED_BY: [test_handlePromote_calls_gitService_promote, test_handlePromote_validates_branches]
+// @TEST_INVARIANT: pull-calls-api -> VERIFIED_BY: [test_handlePull_calls_gitService_pull]
+// @TEST_INVARIANT: clearGitError -> VERIFIED_BY: [test_clearGitError_resets_both_fields]
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+// ── Mocks ────────────────────────────────────────────────────────
+vi.mock("../../../services/gitService.js", () => ({
+  gitService: {
+    getConfigs: vi.fn(),
+    getBranches: vi.fn(),
+    getStatus: vi.fn(),
+    getDiff: vi.fn(),
+    commit: vi.fn(),
+    push: vi.fn(),
+    pull: vi.fn(),
+    promote: vi.fn(),
+    sync: vi.fn(),
+    getMergeStatus: vi.fn(),
+    getMergeConflicts: vi.fn(),
+    resolveMergeConflicts: vi.fn(),
+    abortMerge: vi.fn(),
+    continueMerge: vi.fn(),
+    getRepositoryBinding: vi.fn(),
+    initRepository: vi.fn(),
+    createRemoteRepository: vi.fn(),
+  },
+}));
+
+vi.mock("$lib/api.js", () => ({
+  api: {
+    getEnvironmentsList: vi.fn(),
+    postApi: vi.fn(),
+  },
+}));
+
+vi.mock("$lib/toasts.js", () => ({
+  addToast: vi.fn(),
+}));
+
+vi.mock("$lib/i18n", () => ({
+  t: { subscribe: vi.fn() },
+  _: vi.fn(),
+}));
+
+vi.mock("svelte/store", () => ({
+  get: vi.fn(() => ({ git: {} })),
+}));
+
+import { GitManagerModel } from "../GitManagerModel.svelte.ts";
+import { gitService } from "../../../services/gitService.js";
+import { api } from "$lib/api.js";
+import { addToast } from "$lib/toasts.js";
+
+// ── Types ─────────────────────────────────────────────────────────
+
+interface WorkspaceStatusFixture {
+  is_dirty?: boolean;
+  staged_files?: string[];
+  modified_files?: string[];
+  untracked_files?: string[];
+  current_branch?: string;
+}
+
+// ── Helpers ──────────────────────────────────────────────────────
+
+/** Create a model with default constructor values. */
+function createModel(overrides: Partial<{ dashboardId: string; envId: string | null; dashboardTitle: string }> = {}): GitManagerModel {
+  return new GitManagerModel({
+    dashboardId: "test-dashboard",
+    envId: "env-123",
+    dashboardTitle: "Test Dashboard",
+    ...overrides,
+  });
+}
+
+/** Minimal workspace status payload. */
+function makeWorkspaceStatus(overrides: Partial<WorkspaceStatusFixture> = {}): WorkspaceStatusFixture {
+  return {
+    is_dirty: false,
+    staged_files: [],
+    modified_files: [],
+    untracked_files: [],
+    current_branch: "main",
+    ...overrides,
+  };
+}
+
+// ── Suite ────────────────────────────────────────────────────────
+
+describe("GitManagerModel — L1 invariants (no render)", () => {
+  let model: GitManagerModel;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    model = createModel();
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: Derived computations
+  // ═══════════════════════════════════════════════════════════════
+  describe("derived state", () => {
+    it("hasWorkspaceChanges returns false when workspaceStatus is null", () => {
+      model.workspaceStatus = null;
+      expect(model.hasWorkspaceChanges).toBe(false);
+    });
+
+    it("hasWorkspaceChanges returns true when there are staged files", () => {
+      model.workspaceStatus = makeWorkspaceStatus({ staged_files: ["file1.py"] });
+      expect(model.hasWorkspaceChanges).toBe(true);
+    });
+
+    it("hasWorkspaceChanges returns true when there are modified files", () => {
+      model.workspaceStatus = makeWorkspaceStatus({ modified_files: ["file2.py"] });
+      expect(model.hasWorkspaceChanges).toBe(true);
+    });
+
+    it("hasWorkspaceChanges returns true when there are untracked files", () => {
+      model.workspaceStatus = makeWorkspaceStatus({ untracked_files: ["file3.py"] });
+      expect(model.hasWorkspaceChanges).toBe(true);
+    });
+
+    it("hasWorkspaceChanges returns false when all file lists are empty", () => {
+      model.workspaceStatus = makeWorkspaceStatus({
+        staged_files: [],
+        modified_files: [],
+        untracked_files: [],
+      });
+      expect(model.hasWorkspaceChanges).toBe(false);
+    });
+
+    it("changedFilesCount aggregates all categories", () => {
+      model.workspaceStatus = makeWorkspaceStatus({
+        staged_files: ["a.py", "b.py"],
+        modified_files: ["c.py"],
+        untracked_files: ["d.py", "e.py"],
+      });
+      expect(model.changedFilesCount).toBe(5);
+    });
+
+    it("changedFilesCount returns 0 when workspaceStatus is null", () => {
+      model.workspaceStatus = null;
+      expect(model.changedFilesCount).toBe(0);
+    });
+
+    it("changedFilesCount returns 0 when all file lists are empty", () => {
+      model.workspaceStatus = makeWorkspaceStatus();
+      expect(model.changedFilesCount).toBe(0);
+    });
+
+    it("resolvedEnvId falls back to envId when provided", () => {
+      model.envId = "env-456";
+      expect(model.resolvedEnvId).toBe("env-456");
+    });
+
+    it("originHost and configHost are empty strings when URLs are empty", () => {
+      model.repositoryBindingRemoteUrl = "";
+      model.repositoryConfigUrl = "";
+      expect(model.originHost).toBe("");
+      expect(model.configHost).toBe("");
+      // Both empty → falsy (empty string, not exactly false but falsy in conditionals)
+      expect(model.hasOriginConfigMismatch).toBeFalsy();
+    });
+
+    it("hasOriginConfigMismatch is false when both hosts are same", () => {
+      model.repositoryBindingRemoteUrl = "https://git.example.com/org/repo.git";
+      model.repositoryConfigUrl = "https://git.example.com/config";
+      expect(model.hasOriginConfigMismatch).toBe(false);
+    });
+
+    it("pushProviderLabel returns default label when no configs", () => {
+      model.configs = [];
+      model.selectedConfigId = "";
+      model.repositoryProvider = "";
+      expect(model.pushProviderLabel).toBe("git");
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: Loading flag mutual exclusion (defaults)
+  // ═══════════════════════════════════════════════════════════════
+  describe("mutual exclusion — loading flags", () => {
+    it("all loading flags default to false except checkingStatus", () => {
+      // checkingStatus starts true per original GitManager.svelte
+      expect(model.checkingStatus).toBe(true);
+      expect(model.loading).toBe(false);
+      expect(model.workspaceLoading).toBe(false);
+      expect(model.committing).toBe(false);
+      expect(model.isPulling).toBe(false);
+      expect(model.isPushing).toBe(false);
+      expect(model.generatingMessage).toBe(false);
+      expect(model.promoting).toBe(false);
+      expect(model.mergeResolveInProgress).toBe(false);
+      expect(model.mergeAbortInProgress).toBe(false);
+      expect(model.mergeContinueInProgress).toBe(false);
+      expect(model.mergeRecoveryLoading).toBe(false);
+      expect(model.creatingRemoteRepo).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: error handling
+  // ═══════════════════════════════════════════════════════════════
+  describe("error handling", () => {
+    it("clearGitError resets both error fields", () => {
+      model.gitError = { message: "Something broke", status: 500, error_code: null, files: [], next_steps: [], detail: null };
+      model.gitErrorType = "error";
+      model.clearGitError();
+      expect(model.gitError).toBeNull();
+      expect(model.gitErrorType).toBe("error");
+    });
+
+    it("handleCommit sets gitError on API failure", async () => {
+      model.commitMessage = "fix: test";
+      model.workspaceStatus = makeWorkspaceStatus({ staged_files: ["x.py"] });
+      vi.mocked(gitService.commit).mockRejectedValueOnce(new Error("Commit failed"));
+
+      await model.handleCommit();
+
+      expect(model.gitError).not.toBeNull();
+      expect(model.gitError!.message).toContain("Commit failed");
+      expect(model.committing).toBe(false);
+    });
+
+    it("handleCommit clears gitError before operation", async () => {
+      model.commitMessage = "fix: test";
+      model.workspaceStatus = makeWorkspaceStatus({ staged_files: ["x.py"] });
+      model.gitError = { message: "Previous error", status: 500, error_code: null, files: [], next_steps: [], detail: null };
+      vi.mocked(gitService.commit).mockRejectedValueOnce(new Error("New error"));
+
+      await model.handleCommit();
+
+      // error was cleared (set to structured error), not the old one
+      expect(model.gitError!.message).not.toBe("Previous error");
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: Action loading state lifecycle
+  // ═══════════════════════════════════════════════════════════════
+  describe("loading state lifecycle", () => {
+    it("checkStatus transitions checkingStatus true→false on success", async () => {
+      vi.mocked(gitService.getBranches).mockResolvedValueOnce(["main"]);
+      vi.mocked(gitService.getStatus).mockResolvedValueOnce(makeWorkspaceStatus());
+      vi.mocked(gitService.getDiff).mockResolvedValueOnce("");
+      vi.mocked(gitService.getDiff).mockResolvedValueOnce("");
+
+      // Initially true (default)
+      expect(model.checkingStatus).toBe(true);
+      await model.checkStatus();
+      // Should be false after completion
+      expect(model.checkingStatus).toBe(false);
+      expect(model.initialized).toBe(true);
+    });
+
+    it("checkStatus sets initialized=false on API failure", async () => {
+      vi.mocked(gitService.getBranches).mockRejectedValueOnce(new Error("No repo"));
+      expect(model.checkingStatus).toBe(true);
+
+      await model.checkStatus();
+
+      expect(model.initialized).toBe(false);
+      expect(model.checkingStatus).toBe(false);
+    });
+
+    it("handleCommit sets committing true then false", async () => {
+      model.commitMessage = "fix: test";
+      model.workspaceStatus = makeWorkspaceStatus({ staged_files: ["x.py"] });
+      vi.mocked(gitService.commit).mockImplementation(() => new Promise((r) => setTimeout(r, 10)));
+
+      const promise = model.handleCommit();
+      expect(model.committing).toBe(true);
+      await promise;
+      expect(model.committing).toBe(false);
+    });
+
+    it("handleCommit resets committing on failure", async () => {
+      model.commitMessage = "fix: test";
+      model.workspaceStatus = makeWorkspaceStatus({ staged_files: ["x.py"] });
+      vi.mocked(gitService.commit).mockRejectedValueOnce(new Error("Fail"));
+
+      await model.handleCommit();
+
+      expect(model.committing).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: Guard conditions
+  // ═══════════════════════════════════════════════════════════════
+  describe("guard conditions", () => {
+    it("handleCommit returns early when commitMessage is empty", async () => {
+      model.commitMessage = "";
+      model.workspaceStatus = makeWorkspaceStatus({ staged_files: ["x.py"] });
+
+      await model.handleCommit();
+
+      expect(gitService.commit).not.toHaveBeenCalled();
+    });
+
+    it("handleCommit returns early when hasWorkspaceChanges is false", async () => {
+      model.commitMessage = "fix: test";
+      model.workspaceStatus = makeWorkspaceStatus();
+
+      await model.handleCommit();
+
+      expect(gitService.commit).not.toHaveBeenCalled();
+    });
+
+    it("handlePromote validates branches are different", async () => {
+      model.promoteFromBranch = "main";
+      model.promoteToBranch = "main";
+
+      await model.handlePromote();
+
+      expect(gitService.promote).not.toHaveBeenCalled();
+      expect(addToast).toHaveBeenCalledWith(
+        expect.stringContaining("разные"),
+        "error",
+      );
+    });
+
+    it("handlePromote validates reason in direct mode", async () => {
+      model.promoteFromBranch = "dev";
+      model.promoteToBranch = "main";
+      model.promoteMode = "direct";
+      model.promoteReason = "";
+
+      await model.handlePromote();
+
+      expect(gitService.promote).not.toHaveBeenCalled();
+      expect(addToast).toHaveBeenCalledWith(
+        expect.stringContaining("причину"),
+        "error",
+      );
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: Commit calls gitService.commit
+  // ═══════════════════════════════════════════════════════════════
+  describe("handleCommit — API calls", () => {
+    it("calls gitService.commit with correct args", async () => {
+      model.commitMessage = "fix: resolve mapping issue";
+      model.workspaceStatus = makeWorkspaceStatus({ staged_files: ["x.py"] });
+      model.autoPushAfterCommit = false;
+      vi.mocked(gitService.commit).mockResolvedValueOnce({});
+
+      await model.handleCommit();
+
+      expect(gitService.commit).toHaveBeenCalledWith(
+        "test-dashboard",
+        "fix: resolve mapping issue",
+        [],
+        "env-123",
+      );
+    });
+
+    it("calls push when autoPushAfterCommit is true", async () => {
+      model.commitMessage = "fix: auto-push";
+      model.workspaceStatus = makeWorkspaceStatus({ staged_files: ["x.py"] });
+      model.autoPushAfterCommit = true;
+      vi.mocked(gitService.commit).mockResolvedValueOnce({});
+      vi.mocked(gitService.push).mockResolvedValueOnce({});
+
+      await model.handleCommit();
+
+      expect(gitService.push).toHaveBeenCalledWith("test-dashboard", "env-123");
+    });
+
+    it("does not call push when autoPushAfterCommit is false", async () => {
+      model.commitMessage = "fix: no-push";
+      model.workspaceStatus = makeWorkspaceStatus({ staged_files: ["x.py"] });
+      model.autoPushAfterCommit = false;
+      vi.mocked(gitService.commit).mockResolvedValueOnce({});
+
+      await model.handleCommit();
+
+      expect(gitService.push).not.toHaveBeenCalled();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: Promote calls gitService.promote
+  // ═══════════════════════════════════════════════════════════════
+  describe("handlePromote — API calls", () => {
+    it("calls gitService.promote with correct args in MR mode", async () => {
+      model.promoteFromBranch = "dev";
+      model.promoteToBranch = "main";
+      model.promoteMode = "mr";
+      model.promoteReason = "";
+      vi.mocked(gitService.promote).mockResolvedValueOnce({ url: "https://git.example.com/mr/1" });
+
+      await model.handlePromote();
+
+      expect(gitService.promote).toHaveBeenCalledWith(
+        "test-dashboard",
+        {
+          from_branch: "dev",
+          to_branch: "main",
+          mode: "mr",
+          title: expect.stringContaining("Promote"),
+          description: undefined,
+          reason: undefined,
+        },
+        "env-123",
+      );
+    });
+
+    it("calls gitService.promote with reason in direct mode", async () => {
+      model.promoteFromBranch = "dev";
+      model.promoteToBranch = "preprod";
+      model.promoteMode = "direct";
+      model.promoteReason = "Hotfix required";
+      vi.mocked(gitService.promote).mockResolvedValueOnce({});
+
+      await model.handlePromote();
+
+      expect(gitService.promote).toHaveBeenCalledWith(
+        "test-dashboard",
+        expect.objectContaining({
+          from_branch: "dev",
+          to_branch: "preprod",
+          mode: "direct",
+          reason: "Hotfix required",
+          description: expect.stringContaining("Hotfix required"),
+        }),
+        "env-123",
+      );
+      expect(model.promoting).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: Pull calls gitService.pull
+  // ═══════════════════════════════════════════════════════════════
+  describe("handlePull — API calls", () => {
+    it("calls gitService.pull with correct args", async () => {
+      vi.mocked(gitService.pull).mockResolvedValueOnce({});
+      vi.mocked(gitService.getStatus).mockResolvedValueOnce(makeWorkspaceStatus());
+      vi.mocked(gitService.getDiff).mockResolvedValueOnce("");
+      vi.mocked(gitService.getDiff).mockResolvedValueOnce("");
+
+      await model.handlePull();
+
+      expect(gitService.pull).toHaveBeenCalledWith("test-dashboard", "env-123");
+      expect(model.isPulling).toBe(false);
+    });
+
+    it("opens unfinished merge dialog on 409 error", async () => {
+      const mergeError = new Error("Unfinished merge");
+      (mergeError as Record<string, unknown>).status = 409;
+      (mergeError as Record<string, unknown>).detail = {
+        error_code: "GIT_UNFINISHED_MERGE",
+        message: "Merge in progress",
+        repository_path: "/repo",
+        git_dir: "/repo/.git",
+        current_branch: "main",
+        merge_head: "feature",
+        manual_commands: ["git merge --abort"],
+        next_steps: ["Abort or resolve"],
+      };
+
+      vi.mocked(gitService.pull).mockRejectedValueOnce(mergeError);
+
+      // getMergeStatus needs to return unfinished merge data for loadMergeRecoveryState
+      vi.mocked(gitService.getMergeStatus).mockResolvedValueOnce({
+        has_unfinished_merge: true,
+        repository_path: "/repo",
+        git_dir: "/repo/.git",
+        current_branch: "main",
+        merge_head: "feature",
+      });
+
+      await model.handlePull();
+
+      expect(model.showUnfinishedMergeDialog).toBe(true);
+      expect(model.unfinishedMergeContext).not.toBeNull();
+      // should still call pull
+      expect(gitService.pull).toHaveBeenCalledWith("test-dashboard", "env-123");
+    });
+
+    it("sets gitError on pull failure (non-merge)", async () => {
+      vi.mocked(gitService.pull).mockRejectedValueOnce(new Error("Network error"));
+
+      await model.handlePull();
+
+      expect(model.gitError).not.toBeNull();
+      expect(model.isPulling).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: Push calls gitService.push
+  // ═══════════════════════════════════════════════════════════════
+  describe("handlePush — API calls", () => {
+    it("calls gitService.push with correct args", async () => {
+      vi.mocked(gitService.push).mockResolvedValueOnce({});
+      vi.mocked(gitService.getStatus).mockResolvedValueOnce(makeWorkspaceStatus());
+      vi.mocked(gitService.getDiff).mockResolvedValueOnce("");
+      vi.mocked(gitService.getDiff).mockResolvedValueOnce("");
+
+      await model.handlePush();
+
+      expect(gitService.push).toHaveBeenCalledWith("test-dashboard", "env-123");
+      expect(model.isPushing).toBe(false);
+    });
+
+    it("sets gitError on push failure", async () => {
+      vi.mocked(gitService.push).mockRejectedValueOnce(new Error("Push rejected"));
+
+      await model.handlePush();
+
+      expect(model.gitError).not.toBeNull();
+      expect(model.isPushing).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: Sync calls gitService.sync
+  // ═══════════════════════════════════════════════════════════════
+  describe("handleSync — API calls", () => {
+    it("calls gitService.sync with correct args", async () => {
+      vi.mocked(gitService.sync).mockResolvedValueOnce({});
+      vi.mocked(gitService.getStatus).mockResolvedValueOnce(makeWorkspaceStatus());
+      vi.mocked(gitService.getDiff).mockResolvedValueOnce("");
+      vi.mocked(gitService.getDiff).mockResolvedValueOnce("");
+
+      await model.handleSync();
+
+      expect(gitService.sync).toHaveBeenCalledWith(
+        "test-dashboard",
+        "env-123",
+        "env-123",
+      );
+      expect(model.loading).toBe(false);
+    });
+
+    it("sets gitError on sync failure", async () => {
+      vi.mocked(gitService.sync).mockRejectedValueOnce(new Error("Sync failed"));
+
+      await model.handleSync();
+
+      expect(model.gitError).not.toBeNull();
+      expect(model.loading).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: Generate message calls api.postApi
+  // ═══════════════════════════════════════════════════════════════
+  describe("handleGenerateMessage — API calls", () => {
+    it("calls api.postApi and sets commitMessage", async () => {
+      vi.mocked(api.postApi).mockResolvedValueOnce({ message: "AI generated message" });
+
+      await model.handleGenerateMessage();
+
+      expect(api.postApi).toHaveBeenCalledWith(
+        expect.stringContaining("/git/repositories/test-dashboard/generate-message"),
+        undefined,
+        { suppressToast: true },
+      );
+      expect(model.commitMessage).toBe("AI generated message");
+      expect(model.generatingMessage).toBe(false);
+    });
+  });
+});
+// #endregion GitManagerModelTests
diff --git a/frontend/src/lib/models/__tests__/GitStatusModel.test.ts b/frontend/src/lib/models/__tests__/GitStatusModel.test.ts
new file mode 100644
index 000000000..409d795b3
--- /dev/null
+++ b/frontend/src/lib/models/__tests__/GitStatusModel.test.ts
@@ -0,0 +1,409 @@
+// frontend/src/lib/models/__tests__/GitStatusModel.test.ts
+// #region GitStatusModelTests [C:3] [TYPE Module] [SEMANTICS test,model,git-status]
+// @BRIEF L1 unit tests for GitStatusModel — no DOM render, mocks API + toast + i18n.
+// @RELATION BINDS_TO -> [GitStatusModel]
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+// ── Mocks ────────────────────────────────────────────────────────
+vi.mock("../../../services/gitService.js", () => ({
+  gitService: {
+    getStatus: vi.fn(),
+    getDiff: vi.fn(),
+    sync: vi.fn(),
+    pull: vi.fn(),
+    push: vi.fn(),
+    getHistory: vi.fn(),
+  },
+}));
+
+vi.mock("$lib/toasts.js", () => ({
+  addToast: vi.fn(),
+}));
+
+vi.mock("$lib/i18n", () => ({
+  t: { subscribe: vi.fn() },
+  _: vi.fn(),
+}));
+
+vi.mock("svelte/store", () => ({
+  get: vi.fn(() => ({ git: { repo_status: {} } })),
+}));
+
+import { GitStatusModel } from "../GitStatusModel.svelte.ts";
+import { gitService } from "../../../services/gitService.js";
+
+// ── Types ─────────────────────────────────────────────────────────
+
+interface StatusFixture {
+  sync_state: string;
+  current_branch: string | null;
+  has_repo: boolean;
+  modified_files: string[];
+  staged_files: string[];
+  untracked_files: string[];
+  ahead_count: number;
+  behind_count: number;
+  [key: string]: unknown;
+}
+
+// ── Helpers ──────────────────────────────────────────────────────
+
+/** Create a model with dashboardId and envId pre-set. */
+function createModel(): GitStatusModel {
+  const model = new GitStatusModel();
+  model.initialize("test-dashboard", "env-123");
+  return model;
+}
+
+/** Minimal git status payload. */
+function makeStatus(overrides: Partial<StatusFixture> = {}): StatusFixture {
+  return {
+    sync_state: "SYNCED",
+    current_branch: "main",
+    has_repo: true,
+    modified_files: [],
+    staged_files: [],
+    untracked_files: [],
+    ahead_count: 0,
+    behind_count: 0,
+    ...overrides,
+  };
+}
+
+// ── Suite ────────────────────────────────────────────────────────
+
+describe("GitStatusModel — L1 invariants (no render)", () => {
+  let model: GitStatusModel;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    model = createModel();
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: initialize
+  // ═══════════════════════════════════════════════════════════════
+  describe("initialize", () => {
+    it("sets dashboardId and envId", () => {
+      expect(model.dashboardId).toBe("test-dashboard");
+      expect(model.envId).toBe("env-123");
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: loadStatus calls gitService.getStatus
+  // ═══════════════════════════════════════════════════════════════
+  describe("loadStatus", () => {
+    it("fetches status via gitService.getStatus", async () => {
+      const status = makeStatus();
+      vi.mocked(gitService.getStatus).mockResolvedValueOnce(status);
+
+      await model.loadStatus();
+
+      expect(gitService.getStatus).toHaveBeenCalledWith("test-dashboard", "env-123");
+      expect(model.gitStatus).toEqual(status);
+      expect(model.statusLoading).toBe(false);
+    });
+
+    it("sets currentBranch from response", async () => {
+      vi.mocked(gitService.getStatus).mockResolvedValueOnce(makeStatus({ current_branch: "develop" }));
+
+      await model.loadStatus();
+
+      expect(model.currentBranch).toBe("develop");
+    });
+
+    it("sets error state on API failure", async () => {
+      vi.mocked(gitService.getStatus).mockRejectedValueOnce(new Error("Network error"));
+
+      await model.loadStatus();
+
+      expect(model.statusError).toBe("Network error");
+      expect(model.gitStatus).not.toBeNull();
+      expect(model.gitStatus!.has_repo).toBe(false);
+      expect(model.statusLoading).toBe(false);
+    });
+
+    it("does nothing when dashboardId is empty", async () => {
+      model.dashboardId = "";
+      await model.loadStatus();
+      expect(gitService.getStatus).not.toHaveBeenCalled();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: sync calls gitService.sync
+  // ═══════════════════════════════════════════════════════════════
+  describe("syncRepository", () => {
+    it("calls gitService.sync with correct args", async () => {
+      model.gitStatus = makeStatus();
+      vi.mocked(gitService.sync).mockResolvedValueOnce({});
+      vi.mocked(gitService.getStatus).mockResolvedValueOnce(makeStatus());
+
+      const result = await model.syncRepository();
+
+      expect(gitService.sync).toHaveBeenCalledWith("test-dashboard", "env-123", "env-123");
+      expect(result).toBe(true);
+      expect(model.syncing).toBe(false);
+    });
+
+    it("returns false when hasGitRepo is false", async () => {
+      model.gitStatus = makeStatus({ has_repo: false });
+
+      const result = await model.syncRepository();
+
+      expect(gitService.sync).not.toHaveBeenCalled();
+      expect(result).toBe(false);
+    });
+
+    it("returns false when already syncing", async () => {
+      model.gitStatus = makeStatus();
+      model.syncing = true;
+
+      const result = await model.syncRepository();
+
+      expect(gitService.sync).not.toHaveBeenCalled();
+      expect(result).toBe(false);
+    });
+
+    it("sets error on API failure", async () => {
+      model.gitStatus = makeStatus();
+      vi.mocked(gitService.sync).mockRejectedValueOnce(new Error("Sync rejected"));
+
+      const result = await model.syncRepository();
+
+      expect(result).toBe(false);
+      expect(model.syncing).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: pull calls gitService.pull
+  // ═══════════════════════════════════════════════════════════════
+  describe("pullRepository", () => {
+    it("calls gitService.pull with correct args", async () => {
+      model.gitStatus = makeStatus();
+      vi.mocked(gitService.pull).mockResolvedValueOnce({});
+      vi.mocked(gitService.getStatus).mockResolvedValueOnce(makeStatus());
+
+      await model.pullRepository();
+
+      expect(gitService.pull).toHaveBeenCalledWith("test-dashboard", "env-123");
+      expect(model.pulling).toBe(false);
+    });
+
+    it("does nothing when hasGitRepo is false", async () => {
+      model.gitStatus = makeStatus({ has_repo: false });
+
+      await model.pullRepository();
+
+      expect(gitService.pull).not.toHaveBeenCalled();
+    });
+
+    it("sets error on API failure", async () => {
+      model.gitStatus = makeStatus();
+      vi.mocked(gitService.pull).mockRejectedValueOnce(new Error("Pull failed"));
+
+      await model.pullRepository();
+
+      expect(model.pulling).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: push calls gitService.push
+  // ═══════════════════════════════════════════════════════════════
+  describe("pushRepository", () => {
+    it("calls gitService.push with correct args", async () => {
+      model.gitStatus = makeStatus();
+      vi.mocked(gitService.push).mockResolvedValueOnce({});
+      vi.mocked(gitService.getStatus).mockResolvedValueOnce(makeStatus());
+
+      await model.pushRepository();
+
+      expect(gitService.push).toHaveBeenCalledWith("test-dashboard", "env-123");
+      expect(model.pushing).toBe(false);
+    });
+
+    it("does nothing when hasGitRepo is false", async () => {
+      model.gitStatus = makeStatus({ has_repo: false });
+
+      await model.pushRepository();
+
+      expect(gitService.push).not.toHaveBeenCalled();
+    });
+
+    it("sets error on API failure", async () => {
+      model.gitStatus = makeStatus();
+      vi.mocked(gitService.push).mockRejectedValueOnce(new Error("Push rejected"));
+
+      await model.pushRepository();
+
+      expect(model.pushing).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: mutual exclusion — sync/pull/push
+  // ═══════════════════════════════════════════════════════════════
+  describe("mutual exclusion", () => {
+    it("sync/pull/push default to false", () => {
+      expect(model.syncing).toBe(false);
+      expect(model.pulling).toBe(false);
+      expect(model.pushing).toBe(false);
+    });
+
+    it("syncing blocks syncRepository", async () => {
+      model.gitStatus = makeStatus();
+      model.syncing = true;
+
+      const result = await model.syncRepository();
+
+      expect(gitService.sync).not.toHaveBeenCalled();
+      expect(result).toBe(false);
+    });
+
+    it("pulling blocks pullRepository", async () => {
+      model.gitStatus = makeStatus();
+      model.pulling = true;
+
+      await model.pullRepository();
+
+      expect(gitService.pull).not.toHaveBeenCalled();
+    });
+
+    it("pushing blocks pushRepository", async () => {
+      model.gitStatus = makeStatus();
+      model.pushing = true;
+
+      await model.pushRepository();
+
+      expect(gitService.push).not.toHaveBeenCalled();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: loadHistory calls gitService.getHistory
+  // ═══════════════════════════════════════════════════════════════
+  describe("loadHistory", () => {
+    it("calls gitService.getHistory with correct args", async () => {
+      const commits = [{ id: "abc123", message: "fix: test" }];
+      vi.mocked(gitService.getHistory).mockResolvedValueOnce(commits);
+
+      await model.loadHistory(30);
+
+      expect(gitService.getHistory).toHaveBeenCalledWith("test-dashboard", 30, "env-123");
+      expect(model.gitHistory).toEqual(commits);
+      expect(model.historyLoading).toBe(false);
+    });
+
+    it("sets empty array on API failure", async () => {
+      vi.mocked(gitService.getHistory).mockRejectedValueOnce(new Error("Failed"));
+
+      await model.loadHistory();
+
+      expect(model.gitHistory).toEqual([]);
+      expect(model.historyLoading).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: Derived computations
+  // ═══════════════════════════════════════════════════════════════
+  describe("derived state", () => {
+    it("hasGitRepo is false when gitStatus is null", () => {
+      model.gitStatus = null;
+      expect(model.hasGitRepo).toBe(false);
+    });
+
+    it("hasGitRepo is false when has_repo is false", () => {
+      model.gitStatus = makeStatus({ has_repo: false });
+      expect(model.hasGitRepo).toBe(false);
+    });
+
+    it("hasGitRepo is true when gitStatus has a branch", () => {
+      model.gitStatus = makeStatus({ current_branch: "main" });
+      expect(model.hasGitRepo).toBe(true);
+    });
+
+    it("syncState is NO_REPO when gitStatus is null", () => {
+      model.gitStatus = null;
+      expect(model.syncState).toBe("NO_REPO");
+    });
+
+    it("syncState is SYNCED when repo is clean and synced", () => {
+      model.gitStatus = makeStatus({ sync_state: "SYNCED" });
+      expect(model.syncState).toBe("SYNCED");
+    });
+
+    it("syncState is CHANGES when there are modified files and explicit state is UNKNOWN", () => {
+      model.gitStatus = makeStatus({ sync_state: "UNKNOWN", modified_files: ["file1.py"] });
+      expect(model.syncState).toBe("CHANGES");
+    });
+
+    it("hasChangesToCommit is true when files are changed", () => {
+      model.gitStatus = makeStatus({ modified_files: ["file1.py"] });
+      expect(model.hasChangesToCommit).toBe(true);
+    });
+
+    it("hasChangesToCommit is false when no files changed", () => {
+      model.gitStatus = makeStatus();
+      expect(model.hasChangesToCommit).toBe(false);
+    });
+
+    it("changedChartsCount counts /charts/ paths", () => {
+      model.gitStatus = makeStatus({
+        modified_files: ["/charts/sales.yaml", "/datasets/orders.yaml"],
+      });
+      expect(model.changedChartsCount).toBe(1);
+      expect(model.changedDatasetsCount).toBe(1);
+    });
+
+    it("meta returns correct labels for different sync states", () => {
+      model.gitStatus = makeStatus({ sync_state: "SYNCED" });
+      expect(model.meta.label).toBe("Synced");
+
+      model.gitStatus = makeStatus({ sync_state: null, modified_files: ["x.py"] });
+      expect(model.meta.label).toBe("Modified");
+
+      model.gitStatus = makeStatus({ sync_state: "AHEAD_REMOTE", ahead_count: 3 });
+      expect(model.meta.label).toBe("Ahead");
+
+      model.gitStatus = makeStatus({ sync_state: "BEHIND_REMOTE", behind_count: 2 });
+      expect(model.meta.label).toBe("Behind");
+
+      model.gitStatus = makeStatus({ sync_state: "DIVERGED", ahead_count: 1, behind_count: 1 });
+      expect(model.meta.label).toBe("Diverged");
+    });
+
+    it("allChangedFilesList deduplicates across categories", () => {
+      model.gitStatus = makeStatus({
+        staged_files: ["file1.py", "file2.py"],
+        modified_files: ["file2.py", "file3.py"],
+        untracked_files: ["file4.py"],
+      });
+      expect(model.allChangedFilesList).toEqual(["file1.py", "file2.py", "file3.py", "file4.py"]);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: handleBranchChange
+  // ═══════════════════════════════════════════════════════════════
+  describe("handleBranchChange", () => {
+    it("updates currentBranch and calls loadStatus", () => {
+      vi.mocked(gitService.getStatus).mockResolvedValueOnce(makeStatus({ current_branch: "develop" }));
+
+      model.handleBranchChange({ detail: { branch: "develop" } });
+
+      expect(model.currentBranch).toBe("develop");
+      expect(gitService.getStatus).toHaveBeenCalledTimes(1);
+    });
+
+    it("does nothing when event has no branch", () => {
+      model.handleBranchChange({ detail: {} });
+      expect(model.currentBranch).toBe("main");
+      expect(gitService.getStatus).not.toHaveBeenCalled();
+    });
+  });
+});
+// #endregion GitStatusModelTests
diff --git a/frontend/src/lib/models/__tests__/MappingsModel.test.ts b/frontend/src/lib/models/__tests__/MappingsModel.test.ts
new file mode 100644
index 000000000..32d234368
--- /dev/null
+++ b/frontend/src/lib/models/__tests__/MappingsModel.test.ts
@@ -0,0 +1,415 @@
+// frontend/src/lib/models/__tests__/MappingsModel.test.ts
+// #region MappingsModelTests [C:3] [TYPE Module] [SEMANTICS test,model,mapping]
+// @BRIEF L1 unit tests for MappingsModel @INVARIANT guarantees — no DOM render.
+// @RELATION BINDS_TO -> [MappingsModel]
+// @TEST_INVARIANT: selectSourceEnv-resets-databases -> VERIFIED_BY: [test_selectSourceEnv_resets_databases, test_selectSourceEnv_resets_targetEnvId]
+// @TEST_INVARIANT: selectTargetEnv-resets-databases -> VERIFIED_BY: [test_selectTargetEnv_resets_databases]
+// @TEST_INVARIANT: fetchDatabases-loads-all-resources -> VERIFIED_BY: [test_fetchDatabases_loads_all_resources]
+// @TEST_INVARIANT: saveMapping-adds-to-mappings -> VERIFIED_BY: [test_saveMapping_adds_to_mappings, test_saveMapping_replaces_existing_mapping]
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+// Mock the API module
+vi.mock("$lib/api.js", () => ({
+  api: {
+    requestApi: vi.fn(),
+    postApi: vi.fn(),
+    getEnvironmentsList: vi.fn(),
+  },
+}));
+
+// Mock environment context store
+vi.mock("$lib/stores/environmentContext.js", () => ({
+  environmentContextStore: {
+    subscribe: vi.fn(),
+  },
+}));
+
+// Mock svelte/store get() to return controlled state
+vi.mock("svelte/store", () => ({
+  get: vi.fn(() => ({ selectedEnvId: "env-1" })),
+}));
+
+vi.mock("$lib/i18n", () => ({
+  t: {
+    migration: {
+      mapping_saved: "Mapping saved",
+    },
+  },
+}));
+
+import { MappingsModel } from "../MappingsModel.svelte.ts";
+import { api } from "$lib/api.js";
+
+describe("MappingsModel — L1 invariants (no render)", () => {
+  let model: MappingsModel;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    model = new MappingsModel();
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: Changing source environment resets databases, mappings, suggestions
+  // ═══════════════════════════════════════════════════════════════
+  describe("selectSourceEnv", () => {
+    it("resets sourceDatabases, targetDatabases, mappings, and suggestions", () => {
+      // Arrange: populate all database-related state
+      model.sourceDatabases = [{ uuid: "db-1", database_name: "test" }];
+      model.targetDatabases = [{ uuid: "db-2", database_name: "test" }];
+      model.mappings = [{ id: 1 }];
+      model.suggestions = [{ source_db_uuid: "db-1", target_db_uuid: "db-2" }];
+      model.sourceEnvId = "env-1";
+
+      // Act: select a different source environment
+      model.selectSourceEnv("env-2");
+
+      // Assert: all database-related state is reset
+      expect(model.sourceDatabases).toEqual([]);
+      expect(model.targetDatabases).toEqual([]);
+      expect(model.mappings).toEqual([]);
+      expect(model.suggestions).toEqual([]);
+    });
+
+    // @INVARIANT: Changing source environment resets targetEnvId
+    it("resets targetEnvId", () => {
+      // Arrange
+      model.sourceEnvId = "env-1";
+      model.targetEnvId = "env-2";
+
+      // Act
+      model.selectSourceEnv("env-3");
+
+      // Assert
+      expect(model.targetEnvId).toBe("");
+    });
+
+    it("resets error and success messages", () => {
+      // Arrange
+      model.error = "Something went wrong";
+      model.success = "Mapping saved";
+      model.sourceEnvId = "env-1";
+
+      // Act
+      model.selectSourceEnv("env-2");
+
+      // Assert
+      expect(model.error).toBe("");
+      expect(model.success).toBe("");
+    });
+
+    it("does NOT reset if same env is selected again", () => {
+      // Arrange
+      model.sourceEnvId = "env-1";
+      model.targetEnvId = "env-2";
+      model.sourceDatabases = [{ uuid: "db-1", database_name: "test" }];
+      model.mappings = [{ id: 1 }];
+
+      // Act
+      model.selectSourceEnv("env-1");
+
+      // Assert: state unchanged
+      expect(model.sourceEnvId).toBe("env-1");
+      expect(model.targetEnvId).toBe("env-2");
+      expect(model.sourceDatabases).toHaveLength(1);
+      expect(model.mappings).toHaveLength(1);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: Changing target environment resets databases, mappings, suggestions
+  // ═══════════════════════════════════════════════════════════════
+  describe("selectTargetEnv", () => {
+    it("resets targetDatabases, mappings, and suggestions", () => {
+      // Arrange
+      model.targetDatabases = [{ uuid: "tgt-1", database_name: "test" }];
+      model.mappings = [{ id: "m-1" }];
+      model.suggestions = [{ source_db_uuid: "src-1", target_db_uuid: "tgt-1" }];
+      model.targetEnvId = "env-2";
+
+      // Act
+      model.selectTargetEnv("env-3");
+
+      // Assert
+      expect(model.targetDatabases).toEqual([]);
+      expect(model.mappings).toEqual([]);
+      expect(model.suggestions).toEqual([]);
+    });
+
+    it("does NOT reset sourceDatabases or sourceEnvId", () => {
+      // Arrange
+      model.sourceEnvId = "env-1";
+      model.sourceDatabases = [{ uuid: "src-1", database_name: "test" }];
+
+      // Act
+      model.selectTargetEnv("env-3");
+
+      // Assert: source-side state is preserved
+      expect(model.sourceEnvId).toBe("env-1");
+      expect(model.sourceDatabases).toHaveLength(1);
+    });
+
+    it("resets error and success messages", () => {
+      // Arrange
+      model.error = "Fail";
+      model.success = "Done";
+
+      // Act
+      model.selectTargetEnv("env-3");
+
+      // Assert
+      expect(model.error).toBe("");
+      expect(model.success).toBe("");
+    });
+
+    it("does NOT reset if same env is selected again", () => {
+      // Arrange
+      model.targetEnvId = "env-2";
+      model.targetDatabases = [{ uuid: "tgt-1", database_name: "test" }];
+      model.mappings = [{ id: "m-1" }];
+
+      // Act
+      model.selectTargetEnv("env-2");
+
+      // Assert: state unchanged
+      expect(model.targetEnvId).toBe("env-2");
+      expect(model.targetDatabases).toHaveLength(1);
+      expect(model.mappings).toHaveLength(1);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: fetchDatabases loads all resources
+  // ═══════════════════════════════════════════════════════════════
+  describe("fetchDatabases", () => {
+    const srcDbs: Array<{ uuid: string; database_name: string }> = [{ uuid: "src-1", database_name: "SalesDB" }];
+    const tgtDbs: Array<{ uuid: string; database_name: string }> = [{ uuid: "tgt-1", database_name: "SalesDW" }];
+    const mappings: Array<{ id: string; source_db_uuid: string; target_db_uuid: string }> = [
+      { id: "m-1", source_db_uuid: "src-1", target_db_uuid: "tgt-1" },
+    ];
+    const suggestions: Array<{ source_db_uuid: string; target_db_uuid: string; confidence: number }> = [
+      { source_db_uuid: "src-1", target_db_uuid: "tgt-2", confidence: 0.85 },
+    ];
+
+    it("returns early if sourceEnvId is empty", async () => {
+      model.sourceEnvId = "";
+      model.targetEnvId = "env-2";
+      await model.fetchDatabases();
+      expect(api.requestApi).not.toHaveBeenCalled();
+      expect(model.fetchingDbs).toBe(false);
+    });
+
+    it("returns early if targetEnvId is empty", async () => {
+      model.sourceEnvId = "env-1";
+      model.targetEnvId = "";
+      await model.fetchDatabases();
+      expect(api.requestApi).not.toHaveBeenCalled();
+    });
+
+    it("loads source and target databases, mappings, and suggestions", async () => {
+      // Arrange
+      model.sourceEnvId = "env-1";
+      model.targetEnvId = "env-2";
+      vi.mocked(api.requestApi)
+        .mockResolvedValueOnce(srcDbs)   // source databases
+        .mockResolvedValueOnce(tgtDbs)   // target databases
+        .mockResolvedValueOnce(mappings); // existing mappings
+      vi.mocked(api.postApi).mockResolvedValueOnce(suggestions); // AI suggestions
+
+      // Act
+      await model.fetchDatabases();
+
+      // Assert: correct API endpoints called
+      expect(api.requestApi).toHaveBeenCalledWith("/environments/env-1/databases");
+      expect(api.requestApi).toHaveBeenCalledWith("/environments/env-2/databases");
+      expect(api.requestApi).toHaveBeenCalledWith(
+        "/mappings?source_env_id=env-1&target_env_id=env-2",
+      );
+      expect(api.postApi).toHaveBeenCalledWith("/mappings/suggest", {
+        source_env_id: "env-1",
+        target_env_id: "env-2",
+      });
+
+      // Assert: state populated correctly
+      expect(model.sourceDatabases).toEqual(srcDbs);
+      expect(model.targetDatabases).toEqual(tgtDbs);
+      expect(model.mappings).toEqual(mappings);
+      expect(model.suggestions).toEqual(suggestions);
+    });
+
+    it("sets fetchingDbs true during fetch and false after", async () => {
+      // Arrange
+      model.sourceEnvId = "env-1";
+      model.targetEnvId = "env-2";
+      vi.mocked(api.requestApi).mockResolvedValue([]);
+      vi.mocked(api.postApi).mockResolvedValue([]);
+
+      // Act
+      const promise = model.fetchDatabases();
+      expect(model.fetchingDbs).toBe(true);
+      await promise;
+      expect(model.fetchingDbs).toBe(false);
+    });
+
+    it("sets error on API failure and clears fetchingDbs", async () => {
+      // Arrange
+      model.sourceEnvId = "env-1";
+      model.targetEnvId = "env-2";
+      vi.mocked(api.requestApi).mockRejectedValue(new Error("Network failure"));
+
+      // Act
+      await model.fetchDatabases();
+
+      // Assert
+      expect(model.error).toBe("Network failure");
+      expect(model.fetchingDbs).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: saveMapping adds to mappings array
+  // ═══════════════════════════════════════════════════════════════
+  describe("saveMapping", () => {
+    const srcDb = { uuid: "src-1", database_name: "SalesDB" };
+    const tgtDb = { uuid: "tgt-1", database_name: "SalesDW" };
+
+    it("returns early if source database is not found", async () => {
+      model.sourceDatabases = [];
+      model.targetDatabases = [tgtDb];
+      await model.saveMapping("src-1", "tgt-1");
+      expect(api.postApi).not.toHaveBeenCalled();
+    });
+
+    it("returns early if target database is not found", async () => {
+      model.sourceDatabases = [srcDb];
+      model.targetDatabases = [];
+      await model.saveMapping("src-1", "tgt-1");
+      expect(api.postApi).not.toHaveBeenCalled();
+    });
+
+    it("saves mapping and adds to mappings array", async () => {
+      // Arrange
+      model.sourceEnvId = "env-1";
+      model.targetEnvId = "env-2";
+      model.sourceDatabases = [srcDb];
+      model.targetDatabases = [tgtDb];
+      const savedMapping = {
+        id: "m-1",
+        source_db_uuid: "src-1",
+        target_db_uuid: "tgt-1",
+        source_db_name: "SalesDB",
+        target_db_name: "SalesDW",
+      };
+      vi.mocked(api.postApi).mockResolvedValueOnce(savedMapping);
+
+      // Act
+      await model.saveMapping("src-1", "tgt-1");
+
+      // Assert: correct API call
+      expect(api.postApi).toHaveBeenCalledWith("/mappings", {
+        source_env_id: "env-1",
+        target_env_id: "env-2",
+        source_db_uuid: "src-1",
+        target_db_uuid: "tgt-1",
+        source_db_name: "SalesDB",
+        target_db_name: "SalesDW",
+      });
+
+      // Assert: mapping added
+      expect(model.mappings).toHaveLength(1);
+      expect(model.mappings[0]).toEqual(savedMapping);
+    });
+
+    // @INVARIANT: saveMapping replaces existing mapping for same source
+    it("replaces existing mapping for the same source database UUID", async () => {
+      // Arrange: existing mapping for src-1 → tgt-1
+      model.sourceEnvId = "env-1";
+      model.targetEnvId = "env-2";
+      model.sourceDatabases = [srcDb, { uuid: "src-2", database_name: "AnalyticsDB" }];
+      model.targetDatabases = [tgtDb, { uuid: "tgt-2", database_name: "AnalyticsDW" }];
+      model.mappings = [
+        { id: "old-m", source_db_uuid: "src-1", target_db_uuid: "tgt-1" },
+      ];
+
+      // New mapping for src-1 → tgt-2
+      const newMapping = {
+        id: "new-m",
+        source_db_uuid: "src-1",
+        target_db_uuid: "tgt-2",
+        source_db_name: "SalesDB",
+        target_db_name: "AnalyticsDW",
+      };
+      vi.mocked(api.postApi).mockResolvedValueOnce(newMapping);
+
+      // Act
+      await model.saveMapping("src-1", "tgt-2");
+
+      // Assert: old mapping replaced by new
+      expect(model.mappings).toHaveLength(1);
+      expect(model.mappings[0]).toEqual(newMapping);
+      expect(model.mappings[0].target_db_uuid).toBe("tgt-2");
+    });
+
+    it("sets success message on successful save", async () => {
+      // Arrange
+      model.sourceDatabases = [srcDb];
+      model.targetDatabases = [tgtDb];
+      vi.mocked(api.postApi).mockResolvedValueOnce({
+        id: "m-1",
+        source_db_uuid: "src-1",
+        target_db_uuid: "tgt-1",
+      } satisfies Record<string, unknown>);
+
+      // Act
+      await model.saveMapping("src-1", "tgt-1");
+
+      // Assert
+      expect(model.success).toBe("Mapping saved successfully");
+      expect(model.error).toBe("");
+    });
+
+    it("sets error message on API failure", async () => {
+      // Arrange
+      model.sourceDatabases = [srcDb];
+      model.targetDatabases = [tgtDb];
+      vi.mocked(api.postApi).mockRejectedValueOnce(new Error("Save failed"));
+
+      // Act
+      await model.saveMapping("src-1", "tgt-1");
+
+      // Assert
+      expect(model.error).toBe("Save failed");
+      expect(model.success).toBe("");
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: loadEnvironments pre-fills source from context
+  // ═══════════════════════════════════════════════════════════════
+  describe("loadEnvironments", () => {
+    it("sets loading true then false after fetch", async () => {
+      vi.mocked(api.getEnvironmentsList).mockResolvedValueOnce([]);
+      const promise = model.loadEnvironments();
+      expect(model.loading).toBe(true);
+      await promise;
+      expect(model.loading).toBe(false);
+    });
+
+    it("pre-fills sourceEnvId from active context", async () => {
+      vi.mocked(api.getEnvironmentsList).mockResolvedValueOnce([
+        { id: "env-1", name: "Dev" },
+        { id: "env-2", name: "Prod" },
+      ]);
+      // get() returns { selectedEnvId: "env-1" } from mock
+      await model.loadEnvironments();
+      expect(model.sourceEnvId).toBe("env-1");
+    });
+
+    it("sets error on API failure", async () => {
+      vi.mocked(api.getEnvironmentsList).mockRejectedValueOnce(new Error("Failed to load"));
+      await model.loadEnvironments();
+      expect(model.error).toBe("Failed to load");
+      expect(model.loading).toBe(false);
+    });
+  });
+});
+// #endregion MappingsModelTests
diff --git a/frontend/src/lib/models/__tests__/MigrationModel.test.ts b/frontend/src/lib/models/__tests__/MigrationModel.test.ts
new file mode 100644
index 000000000..0a49293fb
--- /dev/null
+++ b/frontend/src/lib/models/__tests__/MigrationModel.test.ts
@@ -0,0 +1,486 @@
+// frontend/src/lib/models/__tests__/MigrationModel.test.ts
+// #region MigrationModelTests [C:3] [TYPE Module] [SEMANTICS test,model,migration]
+// @BRIEF L1 unit tests for MigrationModel @INVARIANT guarantees — no DOM render.
+// @RELATION BINDS_TO -> [MigrationModel]
+// @TEST_INVARIANT: source-env-resets-dashboards -> VERIFIED_BY: [test_selectSourceEnv_resets_dashboards]
+// @TEST_INVARIANT: source-env-resets-databases -> VERIFIED_BY: [test_selectSourceEnv_resets_databases]
+// @TEST_INVARIANT: source-env-clears-dryrun -> VERIFIED_BY: [test_selectSourceEnv_clears_dryRunResult]
+// @TEST_INVARIANT: migration-blocked-same-env -> VERIFIED_BY: [test_executeMigration_blocked_same_env]
+// @TEST_INVARIANT: migration-blocked-no-dashboards -> VERIFIED_BY: [test_executeMigration_blocked_no_dashboards]
+// @TEST_INVARIANT: dryrun-required-before-execute -> VERIFIED_BY: [test_canExecute_false_without_dryRunResult]
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+// Mock the API module before importing
+vi.mock("$lib/api.js", () => ({
+  api: {
+    requestApi: vi.fn(),
+    postApi: vi.fn(),
+    getTask: vi.fn().mockResolvedValue({ id: "task-1", status: "RUNNING" }),
+    getEnvironmentsList: vi.fn().mockResolvedValue([
+      { id: "env-1", name: "Dev" },
+      { id: "env-2", name: "Prod" },
+    ]),
+  },
+}));
+
+vi.mock("$lib/stores.js", () => ({
+  selectedTask: { set: vi.fn(), current: null, subscribe: vi.fn() },
+}));
+
+vi.mock("$lib/stores/environmentContext.js", () => ({
+  environmentContextStore: { current: { selectedEnvId: "env-1" } },
+}));
+
+vi.mock("../../services/taskService.js", () => ({
+  resumeTask: vi.fn().mockResolvedValue({ ok: true }),
+}));
+
+vi.mock("$lib/i18n", () => ({
+  t: {
+    migration: {
+      select_both_envs: "Select both environments",
+      different_envs: "Must be different",
+      select_dashboards: "Select dashboards",
+      resume_failed: "Resume failed",
+    },
+  },
+}));
+
+import { MigrationModel } from "../MigrationModel.svelte.ts";
+import { api } from "$lib/api.js";
+import { selectedTask } from "$lib/stores.js";
+
+describe("MigrationModel — L1 invariants (no render)", () => {
+  let model: MigrationModel;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    model = new MigrationModel();
+    selectedTask.current = null;
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: Changing source environment resets dashboard selection
+  // ═══════════════════════════════════════════════════════════════
+  describe("sourceEnvId change → reset invariants", () => {
+    it("resets selectedDashboardIds when source env changes", () => {
+      model.selectedDashboardIds = ["1", "2", "3"];
+      model.selectSourceEnv("env-2");
+      expect(model.selectedDashboardIds).toEqual([]);
+    });
+
+    it("resets dashboards array when source env changes", () => {
+      model.dashboards = [{ id: "1" }, { id: "2" }];
+      model.selectedDashboardIds = ["1"];
+      model.selectSourceEnv("env-2");
+      // dashboards will be cleared and then refetched async — but sync reset is immediate
+      expect(model.selectedDashboardIds).toEqual([]);
+    });
+
+    it("does NOT reset if same env is selected again", () => {
+      model.sourceEnvId = "env-1";
+      model.selectedDashboardIds = ["1", "2", "3"];
+      model.selectSourceEnv("env-1");
+      expect(model.selectedDashboardIds).toEqual(["1", "2", "3"]);
+    });
+
+    // @INVARIANT: Changing source environment resets databases, mappings, and suggestions
+    it("resets databases, mappings, and suggestions", () => {
+      model.sourceDatabases = [{ uuid: "db-1", database_name: "test" }];
+      model.targetDatabases = [{ uuid: "db-2", database_name: "test" }];
+      model.mappings = [{ id: 1 }];
+      model.suggestions = [{ id: 2 }];
+      model.selectSourceEnv("env-2");
+      expect(model.sourceDatabases).toEqual([]);
+      expect(model.targetDatabases).toEqual([]);
+      expect(model.mappings).toEqual([]);
+      expect(model.suggestions).toEqual([]);
+    });
+
+    // @INVARIANT: Changing source environment clears dry-run result
+    it("clears dryRunResult when source env changes", () => {
+      model.dryRunResult = { risk: { score: 10, level: "low", items: [] } };
+      model.selectSourceEnv("env-2");
+      expect(model.dryRunResult).toBeNull();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: Migration blocked unless source≠target
+  // ═══════════════════════════════════════════════════════════════
+  describe("executeMigration blocked invariants", () => {
+    it("blocks when source and target are the same", async () => {
+      model.sourceEnvId = "env-1";
+      model.targetEnvId = "env-1";
+      model.selectedDashboardIds = ["1"];
+      await model.executeMigration();
+      expect(model.error).toContain("different");
+      expect(api.postApi).not.toHaveBeenCalled();
+    });
+
+    it("blocks when no dashboards selected", async () => {
+      model.sourceEnvId = "env-1";
+      model.targetEnvId = "env-2";
+      model.selectedDashboardIds = [];
+      await model.executeMigration();
+      expect(model.error).toContain("dashboards");
+      expect(api.postApi).not.toHaveBeenCalled();
+    });
+
+    it("blocks when source env is empty", async () => {
+      model.sourceEnvId = "";
+      model.targetEnvId = "env-2";
+      model.selectedDashboardIds = ["1"];
+      await model.executeMigration();
+      expect(model.error).toContain("both");
+      expect(api.postApi).not.toHaveBeenCalled();
+    });
+
+    it("blocks when target env is empty", async () => {
+      model.sourceEnvId = "env-1";
+      model.targetEnvId = "";
+      model.selectedDashboardIds = ["1"];
+      await model.executeMigration();
+      expect(model.error).toContain("both");
+      expect(api.postApi).not.toHaveBeenCalled();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: canExecute is false without dryRunResult
+  // ═══════════════════════════════════════════════════════════════
+  describe("canExecute derived", () => {
+    it("false when dryRunResult is null", () => {
+      model.selectedDashboardIds = ["1"];
+      model.dryRunResult = null;
+      expect(model.canExecute).toBe(false);
+    });
+
+    it("false when no dashboards selected", () => {
+      model.selectedDashboardIds = [];
+      model.dryRunResult = { risk: { score: 10, level: "low", items: [] } };
+      expect(model.canExecute).toBe(false);
+    });
+
+    it("true when dryRunResult exists AND dashboards selected", () => {
+      model.selectedDashboardIds = ["1"];
+      model.dryRunResult = { risk: { score: 10, level: "low", items: [] } };
+      expect(model.canExecute).toBe(true);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: stepReady derived correctness
+  // ═══════════════════════════════════════════════════════════════
+  describe("stepReady derived", () => {
+    it("step 1 ready when both envs selected and distinct", () => {
+      model.sourceEnvId = "env-1";
+      model.targetEnvId = "env-2";
+      expect(model.stepReady[1]).toBe(true);
+    });
+
+    it("step 1 NOT ready when envs are same", () => {
+      model.sourceEnvId = "env-1";
+      model.targetEnvId = "env-1";
+      expect(model.stepReady[1]).toBe(false);
+    });
+
+    it("step 1 NOT ready when source is empty", () => {
+      model.sourceEnvId = "";
+      model.targetEnvId = "env-2";
+      expect(model.stepReady[1]).toBe(false);
+    });
+
+    it("step 2 ready when dashboards selected", () => {
+      model.selectedDashboardIds = ["1"];
+      expect(model.stepReady[2]).toBe(true);
+    });
+
+    it("step 2 NOT ready when no dashboards", () => {
+      model.selectedDashboardIds = [];
+      expect(model.stepReady[2]).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: Dashboard toggle idempotent
+  // ═══════════════════════════════════════════════════════════════
+  describe("toggleDashboard", () => {
+    it("adds dashboard id when not present", () => {
+      model.toggleDashboard("5");
+      expect(model.selectedDashboardIds).toContain("5");
+    });
+
+    it("removes dashboard id when already present", () => {
+      model.selectedDashboardIds = ["1", "5", "3"];
+      model.toggleDashboard("5");
+      expect(model.selectedDashboardIds).toEqual(["1", "3"]);
+    });
+
+    it("clears dryRunResult on toggle", () => {
+      model.dryRunResult = { risk: { score: 10, level: "low", items: [] } };
+      model.toggleDashboard("1");
+      expect(model.dryRunResult).toBeNull();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: calculateDryRun → toggleDashboard clears dryRunResult
+  // ═══════════════════════════════════════════════════════════════
+  describe("calculateDryRun then toggleDashboard invariant", () => {
+    it("clears dryRunResult when toggleDashboard is called after dry-run", async () => {
+      // Arrange: satisfy preconditions and mock a successful dry-run API
+      model.sourceEnvId = "env-1";
+      model.targetEnvId = "env-2";
+      model.selectedDashboardIds = ["1", "2"];
+      const dryRunResponse = {
+        summary: { dashboards: { create: 1, update: 0, delete: 0 }, charts: {}, datasets: {} },
+        risk: { score: 10, level: "low", items: [] },
+        selected_dashboard_titles: ["Sales"],
+      };
+      vi.mocked(api.postApi).mockResolvedValueOnce(dryRunResponse);
+
+      // Act: run dry-run
+      await model.calculateDryRun();
+      expect(model.dryRunResult).toEqual(dryRunResponse);
+
+      // Act: toggle a dashboard selection
+      model.toggleDashboard("1");
+
+      // Assert: dry-run result is cleared
+      expect(model.dryRunResult).toBeNull();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: setReplaceDb resets databases when toggling OFF
+  // ═══════════════════════════════════════════════════════════════
+  describe("setReplaceDb", () => {
+    it("clears databases and mappings when set to false", () => {
+      model.sourceDatabases = [{ uuid: "db-1", database_name: "test" }];
+      model.mappings = [{ id: 1 }];
+      model.setReplaceDb(false);
+      expect(model.sourceDatabases).toEqual([]);
+      expect(model.mappings).toEqual([]);
+    });
+
+    it("clears dryRunResult", () => {
+      model.dryRunResult = { risk: { score: 10, level: "low", items: [] } };
+      model.setReplaceDb(true);
+      expect(model.dryRunResult).toBeNull();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: goToStep gates by readiness
+  // ═══════════════════════════════════════════════════════════════
+  describe("goToStep gating", () => {
+    it("allows backward navigation (step <= currentStep)", () => {
+      model.currentStep = 3;
+      model.goToStep(1);
+      expect(model.currentStep).toBe(1);
+    });
+
+    it("allows forward to step 2 when step 1 is ready", () => {
+      model.currentStep = 1;
+      model.sourceEnvId = "env-1";
+      model.targetEnvId = "env-2";
+      model.goToStep(2);
+      expect(model.currentStep).toBe(2);
+    });
+
+    it("blocks forward to step 2 when step 1 is not ready", () => {
+      model.currentStep = 1;
+      model.sourceEnvId = "";
+      model.targetEnvId = "";
+      model.goToStep(2);
+      expect(model.currentStep).toBe(1); // unchanged
+    });
+
+    it("allows forward to step 4 only when dryRunResult exists", () => {
+      model.currentStep = 3;
+      model.dryRunResult = { risk: { score: 10, level: "low", items: [] } };
+      model.selectedDashboardIds = ["1"];
+      model.sourceEnvId = "env-1";
+      model.targetEnvId = "env-2";
+      model.goToStep(4);
+      expect(model.currentStep).toBe(4);
+    });
+
+    it("blocks forward to step 4 when dryRunResult is null", () => {
+      model.currentStep = 3;
+      model.dryRunResult = null;
+      model.goToStep(4);
+      expect(model.currentStep).toBe(3); // unchanged
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: Password prompt detection
+  // ═══════════════════════════════════════════════════════════════
+  describe("checkPasswordPrompt", () => {
+    it("shows password prompt when task is AWAITING_INPUT with database_password", () => {
+      selectedTask.current = {
+        id: "task-1",
+        status: "AWAITING_INPUT",
+        input_request: {
+          type: "database_password",
+          databases: ["db1", "db2"],
+          error_message: "Auth failed",
+        },
+      };
+      model.checkPasswordPrompt();
+      expect(model.showPasswordPrompt).toBe(true);
+      expect(model.passwordPromptDatabases).toEqual(["db1", "db2"]);
+      expect(model.passwordPromptErrorMessage).toBe("Auth failed");
+    });
+
+    it("does NOT show prompt when task is not AWAITING_INPUT", () => {
+      selectedTask.current = { id: "task-1", status: "RUNNING" };
+      model.checkPasswordPrompt();
+      expect(model.showPasswordPrompt).toBe(false);
+    });
+
+    it("does NOT show prompt when input_request type is different", () => {
+      selectedTask.current = {
+        id: "task-1",
+        status: "AWAITING_INPUT",
+        input_request: { type: "confirmation" },
+      };
+      model.checkPasswordPrompt();
+      expect(model.showPasswordPrompt).toBe(false);
+    });
+
+    it("does NOT show prompt when activeTask is null", () => {
+      selectedTask.current = null;
+      model.checkPasswordPrompt();
+      expect(model.showPasswordPrompt).toBe(false);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: clearError resets error string
+  // ═══════════════════════════════════════════════════════════════
+  describe("clearError", () => {
+    it("clears error", () => {
+      model.error = "Something went wrong";
+      model.clearError();
+      expect(model.error).toBe("");
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: screenState derived correctness
+  // ═══════════════════════════════════════════════════════════════
+  describe("screenState derived", () => {
+    it("idle when loading", () => {
+      model.loading = true;
+      expect(model.screenState).toBe("idle");
+    });
+
+    it("error when error is set", () => {
+      model.loading = false;
+      model.error = "Fail";
+      expect(model.screenState).toBe("error");
+    });
+
+    it("loading when dryRunLoading", () => {
+      model.loading = false;
+      model.error = "";
+      model.dryRunLoading = true;
+      expect(model.screenState).toBe("loading");
+    });
+
+    it("review when dryRunResult exists", () => {
+      model.loading = false;
+      model.error = "";
+      model.dryRunResult = { risk: { score: 10, level: "low", items: [] } };
+      expect(model.screenState).toBe("review");
+    });
+
+    it("ready when no special state active", () => {
+      model.loading = false;
+      model.error = "";
+      model.dryRunResult = null;
+      model.currentStep = 1;
+      expect(model.screenState).toBe("ready");
+    });
+
+    it("executing when currentStep >= 4", () => {
+      model.loading = false;
+      model.error = "";
+      model.dryRunResult = null;
+      model.currentStep = 4;
+      expect(model.screenState).toBe("executing");
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: loadEnvironments pre-fills source from context
+  // ═══════════════════════════════════════════════════════════════
+  describe("loadEnvironments", () => {
+    it("sets loading true then false after fetch", async () => {
+      vi.mocked(api.getEnvironmentsList).mockResolvedValueOnce([]);
+      const promise = model.loadEnvironments();
+      expect(model.loading).toBe(true);
+      await promise;
+      expect(model.loading).toBe(false);
+    });
+
+    it("pre-fills sourceEnvId from active context", async () => {
+      vi.mocked(api.getEnvironmentsList).mockResolvedValueOnce([
+        { id: "env-1", name: "Dev" },
+        { id: "env-2", name: "Prod" },
+      ]);
+      // envContextStore.current.selectedEnvId = "env-1" (from mock above)
+      await model.loadEnvironments();
+      expect(model.sourceEnvId).toBe("env-1");
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: _buildSelection produces correct payload
+  // ═══════════════════════════════════════════════════════════════
+  describe("_buildSelection (private)", () => {
+    it("builds correct DashboardSelection payload", () => {
+      model.selectedDashboardIds = ["1", "2"];
+      model.sourceEnvId = "src";
+      model.targetEnvId = "tgt";
+      model.replaceDb = true;
+      model.fixCrossFilters = false;
+      const sel = model._buildSelection();
+      expect(sel).toEqual({
+        selected_ids: ["1", "2"],
+        source_env_id: "src",
+        target_env_id: "tgt",
+        replace_db_config: true,
+        fix_cross_filters: false,
+      });
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // executeMigration with custom endpoint
+  // ═══════════════════════════════════════════════════════════════
+  describe("executeMigration with custom endpoint", () => {
+    it("executes with custom endpoint", async () => {
+      model.sourceEnvId = "env-1";
+      model.targetEnvId = "env-2";
+      model.selectedDashboardIds = ["1"];
+      model.dryRunResult = { risk: { score: 10, level: "low", items: [] } };
+      vi.mocked(api.postApi).mockResolvedValueOnce({ task_id: "task-1" });
+
+      await model.executeMigration("/custom/migrate");
+
+      expect(api.postApi).toHaveBeenCalledWith(
+        "/custom/migrate",
+        expect.objectContaining({
+          selected_ids: ["1"],
+          source_env_id: "env-1",
+          target_env_id: "env-2",
+        }),
+      );
+    });
+  });
+});
+// #endregion MigrationModelTests
diff --git a/frontend/src/lib/models/__tests__/MigrationSettingsModel.test.ts b/frontend/src/lib/models/__tests__/MigrationSettingsModel.test.ts
new file mode 100644
index 000000000..b7a930fb9
--- /dev/null
+++ b/frontend/src/lib/models/__tests__/MigrationSettingsModel.test.ts
@@ -0,0 +1,203 @@
+// frontend/src/lib/models/__tests__/MigrationSettingsModel.test.ts
+// #region MigrationSettingsModelTests [C:3] [TYPE Module] [SEMANTICS test,model,migration-settings]
+// @BRIEF L1 unit tests for MigrationSettingsModel @INVARIANT guarantees — no DOM render.
+// @RELATION BINDS_TO -> [MigrationSettingsModel]
+// @TEST_INVARIANT: loadSettings-sets-cron -> VERIFIED_BY: [test_loadSettings_sets_cron_from_api]
+// @TEST_INVARIANT: loadSettings-handles-error -> VERIFIED_BY: [test_loadSettings_handles_error]
+// @TEST_INVARIANT: saveSettings-sends-put -> VERIFIED_BY: [test_saveSettings_sends_put_request]
+// @TEST_INVARIANT: triggerSyncNow-sends-post -> VERIFIED_BY: [test_triggerSyncNow_sends_post_request]
+// @TEST_INVARIANT: loading-flag-lifecycle -> VERIFIED_BY: [test_saveSettings_loading_flag_lifecycle, test_triggerSyncNow_syncing_flag_lifecycle]
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+// Mock the API module before importing
+vi.mock("$lib/api.js", () => ({
+  api: {
+    requestApi: vi.fn(),
+    postApi: vi.fn(),
+  },
+}));
+
+import { MigrationSettingsModel } from "../MigrationSettingsModel.svelte.ts";
+import { api } from "$lib/api.js";
+
+describe("MigrationSettingsModel — L1 invariants (no render)", () => {
+  let model: MigrationSettingsModel;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    model = new MigrationSettingsModel();
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: loadSettings fetches GET /migration/settings
+  // ═══════════════════════════════════════════════════════════════
+  describe("loadSettings", () => {
+    it("sets cron from API response", async () => {
+      // Arrange
+      vi.mocked(api.requestApi).mockResolvedValueOnce({ cron: "0 4 * * *" });
+
+      // Act
+      await model.loadSettings();
+
+      // Assert
+      expect(api.requestApi).toHaveBeenCalledWith("/migration/settings");
+      expect(model.cron).toBe("0 4 * * *");
+    });
+
+    it("handles error without throwing", async () => {
+      // Arrange
+      vi.mocked(api.requestApi).mockRejectedValueOnce(new Error("Network error"));
+
+      // Act
+      await model.loadSettings();
+
+      // Assert: cron stays at default, error is set
+      expect(model.cron).toBe("0 2 * * *");
+      expect(model.error).toBe("Network error");
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: saveSettings sends PUT /migration/settings
+  // ═══════════════════════════════════════════════════════════════
+  describe("saveSettings", () => {
+    it("sends PUT request with correct data", async () => {
+      // Arrange
+      vi.mocked(api.requestApi).mockResolvedValueOnce({ ok: true });
+
+      // Act
+      await model.saveSettings({ cron: "0 6 * * *" });
+
+      // Assert
+      expect(api.requestApi).toHaveBeenCalledWith(
+        "/migration/settings",
+        "PUT",
+        { cron: "0 6 * * *" },
+      );
+      expect(model.success).toBe("Settings saved successfully");
+    });
+
+    it("handles error and sets error message", async () => {
+      // Arrange
+      vi.mocked(api.requestApi).mockRejectedValueOnce(new Error("Save failed"));
+
+      // Act
+      await model.saveSettings({ cron: "bad-cron" });
+
+      // Assert
+      expect(model.error).toBe("Save failed");
+      expect(model.success).toBe("");
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: triggerSyncNow sends POST /migration/sync-now
+  // ═══════════════════════════════════════════════════════════════
+  describe("triggerSyncNow", () => {
+    it("sends POST request and reloads settings", async () => {
+      // Arrange
+      vi.mocked(api.postApi).mockResolvedValueOnce({
+        synced_count: 2,
+        failed_count: 0,
+      });
+      vi.mocked(api.requestApi).mockResolvedValueOnce({ cron: "0 2 * * *" });
+
+      // Act
+      await model.triggerSyncNow();
+
+      // Assert
+      expect(api.postApi).toHaveBeenCalledWith("/migration/sync-now", {});
+      expect(model.refreshKey).toBe(1);
+      expect(model.cron).toBe("0 2 * * *");
+      expect(model.success).toContain("Synced 2 environment(s)");
+    });
+
+    it("handles sync failure with error message", async () => {
+      // Arrange
+      vi.mocked(api.postApi).mockRejectedValueOnce(new Error("Sync timeout"));
+
+      // Act
+      await model.triggerSyncNow();
+
+      // Assert
+      expect(model.error).toBe("Sync timeout");
+      expect(model.refreshKey).toBe(0); // not incremented
+    });
+
+    it("includes failed count in success message", async () => {
+      // Arrange
+      vi.mocked(api.postApi).mockResolvedValueOnce({
+        synced_count: 3,
+        failed_count: 1,
+      });
+      vi.mocked(api.requestApi).mockResolvedValueOnce({ cron: "0 2 * * *" });
+
+      // Act
+      await model.triggerSyncNow();
+
+      // Assert
+      expect(model.success).toContain("Synced 3 environment(s)");
+      expect(model.success).toContain("1 failed");
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // @INVARIANT: loading flag lifecycle (saving/syncing)
+  // ═══════════════════════════════════════════════════════════════
+  describe("loading flag lifecycle", () => {
+    it("sets saving true during save and false after", async () => {
+      // Arrange
+      vi.mocked(api.requestApi).mockImplementation(
+        () => new Promise((resolve) => setTimeout(resolve, 50)),
+      );
+
+      // Act
+      const promise = model.saveSettings({ cron: "0 2 * * *" });
+      expect(model.saving).toBe(true);
+      await promise;
+      expect(model.saving).toBe(false);
+    });
+
+    it("sets syncing true during sync and false after", async () => {
+      // Arrange
+      let resolveSync: ((value: unknown) => void) | undefined;
+      vi.mocked(api.postApi).mockImplementation(
+        () =>
+          new Promise((resolve) => {
+            resolveSync = resolve;
+          }),
+      );
+      vi.mocked(api.requestApi).mockResolvedValue({ cron: "0 2 * * *" });
+
+      // Act
+      const promise = model.triggerSyncNow();
+      expect(model.syncing).toBe(true);
+      resolveSync!({ synced_count: 1, failed_count: 0 });
+      await promise;
+      expect(model.syncing).toBe(false);
+    });
+
+    it("sets syncing false on sync failure", async () => {
+      // Arrange
+      vi.mocked(api.postApi).mockRejectedValueOnce(new Error("Fail"));
+
+      // Act
+      await model.triggerSyncNow();
+
+      // Assert
+      expect(model.syncing).toBe(false);
+    });
+
+    it("sets saving false on save failure", async () => {
+      // Arrange
+      vi.mocked(api.requestApi).mockRejectedValueOnce(new Error("Fail"));
+
+      // Act
+      await model.saveSettings({ cron: "bad" });
+
+      // Assert
+      expect(model.saving).toBe(false);
+    });
+  });
+});
+// #endregion MigrationSettingsModelTests
diff --git a/frontend/src/routes/dashboards/+page.svelte b/frontend/src/routes/dashboards/+page.svelte
index 0e05649c8..d19c88d9f 100644
--- a/frontend/src/routes/dashboards/+page.svelte
+++ b/frontend/src/routes/dashboards/+page.svelte
@@ -66,6 +66,7 @@
   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,
@@ -118,17 +119,12 @@
   // Bulk action modal state
   let showMigrateModal = $state(false);
   let showBackupModal = $state(false);
-  let targetEnvId = $state(null);
   let backupSchedule = $state("");
-  let isSubmittingMigrate = $state(false);
   let isSubmittingBackup = $state(false);
-  let dbMappings = $state({});
-  let availableDbMappings = $state([]);
-  let sourceDatabases = $state([]);
-  let targetDatabases = $state([]);
   let isEditingMappings = $state(false);
-  let useDbMappings = $state(true);
-  let fixCrossFilters = $state(true);
+
+  // Migration model (drives migration modal state and actions)
+  const bulkMigrateModel = new MigrationModel();
 
   // Individual action dropdown state
   let openActionDropdown = $state(null); // stores dashboard ID
@@ -146,11 +142,6 @@
   let profileFilterOverrideShowAll = $state(false);
   let effectiveProfileFilter = $state(null);
 
-  // Dry run state
-  let isDryRunLoading = $state(false);
-  let dryRunData = $state(null);
-  let dryRunError = $state(null);
-
   // Environment options - will be loaded from API
   let environments = $derived($environmentContextStore?.environments || []);
   let shouldShowEnvironmentWizard = $derived(
@@ -858,12 +849,17 @@
         // Select only this dashboard for migration
         replaceSelectedIds(new Set([dashboard.id]));
         showMigrateModal = true;
-        targetEnvId = null;
-        dbMappings = {};
-        availableDbMappings = []; // Reset mappings until target env is selected
-        sourceDatabases = [];
-        targetDatabases = [];
         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]));
@@ -924,171 +920,22 @@
     }
   }
 
-  // Handle target environment change
-  async function handleTargetEnvChange(event) {
-    targetEnvId = event.target.value;
-    if (targetEnvId) {
-      await Promise.all([loadDbMappings(), loadDatabases()]);
-    } else {
-      availableDbMappings = [];
-      dbMappings = {};
-      sourceDatabases = [];
-      targetDatabases = [];
-    }
-  }
+  // Handle target environment change — delegated to MigrationModel
+  // (removed: use bulkMigrateModel.selectTargetEnv() + fetchDatabases() in template onchange)
 
-  // Load databases for both environments
-  async function loadDatabases() {
-    if (!selectedEnv || !targetEnvId) return;
-    try {
-      const [sourceRes, targetRes] = await Promise.all([
-        api.getEnvironmentDatabases(selectedEnv),
-        api.getEnvironmentDatabases(targetEnvId),
-      ]);
-      sourceDatabases = sourceRes || [];
-      targetDatabases = targetRes || [];
-    } catch (err) {
-      console.error(
-        "[EXT:frontend:DashboardHub][COHERENCE:FAILED] Failed to load databases:",
-        err,
-      );
-    }
-  }
+  // Load databases for both environments — delegated to MigrationModel.fetchDatabases()
 
-  // Handle mapping update from MappingTable
-  function handleMappingUpdate(event) {
-    const { sourceUuid, targetUuid } = event.detail;
-    dbMappings[sourceUuid] = targetUuid;
-    dbMappings = dbMappings; // Trigger reactivity
-  }
+  // Handle mapping update — delegated to bulkMigrateModel.saveMapping() in template onupdate
 
-  // Load database mappings for migration modal
-  async function loadDbMappings() {
-    if (!selectedEnv || !targetEnvId) return;
+  // Load database mappings for migration modal — handled by MigrationModel.fetchDatabases()
 
-    try {
-      console.log(
-        `[EXT:frontend:DashboardHub][EXPLORE] Loading DB mappings from ${selectedEnv} to ${targetEnvId}`,
-      );
-      const response = await api.getDatabaseMappings(selectedEnv, targetEnvId);
-      availableDbMappings = response.mappings || [];
-      console.log(
-        `[EXT:frontend:DashboardHub][REFLECT] Loaded mappings:`,
-        availableDbMappings,
-      );
+  // Calculate Migration Dry Run — delegated to MigrationModel.calculateDryRun()
 
-      // Auto-select mappings with high confidence
-      dbMappings = {};
-      availableDbMappings.forEach((m) => {
-        if (m.confidence > 0.8) {
-          dbMappings[m.source_db_uuid] = m.target_db_uuid;
-        }
-      });
-    } catch (err) {
-      console.error(
-        "[EXT:frontend:DashboardHub][COHERENCE:FAILED] Failed to load DB mappings:",
-        err,
-      );
-      availableDbMappings = [];
-    }
-  }
+  // Auto dry-run trigger is handled by model invariants + template-driven onchange handler
+  // (removed: old $effect auto-calculated dry-run on state changes)
 
-  // Calculate Migration Dry Run
-  async function calculateDryRun() {
-    if (!targetEnvId || selectedIds.size === 0) {
-      dryRunData = null;
-      return;
-    }
-
-    isDryRunLoading = true;
-    dryRunError = null;
-
-    try {
-      const payload = {
-        selected_ids: Array.from(selectedIds).map(Number),
-        source_env_id: selectedEnv,
-        target_env_id: targetEnvId,
-        replace_db_config: useDbMappings,
-        fix_cross_filters: fixCrossFilters,
-      };
-
-      const response = await api.calculateMigrationDryRun(payload);
-      dryRunData = response;
-    } catch (err) {
-      console.error(
-        "[EXT:frontend:DashboardHub][COHERENCE:FAILED] Dry run calculation failed:",
-        err,
-      );
-      dryRunError =
-        err.message || $t.common?.error || "Failed to calculate changes";
-      dryRunData = null;
-    } finally {
-      isDryRunLoading = false;
-    }
-  }
-
-  // Reactive effect to recalculate dry run when inputs change
-  $effect(() => {
-    // track dependencies
-    const isOpen = showMigrateModal;
-    const target = targetEnvId;
-    const ids = Array.from(selectedIds).join(",");
-    const useDbs = useDbMappings;
-    const fixFilters = fixCrossFilters;
-
-    if (isOpen && target && ids) {
-      calculateDryRun();
-    } else if (!isOpen || !target || !ids) {
-      dryRunData = null;
-      dryRunError = null;
-    }
-  });
-
-  // Handle bulk migrate
-  async function handleBulkMigrate() {
-    if (isSubmittingMigrate) return;
-    if (selectedIds.size === 0) return;
-    if (!targetEnvId) {
-      alert($t.dashboard?.target_env_required);
-      return;
-    }
-
-    isSubmittingMigrate = true;
-    try {
-      const response = await api.postApi("/dashboards/migrate", {
-        source_env_id: selectedEnv,
-        target_env_id: targetEnvId,
-        dashboard_ids: Array.from(selectedIds),
-        db_mappings: useDbMappings ? dbMappings : {},
-        replace_db_config: useDbMappings && Object.keys(dbMappings).length > 0,
-        fix_cross_filters: fixCrossFilters,
-      });
-      console.log(
-        "[EXT:frontend:DashboardHub][REASON] Bulk migration task created:",
-        response.task_id,
-      );
-
-      // Close modal and open task drawer
-      showMigrateModal = 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) {
-      console.error(
-        "[EXT:frontend:DashboardHub][COHERENCE:FAILED] Bulk migrate error:",
-        err,
-      );
-      alert($t.dashboard?.migration_task_failed);
-    } finally {
-      isSubmittingMigrate = false;
-    }
-  }
+  // 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() {
@@ -2377,12 +2224,17 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
               class="px-3 py-1 text-sm bg-primary text-white border-primary rounded hover:bg-primary-hover transition-colors"
               onclick={() => {
                 showMigrateModal = true;
-                targetEnvId = null;
-                availableDbMappings = [];
-                dbMappings = {};
-                sourceDatabases = [];
-                targetDatabases = [];
                 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;
               }}
             >
               {$t.dashboard?.bulk_migrate}
@@ -2481,8 +2333,17 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
               <select
                 id="target-env"
                 class="env-dropdown w-full"
-                bind:value={targetEnvId}
-                onchange={handleTargetEnvChange}
+                value={bulkMigrateModel.targetEnvId}
+                onchange={(e) => {
+                  bulkMigrateModel.selectTargetEnv(e.target.value);
+                  if (e.target.value) {
+                    bulkMigrateModel.fetchDatabases().then(() => {
+                      if (bulkMigrateModel.selectedDashboardIds.length > 0 && bulkMigrateModel.dryRunResult === null) {
+                        bulkMigrateModel.calculateDryRun();
+                      }
+                    });
+                  }
+                }}
               >
                 <option value="">
                   {$t.dashboard?.target_env_placeholder ||
@@ -2506,21 +2367,21 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
                   <input
                     type="checkbox"
                     id="use-db-mappings"
-                    bind:checked={useDbMappings}
+                    bind:checked={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"
                   ></div>
                   <span class="ml-2 text-xs text-gray-500"
-                    >{useDbMappings ? $t.common?.on : $t.common?.off}</span
+                    >{bulkMigrateModel.replaceDb ? $t.common?.on : $t.common?.off}</span
                   >
                 </label>
               </div>
 
-              {#if useDbMappings}
+              {#if bulkMigrateModel.replaceDb}
                 <div class="flex items-center justify-between mb-2">
-                  {#if availableDbMappings.length > 0}
+                  {#if bulkMigrateModel.suggestions.length > 0}
                     <button
                       class="text-sm text-primary hover:underline"
                       onclick={() => (isEditingMappings = !isEditingMappings)}
@@ -2537,14 +2398,11 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
                     class="border border-gray-200 rounded-lg overflow-hidden"
                   >
                     <MappingTable
-                      {sourceDatabases}
-                      {targetDatabases}
-                      mappings={Object.entries(dbMappings).map(([s, t]) => ({
-                        source_db_uuid: s,
-                        target_db_uuid: t,
-                      }))}
-                      suggestions={availableDbMappings}
-                      onupdate={handleMappingUpdate}
+                      sourceDatabases={bulkMigrateModel.sourceDatabases}
+                      targetDatabases={bulkMigrateModel.targetDatabases}
+                      mappings={bulkMigrateModel.mappings}
+                      suggestions={bulkMigrateModel.suggestions}
+                      onupdate={(e) => bulkMigrateModel.saveMapping(e.detail.sourceUuid, e.detail.targetUuid)}
                     />
                   </div>
                 {:else}
@@ -2566,19 +2424,21 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
                         </tr>
                       </thead>
                       <tbody>
-                        {#if availableDbMappings.length > 0}
-                          {#each availableDbMappings as mapping}
+                        {#if bulkMigrateModel.suggestions.length > 0}
+                          {#each bulkMigrateModel.suggestions as mapping}
+                            {@const targetMapping = bulkMigrateModel.mappings.find(
+                              (m) => m.source_db_uuid === mapping.source_db_uuid,
+                            )}
                             <tr
                               class="border-b border-gray-200 last:border-b-0"
                             >
-                              <td class="px-4 py-2">{mapping.source_db}</td>
+                              <td class="px-4 py-2">{mapping.source_db || mapping.source_db_name}</td>
                               <td class="px-4 py-2">
-                                {#if dbMappings[mapping.source_db_uuid]}
-                                  {targetDatabases.find(
+                                {#if targetMapping}
+                                  {bulkMigrateModel.targetDatabases.find(
                                     (d) =>
-                                      d.uuid ===
-                                      dbMappings[mapping.source_db_uuid],
-                                  )?.database_name || mapping.target_db}
+                                      d.uuid === targetMapping.target_db_uuid,
+                                  )?.database_name || mapping.target_db || mapping.target_db_name}
                                 {:else}
                                   <span class="text-red-500"
                                     >{$t.dashboard?.not_mapped}</span
@@ -2603,7 +2463,7 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
                               colspan="3"
                               class="px-4 py-4 text-center text-gray-500 italic"
                             >
-                              {targetEnvId
+                              {bulkMigrateModel.targetEnvId
                                 ? $t.dashboard?.no_databases_to_map ||
                                   "No databases found to map"
                                 : $t.dashboard?.select_target_for_mappings ||
@@ -2628,7 +2488,7 @@ 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={fixCrossFilters}
+                  bind:checked={bulkMigrateModel.fixCrossFilters}
                   class="mt-0.5 h-4 w-4 rounded border-gray-300 text-primary focus-visible:ring-primary-ring"
                 />
                 <div>
@@ -2666,9 +2526,9 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
             </div>
 
             <!-- Dry Run Summary -->
-            {#if targetEnvId && selectedIds.size > 0}
+            {#if bulkMigrateModel.targetEnvId && selectedIds.size > 0}
               <div class="bg-primary-light border border-primary-ring rounded-lg p-4">
-                {#if isDryRunLoading}
+                {#if bulkMigrateModel.dryRunLoading}
                   <div class="flex items-center gap-2 text-blue-700 text-sm">
                     <svg
                       class="animate-spin h-4 w-4"
@@ -2695,24 +2555,24 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
                         "Calculating changes..."}</span
                     >
                   </div>
-                {:else if dryRunError}
+                {:else if bulkMigrateModel.error && !bulkMigrateModel.dryRunResult}
                   <div class="text-red-600 text-sm">
                     <span class="font-medium">{$t.common?.error}:</span>
-                    {dryRunError}
+                    {bulkMigrateModel.error}
                   </div>
-                {:else if dryRunData?.summary}
+                {:else if bulkMigrateModel.dryRunResult?.summary}
                   {@const totalDashboards =
-                    dryRunData.summary.dashboards?.create +
-                      dryRunData.summary.dashboards?.update +
-                      dryRunData.summary.dashboards?.delete || 0}
+                    bulkMigrateModel.dryRunResult.summary.dashboards?.create +
+                      bulkMigrateModel.dryRunResult.summary.dashboards?.update +
+                      bulkMigrateModel.dryRunResult.summary.dashboards?.delete || 0}
                   {@const totalCharts =
-                    dryRunData.summary.charts?.create +
-                      dryRunData.summary.charts?.update +
-                      dryRunData.summary.charts?.delete || 0}
+                    bulkMigrateModel.dryRunResult.summary.charts?.create +
+                      bulkMigrateModel.dryRunResult.summary.charts?.update +
+                      bulkMigrateModel.dryRunResult.summary.charts?.delete || 0}
                   {@const totalDatasets =
-                    dryRunData.summary.datasets?.create +
-                      dryRunData.summary.datasets?.update +
-                      dryRunData.summary.datasets?.delete || 0}
+                    bulkMigrateModel.dryRunResult.summary.datasets?.create +
+                      bulkMigrateModel.dryRunResult.summary.datasets?.update +
+                      bulkMigrateModel.dryRunResult.summary.datasets?.delete || 0}
                   {@const totalAll =
                     totalDashboards + totalCharts + totalDatasets}
                   <div
@@ -2750,16 +2610,25 @@ class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outlin
           <button
             class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors"
             onclick={() => (showMigrateModal = false)}
-            disabled={isSubmittingMigrate}>{$t.common?.cancel}</button
+            disabled={bulkMigrateModel.dryRunLoading || 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={handleBulkMigrate}
-            disabled={!targetEnvId ||
-              selectedIds.size === 0 ||
-              isSubmittingMigrate}
+            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 (task?.id) openDrawerForTaskIfPreferred(task.id);
+              }
+            }}
+            disabled={!bulkMigrateModel.canExecute || bulkMigrateModel.dryRunLoading || bulkMigrateModel.currentStep >= 4}
           >
-            {isSubmittingMigrate ? $t.dashboard?.starting : $t.migration?.start}
+            {bulkMigrateModel.currentStep >= 4 ? $t.dashboard?.starting : $t.migration?.start}
           </button>
         </div>
       </div>
diff --git a/frontend/src/routes/dashboards/[id]/+page.svelte b/frontend/src/routes/dashboards/[id]/+page.svelte
index e986232aa..ab161c7cd 100644
--- a/frontend/src/routes/dashboards/[id]/+page.svelte
+++ b/frontend/src/routes/dashboards/[id]/+page.svelte
@@ -8,8 +8,8 @@
 <!-- @RELATION DEPENDS_ON -> [GitManager] -->
 <!-- @RELATION DEPENDS_ON -> [EXT:frontend:BranchSelector] -->
 <!-- @RELATION DEPENDS_ON -> [CommitHistory] -->
+<!-- @RELATION BINDS_TO -> [GitStatusModel] -->
 <!-- @RELATION CALLS -> [EXT:frontend:api_module] -->
-<!-- @RELATION CALLS -> [EXT:frontend:gitService] -->
 <!-- @UX_STATE Loading -> Skeleton shown while dashboard detail resolves. -->
 <!-- @UX_STATE Loaded -> Metadata, assets, Git controls, and task history rendered. -->
 <!-- @UX_STATE Validating -> LLM validation scoped to current dashboard. -->
@@ -52,10 +52,8 @@
   import { page } from "$app/state";
   import { t } from "$lib/i18n";
   import { api } from "$lib/api.js";
-  import { gitService } from "../../../services/gitService";
-  import {
-    openDrawerForTaskIfPreferred,
-  } from "$lib/stores/taskDrawer.js";
+  import { GitStatusModel } from "$lib/models/GitStatusModel.svelte.ts";
+  import { openDrawerForTaskIfPreferred } from "$lib/stores/taskDrawer.js";
   import { addToast } from "$lib/toasts.js";
   import Icon from "$lib/ui/Icon.svelte";
   import BranchSelector from "../../../components/git/BranchSelector.svelte";
@@ -87,27 +85,15 @@
   let thumbnailError = $state(null);
   let llmReady = $state(true);
   let llmStatusReason = $state("");
-  let gitStatus = $state(null);
-  let isGitStatusLoading = $state(false);
-  let gitStatusError = $state(null);
-  let gitDiffPreview = $state("");
-  let isGitDiffLoading = $state(false);
-  let isSyncingGit = $state(false);
-  let isPullingGit = $state(false);
-  let isPushingGit = $state(false);
-  let currentBranch = $state("main");
   let activeTab = $state("resources");
   let showGitManager = $state(false);
   let wasGitManagerOpen = $state(false);
-  let gitMeta = $derived(getGitStatusMeta());
-  let gitSyncState = $derived(resolveGitSyncState());
-  let changedChartsCount = $derived(
-    countChangedByAnyPath(["/charts/", "charts/"]),
-  );
-  let changedDatasetsCount = $derived(
-    countChangedByAnyPath(["/datasets/", "datasets/"]),
-  );
-  let hasChangesToCommit = $derived(allChangedFiles().length > 0);
+
+  const gitModel = new GitStatusModel();
+
+  $effect(() => {
+    gitModel.envId = envId || null;
+  });
 
   onMount(async () => {
     await loadDashboardPage();
@@ -119,12 +105,14 @@
 
   async function loadDashboardPage() {
     await loadDashboardDetail();
+    gitModel.dashboardId = gitDashboardRef;
+    gitModel.envId = envId || null;
     const effectiveDashboardRef = dashboard?.id ?? dashboardRef;
     await Promise.all([
       loadTaskHistory(effectiveDashboardRef),
       loadThumbnail(false, effectiveDashboardRef),
       loadLlmStatus(),
-      loadGitStatus(effectiveDashboardRef),
+      gitModel.loadStatus(),
     ]);
   }
 
@@ -345,197 +333,9 @@
     }
   }
 
-  function hasGitRepository() {
-    if (!gitStatus) return false;
-    if (gitStatus.has_repo === false) return false;
-    return gitStatus.sync_state !== "NO_REPO" || Boolean(gitStatus.current_branch);
-  }
-
-  function resolveGitSyncState() {
-    if (!gitStatus || gitStatus.has_repo === false) return "NO_REPO";
-    const explicitState = String(gitStatus.sync_state || "").toUpperCase();
-
-    const changedCount =
-      (gitStatus?.modified_files?.length || 0) +
-      (gitStatus?.staged_files?.length || 0) +
-      (gitStatus?.untracked_files?.length || 0);
-    const ahead = Number(gitStatus?.ahead_count || 0);
-    const behind = Number(gitStatus?.behind_count || 0);
-    if (
-      explicitState &&
-      explicitState !== "UNKNOWN" &&
-      explicitState !== "NO_REPO"
-    ) {
-      return explicitState;
-    }
-    if (changedCount > 0) return "CHANGES";
-    if (ahead > 0 && behind > 0) return "DIVERGED";
-    if (ahead > 0) return "AHEAD_REMOTE";
-    if (behind > 0) return "BEHIND_REMOTE";
-    if (gitStatus?.current_branch) return "SYNCED";
-    return "NO_REPO";
-  }
-
-  function allChangedFiles() {
-    if (!gitStatus) return [];
-    const staged = gitStatus.staged_files || [];
-    const modified = gitStatus.modified_files || [];
-    const untracked = gitStatus.untracked_files || [];
-    return Array.from(new Set([...staged, ...modified, ...untracked]));
-  }
-
-  function countChangedByAnyPath(fragments) {
-    return allChangedFiles().filter((file) =>
-      fragments.some((fragment) => file.includes(fragment)),
-    ).length;
-  }
-
-  function getGitStatusMeta() {
-    const syncState = resolveGitSyncState();
-    if (syncState === "SYNCED") {
-      return {
-        dotClass: "bg-emerald-500",
-        pillClass: "bg-emerald-100 text-emerald-800 border-emerald-200",
-        label: $t.git?.repo_status?.synced || "Synced",
-      };
-    }
-    if (syncState === "CHANGES") {
-      return {
-        dotClass: "bg-amber-500",
-        pillClass: "bg-amber-100 text-amber-800 border-amber-200",
-        label: $t.git?.repo_status?.changes || "Modified",
-      };
-    }
-    if (syncState === "AHEAD_REMOTE") {
-      return {
-        dotClass: "bg-blue-500",
-        pillClass: "bg-blue-100 text-blue-800 border-blue-200",
-        label: $t.git?.repo_status?.ahead_remote || "Ahead",
-      };
-    }
-    if (syncState === "BEHIND_REMOTE") {
-      return {
-        dotClass: "bg-indigo-500",
-        pillClass: "bg-indigo-100 text-indigo-800 border-indigo-200",
-        label: $t.git?.repo_status?.behind_remote || "Behind",
-      };
-    }
-    if (syncState === "DIVERGED") {
-      return {
-        dotClass: "bg-rose-500",
-        pillClass: "bg-rose-100 text-rose-800 border-rose-200",
-        label: $t.git?.repo_status?.diverged || "Diverged",
-      };
-    }
-    return {
-      dotClass: "bg-slate-400",
-      pillClass: "bg-slate-100 text-slate-700 border-slate-200",
-      label: $t.git?.repo_status?.no_repo || "Uninitialized",
-    };
-  }
-
-  async function loadGitStatus(targetDashboardRef = gitDashboardRef) {
-    if (!targetDashboardRef) return;
-    isGitStatusLoading = true;
-    gitStatusError = null;
-    gitDiffPreview = "";
-    try {
-      const status = await gitService.getStatus(targetDashboardRef, envId || null);
-      gitStatus = status;
-      if (status?.current_branch) {
-        currentBranch = status.current_branch;
-      }
-    } catch (err) {
-      gitStatusError = err.message || "Failed to load Git status";
-      gitStatus = {
-        sync_state: "NO_REPO",
-        current_branch: null,
-        has_repo: false,
-        modified_files: [],
-        staged_files: [],
-        untracked_files: [],
-        ahead_count: 0,
-        behind_count: 0,
-      };
-    } finally {
-      isGitStatusLoading = false;
-    }
-  }
-
-  async function loadGitDiffPreview() {
-    if (!hasGitRepository()) return;
-    isGitDiffLoading = true;
-    try {
-      const staged = await gitService.getDiff(gitDashboardRef, null, true, envId || null);
-      const unstaged = await gitService.getDiff(
-        gitDashboardRef,
-        null,
-        false,
-        envId || null,
-      );
-      gitDiffPreview = [staged, unstaged].filter(Boolean).join("\n\n");
-      if (!gitDiffPreview) {
-        addToast($t.git?.no_changes || "No changes detected", "info");
-      }
-    } catch (err) {
-      addToast(err.message || "Failed to load diff", "error");
-    } finally {
-      isGitDiffLoading = false;
-    }
-  }
-
-  async function runGitSyncAndOpenCommit() {
-    if (!hasGitRepository()) {
-      addToast($t.git?.not_linked || "Repository is not initialized", "error");
-      return;
-    }
-    if (isSyncingGit) return;
-    isSyncingGit = true;
-    try {
-      await gitService.sync(gitDashboardRef, envId || null, envId || null);
-      addToast($t.git?.sync_success || "Dashboard state synced to Git", "success");
-      showGitManager = true;
-      await loadGitStatus();
-    } catch (err) {
-      addToast(err.message || "Git sync failed", "error");
-    } finally {
-      isSyncingGit = false;
-    }
-  }
-
-  async function runGitPull() {
-    if (!hasGitRepository() || isPullingGit) return;
-    isPullingGit = true;
-    try {
-      await gitService.pull(gitDashboardRef, envId || null);
-      addToast($t.git?.pull_success || "Changes pulled from remote", "success");
-      await loadGitStatus();
-    } catch (err) {
-      addToast(err.message || "Git pull failed", "error");
-    } finally {
-      isPullingGit = false;
-    }
-  }
-
-  async function runGitPush() {
-    if (!hasGitRepository() || isPushingGit) return;
-    isPushingGit = true;
-    try {
-      await gitService.push(gitDashboardRef, envId || null);
-      addToast($t.git?.push_success || "Changes pushed to remote", "success");
-      await loadGitStatus();
-    } catch (err) {
-      addToast(err.message || "Git push failed", "error");
-    } finally {
-      isPushingGit = false;
-    }
-  }
-
-  async function handleBranchChange(event) {
-    const nextBranch = event?.detail?.branch;
-    if (!nextBranch) return;
-    currentBranch = nextBranch;
-    await loadGitStatus();
+  async function handleSyncAndOpenCommit() {
+    const success = await gitModel.syncRepository();
+    if (success) showGitManager = true;
   }
 
   $effect(() => {
@@ -545,7 +345,7 @@
     }
     if (!wasGitManagerOpen) return;
     wasGitManagerOpen = false;
-    void loadGitStatus();
+    void gitModel.loadStatus();
   });
 </script>
 
@@ -556,16 +356,16 @@
     {dashboardRef}
     {envId}
     {gitDashboardRef}
-    hasGitRepo={hasGitRepository()}
-    bind:currentBranch
-    {gitMeta}
-    {gitStatus}
+    hasGitRepo={gitModel.hasGitRepo}
+    bind:currentBranch={gitModel.currentBranch}
+    gitMeta={gitModel.meta}
+    gitStatus={gitModel.gitStatus}
     {llmReady}
     {isStartingBackup}
     {isStartingValidation}
     bind:showGitManager
     {goBack}
-    {handleBranchChange}
+    handleBranchChange={(e) => gitModel.handleBranchChange(e)}
     {runBackupTask}
     {runLlmValidationTask}
     {loadDashboardPage}
@@ -653,25 +453,25 @@
       </div>
 
       <DashboardGitManager
-        {isGitStatusLoading}
-        {gitStatusError}
-        hasGitRepo={hasGitRepository()}
-        {gitSyncState}
-        {gitStatus}
-        {changedChartsCount}
-        {changedDatasetsCount}
-        allChangedFiles={allChangedFiles()}
-        {runGitSyncAndOpenCommit}
-        {isSyncingGit}
-        {hasChangesToCommit}
-        {loadGitDiffPreview}
-        {isGitDiffLoading}
-        {runGitPull}
-        {isPullingGit}
-        {runGitPush}
-        {isPushingGit}
-        {gitDiffPreview}
-        {loadGitStatus}
+        isGitStatusLoading={gitModel.statusLoading}
+        gitStatusError={gitModel.statusError}
+        hasGitRepo={gitModel.hasGitRepo}
+        gitSyncState={gitModel.syncState}
+        gitStatus={gitModel.gitStatus}
+        changedChartsCount={gitModel.changedChartsCount}
+        changedDatasetsCount={gitModel.changedDatasetsCount}
+        allChangedFiles={gitModel.allChangedFilesList}
+        runGitSyncAndOpenCommit={handleSyncAndOpenCommit}
+        isSyncingGit={gitModel.syncing}
+        hasChangesToCommit={gitModel.hasChangesToCommit}
+        loadGitDiffPreview={() => gitModel.loadDiffPreview()}
+        isGitDiffLoading={gitModel.diffLoading}
+        runGitPull={() => gitModel.pullRepository()}
+        isPullingGit={gitModel.pulling}
+        runGitPush={() => gitModel.pushRepository()}
+        isPushingGit={gitModel.pushing}
+        gitDiffPreview={gitModel.diffPreview}
+        loadGitStatus={() => gitModel.loadStatus()}
         bind:showGitManager
       />
     </div>
@@ -733,7 +533,7 @@
             {formatDate}
           />
         {:else if activeTab === "git-history"}
-          {#if hasGitRepository() && gitDashboardRef}
+          {#if gitModel.hasGitRepo && gitDashboardRef}
             <CommitHistory dashboardId={gitDashboardRef} envId={envId || null} />
           {:else}
             <div class="rounded-lg border border-slate-200 bg-slate-50 px-4 py-6 text-sm text-slate-600">
diff --git a/frontend/src/routes/migration/+page.svelte b/frontend/src/routes/migration/+page.svelte
index ca7bd413a..53eb13fc8 100644
--- a/frontend/src/routes/migration/+page.svelte
+++ b/frontend/src/routes/migration/+page.svelte
@@ -1,39 +1,38 @@
-<!-- #region MigrationPage [C:4] [TYPE Page] [SEMANTICS sveltekit, migration, dashboard, dry-run, environment] -->
+<!-- #region MigrationPage [C:4] [TYPE Page] [SEMANTICS sveltekit, migration, dashboard, dry-run, environment, model-first] -->
 <!--
-@SEMANTICS: migration, dashboard, environment, dry-run, task-resume
-@BRIEF: Main migration dashboard page for environment selection, dry-run validation, and migration execution.
+@SEMANTICS: migration, dashboard, environment, dry-run, task-resume, model-first
+@BRIEF: Migration page — thin rendering layer. ALL logic lives in MigrationModel.
 @LAYER UI
-@RELATION DEPENDS_ON ->[ApiModule]
-@RELATION DEPENDS_ON ->[EXT:frontend:stores]
-@RELATION DEPENDS_ON ->[EXT:frontend:taskService]
-@RELATION BINDS_TO ->[EnvSelector]
-@RELATION BINDS_TO ->[DashboardGrid]
-@RELATION BINDS_TO ->[MappingTable]
-@RELATION BINDS_TO ->[EXT:frontend:TaskRunner]
-@RELATION BINDS_TO ->[TaskHistory]
-@RELATION BINDS_TO ->[TaskLogViewer]
-@RELATION BINDS_TO ->[PasswordPrompt]
-@INVARIANT: Migration start is blocked unless source and target environments are selected, distinct, and at least one dashboard is selected.
-@UX_STATE: [Idle] -> User configures source/target environments, dashboard selection, and migration options through a step-by-step wizard.
-@UX_STATE: [Loading] -> Environment/database/dry-run fetch operations disable relevant actions and show skeleton loaders.
-@UX_STATE: [Error] -> Error banner/prompt message is shown while keeping user input intact for correction.
-@UX_STATE: [Success] -> Dry-run summary or active task view is rendered after successful API operations.
-@UX_FEEDBACK: Inline error banner, disabled CTA states, loading labels, dry-run summary cards, modal dialogs.
-@UX_RECOVERY: User can adjust selection, refresh databases, retry dry-run/migration, resume task with passwords, or cancel modal flow.
-@UX_REACTIVITY: State transitions rely on Svelte reactive bindings and store subscription to selectedTask.
-@TEST_CONTRACT: [DashboardSelection + Environment IDs] -> [DryRunResult | TaskStartResult | ValidationError]
-@TEST_SCENARIO: start_migration_valid_selection -> Starts backend task and switches to task view.
-@TEST_SCENARIO: start_dry_run_valid_selection -> Renders pre-flight diff summary and risk panel.
-@TEST_SCENARIO: awaiting_input_task_selected -> Opens password prompt with requested databases.
+@RELATION BINDS_TO -> [MigrationModel]
+@RELATION DEPENDS_ON ->[EnvSelector]
+@RELATION DEPENDS_ON ->[DashboardGrid]
+@RELATION DEPENDS_ON ->[MappingTable]
+@RELATION DEPENDS_ON ->[EXT:frontend:TaskRunner]
+@RELATION DEPENDS_ON ->[TaskHistory]
+@RELATION DEPENDS_ON ->[TaskLogViewer]
+@RELATION DEPENDS_ON ->[PasswordPrompt]
+@INVARIANT: This component contains NO business logic — it only renders model state and calls model.action().
+@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).
+@UX_STATE: [review] -> Dry-run summary with diff cards, risk assessment.
+@UX_STATE: [executing] -> Task runner view with WebSocket logs.
+@UX_STATE: [error] -> Red banner with error message and dismiss button.
+@UX_FEEDBACK: Inline error banner, disabled CTA states, loading spinners.
+@UX_RECOVERY: Dismiss error, retry dry-run/migration, resume with passwords.
+@UX_REACTIVITY: ALL state from MigrationModel atoms. Password prompt via $effect → checkPasswordPrompt().
+@TEST_CONTRACT: [Model state] -> [Rendered UI]
+@TEST_SCENARIO: render_with_model -> Component renders step 1 with env selector.
+@TEST_SCENARIO: step_navigation -> Buttons call model.goToStep().
+@TEST_SCENARIO: password_prompt -> $effect triggers model.checkPasswordPrompt() on AWAITING_INPUT.
 @TEST_FIXTURE: migration_dry_run_fixture -> file:backend/tests/fixtures/migration_dry_run_fixture.json
-@TEST_EDGE: missing_field -> Empty source/target/selection blocks action and surfaces validation message.
-@TEST_EDGE: invalid_type -> Malformed API payload is surfaced through error state.
-@TEST_EDGE: external_fail -> API failures set error state and preserve recoverable UI controls.
-@TEST_INVARIANT: migration_guardrails_enforced -> VERIFIED_BY: [start_migration_valid_selection, start_dry_run_valid_selection, missing_field]
+@TEST_EDGE: missing_field -> Validation error surfaced from model.
+@TEST_EDGE: invalid_type -> API errors from model reflected in error state.
+@TEST_EDGE: external_fail -> Model sets error, component renders error banner.
+@TEST_INVARIANT: component_has_no_business_logic -> VERIFIED_BY: [render_with_model, step_navigation]
 -->
 
 <script lang="ts">
-  // [SECTION: IMPORTS]
   import { onMount } from "svelte";
   import { fromStore } from "svelte/store";
   import EnvSelector from "../../components/EnvSelector.svelte";
@@ -43,10 +42,7 @@
   import TaskHistory from "../../components/TaskHistory.svelte";
   import TaskLogViewer from "../../components/TaskLogViewer.svelte";
   import PasswordPrompt from "../../components/PasswordPrompt.svelte";
-  import { api } from "../../lib/api.js";
-  import { selectedTask } from "../../lib/stores.js";
-  import { resumeTask } from "../../services/taskService.js";
-  import { environmentContextStore } from '$lib/stores/environmentContext.js';
+  import { MigrationModel } from "../../lib/models/MigrationModel.svelte.ts";
   import type {
     DashboardMetadata,
     DashboardSelection,
@@ -54,371 +50,61 @@
   } from "../../types/dashboard";
   import { t } from "$lib/i18n";
   import { Button, Card, PageHeader } from "$lib/ui";
-  // [/SECTION]
 
-  // [SECTION: STATE]
-  let environments: any[] = $state([]);
-  let sourceEnvId = $state("");
-  let targetEnvId = $state("");
-  let replaceDb = $state(false);
-  let fixCrossFilters = $state(true);
-  let loading = $state(true);
-  let error = $state("");
-  let dashboards: DashboardMetadata[] = $state([]);
-  let selectedDashboardIds: number[] = $state([]);
-  let sourceDatabases: any[] = $state([]);
-  let targetDatabases: any[] = $state([]);
-  let mappings: any[] = $state([]);
-  let suggestions: any[] = $state([]);
-  let fetchingDbs = $state(false);
-  let dryRunLoading = $state(false);
-  let dryRunResult: MigrationDryRunResult | null = $state(null);
-  let currentStep = $state(1); // 1=environments, 2=dashboards, 3=review, 4=execute
+  // ── Model: single source of truth ───────────────────────────────
+  const model = new MigrationModel();
 
-  // UI State for Modals
-  let showLogViewer = $state(false);
-  let logViewerTaskId: string | null = $state(null);
-  let logViewerTaskStatus: string | null = $state(null);
+  // Store bindings (reactive, read from stores for TaskRunner + PasswordPrompt)
+  const selectedTaskStore = model.selectedTaskStore;
+  const taskSnap = fromStore(selectedTaskStore);
 
-  let showPasswordPrompt = $state(false);
-  let passwordPromptDatabases: string[] = $state([]);
-  let passwordPromptErrorMessage = $state("");
+  // ── Lifecycle ──────────────────────────────────────────────────
+  onMount(() => model.loadEnvironments());
 
-  // UI State
-  let showTaskHistory = $state(false);
-  // [/SECTION]
-
-  const selectedTaskState = fromStore(selectedTask);
-  const envContextState = fromStore(environmentContextStore);
-
-  const belief_scope = <T>(_id: string, fn: () => T): T => fn();
-
-  // Derived: steps completion status
-  let stepReady = $derived({
-    1: sourceEnvId !== "" && targetEnvId !== "" && sourceEnvId !== targetEnvId,
-    2: selectedDashboardIds.length > 0,
-    3: true, // review is always "ready" if we got here
-  });
-
-  // #region fetchEnvironments:Function [TYPE Function]
-  async function fetchEnvironments() {
-    return belief_scope("fetchEnvironments", async () => {
-      console.info("[EXT:frontend:fetchEnvironments][REASON] Initializing environment list for selection");
-      try {
-        environments = await api.getEnvironmentsList();
-        // Pre-fill source with active environment, leave target empty
-        const activeEnvId = envContextState.current?.selectedEnvId;
-        if (activeEnvId && environments.some((env) => env.id === activeEnvId)) {
-          sourceEnvId = activeEnvId;
-        }
-        console.info("[EXT:frontend:fetchEnvironments][REFLECT] Environments loaded", { count: environments.length });
-      } catch (e) {
-        console.error("[EXT:frontend:fetchEnvironments][EXPLORE] Failed to fetch environments", e);
-        error = e.message;
-      } finally {
-        loading = false;
-      }
-    });
-  }
-  // #endregion fetchEnvironments:Function
-
-  // #region fetchDashboards:Function [TYPE Function]
-  async function fetchDashboards(envId: string) {
-    return belief_scope("fetchDashboards", async () => {
-      console.info("[fetchDashboards][REASON] Fetching dashboards for environment", { envId });
-      try {
-        dashboards = await api.requestApi(`/environments/${envId}/dashboards`);
-        selectedDashboardIds = [];
-        console.info("[fetchDashboards][REFLECT] Dashboards loaded", { count: dashboards.length });
-      } catch (e) {
-        console.error("[fetchDashboards][EXPLORE] Failed to fetch dashboards", e);
-        error = e.message;
-        dashboards = [];
-      }
-    });
-  }
-  // #endregion fetchDashboards:Function
-
-  onMount(fetchEnvironments);
-
-  // #region ReactiveDashboardFetch:Block [TYPE Function]
+  // Reactive: watch for password-prompt signals from active task
   $effect(() => {
-    if (!sourceEnvId) return;
-    console.info("[ReactiveDashboardFetch][REASON] Source environment changed, fetching dashboards", { sourceEnvId });
-    void fetchDashboards(sourceEnvId);
+    model.checkPasswordPrompt();
   });
-  // #endregion ReactiveDashboardFetch:Block
 
-  // #region fetchDatabases:Function [TYPE Function]
-  async function fetchDatabases() {
-    return belief_scope("fetchDatabases", async () => {
-      if (!sourceEnvId || !targetEnvId) {
-        console.warn("[EXT:frontend:fetchDatabases][EXPLORE] Missing environment IDs for database fetch");
-        return;
-      }
-      console.info("[EXT:frontend:fetchDatabases][REASON] Fetching databases and suggestions for mapping", { sourceEnvId, targetEnvId });
-      fetchingDbs = true;
-      error = "";
-
-      try {
-        const [src, tgt, maps, sugs] = await Promise.all([
-          api.requestApi(`/environments/${sourceEnvId}/databases`),
-          api.requestApi(`/environments/${targetEnvId}/databases`),
-          api.requestApi(
-            `/mappings?source_env_id=${sourceEnvId}&target_env_id=${targetEnvId}`,
-          ),
-          api.postApi(`/mappings/suggest`, {
-            source_env_id: sourceEnvId,
-            target_env_id: targetEnvId,
-          }),
-        ]);
-
-        sourceDatabases = src;
-        targetDatabases = tgt;
-        mappings = maps;
-        suggestions = sugs;
-        console.info("[EXT:frontend:fetchDatabases][REFLECT] Databases and mappings loaded", {
-          sourceCount: src.length,
-          targetCount: tgt.length,
-          mappingCount: maps.length
-        });
-      } catch (e) {
-        console.error("[EXT:frontend:fetchDatabases][EXPLORE] Failed to fetch databases", e);
-        error = e.message;
-      } finally {
-        fetchingDbs = false;
-      }
-    });
-  }
-  // #endregion fetchDatabases:Function
-
-  // #region handleMappingUpdate:Function [TYPE Function]
-  async function handleMappingUpdate(event: CustomEvent) {
-    return belief_scope("handleMappingUpdate", async () => {
-      const { sourceUuid, targetUuid } = event.detail;
-      const sDb = sourceDatabases.find((d) => d.uuid === sourceUuid);
-      const tDb = targetDatabases.find((d) => d.uuid === targetUuid);
-
-      if (!sDb || !tDb) {
-        console.warn("[handleMappingUpdate][EXPLORE] Database not found for mapping", { sourceUuid, targetUuid });
-        return;
-      }
-
-      console.info("[handleMappingUpdate][REASON] Updating database mapping", { sourceUuid, targetUuid });
-      try {
-        const savedMapping = await api.postApi("/mappings", {
-          source_env_id: sourceEnvId,
-          target_env_id: targetEnvId,
-          source_db_uuid: sourceUuid,
-          target_db_uuid: targetUuid,
-          source_db_name: sDb.database_name,
-          target_db_name: tDb.database_name,
-        });
-
-        mappings = [
-          ...mappings.filter((m) => m.source_db_uuid !== sourceUuid),
-          savedMapping,
-        ];
-        console.info("[handleMappingUpdate][REFLECT] Mapping saved successfully");
-      } catch (e) {
-        console.error("[handleMappingUpdate][EXPLORE] Failed to save mapping", e);
-        error = e.message;
-      }
-    });
-  }
-  // #endregion handleMappingUpdate:Function
-
-  // #region handleViewLogs:Function [TYPE Function]
-  function handleViewLogs(event: CustomEvent) {
-    return belief_scope("handleViewLogs", () => {
-      const task = event.detail;
-      logViewerTaskId = task.id;
-      logViewerTaskStatus = task.status;
-      showLogViewer = true;
-    });
-  }
-  // #endregion handleViewLogs:Function
-
-  // #region handlePasswordPrompt:Function [TYPE Function]
-  // #region ReactivePasswordPrompt:Block [TYPE Function]
+  // @RATIONALE This $effect exists because DashboardGrid uses bind:selectedIds which bypasses model.toggleDashboard().
+  // The model self-enforces the invariant via toggleDashboard(), but the bind: path is outside model control.
+  // This guard ensures dryRunResult is cleared regardless of the mutation path.
+  // @INVARIANT: Dashboard selection change clears stale dry-run result
   $effect(() => {
-    const activeTask = selectedTaskState.current;
-    if (
-      !activeTask ||
-      activeTask.status !== "AWAITING_INPUT" ||
-      !activeTask.input_request
-    ) {
-      return;
-    }
-    const req = activeTask.input_request;
-    if (req.type === "database_password") {
-      console.info("[ReactivePasswordPrompt][REASON] Task awaiting database passwords", { taskId: activeTask.id });
-      passwordPromptDatabases = req.databases || [];
-      passwordPromptErrorMessage = req.error_message || "";
-      showPasswordPrompt = true;
-    }
+      const _ = model.selectedDashboardIds; // always track
+      if (model.dryRunResult) {
+          model.dryRunResult = null;
+      }
   });
-  // #endregion ReactivePasswordPrompt:Block
-  // #endregion handlePasswordPrompt:Function
-
-  // #region handleResumeMigration:Function [TYPE Function]
-  async function handleResumeMigration(event: CustomEvent) {
-    return belief_scope("handleResumeMigration", async () => {
-      if (!selectedTaskState.current) return;
-
-      const { passwords } = event.detail;
-      try {
-        await resumeTask(selectedTaskState.current.id, passwords);
-        showPasswordPrompt = false;
-      } catch (e) {
-        console.error("Failed to resume task:", e);
-        passwordPromptErrorMessage =
-          e.message || $t.migration?.resume_failed;
-      }
-    });
-  }
-  // #endregion handleResumeMigration:Function
-
-  // #region startMigration:Function [TYPE Function]
-  async function startMigration() {
-    return belief_scope("startMigration", async () => {
-      if (!sourceEnvId || !targetEnvId) {
-        console.warn("[startMigration][EXPLORE] Missing environment selection");
-        error = $t.migration?.select_both_envs || "Please select both source and target environments.";
-        return;
-      }
-      if (sourceEnvId === targetEnvId) {
-        console.warn("[startMigration][EXPLORE] Source and target environments are identical");
-        error = $t.migration?.different_envs || "Source and target environments must be different.";
-        return;
-      }
-      if (selectedDashboardIds.length === 0) {
-        console.warn("[startMigration][EXPLORE] No dashboards selected");
-        error = $t.migration?.select_dashboards || "Please select at least one dashboard to migrate.";
-        return;
-      }
-
-      console.info("[startMigration][REASON] Initiating migration execution", {
-        sourceEnvId, targetEnvId, dashboardCount: selectedDashboardIds.length
-      });
-      error = "";
-      try {
-        dryRunResult = null;
-        const selection: DashboardSelection = {
-          selected_ids: selectedDashboardIds,
-          source_env_id: sourceEnvId,
-          target_env_id: targetEnvId,
-          replace_db_config: replaceDb,
-          fix_cross_filters: fixCrossFilters,
-        };
-
-        const result = await api.postApi("/migration/execute", selection);
-        console.info("[startMigration][REFLECT] Migration task created", { taskId: result.task_id });
-
-        await new Promise((r) => setTimeout(r, 500));
-
-        try {
-          const task = await api.getTask(result.task_id);
-          selectedTask.set(task);
-          console.info("[startMigration][REFLECT] Task details fetched and store updated");
-        } catch (fetchErr) {
-          console.warn("[startMigration][EXPLORE] Could not fetch task details immediately, using placeholder", fetchErr);
-          selectedTask.set({
-            id: result.task_id,
-            plugin_id: "superset-migration",
-            status: "RUNNING",
-            logs: [],
-            params: {},
-          });
-        }
-      } catch (e) {
-        console.error("[startMigration][EXPLORE] Migration initiation failed", e);
-        error = e.message;
-      }
-    });
-  }
-  // #endregion startMigration:Function
-
-  // #region startDryRun:Function [TYPE Function]
-  async function startDryRun() {
-    return belief_scope("startDryRun", async () => {
-      if (!sourceEnvId || !targetEnvId) {
-        console.warn("[startDryRun][EXPLORE] Missing environment selection");
-        error = $t.migration?.select_both_envs || "Please select both source and target environments.";
-        return;
-      }
-      if (sourceEnvId === targetEnvId) {
-        console.warn("[startDryRun][EXPLORE] Source and target environments are identical");
-        error = $t.migration?.different_envs || "Source and target environments must be different.";
-        return;
-      }
-      if (selectedDashboardIds.length === 0) {
-        console.warn("[startDryRun][EXPLORE] No dashboards selected");
-        error = $t.migration?.select_dashboards || "Please select at least one dashboard to migrate.";
-        return;
-      }
-
-      console.info("[startDryRun][REASON] Initiating dry-run analysis", { sourceEnvId, targetEnvId });
-      error = "";
-      dryRunLoading = true;
-      try {
-        const selection: DashboardSelection = {
-          selected_ids: selectedDashboardIds,
-          source_env_id: sourceEnvId,
-          target_env_id: targetEnvId,
-          replace_db_config: replaceDb,
-          fix_cross_filters: fixCrossFilters,
-        };
-        dryRunResult = await api.postApi("/migration/dry-run", selection);
-        console.info("[startDryRun][REFLECT] Dry-run analysis completed", { riskScore: dryRunResult.risk.score });
-        currentStep = 3; // Move to review step on successful dry-run
-      } catch (e) {
-        console.error("[startDryRun][EXPLORE] Dry-run analysis failed", e);
-        error = e.message;
-        dryRunResult = null;
-      } finally {
-        dryRunLoading = false;
-      }
-    });
-  }
-  // #endregion startDryRun:Function
-
-  // Helper for step navigation
-  function goToStep(step: number) {
-    if (step <= currentStep || (step === 2 && stepReady[1]) || (step === 3 && stepReady[1] && stepReady[2]) || (step === 4 && dryRunResult)) {
-      currentStep = step;
-    }
-  }
 </script>
 
-<!-- [SECTION: TEMPLATE] -->
 <div class="max-w-6xl mx-auto p-4 sm:p-6 lg:p-8">
   <!-- #region MigrationHeader -->
   <div class="flex items-center justify-between mb-6">
     <PageHeader title={$t.nav.migration} />
     <button
-      onclick={() => showTaskHistory = !showTaskHistory}
+      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" />
       </svg>
       {$t.tasks?.recent || "Task History"}
-      <svg class="w-4 h-4 transition-transform" class:rotate-180={showTaskHistory} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <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>
   </div>
   <!-- #endregion MigrationHeader -->
 
-  {#if $selectedTask}
+  {#if taskSnap.current}
     <!-- #region ActiveTaskSection -->
     <div class="mb-6">
       <div class="flex items-center justify-between mb-4">
         <h2 class="text-lg font-semibold text-gray-900">
           {$t.tasks?.task_label || "Task"}
         </h2>
-        <Button variant="secondary" onclick={() => selectedTask.set(null)}>
+        <Button variant="secondary" onclick={() => selectedTaskStore.set(null)}>
           {$t.common.cancel}
         </Button>
       </div>
@@ -427,7 +113,7 @@
     <!-- #endregion ActiveTaskSection -->
   {:else}
     <!-- #region TaskHistoryPanel -->
-    {#if showTaskHistory}
+    {#if model.showTaskHistory}
       <div class="mb-6 overflow-hidden transition-all">
         <TaskHistory pluginId="superset-migration" />
       </div>
@@ -444,21 +130,21 @@
           { step: 4, label: $t.migration?.start || "Migrate" },
         ] as s}
           <button
-            onclick={() => goToStep(s.step)}
-            disabled={s.step > currentStep && !((s.step === 2 && stepReady[1]) || (s.step === 3 && stepReady[1] && stepReady[2]) || (s.step === 4 && dryRunResult))}
+            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))}
             class="flex flex-col items-center group"
           >
             <div class={`
               w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-all
-              ${currentStep > s.step
+              ${model.currentStep > s.step
                 ? 'bg-indigo-600 border-indigo-600 text-white'
-                : currentStep === s.step
+                : model.currentStep === s.step
                   ? 'bg-indigo-50 border-indigo-500 text-indigo-700'
                   : 'bg-white border-gray-300 text-gray-400'
               }
-              ${(s.step <= currentStep || (s.step === 2 && stepReady[1]) || (s.step === 3 && stepReady[1] && 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-indigo-400' : 'cursor-not-allowed'}
             `}>
-              {#if currentStep > s.step}
+              {#if model.currentStep > s.step}
                 <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.5" d="M5 13l4 4L19 7" />
                 </svg>
@@ -467,13 +153,13 @@
               {/if}
             </div>
             <span class="mt-2 text-xs font-medium hidden sm:block
-              ${currentStep === s.step ? 'text-indigo-700' : 'text-gray-500'}
+              ${model.currentStep === s.step ? 'text-indigo-700' : 'text-gray-500'}
             ">{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: {currentStep > s.step ? '100%' : '0%'}"></div>
+                <div class="h-0.5 bg-indigo-500 rounded transition-all duration-500" style="width: {model.currentStep > s.step ? '100%' : '0%'}"></div>
               </div>
             </div>
           {/if}
@@ -483,7 +169,7 @@
     <!-- #endregion StepProgressBar -->
 
     <!-- Loading State -->
-    {#if loading}
+    {#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>
@@ -495,7 +181,7 @@
       </div>
 
     <!-- Error State -->
-    {:else if error}
+    {:else if model.error}
       <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl">
         <div class="flex items-start gap-3">
           <div class="flex-shrink-0 w-5 h-5 text-red-500 mt-0.5">
@@ -504,9 +190,9 @@
             </svg>
           </div>
           <div class="flex-1">
-            <p class="text-sm font-medium text-red-800">{error}</p>
+            <p class="text-sm font-medium text-red-800">{model.error}</p>
           </div>
-          <button onclick={() => error = ""} class="text-red-400 hover:text-red-600" aria-label={$t.common?.close || "Close"}>
+          <button onclick={() => model.clearError()} class="text-red-400 hover:text-red-600" 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>
@@ -516,7 +202,7 @@
     {/if}
 
     <!-- #region Step1: Environment Selection -->
-    {#if currentStep === 1}
+    {#if model.currentStep === 1}
       <Card padding="none" class="mb-6">
         <div class="p-6">
           <div class="flex items-center gap-3 mb-4">
@@ -531,8 +217,9 @@
             </div>
             <EnvSelector
               label={$t.migration?.source_env || "Source Environment"}
-              bind:selectedId={sourceEnvId}
-              {environments}
+              selectedId={model.sourceEnvId}
+              environments={model.environments}
+              onchange={({ id }) => model.selectSourceEnv(id)}
             />
           </div>
           <div class="p-4 border border-gray-200 rounded-xl bg-white hover:border-indigo-300 transition-colors">
@@ -542,12 +229,13 @@
             </div>
             <EnvSelector
               label={$t.migration?.target_env || "Target Environment"}
-              bind:selectedId={targetEnvId}
-              {environments}
+              selectedId={model.targetEnvId}
+              environments={model.environments}
+              onchange={({ id }) => model.selectTargetEnv(id)}
             />
           </div>
         </div>
-        {#if sourceEnvId && targetEnvId && sourceEnvId === targetEnvId}
+        {#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">
               <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -558,7 +246,7 @@
           </div>
         {/if}
         <div class="mt-6 flex justify-end">
-          <Button onclick={() => goToStep(2)} disabled={!stepReady[1]}>
+          <Button onclick={() => model.goToStep(2)} disabled={!model.stepReady[1]}>
             {$t.dashboard?.next || "Next"} →
           </Button>
         </div>
@@ -568,7 +256,7 @@
     <!-- #endregion Step1: Environment Selection -->
 
     <!-- #region Step2: Dashboard Selection & Options -->
-    {#if currentStep === 2}
+    {#if model.currentStep === 2}
       <Card padding="none" class="mb-6">
         <div class="p-6">
           <div class="flex items-center gap-3 mb-4">
@@ -576,19 +264,19 @@
             <h3 class="text-lg font-semibold text-gray-900">{$t.migration?.select_dashboards_title || "Select Dashboards"}</h3>
           </div>
 
-          {#if sourceEnvId}
+          {#if model.sourceEnvId}
           <div class="mb-6">
             <DashboardGrid
-              {dashboards}
-              bind:selectedIds={selectedDashboardIds}
-              environmentId={sourceEnvId}
+              dashboards={model.dashboards}
+              bind:selectedIds={model.selectedDashboardIds}
+              environmentId={model.sourceEnvId}
             />
           </div>
-        {:else}
+          {:else}
           <p class="text-gray-500 italic">
             {$t.dashboard?.select_source || "Select a source environment to view dashboards."}
           </p>
-        {/if}
+          {/if}
 
         <!-- Migration Options -->
         <div class="border-t border-gray-100 pt-4 mt-2">
@@ -597,7 +285,8 @@
             <label class="flex items-start gap-3 p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors">
               <input
                 type="checkbox"
-                bind:checked={fixCrossFilters}
+                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"
               />
               <div>
@@ -609,7 +298,8 @@
             <label class="flex items-start gap-3 p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors">
               <input
                 type="checkbox"
-                bind:checked={replaceDb}
+                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"
               />
               <div>
@@ -621,53 +311,53 @@
         </div>
 
         <!-- Database Mapping Section -->
-        {#if replaceDb}
+        {#if model.replaceDb}
           <div class="mt-4 p-4 bg-gray-50 border border-gray-200 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
-                onclick={fetchDatabases}
-                disabled={fetchingDbs || !sourceEnvId || !targetEnvId}
+                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={fetchingDbs} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <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>
             </div>
-            {#if fetchingDbs}
+            {#if model.fetchingDbs}
               <div class="flex items-center gap-2 text-sm text-gray-500">
                 <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>
                 <span>{$t.migration?.loading_dbs || "Loading databases and suggestions..."}</span>
               </div>
-            {:else if sourceDatabases.length > 0}
+            {:else if model.sourceDatabases.length > 0}
               <MappingTable
-                {sourceDatabases}
-                {targetDatabases}
-                {mappings}
-                {suggestions}
-                onupdate={handleMappingUpdate}
+                sourceDatabases={model.sourceDatabases}
+                targetDatabases={model.targetDatabases}
+                mappings={model.mappings}
+                suggestions={model.suggestions}
+                onupdate={(e) => model.saveMapping(e.detail.sourceUuid, e.detail.targetUuid)}
               />
-            {:else if sourceEnvId && targetEnvId}
+            {: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>
             {/if}
           </div>
         {/if}
 
         <div class="mt-6 flex items-center justify-between">
-          <Button variant="secondary" onclick={() => goToStep(1)}>
+          <Button variant="secondary" onclick={() => model.goToStep(1)}>
             ← {$t.common.back}
           </Button>
           <div class="flex items-center gap-3">
             <Button
               variant="secondary"
-              onclick={startDryRun}
-              disabled={!stepReady[2] || dryRunLoading}
+              onclick={() => model.calculateDryRun()}
+              disabled={!model.stepReady[2] || model.dryRunLoading}
             >
-              {#if dryRunLoading}
+              {#if model.dryRunLoading}
                 <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>
               {/if}
               {$t.dashboard?.view_summary || "Dry Run"}
@@ -680,7 +370,7 @@
     <!-- #endregion Step2: Dashboard Selection & Options -->
 
     <!-- #region Step3: Review & Dry-Run Results -->
-    {#if currentStep === 3}
+    {#if model.currentStep === 3}
       <Card padding="none" class="mb-6">
         <div class="p-6">
           <div class="flex items-center gap-3 mb-4">
@@ -688,7 +378,7 @@
             <h3 class="text-lg font-semibold text-gray-900">{$t.tasks?.summary_report || "Review & Validate"}</h3>
           </div>
 
-        {#if dryRunResult}
+        {#if model.dryRunResult}
           <!-- Selection Summary -->
           <div class="mb-6 p-4 bg-indigo-50 border border-indigo-100 rounded-xl">
             <div class="flex items-center gap-2 mb-2">
@@ -698,7 +388,7 @@
               <h3 class="text-sm font-semibold text-indigo-800">{$t.dashboard?.selected_dashboards || "Selected Dashboards"}</h3>
             </div>
             <div class="flex flex-wrap gap-2">
-              {#each dryRunResult.selected_dashboard_titles || [] as title}
+              {#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">
                   {title}
                 </span>
@@ -721,15 +411,15 @@
               <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">{dryRunResult.summary.dashboards.create}</span>
+                  <span class="font-semibold text-emerald-600">{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">{dryRunResult.summary.dashboards.update}</span>
+                  <span class="font-semibold text-amber-600">{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">{dryRunResult.summary.dashboards.delete}</span>
+                  <span class="font-semibold text-red-600">{model.dryRunResult.summary.dashboards.delete}</span>
                 </div>
               </div>
             </div>
@@ -747,15 +437,15 @@
               <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">{dryRunResult.summary.charts.create}</span>
+                  <span class="font-semibold text-emerald-600">{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">{dryRunResult.summary.charts.update}</span>
+                  <span class="font-semibold text-amber-600">{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">{dryRunResult.summary.charts.delete}</span>
+                  <span class="font-semibold text-red-600">{model.dryRunResult.summary.charts.delete}</span>
                 </div>
               </div>
             </div>
@@ -773,15 +463,15 @@
               <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">{dryRunResult.summary.datasets.create}</span>
+                  <span class="font-semibold text-emerald-600">{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">{dryRunResult.summary.datasets.update}</span>
+                  <span class="font-semibold text-amber-600">{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">{dryRunResult.summary.datasets.delete}</span>
+                  <span class="font-semibold text-red-600">{model.dryRunResult.summary.datasets.delete}</span>
                 </div>
               </div>
             </div>
@@ -797,26 +487,24 @@
                 <h3 class="text-sm font-semibold text-gray-700">{$t.tasks?.issues || "Risk Assessment"}</h3>
               </div>
               <div class="flex items-center gap-3">
-                <!-- Risk Score Badge -->
                 <div class="flex items-center gap-2">
                   <span class="text-xs text-gray-500">Score:</span>
                   <div class={`
                     px-2.5 py-1 rounded-full text-xs font-bold
-                    ${dryRunResult.risk.score <= 20 ? 'bg-emerald-100 text-emerald-700' :
-                      dryRunResult.risk.score <= 50 ? 'bg-amber-100 text-amber-700' :
+                    ${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'}
                   `}>
-                    {dryRunResult.risk.score}/100
+                    {model.dryRunResult.risk.score}/100
                   </div>
                 </div>
-                <!-- Risk Level -->
                 <div class={`
                   px-2.5 py-1 rounded-full text-xs font-bold
-                  ${dryRunResult.risk.level === 'low' ? 'bg-emerald-100 text-emerald-700' :
-                    dryRunResult.risk.level === 'medium' ? 'bg-amber-100 text-amber-700' :
+                  ${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'}
                 `}>
-                  {dryRunResult.risk.level.toUpperCase()}
+                  {model.dryRunResult.risk.level.toUpperCase()}
                 </div>
               </div>
             </div>
@@ -825,17 +513,17 @@
             <div class="w-full h-2 bg-gray-100 rounded-full mb-4 overflow-hidden">
               <div
                 class="h-full rounded-full transition-all duration-700"
-                class:bg-emerald-500={dryRunResult.risk.score <= 20}
-                class:bg-amber-500={dryRunResult.risk.score > 20 && dryRunResult.risk.score <= 50}
-                class:bg-red-500={dryRunResult.risk.score > 50}
-                style="width: {dryRunResult.risk.score}%"
+                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}
+                style="width: {model.dryRunResult.risk.score}%"
               ></div>
             </div>
 
             <!-- Risk Items -->
-            {#if dryRunResult.risk.items && dryRunResult.risk.items.length > 0}
+            {#if model.dryRunResult.risk.items && model.dryRunResult.risk.items.length > 0}
               <div class="space-y-2">
-                {#each dryRunResult.risk.items as item}
+                {#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'}
@@ -857,7 +545,7 @@
             {/if}
           </div>
 
-          <!-- Raw JSON Details (collapsible) -->
+          <!-- 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">
               <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -865,7 +553,7 @@
               </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(dryRunResult, null, 2)}</pre>
+            <pre class="p-4 max-h-72 overflow-auto text-xs bg-gray-50 text-gray-700">{JSON.stringify(model.dryRunResult, null, 2)}</pre>
           </details>
         {:else}
           <div class="flex flex-col items-center justify-center py-8 text-gray-400">
@@ -877,15 +565,15 @@
         {/if}
 
         <div class="mt-6 flex items-center justify-between border-t border-gray-100 pt-6">
-          <Button variant="secondary" onclick={() => goToStep(2)}>
+          <Button variant="secondary" onclick={() => model.goToStep(2)}>
             ← {$t.common.back}
           </Button>
           <Button
             onclick={() => {
-              currentStep = 4;
-              startMigration();
+              model.goToStep(4);
+              model.executeMigration();
             }}
-            disabled={!dryRunResult}
+            disabled={!model.dryRunResult}
           >
             {$t.migration?.start || "Start Migration"}
           </Button>
@@ -896,7 +584,7 @@
     <!-- #endregion Step3: Review & Dry-Run Results -->
 
     <!-- #region Step4: Migration in Progress (handled by ActiveTaskSection above) -->
-    {#if currentStep === 4 && !$selectedTask}
+    {#if model.currentStep === 4 && !taskSnap.current}
       <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">
@@ -904,23 +592,23 @@
           </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>
-          <Button variant="secondary" class="mt-6" onclick={() => currentStep = 3}>
+          <Button variant="secondary" class="mt-6" onclick={() => model.goToStep(3)}>
             ← {$t.common.back}
           </Button>
         </div>
       </Card>
     {/if}
-    <!-- #endregion Step4: Migration in Progress (handled by ActiveTaskSection above) -->
+    <!-- #endregion Step4: Migration in Progress -->
 
     <!-- Quick Actions when no step is active -->
-    {#if !currentStep || currentStep === 0}
+    {#if !model.currentStep || model.currentStep === 0}
       <Card class="mb-6">
         <div class="flex flex-col items-center justify-center py-12 text-gray-400">
           <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={() => currentStep = 1} class="mt-4 text-indigo-600 hover:text-indigo-800 text-sm font-medium">
+          <button onclick={() => model.goToStep(1)} class="mt-4 text-indigo-600 hover:text-indigo-800 text-sm font-medium">
             {$t.migration?.source_env || "Get Started"} →
           </button>
         </div>
@@ -931,24 +619,18 @@
 
 <!-- #region MigrationModals -->
 <TaskLogViewer
-  bind:show={showLogViewer}
-  taskId={logViewerTaskId}
-  taskStatus={logViewerTaskStatus}
-  onclose={() => {
-    console.info("[MigrationModals][REASON] Closing log viewer");
-    showLogViewer = false;
-  }}
+  show={model.showLogViewer}
+  taskId={model.logViewerTaskId}
+  taskStatus={model.logViewerTaskStatus}
+  onclose={() => model.closeLogViewer()}
 />
 
 <PasswordPrompt
-  bind:show={showPasswordPrompt}
-  databases={passwordPromptDatabases}
-  errorMessage={passwordPromptErrorMessage}
-  onresume={handleResumeMigration}
-  oncancel={() => {
-    console.info("[MigrationModals][REASON] User cancelled password prompt");
-    showPasswordPrompt = false;
-  }}
+  show={model.showPasswordPrompt}
+  databases={model.passwordPromptDatabases}
+  errorMessage={model.passwordPromptErrorMessage}
+  onresume={(e) => model.resumeMigration(e.detail.passwords)}
+  oncancel={() => model.showPasswordPrompt = false}
 />
 <!-- #endregion MigrationModals -->
 
diff --git a/frontend/src/routes/migration/mappings/+page.svelte b/frontend/src/routes/migration/mappings/+page.svelte
index d0a2aa8d1..f1de0d862 100644
--- a/frontend/src/routes/migration/mappings/+page.svelte
+++ b/frontend/src/routes/migration/mappings/+page.svelte
@@ -1,238 +1,105 @@
 <!-- #region MigrationMappingsPage [C:3] [TYPE Page] [SEMANTICS sveltekit, migration, mapping, fuzzy, environment] -->
-<!-- @BRIEF Page component: routes/migration/mappings/+page.svelte -->
+<!-- @BRIEF Page component: routes/migration/mappings/+page.svelte — uses MappingsModel for all state and actions. -->
 <!-- @LAYER Page -->
 <!--
 @SEMANTICS: migration, mapping, environment, fuzzy-matching, persistence
 @PURPOSE: Render and orchestrate mapping management UI for source/target environments with backend persistence.
 @LAYER UI
-@RELATION DEPENDS_ON ->[EXT:frontend:api.client]
-@RELATION DEPENDS_ON ->[EnvSelector]
+@RELATION DEPENDS_ON ->[MappingsModel]
 @RELATION DEPENDS_ON ->[MappingTable]
-@RELATION DEPENDS_ON ->[EXT:frontend:i18n.t]
+@RELATION DEPENDS_ON ->[EnvSelector]
 @RELATION BINDS_TO ->[EXT:frontend:migration.mappings.route]
-@INVARIANT: Persisted mapping state in backend remains the source of truth for rendered mapping pairs.
+@INVARIANT: No business logic in the page component — all state and actions delegated to MappingsModel.
+@INVARIANT: Changing source environment resets target databases, mappings, suggestions, and target env.
+@INVARIANT: Changing target environment resets target databases, mappings, and suggestions.
 @PRE: Translation store and API client are available; route is mounted in authenticated UI shell.
-@POST: UI exposes deterministic Idle/Loading/Error/Success states for environment loading, database fetch, and mapping save.
-@SIDE_EFFECT: Performs network I/O to environment/database/mapping endpoints and mutates local UI state.
-@DATA_CONTRACT: Input(Event: update{sourceUuid,targetUuid}) -> Model(MappingPayload); Output(UIState{environments,databases,mappings,suggestions,status})
+@POST: UI exposes deterministic Idle/Loading/Error/Success states via model atoms.
+@SIDE_EFFECT: MappingsModel performs network I/O to environment/database/mapping endpoints.
 @UX_STATE: Idle -> Await environment selection and user-triggered fetch.
 @UX_STATE: Loading -> Show loading text/spinner while environments or databases are fetched.
 @UX_STATE: Error -> Render red alert panel with backend error message.
 @UX_STATE: Success -> Render green confirmation panel after mapping save.
 @UX_FEEDBACK: Error panel for failed API calls; success panel for persisted mapping confirmation.
 @UX_RECOVERY: Retry via "fetch databases" action; reselection of environments clears stale arrays.
-@UX_REACTIVITY: Svelte bind/on directives and reactive template branches coordinate state transitions (legacy route; no semantic logic mutation in this task).
-@TEST_CONTRACT: [Valid source/target env IDs + fetch click] -> [Databases, mappings, suggestions rendered]
-@TEST_SCENARIO: [save_mapping_success] -> [success banner appears and mapping list replaces same-source item]
-@TEST_SCENARIO: [fetch_env_fail] -> [error banner appears and loading state exits]
-@TEST_FIXTURE: [migration_mapping_pair] -> file:backend/tests/fixtures/migration_dry_run_fixture.json
-@TEST_EDGE: [missing_field] ->[event.detail lacks sourceUuid/targetUuid => no save]
-@TEST_EDGE: [invalid_type] ->[non-string env IDs => fetch disabled/guarded]
-@TEST_EDGE: [external_fail] ->[API request rejection => error state]
-@TEST_INVARIANT: [backend_source_of_truth] -> VERIFIED_BY: [save_mapping_success, fetch_env_fail]
-@CRITICAL_TRACE: Frontend scope; Python belief_scope/logger are not applicable in Svelte runtime. Reflective tracing, when added, must use console prefix [ID][REFLECT].
+@UX_REACTIVITY: MappingsModel atoms ($state) drive all template reactivity.
 -->
-
 <script lang="ts">
-  // #region MappingsPageScript:Block [TYPE Function]
-  // @PURPOSE: Define imports, state, and handlers that drive migration mappings page FSM.
-  // @RELATION CALLS ->[EXT:frontend:fetchEnvironments]
-  // @RELATION CALLS ->[EXT:frontend:fetchDatabases]
-  // @RELATION CALLS ->[EXT:frontend:handleUpdate]
+  // #region MappingsPageScript [C:3] [TYPE Block] [SEMANTICS page-script,model]
+  // @BRIEF Page script — instantiates MappingsModel and delegates all state/actions to it.
+  // @RELATION CALLS -> [MappingsModel]
+  // @INVARIANT: No local state or business logic. All atoms and actions come from model.
 
-  // #region Imports:Block [TYPE Function]
   import { onMount } from 'svelte';
-  import { api } from '../../../lib/api.js';
+  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 { Button, PageHeader } from '$lib/ui';
-  import { fromStore } from 'svelte/store';
-  import { environmentContextStore } from '$lib/stores/environmentContext.js';
-  // #endregion Imports:Block
 
-  // #region UiState:Store [TYPE Function]
-  // @PURPOSE: Maintain local page state for environments, fetched databases, mappings, suggestions, and UX messages.
-  let environments = [];
-  let sourceEnvId = "";
-  let targetEnvId = "";
-  const envContextState = fromStore(environmentContextStore);
-  let sourceDatabases = [];
-  let targetDatabases = [];
-  let mappings = [];
-  let suggestions = [];
-  let loading = true;
-  let fetchingDbs = false;
-  let error = "";
-  let success = "";
-  // #endregion UiState:Store
+  /** @type {MappingsModel} */
+  const model = new MappingsModel();
 
-  // #region belief_scope:Function [TYPE Function]
-  // @PURPOSE: Frontend semantic scope wrapper for CRITICAL trace boundaries without changing business behavior.
-  // @PRE: scopeId is non-empty and run is callable.
-  // @POST: Executes run exactly once and returns/rejects with the same outcome.
-  // @SIDE_EFFECT: Emits trace logs for semantic scope entrance/exit.
-  // @DATA_CONTRACT: Input(scopeId:string, run:() => Promise<T>) -> Output(Promise<T>)
-  async function belief_scope<T>(scopeId: string, run: () => Promise<T>): Promise<T> {
-    console.info(`[${scopeId}][REASON] belief_scope.enter`);
-    try {
-      return await run();
-    } finally {
-      console.info(`[${scopeId}][REFLECT] belief_scope.exit`);
-    }
-  }
-  // #endregion belief_scope:Function
-
-  // #region fetchEnvironments:Function [TYPE Function]
-  // @PURPOSE: Load environment options for source/target selectors on initial mount.
-  // @PRE: API client is initialized and route has mounted.
-  // @POST: loading=false and environments populated on success or error message set on failure.
-  // @SIDE_EFFECT: Network I/O to environments endpoint; mutates environments/error/loading.
-  // @DATA_CONTRACT: Input(void) -> Output(EnvironmentSummary[])
-  async function fetchEnvironments() {
-    return belief_scope('migration.mappings.fetchEnvironments', async () => {
-      try {
-        environments = await api.getEnvironmentsList();
-        // Pre-fill source with active environment, leave target empty
-        const activeEnvId = envContextState.current?.selectedEnvId;
-        if (activeEnvId && environments.some((env) => env.id === activeEnvId)) {
-          sourceEnvId = activeEnvId;
-        }
-      } catch (e) {
-        error = e.message;
-      } finally {
-        loading = false;
-      }
-    });
-  }
-  // #endregion fetchEnvironments:Function
-
-  onMount(fetchEnvironments);
-
-  // #region fetchDatabases:Function [TYPE Function]
-  // @PURPOSE: Fetch both environment database catalogs, existing mappings, and suggested matches.
-  // @PRE: sourceEnvId and targetEnvId are both selected and non-empty.
-  // @POST: fetchingDbs=false and sourceDatabases/targetDatabases/mappings/suggestions updated or error set.
-  // @SIDE_EFFECT: Concurrent network I/O to environments, mappings, and suggestion endpoints; clears transient messages.
-  // @DATA_CONTRACT: Input({sourceEnvId,targetEnvId}) -> Output({sourceDatabases,targetDatabases,mappings,suggestions})
-  async function fetchDatabases() {
-    return belief_scope('migration.mappings.fetchDatabases', async () => {
-      if (!sourceEnvId || !targetEnvId) return;
-      fetchingDbs = true;
-      error = "";
-      success = "";
-      
-      try {
-        const [src, tgt, maps, sugs] = await Promise.all([
-          api.requestApi(`/environments/${sourceEnvId}/databases`),
-          api.requestApi(`/environments/${targetEnvId}/databases`),
-          api.requestApi(`/mappings?source_env_id=${sourceEnvId}&target_env_id=${targetEnvId}`),
-          api.postApi(`/mappings/suggest`, { source_env_id: sourceEnvId, target_env_id: targetEnvId })
-        ]);
-
-        sourceDatabases = src;
-        targetDatabases = tgt;
-        mappings = maps;
-        suggestions = sugs;
-      } catch (e) {
-        error = e.message;
-      } finally {
-        fetchingDbs = false;
-      }
-    });
-  }
-  // #endregion fetchDatabases:Function
-
-  // #region handleUpdate:Function [TYPE Function]
-  // @PURPOSE: Persist a selected mapping pair and reconcile local mapping list by source database UUID.
-  // @PRE: event.detail includes sourceUuid/targetUuid and matching source/target database records exist.
-  // @POST: mapping persisted; local mappings replaced for same source UUID; success or error feedback shown.
-  // @SIDE_EFFECT: POST /mappings network I/O; mutates mappings/success/error.
-  // @DATA_CONTRACT: Input(CustomEvent<{sourceUuid:string,targetUuid:string}>) -> Output(MappingRecord persisted + UI feedback)
-  async function handleUpdate(event: CustomEvent) {
-    return belief_scope('migration.mappings.handleUpdate', async () => {
-      const { sourceUuid, targetUuid } = event.detail;
-      const sDb = sourceDatabases.find(d => d.uuid === sourceUuid);
-      const tDb = targetDatabases.find(d => d.uuid === targetUuid);
-      
-      if (!sDb || !tDb) return;
-
-      try {
-        const savedMapping = await api.postApi('/mappings', {
-          source_env_id: sourceEnvId,
-          target_env_id: targetEnvId,
-          source_db_uuid: sourceUuid,
-          target_db_uuid: targetUuid,
-          source_db_name: sDb.database_name,
-          target_db_name: tDb.database_name
-        });
-
-        mappings = [...mappings.filter(m => m.source_db_uuid !== sourceUuid), savedMapping];
-        success = $t.migration?.mapping_saved ;
-      } catch (e) {
-        error = e.message;
-      }
-    });
-  }
-  // #endregion handleUpdate:Function
-  // #endregion MappingsPageScript:Block
+  onMount(() => model.loadEnvironments());
+  // #endregion MappingsPageScript
 </script>
 
 <!-- #region MappingsPageTemplate [C:2] [TYPE Block] [SEMANTICS migration, mapping, page-layout] -->
 <!-- @BRIEF Mapping page template with environment selectors, database mapping table, and action buttons. -->
+<!-- @RELATION READS -> [MappingsModel.environments, .sourceDatabases, .targetDatabases, .mappings, .suggestions, .loading, .fetchingDbs, .error, .success] -->
+<!-- @RELATION CALLS -> [MappingsModel.selectSourceEnv, .selectTargetEnv, .fetchDatabases, .saveMapping] -->
 <div class="max-w-6xl mx-auto p-6">
-  <PageHeader title={$t.migration?.mapping_management } />
+  <PageHeader title={$t.migration?.mapping_management} />
 
-  {#if loading}
-    <p>{$t.migration?.loading_envs }</p>
+  {#if model.loading}
+    <p>{$t.migration?.loading_envs}</p>
   {:else}
     <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
       <EnvSelector
-        label={$t.migration?.source_env }
-        bind:selectedId={sourceEnvId}
-        {environments}
-        onchange={() => { sourceDatabases = []; mappings = []; suggestions = []; }}
+        label={$t.migration?.source_env}
+        selectedId={model.sourceEnvId}
+        environments={model.environments}
+        onchange={(e) => model.selectSourceEnv(e.id)}
       />
       <EnvSelector
-        label={$t.migration?.target_env }
-        bind:selectedId={targetEnvId}
-        {environments}
-        onchange={() => { targetDatabases = []; mappings = []; suggestions = []; }}
+        label={$t.migration?.target_env}
+        selectedId={model.targetEnvId}
+        environments={model.environments}
+        onchange={(e) => model.selectTargetEnv(e.id)}
       />
     </div>
 
     <div class="mb-8">
       <Button
-        onclick={fetchDatabases}
-        disabled={!sourceEnvId || !targetEnvId || sourceEnvId === targetEnvId || fetchingDbs}
-        isLoading={fetchingDbs}
+        onclick={() => model.fetchDatabases()}
+        disabled={!model.sourceEnvId || !model.targetEnvId || model.sourceEnvId === model.targetEnvId || model.fetchingDbs}
+        isLoading={model.fetchingDbs}
       >
-        {$t.migration?.fetch_dbs }
+        {$t.migration?.fetch_dbs}
       </Button>
     </div>
 
-    {#if error}
+    {#if model.error}
       <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
-        {error}
+        {model.error}
       </div>
     {/if}
 
-    {#if success}
+    {#if model.success}
       <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
-        {success}
+        {model.success}
       </div>
     {/if}
 
-    {#if sourceDatabases.length > 0}
+    {#if model.sourceDatabases.length > 0}
       <MappingTable
-        {sourceDatabases}
-        {targetDatabases}
-        {mappings}
-        {suggestions}
-        onupdate={handleUpdate}
+        sourceDatabases={model.sourceDatabases}
+        targetDatabases={model.targetDatabases}
+        mappings={model.mappings}
+        suggestions={model.suggestions}
+        onupdate={(detail) => model.saveMapping(detail.sourceUuid, detail.targetUuid)}
       />
-    {:else if !fetchingDbs && sourceEnvId && targetEnvId}
-      <p class="text-gray-500 italic">{$t.migration?.mapping_hint }</p>
+    {:else if !model.fetchingDbs && model.sourceEnvId && model.targetEnvId}
+      <p class="text-gray-500 italic">{$t.migration?.mapping_hint}</p>
     {/if}
   {/if}
 </div>
diff --git a/frontend/src/routes/settings/MigrationMappingsTable.svelte b/frontend/src/routes/settings/MigrationMappingsTable.svelte
index 940c0a6c5..37392e74d 100644
--- a/frontend/src/routes/settings/MigrationMappingsTable.svelte
+++ b/frontend/src/routes/settings/MigrationMappingsTable.svelte
@@ -2,6 +2,7 @@
 <!-- @BRIEF Mappings data table with search, filtering, and pagination for migration sync resources. Isolated from the main MigrationSettings to keep each module < 400 lines. -->
 <!-- @LAYER UI -->
 <!-- @RELATION DEPENDS_ON -> [EXT:frontend:api_module] -->
+<!-- @RELATION BINDS_TO -> [EXT:backend:/migration/mappings-data] -->
 <!-- @PRE: API client initialized, refreshKey provided by parent. -->
 <!-- @POST: User can search, filter by environment/type, and paginate through resource mappings. -->
 <!-- @UX_STATE Loading -> Loading indicator in table body, refresh button disabled. -->
diff --git a/frontend/src/routes/settings/MigrationSettings.svelte b/frontend/src/routes/settings/MigrationSettings.svelte
index 9770bd001..5ff1e6815 100644
--- a/frontend/src/routes/settings/MigrationSettings.svelte
+++ b/frontend/src/routes/settings/MigrationSettings.svelte
@@ -1,6 +1,7 @@
 <!-- #region MigrationSettings [C:3] [TYPE Component] [SEMANTICS settings, migration, sync, cron, mappings] -->
 <!-- @BRIEF Migration sync configuration tab: cron schedule, sync now, mappings table with filtering and pagination. -->
 <!-- @LAYER UI -->
+<!-- @RELATION BINDS_TO -> [MigrationSettingsModel] -->
 <!-- @RELATION CALLS -> [EXT:frontend:api_module] -->
 <!-- @PRE: API client initialized. -->
 <!-- @POST: User can configure sync schedule, trigger sync, and browse resource mappings. -->
@@ -8,53 +9,34 @@
 <!-- @UX_STATE Loaded -> Full migration sync panel with schedule and mappings table. -->
 <!-- @UX_FEEDBACK Toast on save/sync/failure. -->
 <script>
+  import { onMount } from "svelte";
   import { t } from "$lib/i18n";
-  import { api } from "$lib/api.js";
   import { addToast } from "$lib/toasts";
+  import { MigrationSettingsModel } from "$lib/models/MigrationSettingsModel.svelte.ts";
   import MigrationMappingsTable from "./MigrationMappingsTable.svelte";
   import HelpTooltip from "$lib/ui/HelpTooltip.svelte";
 
-  let refreshKey = $state(0);
-  let isSavingMigration = $state(false);
-  let isSyncing = $state(false);
-  let migrationCron = $state("0 2 * * *");
+  let model = $state(new MigrationSettingsModel());
 
-  async function loadMigrationSettings() {
-    try {
-      const settingsRes = await api.requestApi("/migration/settings");
-      migrationCron = settingsRes.cron;
-    } catch (err) {
-      console.error("[MigrationSettings] Failed to load:", err);
-    }
-  }
+  onMount(() => {
+    model.loadSettings();
+  });
 
   async function saveMigrationSettings() {
-    isSavingMigration = true;
-    try {
-      await api.putApi("/migration/settings", { cron: migrationCron });
-      addToast($t.settings?.save_success, "success");
-    } catch (err) {
-      addToast($t.settings?.save_failed, "error");
-    } finally {
-      isSavingMigration = false;
+    await model.saveSettings({ cron: model.cron });
+    if (model.success) {
+      addToast($t.settings?.save_success || model.success, "success");
+    } else if (model.error) {
+      addToast($t.settings?.save_failed || model.error, "error");
     }
   }
 
   async function triggerSyncNow() {
-    isSyncing = true;
-    try {
-      const result = await api.postApi("/migration/sync-now", {});
-      addToast(
-        `Synced ${result.synced_count} environment(s)${result.failed_count > 0 ? `, ${result.failed_count} failed` : ""}`,
-        result.failed_count > 0 ? "warning" : "success",
-      );
-      refreshKey++;
-      await loadMigrationSettings();
-    } catch (err) {
-      console.error("[MigrationSettings] Sync failed:", err);
-      addToast(err.message || $t.settings?.migration_sync_failed, "error");
-    } finally {
-      isSyncing = false;
+    await model.triggerSyncNow();
+    if (model.success) {
+      addToast(model.success, model.success.includes("failed") ? "warning" : "success");
+    } else if (model.error) {
+      addToast($t.settings?.migration_sync_failed || model.error, "error");
     }
   }
 </script>
@@ -86,7 +68,7 @@
         <input
           type="text"
           id="migration_cron"
-          bind:value={migrationCron}
+          bind:value={model.cron}
           placeholder={$t.settings?.migration_cron_placeholder}
           class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 font-mono text-sm"
         />
@@ -96,17 +78,17 @@
       </div>
       <button
         onclick={saveMigrationSettings}
-        disabled={isSavingMigration}
+        disabled={model.saving}
         class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-hover h-[42px] min-w-[100px] flex items-center justify-center disabled:opacity-50"
       >
-        {isSavingMigration ? $t.settings?.saving : $t.common?.save}
+        {model.saving ? $t.settings?.saving : $t.common?.save}
       </button>
       <button
         onclick={triggerSyncNow}
-        disabled={isSyncing}
+        disabled={model.syncing}
         class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 h-[42px] min-w-[150px] flex items-center justify-center gap-2 disabled:opacity-50"
       >
-        {#if isSyncing}
+        {#if model.syncing}
           <svg
             class="w-4 h-4 animate-spin"
             fill="none"
@@ -139,6 +121,6 @@
     </div>
   </div>
 
-  <MigrationMappingsTable {refreshKey} />
+  <MigrationMappingsTable refreshKey={model.refreshKey} />
 </div>
 <!-- #endregion MigrationSettings -->
diff --git a/frontend/src/routes/settings/git/+page.svelte b/frontend/src/routes/settings/git/+page.svelte
index 48961782f..cb2b857bc 100644
--- a/frontend/src/routes/settings/git/+page.svelte
+++ b/frontend/src/routes/settings/git/+page.svelte
@@ -1,578 +1,149 @@
-<!-- #region GitDashboardPage [C:3] [TYPE Page] [SEMANTICS sveltekit, git, settings, provider, integration] -->
-<!-- @BRIEF Page component: routes/settings/git/+page.svelte -->
+<!-- #region GitDashboardPage [C:3] [TYPE Page] [SEMANTICS sveltekit,git,settings,provider,integration] -->
+<!-- @BRIEF Thin rendering layer for Git configuration management. -->
 <!-- @LAYER Page -->
-<!--
-@SEMANTICS: git, settings, provider, integration, config
-@PURPOSE:   Manage Git server configurations for dashboard versioning.
-@LAYER     Page
-@RELATION  IMPLEMENTS -> [EXT:frontend:RoutePages]
-@RELATION  IMPLEMENTS -> [PageContracts]
-@RELATION  BINDS_TO -> [NavigationContracts]
-@RELATION  USES -> [EXT:frontend:gitService]
-@RELATION  USES -> [Button, Input, Card, PageHeader, Select]
-@UX_STATE:  Loading -> Existing Git server configurations are fetched on entry.
-@UX_STATE:  Editing -> Configuration form supports create and edit flows in place.
-@UX_STATE:  Testing -> Connection validation feedback is shown before save completion.
-@UX_STATE:  Error -> Toast feedback reports failures while preserving entered configuration values.
-
-@INVARIANT: All configurations must be validated via connection test.
--->
+<!-- @RELATION BINDS_TO -> [GitConfigModel] -->
+<!-- @INVARIANT This component contains NO business logic — all logic is in GitConfigModel. -->
+<!-- @UX_STATE Loading -> Configs fetched on mount; list renders on data. -->
+<!-- @UX_STATE Editing -> Configuration form supports create and edit flows. -->
+<!-- @UX_STATE Testing -> Connection validation feedback shown before save. -->
+<!-- @UX_STATE Error -> Toast feedback reports failures while preserving form values. -->
 
 <script lang="ts">
-    // [SECTION: IMPORTS]
-    import { onMount } from "svelte";
-    import { gitService } from "../../../services/gitService";
-    import { addToast as toast } from "../../../lib/toasts.js";
-    import { t } from "$lib/i18n";
-    import { Button, Input, Card, PageHeader, Select } from "$lib/ui";
-    import HelpTooltip from "$lib/ui/HelpTooltip.svelte";
-    // [/SECTION: IMPORTS]
+	import { onMount } from 'svelte';
+	import { t } from '$lib/i18n';
+	import { Button, Input, Card, PageHeader, Select } from '$lib/ui';
+	import HelpTooltip from '$lib/ui/HelpTooltip.svelte';
+	import { GitConfigModel } from '$lib/models/GitConfigModel.svelte.ts';
 
-    // [SECTION: STATE]
-    let configs = $state([]);
-    let newConfig = $state({
-        name: "",
-        provider: "GITHUB",
-        url: "https://github.com",
-        pat: "",
-        default_repository: "",
-        default_branch: "main",
-    });
-    let isEditing = $state(false);
-    let editingConfigId = $state(null);
-    let testing = $state(false);
-    let selectedGiteaConfigId = $state("");
-    let giteaRepos = $state([]);
-    let giteaLoading = $state(false);
-    let giteaCreating = $state(false);
-    let giteaDeleting = $state(false);
-    let newGiteaRepo = $state({
-        name: "",
-        private: true,
-        description: "",
-        auto_init: true,
-        default_branch: "main",
-    });
-    // [/SECTION: STATE]
+	const model = new GitConfigModel();
 
-    // #region loadConfigs:Function [TYPE Function]
-    /**
-     * @purpose Fetches existing git configurations.
-     * @pre Component is mounted.
-     * @post configs state is populated.
-     */
-    async function loadConfigs() {
-        try {
-            configs = await gitService.getConfigs();
-        } catch (e) {
-            toast(e.message, "error");
-        }
-    }
-    // #endregion loadConfigs:Function
+	onMount(() => { model.loadConfigs(); });
 
-    onMount(loadConfigs);
-
-    // #region handleTest:Function [TYPE Function]
-    /**
-     * @purpose Tests connection to a git server with current form data.
-     * @pre newConfig contains valid provider, url, and pat.
-     * @post testing state is managed; toast shown with result.
-     */
-    async function handleTest() {
-        testing = true;
-        try {
-            const testPayload = { ...newConfig, config_id: null };
-            if (isEditing && editingConfigId) {
-                testPayload.config_id = editingConfigId;
-            }
-            const result = await gitService.testConnection(testPayload);
-            if (result.status === "success") {
-                toast($t.settings?.connection_success, "success");
-            } else {
-                toast(
-                    result.message || $t.settings?.connection_failed_short,
-                    "error",
-                );
-            }
-        } catch (e) {
-            toast($t.settings?.connection_failed_short, "error");
-        } finally {
-            testing = false;
-        }
-    }
-    // #endregion handleTest:Function
-
-    // #region handleSave:Function [TYPE Function]
-    /**
-     * @purpose Saves a new git configuration.
-     * @pre newConfig is valid and tested.
-     * @post New config is saved to DB and added to configs list.
-     */
-    async function handleSave() {
-        try {
-            if (isEditing) {
-                const updated = await gitService.updateConfig(
-                    editingConfigId,
-                    newConfig,
-                );
-                configs = configs.map((c) =>
-                    c.id === editingConfigId ? updated : c,
-                );
-                toast(
-                    $t.settings?.git_config_updated ||
-                        "Git configuration updated",
-                    "success",
-                );
-            } else {
-                const saved = await gitService.createConfig(newConfig);
-                configs = [...configs, saved];
-                toast(
-                    $t.settings?.git_config_saved || "Git configuration saved",
-                    "success",
-                );
-            }
-            resetForm();
-        } catch (e) {
-            toast(e.message, "error");
-        }
-    }
-    // #endregion handleSave:Function
-
-    // #region handleEdit:Function [TYPE Function]
-    /**
-     * @purpose Populates the form with an existing config to edit.
-     * @param {Object} config - Configuration object to edit.
-     * @post Form is populated and isEditing state is set.
-     */
-    function handleEdit(config) {
-        isEditing = true;
-        editingConfigId = config.id;
-        newConfig = {
-            name: config.name,
-            provider: config.provider,
-            url: config.url,
-            pat: config.pat,
-            default_repository: config.default_repository || "",
-            default_branch: config.default_branch || "main",
-        };
-        // Scroll to the form
-        window.scrollTo({ top: 0, behavior: "smooth" });
-    }
-    // #endregion handleEdit:Function
-
-    // #region resetForm:Function [TYPE Function]
-    /**
-     * @purpose Resets the configuration form.
-     */
-    function resetForm() {
-        isEditing = false;
-        editingConfigId = null;
-        newConfig = {
-            name: "",
-            provider: "GITHUB",
-            url: "https://github.com",
-            pat: "",
-            default_repository: "",
-            default_branch: "main",
-        };
-    }
-    // #endregion resetForm:Function
-    // #region handleDelete:Function [TYPE Function]
-    /**
-     * @purpose Deletes a git configuration by ID.
-     * @param {string} id - Configuration ID.
-     * @pre id is valid; user confirmed deletion.
-     * @post Configuration is removed from DB and local state.
-     */
-    async function handleDelete(id) {
-        if (!confirm($t.settings?.git_delete_confirm)) return;
-        try {
-            await gitService.deleteConfig(id);
-            configs = configs.filter((c) => c.id !== id);
-            toast($t.settings?.git_config_deleted, "success");
-            if (selectedGiteaConfigId === id) {
-                selectedGiteaConfigId = "";
-                giteaRepos = [];
-            }
-        } catch (e) {
-            toast(e.message, "error");
-        }
-    }
-    // #endregion handleDelete:Function
-
-    // #region loadGiteaRepos:Function [TYPE Function]
-    /**
-     * @purpose Loads repositories from selected Gitea config.
-     * @pre selectedGiteaConfigId is set.
-     * @post giteaRepos state updated.
-     */
-    async function loadGiteaRepos() {
-        if (!selectedGiteaConfigId) {
-            giteaRepos = [];
-            return;
-        }
-        giteaLoading = true;
-        try {
-            giteaRepos = await gitService.listGiteaRepositories(
-                selectedGiteaConfigId,
-            );
-        } catch (e) {
-            toast(e.message, "error");
-            giteaRepos = [];
-        } finally {
-            giteaLoading = false;
-        }
-    }
-    // #endregion loadGiteaRepos:Function
-
-    // #region handleCreateGiteaRepo:Function [TYPE Function]
-    /**
-     * @purpose Creates new repository on selected Gitea server.
-     * @pre selectedGiteaConfigId and newGiteaRepo.name are set.
-     * @post Repository created and repos list reloaded.
-     */
-    async function handleCreateGiteaRepo() {
-        if (!selectedGiteaConfigId || !newGiteaRepo.name?.trim()) return;
-        giteaCreating = true;
-        try {
-            await gitService.createGiteaRepository(selectedGiteaConfigId, {
-                ...newGiteaRepo,
-                name: newGiteaRepo.name.trim(),
-            });
-            toast("Gitea repository created", "success");
-            newGiteaRepo = {
-                name: "",
-                private: true,
-                description: "",
-                auto_init: true,
-                default_branch: "main",
-            };
-            await loadGiteaRepos();
-        } catch (e) {
-            toast(e.message, "error");
-        } finally {
-            giteaCreating = false;
-        }
-    }
-    // #endregion handleCreateGiteaRepo:Function
-
-    // #region handleDeleteGiteaRepo:Function [TYPE Function]
-    /**
-     * @purpose Deletes repository from selected Gitea server.
-     * @pre selectedGiteaConfigId is set.
-     * @post Repository deleted and repos list reloaded.
-     */
-    async function handleDeleteGiteaRepo(repo) {
-        if (!selectedGiteaConfigId) return;
-        if (!confirm(`Delete repository ${repo.full_name || repo.name}?`))
-            return;
-        const fullName = String(repo.full_name || "");
-        const parts = fullName.split("/");
-        const owner = parts.length > 1 ? parts[0] : "";
-        const repoName = parts.length > 1 ? parts[1] : repo.name;
-        if (!owner || !repoName) {
-            toast("Cannot resolve repository owner/name", "error");
-            return;
-        }
-        giteaDeleting = true;
-        try {
-            await gitService.deleteGiteaRepository(
-                selectedGiteaConfigId,
-                owner,
-                repoName,
-            );
-            toast("Gitea repository deleted", "success");
-            await loadGiteaRepos();
-        } catch (e) {
-            toast(e.message, "error");
-        } finally {
-            giteaDeleting = false;
-        }
-    }
-    // #endregion handleDeleteGiteaRepo:Function
-
-    $effect(() => {
-        if (selectedGiteaConfigId) {
-            void loadGiteaRepos();
-        }
-    });
+	$effect(() => {
+		if (model.selectedGiteaConfigId) void model.loadGiteaRepos();
+	});
 </script>
 
-<!-- [SECTION: TEMPLATE] -->
 <div class="p-6 max-w-6xl mx-auto">
-    <PageHeader title={$t.nav?.settings_git} />
+	<PageHeader title={$t.nav?.settings_git} />
 
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-        <!-- List of Configs -->
-        <Card title={$t.settings?.configured_servers}>
-            {#if configs.length === 0}
-                <p class="text-gray-500">{$t.git?.no_servers_configured}</p>
-            {:else}
-                <ul class="divide-y divide-gray-100">
-                    {#each configs as config}
-                        <li class="py-4 flex justify-between items-center">
-                            <div>
-                                <div class="flex items-center gap-2">
-                                    <span class="font-medium text-gray-900"
-                                        >{config.name}</span
-                                    >
-                                    <span
-                                        class="text-xs font-mono bg-gray-50 text-gray-500 px-1.5 py-0.5 rounded"
-                                        >{config.provider}</span
-                                    >
-                                </div>
-                                <div class="text-xs text-gray-400 mt-1">
-                                    {config.url}
-                                </div>
-                            </div>
-                            <div class="flex items-center space-x-4">
-                                <span
-                                    class="px-2 py-1 text-xs font-medium rounded {config.status ===
-                                    'CONNECTED'
-                                        ? 'bg-green-50 text-green-700'
-                                        : 'bg-red-50 text-red-700'}"
-                                >
-                                    {config.status}
-                                </span>
-                                <button
-                                    onclick={() => handleEdit(config)}
-                                    class="text-gray-400 hover:text-blue-600 transition-colors"
-                                    title={$t.common?.edit || "Edit"}
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        class="h-5 w-5"
-                                        viewBox="0 0 20 20"
-                                        fill="currentColor"
-                                    >
-                                        <path
-                                            d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
-                                        />
-                                    </svg>
-                                </button>
-                                <button
-                                    onclick={() => handleDelete(config.id)}
-                                    class="text-gray-400 hover:text-red-600 transition-colors"
-                                    title={$t.common?.delete}
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        class="h-5 w-5"
-                                        viewBox="0 0 20 20"
-                                        fill="currentColor"
-                                    >
-                                        <path
-                                            fill-rule="evenodd"
-                                            d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
-                                            clip-rule="evenodd"
-                                        />
-                                    </svg>
-                                </button>
-                            </div>
-                        </li>
-                    {/each}
-                </ul>
-            {/if}
-        </Card>
+	<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+		<Card title={$t.settings?.configured_servers}>
+			{#if model.configs.length === 0}
+				<p class="text-gray-500">{$t.git?.no_servers_configured}</p>
+			{:else}
+				<ul class="divide-y divide-gray-100">
+					{#each model.configs as config}
+						<li class="py-4 flex justify-between items-center">
+							<div>
+								<div class="flex items-center gap-2">
+									<span class="font-medium text-gray-900">{config.name}</span>
+									<span class="text-xs font-mono bg-gray-50 text-gray-500 px-1.5 py-0.5 rounded">{config.provider}</span>
+								</div>
+								<div class="text-xs text-gray-400 mt-1">{config.url}</div>
+							</div>
+							<div class="flex items-center space-x-4">
+								<span class="px-2 py-1 text-xs font-medium rounded {config.status === 'CONNECTED' ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'}">{config.status}</span>
+								<button onclick={() => { model.startEdit(config.id); window.scrollTo({ top: 0, behavior: 'smooth' }); }} class="text-gray-400 hover:text-blue-600 transition-colors" title={$t.common?.edit || "Edit"}>
+									<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"/></svg>
+								</button>
+								<button onclick={() => { if (confirm($t.settings?.git_delete_confirm)) model.deleteConfig(config.id); }} class="text-gray-400 hover:text-red-600 transition-colors" title={$t.common?.delete}>
+									<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
+								</button>
+							</div>
+						</li>
+					{/each}
+				</ul>
+			{/if}
+		</Card>
 
-        <!-- Add/Edit Config -->
-        <Card
-            title={isEditing
-                ? $t.settings?.edit_git_server || "Edit Git server"
-                : $t.settings?.add_git_server}
-        >
-            <div class="space-y-6">
-                <div>
-                    <span class="flex items-center gap-1.5 mb-1.5">
-                        <span class="text-sm font-medium text-gray-700">{$t.settings?.display_name}</span>
-                        <HelpTooltip text={$t.settings?.help_git_display_name || ""} />
-                    </span>
-                    <Input
-                        aria-label={$t.settings?.display_name}
-                        bind:value={newConfig.name}
-                        placeholder={$t.settings?.display_name_placeholder}
-                    />
-                </div>
-                <div>
-                    <span class="flex items-center gap-1.5 mb-1.5">
-                        <span class="text-sm font-medium text-gray-700">{$t.llm?.type}</span>
-                        <HelpTooltip text={$t.settings?.help_git_provider || ""} />
-                    </span>
-                    <Select
-                        aria-label={$t.llm?.type}
-                        bind:value={newConfig.provider}
-                        options={[
-                            { value: "GITHUB", label: "GitHub" },
-                            { value: "GITLAB", label: "GitLab" },
-                            { value: "GITEA", label: "Gitea" },
-                        ]}
-                    />
-                </div>
-                <div>
-                    <span class="flex items-center gap-1.5 mb-1.5">
-                        <span class="text-sm font-medium text-gray-700">{$t.settings?.server_url}</span>
-                        <HelpTooltip text={$t.settings?.help_git_server_url || ""} />
-                    </span>
-                    <Input
-                        aria-label={$t.settings?.server_url}
-                        bind:value={newConfig.url}
-                    />
-                </div>
-                <div>
-                    <span class="flex items-center gap-1.5 mb-1.5">
-                        <span class="text-sm font-medium text-gray-700">{$t.settings?.personal_access_token}</span>
-                        <HelpTooltip text={$t.settings?.help_git_pat || ""} />
-                    </span>
-                    <Input
-                        aria-label={$t.settings?.personal_access_token}
-                        type="password"
-                        bind:value={newConfig.pat}
-                    />
-                </div>
-                <div>
-                    <span class="flex items-center gap-1.5 mb-1.5">
-                        <span class="text-sm font-medium text-gray-700">{$t.settings?.default_repository_optional}</span>
-                        <HelpTooltip text={$t.settings?.help_git_default_repo || ""} />
-                    </span>
-                    <Input
-                        aria-label={$t.settings?.default_repository_optional}
-                        bind:value={newConfig.default_repository}
-                        placeholder="org/repo"
-                    />
-                </div>
-                <div>
-                    <span class="flex items-center gap-1.5 mb-1.5">
-                        <span class="text-sm font-medium text-gray-700">{$t.settings?.default_branch ||
-                            "Логика / ветка по умолчанию"}</span>
-                        <HelpTooltip text={$t.settings?.help_git_default_branch || ""} />
-                    </span>
-                    <Input
-                        aria-label={$t.settings?.default_branch || "Логика / ветка по умолчанию"}
-                        bind:value={newConfig.default_branch}
-                        placeholder="main"
-                    />
-                </div>
+		<Card title={model.isEditing ? ($t.settings?.edit_git_server || "Edit Git server") : $t.settings?.add_git_server}>
+			<div class="space-y-6">
+				<div>
+					<span class="flex items-center gap-1.5 mb-1.5">
+						<span class="text-sm font-medium text-gray-700">{$t.settings?.display_name}</span>
+						<HelpTooltip text={$t.settings?.help_git_display_name || ""} />
+					</span>
+					<Input aria-label={$t.settings?.display_name} bind:value={model.formData.name} placeholder={$t.settings?.display_name_placeholder} />
+				</div>
+				<div>
+					<span class="flex items-center gap-1.5 mb-1.5">
+						<span class="text-sm font-medium text-gray-700">{$t.llm?.type}</span>
+						<HelpTooltip text={$t.settings?.help_git_provider || ""} />
+					</span>
+					<Select aria-label={$t.llm?.type} bind:value={model.formData.provider} options={[{ value: "GITHUB", label: "GitHub" }, { value: "GITLAB", label: "GitLab" }, { value: "GITEA", label: "Gitea" }]} />
+				</div>
+				<div>
+					<span class="flex items-center gap-1.5 mb-1.5">
+						<span class="text-sm font-medium text-gray-700">{$t.settings?.server_url}</span>
+						<HelpTooltip text={$t.settings?.help_git_server_url || ""} />
+					</span>
+					<Input aria-label={$t.settings?.server_url} bind:value={model.formData.url} />
+				</div>
+				<div>
+					<span class="flex items-center gap-1.5 mb-1.5">
+						<span class="text-sm font-medium text-gray-700">{$t.settings?.personal_access_token}</span>
+						<HelpTooltip text={$t.settings?.help_git_pat || ""} />
+					</span>
+					<Input aria-label={$t.settings?.personal_access_token} type="password" bind:value={model.formData.pat} />
+				</div>
+				<div>
+					<span class="flex items-center gap-1.5 mb-1.5">
+						<span class="text-sm font-medium text-gray-700">{$t.settings?.default_repository_optional}</span>
+						<HelpTooltip text={$t.settings?.help_git_default_repo || ""} />
+					</span>
+					<Input aria-label={$t.settings?.default_repository_optional} bind:value={model.formData.default_repository} placeholder="org/repo" />
+				</div>
+				<div>
+					<span class="flex items-center gap-1.5 mb-1.5">
+						<span class="text-sm font-medium text-gray-700">{$t.settings?.default_branch || "Default branch"}</span>
+						<HelpTooltip text={$t.settings?.help_git_default_branch || ""} />
+					</span>
+					<Input aria-label={$t.settings?.default_branch || "Default branch"} bind:value={model.formData.default_branch} placeholder="main" />
+				</div>
+				<div class="flex gap-3 pt-2">
+					<Button variant="secondary" onclick={() => model.testConnection()} isLoading={model.testingConnection}>{$t.llm?.test}</Button>
+					<Button variant="primary" onclick={() => model.saveConfig()} isLoading={model.saving}>{model.isEditing ? ($t.settings?.update_configuration || "Update configuration") : $t.settings?.save_configuration}</Button>
+					{#if model.isEditing}
+						<Button variant="secondary" onclick={() => model.cancelEdit()}>{$t.common?.cancel || "Cancel"}</Button>
+					{/if}
+				</div>
+			</div>
+		</Card>
+	</div>
 
-                <div class="flex gap-3 pt-2">
-                    <Button
-                        variant="secondary"
-                        onclick={handleTest}
-                        isLoading={testing}
-                    >
-                        {$t.llm?.test}
-                    </Button>
-                    <Button variant="primary" onclick={handleSave}>
-                        {isEditing
-                            ? $t.settings?.update_configuration ||
-                              "Update configuration"
-                            : $t.settings?.save_configuration}
-                    </Button>
-                    {#if isEditing}
-                        <Button variant="secondary" onclick={resetForm}>
-                            {$t.common?.cancel || "Cancel"}
-                        </Button>
-                    {/if}
-                </div>
-            </div>
-        </Card>
-    </div>
-
-    <div class="mt-8">
-        <Card title="Gitea repositories">
-            <div class="space-y-4">
-                <Select
-                    label="Gitea server config"
-                    bind:value={selectedGiteaConfigId}
-                    options={[
-                        { value: "", label: "Select config" },
-                        ...configs
-                            .filter((config) => config.provider === "GITEA")
-                            .map((config) => ({
-                                value: config.id,
-                                label: `${config.name} (${config.url})`,
-                            })),
-                    ]}
-                />
-
-                {#if selectedGiteaConfigId}
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-                        <Input
-                            label="Repository name"
-                            bind:value={newGiteaRepo.name}
-                            placeholder="dashboard-configs"
-                        />
-                        <Input
-                            label="Default branch"
-                            bind:value={newGiteaRepo.default_branch}
-                            placeholder="main"
-                        />
-                        <Input
-                            class="md:col-span-2"
-                            label="Description"
-                            bind:value={newGiteaRepo.description}
-                            placeholder="Repository for Superset dashboards"
-                        />
-                    </div>
-                    <div class="flex gap-3">
-                        <Button
-                            variant="primary"
-                            onclick={handleCreateGiteaRepo}
-                            isLoading={giteaCreating}
-                            disabled={!newGiteaRepo.name.trim()}
-                        >
-                            Create repository
-                        </Button>
-                        <Button
-                            variant="secondary"
-                            onclick={loadGiteaRepos}
-                            isLoading={giteaLoading}
-                        >
-                            Reload repositories
-                        </Button>
-                    </div>
-
-                    {#if giteaRepos.length === 0 && !giteaLoading}
-                        <p class="text-sm text-gray-500">
-                            No repositories found for this Gitea user.
-                        </p>
-                    {:else}
-                        <div
-                            class="divide-y divide-gray-100 border border-gray-200 rounded-lg"
-                        >
-                            {#each giteaRepos as repo}
-                                <div
-                                    class="p-3 flex items-center justify-between gap-4"
-                                >
-                                    <div class="min-w-0">
-                                        <div
-                                            class="font-medium text-gray-900 truncate"
-                                        >
-                                            {repo.full_name || repo.name}
-                                        </div>
-                                        <div
-                                            class="text-xs text-gray-500 truncate"
-                                        >
-                                            {repo.clone_url || repo.html_url}
-                                        </div>
-                                    </div>
-                                    <Button
-                                        variant="danger"
-                                        size="sm"
-                                        onclick={() =>
-                                            handleDeleteGiteaRepo(repo)}
-                                        disabled={giteaDeleting}
-                                    >
-                                        Delete
-                                    </Button>
-                                </div>
-                            {/each}
-                        </div>
-                    {/if}
-                {/if}
-            </div>
-        </Card>
-    </div>
+	<div class="mt-8">
+		<Card title="Gitea repositories">
+			<div class="space-y-4">
+				<Select label="Gitea server config" bind:value={model.selectedGiteaConfigId} options={[{ value: "", label: "Select config" }, ...model.configs.filter((c) => c.provider === "GITEA").map((c) => ({ value: c.id, label: `${c.name} (${c.url})` }))]} />
+				{#if model.selectedGiteaConfigId}
+					<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+						<Input label="Repository name" bind:value={model.newGiteaRepo.name} placeholder="dashboard-configs" />
+						<Input label="Default branch" bind:value={model.newGiteaRepo.default_branch} placeholder="main" />
+						<Input class="md:col-span-2" label="Description" bind:value={model.newGiteaRepo.description} placeholder="Repository for Superset dashboards" />
+					</div>
+					<div class="flex gap-3">
+						<Button variant="primary" onclick={() => model.createRemoteRepo()} isLoading={model.giteaCreating} disabled={!model.newGiteaRepo.name.trim()}>Create repository</Button>
+						<Button variant="secondary" onclick={() => model.loadGiteaRepos()} isLoading={model.giteaReposLoading}>Reload repositories</Button>
+					</div>
+					{#if model.giteaRepos.length === 0 && !model.giteaReposLoading}
+						<p class="text-sm text-gray-500">No repositories found for this Gitea user.</p>
+					{:else}
+						<div class="divide-y divide-gray-100 border border-gray-200 rounded-lg">
+							{#each model.giteaRepos as repo}
+								<div class="p-3 flex items-center justify-between gap-4">
+									<div class="min-w-0">
+										<div class="font-medium text-gray-900 truncate">{repo.full_name || repo.name}</div>
+										<div class="text-xs text-gray-500 truncate">{repo.clone_url || repo.html_url}</div>
+									</div>
+									<Button variant="danger" size="sm" onclick={() => { if (confirm(`Delete repository ${repo.full_name || repo.name}?`)) model.deleteRemoteRepo(repo); }} disabled={model.giteaDeleting}>Delete</Button>
+								</div>
+							{/each}
+						</div>
+					{/if}
+				{/if}
+			</div>
+		</Card>
+	</div>
 </div>
-<!-- [/SECTION: TEMPLATE] -->
-
 <!-- #endregion GitDashboardPage -->
diff --git a/frontend/src/routes/translate/+page.svelte b/frontend/src/routes/translate/+page.svelte
index bcbd98cfe..1da27cd6e 100644
--- a/frontend/src/routes/translate/+page.svelte
+++ b/frontend/src/routes/translate/+page.svelte
@@ -128,6 +128,14 @@
     </button>
   </div>
 
+  <!-- Flow hint -->
+  <div class="bg-blue-50 border border-blue-100 rounded-lg p-3 mb-4 flex items-start gap-2">
+    <svg class="w-5 h-5 text-blue-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+    <p class="text-sm text-blue-700">{$t.translate?.jobs?.jobs_flow_hint || ''}</p>
+  </div>
+
   <!-- Filter Pills -->
   <div class="flex flex-wrap gap-2 mb-4">
     {#each statusPills as pill}
diff --git a/frontend/src/routes/translate/[id]/+page.svelte b/frontend/src/routes/translate/[id]/+page.svelte
index 74af88eff..0ac57c5e7 100644
--- a/frontend/src/routes/translate/[id]/+page.svelte
+++ b/frontend/src/routes/translate/[id]/+page.svelte
@@ -73,6 +73,7 @@
     fetchJobs,
     createJob,
     updateJob,
+    fetchDatasources,
   } from '$lib/api/translate.js';
   import MultiSelect from '$lib/components/ui/MultiSelect.svelte';
   import TranslationPreview from '$lib/components/translate/TranslationPreview.svelte';
@@ -376,6 +377,7 @@
       targetLanguages = j.target_languages?.length > 0 ? j.target_languages : (j.target_language ? [j.target_language] : ['en']);
       providerId = j.provider_id || '';
       batchSize = j.batch_size || 50;
+      includeSourceReference = j.include_source_reference ?? true;
       disableReasoning = j.disable_reasoning || false;
       upsertStrategy = j.upsert_strategy || 'MERGE';
       dictionaryIds = j.dictionary_ids || [];
@@ -398,17 +400,27 @@
         await loadDatabases();
       }
 
-      // If there's a datasource, load its columns
+      // If there's a datasource, load its columns and look up the name
       if (j.source_datasource_id && environments.length > 0) {
         datasourceId = j.source_datasource_id;
-        // Restore the search display from saved table info
         if (j.source_table) {
           const dialect = j.database_dialect || '';
           datasourceSearch = dialect
             ? `${j.source_table} (${dialect})`
             : j.source_table;
         } else {
+          // Fallback — try to look up the actual datasource name from the API
           datasourceSearch = `Dataset #${j.source_datasource_id}`;
+          try {
+            const dsList = await fetchDatasources(environmentId, '');
+            const found = dsList.find(ds => String(ds.id) === String(j.source_datasource_id));
+            if (found) {
+              datasourceSearch = `${found.table_name} (${found.database_name} · ${found.database_dialect})`;
+              databaseDialect = found.database_dialect || '';
+            }
+          } catch (_e) {
+            // Keep fallback "Dataset #<id>" if API fails
+          }
         }
       }
 
@@ -513,6 +525,7 @@
       target_languages: targetLanguages?.length > 0 ? targetLanguages : null,
       provider_id: providerId || null,
       batch_size: parseInt(batchSize) || 50,
+      include_source_reference: includeSourceReference,
       disable_reasoning: disableReasoning,
       upsert_strategy: upsertStrategy,
       dictionary_ids: dictionaryIds,
@@ -673,10 +686,7 @@
         {llmProviders}
         bind:dictionaryIds
         {availableDictionaries}
-        bind:batchSize
-        bind:includeSourceReference
         bind:disableReasoning
-        bind:upsertStrategy
         {validationErrors}
         onEnvChange={handleEnvChange}
       />
@@ -726,6 +736,9 @@
         bind:targetSourceLanguageColumn
         bind:targetKeyCols
         bind:translationColumn
+        bind:batchSize
+        bind:includeSourceReference
+        bind:upsertStrategy
         {environmentId}
         {databases}
         {databasesLoading}