Работает создание коммитов и перенос в новый enviroment

frontend/src/components/DashboardGrid.svelte

@@ -12,6 +12,7 @@
   // [SECTION: IMPORTS]
   import { createEventDispatcher } from 'svelte';
   import type { DashboardMetadata } from '../types/dashboard';
+  import GitManager from './git/GitManager.svelte';
   // [/SECTION]
 
   // [SECTION: PROPS]
@@ -27,6 +28,12 @@
   let sortDirection: "asc" | "desc" = "asc";
   // [/SECTION]
 
+  // [SECTION: UI STATE]
+  let showGitManager = false;
+  let gitDashboardId: number | null = null;
+  let gitDashboardTitle = "";
+  // [/SECTION]
+
   // [SECTION: DERIVED]
   $: filteredDashboards = dashboards.filter(d =>
     d.title.toLowerCase().includes(filterText.toLowerCase())
@@ -120,6 +127,17 @@
   }
   // [/DEF:goToPage:Function]
 
+  // [DEF:openGit:Function]
+  /**
+   * @purpose Opens the Git management modal for a dashboard.
+   */
+  function openGit(dashboard: DashboardMetadata) {
+    gitDashboardId = dashboard.id;
+    gitDashboardTitle = dashboard.title;
+    showGitManager = true;
+  }
+  // [/DEF:openGit:Function]
+
 </script>
 
 <!-- [SECTION: TEMPLATE] -->
@@ -156,6 +174,7 @@
           <th class="px-4 py-2 border-b cursor-pointer" on:click={() => handleSort('status')}>
             Status {sortColumn === 'status' ? (sortDirection === 'asc' ? '↑' : '↓') : ''}
           </th>
+          <th class="px-4 py-2 border-b">Git</th>
         </tr>
       </thead>
       <tbody>
@@ -175,6 +194,14 @@
                 {dashboard.status}
               </span>
             </td>
+            <td class="px-4 py-2 border-b">
+              <button
+                on:click={() => openGit(dashboard)}
+                class="text-indigo-600 hover:text-indigo-900 text-sm font-medium"
+              >
+                Manage Git
+              </button>
+            </td>
           </tr>
         {/each}
       </tbody>
@@ -204,6 +231,15 @@
     </div>
   </div>
 </div>
+
+{#if showGitManager && gitDashboardId}
+  <GitManager
+    dashboardId={gitDashboardId}
+    dashboardTitle={gitDashboardTitle}
+    bind:show={showGitManager}
+  />
+{/if}
+
 <!-- [/SECTION] -->
 
 <style>

frontend/src/components/Navbar.svelte

@@ -29,6 +29,12 @@
         >
             Migration
         </a>
+        <a
+            href="/git"
+            class="text-gray-600 hover:text-blue-600 font-medium {$page.url.pathname.startsWith('/git') ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
+        >
+            Git
+        </a>
         <a
             href="/tasks"
             class="text-gray-600 hover:text-blue-600 font-medium {$page.url.pathname.startsWith('/tasks') ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
@@ -52,6 +58,8 @@
             <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-1 py-2 w-48 z-10 border border-gray-100 before:absolute before:-top-2 before:left-0 before:right-0 before:h-2 before:content-[''] right-0">
                 <a href="/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">General Settings</a>
                 <a href="/settings/connections" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">Connections</a>
+                <a href="/settings/git" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">Git Integration</a>
+                <a href="/settings/environments" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">Environments</a>
             </div>
         </div>
     </nav>

frontend/src/components/git/BranchSelector.svelte

@@ -0,0 +1,170 @@
+<!-- [DEF:BranchSelector:Component] -->
+<!--
+@SEMANTICS: git, branch, selection, checkout
+@PURPOSE:   UI для выбора и создания веток Git.
+@LAYER:     Component
+@RELATION:  CALLS -> gitService.getBranches
+@RELATION:  CALLS -> gitService.checkoutBranch
+@RELATION:  CALLS -> gitService.createBranch
+@RELATION:  DISPATCHES -> change
+-->
+
+<script>
+    // [SECTION: IMPORTS]
+    import { onMount, createEventDispatcher } from 'svelte';
+    import { gitService } from '../../services/gitService';
+    import { addToast as toast } from '../../lib/toasts.js';
+    // [/SECTION]
+
+    // [SECTION: PROPS]
+    export let dashboardId;
+    export let currentBranch = 'main';
+    // [/SECTION]
+
+    // [SECTION: STATE]
+    let branches = [];
+    let loading = false;
+    let showCreate = false;
+    let newBranchName = '';
+    // [/SECTION]
+
+    const dispatch = createEventDispatcher();
+
+    // [DEF:onMount:Function]
+    onMount(async () => {
+        await loadBranches();
+    });
+    // [/DEF:onMount:Function]
+
+    // [DEF:loadBranches:Function]
+    /**
+     * @purpose Загружает список веток для дашборда.
+     * @post branches обновлен.
+     */
+    async function loadBranches() {
+        console.log(`[BranchSelector][Action] Loading branches for dashboard ${dashboardId}`);
+        loading = true;
+        try {
+            branches = await gitService.getBranches(dashboardId);
+            console.log(`[BranchSelector][Coherence:OK] Loaded ${branches.length} branches`);
+        } catch (e) {
+            console.error(`[BranchSelector][Coherence:Failed] ${e.message}`);
+            toast('Failed to load branches', 'error');
+        } finally {
+            loading = false;
+        }
+    }
+    // [/DEF:loadBranches:Function]
+
+    // [DEF:handleSelect:Function]
+    function handleSelect(event) {
+        handleCheckout(event.target.value);
+    }
+    // [/DEF:handleSelect:Function]
+
+    // [DEF:handleCheckout:Function]
+    /**
+     * @purpose Переключает текущую ветку.
+     * @param {string} branchName - Имя ветки.
+     * @post currentBranch обновлен, событие отправлено.
+     */
+    async function handleCheckout(branchName) {
+        console.log(`[BranchSelector][Action] Checking out branch ${branchName}`);
+        try {
+            await gitService.checkoutBranch(dashboardId, branchName);
+            currentBranch = branchName;
+            dispatch('change', { branch: branchName });
+            toast(`Switched to ${branchName}`, 'success');
+            console.log(`[BranchSelector][Coherence:OK] Checked out ${branchName}`);
+        } catch (e) {
+            console.error(`[BranchSelector][Coherence:Failed] ${e.message}`);
+            toast(e.message, 'error');
+        }
+    }
+    // [/DEF:handleCheckout:Function]
+
+    // [DEF:handleCreate:Function]
+    /**
+     * @purpose Создает новую ветку.
+     * @post Новая ветка создана и загружена.
+     */
+    async function handleCreate() {
+        if (!newBranchName) return;
+        console.log(`[BranchSelector][Action] Creating branch ${newBranchName} from ${currentBranch}`);
+        try {
+            await gitService.createBranch(dashboardId, newBranchName, currentBranch);
+            toast(`Created branch ${newBranchName}`, 'success');
+            showCreate = false;
+            newBranchName = '';
+            await loadBranches();
+            console.log(`[BranchSelector][Coherence:OK] Branch created`);
+        } catch (e) {
+            console.error(`[BranchSelector][Coherence:Failed] ${e.message}`);
+            toast(e.message, 'error');
+        }
+    }
+    // [/DEF:handleCreate:Function]
+</script>
+
+<!-- [SECTION: TEMPLATE] -->
+<div class="space-y-2">
+    <div class="flex items-center space-x-2">
+        <div class="relative">
+            <select
+                value={currentBranch}
+                on:change={handleSelect}
+                disabled={loading}
+                class="bg-white border rounded px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+                {#each branches as branch}
+                    <option value={branch.name}>{branch.name}</option>
+                {/each}
+            </select>
+            {#if loading}
+                <span class="absolute -right-6 top-1">
+                    <svg class="animate-spin h-4 w-4 text-blue-600" 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>
+                </span>
+            {/if}
+        </div>
+
+        <button
+            on:click={() => showCreate = !showCreate}
+            disabled={loading}
+            class="text-blue-600 hover:text-blue-800 text-sm font-medium disabled:opacity-50"
+        >
+            + New Branch
+        </button>
+    </div>
+
+    {#if showCreate}
+        <div class="flex items-center space-x-1 bg-gray-50 p-2 rounded border border-dashed">
+            <input
+                type="text"
+                bind:value={newBranchName}
+                placeholder="branch-name"
+                disabled={loading}
+                class="border rounded px-2 py-1 text-sm w-full max-w-[150px]"
+            />
+            <button
+                on:click={handleCreate}
+                disabled={loading || !newBranchName}
+                class="bg-green-600 text-white px-3 py-1 rounded text-xs font-medium hover:bg-green-700 disabled:opacity-50"
+            >
+                {loading ? '...' : 'Create'}
+            </button>
+            <button
+                on:click={() => showCreate = false}
+                disabled={loading}
+                class="text-gray-500 hover:text-gray-700 text-xs px-2 py-1 disabled:opacity-50"
+            >
+                Cancel
+            </button>
+        </div>
+    {/if}
+</div>
+<!-- [/SECTION] -->
+
+<!-- [/DEF:BranchSelector:Component] -->

frontend/src/components/git/CommitHistory.svelte

@@ -0,0 +1,90 @@
+<!-- [DEF:CommitHistory:Component] -->
+<!--
+@SEMANTICS: git, history, commits, audit
+@PURPOSE:   Displays the commit history for a specific dashboard.
+@LAYER:     Component
+@RELATION:  CALLS -> gitService.getHistory
+-->
+
+<script>
+    // [SECTION: IMPORTS]
+    import { onMount } from 'svelte';
+    import { gitService } from '../../services/gitService';
+    import { addToast as toast } from '../../lib/toasts.js';
+    // [/SECTION]
+
+    // [SECTION: PROPS]
+    export let dashboardId;
+    // [/SECTION]
+
+    // [SECTION: STATE]
+    let history = [];
+    let loading = false;
+    // [/SECTION]
+
+    // [DEF:onMount:Function]
+    /**
+     * @purpose Load history when component is mounted.
+     */
+    onMount(async () => {
+        await loadHistory();
+    });
+    // [/DEF:onMount:Function]
+
+    // [DEF:loadHistory:Function]
+    /**
+     * @purpose Fetch commit history from the backend.
+     * @post history state is updated.
+     */
+    async function loadHistory() {
+        console.log(`[CommitHistory][Action] Loading history for dashboard ${dashboardId}`);
+        loading = true;
+        try {
+            history = await gitService.getHistory(dashboardId);
+            console.log(`[CommitHistory][Coherence:OK] Loaded ${history.length} commits`);
+        } catch (e) {
+            console.error(`[CommitHistory][Coherence:Failed] ${e.message}`);
+            toast('Failed to load commit history', 'error');
+        } finally {
+            loading = false;
+        }
+    }
+    // [/DEF:loadHistory:Function]
+</script>
+
+<!-- [SECTION: TEMPLATE] -->
+<div class="mt-6">
+    <h3 class="text-lg font-semibold mb-4 flex justify-between items-center">
+        Commit History
+        <button on:click={loadHistory} class="text-sm text-blue-600 hover:underline">Refresh</button>
+    </h3>
+
+    {#if loading}
+        <div class="flex items-center space-x-2 text-gray-500">
+            <svg class="animate-spin h-4 w-4 text-blue-600" 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>
+            <span>Loading history...</span>
+        </div>
+    {:else if history.length === 0}
+        <p class="text-gray-500 italic">No commits yet.</p>
+    {:else}
+        <div class="space-y-3 max-h-96 overflow-y-auto pr-2">
+            {#each history as commit}
+                <div class="border-l-2 border-blue-500 pl-4 py-1">
+                    <div class="flex justify-between items-start">
+                        <span class="font-medium text-sm">{commit.message}</span>
+                        <span class="text-xs text-gray-400 font-mono">{commit.hash.substring(0, 7)}</span>
+                    </div>
+                    <div class="text-xs text-gray-500 mt-1">
+                        {commit.author} • {new Date(commit.timestamp).toLocaleString()}
+                    </div>
+                </div>
+            {/each}
+        </div>
+    {/if}
+</div>
+<!-- [/SECTION] -->
+
+<!-- [/DEF:CommitHistory:Component] -->

frontend/src/components/git/CommitModal.svelte

@@ -0,0 +1,175 @@
+<!-- [DEF:CommitModal:Component] -->
+<!--
+@SEMANTICS: git, commit, modal, version_control, diff
+@PURPOSE:   Модальное окно для создания коммита с просмотром изменений (diff).
+@LAYER:     Component
+@RELATION:  CALLS -> gitService.commit
+@RELATION:  CALLS -> gitService.getStatus
+@RELATION:  CALLS -> gitService.getDiff
+@RELATION:  DISPATCHES -> commit
+-->
+
+<script>
+    // [SECTION: IMPORTS]
+    import { createEventDispatcher, onMount } from 'svelte';
+    import { gitService } from '../../services/gitService';
+    import { addToast as toast } from '../../lib/toasts.js';
+    // [/SECTION]
+
+    // [SECTION: PROPS]
+    export let dashboardId;
+    export let show = false;
+    // [/SECTION]
+
+    // [SECTION: STATE]
+    let message = '';
+    let committing = false;
+    let status = null;
+    let diff = '';
+    let loading = false;
+    // [/SECTION]
+
+    const dispatch = createEventDispatcher();
+
+    // [DEF:loadStatus: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);
+            // Fetch both unstaged and staged diffs to show complete picture
+            const unstagedDiff = await gitService.getDiff(dashboardId, null, false);
+            const stagedDiff = await gitService.getDiff(dashboardId, null, true);
+            
+            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('Failed to load changes', 'error');
+        } finally {
+            loading = false;
+        }
+    }
+    // [/DEF:loadStatus:Function]
+
+    // [DEF:handleCommit: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, []);
+            toast('Changes committed successfully', 'success');
+            dispatch('commit');
+            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;
+        }
+    }
+    // [/DEF:handleCommit:Function]
+
+    $: if (show) 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="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">Commit Changes</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">
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Commit Message</label>
+                        <textarea 
+                            bind:value={message}
+                            class="w-full border rounded p-2 h-32 focus:ring-2 focus:ring-blue-500 outline-none resize-none"
+                            placeholder="Describe your changes..."
+                        ></textarea>
+                    </div>
+
+                    {#if status}
+                        <div class="flex-1 overflow-y-auto">
+                            <h3 class="text-sm font-bold text-gray-500 uppercase mb-2">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="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="Modified (Unstaged)">
+                                        <span class="mr-2">M</span> {file}
+                                    </li>
+                                {/each}
+                                {#each status.untracked_files as file}
+                                    <li class="text-blue-600 flex items-center" title="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">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">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">No changes detected</div>
+                        {/if}
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex justify-end space-x-3 mt-6 pt-4 border-t">
+                <button 
+                    on:click={() => show = false}
+                    class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded"
+                >
+                    Cancel
+                </button>
+                <button
+                    on:click={handleCommit}
+                    disabled={committing || !message || loading || (!status?.is_dirty && status?.staged_files?.length === 0)}
+                    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
+                >
+                    {committing ? 'Committing...' : 'Commit'}
+                </button>
+            </div>
+        </div>
+    </div>
+{/if}
+<!-- [/SECTION] -->
+
+<style>
+    pre {
+        tab-size: 4;
+    }
+</style>
+
+<!-- [/DEF:CommitModal:Component] -->

frontend/src/components/git/ConflictResolver.svelte

@@ -0,0 +1,142 @@
+<!-- [DEF:ConflictResolver:Component] -->
+<!--
+@SEMANTICS: git, conflict, resolution, merge
+@PURPOSE:   UI for resolving merge conflicts (Keep Mine / Keep Theirs).
+@LAYER:     Component
+@RELATION:  DISPATCHES -> resolve
+
+@INVARIANT: User must resolve all conflicts before saving.
+-->
+
+<script>
+    // [SECTION: IMPORTS]
+    import { createEventDispatcher } from 'svelte';
+    import { addToast as toast } from '../../lib/toasts.js';
+    // [/SECTION]
+
+    // [SECTION: PROPS]
+    /** @type {Array<{file_path: string, mine: string, theirs: string}>} */
+    export let conflicts = []; 
+    export let show = false;
+    // [/SECTION]
+
+    // [SECTION: STATE]
+    const dispatch = createEventDispatcher();
+    /** @type {Object.<string, 'mine' | 'theirs' | 'manual'>} */
+    let resolutions = {}; 
+    // [/SECTION]
+
+    // [DEF:resolve:Function]
+    /**
+     * @purpose Set resolution strategy for a file.
+     * @pre     file path must exist in conflicts array.
+     * @post    resolutions state is updated for the given file.
+     * @param   {string} file - File path.
+     * @param   {'mine'|'theirs'} strategy - Resolution strategy.
+     * @side_effect Updates resolutions state.
+     */
+    function resolve(file, strategy) {
+        console.log(`[ConflictResolver][Action] Resolving ${file} with ${strategy}`);
+        resolutions[file] = strategy;
+        resolutions = { ...resolutions }; // Trigger update
+    }
+    // [/DEF:resolve:Function]
+
+    // [DEF:handleSave:Function]
+    /**
+     * @purpose Validate and submit resolutions.
+     * @pre     All conflicts must have a resolution.
+     * @post    'resolve' event dispatched if valid.
+     * @side_effect Dispatches event and closes modal.
+     */
+    function handleSave() {
+        // 1. Guard Clause (@PRE)
+        const unresolved = conflicts.filter(c => !resolutions[c.file_path]);
+        if (unresolved.length > 0) {
+            console.warn(`[ConflictResolver][Coherence:Failed] ${unresolved.length} unresolved conflicts`);
+            toast(`Please resolve all conflicts first. (${unresolved.length} remaining)`, 'error');
+            return;
+        }
+
+        // 2. Implementation
+        console.log(`[ConflictResolver][Coherence:OK] All conflicts resolved`);
+        dispatch('resolve', resolutions);
+        show = false;
+    }
+    // [/DEF:handleSave:Function]
+</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="bg-white p-6 rounded-lg shadow-xl w-full max-w-5xl max-h-[90vh] flex flex-col">
+            <h2 class="text-xl font-bold mb-4 text-red-600">Merge Conflicts Detected</h2>
+            <p class="text-gray-600 mb-4">The following files have conflicts. Please choose how to resolve them.</p>
+
+            <div class="flex-1 overflow-y-auto space-y-6 mb-4 pr-2">
+                {#each conflicts as conflict}
+                    <div class="border rounded-lg overflow-hidden">
+                        <div class="bg-gray-100 px-4 py-2 font-medium border-b flex justify-between items-center">
+                            <span>{conflict.file_path}</span>
+                            {#if resolutions[conflict.file_path]}
+                                <span class="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full uppercase font-bold">
+                                    Resolved: {resolutions[conflict.file_path]}
+                                </span>
+                            {/if}
+                        </div>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-0 divide-x">
+                            <div class="p-0 flex flex-col">
+                                <div class="bg-blue-50 px-4 py-1 text-[10px] font-bold text-blue-600 uppercase border-b">Your Changes (Mine)</div>
+                                <div class="p-4 bg-white flex-1 overflow-auto">
+                                    <pre class="text-xs font-mono whitespace-pre">{conflict.mine}</pre>
+                                </div>
+                                <button 
+                                    class="w-full py-2 text-sm font-medium border-t transition-colors {resolutions[conflict.file_path] === 'mine' ? 'bg-blue-600 text-white' : 'bg-gray-50 hover:bg-blue-50 text-blue-600'}"
+                                    on:click={() => resolve(conflict.file_path, 'mine')}
+                                >
+                                    Keep Mine
+                                </button>
+                            </div>
+                            <div class="p-0 flex flex-col">
+                                <div class="bg-green-50 px-4 py-1 text-[10px] font-bold text-green-600 uppercase border-b">Remote Changes (Theirs)</div>
+                                <div class="p-4 bg-white flex-1 overflow-auto">
+                                    <pre class="text-xs font-mono whitespace-pre">{conflict.theirs}</pre>
+                                </div>
+                                <button 
+                                    class="w-full py-2 text-sm font-medium border-t transition-colors {resolutions[conflict.file_path] === 'theirs' ? 'bg-green-600 text-white' : 'bg-gray-50 hover:bg-green-50 text-green-600'}"
+                                    on:click={() => resolve(conflict.file_path, 'theirs')}
+                                >
+                                    Keep Theirs
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                {/each}
+            </div>
+
+            <div class="flex justify-end space-x-3 pt-4 border-t">
+                <button 
+                    on:click={() => show = false}
+                    class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded transition-colors"
+                >
+                    Cancel
+                </button>
+                <button 
+                    on:click={handleSave}
+                    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors shadow-sm"
+                >
+                    Resolve & Continue
+                </button>
+            </div>
+        </div>
+    </div>
+{/if}
+<!-- [/SECTION] -->
+
+<style>
+    pre {
+        tab-size: 4;
+    }
+</style>
+
+<!-- [/DEF:ConflictResolver:Component] -->

frontend/src/components/git/DeploymentModal.svelte

@@ -0,0 +1,147 @@
+<!-- [DEF:DeploymentModal:Component] -->
+<!--
+@SEMANTICS: deployment, git, environment, modal
+@PURPOSE:   Modal for deploying a dashboard to a target environment.
+@LAYER:     Component
+@RELATION:  CALLS -> frontend/src/services/gitService.js
+@RELATION:  DISPATCHES -> deploy
+
+@INVARIANT: Cannot deploy without a selected environment.
+-->
+
+<script>
+    // [SECTION: IMPORTS]
+    import { onMount, createEventDispatcher } from 'svelte';
+    import { gitService } from '../../services/gitService';
+    import { addToast as toast } from '../../lib/toasts.js';
+    // [/SECTION]
+
+    // [SECTION: PROPS]
+    export let dashboardId;
+    export let show = false;
+    // [/SECTION]
+
+    // [SECTION: STATE]
+    let environments = [];
+    let selectedEnv = '';
+    let loading = false;
+    let deploying = false;
+    // [/SECTION]
+
+    const dispatch = createEventDispatcher();
+
+    // [DEF:loadStatus:Watcher]
+    $: if (show) loadEnvironments();
+
+    // [DEF:loadEnvironments:Function]
+    /**
+     * @purpose Fetch available environments from API.
+     * @post environments state is populated.
+     * @side_effect Updates environments state.
+     */
+    async function loadEnvironments() {
+        console.log(`[DeploymentModal][Action] Loading environments`);
+        loading = true;
+        try {
+            environments = await gitService.getEnvironments();
+            if (environments.length > 0) {
+                selectedEnv = environments[0].id;
+            }
+            console.log(`[DeploymentModal][Coherence:OK] Loaded ${environments.length} environments`);
+        } catch (e) {
+            console.error(`[DeploymentModal][Coherence:Failed] ${e.message}`);
+            toast('Failed to load environments', 'error');
+        } finally {
+            loading = false;
+        }
+    }
+    // [/DEF:loadEnvironments:Function]
+
+    // [DEF:handleDeploy:Function]
+    /**
+     * @purpose Trigger deployment to selected environment.
+     * @pre selectedEnv must be set.
+     * @post deploy event dispatched on success.
+     * @side_effect Triggers API call, closes modal, shows toast.
+     */
+    async function handleDeploy() {
+        if (!selectedEnv) return;
+        console.log(`[DeploymentModal][Action] Deploying to ${selectedEnv}`);
+        deploying = true;
+        try {
+            const result = await gitService.deploy(dashboardId, selectedEnv);
+            toast(result.message || 'Deployment triggered successfully', 'success');
+            dispatch('deploy');
+            show = false;
+            console.log(`[DeploymentModal][Coherence:OK] Deployment triggered`);
+        } catch (e) {
+            console.error(`[DeploymentModal][Coherence:Failed] ${e.message}`);
+            toast(e.message, 'error');
+        } finally {
+            deploying = false;
+        }
+    }
+    // [/DEF:handleDeploy:Function]
+</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">Deploy Dashboard</h2>
+            
+            {#if loading}
+                <p class="text-gray-500">Loading environments...</p>
+            {:else if environments.length === 0}
+                <p class="text-red-500 mb-4">No deployment environments configured.</p>
+                <div class="flex justify-end">
+                    <button 
+                        on:click={() => show = false}
+                        class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300"
+                    >
+                        Close
+                    </button>
+                </div>
+            {:else}
+                <div class="mb-6">
+                    <label class="block text-sm font-medium text-gray-700 mb-2">Select Target Environment</label>
+                    <select 
+                        bind:value={selectedEnv}
+                        class="w-full border rounded p-2 focus:ring-2 focus:ring-blue-500 outline-none bg-white"
+                    >
+                        {#each environments as env}
+                            <option value={env.id}>{env.name} ({env.superset_url})</option>
+                        {/each}
+                    </select>
+                </div>
+
+                <div class="flex justify-end space-x-3">
+                    <button 
+                        on:click={() => show = false}
+                        class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded"
+                    >
+                        Cancel
+                    </button>
+                    <button 
+                        on:click={handleDeploy}
+                        disabled={deploying || !selectedEnv}
+                        class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50 flex items-center"
+                    >
+                        {#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>
+                            Deploying...
+                        {:else}
+                            Deploy
+                        {/if}
+                    </button>
+                </div>
+            {/if}
+        </div>
+    </div>
+{/if}
+<!-- [/SECTION] -->
+
+<!-- [/DEF:DeploymentModal:Component] -->

frontend/src/components/git/GitManager.svelte

@@ -0,0 +1,284 @@
+<!-- [DEF:GitManager:Component] -->
+<!--
+@SEMANTICS: git, manager, dashboard, version_control, initialization
+@PURPOSE:   Центральный компонент для управления Git-операциями конкретного дашборда.
+@LAYER:     Component
+@RELATION:  USES -> BranchSelector
+@RELATION:  USES -> CommitModal
+@RELATION:  USES -> CommitHistory
+@RELATION:  USES -> DeploymentModal
+@RELATION:  USES -> ConflictResolver
+@RELATION:  CALLS -> gitService
+-->
+
+<script>
+    // [SECTION: IMPORTS]
+    import { onMount } from 'svelte';
+    import { gitService } from '../../services/gitService';
+    import { addToast as toast } from '../../lib/toasts.js';
+    import BranchSelector from './BranchSelector.svelte';
+    import CommitModal from './CommitModal.svelte';
+    import CommitHistory from './CommitHistory.svelte';
+    import DeploymentModal from './DeploymentModal.svelte';
+    import ConflictResolver from './ConflictResolver.svelte';
+    // [/SECTION]
+
+    // [SECTION: PROPS]
+    export let dashboardId;
+    export let dashboardTitle = "";
+    export let show = false;
+    // [/SECTION]
+
+    // [SECTION: STATE]
+    let currentBranch = 'main';
+    let showCommitModal = false;
+    let showDeployModal = false;
+    let showHistory = true;
+    let showConflicts = false;
+    let conflicts = [];
+    let loading = false;
+    let initialized = false;
+    let checkingStatus = true;
+
+    // Initialization form state
+    let configs = [];
+    let selectedConfigId = "";
+    let remoteUrl = "";
+    // [/SECTION]
+
+    // [DEF:checkStatus:Function]
+    /**
+     * @purpose Проверяет, инициализирован ли репозиторий для данного дашборда.
+     */
+    async function checkStatus() {
+        checkingStatus = true;
+        try {
+            // If we can get branches, it means repo exists
+            await gitService.getBranches(dashboardId);
+            initialized = true;
+        } catch (e) {
+            initialized = false;
+            // Load configs if not initialized
+            configs = await gitService.getConfigs();
+            if (configs.length > 0) selectedConfigId = configs[0].id;
+        } finally {
+            checkingStatus = false;
+        }
+    }
+    // [/DEF:checkStatus:Function]
+
+    // [DEF:handleInit:Function]
+    /**
+     * @purpose Инициализирует репозиторий для дашборда.
+     */
+    async function handleInit() {
+        if (!selectedConfigId || !remoteUrl) {
+            toast('Please select a Git server and provide remote URL', 'error');
+            return;
+        }
+        loading = true;
+        try {
+            await gitService.initRepository(dashboardId, selectedConfigId, remoteUrl);
+            toast('Repository initialized successfully', 'success');
+            initialized = true;
+        } catch (e) {
+            toast(e.message, 'error');
+        } finally {
+            loading = false;
+        }
+    }
+    // [/DEF:handleInit:Function]
+
+    // [DEF:handleSync:Function]
+    /**
+     * @purpose Синхронизирует состояние Superset с локальным Git-репозиторием.
+     */
+    async function handleSync() {
+        loading = true;
+        try {
+            // Try to get selected environment from localStorage (set by EnvSelector)
+            const sourceEnvId = localStorage.getItem('selected_env_id');
+            await gitService.sync(dashboardId, sourceEnvId);
+            toast('Dashboard state synced to Git', 'success');
+        } catch (e) {
+            toast(e.message, 'error');
+        } finally {
+            loading = false;
+        }
+    }
+    // [/DEF:handleSync:Function]
+
+    // [DEF:handlePush:Function]
+    async function handlePush() {
+        loading = true;
+        try {
+            await gitService.push(dashboardId);
+            toast('Changes pushed to remote', 'success');
+        } catch (e) {
+            toast(e.message, 'error');
+        } finally {
+            loading = false;
+        }
+    }
+    // [/DEF:handlePush:Function]
+
+    // [DEF:handlePull:Function]
+    async function handlePull() {
+        loading = true;
+        try {
+            await gitService.pull(dashboardId);
+            toast('Changes pulled from remote', 'success');
+        } catch (e) {
+            toast(e.message, 'error');
+        } finally {
+            loading = false;
+        }
+    }
+    // [/DEF:handlePull:Function]
+
+    onMount(checkStatus);
+</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-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
+            <div class="flex justify-between items-center mb-6 border-b pb-4">
+                <div>
+                    <h2 class="text-2xl font-bold">Git Management: {dashboardTitle}</h2>
+                    <p class="text-sm text-gray-500">ID: {dashboardId}</p>
+                </div>
+                <button on:click={() => show = false} class="text-gray-500 hover:text-gray-700">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+
+            {#if checkingStatus}
+                <div class="flex justify-center py-12">
+                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+                </div>
+            {:else if !initialized}
+                <div class="max-w-md mx-auto py-8">
+                    <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6">
+                        <p class="text-sm text-blue-700">
+                            This dashboard is not yet linked to a Git repository. 
+                            Please configure the repository details below.
+                        </p>
+                    </div>
+                    
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700">Git Server</label>
+                            <select bind:value={selectedConfigId} class="mt-1 block w-full border rounded p-2">
+                                {#each configs as config}
+                                    <option value={config.id}>{config.name} ({config.provider})</option>
+                                {/each}
+                            </select>
+                            {#if configs.length === 0}
+                                <p class="text-xs text-red-500 mt-1">No Git servers configured. Go to Settings -> Git to add one.</p>
+                            {/if}
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700">Remote Repository URL</label>
+                            <input 
+                                type="text" 
+                                bind:value={remoteUrl} 
+                                placeholder="https://github.com/org/repo.git"
+                                class="mt-1 block w-full border rounded p-2" 
+                            />
+                        </div>
+                        <button 
+                            on:click={handleInit}
+                            disabled={loading || configs.length === 0}
+                            class="w-full bg-blue-600 text-white py-2 rounded font-medium hover:bg-blue-700 disabled:opacity-50"
+                        >
+                            {loading ? 'Initializing...' : 'Initialize Repository'}
+                        </button>
+                    </div>
+                </div>
+            {:else}
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <!-- Left Column: Controls -->
+                    <div class="md:col-span-1 space-y-6">
+                        <section>
+                            <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Branch</h3>
+                            <BranchSelector {dashboardId} bind:currentBranch />
+                        </section>
+
+                        <section class="space-y-2">
+                            <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Actions</h3>
+                            <button 
+                                on:click={handleSync}
+                                disabled={loading}
+                                class="w-full flex items-center justify-center px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded text-sm font-medium transition"
+                            >
+                                Sync from Superset
+                            </button>
+                            <button 
+                                on:click={() => showCommitModal = true}
+                                disabled={loading}
+                                class="w-full flex items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm font-medium transition"
+                            >
+                                Commit Changes
+                            </button>
+                            <div class="grid grid-cols-2 gap-2">
+                                <button 
+                                    on:click={handlePull}
+                                    disabled={loading}
+                                    class="flex items-center justify-center px-4 py-2 border hover:bg-gray-50 rounded text-sm font-medium transition"
+                                >
+                                    Pull
+                                </button>
+                                <button 
+                                    on:click={handlePush}
+                                    disabled={loading}
+                                    class="flex items-center justify-center px-4 py-2 border hover:bg-gray-50 rounded text-sm font-medium transition"
+                                >
+                                    Push
+                                </button>
+                            </div>
+                        </section>
+
+                        <section>
+                            <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Deployment</h3>
+                            <button 
+                                on:click={() => showDeployModal = true}
+                                disabled={loading}
+                                class="w-full flex items-center justify-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded text-sm font-medium transition"
+                            >
+                                Deploy to Environment
+                            </button>
+                        </section>
+                    </div>
+
+                    <!-- Right Column: History -->
+                    <div class="md:col-span-2 border-l pl-6">
+                        <CommitHistory {dashboardId} />
+                    </div>
+                </div>
+            {/if}
+        </div>
+    </div>
+{/if}
+
+<CommitModal 
+    {dashboardId} 
+    bind:show={showCommitModal} 
+    on:commit={() => { /* Refresh history */ }}
+/>
+
+<DeploymentModal 
+    {dashboardId} 
+    bind:show={showDeployModal} 
+/>
+
+<ConflictResolver 
+    {conflicts} 
+    bind:show={showConflicts} 
+    on:resolve={() => { /* Handle resolution */ }}
+/>
+<!-- [/SECTION] -->
+
+<!-- [/DEF:GitManager:Component] -->