test contracts

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

@@ -12,9 +12,23 @@
    * @UX_STATE: Error -> Shows error banner with retry button
    * @UX_STATE: Selecting -> Checkboxes checked, floating action panel appears
    * @UX_STATE: BulkAction-Modal -> Migration or Backup modal open
-   * @UX_FEEDBACK: Clicking task status opens Task Drawer
    * @UX_FEEDBACK: Floating panel slides up from bottom when items selected
    * @UX_RECOVERY: Refresh button reloads dashboard list
+   *
+   * @TEST_CONTRACT Page_DashboardHub ->
+   * {
+   *   required_props: {},
+   *   optional_props: {},
+   *   invariants: [
+   *       "Loads specific dashboards for currently selected environment store context",
+   *       "Reflects Git sync status explicitly via row badges",
+   *       "Submits migration action carrying db_mappings safely"
+   *   ]
+   * }
+   * @TEST_FIXTURE init_state -> {}
+   * @TEST_EDGE server_error -> shows error block and retry button
+   * @TEST_EDGE bulk_git_actions -> verifies modal functionality when triggered
+   * @TEST_INVARIANT rendering_and_selection -> verifies: [init_state]
    */
 
   import { onMount } from "svelte";
@@ -152,7 +166,7 @@
       // Update selection state
       updateSelectionState();
     } catch (err) {
-      error = err.message || $t.dashboard?.load_failed ;
+      error = err.message || $t.dashboard?.load_failed;
       console.error("[DashboardHub][Coherence:Failed]", err);
     } finally {
       isLoading = false;
@@ -304,9 +318,9 @@
     } catch (err) {
       console.error("[DashboardHub][Coherence:Failed] Validation failed:", err);
       alert(
-        ($t.dashboard?.validation_start_failed ) +
+        $t.dashboard?.validation_start_failed +
           ": " +
-          (err.message || $t.dashboard?.unknown_error ),
+          (err.message || $t.dashboard?.unknown_error),
       );
     } finally {
       validatingIds.delete(dashboard.id);
@@ -388,9 +402,7 @@
     if (isSubmittingMigrate) return;
     if (selectedIds.size === 0) return;
     if (!targetEnvId) {
-      alert(
-        $t.dashboard?.target_env_required ,
-      );
+      alert($t.dashboard?.target_env_required);
       return;
     }
 
@@ -423,7 +435,7 @@
       }
     } catch (err) {
       console.error("[DashboardHub][Coherence:Failed]", err);
-      alert($t.dashboard?.migration_task_failed );
+      alert($t.dashboard?.migration_task_failed);
     } finally {
       isSubmittingMigrate = false;
     }
@@ -460,7 +472,7 @@
       }
     } catch (err) {
       console.error("[DashboardHub][Coherence:Failed]", err);
-      alert($t.dashboard?.backup_task_failed );
+      alert($t.dashboard?.backup_task_failed);
     } finally {
       isSubmittingBackup = false;
     }
@@ -546,7 +558,10 @@
     try {
       const configs = await ensureGitConfigs();
       if (!configs.length) {
-        addToast($t.git?.no_servers_configured || "No Git config found", "error");
+        addToast(
+          $t.git?.no_servers_configured || "No Git config found",
+          "error",
+        );
         return;
       }
 
@@ -554,10 +569,17 @@
       const defaultRemote = config?.default_repository
         ? `${String(config.url || "").replace(/\/$/, "")}/${config.default_repository}.git`
         : "";
-      const remoteUrl = prompt($t.git?.remote_url || "Remote URL", defaultRemote);
+      const remoteUrl = prompt(
+        $t.git?.remote_url || "Remote URL",
+        defaultRemote,
+      );
       if (!remoteUrl) return;
 
-      await gitService.initRepository(dashboard.id, config.id, remoteUrl.trim());
+      await gitService.initRepository(
+        dashboard.id,
+        config.id,
+        remoteUrl.trim(),
+      );
       addToast($t.git?.init_success || "Repository initialized", "success");
       await refreshDashboardGitState(dashboard.id);
     } catch (err) {
@@ -711,14 +733,14 @@
   <!-- Header -->
   <div class="flex items-center justify-between">
     <h1 class="text-2xl font-bold text-gray-900">
-      {$t.nav?.dashboards }
+      {$t.nav?.dashboards}
     </h1>
     <div class="flex items-center space-x-4">
       <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"
         on:click={loadDashboards}
       >
-        {$t.common?.refresh }
+        {$t.common?.refresh}
       </button>
     </div>
   </div>
@@ -733,7 +755,7 @@
         class="px-4 py-2 bg-destructive text-white rounded hover:bg-destructive-hover transition-colors"
         on:click={loadDashboards}
       >
-        {$t.common?.retry }
+        {$t.common?.retry}
       </button>
     </div>
   {/if}
@@ -775,7 +797,7 @@
       >
         <path d="M3 3h18v18H3V3zm16 16V5H5v14h14z" />
       </svg>
-      <p>{$t.dashboard?.empty }</p>
+      <p>{$t.dashboard?.empty}</p>
     </div>
   {:else}
     <!-- Toolbar -->
@@ -787,8 +809,8 @@
           disabled={total === 0}
         >
           {isAllSelected
-            ? $t.dashboard?.deselect_all 
-            : $t.dashboard?.select_all }
+            ? $t.dashboard?.deselect_all
+            : $t.dashboard?.select_all}
         </button>
         <button
           class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors"
@@ -796,14 +818,15 @@
           disabled={dashboards.length === 0}
         >
           {isAllVisibleSelected
-            ? $t.dashboard?.deselect_visible 
-            : $t.dashboard?.select_visible }
+            ? $t.dashboard?.deselect_visible
+            : $t.dashboard?.select_visible}
         </button>
         {#if selectedIds.size > 0}
           <span class="text-sm text-gray-600">
-            {(
-              $t.dashboard?.selected_count 
-            ).replace("{count}", String(selectedIds.size))}
+            {($t.dashboard?.selected_count).replace(
+              "{count}",
+              String(selectedIds.size),
+            )}
           </span>
         {/if}
       </div>
@@ -811,7 +834,7 @@
         <input
           type="text"
           class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-          placeholder={$t.dashboard?.search }
+          placeholder={$t.dashboard?.search}
           on:input={handleSearch}
           value={searchQuery}
         />
@@ -826,14 +849,14 @@
       >
         <div class="col-span-1"></div>
         <div class="col-span-3 font-medium text-gray-900">
-          {$t.dashboard?.title }
+          {$t.dashboard?.title}
         </div>
         <div class="col-span-2">
-          {$t.dashboard?.git_status }
+          {$t.dashboard?.git_status}
         </div>
-        <div class="col-span-3">{$t.dashboard?.last_task }</div>
+        <div class="col-span-3">{$t.dashboard?.last_task}</div>
         <div class="col-span-3 flex items-center">
-          {$t.dashboard?.actions }
+          {$t.dashboard?.actions}
         </div>
       </div>
 
@@ -856,7 +879,7 @@
             <button
               class="text-left text-blue-700 hover:text-blue-900 hover:underline transition-colors"
               on:click={() => navigateToDashboardDetail(dashboard.id)}
-              title={$t.dashboard?.open_overview }
+              title={$t.dashboard?.open_overview}
             >
               {dashboard.title}
             </button>
@@ -866,19 +889,23 @@
           <div class="col-span-2">
             <div class="flex flex-col gap-1">
               <span
-                class="status-badge {dashboard.git?.hasRepo ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-700'}"
+                class="status-badge {dashboard.git?.hasRepo
+                  ? 'bg-blue-100 text-blue-800'
+                  : 'bg-gray-100 text-gray-700'}"
               >
                 {dashboard.git?.hasRepo
-                  ? ($t.dashboard?.status_repo || "Repo")
-                  : ($t.dashboard?.status_no_repo || "No Repo")}
+                  ? $t.dashboard?.status_repo || "Repo"
+                  : $t.dashboard?.status_no_repo || "No Repo"}
               </span>
               {#if dashboard.git?.hasRepo}
                 <span
-                  class="status-badge {dashboard.git?.hasChangesForCommit ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800'}"
+                  class="status-badge {dashboard.git?.hasChangesForCommit
+                    ? 'bg-yellow-100 text-yellow-800'
+                    : 'bg-green-100 text-green-800'}"
                 >
                   {dashboard.git?.hasChangesForCommit
-                    ? ($t.dashboard?.status_changes || "Diff")
-                    : ($t.dashboard?.status_no_changes || "Synced")}
+                    ? $t.dashboard?.status_changes || "Diff"
+                    : $t.dashboard?.status_no_changes || "Synced"}
                 </span>
               {/if}
             </div>
@@ -895,18 +922,18 @@
                   handleTaskStatusClick(dashboard)}
                 role="button"
                 tabindex="0"
-                aria-label={$t.dashboard?.view_task }
+                aria-label={$t.dashboard?.view_task}
               >
                 {@html getTaskStatusIcon(dashboard.lastTask.status)}
                 <span class="ml-1">
                   {#if dashboard.lastTask.status.toLowerCase() === "running"}
-                    {$t.dashboard?.task_running }
+                    {$t.dashboard?.task_running}
                   {:else if dashboard.lastTask.status.toLowerCase() === "success"}
-                    {$t.dashboard?.task_done }
+                    {$t.dashboard?.task_done}
                   {:else if dashboard.lastTask.status.toLowerCase() === "error"}
-                    {$t.dashboard?.task_failed }
+                    {$t.dashboard?.task_failed}
                   {:else if dashboard.lastTask.status.toLowerCase() === "waiting_input"}
-                    {$t.dashboard?.task_waiting }
+                    {$t.dashboard?.task_waiting}
                   {/if}
                 </span>
               </div>
@@ -943,7 +970,14 @@
                   disabled={isGitBusy(dashboard.id)}
                   title={$t.git?.sync || "Sync from Superset"}
                 >
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
                     <path d="M21 12a9 9 0 1 1-3-6.7" />
                     <polyline points="21 3 21 9 15 9" />
                   </svg>
@@ -951,10 +985,18 @@
                 <button
                   class="p-2 rounded border border-gray-200 hover:bg-gray-50 hover:border-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                   on:click={() => handleGitCommit(dashboard)}
-                  disabled={isGitBusy(dashboard.id) || !dashboard.git?.hasChangesForCommit}
+                  disabled={isGitBusy(dashboard.id) ||
+                    !dashboard.git?.hasChangesForCommit}
                   title={$t.git?.commit || "Commit"}
                 >
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
                     <path d="M12 3v12" />
                     <path d="M7 10l5 5 5-5" />
                     <path d="M5 21h14" />
@@ -966,7 +1008,14 @@
                   disabled={isGitBusy(dashboard.id)}
                   title={$t.git?.pull || "Pull"}
                 >
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
                     <path d="M12 3v12" />
                     <path d="M17 10l-5 5-5-5" />
                     <path d="M5 21h14" />
@@ -978,7 +1027,14 @@
                   disabled={isGitBusy(dashboard.id)}
                   title={$t.git?.push || "Push"}
                 >
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
                     <path d="M12 21V9" />
                     <path d="M7 14l5-5 5 5" />
                     <path d="M5 3h14" />
@@ -988,7 +1044,7 @@
               <button
                 class="p-2 rounded border border-gray-200 hover:bg-gray-50 hover:border-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                 on:click={() => handleAction(dashboard, "migrate")}
-                title={$t.dashboard?.action_migrate }
+                title={$t.dashboard?.action_migrate}
               >
                 <svg
                   width="14"
@@ -1005,7 +1061,7 @@
                 class="p-2 rounded border border-gray-200 hover:bg-gray-50 hover:border-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                 on:click={() => handleValidate(dashboard)}
                 disabled={validatingIds.has(dashboard.id)}
-                title={$t.dashboard?.action_validate }
+                title={$t.dashboard?.action_validate}
               >
                 {#if validatingIds.has(dashboard.id)}
                   <svg
@@ -1042,7 +1098,7 @@
               <button
                 class="p-2 rounded border border-gray-200 hover:bg-gray-50 hover:border-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                 on:click={() => handleAction(dashboard, "backup")}
-                title={$t.dashboard?.action_backup }
+                title={$t.dashboard?.action_backup}
               >
                 <svg
                   width="14"
@@ -1069,7 +1125,7 @@
         class="flex items-center justify-between px-4 py-3 bg-gray-50 border-t border-gray-200"
       >
         <div class="text-sm text-gray-600">
-          {($t.dashboard?.showing )
+          {($t.dashboard?.showing)
             .replace("{start}", String((currentPage - 1) * pageSize + 1))
             .replace("{end}", String(Math.min(currentPage * pageSize, total)))
             .replace("{total}", String(total))}
@@ -1080,14 +1136,14 @@
             on:click={() => handlePageChange(1)}
             disabled={currentPage === 1}
           >
-            {$t.common?.first }
+            {$t.common?.first}
           </button>
           <button
             class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed min-w-[32px]"
             on:click={() => handlePageChange(currentPage - 1)}
             disabled={currentPage === 1}
           >
-            {$t.dashboard?.previous }
+            {$t.dashboard?.previous}
           </button>
           {#each getPaginationRange(currentPage, totalPages) as pageNum}
             {#if pageNum === "..."}
@@ -1106,14 +1162,14 @@
             on:click={() => handlePageChange(currentPage + 1)}
             disabled={currentPage === totalPages}
           >
-            {$t.dashboard?.next }
+            {$t.dashboard?.next}
           </button>
           <button
             class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed min-w-[32px]"
             on:click={() => handlePageChange(totalPages)}
             disabled={currentPage === totalPages}
           >
-            {$t.common?.last }
+            {$t.common?.last}
           </button>
         </div>
         <div>
@@ -1123,34 +1179,19 @@
             on:change={handlePageSizeChange}
           >
             <option value={5}>
-              {($t.dashboard?.per_page_option ).replace(
-                "{count}",
-                "5",
-              )}
+              {($t.dashboard?.per_page_option).replace("{count}", "5")}
             </option>
             <option value={10}>
-              {($t.dashboard?.per_page_option ).replace(
-                "{count}",
-                "10",
-              )}
+              {($t.dashboard?.per_page_option).replace("{count}", "10")}
             </option>
             <option value={25}>
-              {($t.dashboard?.per_page_option ).replace(
-                "{count}",
-                "25",
-              )}
+              {($t.dashboard?.per_page_option).replace("{count}", "25")}
             </option>
             <option value={50}>
-              {($t.dashboard?.per_page_option ).replace(
-                "{count}",
-                "50",
-              )}
+              {($t.dashboard?.per_page_option).replace("{count}", "50")}
             </option>
             <option value={100}>
-              {($t.dashboard?.per_page_option ).replace(
-                "{count}",
-                "100",
-              )}
+              {($t.dashboard?.per_page_option).replace("{count}", "100")}
             </option>
           </select>
         </div>
@@ -1165,9 +1206,10 @@
         <div class="flex items-center justify-between max-w-7xl mx-auto">
           <div class="flex items-center gap-4">
             <span class="font-medium">
-              ✓ {(
-                $t.dashboard?.selected_count 
-              ).replace("{count}", String(selectedIds.size))}
+              ✓ {($t.dashboard?.selected_count).replace(
+                "{count}",
+                String(selectedIds.size),
+              )}
             </span>
           </div>
           <div class="flex gap-3">
@@ -1183,19 +1225,19 @@
                 isEditingMappings = false;
               }}
             >
-              {$t.dashboard?.bulk_migrate }
+              {$t.dashboard?.bulk_migrate}
             </button>
             <button
               class="px-3 py-1 text-sm bg-primary text-white border-primary rounded hover:bg-primary-hover transition-colors"
               on:click={() => (showBackupModal = true)}
             >
-              {$t.dashboard?.bulk_backup }
+              {$t.dashboard?.bulk_backup}
             </button>
             <button
               class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors"
               on:click={() => selectedIds.clear()}
             >
-              {$t.common?.cancel }
+              {$t.common?.cancel}
             </button>
           </div>
         </div>
@@ -1224,14 +1266,15 @@
           class="px-6 py-4 border-b border-gray-200 flex items-center justify-between relative"
         >
           <h2 id="migrate-modal-title" class="text-xl font-bold">
-            {(
-              $t.dashboard?.migrate_modal_title 
-            ).replace("{count}", String(selectedIds.size))}
+            {($t.dashboard?.migrate_modal_title).replace(
+              "{count}",
+              String(selectedIds.size),
+            )}
           </h2>
           <button
             on:click={() => (showMigrateModal = false)}
             class="absolute top-4 right-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-all"
-            aria-label={$t.common?.close_modal }
+            aria-label={$t.common?.close_modal}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1256,14 +1299,15 @@
               <label
                 for="source-env"
                 class="block text-sm font-medium text-gray-500 mb-1"
-                >{$t.migration?.source_env }</label
+                >{$t.migration?.source_env}</label
               >
               <div
                 id="source-env"
                 class="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-gray-700 font-medium"
               >
                 {environments.find((e) => e.id === selectedEnv)?.name ||
-                  selectedEnv} {$t.dashboard?.read_only }
+                  selectedEnv}
+                {$t.dashboard?.read_only}
               </div>
             </div>
 
@@ -1272,7 +1316,7 @@
               <label
                 for="target-env"
                 class="block text-sm font-medium text-gray-700 mb-2"
-                >{$t.migration?.target_env }</label
+                >{$t.migration?.target_env}</label
               >
               <select
                 id="target-env"
@@ -1296,7 +1340,7 @@
                 <label
                   for="use-db-mappings"
                   class="block text-sm font-medium text-gray-700"
-                  >{$t.migration?.database_mappings }</label
+                  >{$t.migration?.database_mappings}</label
                 >
                 <label class="relative inline-flex items-center cursor-pointer">
                   <input
@@ -1309,9 +1353,7 @@
                     class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"
                   ></div>
                   <span class="ml-2 text-xs text-gray-500"
-                    >{useDbMappings
-                      ? $t.common?.on 
-                      : $t.common?.off }</span
+                    >{useDbMappings ? $t.common?.on : $t.common?.off}</span
                   >
                 </label>
               </div>
@@ -1324,8 +1366,8 @@
                       on:click={() => (isEditingMappings = !isEditingMappings)}
                     >
                       {isEditingMappings
-                        ? $t.dashboard?.view_summary 
-                        : $t.dashboard?.edit_mappings }
+                        ? $t.dashboard?.view_summary
+                        : $t.dashboard?.edit_mappings}
                     </button>
                   {/if}
                 </div>
@@ -1353,13 +1395,13 @@
                       <thead class="bg-gray-50 border-b border-gray-200">
                         <tr>
                           <th class="px-4 py-2 font-semibold text-gray-700"
-                            >{$t.dashboard?.source_database }</th
+                            >{$t.dashboard?.source_database}</th
                           >
                           <th class="px-4 py-2 font-semibold text-gray-700"
-                            >{$t.dashboard?.target_database }</th
+                            >{$t.dashboard?.target_database}</th
                           >
                           <th class="px-4 py-2 font-semibold text-gray-700"
-                            >{$t.dashboard?.match_percent }</th
+                            >{$t.dashboard?.match_percent}</th
                           >
                         </tr>
                       </thead>
@@ -1379,7 +1421,7 @@
                                   )?.database_name || mapping.target_db}
                                 {:else}
                                   <span class="text-red-500"
-                                    >{$t.dashboard?.not_mapped }</span
+                                    >{$t.dashboard?.not_mapped}</span
                                   >
                                 {/if}
                               </td>
@@ -1445,7 +1487,7 @@
             <!-- Selected Dashboards List -->
             <div>
               <label class="block text-sm font-medium text-gray-700 mb-2"
-                >{$t.dashboard?.selected_dashboards }</label
+                >{$t.dashboard?.selected_dashboards}</label
               >
               <div
                 class="max-h-40 overflow-y-auto border border-gray-200 rounded-lg bg-gray-50 p-2"
@@ -1468,8 +1510,7 @@
           <button
             class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors"
             on:click={() => (showMigrateModal = false)}
-            disabled={isSubmittingMigrate}
-            >{$t.common?.cancel }</button
+            disabled={isSubmittingMigrate}>{$t.common?.cancel}</button
           >
           <button
             class="px-3 py-1 text-sm bg-primary text-white border-primary rounded hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
@@ -1478,9 +1519,7 @@
               selectedIds.size === 0 ||
               isSubmittingMigrate}
           >
-            {isSubmittingMigrate
-              ? $t.dashboard?.starting 
-              : $t.migration?.start }
+            {isSubmittingMigrate ? $t.dashboard?.starting : $t.migration?.start}
           </button>
         </div>
       </div>
@@ -1508,14 +1547,15 @@
           class="px-6 py-4 border-b border-gray-200 flex items-center justify-between relative"
         >
           <h2 id="backup-modal-title" class="text-xl font-bold">
-            {(
-              $t.dashboard?.backup_modal_title 
-            ).replace("{count}", String(selectedIds.size))}
+            {($t.dashboard?.backup_modal_title).replace(
+              "{count}",
+              String(selectedIds.size),
+            )}
           </h2>
           <button
             on:click={() => (showBackupModal = false)}
             class="absolute top-4 right-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-all"
-            aria-label={$t.common?.close_modal }
+            aria-label={$t.common?.close_modal}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1540,21 +1580,22 @@
               <label
                 for="backup-env"
                 class="block text-sm font-medium text-gray-500 mb-1"
-                >{$t.dashboard?.environment }</label
+                >{$t.dashboard?.environment}</label
               >
               <div
                 id="backup-env"
                 class="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-gray-700 font-medium"
               >
                 {environments.find((e) => e.id === selectedEnv)?.name ||
-                  selectedEnv} {$t.dashboard?.read_only }
+                  selectedEnv}
+                {$t.dashboard?.read_only}
               </div>
             </div>
 
             <!-- Selected Dashboards List -->
             <div>
               <label class="block text-sm font-medium text-gray-700 mb-2"
-                >{$t.dashboard?.selected_dashboards }</label
+                >{$t.dashboard?.selected_dashboards}</label
               >
               <div
                 class="max-h-40 overflow-y-auto border border-gray-200 rounded-lg bg-gray-50 p-2"
@@ -1577,7 +1618,7 @@
               <label
                 id="backup-schedule-label"
                 class="block text-sm font-medium text-gray-700 mb-2"
-                >{$t.dashboard?.schedule }</label
+                >{$t.dashboard?.schedule}</label
               >
               <div class="space-y-3" aria-labelledby="backup-schedule-label">
                 <label class="flex items-center">
@@ -1588,9 +1629,7 @@
                     bind:group={backupSchedule}
                     class="mr-2"
                   />
-                  <span class="text-sm"
-                    >{$t.dashboard?.one_time_backup }</span
-                  >
+                  <span class="text-sm">{$t.dashboard?.one_time_backup}</span>
                 </label>
                 <label class="flex items-center">
                   <input
@@ -1600,16 +1639,14 @@
                     bind:group={backupSchedule}
                     class="mr-2"
                   />
-                  <span class="text-sm"
-                    >{$t.dashboard?.schedule_backup }</span
-                  >
+                  <span class="text-sm">{$t.dashboard?.schedule_backup}</span>
                 </label>
                 {#if backupSchedule !== ""}
                   <div class="ml-6">
                     <label
                       for="cron-expression"
                       class="block text-xs text-gray-500 mb-1"
-                      >{$t.dashboard?.cron_expression }</label
+                      >{$t.dashboard?.cron_expression}</label
                     >
                     <input
                       id="cron-expression"
@@ -1620,7 +1657,7 @@
                       bind:value={backupSchedule}
                     />
                     <button class="text-xs text-blue-600 hover:underline mt-1"
-                      >{$t.dashboard?.cron_help }</button
+                      >{$t.dashboard?.cron_help}</button
                     >
                   </div>
                 {/if}
@@ -1632,8 +1669,7 @@
           <button
             class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors"
             on:click={() => (showBackupModal = false)}
-            disabled={isSubmittingBackup}
-            >{$t.common?.cancel }</button
+            disabled={isSubmittingBackup}>{$t.common?.cancel}</button
           >
           <button
             class="px-3 py-1 text-sm bg-primary text-white border-primary rounded hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
@@ -1641,8 +1677,8 @@
             disabled={selectedIds.size === 0 || isSubmittingBackup}
           >
             {isSubmittingBackup
-              ? $t.dashboard?.starting 
-              : $t.dashboard?.start_backup }
+              ? $t.dashboard?.starting
+              : $t.dashboard?.start_backup}
           </button>
         </div>
       </div>