add cache for card list with TTL and refresh button

src/app/page.tsx

@@ -16,6 +16,10 @@ export default function Page() {
   const [setId, setSetId] = useState('');
   const [note, setNote] = useState<string | null>(null);
   const [tab, setTab] = useState<'uncollected' | 'collected'>('uncollected');
+  const [refreshing, setRefreshing] = useState(false);
+  const [updatedAt, setUpdatedAt] = useState<string | null>(null);
+  const [cachedFlag, setCachedFlag] = useState<boolean | null>(null);
+  const [toast, setToast] = useState<string | null>(null);
 
   useEffect(() => {
     (async () => {
@@ -34,6 +38,8 @@ export default function Page() {
         const json = await res.json();
         setCards(json.data || []);
         if (json.note) setNote(String(json.note));
+        if (json.updatedAt) setUpdatedAt(String(json.updatedAt));
+        if (typeof json.cached === 'boolean') setCachedFlag(json.cached);
       } catch (e: any) {
         setError(e?.message || 'Error');
       } finally {
@@ -43,6 +49,28 @@ export default function Page() {
     load();
   }, []);
 
+  async function refreshCards() {
+    setRefreshing(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/magikarp?pageSize=250&refresh=1', { cache: 'no-store' });
+      if (!res.ok) throw new Error('Failed to refresh');
+      const json = await res.json();
+      setCards(json.data || []);
+      if (json.note) setNote(String(json.note)); else setNote(null);
+      if (json.updatedAt) setUpdatedAt(String(json.updatedAt));
+      if (typeof json.cached === 'boolean') setCachedFlag(json.cached);
+    } catch (e: any) {
+      // Non-blocking toast on refresh failure
+      const msg = e?.message ? String(e.message) : 'Refresh failed';
+      setToast(msg);
+      // auto-hide
+      setTimeout(() => setToast(null), 3000);
+    } finally {
+      setRefreshing(false);
+    }
+  }
+
   function toggleCollected(id: string, key: VariantKey) {
     setChecklist((prev) => {
       const next: ChecklistV2 = { ...prev };
@@ -116,6 +144,25 @@ export default function Page() {
 
       <div className="mb-4 flex flex-wrap items-center gap-3">
         <SetFilter options={setOptions} value={setId} onChange={setSetId} />
+        <button
+          type="button"
+          onClick={refreshCards}
+          disabled={refreshing}
+          className={`px-3 py-1.5 text-sm rounded border transition ${refreshing ? 'bg-slate-200 text-slate-500 border-slate-300' : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-50'}`}
+          aria-busy={refreshing}
+        >
+          {refreshing ? 'Refreshing…' : 'Refresh cards'}
+        </button>
+        {updatedAt ? (
+          <span className="text-xs text-slate-500 flex items-center gap-2">
+            Updated: {new Date(updatedAt).toLocaleString()}
+            {cachedFlag !== null && (
+              <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[0.7rem] border ${cachedFlag ? 'bg-yellow-50 text-yellow-800 border-yellow-200' : 'bg-green-50 text-green-800 border-green-200'}`}>
+                {cachedFlag ? 'Cached' : 'Live'}
+              </span>
+            )}
+          </span>
+        ) : null}
       </div>
 
       {loading ? (
@@ -163,6 +210,12 @@ export default function Page() {
             Showing {displayed.length} of {filtered.length} cards in this tab.
           </div>
           <CardGrid cards={displayed} checklist={checklist} onToggle={toggleCollected} />
+          {/* Toast */}
+          {toast ? (
+            <div className="fixed bottom-4 right-4 z-50 rounded-md bg-slate-900 text-white px-3 py-2 text-sm shadow-lg">
+              {toast}
+            </div>
+          ) : null}
         </>
       )}
     </main>