From ca8a98c6c21e6c4b0a7edaf1dd39d3e899a4c9b0 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Thu, 14 May 2026 18:33:07 +0200
Subject: [PATCH] feat(history): add record numbering and column names to
 Change History
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Show total record count and filtered count in subtitle
- Add #N global number to each history entry row
- Add # column index inside each change detail table
- Column header already shown via headers[i] — now labeled "Column"

Co-Authored-By: claude-flow <ruv@ruv.net>
---
 src/components/HistoryView.tsx | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/HistoryView.tsx b/src/components/HistoryView.tsx
index 77a8039..025a331 100644
--- a/src/components/HistoryView.tsx
+++ b/src/components/HistoryView.tsx
@@ -112,7 +112,11 @@ export function HistoryView({ headers, data, onRevert, onEdit }: HistoryViewProp
             <History className="w-8 h-8 text-blue-500" />
             Change History
           </h1>
-          <p className="text-slate-400 mt-1">Review and revert any changes made to products.</p>
+          <p className="text-slate-400 mt-1">
+            {history.length > 0 ? (
+              <><span className="text-white font-semibold">{history.length}</span> total records{filteredHistory.length !== history.length && <> &mdash; showing <span className="text-white font-semibold">{filteredHistory.length}</span></>}</>
+            ) : 'Review and revert any changes made to products.'}
+          </p>
         </div>
         <div className="flex items-center gap-4">
           <div className="relative">
@@ -161,22 +165,27 @@ export function HistoryView({ headers, data, onRevert, onEdit }: HistoryViewProp
           </div>
         ) : (
           <div className="divide-y divide-slate-800">
-            {filteredHistory.map((entry) => {
+            {filteredHistory.map((entry, filteredIdx) => {
               const isExpanded = expandedId === entry.id;
               const changes = getChangedFields(entry.old_data, entry.new_data);
-              
+              const globalNumber = history.indexOf(entry) + 1;
+
               return (
                 <div key={entry.id} className={cn(
                   "transition-colors",
                   isExpanded ? "bg-blue-600/5" : "hover:bg-slate-800/30"
                 )}>
                   {/* Summary Row */}
-                  <div 
+                  <div
                     className="p-4 flex items-center gap-4 cursor-pointer"
                     onClick={() => setExpandedId(isExpanded ? null : entry.id)}
                   >
                     {isExpanded ? <ChevronDown className="w-5 h-5 text-slate-500" /> : <ChevronRight className="w-5 h-5 text-slate-500" />}
-                    
+
+                    <div className="w-8 text-right shrink-0">
+                      <span className="text-xs font-mono text-slate-500">#{globalNumber}</span>
+                    </div>
+
                     <div className="flex-1 grid grid-cols-4 gap-4 items-center">
                       <div className="flex items-center gap-3">
                         <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center text-blue-500 font-bold shrink-0">
@@ -236,7 +245,8 @@ export function HistoryView({ headers, data, onRevert, onEdit }: HistoryViewProp
                         <table className="w-full text-sm">
                           <thead>
                             <tr className="bg-slate-800/50 text-slate-400 text-left">
-                              <th className="px-4 py-2 font-medium">Field</th>
+                              <th className="px-4 py-2 font-medium w-8">#</th>
+                              <th className="px-4 py-2 font-medium">Column</th>
                               <th className="px-4 py-2 font-medium">Original Value</th>
                               <th className="px-4 py-2 font-medium">New Value</th>
                             </tr>
@@ -244,6 +254,7 @@ export function HistoryView({ headers, data, onRevert, onEdit }: HistoryViewProp
                           <tbody className="divide-y divide-slate-800">
                             {changes.map((change, idx) => (
                               <tr key={idx} className="hover:bg-slate-700/20">
+                                <td className="px-4 py-2 text-slate-600 text-xs font-mono">{idx + 1}</td>
                                 <td className="px-4 py-2 text-slate-300 font-medium whitespace-nowrap">
                                   {change.header}
                                 </td>