From 6016c31e4d53b0d4bf5b4acea13357b61e9d5fec Mon Sep 17 00:00:00 2001
From: egg <egg@localhost>
Date: Sun, 22 Feb 2026 15:19:52 +0800
Subject: [PATCH] fix(reject-history): improve Pareto top-80% filter and add
 detail table loading spinner

Pareto filter now includes the item that crosses the 80% threshold and
guarantees at least 5 items, so the chart stays useful when one reason
dominates (e.g. defect-only mode). Detail table shows a spinner overlay
while the list is refreshing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/reject-history/App.vue           |  8 ++++--
 .../reject-history/components/DetailTable.vue |  3 ++-
 frontend/src/reject-history/style.css         | 26 +++++++++++++++++++
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/frontend/src/reject-history/App.vue b/frontend/src/reject-history/App.vue
index 3b6645c..c69b26f 100644
--- a/frontend/src/reject-history/App.vue
+++ b/frontend/src/reject-history/App.vue
@@ -760,8 +760,12 @@ const filteredParetoItems = computed(() => {
   if (!committedFilters.paretoTop80 || items.length === 0) {
     return items;
   }
-  const top = items.filter((item) => Number(item.cumPct || 0) <= 80);
-  return top.length > 0 ? top : [items[0]];
+  // Include items up to AND including the one that crosses 80%,
+  // but always show at least 5 items so the chart stays informative
+  // when one reason dominates (e.g. defect-only mode).
+  const cutIdx = items.findIndex((item) => Number(item.cumPct || 0) >= 80);
+  const top80Count = cutIdx >= 0 ? cutIdx + 1 : items.length;
+  return items.slice(0, Math.max(top80Count, Math.min(5, items.length)));
 });
 
 const activeFilterChips = computed(() => {
diff --git a/frontend/src/reject-history/components/DetailTable.vue b/frontend/src/reject-history/components/DetailTable.vue
index 648adea..741575a 100644
--- a/frontend/src/reject-history/components/DetailTable.vue
+++ b/frontend/src/reject-history/components/DetailTable.vue
@@ -31,7 +31,8 @@ function formatNumber(value) {
         </span>
       </div>
     </div>
-    <div class="card-body detail-table-wrap">
+    <div class="card-body detail-table-wrap" :class="{ 'is-loading': loading }">
+      <div v-if="loading" class="table-loading-overlay"><span class="table-spinner"></span></div>
       <table class="detail-table">
         <thead>
           <tr>
diff --git a/frontend/src/reject-history/style.css b/frontend/src/reject-history/style.css
index e887449..8d0848f 100644
--- a/frontend/src/reject-history/style.css
+++ b/frontend/src/reject-history/style.css
@@ -286,9 +286,35 @@
 }
 
 .detail-table-wrap {
+  position: relative;
   overflow: auto;
 }
 
+.detail-table-wrap.is-loading table {
+  opacity: 0.4;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+}
+
+.table-loading-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}
+
+.table-spinner {
+  display: block;
+  width: 28px;
+  height: 28px;
+  border: 3px solid #d1d5db;
+  border-top-color: #2563eb;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
 .detail-table .cell-nowrap {
   white-space: nowrap;
 }