補 PPT 視覺 QA 背景狀態

web/static/css/page-ppt-audit-history.css

@@ -205,6 +205,83 @@
   font-size: var(--momo-text-caption, 12px);
 }
 
+.ppt-vision-status {
+  display: grid;
+  grid-template-columns: minmax(260px, 0.36fr) minmax(0, 0.64fr);
+  gap: var(--momo-space-3, 12px);
+  align-items: stretch;
+  margin-top: var(--momo-space-3, 12px);
+  padding: var(--momo-space-3, 12px);
+  border: 1px solid rgba(72, 108, 149, 0.24);
+  border-radius: var(--momo-radius-lg, 8px);
+  background:
+    radial-gradient(circle, rgba(72, 108, 149, 0.08) 1px, transparent 1.2px),
+    rgba(255, 255, 255, 0.58);
+  background-size: 10px 10px, auto;
+}
+
+.ppt-vision-status.is-running,
+.ppt-vision-status.is-queued {
+  border-color: rgba(184, 121, 47, 0.32);
+}
+
+.ppt-vision-status.is-error {
+  border-color: rgba(196, 84, 75, 0.32);
+}
+
+.ppt-vision-status-main {
+  display: flex;
+  align-items: center;
+  gap: var(--momo-space-3, 12px);
+}
+
+.ppt-vision-status-main strong,
+.ppt-vision-status-main small {
+  display: block;
+}
+
+.ppt-vision-status-main strong {
+  color: var(--obs-ink);
+  font-size: var(--momo-text-body, 14px);
+  font-weight: var(--momo-font-weight-black, 800);
+}
+
+.ppt-vision-status-main small,
+.ppt-vision-job span,
+.ppt-vision-job small {
+  color: var(--obs-muted);
+  font-size: var(--momo-text-caption, 12px);
+}
+
+.ppt-vision-status-list {
+  display: grid;
+  gap: var(--momo-space-2, 8px);
+}
+
+.ppt-vision-job {
+  display: grid;
+  grid-template-columns: minmax(130px, 0.28fr) minmax(150px, 0.28fr) minmax(0, 0.44fr);
+  gap: var(--momo-space-2, 8px);
+  align-items: center;
+  min-height: 42px;
+  padding: var(--momo-space-2, 8px);
+  border: 1px solid rgba(86, 64, 48, 0.12);
+  border-radius: var(--momo-radius-md, 6px);
+  background: rgba(255, 255, 255, 0.54);
+}
+
+.ppt-vision-job strong,
+.ppt-vision-job span,
+.ppt-vision-job small {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.ppt-vision-job strong {
+  color: var(--obs-ink);
+  font-size: var(--momo-text-body, 14px);
+}
+
 .ppt-command {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
@@ -1151,6 +1228,7 @@ body.ppt-preview-open {
 
   .ppt-diagnostic-strip,
   .ppt-aider-status,
+  .ppt-vision-status,
   .ppt-health-board,
   .ppt-pipeline-layout {
     grid-template-columns: 1fr;
@@ -1262,7 +1340,8 @@ body.ppt-preview-open {
     min-height: calc(100vh - 168px);
   }
 
-  .ppt-aider-job {
+  .ppt-aider-job,
+  .ppt-vision-job {
     grid-template-columns: 1fr;
   }
 }

web/static/js/observability-charts.js

@@ -659,6 +659,57 @@
     }
   };
 
+  function renderPptVisionStatus(payload) {
+    const panel = document.querySelector('[data-ppt-vision-status]');
+    if (!panel) return;
+    const status = (payload && payload.status) || 'unknown';
+    panel.className = panel.className.replace(/\bis-[a-z_]+\b/g, '').trim();
+    panel.classList.add(`is-${status}`);
+    const title = panel.querySelector('[data-ppt-vision-status-title]');
+    const meta = panel.querySelector('[data-ppt-vision-status-meta]');
+    const list = panel.querySelector('[data-ppt-vision-status-list]');
+    if (title) title.textContent = (payload && payload.status_label) || '狀態未知';
+    if (meta) meta.textContent = (payload && payload.message) || '最近視覺 QA 狀態無法讀取。';
+    if (!list) return;
+    const lastRun = payload && payload.last_run;
+    if (!lastRun) {
+      list.innerHTML = `
+        <div class="ppt-vision-job">
+          <span>尚無紀錄</span>
+          <strong>待命</strong>
+          <small>按下「立即視覺 QA」後會在這裡顯示背景任務狀態。</small>
+        </div>
+      `;
+      return;
+    }
+    const summary = lastRun.summary || {};
+    const timestamp = lastRun.finished_at || lastRun.started_at || lastRun.queued_at || '';
+    const issueText = `${Number(summary.audited_count || 0)} 份 / ${Number(summary.total_issues || 0)} 問題`;
+    const errorText = Number(summary.error_count || 0) > 0
+      ? `錯誤 ${Number(summary.error_count || 0)}`
+      : '無 runtime error';
+    list.innerHTML = `
+      <div class="ppt-vision-job">
+        <span>${escapeHtml(timestamp)}</span>
+        <strong>${escapeHtml(issueText)}</strong>
+        <small>${escapeHtml(errorText)}</small>
+      </div>
+    `;
+  }
+
+  window.refreshPptVisionStatus = async function refreshPptVisionStatus() {
+    try {
+      const response = await fetch('/observability/ppt_audit/vision_status', {
+        headers: { 'Accept': 'application/json' }
+      });
+      const data = await response.json();
+      if (!response.ok || !data.ok) return;
+      renderPptVisionStatus(data);
+    } catch (error) {
+      console.warn('ppt_vision_status_failed', error);
+    }
+  };
+
   function initPptAutoGeneration() {
     const panel = document.querySelector('[data-ppt-auto-generation]');
     const pageStatus = document.querySelector('[data-ppt-auto-status]');
@@ -671,6 +722,9 @@
     const previewLoading = previewModal ? previewModal.querySelector('[data-ppt-preview-loading]') : null;
     const previewFrameWrap = previewModal ? previewModal.querySelector('.ppt-preview-frame-wrap') : null;
     const visionAuditFilenames = readJson('obs-ppt-audit-filenames', []);
+    if (document.querySelector('[data-ppt-vision-status]') && window.refreshPptVisionStatus) {
+      window.refreshPptVisionStatus();
+    }
 
     function closePreviewModal() {
       if (!previewModal) return;
@@ -772,6 +826,9 @@
             ? '視覺 QA 已在執行中，請稍後重新整理查看資料庫結果。'
             : `視覺 QA 已排入 ${filenames.length} 份簡報；審核結果會寫入 ppt_audit_results。`;
         }
+        if (window.refreshPptVisionStatus) {
+          window.refreshPptVisionStatus();
+        }
       } catch (error) {
         console.warn('ppt_vision_audit_queue_failed', error);
         buttons.forEach(item => {