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

frontend/.eslintignore

@@ -0,0 +1,7 @@
+node_modules/
+dist/
+build/
+.svelte-kit/
+.vite/
+coverage/
+*.min.js

frontend/.prettierignore

@@ -0,0 +1,9 @@
+node_modules/
+dist/
+build/
+.svelte-kit/
+.vite/
+coverage/
+package-lock.json
+yarn.lock
+pnpm-lock.yaml

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] -->

frontend/src/routes/+page.svelte

@@ -23,6 +23,8 @@
         console.log(`[Dashboard][Action] Selecting plugin: ${plugin.id}`);
         if (plugin.id === 'superset-migration') {
             goto('/migration');
+        } else if (plugin.id === 'git-integration') {
+            goto('/git');
         } else {
             selectedPlugin.set(plugin);
         }

frontend/src/routes/git/+page.svelte

@@ -0,0 +1,86 @@
+<!-- [DEF:GitDashboardPage:Component] -->
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import DashboardGrid from '../../components/DashboardGrid.svelte';
+  import { addToast as toast } from '../../lib/toasts.js';
+  import type { DashboardMetadata } from '../../types/dashboard';
+
+  let environments: any[] = [];
+  let selectedEnvId = "";
+  let dashboards: DashboardMetadata[] = [];
+  let loading = true;
+  let fetchingDashboards = false;
+
+  async function fetchEnvironments() {
+    try {
+      const response = await fetch('/api/environments');
+      if (!response.ok) throw new Error('Failed to fetch environments');
+      environments = await response.json();
+      if (environments.length > 0) {
+        selectedEnvId = environments[0].id;
+      }
+    } catch (e) {
+      toast(e.message, 'error');
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function fetchDashboards(envId: string) {
+    if (!envId) return;
+    fetchingDashboards = true;
+    try {
+      const response = await fetch(`/api/environments/${envId}/dashboards`);
+      if (!response.ok) throw new Error('Failed to fetch dashboards');
+      dashboards = await response.json();
+    } catch (e) {
+      toast(e.message, 'error');
+      dashboards = [];
+    } finally {
+      fetchingDashboards = false;
+    }
+  }
+
+  onMount(fetchEnvironments);
+
+  $: if (selectedEnvId) {
+    fetchDashboards(selectedEnvId);
+    localStorage.setItem('selected_env_id', selectedEnvId);
+  }
+</script>
+
+<div class="max-w-6xl mx-auto p-6">
+  <div class="flex justify-between items-center mb-6">
+    <h1 class="text-2xl font-bold text-gray-800">Git Dashboard Management</h1>
+    <div class="flex items-center space-x-4">
+      <label for="env-select" class="text-sm font-medium text-gray-700">Environment:</label>
+      <select
+        id="env-select"
+        bind:value={selectedEnvId}
+        class="border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2 border bg-white"
+      >
+        {#each environments as env}
+          <option value={env.id}>{env.name}</option>
+        {/each}
+      </select>
+    </div>
+  </div>
+
+  {#if loading}
+    <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}
+    <div class="bg-white rounded-lg shadow p-6">
+      <h2 class="text-lg font-medium mb-4">Select Dashboard to Manage</h2>
+      {#if fetchingDashboards}
+        <p class="text-gray-500">Loading dashboards...</p>
+      {:else if dashboards.length > 0}
+        <DashboardGrid {dashboards} />
+      {:else}
+        <p class="text-gray-500 italic">No dashboards found in this environment.</p>
+      {/if}
+    </div>
+  {/if}
+</div>
+<!-- [/DEF:GitDashboardPage:Component] -->

frontend/src/routes/settings/environments/+page.svelte

@@ -0,0 +1,40 @@
+<script>
+    import { onMount } from 'svelte';
+    import { gitService } from '../../../services/gitService';
+    import { addToast as toast } from '../../../lib/toasts.js';
+
+    let environments = [];
+
+    onMount(async () => {
+        try {
+            environments = await gitService.getEnvironments();
+        } catch (e) {
+            toast(e.message, 'error');
+        }
+    });
+</script>
+
+<div class="p-6">
+    <h1 class="text-2xl font-bold mb-6">Deployment Environments</h1>
+    
+    <div class="bg-white p-6 rounded shadow">
+        <h2 class="text-xl font-semibold mb-4">Target Environments</h2>
+        {#if environments.length === 0}
+            <p class="text-gray-500">No deployment environments configured.</p>
+        {:else}
+            <ul class="divide-y">
+                {#each environments as env}
+                    <li class="py-3 flex justify-between items-center">
+                        <div>
+                            <span class="font-medium">{env.name}</span>
+                            <div class="text-xs text-gray-400">{env.superset_url}</div>
+                        </div>
+                        <span class="px-2 py-1 text-xs rounded {env.is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}">
+                            {env.is_active ? 'Active' : 'Inactive'}
+                        </span>
+                    </li>
+                {/each}
+            </ul>
+        {/if}
+    </div>
+</div>

frontend/src/routes/settings/git/+page.svelte

@@ -0,0 +1,136 @@
+<script>
+    import { onMount } from 'svelte';
+    import { gitService } from '../../../services/gitService';
+    import { addToast as toast } from '../../../lib/toasts.js';
+
+    let configs = [];
+    let newConfig = {
+        name: '',
+        provider: 'GITHUB',
+        url: 'https://github.com',
+        pat: '',
+        default_repository: ''
+    };
+    let testing = false;
+
+    onMount(async () => {
+        try {
+            configs = await gitService.getConfigs();
+        } catch (e) {
+            toast(e.message, 'error');
+        }
+    });
+
+    async function handleTest() {
+        testing = true;
+        try {
+            const result = await gitService.testConnection(newConfig);
+            if (result.status === 'success') {
+                toast('Connection successful', 'success');
+            } else {
+                toast(result.message || 'Connection failed', 'error');
+            }
+        } catch (e) {
+            toast('Connection failed', 'error');
+        } finally {
+            testing = false;
+        }
+    }
+
+    async function handleSave() {
+        try {
+            const saved = await gitService.createConfig(newConfig);
+            configs = [...configs, saved];
+            toast('Configuration saved', 'success');
+            newConfig = { name: '', provider: 'GITHUB', url: 'https://github.com', pat: '', default_repository: '' };
+        } catch (e) {
+            toast(e.message, 'error');
+        }
+    }
+
+    async function handleDelete(id) {
+        if (!confirm('Are you sure you want to delete this Git configuration?')) return;
+        try {
+            await gitService.deleteConfig(id);
+            configs = configs.filter(c => c.id !== id);
+            toast('Configuration deleted', 'success');
+        } catch (e) {
+            toast(e.message, 'error');
+        }
+    }
+</script>
+
+<div class="p-6">
+    <h1 class="text-2xl font-bold mb-6">Git Integration Settings</h1>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <!-- List of Configs -->
+        <div class="bg-white p-6 rounded shadow">
+            <h2 class="text-xl font-semibold mb-4">Configured Servers</h2>
+            {#if configs.length === 0}
+                <p class="text-gray-500">No Git servers configured.</p>
+            {:else}
+                <ul class="divide-y">
+                    {#each configs as config}
+                        <li class="py-3 flex justify-between items-center">
+                            <div>
+                                <span class="font-medium">{config.name}</span>
+                                <span class="text-sm text-gray-500 ml-2">({config.provider})</span>
+                                <div class="text-xs text-gray-400">{config.url}</div>
+                            </div>
+                            <div class="flex items-center space-x-4">
+                                <span class="px-2 py-1 text-xs rounded {config.status === 'CONNECTED' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
+                                    {config.status}
+                                </span>
+                                <button on:click={() => handleDelete(config.id)} class="text-red-600 hover:text-red-800 p-1" title="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}
+        </div>
+
+        <!-- Add New Config -->
+        <div class="bg-white p-6 rounded shadow">
+            <h2 class="text-xl font-semibold mb-4">Add Git Server</h2>
+            <div class="space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700">Display Name</label>
+                    <input type="text" bind:value={newConfig.name} class="mt-1 block w-full border rounded p-2" placeholder="e.g. My GitHub" />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700">Provider</label>
+                    <select bind:value={newConfig.provider} class="mt-1 block w-full border rounded p-2">
+                        <option value="GITHUB">GitHub</option>
+                        <option value="GITLAB">GitLab</option>
+                        <option value="GITEA">Gitea</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700">Server URL</label>
+                    <input type="text" bind:value={newConfig.url} class="mt-1 block w-full border rounded p-2" />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700">Personal Access Token (PAT)</label>
+                    <input type="password" bind:value={newConfig.pat} class="mt-1 block w-full border rounded p-2" />
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700">Default Repository (Optional)</label>
+                    <input type="text" bind:value={newConfig.default_repository} class="mt-1 block w-full border rounded p-2" placeholder="org/repo" />
+                </div>
+                <div class="flex space-x-4 pt-4">
+                    <button on:click={handleTest} disabled={testing} class="bg-gray-200 px-4 py-2 rounded hover:bg-gray-300 disabled:opacity-50">
+                        {testing ? 'Testing...' : 'Test Connection'}
+                    </button>
+                    <button on:click={handleSave} class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
+                        Save Configuration
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

frontend/src/services/gitService.js

@@ -0,0 +1,325 @@
+/**
+ * [DEF:GitServiceClient:Module]
+ * @SEMANTICS: git, service, api, client
+ * @PURPOSE:   API client for Git operations, managing the communication between frontend and backend.
+ * @LAYER:     Service
+ * @RELATION:  DEPENDS_ON -> specs/011-git-integration-dashboard/contracts/api.md
+ */
+
+const API_BASE = '/api/git';
+
+// [DEF:gitService:Action]
+export const gitService = {
+    /**
+     * [DEF:getConfigs:Function]
+     * @purpose Fetches all Git server configurations.
+     * @pre     User must be authenticated.
+     * @post    Returns a list of Git server configurations.
+     * @returns {Promise<Array>} List of configs.
+     */
+    async getConfigs() {
+        console.log('[getConfigs][Action] Fetching Git configs');
+        const response = await fetch(`${API_BASE}/config`);
+        if (!response.ok) throw new Error('Failed to fetch Git configs');
+        return response.json();
+    },
+
+    /**
+     * [DEF:createConfig:Function]
+     * @purpose Creates a new Git server configuration.
+     * @pre     Config object must be valid.
+     * @post    New config is created and returned.
+     * @param   {Object} config - Configuration details.
+     * @returns {Promise<Object>} Created config.
+     */
+    async createConfig(config) {
+        console.log('[createConfig][Action] Creating Git config');
+        const response = await fetch(`${API_BASE}/config`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(config)
+        });
+        if (!response.ok) throw new Error('Failed to create Git config');
+        return response.json();
+    },
+
+    /**
+     * [DEF:deleteConfig:Function]
+     * @purpose Deletes an existing Git server configuration.
+     * @pre     configId must exist.
+     * @post    Config is deleted from the backend.
+     * @param   {string} configId - ID of the config to delete.
+     * @returns {Promise<Object>} Result of deletion.
+     */
+    async deleteConfig(configId) {
+        console.log(`[deleteConfig][Action] Deleting Git config ${configId}`);
+        const response = await fetch(`${API_BASE}/config/${configId}`, {
+            method: 'DELETE'
+        });
+        if (!response.ok) throw new Error('Failed to delete Git config');
+        return response.json();
+    },
+
+    /**
+     * [DEF:testConnection:Function]
+     * @purpose Tests the connection to a Git server with provided credentials.
+     * @pre     Config must contain valid URL and PAT.
+     * @post    Returns connection status (success/failure).
+     * @param   {Object} config - Configuration to test.
+     * @returns {Promise<Object>} Connection test result.
+     */
+    async testConnection(config) {
+        console.log('[testConnection][Action] Testing Git connection');
+        const response = await fetch(`${API_BASE}/config/test`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(config)
+        });
+        return response.json();
+    },
+
+    /**
+     * [DEF:initRepository:Function]
+     * @purpose Initializes or clones a Git repository for a dashboard.
+     * @pre     Dashboard must exist and config_id must be valid.
+     * @post    Repository is initialized on the backend.
+     * @param   {number} dashboardId - ID of the dashboard.
+     * @param   {string} configId - ID of the Git config.
+     * @param   {string} remoteUrl - URL of the remote repository.
+     * @returns {Promise<Object>} Initialization result.
+     */
+    async initRepository(dashboardId, configId, remoteUrl) {
+        console.log(`[initRepository][Action] Initializing repo for dashboard ${dashboardId}`);
+        const response = await fetch(`${API_BASE}/repositories/${dashboardId}/init`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ config_id: configId, remote_url: remoteUrl })
+        });
+        if (!response.ok) {
+            const err = await response.json();
+            throw new Error(err.detail || 'Failed to initialize repository');
+        }
+        return response.json();
+    },
+
+    /**
+     * [DEF:getBranches:Function]
+     * @purpose Retrieves the list of branches for a dashboard's repository.
+     * @pre     Repository must be initialized.
+     * @post    Returns a list of branches.
+     * @param   {number} dashboardId - ID of the dashboard.
+     * @returns {Promise<Array>} List of branches.
+     */
+    async getBranches(dashboardId) {
+        console.log(`[getBranches][Action] Fetching branches for dashboard ${dashboardId}`);
+        const response = await fetch(`${API_BASE}/repositories/${dashboardId}/branches`);
+        if (!response.ok) throw new Error('Failed to fetch branches');
+        return response.json();
+    },
+
+    /**
+     * [DEF:createBranch:Function]
+     * @purpose Creates a new branch in the dashboard's repository.
+     * @pre     Source branch must exist.
+     * @post    New branch is created.
+     * @param   {number} dashboardId - ID of the dashboard.
+     * @param   {string} name - New branch name.
+     * @param   {string} fromBranch - Source branch name.
+     * @returns {Promise<Object>} Creation result.
+     */
+    async createBranch(dashboardId, name, fromBranch) {
+        console.log(`[createBranch][Action] Creating branch ${name} for dashboard ${dashboardId}`);
+        const response = await fetch(`${API_BASE}/repositories/${dashboardId}/branches`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ name, from_branch: fromBranch })
+        });
+        if (!response.ok) throw new Error('Failed to create branch');
+        return response.json();
+    },
+
+    /**
+     * [DEF:checkoutBranch:Function]
+     * @purpose Switches the repository to a different branch.
+     * @pre     Target branch must exist.
+     * @post    Repository head is moved to the target branch.
+     * @param   {number} dashboardId - ID of the dashboard.
+     * @param   {string} name - Branch name to checkout.
+     * @returns {Promise<Object>} Checkout result.
+     */
+    async checkoutBranch(dashboardId, name) {
+        console.log(`[checkoutBranch][Action] Checking out branch ${name} for dashboard ${dashboardId}`);
+        const response = await fetch(`${API_BASE}/repositories/${dashboardId}/checkout`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ name })
+        });
+        if (!response.ok) throw new Error('Failed to checkout branch');
+        return response.json();
+    },
+
+    /**
+     * [DEF:commit:Function]
+     * @purpose Stages and commits changes to the repository.
+     * @pre     Message must not be empty.
+     * @post    Changes are committed to the current branch.
+     * @param   {number} dashboardId - ID of the dashboard.
+     * @param   {string} message - Commit message.
+     * @param   {Array} files - Optional list of files to commit.
+     * @returns {Promise<Object>} Commit result.
+     */
+    async commit(dashboardId, message, files) {
+        console.log(`[commit][Action] Committing changes for dashboard ${dashboardId}`);
+        const response = await fetch(`${API_BASE}/repositories/${dashboardId}/commit`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message, files })
+        });
+        if (!response.ok) throw new Error('Failed to commit changes');
+        return response.json();
+    },
+
+    /**
+     * [DEF:push:Function]
+     * @purpose Pushes local commits to the remote repository.
+     * @pre     Remote must be configured and accessible.
+     * @post    Remote is updated with local commits.
+     * @param   {number} dashboardId - ID of the dashboard.
+     * @returns {Promise<Object>} Push result.
+     */
+    async push(dashboardId) {
+        console.log(`[push][Action] Pushing changes for dashboard ${dashboardId}`);
+        const response = await fetch(`${API_BASE}/repositories/${dashboardId}/push`, {
+            method: 'POST'
+        });
+        if (!response.ok) throw new Error('Failed to push changes');
+        return response.json();
+    },
+
+    /**
+     * [DEF:pull:Function]
+     * @purpose Pulls changes from the remote repository.
+     * @pre     Remote must be configured and accessible.
+     * @post    Local repository is updated with remote changes.
+     * @param   {number} dashboardId - ID of the dashboard.
+     * @returns {Promise<Object>} Pull result.
+     */
+    async pull(dashboardId) {
+        console.log(`[pull][Action] Pulling changes for dashboard ${dashboardId}`);
+        const response = await fetch(`${API_BASE}/repositories/${dashboardId}/pull`, {
+            method: 'POST'
+        });
+        if (!response.ok) throw new Error('Failed to pull changes');
+        return response.json();
+    },
+
+    /**
+     * [DEF:getEnvironments:Function]
+     * @purpose Retrieves available deployment environments.
+     * @post    Returns a list of environments.
+     * @returns {Promise<Array>} List of environments.
+     */
+    async getEnvironments() {
+        console.log('[getEnvironments][Action] Fetching environments');
+        const response = await fetch(`${API_BASE}/environments`);
+        if (!response.ok) throw new Error('Failed to fetch environments');
+        return response.json();
+    },
+
+    /**
+     * [DEF:deploy:Function]
+     * @purpose Deploys a dashboard to a target environment.
+     * @pre     Environment must be active and accessible.
+     * @post    Dashboard is imported into the target Superset instance.
+     * @param   {number} dashboardId - ID of the dashboard.
+     * @param   {string} environmentId - ID of the target environment.
+     * @returns {Promise<Object>} Deployment result.
+     */
+    async deploy(dashboardId, environmentId) {
+        console.log(`[deploy][Action] Deploying dashboard ${dashboardId} to environment ${environmentId}`);
+        const response = await fetch(`${API_BASE}/repositories/${dashboardId}/deploy`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ environment_id: environmentId })
+        });
+        if (!response.ok) throw new Error('Failed to deploy dashboard');
+        return response.json();
+    },
+
+    /**
+     * [DEF:getHistory:Function]
+     * @purpose Retrieves the commit history for a dashboard.
+     * @param   {number} dashboardId - ID of the dashboard.
+     * @param   {number} limit - Maximum number of commits to return.
+     * @returns {Promise<Array>} List of commits.
+     */
+    async getHistory(dashboardId, limit = 50) {
+        console.log(`[getHistory][Action] Fetching history for dashboard ${dashboardId}`);
+        const response = await fetch(`${API_BASE}/repositories/${dashboardId}/history?limit=${limit}`);
+        if (!response.ok) throw new Error('Failed to fetch commit history');
+        return response.json();
+    },
+
+    /**
+     * [DEF:sync:Function]
+     * @purpose Synchronizes the local dashboard state with the Git repository.
+     * @param   {number} dashboardId - ID of the dashboard.
+     * @param   {string|null} sourceEnvId - Optional source environment ID.
+     * @returns {Promise<Object>} Sync result.
+     */
+    async sync(dashboardId, sourceEnvId = null) {
+        console.log(`[sync][Action] Syncing dashboard ${dashboardId}`);
+        const url = new URL(`${window.location.origin}${API_BASE}/repositories/${dashboardId}/sync`);
+        if (sourceEnvId) url.searchParams.append('source_env_id', sourceEnvId);
+        
+        const response = await fetch(url, {
+            method: 'POST'
+        });
+        if (!response.ok) {
+            const err = await response.json();
+            throw new Error(err.detail || 'Failed to sync dashboard');
+        }
+        return response.json();
+    },
+
+    /**
+     * [DEF:getStatus:Function]
+     * @purpose Fetches the current Git status for a dashboard repository.
+     * @pre     dashboardId must be a valid integer.
+     * @post    Returns a status object with dirty files and branch info.
+     * @param   {number} dashboardId - The ID of the dashboard.
+     * @returns {Promise<Object>} Status details.
+     */
+    async getStatus(dashboardId) {
+        console.log(`[getStatus][Action] Fetching status for dashboard ${dashboardId}`);
+        const response = await fetch(`${API_BASE}/repositories/${dashboardId}/status`);
+        if (!response.ok) throw new Error('Failed to fetch status');
+        return response.json();
+    },
+
+    /**
+     * [DEF:getDiff:Function]
+     * @purpose Retrieves the diff for specific files or the whole repository.
+     * @pre     dashboardId must be a valid integer.
+     * @post    Returns the Git diff string.
+     * @param   {number} dashboardId - The ID of the dashboard.
+     * @param   {string|null} filePath - Optional specific file path.
+     * @param   {boolean} staged - Whether to show staged changes.
+     * @returns {Promise<string>} The diff content.
+     */
+    async getDiff(dashboardId, filePath = null, staged = false) {
+        console.log(`[getDiff][Action] Fetching diff for dashboard ${dashboardId} (file: ${filePath}, staged: ${staged})`);
+        let url = `${API_BASE}/repositories/${dashboardId}/diff`;
+        const params = new URLSearchParams();
+        if (filePath) params.append('file_path', filePath);
+        if (staged) params.append('staged', 'true');
+        if (params.toString()) url += `?${params.toString()}`;
+        
+        const response = await fetch(url);
+        if (!response.ok) throw new Error('Failed to fetch diff');
+        return response.json();
+    }
+};
+// [/DEF:gitService:Action]
+
+// [/DEF:GitServiceClient:Module]