From 4c1d22b9359cd21848c0c78ab71a8ebf9f65b203 Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Wed, 9 Sep 2026 14:06:37 -0500
Subject: [PATCH] =?UTF-8?q?fix(my-cards):=20collection=20display=20?=
 =?UTF-8?q?=E2=80=94=20summary=20+=20cards.map=20+=20empty-state=20+=20deb?=
 =?UTF-8?q?ug=20guard;=20branch=20fix/my-cards-collection-display?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/my-cards.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/pages/my-cards.js b/pages/my-cards.js
index 790c7b3..cefcdde 100644
--- a/pages/my-cards.js
+++ b/pages/my-cards.js
@@ -411,11 +411,16 @@ export default function MyCards() {
 
         {/* Cards Grid */}
         <div className={`
-          ${viewMode === 'grid' 
-            ? 'grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4' 
+          ${viewMode === 'grid'
+            ? 'grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4'
             : 'space-y-4'
           }
         `}>
+          {cards.length === 0 && !loading && (
+            <div className="col-span-full text-center py-12" style={{ color: 'var(--text-secondary)' }}>
+              <p>No cards loaded from /api/cards/owned (summary shows {collectionSummary?.totalCards ?? 'N/A'} via /api/user/stats).</p>
+            </div>
+          )}
           {cards.map((card) => (
             <CardItem
               key={card.id}
@@ -458,7 +463,7 @@ export default function MyCards() {
 
         {/* No Cards Found */}
         {cards.length === 0 && !loading && (
-          <div className="text-center py-20">
+          <div className="text-center py-20" data-testid="my-cards-empty-state">
             <div className="glass-panel w-16 h-16 mx-auto mb-4 rounded-2xl flex items-center justify-center">
               <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" style={{ color: 'var(--text-secondary)' }}>
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />