+
Street
-
-
+
warning: in the working copy of 'apps/web/src/app/hands/page.tsx', LF will be replaced by CRLF the next time Git touches it
```
## Assistant
**Result** (success):
```
Exit code: 0
Wall time: 0.4 seconds
Total output lines: 1595
Output:
diff --git a/apps/web/src/app/hands/[handId]/page.tsx b/apps/web/src/app/hands/[handId]/page.tsx
index 375eeb2..25846f2 100644
--- a/apps/web/src/app/hands/[handId]/page.tsx
+++ b/apps/web/src/app/hands/[handId]/page.tsx
@@ -143,6 +143,8 @@ interface ReportScopeRow {
jobMeta?: unknown;
}
+type HandReviewAnalysisStatus = 'waiting' | 'queued' | 'running' | 'complete' | 'failed' | null;
+
interface HandDetail {
id: string;
roomId: string | null;
@@ -152,6 +154,7 @@ interface HandDetail {
finalPot: number | null;
isComplete: boolean;
runoutAware?: boolean;
+ analysisStatus?: HandReviewAnalysisStatus;
events: HandEventRow[];
decisions: DecisionRow[];
reportsByScope?: Record
;
@@ -921,6 +924,60 @@ function getOverviewServerMessage(payload: HandActionStatusPayload | null): stri
return null;
}
+function hasOverviewAnalysisActivity(payload: HandActionStatusPayload | null): boolean {
+ if (!payload) {
+ return false;
+ }
+ if (payload.overview?.status === 'queued' || payload.overview?.status === 'running') {
+ return true;
+ }
+ if (payload.pipelineStatus === 'queued' || payload.pipelineStatus === 'running') {
+ return true;
+ }
+ if (payload.analysis.status === 'queued' || payload.analysis.status === 'running') {
+ return true;
+ }
+ return (
+ payload.analyzeHand.status === 'waiting' ||
+ payload.analyzeHand.status === 'pending' ||
+ payload.analyzeHand.status === 'queued' ||
+ payload.analyzeHand.status === 'running'
+ );
+}
+
+function hasOverviewAnalysisUpdate(payload: HandActionStatusPayload | null): boolean {
+ if (!payload) {
+ return false;
+ }
+ return hasOverviewAnalysisActivity(payload) || payload.analyzeHand.status !== 'idle';
+}
+
+function hasTerminalWholeHandAnalysisStatus(status: HandReviewAnalysisStatus | undefined): boolean {
+ return status === 'complete' || status === 'failed';
+}
+
+function shouldAttemptLegacyWholeHandSummaryFallback(params: {
+ report: ReportScopeRow | null | undefined;
+ handAnalysisStatus?: HandReviewAnalysisStatus;
+ overviewStatusPayload?: HandActionStatusPayload | null;
+}): boolean {
+ if (extractWholeHandText(params.report, null)) {
+ return false;
+ }
+
+ const overviewStatus = parseOverviewPipelineStatus(params.overviewStatusPayload ?? null);
+ if (overviewStatus) {
+ return overviewStatus.status === 'complete' || overviewStatus.status === 'failed';
+ }
+
+ const payloadAnalysisStatus = params.overviewStatusPayload?.analysis?.status;
+ if (payloadAnalysisStatus === 'complete' || payloadAnalysisStatus === 'failed') {
+ return true;
+ }
+
+ return hasTerminalWholeHandAnalysisStatus(params.handAnalysisStatus);
+}
+
type DecisionPipelineStatus =
| 'queued'
| 'running'
@@ -1288,6 +1345,10 @@ function mergeDebugEvents(...groups: DebugEvent[][]): DebugEvent[] {
return Array.from(merged.values());
}
+function hasMeaningfulDebugEvents(events: DebugEvent[]): boolean {
+ return events.some((event) => event.level === 'warn' || event.level === 'error');
+}
+
function stripDebugEventFields(value: unknown): unknown {
if (Array.isArray(value)) {
return value.map((item) => stripDebugEventFields(item));
@@ -1331,116 +1392,99 @@ function toDecisionStatusSnapshot(response: {
};
}
-function hasMeaningfulDebugEvents(events: DebugEvent[]): boolean {
- return events.some((event) => event.level === 'warn' || event.level === 'error');
+function isMissingSavedPayloadMessage(value: string | null | undefined): boolean {
+ if (!value) {
+ return false;
+ }
+ return /result(?: payload)? was not saved|no recommendation payload was saved/i.test(value);
}
-function renderDebugEventList(events: DebugEvent[], emptyMessage: string): React.ReactNode {
- if (events.length === 0) {
- return (
-
- {emptyMessage}
-
- );
+function hasMissingSavedPayloadIssue(params: {
+ analysisPresent: boolean;
+ pipelineEntry: Pick | null;
+ statusSnapshot: DecisionStatusSnapshot | null;
+}): boolean {
+ if (params.analysisPresent) {
+ return false;
+ }
+ if (
+ params.pipelineEntry?.status === 'complete' ||
+ params.pipelineEntry?.status === 'llm_only'
+ ) {
+ return true;
+ }
+ if (params.statusSnapshot?.status !== 'failed') {
+ return false;
}
return (
-
- {events.map((event, index) => {
- const dataRecord = event.data ?? null;
- const solverErrorCode =
- dataRecord && typeof dataRecord.solverErrorCode === 'string'
- ? dataRecord.solverErrorCode
- : null;
- const solverStderrTailPreview =
- dataRecord && typeof dataRecord.solverStderrTailPreview === 'string'
- ? dataRecord.solverStderrTailPreview
- : null;
- const stderrTail =
- dataRecord && typeof dataRecord.stderrTail === 'string' ? dataRecord.stderrTail : null;
- const dataWithoutStderr =
- dataRecord && Object.keys(dataRecord).length > 0
- ? (() => {
- const clone = { ...dataRecord } as Record
;
- delete clone.stderrTail;
- delete clone.solverErrorCode;
- delete clone.solverStderrTailPreview;
- return Object.keys(clone).length > 0 ? clone : null;
- })()
- : null;
- return (
-
-
- {event.ts}
-
- {event.source}
-
-
- {event.level}
-
-
-
{event.message}
- {solverErrorCode ? (
-
solverErrorCode: {solverErrorCode}
- ) : null}
- {solverStderrTailPreview ? (
-
-
- stderr preview
-
-
- {solverStderrTailPreview}
-
-
- ) : null}
- {dataWithoutStderr ? (
-
- {JSON.stringify(dataWithoutStderr, null, 2)}
-
- ) : null}
- {stderrTail ? (
-
-
- stderr tail
-
-
- {stderrTail}
-
-
- ) : null}
-
-
-
-
- {debugSectionOpen ? (
-
-
-
-
-
-
-
-
-
Pipeline Events
- {renderEvents(pipelineDebugEvents, 'No pipeline debug events match current filters.')}
-
-
- {selection.kind === 'overview' || selection.kind === 'street' ? (
-
-
- {selection.kind === 'street'
- ? `Decision Previews (${streetLabel(selection.street)})`
- : 'Decision Previews'}
-
- {decisionRowsForDebugSelection.length === 0 ? (
-
- No decision events yet.
-
- ) : (
-
- {decisionRowsForDebugSelection.map((row) => {
- const isExpanded = expandedOverviewDebugDecisionId === row.decisionId;
- const previewEvents = row.debugEventsPreview ?? [];
- const loadedEvents = decisionDebugById[row.decisionId] ?? [];
- const displayEvents =
- isExpanded && loadedEvents.length > 0 ? loadedEvents : previewEvents;
- const decisionError = decisionDebugErrorById[row.decisionId];
- return (
-
-
- {row.label}
-
-
- {renderEvents(previewEvents, 'No preview events match current filters.')}
- {isExpanded ? (
-
- {loadingDecisionDebugId === row.decisionId ? (
-
Loading full debug...
- ) : null}
- {decisionError ? (
-
{decisionError}
- ) : (
- renderEvents(
- displayEvents,
- 'No full decision debug events match current filters.',
- )
- )}
-
- ) : null}
-
- );
- })}
-
- )}
-
- ) : null}
-
- {selection.kind === 'decision' ? (
-
-
-
Decision Events
-
-
- {loadingDecisionDebugId === selection.decisionId ? (
-
Loading debug events...
- ) : null}
- {selectedDecisionError ? (
-
{selectedDecisionError}
- ) : (
- renderEvents(selectedDecisionEvents, 'No debug events match current filters.')
- )}
-
- ) : null}
-
- ) : null}
-
+
{wholeHandText}
);
@@ -4309,32 +4262,13 @@ export default function HandReviewPage({ params }: { params: Promise<{ handId: s
}
if (selection.kind === 'street') {
- return (
-
- {currentStreetHint}
-
- );
+ return null;
}
if (!selectedDecision) {
return null;
}
- const missingCompletedPayload =
- !selectedDecisionAnalysis &&
- (selectedDecisionPipelineEntry?.status === 'complete' ||
- selectedDecisionPipelineEntry?.status === 'llm_only');
- if (missingCompletedPayload) {
- return (
-
-
Analysis unavailable
-
- This decision is marked complete, but no recommendation payload was saved.
-
-
- );
- }
-
if (selectedDecisionHeroComboUnavailable) {
return (
@@ -4365,34 +4299,8 @@ export default function HandReviewPage({ params }: { params: Promise<{ handId: s
}
if (showDecisionChart && selectedDecisionAnalysis) {
- const explanationDebugEvents = filterAndSortDebugEvents(
- selectedDecisionEffectiveDebugEvents.filter(
- (event) => event.level === 'warn' || event.level === 'error',
- ),
- 'all',
- true,
- );
return (
- {selectedDecisionExplanationFailure ? (
-
-
Explanation failed
-
- Reason: {selectedDecisionExplanationFailure}. Solver strategy is still available.
-
-
-
- Explanation Log
-
-
- {renderDebugEventList(
- explanationDebugEvents,
- 'No explanation debug events were recorded for this failure.',
- )}
-
-
-
- ) : null}
);
}, [
- currentStreetHint,
decisionMixActions,
hand,
selectedDecision,
selectedDecisionAnalysis,
- selectedDecisionEffectiveDebugEvents,
selectedDecisionHeroComboUnavailable,
- selectedDecisionExplanationFailure,
selectedDecisionNotes,
selectedDecisionRecommendedActionText,
selectedDecisionStreet,
@@ -4489,20 +4394,22 @@ export default function HandReviewPage({ params }: { params: Promise<{ handId: s
{selectionDescriptor}
-
+ {canAnalyzeSelection ? (
+
+ ) : null}
) : coachScope ? (
- {STREETS.map((street, streetIndex) => {
- const streetDecisions = decisionsByStreet[street];
- const onlyDecision = streetDecisions.length === 1 ? streetDecisions[0] : null;
- const nextSelection: Selection =
- streetDecisions.length === 1
- ? { kind: 'decision', decisionId: streetDecisions[0].id }
- : { kind: 'street', street };
- const showStreetButton = streetDecisions.length <= 1;
-
- const isStreetReached = street === 'preflop' ? true : reachedStreets[street];
- const streetIsActive =
- selection.kind === 'street'
- ? selection.street === street
- : selection.kind === 'decision' && onlyDecision !== null && selection.decisionId === onlyDecision.id;
-
- const anyDecisionActive =
- selection.kind === 'decision' &&
- streetDecisions.some((d) => d.id === selection.decisionId);
-
+ {streetNavigationGroups.map((group, groupIndex) => {
return (
-
- {/* Connector line */}
-
-
- {showStreetButton ? (
-
+
+ {groupIndex > 0 ? (
+
) : null}
- {streetDecisions.length >= 2
- ? streetDecisions.map((decision, index) => (
-
- {index > 0 && (
-
+ {group.items.map((item, itemIndex) => {
+ const isActive =
+ selection.kind === 'decision' && selection.decisionId === item.decisionId;
+
+ return (
+
+ {itemIndex > 0 ? (
+
+ ) : null}
+
- ))
- : null}
+ >
+ {item.label}
+
+
+ );
+ })}
);
})}
warning: in the working copy of 'apps/web/src/app/hands/[handId]/page.tsx', LF will be replaced by CRLF the next time Git touches it
```
## Assistant
**Result** (success):
```
Exit code: 0
Wall time: 0.4 seconds
Output:
diff --git a/apps/web/src/app/table/[roomId]/page.tsx b/apps/web/src/app/table/[roomId]/page.tsx
index e21b5b7..3b688be 100644
--- a/apps/web/src/app/table/[roomId]/page.tsx
+++ b/apps/web/src/app/table/[roomId]/page.tsx
@@ -1917,7 +1917,7 @@ function TablePageClient({
{/* ---- Enter seat ---- */}
{isEnterSeatModalOpen && (
-
+
{isHost ? 'Enter Seat' : 'Request Seat'} {pendingSeatNo !== null ? pendingSeatNo + 1 : ''}
@@ -1927,6 +1927,7 @@ function TablePageClient({
Name
))}
);
}
/* ------------------------------------------------------------------ */
/* Page */
/* ------------------------------------------------------------------ */
export default function Home() {
const router = useRouter();
const toast = useToast();
const [quickStartLoading, setQuickStartLoading] = useState(false);
const [startPlayingLoading, setStartPlayingLoading] = useState(false);
const { status } = useSession();
const {
token: authToken,
actorType,
guestId,
isLoading: actorAuthLoading,
} = useActorAuth();
/* Cursor glow tracking (desktop only, no re-renders) */
const cursorX = useMotionValue(-1000);
const cursorY = useMotionValue(-1000);
const smoothCursorX = useSpring(cursorX, { stiffness: 40, damping: 25 });
const smoothCursorY = useSpring(cursorY, { stiffness: 40, damping: 25 });
const handlePageMouseMove = (e: React.MouseEvent) => {
cursorX.set(e.clientX);
cursorY.set(e.clientY);
};
const handlePageMouseLeave = () => {
cursorX.set(-1000);
cursorY.set(-1000);
};
/* ---- handlers (unchanged business logic) ---- */
const handleQuickStart = async () => {
if (!authToken) {
toast.error('Unable to start a session. Please refresh and try again.');
return;
}
setQuickStartLoading(true);
try {
const { response, recoveredAsGuest } = await fetchWithRoomAuthRecovery(
`${API_BASE}/api/rooms/quickstart`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${authToken}`,
},
},
{
actorType,
guestId,
onRecoverUserSession: async () => {
await signOut({ redirect: false });
},
},
);
if (recoveredAsGuest) {
toast.info('Signed-in session expired. Continuing as guest.');
}
if (response.ok) {
const data = await response.json();
if (data.ok && data.data?.roomId) {
toast.success('Room created. Redirecting...');
router.push(`/table/${data.data.roomId}`);
} else {
toast.error('Invalid response from server');
}
} else {
toast.error(
await readApiErrorMessage(response, 'Failed to create room'),
);
}
} catch {
toast.error('Failed to connect to server');
} finally {
setQuickStartLoading(false);
}
};
const handleStartPlaying = async () => {
if (!authToken) {
toast.error('Unable to start a session. Please refresh and try again.');
return;
}
setStartPlayingLoading(true);
try {
const { response, recoveredAsGuest } = await fetchWithRoomAuthRecovery(
`${API_BASE}/api/rooms`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${authToken}`,
},
body: JSON.stringify({
name: `Live Room ${Date.now()}`,
isPublic: false,
}),
},
{
actorType,
guestId,
onRecoverUserSession: async () => {
await signOut({ redirect: false });
},
},
);
if (recoveredAsGuest) {
toast.info('Signed-in session expired. Continuing as guest.');
}
if (!response.ok) {
toast.error(
await readApiErrorMessage(response, 'Failed to create live room'),
);
return;
}
const data = (await response.json()) as {
roomId?: string;
inviteCode?: string | null;
};
if (!data.roomId) {
toast.error('Invalid response from server');
return;
}
const query = data.inviteCode
? `?invite=${encodeURIComponent(data.inviteCode)}`
: '';
toast.success('Live room created');
router.push(`/table/${data.roomId}${query}`);
} catch {
toast.error('Failed to connect to server');
} finally {
setStartPlayingLoading(false);
}
};
/* ---- derived ---- */
const anyLoading = status === 'loading' || actorAuthLoading;
/* ---- static data ---- */
const featureBlocks = [
{
num: '01',
color: PALETTE[0],
Icon: Crosshair,
title: 'Practice Real Decisions',
description:
"Sit down at a table with AI opponents and play real No-Limit Hold'em hands. No setup, no waiting 鈥?cards on the felt, decisions that matter.",
visual:
,
reversed: false,
},
{
num: '02',
color: PALETTE[1],
Icon: BarChart3,
title: 'Solver-Backed Analysis',
description:
'Click any postflop decision to run a full GTO computation. See the complete mixed strategy, your deviation from optimal, and exactly which action the solver prefers.',
visual:
,
reversed: true,
},
{
num: '03',
color: PALETTE[2],
Icon: Sparkles,
title: 'AI-Powered Coaching',
description:
'Get personalized insights from an AI coach that analyzes your sessions. Spot repeated leaks, receive natural-language explanations, and focus your review on the hands that matter most.',
visual:
,
reversed: false,
},
];
const actions = [
{
icon:
,
title: 'Create Live Room',
description: 'Start a private table with friends.',
onClick: () => void handleStartPlaying(),
disabled: anyLoading,
loading: startPlayingLoading,
loadingText: 'Creating...',
},
{
icon:
,
title: 'Hand Review',
description: 'Review hands with solver analysis.',
onClick: () => router.push('/hands'),
},
];
/* ---- render ---- */
return (
{/* =============== Background system =============== */}
{/* 1. Base 鈥?deep navy, not black */}
{/* 2. Full-canvas atmospheric gradient */}
{/* 3. Color bloom layer 鈥?richer, stronger */}
{/* 4. Aurora haze 鈥?slow drifting animated gradient */}
{/* 5. Spotlight orb 1 鈥?teal, larger */}
{/* 6. Spotlight orb 2 鈥?violet, larger */}
{/* 7. Cursor-reactive glow 鈥?dual-color, stronger */}
{/* 8. Dot grid */}
{/* 9. Noise texture */}
{/* =============== ACT 1: Hero 鈥?solver cockpit =============== */}
{/* Left: copy + CTAs */}
GTO Poker Training
Practice poker.
Analyze every decision.
Play hands against bots, run solver-backed GTO analysis on every
postflop spot, and see exactly where your strategy deviates.
{actorType !== 'user' && !actorAuthLoading ? (
) : actorType === 'user' ? (
) : null}
{/* Right: multi-panel solver cockpit */}
{/* =============== Card burst transition =============== */}
{/* =============== ACT 2: Inside the Analysis =============== */}
Inside the Analysis
From decision to insight
{featureBlocks.map((feat) => (
{/* Text column */}
{feat.num}
{feat.title}
{feat.description}
{/* Visual column */}
{feat.visual}
))}
{/* =============== ACT 3: Conversion =============== */}
Ready to play?
Jump straight into a hand. Analysis is one click away.
{actions.map((action, i) => (
))}
{/* =============== Footer =============== */}
);
}
```
## Assistant
**Result** (success):
```
Exit code: 0
Wall time: 0.6 seconds
Total output lines: 1023
Output:
'use client';
import React, { useEffect, useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';
import { signIn, useSession } from 'next-auth/react';
import {
ChevronLeft,
ChevronRight,
SlidersHorizontal,
X,
Bookmark,
FlaskConical,
BarChart3,
TrendingUp,
ArrowRight,
Search,
Sparkles,
MessageSquare,
Target,
AlertTriangle,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { PageHeader } from '@/components/ui/page-header';
import { EmptyState } from '@/components/ui/empty-state';
import { BoardPreview } from '@/components/ui/BoardPreview';
import { CardBack, PlayingCard } from '@/components/table/PlayingCard';
import { useToast } from '@/hooks/useToast';
import { API_BASE } from '@/lib/api-base';
import { cn } from '@/lib/utils';
type HandResultFilter = 'all' | 'win' | 'loss' | 'breakeven';
type GameTypeFilter = 'all' | 'bots' | 'live';
type HandAnalysisStatus = 'waiting' | 'queued' | 'running' | 'complete' | 'failed' | null;
type SaveRequestPhase = 'saving' | 'removing' | null;
interface HandListItem {
handId: string;
playedAt: string;
roomId: string | null;
roomName: string | null;
gameType: 'bots' | 'live';
smallBlind: number;
bigBlind: number;
finalPot: number | null;
seatNo: number | null;
playerName: string | null;
netResult: number | null;
heroCards: unknown;
boardSummary: string | null;
streetReached: string | null;
isComplete: boolean;
saved: boolean;
analyzed: boolean;
analysisStatus: HandAnalysisStatus;
}
interface HandsResponse {
page: number;
pageSize: number;
total: number;
items: HandListItem[];
}
interface HandFilters {
dateFrom: string;
dateTo: string;
smallBlind: string;
bigBlind: string;
potMin: string;
potMax: string;
result: HandResultFilter;
gameType: GameTypeFilter;
saved: boolean;
analyzed: boolean;
}
interface HandActionStatusPayload {
save: {
status: 'idle' | 'pending' | 'completed' | 'failed';
errorMessage: string | null;
};
}
const DEFAULT_FILTERS: HandFilters = {
dateFrom: '',
dateTo: '',
smallBlind: '',
bigBlind: '',
potMin: '',
potMax: '',
result: 'all',
gameType: 'all',
saved: false,
analyzed: false,
};
const PAGE_SIZE = 25;
function toAnalysisStatusLabel(status: HandAnalysisStatus): string {
if (status === 'waiting') return 'Waiting';
if (status === 'queued') return 'Queued';
if (status === 'running') return 'Running';
if (status === 'complete') return 'Ready';
if (status === 'failed') return 'Failed';
return 'None';
}
function parseHeroCards(raw: unknown): Array<{ rank: string; suit: string }> | null {
const cards: Array<{ rank: string; suit: string }> = [];
const appendCardToken = (token: string) => {
const trimmed = token.trim();
if (trimmed.length < 2) return;
const rank = trimmed.slice(0, -1).toUpperCase();
const suit = trimmed.slice(-1).toLowerCase();
if (/^(10|[2-9TJQKA])$/.test(rank) && /^[hdcs]$/.test(suit)) {
cards.push({ rank, suit });
}
};
if (typeof raw === 'string') {
const matches = raw.match(/10[hdcs]|[2-9tjqka][hdcs]/gi) ?? [];
matches.forEach(appendCardToken);
return cards.length > 0 ? cards : null;
}
if (!Array.isArray(raw) || raw.length === 0) return null;
for (const card of raw) {
if (typeof card === 'string') {
appendCardToken(card);
} else if (card && typeof card === 'object') {
const c = card as { rank?: string; suit?: string };
if (typeof c.rank === 'string' && typeof c.suit === 'string') {
appendCardToken(`${c.rank}${c.suit}`);
}
}
}
return cards.length > 0 ? cards : null;
}
const streetColors: Record
= {
preflop: 'text-slate-500',
flop: 'text-sky-300',
turn: 'text-indigo-200',
river: 'text-cyan-200',
};
function NetResultBadge({ value }: { value: number | null }) {
if (typeof value !== 'number') {
return -;
}
const isWin = value > 0;
const isLoss = value < 0;
return (
{value > 0 ? '+' : ''}{value}
);
}
function StreetBadge({ street, className }: { street: string | null; className?: string }) {
const key = (street ?? 'preflop').toLowerCase();
return (
{key}
);
}
function ReviewStatusBadge({
hand,
saved,
className,
}: {
hand: HandListItem;
saved: boolean;
className?: string;
}) {
let label = 'Open';
let tone = 'text-slate-400';
if (hand.analyzed) {
label = toAnalysisStatusLabel(hand.analysisStatus);
tone =
hand.analysisStatus === 'complete'
? 'text-sky-100'
: hand.analysisStatus === 'failed'
? 'text-rose-200'
: 'text-amber-100';
} else if (saved) {
label = 'Saved';
tone = 'text-teal-100';
}
return (
{label}
);
}
function FilterInput({
label,
children,
}: {
label: string;
children: React.ReactNode;
}) {
return (
{children}
);
}
const inputClass =
'w-full rounded-lg border border-slate-400/[0.12] bg-[#0f182c]/92 px-3 py-2 text-sm text-white placeholder:text-slate-500 focus:border-sky-400/40 focus:outline-none focus:ring-1 focus:ring-sky-400/18 transition-colors';
export default function HandsPage() {
const router = useRouter();
const toast = useToast();
const { data: session, status } = useSession();
const apiToken = session?.apiToken;
const [loading, setLoading] = useState(true);
const [page, setPage] = useState(1);
const [filtersOpen, setFiltersOpen] = useState(false);
const [filters, setFilters] = useState(DEFAULT_FILTERS);
const [appliedFilters, setAppliedFilters] = useState(DEFAULT_FILTERS);
const [data, setData] = useState({
page: 1,
pageSize: PAGE_SIZE,
total: 0,
items: [],
});
const [savedStateByHandId, setSavedStateByHandId] = useState>({});
const [saveRequestPhaseByHandId, setSaveRequestPhaseByHandId] = useState>({});
const totalPages = useMemo(() => {
return Math.max(1, Math.ceil(data.total / data.pageSize));
}, [data.pageSize, data.total]);
const activeFilterCount = useMemo(() => {
let count = 0;
if (appliedFilters.dateFrom) count++;
if (appliedFilters.dateTo) count++;
if (appliedFilters.smallBlind) count++;
if (appliedFilters.bigBlind) count++;
if (appliedFilters.potMin) count++;
if (appliedFilters.potMax) count++;
if (appliedFilters.result !== 'all') count++;
if (appliedFilters.gameType !== 'all') count++;
return count;
}, [appliedFilters]);
useEffect(() => {
if (!apiToken) {
if (status !== 'loading') {
setLoading(false);
}
return;
}
void loadHands(apiToken, page, appliedFilters);
}, [apiToken, page, appliedFilters, status]);
useEffect(() => {
setSavedStateByHandId((prev) => {
const next = { ...prev };
for (const item of data.items) {
if (typeof next[item.handId] !== 'boolean') {
next[item.handId] = item.saved;
}
}
return next;
});
}, [data.items]);
const loadHands = async (token: string, targetPage: number, activeFilters: HandFilters) => {
setLoading(true);
try {
const query = new URLSearchParams();
query.set('page', String(targetPage));
query.set('pageSize', String(PAGE_SIZE));
if (activeFilters.dateFrom) query.set('dateFrom', activeFilters.dateFrom);
if (activeFilters.dateTo) query.set('dateTo', activeFilters.dateTo);
if (activeFilters.smallBlind) query.set('smallBlind', activeFilters.smallBlind);
if (activeFilters.bigBlind) query.set('bigBlind', activeFilters.bigBlind);
if (activeFilters.potMin) query.set('potMin', activeFilters.potMin);
if (activeFilters.potMax) query.set('potMax', activeFilters.potMax);
if (activeFilters.result !== 'all') query.set('result', activeFilters.result);
if (activeFilters.gameType !== 'all') query.set('gameType', activeFilters.gameType);
if (activeFilters.saved) query.set('saved', 'true');
if (activeFilters.analyzed) query.set('analyzed', 'true');
const res = await fetch(`${API_BASE}/api/hands?${query.toString()}`, {
headers: { Authorization: `Bearer ${token}` },
});
if (!res.ok) {
toast.error('Failed to load hand history');
return;
}
const payload = (await res.json()) as HandsResponse;
setData(payload);
} catch {
toast.error('Failed to load hand history');
} finally {
setLoading(false);
}
};
const applyDropdownFilters = () => {
setPage(1);
setAppliedFilters((prev) => ({
...filters,
saved: prev.saved,
analyzed: prev.analyzed,
}));
setFiltersOpen(false);
};
const clearAllFilters = () => {
setFilters(DEFAULT_FILTERS);
setAppliedFilters(DEFAULT_FILTERS);
setPage(1);
};
const toggleProminentFilter = (key: 'saved' | 'analyzed') => {
setPage(1);
setFilters((prev) => {
const next = { ...prev, [key]: !prev[key] };
setAppliedFilters((applied) => ({ ...applied, [key]: next[key] }));
return next;
});
};
const handleToggleSaved = async (hand: HandListItem) => {
if (!apiToken) {
await signIn(undefined, { callbackUrl: '/hands' });
return;
}
const currentlySaved = savedStateByHandId[hand.handId] ?? hand.saved;
const nextPhase: SaveRequestPhase = currentlySaved ? 'removing' : 'saving';
setSaveRequestPhaseByHandId((prev) => ({ ...prev, [hand.handId]: nextPhase }));
try {
const response = await fetch(`${API_BASE}/api/hand-actions`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${apiToken}`,
},
body: JSON.stringify({
type: 'SAVE',
handId: hand.handId,
...(hand.roomId ? { gameId: hand.roomId } : {}),
cancel: currentlySaved,
}),
});
const payload = (await response.json().catch(() => null)) as HandActionStatusPayload | { error?: string } | null;
if (!response.ok) {
throw new Error((payload as { error?: string } | null)?.error ?? 'Failed to update saved hand');
}
const savePayload = payload as HandActionStatusPayload;
const nextSaved = savePayload.save.status === 'pending' || savePayload.save.status === 'completed';
setSavedStateByHandId((prev) => ({ ...prev, [hand.handId]: nextSaved }));
setData((prev) => ({
...prev,
items: prev.items.map((item) =>
item.handId === hand.handId
? { ...item, saved: nextSaved }
: item,
),
}));
} catch (error) {
toast.error(error instanceof Error ? error.message : 'Failed to update saved hand');
} finally {
setSaveRequestPhaseByHandId((prev) => ({ ...prev, [hand.handId]: null }));
}
};
if (loading) {
return (
);
}
if (!apiToken) {
return (
}
headline="Sign in to review your hands"
description="Your hand history and analysis results will appear here after you sign in."
action={
}
/>
);
}
return (
{data.total}
{data.total === 1 ? 'hand' : 'hands'}
{data.items.length > 0 ? (
{data.items.filter((h) => h.analyzed).length}
analyzed this page
) : null}
}
/>
{/* 鈹€鈹€ Filter toolbar 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */}
{(activeFilterCount > 0 || filters.saved || filters.analyzed) && (
)}
{/* 鈹€鈹€ Expanded filter panel 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */}
{filtersOpen && (
{hand.smallBlind}/{hand.bigBlind}
·
{hand.gameType}
Hand
{heroCards
? heroCards.slice(0, 2).map((card, index) => (
))
: (
<>
)}
Pot
{typeof hand.finalPot === 'number' ? hand.finalPot : '-'}