Add job progress ETA, circular progress indicator, toast notifications, and fix SQLite locking

- ConsolePanel: time estimation (ETA) based on elapsed time and generation progress
- ProgressCircle: SVG circular progress component shown in minimized console bar
- ProjectDashboard: progress info + ETA in minimized bar, in-app toast on job complete/fail
- ResultsTab: auto-refresh job list and results when job status changes
- database.py: SQLite WAL mode + busy timeout for concurrent async/sync access
- analysis.py: commit audit entry before dispatching background task
- test_api.py: fix DB fixture to match real get_db commit behavior, fix 2 engine-dependent tests

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: eprifti

backend/app/core/database.py

@@ -1,6 +1,6 @@
 """Async SQLAlchemy database setup."""
 
-from sqlalchemy import create_engine as create_sync_engine
+from sqlalchemy import create_engine as create_sync_engine, event
 from sqlalchemy.ext.asyncio import create_async_engine, async_sessionmaker, AsyncSession
 from sqlalchemy.orm import DeclarativeBase, sessionmaker
 
@@ -11,15 +11,39 @@ class Base(DeclarativeBase):
     pass
 
 
+_is_sqlite = "sqlite" in settings.database_url
+_sqlite_connect_args = {"timeout": 30, "check_same_thread": False} if _is_sqlite else {}
+
+
+def _sqlite_wal_pragma(dbapi_conn, connection_record):
+    """Enable WAL mode for SQLite concurrent access."""
+    cursor = dbapi_conn.cursor()
+    cursor.execute("PRAGMA journal_mode=WAL")
+    cursor.close()
+
+
 # Async engine — used by FastAPI request handlers
-engine = create_async_engine(settings.database_url, echo=settings.debug)
+engine = create_async_engine(
+    settings.database_url,
+    echo=settings.debug,
+    connect_args=_sqlite_connect_args if _is_sqlite else {},
+)
 async_session_factory = async_sessionmaker(engine, expire_on_commit=False)
 
 # Sync engine — used by background tasks (which run in thread pools)
 _sync_url = settings.database_url.replace("+asyncpg", "").replace("+aiosqlite", "")
-sync_engine = create_sync_engine(_sync_url, echo=settings.debug)
+sync_engine = create_sync_engine(
+    _sync_url,
+    echo=settings.debug,
+    connect_args=_sqlite_connect_args if _is_sqlite else {},
+)
 sync_session_factory = sessionmaker(sync_engine, expire_on_commit=False)
 
+# Enable WAL mode for SQLite to allow concurrent reads/writes
+if _is_sqlite:
+    event.listen(sync_engine, "connect", _sqlite_wal_pragma)
+    event.listen(engine.sync_engine, "connect", _sqlite_wal_pragma)
+
 
 async def get_db():
     """FastAPI dependency that yields a database session."""

backend/app/routers/analysis.py

@@ -111,6 +111,7 @@ async def _resolve_file(file_id: str) -> Optional[str]:
 
     await audit.log_action(db, user, audit.ACTION_JOB_LAUNCH, "job", job.id,
                            details={"project_id": project_id})
+    await db.commit()  # Ensure all writes are flushed before background task starts
 
     # Run in background thread
     background_tasks.add_task(_run_job, job.id, project_id, param_path, user.id)

backend/tests/test_api.py

@@ -46,7 +46,12 @@ async def db_session():
 async def client(db_session):
     """HTTP client with overridden DB dependency."""
     async def _override_db():
-        yield db_session
+        try:
+            yield db_session
+            await db_session.commit()
+        except Exception:
+            await db_session.rollback()
+            raise
 
     app.dependency_overrides[get_db] = _override_db
     transport = ASGITransport(app=app)
@@ -1783,15 +1788,14 @@ async def test_delete_nonexistent_job_returns_404(self, auth_client):
         assert resp.status_code == 404
 
     @pytest.mark.asyncio
-    async def test_get_job_status_returns_summary(self, auth_client):
+    async def test_get_job_status_returns_summary(self, auth_client, db_session):
         """Test get job status for a completed job returns summary fields."""
-        pid, x_fid, y_fid = await _create_project_with_datasets(auth_client)
-        job_id = await _run_mock_analysis(auth_client, pid, x_fid, y_fid)
+        pid, job_id = await _create_completed_job(auth_client, db_session)
         resp = await auth_client.get(f"/api/analysis/{pid}/jobs/{job_id}")
         assert resp.status_code == 200
         data = resp.json()
         assert data["job_id"] == job_id
-        assert data["status"] in ("completed", "pending")
+        assert data["status"] == "completed"
         assert "config_hash" in data
         assert "config_summary" in data
 
@@ -1840,10 +1844,9 @@ async def test_run_analysis_with_missing_file_returns_404(self, auth_client):
         assert resp.status_code == 404
 
     @pytest.mark.asyncio
-    async def test_get_job_detail_returns_features(self, auth_client):
+    async def test_get_job_detail_returns_features(self, auth_client, db_session):
         """Test that job detail returns feature names and best individual."""
-        pid, x_fid, y_fid = await _create_project_with_datasets(auth_client)
-        job_id = await _run_mock_analysis(auth_client, pid, x_fid, y_fid)
+        pid, job_id = await _create_completed_job(auth_client, db_session)
         resp = await auth_client.get(f"/api/analysis/{pid}/jobs/{job_id}/detail")
         assert resp.status_code == 200
         data = resp.json()

frontend/src/components/ConsolePanel.vue

@@ -8,9 +8,10 @@
           <span class="progress-gen">Gen {{ progress.generation }}<template v-if="progress.maxGen"> / {{ progress.maxGen }}</template></span>
           <span class="progress-k" v-if="progress.k">k={{ progress.k }}</span>
           <span class="progress-lang" v-if="progress.language">{{ progress.language }}</span>
+          <span class="progress-eta" v-if="etaDisplay">{{ etaDisplay }}</span>
         </div>
         <div class="progress-bar-wrap" v-if="progress.maxGen">
-          <div class="progress-bar" :style="{ width: Math.min(100, progress.generation / progress.maxGen * 100) + '%' }"></div>
+          <div class="progress-bar" :style="{ width: progressPct + '%' }"></div>
         </div>
       </template>
       <button class="close-btn" @click="$emit('close')" title="Minimize console">&#9660;</button>
@@ -33,7 +34,7 @@ const props = defineProps({
   jobId: { type: String, required: true },
 })
 
-const emit = defineEmits(['close', 'completed', 'failed'])
+const emit = defineEmits(['close', 'completed', 'failed', 'progress'])
 
 const logContent = ref('')
 const jobStatus = ref('pending')
@@ -44,6 +45,7 @@ let ws = null
 let wsConnected = false
 
 let errorCount = 0
+let startTime = null  // When we first see generation > 0
 
 /* ── Progress parser ─────────────────────────────────── */
 // Parses generation lines like: "#42      | best: Ternary:Prevalence  \t0 ████ 1 [k=55, age=0]"
@@ -70,6 +72,8 @@ function parseProgress(text) {
     progress.value.generation = lastGen
     progress.value.k = lastK
     progress.value.language = lastLang
+    // Start time tracking on first generation seen
+    if (!startTime) startTime = Date.now()
   }
   // Try to extract maxGen from early lines (config echo)
   if (!progress.value.maxGen) {
@@ -80,6 +84,48 @@ function parseProgress(text) {
       if (em) { progress.value.maxGen = parseInt(em[1]); break }
     }
   }
+  // Emit progress data to parent for minimized bar display
+  emitProgress()
+}
+
+/* ── ETA calculation ─────────────────────────────────── */
+const progressPct = computed(() => {
+  if (!progress.value.maxGen || progress.value.generation <= 0) return 0
+  return Math.min(100, (progress.value.generation / progress.value.maxGen) * 100)
+})
+
+const etaDisplay = computed(() => {
+  if (!startTime || !progress.value.maxGen || progress.value.generation <= 0) return ''
+  const elapsed = (Date.now() - startTime) / 1000  // seconds
+  const pct = progress.value.generation / progress.value.maxGen
+  if (pct >= 1) return ''
+  const totalEstimate = elapsed / pct
+  const remaining = Math.max(0, totalEstimate - elapsed)
+  return formatEta(remaining)
+})
+
+function formatEta(seconds) {
+  if (seconds < 60) return `~${Math.ceil(seconds)}s left`
+  if (seconds < 3600) {
+    const m = Math.floor(seconds / 60)
+    const s = Math.ceil(seconds % 60)
+    return `~${m}m ${s}s left`
+  }
+  const h = Math.floor(seconds / 3600)
+  const m = Math.ceil((seconds % 3600) / 60)
+  return `~${h}h ${m}m left`
+}
+
+function emitProgress() {
+  emit('progress', {
+    generation: progress.value.generation,
+    maxGen: progress.value.maxGen,
+    k: progress.value.k,
+    language: progress.value.language,
+    pct: progressPct.value,
+    eta: etaDisplay.value,
+    status: jobStatus.value,
+  })
 }
 
 /* ── ANSI → HTML converter ───────────────────────────── */
@@ -244,6 +290,7 @@ watch(() => props.jobId, (newId) => {
     logContent.value = ''
     jobStatus.value = 'pending'
     progress.value = { generation: 0, maxGen: 0, k: 0, language: '' }
+    startTime = null
     stopConsole()
     startConsole()
   }
@@ -323,6 +370,11 @@ onUnmounted(stopConsole)
   color: var(--text-muted);
   font-size: 0.68rem;
 }
+.progress-eta {
+  color: #e5c07b;
+  font-size: 0.68rem;
+  font-style: italic;
+}
 .progress-bar-wrap {
   width: 80px;
   height: 6px;

frontend/src/components/ProgressCircle.vue

@@ -0,0 +1,71 @@
+<template>
+  <svg :width="size" :height="size" :viewBox="`0 0 ${size} ${size}`" class="progress-circle">
+    <!-- Background circle -->
+    <circle
+      :cx="center" :cy="center" :r="radius"
+      fill="none"
+      :stroke="bgColor"
+      :stroke-width="strokeWidth"
+    />
+    <!-- Progress arc -->
+    <circle
+      :cx="center" :cy="center" :r="radius"
+      fill="none"
+      :stroke="color"
+      :stroke-width="strokeWidth"
+      :stroke-dasharray="circumference"
+      :stroke-dashoffset="dashOffset"
+      stroke-linecap="round"
+      class="progress-arc"
+    />
+    <!-- Center text -->
+    <text
+      :x="center" :y="center"
+      text-anchor="middle"
+      dominant-baseline="central"
+      :font-size="fontSize"
+      :fill="textColor"
+      font-weight="600"
+    >
+      {{ label || Math.round(pct) + '%' }}
+    </text>
+  </svg>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  pct: { type: Number, default: 0 },
+  size: { type: Number, default: 36 },
+  strokeWidth: { type: Number, default: 3 },
+  color: { type: String, default: '#00BFFF' },
+  bgColor: { type: String, default: 'rgba(255,255,255,0.1)' },
+  textColor: { type: String, default: '#dcdfe4' },
+  label: { type: String, default: '' },
+})
+
+const center = computed(() => props.size / 2)
+const radius = computed(() => (props.size - props.strokeWidth) / 2)
+const circumference = computed(() => 2 * Math.PI * radius.value)
+const dashOffset = computed(() => {
+  const clampedPct = Math.min(100, Math.max(0, props.pct))
+  return circumference.value * (1 - clampedPct / 100)
+})
+const fontSize = computed(() => Math.max(8, props.size * 0.28))
+</script>
+
+<style scoped>
+.progress-circle {
+  transform: rotate(-90deg);
+  flex-shrink: 0;
+}
+.progress-arc {
+  transition: stroke-dashoffset 0.4s ease;
+}
+/* Rotate text back so it's readable */
+.progress-circle text {
+  transform: rotate(90deg);
+  transform-origin: center;
+}
+</style>

frontend/src/views/ProjectDashboard.vue

@@ -27,8 +27,18 @@
       </div>
       <div v-if="store.activeJobId" class="console-bottom" :class="{ minimized: !store.showConsole }">
         <div v-if="!store.showConsole" class="console-minimized-bar" @click="store.showConsole = true">
+          <ProgressCircle
+            v-if="jobProgress.pct > 0 && jobProgress.status === 'running'"
+            :pct="jobProgress.pct"
+            :size="28"
+            :stroke-width="3"
+          />
           <span>Console</span>
           <span class="status-badge-mini" :class="miniStatus">{{ miniStatus }}</span>
+          <template v-if="jobProgress.status === 'running' && jobProgress.generation > 0">
+            <span class="mini-gen">Gen {{ jobProgress.generation }}<template v-if="jobProgress.maxGen"> / {{ jobProgress.maxGen }}</template></span>
+            <span class="mini-eta" v-if="jobProgress.eta">{{ jobProgress.eta }}</span>
+          </template>
           <span class="expand-icon">&#9650;</span>
         </div>
         <ConsolePanel
@@ -38,6 +48,7 @@
           @close="store.showConsole = false"
           @completed="onJobCompleted"
           @failed="onJobFailed"
+          @progress="onProgress"
         />
       </div>
     </div>
@@ -46,17 +57,21 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, reactive, computed, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import axios from 'axios'
 import { useProjectStore } from '../stores/project'
 import ConsolePanel from '../components/ConsolePanel.vue'
+import ProgressCircle from '../components/ProgressCircle.vue'
 import ShareModal from '../components/ShareModal.vue'
 import { requestPermission, notifyJobCompleted, notifyJobFailed } from '../utils/notify'
+import { useToast } from '../composables/useToast'
 
 const route = useRoute()
 const store = useProjectStore()
+const { addToast } = useToast()
 const showShare = ref(false)
+const jobProgress = reactive({ generation: 0, maxGen: 0, k: 0, language: '', pct: 0, eta: '', status: 'pending' })
 
 const projectId = computed(() => route.params.id)
 const project = computed(() => store.current)
@@ -73,24 +88,33 @@ async function loadProject() {
 
 async function onJobCompleted(jobId) {
   await loadProject()
-  // Send browser notification with AUC if available
+  // Send browser notification + in-app toast with AUC if available
   try {
     const { data } = await axios.get(`/api/analysis/${projectId.value}/jobs/${jobId}`)
+    const aucStr = data.best_auc != null ? ` — AUC ${Number(data.best_auc).toFixed(4)}` : ''
+    const kStr = data.best_k != null ? ` (k=${data.best_k})` : ''
+    addToast(`Job completed${aucStr}${kStr}`, 'success', 8000)
     notifyJobCompleted(project.value?.name || 'Project', {
       auc: data.best_auc,
       k: data.best_k,
       jobId,
     })
   } catch {
+    addToast('Job completed', 'success', 6000)
     notifyJobCompleted(project.value?.name || 'Project', { jobId })
   }
 }
 
 function onJobFailed(jobId) {
   loadProject()
+  addToast('Job failed — check console for details', 'error', 8000)
   notifyJobFailed(project.value?.name || 'Project', { jobId })
 }
 
+function onProgress(data) {
+  Object.assign(jobProgress, data)
+}
+
 watch(projectId, loadProject)
 onMounted(() => {
   loadProject()
@@ -226,6 +250,17 @@ onMounted(() => {
 .status-badge-mini.completed { background: var(--success-bg); color: var(--success-dark); }
 .status-badge-mini.failed { background: var(--danger-bg); color: var(--danger-dark); }
 
+.mini-gen {
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: #00BFFF;
+}
+.mini-eta {
+  font-size: 0.68rem;
+  color: #e5c07b;
+  font-style: italic;
+}
+
 .loading {
   text-align: center;
   padding: 3rem;