feat: hand-history reconstruction + replayable table viewer
Brian's idea: vomit rough shorthand, Lyra rebuilds it into a structured,
replayable hand history.
- poker.parse_hand(): focused LLM pass turning shorthand into a canonical hand
JSON (positions, stacks, hero cards, chronological actions w/ board reveals,
result); store_hand_history() persists JSON + extracted flat fields;
record_hand() = parse+store; standalone hands attach to a 'Hand Reviews' session
- poker_hands gains a `structured` JSON column (ALTER-migrated for existing DBs)
- record_hand tool wired into chat: "log this hand: ..." -> reconstructed + a
/hand/{id} link
- web: GET /hand/{id} viewer + /hand/{id}/data — a felt table with seats placed
around the oval (hero at bottom), hole cards, progressive board reveal, and
prev/next/end step-through of the action with running pot
- tests: store/get roundtrip, record_hand tool (stubbed parse)
Verified live: parsed a real AKs hand (BTN, 14 actions, full board) end to end.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
+10
-1
@@ -18,7 +18,7 @@ from fastapi import FastAPI, Request
|
||||
from fastapi.responses import FileResponse, StreamingResponse
|
||||
from fastapi.staticfiles import StaticFiles
|
||||
|
||||
from lyra import chat, logbus, memory, self_state, summary
|
||||
from lyra import chat, logbus, memory, poker, self_state, summary
|
||||
from lyra.llm import Backend
|
||||
|
||||
|
||||
@@ -141,6 +141,15 @@ def create_app() -> FastAPI:
|
||||
async def journal_data(limit: int = 300) -> dict:
|
||||
return {"entries": memory.list_journal(limit=limit)}
|
||||
|
||||
@app.get("/hand/{hand_id}")
|
||||
async def hand_page(hand_id: int) -> FileResponse:
|
||||
"""Replayable hand-history viewer."""
|
||||
return FileResponse(str(_STATIC / "hand.html"))
|
||||
|
||||
@app.get("/hand/{hand_id}/data")
|
||||
async def hand_data(hand_id: int) -> dict:
|
||||
return poker.get_hand(hand_id) or {}
|
||||
|
||||
@app.get("/stream/logs")
|
||||
async def stream_logs(request: Request) -> StreamingResponse:
|
||||
"""Live activity feed: replay the recent buffer, then stream new events."""
|
||||
|
||||
@@ -0,0 +1,222 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<meta name="theme-color" content="#0b0d12" />
|
||||
<title>Lyra — Hand</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg:#0b0d12; --bg-elev:#141821; --border:#232936; --text:#e6e9ef;
|
||||
--fade:#8b93a7; --accent:#7aa2ff; --felt:#16322a; --feltline:#0f5132;
|
||||
--chip:#ffcf6b; --hero:#7aa2ff;
|
||||
}
|
||||
*{box-sizing:border-box;}
|
||||
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
|
||||
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%;}
|
||||
header{position:sticky;top:0;z-index:10;background:var(--bg-elev);border-bottom:1px solid var(--border);
|
||||
padding:env(safe-area-inset-top) 14px 0;}
|
||||
.topbar{display:flex;align-items:baseline;gap:10px;padding:12px 0;flex-wrap:wrap;}
|
||||
.topbar h1{font-size:1.02rem;margin:0;font-weight:600;}
|
||||
.topbar a.back{color:var(--accent);text-decoration:none;font-size:.92rem;}
|
||||
.sub{color:var(--fade);font-size:.85rem;margin-left:auto;}
|
||||
main{max-width:760px;margin:0 auto;padding:14px;}
|
||||
|
||||
.table-wrap{position:relative;width:100%;max-width:560px;margin:8px auto;aspect-ratio:1.45/1;}
|
||||
.felt{position:absolute;inset:8%;background:radial-gradient(ellipse at center,#1c4a3c,var(--felt));
|
||||
border:6px solid #25201a;border-radius:50%/50%;box-shadow:inset 0 0 40px rgba(0,0,0,.5);}
|
||||
.center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:80%;}
|
||||
.board{display:flex;gap:5px;justify-content:center;min-height:46px;align-items:center;flex-wrap:wrap;}
|
||||
.pot{margin-top:8px;color:var(--chip);font-size:.85rem;font-variant-numeric:tabular-nums;}
|
||||
.street{color:var(--fade);font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;}
|
||||
|
||||
.card{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
|
||||
width:32px;height:44px;background:#f4f4f0;color:#111;border-radius:5px;font-weight:700;
|
||||
box-shadow:0 1px 3px rgba(0,0,0,.4);line-height:1;}
|
||||
.card.sm{width:26px;height:36px;font-size:.8rem;}
|
||||
.card .r{font-size:1rem;}
|
||||
.card.red{color:#c8102e;}
|
||||
.card.back{background:#2a3550;color:#2a3550;}
|
||||
|
||||
.seat{position:absolute;transform:translate(-50%,-50%);width:96px;text-align:center;
|
||||
background:rgba(13,16,22,.85);border:1px solid var(--border);border-radius:10px;padding:5px 4px;}
|
||||
.seat.hero{border-color:var(--hero);box-shadow:0 0 10px rgba(122,162,255,.4);}
|
||||
.seat.acting{border-color:var(--chip);box-shadow:0 0 12px rgba(255,207,107,.6);}
|
||||
.seat .pos{font-size:.66rem;color:var(--accent);font-weight:700;letter-spacing:.4px;}
|
||||
.seat .nm{font-size:.66rem;color:var(--fade);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||||
.seat .cards{display:flex;gap:3px;justify-content:center;margin:3px 0;}
|
||||
.seat .stack{font-size:.66rem;color:var(--text);font-variant-numeric:tabular-nums;}
|
||||
.seat .act{font-size:.62rem;color:var(--chip);min-height:.8em;}
|
||||
.seat.folded{opacity:.4;}
|
||||
|
||||
.controls{display:flex;gap:8px;align-items:center;justify-content:center;margin:14px 0 6px;}
|
||||
.controls button{background:#1b2333;border:1px solid var(--border);color:var(--text);
|
||||
border-radius:8px;padding:8px 14px;font-size:.95rem;cursor:pointer;-webkit-tap-highlight-color:transparent;}
|
||||
.controls button:disabled{opacity:.4;}
|
||||
.step-label{color:var(--fade);font-size:.8rem;min-width:80px;text-align:center;}
|
||||
.now{text-align:center;color:var(--text);font-size:.95rem;min-height:1.3em;margin-bottom:6px;}
|
||||
|
||||
.log{margin-top:14px;border-top:1px solid var(--border);padding-top:10px;}
|
||||
.log .ln{padding:5px 8px;border-radius:6px;font-size:.9rem;display:flex;gap:8px;}
|
||||
.log .ln.cur{background:#1b2333;}
|
||||
.log .ln.brd{color:var(--fade);font-style:italic;}
|
||||
.log .st{color:var(--fade);font-size:.72rem;width:54px;flex:none;text-transform:uppercase;}
|
||||
.summary{margin-top:14px;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:12px;}
|
||||
.summary .lbl{color:var(--fade);font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;}
|
||||
.err{color:#ff6b6b;text-align:center;padding:40px;}
|
||||
.net-pos{color:#5ad1a0;} .net-neg{color:#ff6b6b;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="topbar">
|
||||
<h1>🃏 Hand</h1>
|
||||
<a class="back" href="/">← Chat</a>
|
||||
<span class="sub" id="sub"></span>
|
||||
</div>
|
||||
</header>
|
||||
<main id="root"><p class="err" id="boot">Loading hand…</p></main>
|
||||
|
||||
<script>
|
||||
const SUIT = {s:"♠", h:"♥", d:"♦", c:"♣"};
|
||||
const RED = new Set(["h", "d"]);
|
||||
function esc(s){const d=document.createElement('div');d.textContent=s==null?'':String(s);return d.innerHTML;}
|
||||
|
||||
function cardEl(code, sm){
|
||||
if(!code) return '';
|
||||
const m = String(code).trim().match(/^(10|[2-9TJQKA])\s*([shdc])$/i);
|
||||
if(!m) return `<span class="card${sm?' sm':''}">${esc(code)}</span>`;
|
||||
const r = m[1].toUpperCase().replace('10','T'); const s = m[2].toLowerCase();
|
||||
return `<span class="card${sm?' sm':''}${RED.has(s)?' red':''}"><span class="r">${r}</span><span>${SUIT[s]}</span></span>`;
|
||||
}
|
||||
const cards = (arr, sm) => (arr||[]).map(c=>cardEl(c,sm)).join('');
|
||||
|
||||
function render(h){
|
||||
const sub = document.getElementById('sub');
|
||||
const data = h.structured;
|
||||
if(!data){ document.getElementById('root').innerHTML = '<p class="err">This hand has no structured data to replay.</p>'; return; }
|
||||
|
||||
const players = (data.players||[]).slice();
|
||||
// order so hero sits at the bottom
|
||||
let heroIdx = players.findIndex(p => p.pos === data.hero_pos);
|
||||
if(heroIdx < 0) heroIdx = 0;
|
||||
const ordered = players.slice(heroIdx).concat(players.slice(0, heroIdx));
|
||||
const n = Math.max(ordered.length, 1);
|
||||
|
||||
const acts = data.actions || [];
|
||||
let step = 0; // number of actions applied
|
||||
|
||||
sub.textContent = [data.stakes, data.game].filter(Boolean).join(' ');
|
||||
|
||||
const root = document.getElementById('root');
|
||||
root.innerHTML = `
|
||||
<div class="table-wrap" id="tw">
|
||||
<div class="felt"></div>
|
||||
<div class="center">
|
||||
<div class="street" id="street"></div>
|
||||
<div class="board" id="board"></div>
|
||||
<div class="pot" id="pot"></div>
|
||||
</div>
|
||||
<div id="seats"></div>
|
||||
</div>
|
||||
<div class="now" id="now"></div>
|
||||
<div class="controls">
|
||||
<button id="prev">◀ Prev</button>
|
||||
<span class="step-label" id="steplab"></span>
|
||||
<button id="next">Next ▶</button>
|
||||
<button id="all">End</button>
|
||||
</div>
|
||||
<div class="log" id="log"></div>
|
||||
${data.result ? `<div class="summary"><div class="lbl">Result</div>
|
||||
<div>${esc(data.result.summary||'')}</div>
|
||||
${data.result.hero_net!=null ? `<div class="${data.result.hero_net>=0?'net-pos':'net-neg'}">Hero net: ${data.result.hero_net>=0?'+':''}${esc(data.result.hero_net)}</div>`:''}
|
||||
</div>`:''}
|
||||
`;
|
||||
|
||||
// place seats around the oval
|
||||
const seatsEl = document.getElementById('seats');
|
||||
ordered.forEach((p,i)=>{
|
||||
const ang = (90 + i*(360/n)) * Math.PI/180; // bottom = 90deg
|
||||
const x = 50 + 46*Math.cos(ang), y = 50 + 44*Math.sin(ang);
|
||||
const el = document.createElement('div');
|
||||
el.className = 'seat' + (p.pos===data.hero_pos?' hero':'');
|
||||
el.style.left = x+'%'; el.style.top = y+'%';
|
||||
el.dataset.pos = p.pos;
|
||||
const hcards = (p.pos===data.hero_pos ? (p.cards||data.hero_cards) : p.cards);
|
||||
el.innerHTML = `<div class="pos">${esc(p.pos||'')}</div>`
|
||||
+ (p.name?`<div class="nm">${esc(p.name)}</div>`:'')
|
||||
+ `<div class="cards">${hcards?cards(hcards,true):'<span class="card sm back">x</span><span class="card sm back">x</span>'}</div>`
|
||||
+ (p.stack!=null?`<div class="stack">${esc(p.stack)}</div>`:'')
|
||||
+ `<div class="act" data-act></div>`;
|
||||
seatsEl.appendChild(el);
|
||||
});
|
||||
|
||||
const boardEl=document.getElementById('board'), potEl=document.getElementById('pot'),
|
||||
streetEl=document.getElementById('street'), nowEl=document.getElementById('now'),
|
||||
logEl=document.getElementById('log'), steplab=document.getElementById('steplab');
|
||||
|
||||
// build the log
|
||||
logEl.innerHTML = acts.map((a,idx)=>{
|
||||
if(a.board) return `<div class="ln brd" data-i="${idx}"><span class="st">${esc(a.street)}</span>${cards(a.board,true)}</div>`;
|
||||
const amt = a.amount!=null ? ' '+a.amount : '';
|
||||
return `<div class="ln" data-i="${idx}"><span class="st">${esc(a.street||'')}</span>${esc(a.pos||'')} ${esc(a.action||'')}${amt}</div>`;
|
||||
}).join('');
|
||||
|
||||
function draw(){
|
||||
let pot = 0, board = [], street = 'Preflop';
|
||||
const lastAct = {}, folded = {};
|
||||
for(let i=0;i<step;i++){
|
||||
const a = acts[i];
|
||||
if(a.board){ board = a.board; street = a.street; continue; }
|
||||
if(a.street) street = a.street;
|
||||
if(a.amount!=null && ['call','bet','raise','allin','post'].includes(a.action)) pot += Number(a.amount)||0;
|
||||
if(a.pos){ lastAct[a.pos] = (a.action||'') + (a.amount!=null?' '+a.amount:''); }
|
||||
if(a.action==='fold' && a.pos) folded[a.pos]=true;
|
||||
}
|
||||
boardEl.innerHTML = cards(board);
|
||||
potEl.textContent = pot ? ('Pot ~'+pot) : '';
|
||||
streetEl.textContent = street;
|
||||
document.querySelectorAll('.seat').forEach(s=>{
|
||||
const pos=s.dataset.pos;
|
||||
s.querySelector('[data-act]').textContent = lastAct[pos]||'';
|
||||
s.classList.toggle('folded', !!folded[pos]);
|
||||
s.classList.remove('acting');
|
||||
});
|
||||
const cur = acts[step-1];
|
||||
if(cur && cur.pos){
|
||||
const s = [...document.querySelectorAll('.seat')].find(x=>x.dataset.pos===cur.pos);
|
||||
if(s) s.classList.add('acting');
|
||||
}
|
||||
nowEl.innerHTML = step===0 ? 'Cards dealt — preflop.'
|
||||
: (cur.board ? `${cur.street[0].toUpperCase()+cur.street.slice(1)}: ${cards(cur.board,true)}`
|
||||
: `${esc(cur.pos||'')} ${esc(cur.action||'')}${cur.amount!=null?' '+cur.amount:''}`);
|
||||
steplab.textContent = `${step} / ${acts.length}`;
|
||||
document.getElementById('prev').disabled = step===0;
|
||||
document.getElementById('next').disabled = step>=acts.length;
|
||||
logEl.querySelectorAll('.ln').forEach(l=>l.classList.toggle('cur', Number(l.dataset.i)===step-1));
|
||||
const curln = logEl.querySelector('.ln.cur'); if(curln) curln.scrollIntoView({block:'nearest'});
|
||||
}
|
||||
document.getElementById('prev').onclick=()=>{if(step>0){step--;draw();}};
|
||||
document.getElementById('next').onclick=()=>{if(step<acts.length){step++;draw();}};
|
||||
document.getElementById('all').onclick=()=>{step=acts.length;draw();};
|
||||
document.addEventListener('keydown',e=>{
|
||||
if(e.key==='ArrowRight'){if(step<acts.length){step++;draw();}}
|
||||
if(e.key==='ArrowLeft'){if(step>0){step--;draw();}}
|
||||
});
|
||||
logEl.querySelectorAll('.ln').forEach(l=>l.onclick=()=>{step=Number(l.dataset.i)+1;draw();});
|
||||
draw();
|
||||
}
|
||||
|
||||
async function load(){
|
||||
const id = location.pathname.split('/')[2];
|
||||
try{
|
||||
const r = await fetch(`/hand/${id}/data`,{cache:'no-store'});
|
||||
const h = await r.json();
|
||||
if(!h || !h.id){ document.getElementById('root').innerHTML='<p class="err">Hand not found.</p>'; return; }
|
||||
render(h);
|
||||
}catch(e){ document.getElementById('root').innerHTML='<p class="err">Couldn\'t load the hand.</p>'; }
|
||||
}
|
||||
load();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user