More UX improvements.

web/src/api.ts

@@ -23,8 +23,9 @@ export function joinGame(code: string, name: string): Promise<Session> {
   return post('/api/join', { code, name })
 }
 
-export async function fetchCatalog(): Promise<Card[]> {
-  const res = await fetch('/api/catalog')
+export async function fetchCatalog(pack?: string): Promise<Card[]> {
+  const url = pack ? `/api/catalog?pack=${encodeURIComponent(pack)}` : '/api/catalog'
+  const res = await fetch(url)
   if (!res.ok) throw new Error('failed to load catalog')
   return (await res.json()) as Card[]
 }

web/src/components/DebugPanel.tsx

@@ -5,21 +5,22 @@ import { CardView } from './CardView'
 
 interface Props {
   canGrant: boolean // shop phase — grants only land then
+  pack: string // active pack, so the catalog matches the game
   send: (msg: ClientMessage) => void
 }
 
 // DebugPanel is a testing aid (server DEBUG mode only): a collapsible drawer
-// listing every card in the game, tier by tier. Clicking one drops it into
-// your deck for free, off-turn.
-export function DebugPanel({ canGrant, send }: Props) {
+// listing every card in the active pack, tier by tier. Clicking one drops it
+// into your deck for free, off-turn.
+export function DebugPanel({ canGrant, pack, send }: Props) {
   const [open, setOpen] = useState(false)
   const [catalog, setCatalog] = useState<Card[]>([])
 
   useEffect(() => {
-    fetchCatalog()
+    fetchCatalog(pack)
       .then(setCatalog)
       .catch(() => setCatalog([]))
-  }, [])
+  }, [pack])
 
   const tiers = [...new Set(catalog.map((c) => c.tier ?? 0))].sort((a, b) => a - b)
 

web/src/components/Table.tsx

@@ -157,7 +157,7 @@ export function Table({ session, onLeave }: { session: Session; onLeave: () => v
       )}
       {error && <div className="toast">{error}</div>}
       {view.debug && (
-        <DebugPanel canGrant={view.phase === 'shop'} send={send} />
+        <DebugPanel canGrant={view.phase === 'shop'} pack={view.pack} send={send} />
       )}
     </div>
   )