pelmen/kin
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Full pipeline flow through web interface with live updates

Browse source 
API:
  POST /api/tasks/{id}/run — sets task to in_progress immediately,
    launches subprocess with error handling and logging.
  GET /api/tasks/{id}/running — checks pipelines table for active run.
  Fixed --db flag position in subprocess command.

TaskDetail (live pipeline):
  - Run button starts pipeline, auto-starts 3s polling
  - Pipeline cards update in real-time as agent_logs appear
  - Pulsing blue dot on header while in_progress
  - Spinner on run button during execution
  - Auto-stops polling when status changes from in_progress
  - Cleanup on component unmount (no leaked timers)

ProjectView (run from list):
  - [>] button on each pending task row
  - Confirm dialog before starting
  - Pulsing blue dot for in_progress tasks
  - Click task row → /task/:id with live view

Dashboard (live statuses):
  - Pulsing blue dot next to active task count
  - Auto-poll every 5s when any project has active tasks
  - Stops polling when no active tasks

5 new API tests (running endpoint, run sets status, not found).
141 tests total, all passing. Frontend builds clean.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
johnfrum1234 2026-03-15 15:29:05 +02:00
parent ab693d3c4d
commit db1729730f
5 changed files with 145 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

37
web/api.py
View file

@ -257,6 +257,24 @@ def reject_task(task_id: str, body: TaskReject):
return {"status": "pending", "reason": body.reason}
@app.get("/api/tasks/{task_id}/running")
def is_task_running(task_id: str):
"""Check if task has an active (running) pipeline."""
conn = get_conn()
t = models.get_task(conn, task_id)
if not t:
conn.close()
raise HTTPException(404, f"Task '{task_id}' not found")
row = conn.execute(
"SELECT id, status FROM pipelines WHERE task_id = ? ORDER BY created_at DESC LIMIT 1",
(task_id,),
).fetchone()
conn.close()
if row and row["status"] == "running":
return {"running": True, "pipeline_id": row["id"]}
return {"running": False}
@app.post("/api/tasks/{task_id}/run")
def run_task(task_id: str):
"""Launch pipeline for a task in background. Returns 202."""
@ -265,15 +283,22 @@ def run_task(task_id: str):
if not t:
conn.close()
raise HTTPException(404, f"Task '{task_id}' not found")
# Set task to in_progress immediately so UI updates
models.update_task(conn, task_id, status="in_progress")
conn.close()
# Launch kin run in background subprocess
kin_root = Path(__file__).parent.parent
subprocess.Popen(
[sys.executable, "-m", "cli.main", "run", task_id, "--db",
str(DB_PATH)],
cwd=str(kin_root),
stdout=subprocess.DEVNULL,
)
try:
proc = subprocess.Popen(
[sys.executable, "-m", "cli.main", "--db", str(DB_PATH),
"run", task_id],
cwd=str(kin_root),
stdout=subprocess.DEVNULL,
)
import logging
logging.getLogger("kin").info(f"Pipeline started for {task_id}, pid={proc.pid}")
except Exception as e:
raise HTTPException(500, f"Failed to start pipeline: {e}")
return JSONResponse({"status": "started", "task_id": task_id}, status_code=202)

23
web/frontend/src/views/Dashboard.vue
View file

@ -31,7 +31,23 @@ async function load() {
}
}
onMounted(load)
let dashPollTimer: ReturnType<typeof setInterval> | null = null
onMounted(async () => {
await load()
// Poll if there are running tasks
checkAndPoll()
})
function checkAndPoll() {
const hasRunning = projects.value.some(p => p.active_tasks > 0)
if (hasRunning && !dashPollTimer) {
dashPollTimer = setInterval(load, 5000)
} else if (!hasRunning && dashPollTimer) {
clearInterval(dashPollTimer)
dashPollTimer = null
}
}
const costMap = computed(() => {
const m: Record<string, number> = {}
@ -115,7 +131,10 @@ async function runBootstrap() {
</div>
<div class="flex gap-4 text-xs">
<span class="text-gray-500">{{ p.total_tasks }} tasks</span>
<span v-if="p.active_tasks" class="text-blue-400">{{ p.active_tasks }} active</span>
<span v-if="p.active_tasks" class="text-blue-400">
<span class="inline-block w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse mr-0.5"></span>
{{ p.active_tasks }} active
</span>
<span v-if="p.review_tasks" class="text-yellow-400">{{ p.review_tasks }} awaiting review</span>
<span v-if="p.blocked_tasks" class="text-red-400">{{ p.blocked_tasks }} blocked</span>
<span v-if="p.done_tasks" class="text-green-500">{{ p.done_tasks }} done</span>

18
web/frontend/src/views/ProjectView.vue
View file

@ -109,6 +109,18 @@ async function addTask() {
}
}
async function runTask(taskId: string, event: Event) {
event.preventDefault()
event.stopPropagation()
if (!confirm(`Run pipeline for ${taskId}?`)) return
try {
await api.runTask(taskId)
await load()
} catch (e: any) {
error.value = e.message
}
}
async function addDecision() {
decFormError.value = ''
try {
@ -202,6 +214,12 @@ async function addDecision() {
<div class="flex items-center gap-2 text-xs text-gray-600 shrink-0">
<span v-if="t.assigned_role">{{ t.assigned_role }}</span>
<span>pri {{ t.priority }}</span>
<button v-if="t.status === 'pending'"
@click="runTask(t.id, $event)"
class="px-2 py-0.5 bg-blue-900/40 text-blue-400 border border-blue-800 rounded hover:bg-blue-900 text-[10px]"
title="Run pipeline">&#9654;</button>
<span v-if="t.status === 'in_progress'"
class="inline-block w-2 h-2 bg-blue-500 rounded-full animate-pulse" title="Running"></span>
</div>
</router-link>
</div>

62
web/frontend/src/views/TaskDetail.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { api, type TaskFull, type PipelineStep, type PendingAction } from '../api'
import Badge from '../components/Badge.vue'
import Modal from '../components/Modal.vue'
@ -27,8 +27,16 @@ const rejectReason = ref('')
async function load() {
try {
loading.value = true
const prev = task.value
task.value = await api.taskFull(props.id)
// Auto-start polling if task is in_progress
if (task.value.status === 'in_progress' && !polling.value) {
startPolling()
}
// Stop polling when pipeline done
if (prev?.status === 'in_progress' && task.value.status !== 'in_progress') {
stopPolling()
}
} catch (e: any) {
error.value = e.message
} finally {
@ -36,7 +44,19 @@ async function load() {
}
}
function startPolling() {
if (polling.value) return
polling.value = true
pollTimer = setInterval(load, 3000)
}
function stopPolling() {
polling.value = false
if (pollTimer) { clearInterval(pollTimer); pollTimer = null }
}
onMounted(load)
onUnmounted(stopPolling)
function statusColor(s: string) {
const m: Record<string, string> = {
@ -49,7 +69,7 @@ function statusColor(s: string) {
const roleIcons: Record<string, string> = {
pm: '\u{1F9E0}', security: '\u{1F6E1}', debugger: '\u{1F50D}',
frontend_dev: '\u{1F4BB}', backend_dev: '\u{2699}', tester: '\u{2705}',
reviewer: '\u{1F4CB}', architect: '\u{1F3D7}',
reviewer: '\u{1F4CB}', architect: '\u{1F3D7}', followup_pm: '\u{1F4DD}',
}
function stepStatusClass(step: PipelineStep) {
@ -67,7 +87,6 @@ function stepStatusColor(step: PipelineStep) {
function formatOutput(text: string | null): string {
if (!text) return ''
// Try to detect and format JSON
try {
const parsed = JSON.parse(text)
return JSON.stringify(parsed, null, 2)
@ -113,7 +132,6 @@ async function resolveAction(action: PendingAction, choice: string) {
resolvingAction.value = true
try {
const res = await api.resolveAction(props.id, action, choice)
// Remove resolved action from list
pendingActions.value = pendingActions.value.filter(a => a !== action)
if (choice === 'manual_task' && res.result && typeof res.result === 'object' && 'id' in res.result) {
followupResults.value.push({ id: (res.result as any).id, title: (res.result as any).title })
@ -143,29 +161,20 @@ async function reject() {
async function runPipeline() {
try {
await api.runTask(props.id)
polling.value = true
pollTimer = setInterval(async () => {
await load()
if (task.value && !['in_progress'].includes(task.value.status)) {
stopPolling()
}
}, 3000)
startPolling()
await load()
} catch (e: any) {
error.value = e.message
}
}
function stopPolling() {
polling.value = false
if (pollTimer) { clearInterval(pollTimer); pollTimer = null }
}
const hasSteps = computed(() => (task.value?.pipeline_steps?.length ?? 0) > 0)
const isRunning = computed(() => task.value?.status === 'in_progress')
</script>
<template>
<div v-if="loading" class="text-gray-500 text-sm">Loading...</div>
<div v-else-if="error" class="text-red-400 text-sm">{{ error }}</div>
<div v-if="loading && !task" class="text-gray-500 text-sm">Loading...</div>
<div v-else-if="error && !task" class="text-red-400 text-sm">{{ error }}</div>
<div v-else-if="task">
<!-- Header -->
<div class="mb-6">
@ -178,6 +187,7 @@ const hasSteps = computed(() => (task.value?.pipeline_steps?.length ?? 0) > 0)
<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)" />
<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>
<div v-if="task.brief" class="text-xs text-gray-500 mb-1">
@ -189,13 +199,14 @@ const hasSteps = computed(() => (task.value?.pipeline_steps?.length ?? 0) > 0)
</div>
<!-- Pipeline Graph -->
<div v-if="hasSteps" class="mb-6">
<h2 class="text-sm font-semibold text-gray-300 mb-3">Pipeline</h2>
<div v-if="hasSteps || isRunning" class="mb-6">
<h2 class="text-sm font-semibold text-gray-300 mb-3">
Pipeline
<span v-if="isRunning" class="text-blue-400 text-xs font-normal ml-2 animate-pulse">running...</span>
</h2>
<div class="flex items-center gap-1 overflow-x-auto pb-2">
<template v-for="(step, i) in task.pipeline_steps" :key="step.id">
<!-- Arrow -->
<div v-if="i > 0" class="text-gray-600 text-lg shrink-0 px-1">&rarr;</div>
<!-- Step card -->
<button
@click="selectedStep = selectedStep?.id === step.id ? null : step"
class="border rounded-lg px-3 py-2 min-w-[120px] text-left transition-all shrink-0"
@ -220,7 +231,7 @@ const hasSteps = computed(() => (task.value?.pipeline_steps?.length ?? 0) > 0)
</div>
<!-- No pipeline -->
<div v-else class="mb-6 text-sm text-gray-600">
<div v-if="!hasSteps && !isRunning" class="mb-6 text-sm text-gray-600">
No pipeline steps yet.
</div>
@ -263,7 +274,8 @@ const hasSteps = computed(() => (task.value?.pipeline_steps?.length ?? 0) > 0)
@click="runPipeline"
:disabled="polling"
class="px-4 py-2 text-sm bg-blue-900/50 text-blue-400 border border-blue-800 rounded hover:bg-blue-900 disabled:opacity-50">
{{ polling ? 'Running...' : '&#9654; Run Pipeline' }}
<span v-if="polling" class="inline-block w-3 h-3 border-2 border-blue-400 border-t-transparent rounded-full animate-spin mr-1"></span>
{{ polling ? 'Pipeline running...' : '&#9654; Run Pipeline' }}
</button>
</div>