From 62e29d131dc8e7240a82c0db1c0d40d63f903f69 Mon Sep 17 00:00:00 2001
From: Mick <119439091+mickbrowns1@users.noreply.github.com>
Date: Fri, 22 May 2026 11:23:52 -0400
Subject: [PATCH] Collapse onboarding pipeline table by default

Shows summary stats (Fully Onboarded / In Progress / Not Started) immediately
on page load; table is hidden until user clicks 'Show Pipeline'. Keeps the
Onboarding page scannable without scrolling past a large table to reach the
prompt template.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/index.html | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 1e65bb8..23f88b4 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -924,11 +924,15 @@ function renderOnboarding() {
           <h2 class="text-base font-semibold text-white">Source Onboarding Pipeline</h2>
           <p class="text-xs text-slate-500 mt-0.5">6-stage lifecycle tracker for every active data source</p>
         </div>
+        <button onclick="obTogglePipeline()" id="btn-ob-pipeline-toggle"
+          class="text-xs text-slate-400 hover:text-gray-200 px-3 py-1.5 rounded-lg bg-slate-800/60 hover:bg-slate-700/60 transition-colors">
+          Show Pipeline
+        </button>
       </div>
-      <div id="ob-pipeline-stats" class="flex gap-3 mb-4">
+      <div id="ob-pipeline-stats" class="flex flex-wrap gap-3">
         <div class="px-3 py-1.5 rounded-full bg-slate-800/60 text-xs text-slate-500 animate-pulse">Loading…</div>
       </div>
-      <div id="ob-pipeline-table"><p class="text-slate-600 text-sm animate-pulse text-center py-6">Loading pipeline…</p></div>
+      <div id="ob-pipeline-table" class="hidden mt-4"></div>
     </div>
 
     <!-- Steps -->
@@ -971,20 +975,21 @@ function obCopy() {
 
 let _obShowCompleted = false
 
+let _obPipelineData = null
+
 async function loadOnboardingPipeline() {
   const statsEl = document.getElementById('ob-pipeline-stats')
   const tableEl = document.getElementById('ob-pipeline-table')
   if (!statsEl || !tableEl) return
   try {
     const data = await apiGet('/api/coverage/onboarding-status')
+    _obPipelineData = data
     const sources = data.sources || []
 
-    if (statsEl) {
-      statsEl.innerHTML = `
-        <span class="px-3 py-1.5 rounded-full bg-emerald-900/40 ring-1 ring-emerald-700/40 text-xs text-emerald-300">✓ Fully Onboarded: ${data.fully_onboarded}</span>
-        <span class="px-3 py-1.5 rounded-full bg-amber-900/40 ring-1 ring-amber-700/40 text-xs text-amber-300">⟳ In Progress: ${data.in_progress}</span>
-        <span class="px-3 py-1.5 rounded-full bg-slate-800/60 ring-1 ring-white/5 text-xs text-slate-400">○ Not Started: ${data.not_started}</span>`
-    }
+    statsEl.innerHTML = `
+      <span class="px-3 py-1.5 rounded-full bg-emerald-900/40 ring-1 ring-emerald-700/40 text-xs text-emerald-300">✓ Fully Onboarded: ${data.fully_onboarded}</span>
+      <span class="px-3 py-1.5 rounded-full bg-amber-900/40 ring-1 ring-amber-700/40 text-xs text-amber-300">⟳ In Progress: ${data.in_progress}</span>
+      <span class="px-3 py-1.5 rounded-full bg-slate-800/60 ring-1 ring-white/5 text-xs text-slate-400">○ Not Started: ${data.not_started}</span>`
 
     const STAGE_ICONS = ['📥','📄','⚙️','🏷️','🔍','🔔']
     const incomplete = sources.filter(s => s.completed < s.total)
@@ -1046,6 +1051,16 @@ async function loadOnboardingPipeline() {
   }
 }
 
+let _obPipelineVisible = false
+
+function obTogglePipeline() {
+  _obPipelineVisible = !_obPipelineVisible
+  const tableEl = document.getElementById('ob-pipeline-table')
+  const btn = document.getElementById('btn-ob-pipeline-toggle')
+  if (tableEl) tableEl.classList.toggle('hidden', !_obPipelineVisible)
+  if (btn) btn.textContent = _obPipelineVisible ? 'Hide Pipeline' : 'Show Pipeline'
+}
+
 function obToggleCompleted() {
   _obShowCompleted = !_obShowCompleted
   const rows = document.getElementById('ob-complete-rows')