From 2abba06e526e0091ab01c2ff8efd59e1a462777b Mon Sep 17 00:00:00 2001
From: busya <uglypod@gmail.com>
Date: Sat, 9 May 2026 23:19:46 +0300
Subject: [PATCH] feat: add job status display and 'Mark as READY' button to
 Run tab

- Add status badge (DRAFT/READY/RUNNING/COMPLETED/FAILED) in Run tab
- Add 'Mark as READY' button to transition from DRAFT to READY
- Include status field in save payload to prevent reverting on save
- Disable Run button when job is in DRAFT status
---
 .../src/routes/translate/[id]/+page.svelte    | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/translate/[id]/+page.svelte b/frontend/src/routes/translate/[id]/+page.svelte
index 0b155a39..b5e2087e 100644
--- a/frontend/src/routes/translate/[id]/+page.svelte
+++ b/frontend/src/routes/translate/[id]/+page.svelte
@@ -479,6 +479,7 @@
       dictionary_ids: dictionaryIds,
       database_dialect: databaseDialect || sourceDialect,
       environment_id: environmentId || null,
+      status: status,
     };
 
     try {
@@ -1002,11 +1003,41 @@
       {#if !isNewJob && existingJob}
         <section class="bg-white border border-gray-200 rounded-lg p-6">
           <h2 class="text-lg font-semibold text-gray-900 mb-4">{$t.translate?.config?.run_translation}</h2>
+
+          <!-- Status display + transition -->
+          <div class="flex items-center gap-3 mb-4 p-3 bg-gray-50 rounded-lg">
+            <span class="text-sm text-gray-600">{$t.translate?.config?.status}:</span>
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
+              {status === 'READY' ? 'bg-green-100 text-green-700' : ''}
+              {status === 'DRAFT' ? 'bg-yellow-100 text-yellow-700' : ''}
+              {status === 'RUNNING' ? 'bg-blue-100 text-blue-700' : ''}
+              {status === 'COMPLETED' ? 'bg-green-100 text-green-700' : ''}
+              {status === 'FAILED' ? 'bg-red-100 text-red-700' : ''}">
+              {status || 'DRAFT'}
+            </span>
+            {#if status === 'DRAFT'}
+              <button
+                onclick={async () => {
+                  try {
+                    await updateJob(jobId, { status: 'READY' });
+                    status = 'READY';
+                    addToast($t.translate?.config?.job_updated, 'success');
+                  } catch (e) {
+                    addToast(e?.message || 'Failed to update status', 'error');
+                  }
+                }}
+                class="ml-auto px-3 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+              >
+                Mark as READY
+              </button>
+            {/if}
+          </div>
+
           <div class="space-y-4">
             <div class="flex items-center gap-3">
               <button
                 onclick={handleTriggerRun}
-                disabled={isRunning}
+                disabled={isRunning || status === 'DRAFT'}
                 class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
               >
                 {isRunning ? $t.translate?.config?.running : $t.translate?.config?.run_translation}