slug first logic

frontend/src/routes/dashboards/[id]/+page.svelte

@@ -27,12 +27,21 @@
   import { page } from "$app/stores";
   import { t } from "$lib/i18n";
   import { api } from "$lib/api.js";
+  import { gitService } from "../../../services/gitService";
   import { openDrawerForTask } from "$lib/stores/taskDrawer.js";
   import { addToast } from "$lib/toasts.js";
   import Icon from "$lib/ui/Icon.svelte";
+  import BranchSelector from "../../../components/git/BranchSelector.svelte";
+  import CommitModal from "../../../components/git/CommitModal.svelte";
+  import CommitHistory from "../../../components/git/CommitHistory.svelte";
+  import GitManager from "../../../components/git/GitManager.svelte";
 
-  $: dashboardId = $page.params.id;
+  $: dashboardRef = $page.params.id;
   $: envId = $page.url.searchParams.get("env_id") || "";
+  $: gitDashboardRef = dashboard?.slug || dashboardRef || "";
+  $: resolvedDashboardId =
+    dashboard?.id ??
+    (/^\d+$/.test(String(dashboardRef || "")) ? Number(dashboardRef) : null);
 
   let dashboard = null;
   let isLoading = true;
@@ -47,6 +56,19 @@
   let thumbnailError = null;
   let llmReady = true;
   let llmStatusReason = "";
+  let gitStatus = null;
+  let isGitStatusLoading = false;
+  let gitStatusError = null;
+  let gitDiffPreview = "";
+  let isGitDiffLoading = false;
+  let isSyncingGit = false;
+  let isPullingGit = false;
+  let isPushingGit = false;
+  let currentBranch = "main";
+  let activeTab = "resources";
+  let showCommitModal = false;
+  let showGitManager = false;
+  let gitMeta = getGitStatusMeta();
 
   onMount(async () => {
     await loadDashboardPage();
@@ -62,11 +84,12 @@
       loadTaskHistory(),
       loadThumbnail(false),
       loadLlmStatus(),
+      loadGitStatus(),
     ]);
   }
 
   async function loadDashboardDetail() {
-    if (!dashboardId || !envId) {
+    if (!dashboardRef || !envId) {
       error = $t.dashboard?.missing_context;
       isLoading = false;
       return;
@@ -75,7 +98,7 @@
     isLoading = true;
     error = null;
     try {
-      dashboard = await api.getDashboardDetail(envId, dashboardId);
+      dashboard = await api.getDashboardDetail(envId, dashboardRef);
     } catch (err) {
       error = err.message || $t.dashboard?.load_detail_failed;
       console.error("[DashboardDetail][Coherence:Failed]", err);
@@ -85,11 +108,11 @@
   }
 
   async function loadTaskHistory() {
-    if (!dashboardId || !envId) return;
+    if (!dashboardRef || !envId) return;
     isTaskHistoryLoading = true;
     taskHistoryError = null;
     try {
-      const response = await api.getDashboardTaskHistory(envId, dashboardId, {
+      const response = await api.getDashboardTaskHistory(envId, dashboardRef, {
         limit: 30,
       });
       taskHistory = response?.items || [];
@@ -109,11 +132,11 @@
   }
 
   async function loadThumbnail(force = false) {
-    if (!dashboardId || !envId) return;
+    if (!dashboardRef || !envId) return;
     isThumbnailLoading = true;
     thumbnailError = null;
     try {
-      const blob = await api.getDashboardThumbnail(envId, dashboardId, {
+      const blob = await api.getDashboardThumbnail(envId, dashboardRef, {
         force,
       });
       releaseThumbnailUrl();
@@ -134,12 +157,12 @@
   }
 
   async function runBackupTask() {
-    if (isStartingBackup || !envId || !dashboardId) return;
+    if (isStartingBackup || !envId || !resolvedDashboardId) return;
     isStartingBackup = true;
     try {
       const response = await api.postApi("/dashboards/backup", {
         env_id: envId,
-        dashboard_ids: [Number(dashboardId)],
+        dashboard_ids: [resolvedDashboardId],
       });
       const taskId = response?.task_id;
       if (taskId) {
@@ -170,13 +193,13 @@
       );
       return;
     }
-    if (isStartingValidation || !envId || !dashboardId) return;
+    if (isStartingValidation || !envId || !resolvedDashboardId) return;
     isStartingValidation = true;
     try {
       const response = await api.postApi("/tasks", {
         plugin_id: "llm_dashboard_validation",
         params: {
-          dashboard_id: String(dashboardId),
+          dashboard_id: String(resolvedDashboardId),
           environment_id: envId,
         },
       });
@@ -281,11 +304,181 @@
       llmStatusReason = "status_unavailable";
     }
   }
+
+  function hasGitRepository() {
+    if (!gitStatus) return false;
+    if (gitStatus.has_repo === false) return false;
+    return gitStatus.sync_state !== "NO_REPO" && Boolean(gitStatus.current_branch);
+  }
+
+  function allChangedFiles() {
+    if (!gitStatus) return [];
+    const staged = gitStatus.staged_files || [];
+    const modified = gitStatus.modified_files || [];
+    const untracked = gitStatus.untracked_files || [];
+    return Array.from(new Set([...staged, ...modified, ...untracked]));
+  }
+
+  function countChangedByAnyPath(fragments) {
+    return allChangedFiles().filter((file) =>
+      fragments.some((fragment) => file.includes(fragment)),
+    ).length;
+  }
+
+  function getGitStatusMeta() {
+    const syncState = gitStatus?.sync_state || "NO_REPO";
+    if (syncState === "SYNCED") {
+      return {
+        dotClass: "bg-emerald-500",
+        pillClass: "bg-emerald-100 text-emerald-800 border-emerald-200",
+        label: $t.git?.repo_status?.synced || "Synced",
+      };
+    }
+    if (syncState === "CHANGES") {
+      return {
+        dotClass: "bg-amber-500",
+        pillClass: "bg-amber-100 text-amber-800 border-amber-200",
+        label: $t.git?.repo_status?.changes || "Modified",
+      };
+    }
+    if (syncState === "AHEAD_REMOTE") {
+      return {
+        dotClass: "bg-blue-500",
+        pillClass: "bg-blue-100 text-blue-800 border-blue-200",
+        label: $t.git?.repo_status?.ahead_remote || "Ahead",
+      };
+    }
+    if (syncState === "BEHIND_REMOTE") {
+      return {
+        dotClass: "bg-indigo-500",
+        pillClass: "bg-indigo-100 text-indigo-800 border-indigo-200",
+        label: $t.git?.repo_status?.behind_remote || "Behind",
+      };
+    }
+    if (syncState === "DIVERGED") {
+      return {
+        dotClass: "bg-rose-500",
+        pillClass: "bg-rose-100 text-rose-800 border-rose-200",
+        label: $t.git?.repo_status?.diverged || "Diverged",
+      };
+    }
+    return {
+      dotClass: "bg-slate-400",
+      pillClass: "bg-slate-100 text-slate-700 border-slate-200",
+      label: $t.git?.repo_status?.no_repo || "Uninitialized",
+    };
+  }
+
+  async function loadGitStatus() {
+    if (!gitDashboardRef) return;
+    isGitStatusLoading = true;
+    gitStatusError = null;
+    gitDiffPreview = "";
+    try {
+      const status = await gitService.getStatus(gitDashboardRef, envId || null);
+      gitStatus = status;
+      if (status?.current_branch) {
+        currentBranch = status.current_branch;
+      }
+    } catch (err) {
+      gitStatusError = err.message || "Failed to load Git status";
+      gitStatus = {
+        sync_state: "NO_REPO",
+        current_branch: null,
+        has_repo: false,
+        modified_files: [],
+        staged_files: [],
+        untracked_files: [],
+        ahead_count: 0,
+        behind_count: 0,
+      };
+    } finally {
+      isGitStatusLoading = false;
+    }
+  }
+
+  async function loadGitDiffPreview() {
+    if (!hasGitRepository()) return;
+    isGitDiffLoading = true;
+    try {
+      const staged = await gitService.getDiff(gitDashboardRef, null, true, envId || null);
+      const unstaged = await gitService.getDiff(
+        gitDashboardRef,
+        null,
+        false,
+        envId || null,
+      );
+      gitDiffPreview = [staged, unstaged].filter(Boolean).join("\n\n");
+      if (!gitDiffPreview) {
+        addToast($t.git?.no_changes || "No changes detected", "info");
+      }
+    } catch (err) {
+      addToast(err.message || "Failed to load diff", "error");
+    } finally {
+      isGitDiffLoading = false;
+    }
+  }
+
+  async function runGitSyncAndOpenCommit() {
+    if (!hasGitRepository()) {
+      addToast($t.git?.not_linked || "Repository is not initialized", "error");
+      return;
+    }
+    if (isSyncingGit) return;
+    isSyncingGit = true;
+    try {
+      await gitService.sync(gitDashboardRef, envId || null, envId || null);
+      addToast($t.git?.sync_success || "Dashboard state synced to Git", "success");
+      showCommitModal = true;
+      await loadGitStatus();
+    } catch (err) {
+      addToast(err.message || "Git sync failed", "error");
+    } finally {
+      isSyncingGit = false;
+    }
+  }
+
+  async function runGitPull() {
+    if (!hasGitRepository() || isPullingGit) return;
+    isPullingGit = true;
+    try {
+      await gitService.pull(gitDashboardRef, envId || null);
+      addToast($t.git?.pull_success || "Changes pulled from remote", "success");
+      await loadGitStatus();
+    } catch (err) {
+      addToast(err.message || "Git pull failed", "error");
+    } finally {
+      isPullingGit = false;
+    }
+  }
+
+  async function runGitPush() {
+    if (!hasGitRepository() || isPushingGit) return;
+    isPushingGit = true;
+    try {
+      await gitService.push(gitDashboardRef, envId || null);
+      addToast($t.git?.push_success || "Changes pushed to remote", "success");
+      await loadGitStatus();
+    } catch (err) {
+      addToast(err.message || "Git push failed", "error");
+    } finally {
+      isPushingGit = false;
+    }
+  }
+
+  async function handleBranchChange(event) {
+    const nextBranch = event?.detail?.branch;
+    if (!nextBranch) return;
+    currentBranch = nextBranch;
+    await loadGitStatus();
+  }
+
+  $: gitMeta = getGitStatusMeta();
 </script>
 
 <div class="mx-auto w-full max-w-7xl space-y-6">
-  <div class="flex items-center justify-between">
-    <div>
+  <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"
         on:click={goBack}
@@ -293,15 +486,47 @@
         <Icon name="chevronLeft" size={16} />
         {$t.common?.back}
       </button>
-      <h1 class="mt-2 text-2xl font-bold text-slate-900">
-        {dashboard?.title || $t.dashboard?.overview}
-      </h1>
-      <p class="mt-1 text-sm text-slate-500">
-        {$t.common?.id}: {dashboardId}{#if dashboard?.slug}
-          • {dashboard.slug}{/if}
+
+      <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
+              on:change={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"
+        on:click={() => (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"
         on:click={runBackupTask}
@@ -383,13 +608,9 @@
     ></div>
   {:else if dashboard}
     <div class="grid grid-cols-1 gap-6 xl:grid-cols-5">
-      <div
-        class="rounded-xl border border-slate-200 bg-white p-4 xl:col-span-2"
-      >
+      <div class="rounded-xl border border-slate-200 bg-white p-4 xl:col-span-2">
         <div class="mb-3 flex items-center justify-between">
-          <h2
-            class="text-sm font-semibold uppercase tracking-wide text-slate-500"
-          >
+          <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
             {$t.dashboard?.api_thumbnail || "Dashboard thumbnail"}
           </h2>
           <button
@@ -418,116 +639,102 @@
           </div>
         {/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">
-          <h2
-            class="text-sm font-semibold uppercase tracking-wide text-slate-500"
-          >
-            {$t.tasks?.recent || "Recent tasks"}
+
+      <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"
-            on:click={loadTaskHistory}
-            disabled={isTaskHistoryLoading}
+            on:click={loadGitStatus}
+            disabled={isGitStatusLoading}
           >
             {$t.common?.refresh || "Refresh"}
           </button>
         </div>
-        {#if isTaskHistoryLoading}
+
+        {#if isGitStatusLoading}
           <div class="space-y-2">
-            {#each Array(4) as _}
+            {#each Array(3) 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}
+        {: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 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"}
+        {:else if !hasGitRepository()}
+          <div class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-6 text-sm text-slate-600">
+            {$t.git?.not_linked || "This dashboard is not yet linked to a Git repository."}
           </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"
-                            on:click={() => openLlmReport(task.id)}
-                          >
-                            {$t.tasks?.open_llm_report || "LLM report"}
-                          </button>
-                        {/if}
-                      </div>
-                    </td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
+          <div class="space-y-4">
+            <p class="text-sm text-slate-700">
+              {#if gitStatus?.sync_state === "CHANGES"}
+                Superset configuration changes were detected.
+              {:else}
+                Superset configuration matches branch {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: {countChangedByAnyPath(["/charts/", "charts/"])}
+              </span>
+              <span class="rounded-full bg-slate-100 px-2 py-1">
+                datasets: {countChangedByAnyPath(["/datasets/", "datasets/"])}
+              </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"
+                on:click={runGitSyncAndOpenCommit}
+                disabled={isSyncingGit}
+              >
+                {isSyncingGit
+                  ? $t.common?.loading || "Loading..."
+                  : "Sync and commit"}
+              </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"
+                on:click={loadGitDiffPreview}
+                disabled={isGitDiffLoading}
+              >
+                {isGitDiffLoading ? $t.common?.loading || "Loading..." : "View 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"
+                on:click={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"
+                on:click={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>
@@ -560,131 +767,247 @@
       </div>
     </div>
 
-    {#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"
+    <div class="rounded-xl border border-slate-200 bg-white">
+      <div class="flex flex-wrap items-center gap-2 border-b border-slate-200 px-4 py-3">
+        <button
+          class={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${activeTab === "resources" ? "bg-slate-900 text-white" : "bg-slate-100 text-slate-700 hover:bg-slate-200"}`}
+          on:click={() => (activeTab = "resources")}
         >
-          {$t.dashboard?.overview}
-        </h2>
-        <p class="mt-2 text-sm text-slate-700">{dashboard.description}</p>
+          Linked resources
+        </button>
+        <button
+          class={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${activeTab === "git-history" ? "bg-slate-900 text-white" : "bg-slate-100 text-slate-700 hover:bg-slate-200"}`}
+          on:click={() => (activeTab = "git-history")}
+        >
+          Git history
+        </button>
+        <button
+          class={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${activeTab === "tasks" ? "bg-slate-900 text-white" : "bg-slate-100 text-slate-700 hover:bg-slate-200"}`}
+          on:click={() => (activeTab = "tasks")}
+        >
+          {$t.nav?.tasks || "Task logs"}
+        </button>
       </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"
-                        on:click={() => openDataset(chart.dataset_id)}
-                        title={`${$t.datasets?.table_name} ${chart.dataset_id}`}
-                      >
+      <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}
-                        {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>
+                      </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"
+                              on:click={() => 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 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"
+                    on:click={() => 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>
+        {:else if activeTab === "git-history"}
+          {#if hasGitRepository() && gitDashboardRef}
+            <CommitHistory dashboardId={gitDashboardRef} envId={envId || null} />
+          {:else}
+            <div class="rounded-lg border border-slate-200 bg-slate-50 px-4 py-6 text-sm text-slate-600">
+              {$t.git?.not_linked || "This dashboard is not yet linked to a Git repository."}
+            </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"
+                on:click={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"
+                                on:click={() => openLlmReport(task.id)}
+                              >
+                                {$t.tasks?.open_llm_report || "LLM report"}
+                              </button>
+                            {/if}
+                          </div>
+                        </td>
+                      </tr>
+                    {/each}
+                  </tbody>
+                </table>
+              </div>
+            {/if}
+          </div>
+        {/if}
       </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"
-              on:click={() => 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>
   {/if}
 </div>
 
+{#if gitDashboardRef}
+  <CommitModal
+    dashboardId={gitDashboardRef}
+    envId={envId || null}
+    bind:show={showCommitModal}
+    on:commit={loadGitStatus}
+  />
+{/if}
+
+{#if gitDashboardRef}
+  <GitManager
+    dashboardId={gitDashboardRef}
+    envId={envId || null}
+    dashboardTitle={dashboard?.title || ""}
+    bind:show={showGitManager}
+  />
+{/if}
+
 <!-- [/DEF:DashboardDetail:Page] -->