feat: status dropdown on task detail page

web/frontend/src/views/TaskDetail.vue

@@ -185,6 +185,21 @@ async function runPipeline() {
 
 const hasSteps = computed(() => (task.value?.pipeline_steps?.length ?? 0) > 0)
 const isRunning = computed(() => task.value?.status === 'in_progress')
+
+const statusChanging = ref(false)
+
+async function changeStatus(newStatus: string) {
+  if (!task.value || newStatus === task.value.status) return
+  statusChanging.value = true
+  try {
+    const updated = await api.patchTask(props.id, { status: newStatus })
+    task.value = { ...task.value, ...updated }
+  } catch (e: any) {
+    error.value = e.message
+  } finally {
+    statusChanging.value = false
+  }
+}
 </script>
 
 <template>
@@ -202,6 +217,18 @@ const isRunning = computed(() => task.value?.status === 'in_progress')
         <h1 class="text-xl font-bold text-gray-100">{{ task.id }}</h1>
         <span class="text-gray-400">{{ task.title }}</span>
         <Badge :text="task.status" :color="statusColor(task.status)" />
+        <select
+          :value="task.status"
+          @change="changeStatus(($event.target as HTMLSelectElement).value)"
+          :disabled="statusChanging"
+          class="text-xs bg-gray-800 border border-gray-700 text-gray-300 rounded px-2 py-0.5 disabled:opacity-50"
+        >
+          <option value="pending">pending</option>
+          <option value="in_progress">in_progress</option>
+          <option value="review">review</option>
+          <option value="done">done</option>
+          <option value="blocked">blocked</option>
+        </select>
         <span v-if="isRunning" class="inline-block w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span>
         <span class="text-xs text-gray-600">pri {{ task.priority }}</span>
       </div>