diff --git a/frontend/src/lib/models/TranslationJobModel.svelte.ts b/frontend/src/lib/models/TranslationJobModel.svelte.ts
index 4fc7e342..061671ac 100644
--- a/frontend/src/lib/models/TranslationJobModel.svelte.ts
+++ b/frontend/src/lib/models/TranslationJobModel.svelte.ts
@@ -24,7 +24,7 @@ import { api } from '$lib/api.js';
 import { log } from '$lib/cot-logger';
 import { addToast } from '$lib/toasts.svelte.js';
 import { _, getT } from '$lib/i18n/index.svelte.js';
-import { triggerRun, fetchRunHistory, cancelRun, fetchDatasourceColumns } from '$lib/api/translate.js';
+import { triggerRun, fetchRunHistory, cancelRun, fetchDatasourceColumns, fetchDatasources } from '$lib/api/translate.js';
 import { startTranslationRun, resetTranslationRun, translationRunStore } from '$lib/stores/translationRun.svelte.js';
 
 type UxState = 'idle' | 'loading' | 'configured' | 'saving' | 'validation_error' | 'datasource_unavailable';
@@ -222,7 +222,19 @@ export class TranslationJobModel {
         this.targetTable = (job.target_table as string) || '';
         this.targetDatabaseId = (job.target_database_id as string) || '';
         this.environmentId = (job.environment_id as string) || '';
-        if (this.environmentId) { this.loadDatabases(); this.loadDatasourceColumns(); }
+        if (this.environmentId) {
+          this.loadDatabases();
+          this.loadDatasourceColumns();
+          // Look up datasource name to populate search input on page load
+          if (this.datasourceId) {
+            fetchDatasources<Record<string, unknown>[]>(this.environmentId, '').then((list) => {
+              const ds = (Array.isArray(list) ? list : []).find((d) => String(d.id) === String(this.datasourceId));
+              if (ds) {
+                this.datasourceSearch = `${ds.table_name} (${ds.database_name} · ${ds.database_dialect})`;
+              }
+            }).catch(() => {});
+          }
+        }
         this.loadRunHistory();
       }
       this.uxState = 'configured';