diff --git a/frontend/src/routes/dashboards/[id]/+page.svelte b/frontend/src/routes/dashboards/[id]/+page.svelte
index 998ae417..b72b93e0 100644
--- a/frontend/src/routes/dashboards/[id]/+page.svelte
+++ b/frontend/src/routes/dashboards/[id]/+page.svelte
@@ -46,16 +46,20 @@
   import BranchSelector from "../../../components/git/BranchSelector.svelte";
   import CommitHistory from "../../../components/git/CommitHistory.svelte";
   import GitManager from "../../../components/git/GitManager.svelte";
+  import DashboardHeader from "./components/DashboardHeader.svelte";
+  import DashboardGitManager from "./components/DashboardGitManager.svelte";
+  import DashboardLinkedResources from "./components/DashboardLinkedResources.svelte";
+  import DashboardTaskHistory from "./components/DashboardTaskHistory.svelte";
 
   let dashboardRef = $derived(page.params.id);
   let envId = $derived(page.url.searchParams.get("env_id") || "");
+  let dashboard = $state(null);
   let gitDashboardRef = $derived(dashboard?.slug || dashboardRef || "");
   let resolvedDashboardId = $derived(
     dashboard?.id ??
     (/^\d+$/.test(String(dashboardRef || "")) ? Number(dashboardRef) : null),
   );
 
-  let dashboard = $state(null);
   let isLoading = $state(true);
   let error = $state(null);
   let taskHistory = $state([]);
@@ -531,87 +535,26 @@
 </script>
 
 <div class="mx-auto w-full max-w-7xl space-y-6">
-  <div class="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
-    <div class="min-w-0 space-y-2">
-      <button
-        class="inline-flex items-center gap-2 rounded-lg px-2 py-1 text-sm text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
-        onclick={goBack}
-      >
-        <Icon name="chevronLeft" size={16} />
-        {$t.common?.back}
-      </button>
-
-      <div class="flex flex-wrap items-center gap-3">
-        <h1 class="text-2xl font-bold text-slate-900">
-          {dashboard?.title || $t.dashboard?.overview}
-        </h1>
-        {#if hasGitRepository() && gitDashboardRef}
-          <div
-            class="w-full max-w-xs rounded-lg border border-slate-200 bg-slate-50 px-3 py-2"
-          >
-            <BranchSelector
-              dashboardId={gitDashboardRef}
-              envId={envId || null}
-              bind:currentBranch
-              onchange={handleBranchChange}
-            />
-          </div>
-        {/if}
-      </div>
-
-      <p class="mt-1 flex flex-wrap items-center gap-2 text-sm text-slate-500">
-        <span>{$t.common?.id}: {resolvedDashboardId ?? dashboardRef}{#if dashboard?.slug} • {dashboard.slug}{/if}</span>
-        <span class="text-slate-300">|</span>
-        <span
-          class={`inline-flex items-center gap-2 rounded-full border px-2 py-1 text-xs font-semibold ${gitMeta.pillClass}`}
-        >
-          <span class={`h-2 w-2 rounded-full ${gitMeta.dotClass}`}></span>
-          Git: {gitMeta.label}
-          {#if gitStatus?.ahead_count > 0}
-            ({gitStatus.ahead_count})
-          {/if}
-        </span>
-      </p>
-    </div>
-
-    <div class="flex flex-wrap items-center gap-2">
-      <button
-        class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
-        onclick={() => (showGitManager = true)}
-      >
-        {$t.git?.management || "Manage Git"}
-      </button>
-      <button
-        class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
-        onclick={runBackupTask}
-        disabled={isStartingBackup}
-      >
-        {isStartingBackup
-          ? $t.common?.loading || "Loading..."
-          : $t.dashboard?.run_backup || "Run backup"}
-      </button>
-      <button
-        class="inline-flex items-center justify-center rounded-lg border px-4 py-2 text-sm font-medium transition-colors {llmReady
-          ? 'border-indigo-300 bg-indigo-50 text-indigo-700 hover:bg-indigo-100'
-          : 'border-rose-300 bg-rose-50 text-rose-700 opacity-70 cursor-not-allowed'}"
-        onclick={runLlmValidationTask}
-        disabled={isStartingValidation || !llmReady}
-        title={!llmReady
-          ? $t.dashboard?.llm_not_configured || "LLM is not configured"
-          : ""}
-      >
-        {isStartingValidation
-          ? $t.common?.loading || "Loading..."
-          : $t.dashboard?.run_llm_check || "Run LLM check"}
-      </button>
-      <button
-        class="inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-hover"
-        onclick={loadDashboardPage}
-      >
-        {$t.common?.refresh}
-      </button>
-    </div>
-  </div>
+  <DashboardHeader
+    {dashboard}
+    {resolvedDashboardId}
+    {dashboardRef}
+    {envId}
+    {gitDashboardRef}
+    hasGitRepo={hasGitRepository()}
+    bind:currentBranch
+    {gitMeta}
+    {gitStatus}
+    {llmReady}
+    {isStartingBackup}
+    {isStartingValidation}
+    bind:showGitManager
+    {goBack}
+    {handleBranchChange}
+    {runBackupTask}
+    {runLlmValidationTask}
+    {loadDashboardPage}
+  />
 
   {#if !llmReady}
     <div
@@ -694,112 +637,28 @@
         {/if}
       </div>
 
-      <div class="rounded-xl border border-slate-200 bg-white p-4 xl:col-span-3">
-        <div class="mb-3 flex items-center justify-between gap-2">
-          <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
-            {$t.git?.management || "Git Repository"}
-          </h2>
-          <button
-            class="rounded-md border border-slate-300 px-2 py-1 text-xs text-slate-700 hover:bg-slate-50"
-            onclick={loadGitStatus}
-            disabled={isGitStatusLoading}
-          >
-            {$t.common?.refresh || "Refresh"}
-          </button>
-        </div>
-
-        {#if isGitStatusLoading}
-          <div class="space-y-2">
-            {#each Array(3) as _}
-              <div class="h-10 animate-pulse rounded bg-slate-100"></div>
-            {/each}
-          </div>
-        {:else if gitStatusError}
-          <div class="rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">
-            {gitStatusError}
-          </div>
-        {:else if !hasGitRepository()}
-          <div class="space-y-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-6 text-sm text-slate-600">
-            <div>
-              {$t.git?.not_linked || "Этот дашборд еще не привязан к Git-репозиторию."}
-            </div>
-            <button
-              class="inline-flex items-center justify-center rounded-lg bg-slate-900 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800"
-              onclick={() => (showGitManager = true)}
-            >
-              Инициализировать Git-репозиторий
-            </button>
-          </div>
-        {:else}
-          <div class="space-y-4">
-            <p class="text-sm text-slate-700">
-              {#if gitSyncState === "CHANGES"}
-                Обнаружены изменения конфигурации в Superset.
-              {:else}
-                Конфигурация Superset совпадает с веткой {gitStatus?.current_branch || "main"}.
-              {/if}
-            </p>
-
-            <div class="flex flex-wrap gap-2 text-xs text-slate-600">
-              <span class="rounded-full bg-slate-100 px-2 py-1">
-                charts: {changedChartsCount}
-              </span>
-              <span class="rounded-full bg-slate-100 px-2 py-1">
-                datasets: {changedDatasetsCount}
-              </span>
-              <span class="rounded-full bg-slate-100 px-2 py-1">
-                files: {allChangedFiles().length}
-              </span>
-            </div>
-
-            <div class="grid gap-2 md:grid-cols-2">
-              <button
-                class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-60"
-                onclick={runGitSyncAndOpenCommit}
-                disabled={isSyncingGit || !hasChangesToCommit}
-              >
-                {isSyncingGit
-                  ? $t.common?.loading || "Loading..."
-                  : "Синхронизировать и зафиксировать"}
-              </button>
-              <button
-                class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-60"
-                onclick={loadGitDiffPreview}
-                disabled={isGitDiffLoading || !hasChangesToCommit}
-              >
-                {isGitDiffLoading ? $t.common?.loading || "Loading..." : "Показать diff"}
-              </button>
-            </div>
-
-            <div class="grid gap-2 md:grid-cols-2">
-              <button
-                class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-60"
-                onclick={runGitPull}
-                disabled={isPullingGit}
-              >
-                {isPullingGit ? $t.common?.loading || "Loading..." : $t.git?.pull || "Pull"}
-              </button>
-              <button
-                class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-60"
-                onclick={runGitPush}
-                disabled={isPushingGit}
-              >
-                {#if isPushingGit}
-                  {$t.common?.loading || "Loading..."}
-                {:else}
-                  {$t.git?.push || "Push"}{#if gitStatus?.ahead_count > 0} ({gitStatus.ahead_count}){/if}
-                {/if}
-              </button>
-            </div>
-
-            {#if gitDiffPreview}
-              <div class="max-h-52 overflow-auto rounded-lg border border-slate-200 bg-slate-900 p-3 text-xs text-slate-100">
-                <pre class="whitespace-pre-wrap font-mono">{gitDiffPreview}</pre>
-              </div>
-            {/if}
-          </div>
-        {/if}
-      </div>
+      <DashboardGitManager
+        {isGitStatusLoading}
+        {gitStatusError}
+        hasGitRepo={hasGitRepository()}
+        {gitSyncState}
+        {gitStatus}
+        {changedChartsCount}
+        {changedDatasetsCount}
+        allChangedFiles={allChangedFiles()}
+        {runGitSyncAndOpenCommit}
+        {isSyncingGit}
+        {hasChangesToCommit}
+        {loadGitDiffPreview}
+        {isGitDiffLoading}
+        {runGitPull}
+        {isPullingGit}
+        {runGitPush}
+        {isPushingGit}
+        {gitDiffPreview}
+        {loadGitStatus}
+        bind:showGitManager
+      />
     </div>
 
     <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
@@ -853,111 +712,11 @@
 
       <div class="space-y-4 p-4">
         {#if activeTab === "resources"}
-          {#if dashboard.description}
-            <div class="rounded-xl border border-slate-200 bg-white p-4">
-              <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
-                {$t.dashboard?.overview}
-              </h2>
-              <p class="mt-2 text-sm text-slate-700">{dashboard.description}</p>
-            </div>
-          {/if}
-
-          <div class="rounded-xl border border-slate-200 bg-white overflow-hidden">
-            <div class="border-b border-slate-200 px-4 py-3">
-              <h2 class="text-lg font-semibold text-slate-900">
-                {$t.dashboard?.charts}
-              </h2>
-            </div>
-            {#if dashboard.charts && dashboard.charts.length > 0}
-              <div class="overflow-x-auto">
-                <table class="min-w-full divide-y divide-slate-200 text-sm">
-                  <thead class="bg-slate-50">
-                    <tr>
-                      <th class="px-4 py-2 text-left font-semibold text-slate-600">
-                        {$t.settings?.type_chart}
-                      </th>
-                      <th class="px-4 py-2 text-left font-semibold text-slate-600">
-                        {$t.nav?.datasets}
-                      </th>
-                      <th class="px-4 py-2 text-left font-semibold text-slate-600">
-                        {$t.dashboard?.overview}
-                      </th>
-                      <th class="px-4 py-2 text-left font-semibold text-slate-600">
-                        {$t.dashboard?.last_modified}
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody class="divide-y divide-slate-100">
-                    {#each dashboard.charts as chart}
-                      <tr class="hover:bg-slate-50">
-                        <td class="px-4 py-3">
-                          <div class="font-medium text-slate-900">{chart.title}</div>
-                          <div class="text-xs text-slate-500">
-                            ID: {chart.id}{#if chart.viz_type} • {chart.viz_type}{/if}
-                          </div>
-                        </td>
-                        <td class="px-4 py-3">
-                          {#if chart.dataset_id}
-                            <button
-                              class="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-blue-700 hover:bg-blue-50 hover:text-blue-800"
-                              onclick={() => openDataset(chart.dataset_id)}
-                              title={`${$t.datasets?.table_name} ${chart.dataset_id}`}
-                            >
-                              {$t.nav?.datasets}
-                              {chart.dataset_id}
-                              <Icon name="chevronRight" size={12} className="text-blue-500" />
-                            </button>
-                          {:else}
-                            <span class="text-xs text-slate-400">-</span>
-                          {/if}
-                        </td>
-                        <td class="px-4 py-3 text-slate-700">{chart.overview || "-"}</td>
-                        <td class="px-4 py-3 text-slate-700">{formatDate(chart.last_modified)}</td>
-                      </tr>
-                    {/each}
-                  </tbody>
-                </table>
-              </div>
-            {:else}
-              <div class="px-4 py-8 text-sm text-slate-500">
-                {$t.dashboard?.no_charts}
-              </div>
-            {/if}
-          </div>
-
-          <div class="rounded-xl border border-slate-200 bg-white overflow-hidden">
-            <div class="border-b border-slate-200 px-4 py-3">
-              <h2 class="text-lg font-semibold text-slate-900">{$t.nav?.datasets}</h2>
-            </div>
-            {#if dashboard.datasets && dashboard.datasets.length > 0}
-              <div class="divide-y divide-slate-100">
-                {#each dashboard.datasets as dataset}
-                  <button
-                    class="flex w-full items-center justify-between gap-4 px-4 py-3 text-left transition-colors hover:bg-slate-50"
-                    onclick={() => openDataset(dataset.id)}
-                  >
-                    <div class="min-w-0">
-                      <div class="truncate font-medium text-slate-900">
-                        {dataset.table_name}
-                      </div>
-                      <div class="truncate text-xs text-slate-500">
-                        {dataset.overview || `${dataset.schema || ""}.${dataset.table_name}`}
-                        {#if dataset.database} • {dataset.database}{/if}
-                      </div>
-                    </div>
-                    <div class="flex items-center gap-3">
-                      <span class="text-xs text-slate-500">{formatDate(dataset.last_modified)}</span>
-                      <Icon name="chevronRight" size={16} className="text-slate-400" />
-                    </div>
-                  </button>
-                {/each}
-              </div>
-            {:else}
-              <div class="px-4 py-8 text-sm text-slate-500">
-                {$t.dashboard?.no_datasets}
-              </div>
-            {/if}
-          </div>
+          <DashboardLinkedResources
+            {dashboard}
+            {openDataset}
+            {formatDate}
+          />
         {:else if activeTab === "git-history"}
           {#if hasGitRepository() && gitDashboardRef}
             <CommitHistory dashboardId={gitDashboardRef} envId={envId || null} />
@@ -967,87 +726,18 @@
             </div>
           {/if}
         {:else}
-          <div class="rounded-xl border border-slate-200 bg-white p-4">
-            <div class="mb-3 flex items-center justify-between">
-              <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
-                {$t.tasks?.recent || "Recent tasks"}
-              </h2>
-              <button
-                class="rounded-md border border-slate-300 px-2 py-1 text-xs text-slate-700 hover:bg-slate-50"
-                onclick={loadTaskHistory}
-                disabled={isTaskHistoryLoading}
-              >
-                {$t.common?.refresh || "Refresh"}
-              </button>
-            </div>
-            {#if isTaskHistoryLoading}
-              <div class="space-y-2">
-                {#each Array(4) as _}
-                  <div class="h-10 animate-pulse rounded bg-slate-100"></div>
-                {/each}
-              </div>
-            {:else if taskHistoryError}
-              <div class="rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">
-                {taskHistoryError}
-              </div>
-            {:else if taskHistory.length === 0}
-              <div class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-6 text-center text-sm text-slate-500">
-                {$t.tasks?.select_task || "No backup/LLM tasks yet"}
-              </div>
-            {:else}
-              <div class="overflow-x-auto">
-                <table class="min-w-full divide-y divide-slate-200 text-sm">
-                  <thead class="bg-slate-50">
-                    <tr>
-                      <th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.type || "Type"}</th>
-                      <th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.status || "Status"}</th>
-                      <th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.tasks?.result || "Check"}</th>
-                      <th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.started || "Started"}</th>
-                      <th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.finished || "Finished"}</th>
-                      <th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.actions || "Actions"}</th>
-                    </tr>
-                  </thead>
-                  <tbody class="divide-y divide-slate-100">
-                    {#each taskHistory as task}
-                      {@const validation = getValidationStatus(task)}
-                      <tr>
-                        <td class="px-3 py-2 text-slate-800">{toTaskTypeLabel(task.plugin_id)}</td>
-                        <td class="px-3 py-2">
-                          <span class={`rounded-full px-2 py-1 text-xs font-semibold uppercase ${getTaskStatusClasses(task.status)}`}>
-                            {task.status}
-                          </span>
-                        </td>
-                        <td class="px-3 py-2">
-                          <span class={`inline-flex items-center gap-1 rounded-full border px-2 py-1 text-xs font-semibold uppercase ${getValidationStatusClasses(validation.level)}`}>
-                            {#if validation.icon}
-                              <span class="inline-flex min-w-[18px] items-center justify-center rounded-full bg-white/70 px-1 text-[10px] font-bold">
-                                {validation.icon}
-                              </span>
-                            {/if}
-                            {validation.label}
-                          </span>
-                        </td>
-                        <td class="px-3 py-2 text-slate-700">{formatDate(task.started_at)}</td>
-                        <td class="px-3 py-2 text-slate-700">{formatDate(task.finished_at)}</td>
-                        <td class="px-3 py-2">
-                          <div class="flex flex-wrap items-center gap-1">
-                            {#if task.plugin_id === "llm_dashboard_validation"}
-                              <button
-                                class="inline-flex items-center gap-1 rounded-md border border-indigo-300 bg-indigo-50 px-2 py-1 text-xs text-indigo-700 hover:bg-indigo-100"
-                                onclick={() => openLlmReport(task.id)}
-                              >
-                                {$t.tasks?.open_llm_report || "LLM report"}
-                              </button>
-                            {/if}
-                          </div>
-                        </td>
-                      </tr>
-                    {/each}
-                  </tbody>
-                </table>
-              </div>
-            {/if}
-          </div>
+          <DashboardTaskHistory
+            {isTaskHistoryLoading}
+            {taskHistoryError}
+            {taskHistory}
+            {loadTaskHistory}
+            {getValidationStatus}
+            {toTaskTypeLabel}
+            {getTaskStatusClasses}
+            {getValidationStatusClasses}
+            {formatDate}
+            {openLlmReport}
+          />
         {/if}
       </div>
     </div>
diff --git a/frontend/src/routes/dashboards/[id]/components/DashboardGitManager.svelte b/frontend/src/routes/dashboards/[id]/components/DashboardGitManager.svelte
new file mode 100644
index 00000000..6d24ebc3
--- /dev/null
+++ b/frontend/src/routes/dashboards/[id]/components/DashboardGitManager.svelte
@@ -0,0 +1,138 @@
+<!-- [DEF:DashboardGitManager:Component] -->
+<script>
+  /**
+   * @COMPLEXITY: 2
+   * @PURPOSE: Git Repository block (status, ahead/behind, changes count, push/pull/sync buttons, and diff preview).
+   * @LAYER: UI
+   */
+  import { t } from "$lib/i18n";
+
+  let {
+    isGitStatusLoading,
+    gitStatusError,
+    hasGitRepo,
+    gitSyncState,
+    gitStatus,
+    changedChartsCount,
+    changedDatasetsCount,
+    allChangedFiles,
+    runGitSyncAndOpenCommit,
+    isSyncingGit,
+    hasChangesToCommit,
+    loadGitDiffPreview,
+    isGitDiffLoading,
+    runGitPull,
+    isPullingGit,
+    runGitPush,
+    isPushingGit,
+    gitDiffPreview,
+    loadGitStatus,
+    showGitManager = $bindable()
+  } = $props();
+</script>
+
+<div class="rounded-xl border border-slate-200 bg-white p-4 xl:col-span-3">
+  <div class="mb-3 flex items-center justify-between gap-2">
+    <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
+      {$t.git?.management || "Git Repository"}
+    </h2>
+    <button
+      class="rounded-md border border-slate-300 px-2 py-1 text-xs text-slate-700 hover:bg-slate-50"
+      onclick={loadGitStatus}
+      disabled={isGitStatusLoading}
+    >
+      {$t.common?.refresh || "Refresh"}
+    </button>
+  </div>
+
+  {#if isGitStatusLoading}
+    <div class="space-y-2">
+      {#each Array(3) as _}
+        <div class="h-10 animate-pulse rounded bg-slate-100"></div>
+      {/each}
+    </div>
+  {:else if gitStatusError}
+    <div class="rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">
+      {gitStatusError}
+    </div>
+  {:else if !hasGitRepo}
+    <div class="space-y-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-6 text-sm text-slate-600">
+      <div>
+        {$t.git?.not_linked || "Этот дашборд еще не привязан к Git-репозиторию."}
+      </div>
+      <button
+        class="inline-flex items-center justify-center rounded-lg bg-slate-900 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800"
+        onclick={() => (showGitManager = true)}
+      >
+        Инициализировать Git-репозиторий
+      </button>
+    </div>
+  {:else}
+    <div class="space-y-4">
+      <p class="text-sm text-slate-700">
+        {#if gitSyncState === "CHANGES"}
+          Обнаружены изменения конфигурации в Superset.
+        {:else}
+          Конфигурация Superset совпадает с веткой {gitStatus?.current_branch || "main"}.
+        {/if}
+      </p>
+
+      <div class="flex flex-wrap gap-2 text-xs text-slate-600">
+        <span class="rounded-full bg-slate-100 px-2 py-1">
+          charts: {changedChartsCount}
+        </span>
+        <span class="rounded-full bg-slate-100 px-2 py-1">
+          datasets: {changedDatasetsCount}
+        </span>
+        <span class="rounded-full bg-slate-100 px-2 py-1">
+          files: {allChangedFiles.length}
+        </span>
+      </div>
+
+      <div class="grid gap-2 md:grid-cols-2">
+        <button
+          class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-60"
+          onclick={runGitSyncAndOpenCommit}
+          disabled={isSyncingGit || !hasChangesToCommit}
+        >
+          {isSyncingGit ? $t.common?.loading || "Loading..." : "Синхронизировать и зафиксировать"}
+        </button>
+        <button
+          class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-60"
+          onclick={loadGitDiffPreview}
+          disabled={isGitDiffLoading || !hasChangesToCommit}
+        >
+          {isGitDiffLoading ? $t.common?.loading || "Loading..." : "Показать diff"}
+        </button>
+      </div>
+
+      <div class="grid gap-2 md:grid-cols-2">
+        <button
+          class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-60"
+          onclick={runGitPull}
+          disabled={isPullingGit}
+        >
+          {isPullingGit ? $t.common?.loading || "Loading..." : $t.git?.pull || "Pull"}
+        </button>
+        <button
+          class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-60"
+          onclick={runGitPush}
+          disabled={isPushingGit}
+        >
+          {#if isPushingGit}
+            {$t.common?.loading || "Loading..."}
+          {:else}
+            {$t.git?.push || "Push"}{#if gitStatus?.ahead_count > 0} ({gitStatus.ahead_count}){/if}
+          {/if}
+        </button>
+      </div>
+
+      {#if gitDiffPreview}
+        <div class="max-h-52 overflow-auto rounded-lg border border-slate-200 bg-slate-900 p-3 text-xs text-slate-100">
+          <pre class="whitespace-pre-wrap font-mono">{gitDiffPreview}</pre>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+<!-- [/DEF:DashboardGitManager:Component] -->
\ No newline at end of file
diff --git a/frontend/src/routes/dashboards/[id]/components/DashboardHeader.svelte b/frontend/src/routes/dashboards/[id]/components/DashboardHeader.svelte
new file mode 100644
index 00000000..81c68f9f
--- /dev/null
+++ b/frontend/src/routes/dashboards/[id]/components/DashboardHeader.svelte
@@ -0,0 +1,103 @@
+<!-- [DEF:DashboardHeader:Component] -->
+<script>
+  /**
+   * @COMPLEXITY: 2
+   * @PURPOSE: Top title area, breadcrumb, git branch selector, and action buttons for dashboard detail.
+   * @LAYER: UI
+   */
+  import { t } from "$lib/i18n";
+  import Icon from "$lib/ui/Icon.svelte";
+  import BranchSelector from "../../../../components/git/BranchSelector.svelte";
+
+  let {
+    dashboard,
+    resolvedDashboardId,
+    dashboardRef,
+    envId,
+    gitDashboardRef,
+    hasGitRepo,
+    currentBranch = $bindable(),
+    gitMeta,
+    gitStatus,
+    llmReady,
+    isStartingBackup,
+    isStartingValidation,
+    showGitManager = $bindable(),
+    goBack,
+    handleBranchChange,
+    runBackupTask,
+    runLlmValidationTask,
+    loadDashboardPage
+  } = $props();
+</script>
+
+<div class="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
+  <div class="min-w-0 space-y-2">
+    <button
+      class="inline-flex items-center gap-2 rounded-lg px-2 py-1 text-sm text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
+      onclick={goBack}
+    >
+      <Icon name="chevronLeft" size={16} />
+      {$t.common?.back}
+    </button>
+
+    <div class="flex flex-wrap items-center gap-3">
+      <h1 class="text-2xl font-bold text-slate-900">
+        {dashboard?.title || $t.dashboard?.overview}
+      </h1>
+      {#if hasGitRepo && gitDashboardRef}
+        <div class="w-full max-w-xs rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
+          <BranchSelector
+            dashboardId={gitDashboardRef}
+            {envId}
+            bind:currentBranch
+            onchange={handleBranchChange}
+          />
+        </div>
+      {/if}
+    </div>
+
+    <p class="mt-1 flex flex-wrap items-center gap-2 text-sm text-slate-500">
+      <span>{$t.common?.id}: {resolvedDashboardId ?? dashboardRef}{#if dashboard?.slug} • {dashboard.slug}{/if}</span>
+      <span class="text-slate-300">|</span>
+      <span class={`inline-flex items-center gap-2 rounded-full border px-2 py-1 text-xs font-semibold ${gitMeta.pillClass}`}>
+        <span class={`h-2 w-2 rounded-full ${gitMeta.dotClass}`}></span>
+        Git: {gitMeta.label}
+        {#if gitStatus?.ahead_count > 0}
+          ({gitStatus.ahead_count})
+        {/if}
+      </span>
+    </p>
+  </div>
+
+  <div class="flex flex-wrap items-center gap-2">
+    <button
+      class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
+      onclick={() => (showGitManager = true)}
+    >
+      {$t.git?.management || "Manage Git"}
+    </button>
+    <button
+      class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
+      onclick={runBackupTask}
+      disabled={isStartingBackup}
+    >
+      {isStartingBackup ? $t.common?.loading || "Loading..." : $t.dashboard?.run_backup || "Run backup"}
+    </button>
+    <button
+      class="inline-flex items-center justify-center rounded-lg border px-4 py-2 text-sm font-medium transition-colors {llmReady ? 'border-indigo-300 bg-indigo-50 text-indigo-700 hover:bg-indigo-100' : 'border-rose-300 bg-rose-50 text-rose-700 opacity-70 cursor-not-allowed'}"
+      onclick={runLlmValidationTask}
+      disabled={isStartingValidation || !llmReady}
+      title={!llmReady ? $t.dashboard?.llm_not_configured || "LLM is not configured" : ""}
+    >
+      {isStartingValidation ? $t.common?.loading || "Loading..." : $t.dashboard?.run_llm_check || "Run LLM check"}
+    </button>
+    <button
+      class="inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-hover"
+      onclick={loadDashboardPage}
+    >
+      {$t.common?.refresh}
+    </button>
+  </div>
+</div>
+<!-- [/DEF:DashboardHeader:Component] -->
\ No newline at end of file
diff --git a/frontend/src/routes/dashboards/[id]/components/DashboardLinkedResources.svelte b/frontend/src/routes/dashboards/[id]/components/DashboardLinkedResources.svelte
new file mode 100644
index 00000000..135b914f
--- /dev/null
+++ b/frontend/src/routes/dashboards/[id]/components/DashboardLinkedResources.svelte
@@ -0,0 +1,123 @@
+<!-- [DEF:DashboardLinkedResources:Component] -->
+<script>
+  /**
+   * @COMPLEXITY: 2
+   * @PURPOSE: Block for overview, charts table, and datasets list.
+   * @LAYER: UI
+   */
+  import { t } from "$lib/i18n";
+  import Icon from "$lib/ui/Icon.svelte";
+
+  let {
+    dashboard,
+    openDataset,
+    formatDate
+  } = $props();
+</script>
+
+{#if dashboard.description}
+  <div class="rounded-xl border border-slate-200 bg-white p-4">
+    <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
+      {$t.dashboard?.overview}
+    </h2>
+    <p class="mt-2 text-sm text-slate-700">{dashboard.description}</p>
+  </div>
+{/if}
+
+<div class="rounded-xl border border-slate-200 bg-white overflow-hidden">
+  <div class="border-b border-slate-200 px-4 py-3">
+    <h2 class="text-lg font-semibold text-slate-900">
+      {$t.dashboard?.charts}
+    </h2>
+  </div>
+  {#if dashboard.charts && dashboard.charts.length > 0}
+    <div class="overflow-x-auto">
+      <table class="min-w-full divide-y divide-slate-200 text-sm">
+        <thead class="bg-slate-50">
+          <tr>
+            <th class="px-4 py-2 text-left font-semibold text-slate-600">
+              {$t.settings?.type_chart}
+            </th>
+            <th class="px-4 py-2 text-left font-semibold text-slate-600">
+              {$t.nav?.datasets}
+            </th>
+            <th class="px-4 py-2 text-left font-semibold text-slate-600">
+              {$t.dashboard?.overview}
+            </th>
+            <th class="px-4 py-2 text-left font-semibold text-slate-600">
+              {$t.dashboard?.last_modified}
+            </th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-slate-100">
+          {#each dashboard.charts as chart}
+            <tr class="hover:bg-slate-50">
+              <td class="px-4 py-3">
+                <div class="font-medium text-slate-900">{chart.title}</div>
+                <div class="text-xs text-slate-500">
+                  ID: {chart.id}{#if chart.viz_type} • {chart.viz_type}{/if}
+                </div>
+              </td>
+              <td class="px-4 py-3">
+                {#if chart.dataset_id}
+                  <button
+                    class="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-blue-700 hover:bg-blue-50 hover:text-blue-800"
+                    onclick={() => openDataset(chart.dataset_id)}
+                    title={`${$t.datasets?.table_name} ${chart.dataset_id}`}
+                  >
+                    {$t.nav?.datasets}
+                    {chart.dataset_id}
+                    <Icon name="chevronRight" size={12} className="text-blue-500" />
+                  </button>
+                {:else}
+                  <span class="text-xs text-slate-400">-</span>
+                {/if}
+              </td>
+              <td class="px-4 py-3 text-slate-700">{chart.overview || "-"}</td>
+              <td class="px-4 py-3 text-slate-700">{formatDate(chart.last_modified)}</td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  {:else}
+    <div class="px-4 py-8 text-sm text-slate-500">
+      {$t.dashboard?.no_charts}
+    </div>
+  {/if}
+</div>
+
+<div class="rounded-xl border border-slate-200 bg-white overflow-hidden">
+  <div class="border-b border-slate-200 px-4 py-3">
+    <h2 class="text-lg font-semibold text-slate-900">{$t.nav?.datasets}</h2>
+  </div>
+  {#if dashboard.datasets && dashboard.datasets.length > 0}
+    <div class="divide-y divide-slate-100">
+      {#each dashboard.datasets as dataset}
+        <button
+          class="flex w-full items-center justify-between gap-4 px-4 py-3 text-left transition-colors hover:bg-slate-50"
+          onclick={() => openDataset(dataset.id)}
+        >
+          <div class="min-w-0">
+            <div class="truncate font-medium text-slate-900">
+              {dataset.table_name}
+            </div>
+            <div class="truncate text-xs text-slate-500">
+              {dataset.overview || `${dataset.schema || ""}.${dataset.table_name}`}
+              {#if dataset.database} • {dataset.database}{/if}
+            </div>
+          </div>
+          <div class="flex items-center gap-3">
+            <span class="text-xs text-slate-500">{formatDate(dataset.last_modified)}</span>
+            <Icon name="chevronRight" size={16} className="text-slate-400" />
+          </div>
+        </button>
+      {/each}
+    </div>
+  {:else}
+    <div class="px-4 py-8 text-sm text-slate-500">
+      {$t.dashboard?.no_datasets}
+    </div>
+  {/if}
+</div>
+<!-- [/DEF:DashboardLinkedResources:Component] -->
\ No newline at end of file
diff --git a/frontend/src/routes/dashboards/[id]/components/DashboardTaskHistory.svelte b/frontend/src/routes/dashboards/[id]/components/DashboardTaskHistory.svelte
new file mode 100644
index 00000000..857ea9b6
--- /dev/null
+++ b/frontend/src/routes/dashboards/[id]/components/DashboardTaskHistory.svelte
@@ -0,0 +1,105 @@
+<!-- [DEF:DashboardTaskHistory:Component] -->
+<script>
+  /**
+   * @COMPLEXITY: 2
+   * @PURPOSE: Block for recent tasks table.
+   * @LAYER: UI
+   */
+  import { t } from "$lib/i18n";
+
+  let {
+    isTaskHistoryLoading,
+    taskHistoryError,
+    taskHistory,
+    loadTaskHistory,
+    getValidationStatus,
+    toTaskTypeLabel,
+    getTaskStatusClasses,
+    getValidationStatusClasses,
+    formatDate,
+    openLlmReport
+  } = $props();
+</script>
+
+<div class="rounded-xl border border-slate-200 bg-white p-4">
+  <div class="mb-3 flex items-center justify-between">
+    <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
+      {$t.tasks?.recent || "Recent tasks"}
+    </h2>
+    <button
+      class="rounded-md border border-slate-300 px-2 py-1 text-xs text-slate-700 hover:bg-slate-50"
+      onclick={loadTaskHistory}
+      disabled={isTaskHistoryLoading}
+    >
+      {$t.common?.refresh || "Refresh"}
+    </button>
+  </div>
+  {#if isTaskHistoryLoading}
+    <div class="space-y-2">
+      {#each Array(4) as _}
+        <div class="h-10 animate-pulse rounded bg-slate-100"></div>
+      {/each}
+    </div>
+  {:else if taskHistoryError}
+    <div class="rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">
+      {taskHistoryError}
+    </div>
+  {:else if taskHistory.length === 0}
+    <div class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-6 text-center text-sm text-slate-500">
+      {$t.tasks?.select_task || "No backup/LLM tasks yet"}
+    </div>
+  {:else}
+    <div class="overflow-x-auto">
+      <table class="min-w-full divide-y divide-slate-200 text-sm">
+        <thead class="bg-slate-50">
+          <tr>
+            <th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.type || "Type"}</th>
+            <th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.status || "Status"}</th>
+            <th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.tasks?.result || "Check"}</th>
+            <th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.started || "Started"}</th>
+            <th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.finished || "Finished"}</th>
+            <th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.actions || "Actions"}</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-slate-100">
+          {#each taskHistory as task}
+            {@const validation = getValidationStatus(task)}
+            <tr>
+              <td class="px-3 py-2 text-slate-800">{toTaskTypeLabel(task.plugin_id)}</td>
+              <td class="px-3 py-2">
+                <span class={`rounded-full px-2 py-1 text-xs font-semibold uppercase ${getTaskStatusClasses(task.status)}`}>
+                  {task.status}
+                </span>
+              </td>
+              <td class="px-3 py-2">
+                <span class={`inline-flex items-center gap-1 rounded-full border px-2 py-1 text-xs font-semibold uppercase ${getValidationStatusClasses(validation.level)}`}>
+                  {#if validation.icon}
+                    <span class="inline-flex min-w-[18px] items-center justify-center rounded-full bg-white/70 px-1 text-[10px] font-bold">
+                      {validation.icon}
+                    </span>
+                  {/if}
+                  {validation.label}
+                </span>
+              </td>
+              <td class="px-3 py-2 text-slate-700">{formatDate(task.started_at)}</td>
+              <td class="px-3 py-2 text-slate-700">{formatDate(task.finished_at)}</td>
+              <td class="px-3 py-2">
+                <div class="flex flex-wrap items-center gap-1">
+                  {#if task.plugin_id === "llm_dashboard_validation"}
+                    <button
+                      class="inline-flex items-center gap-1 rounded-md border border-indigo-300 bg-indigo-50 px-2 py-1 text-xs text-indigo-700 hover:bg-indigo-100"
+                      onclick={() => openLlmReport(task.id)}
+                    >
+                      {$t.tasks?.open_llm_report || "LLM report"}
+                    </button>
+                  {/if}
+                </div>
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  {/if}
+</div>
+<!-- [/DEF:DashboardTaskHistory:Component] -->
\ No newline at end of file