pokertools-arena 0.4.4 → 0.4.8

package/README.md

@@ -17,7 +17,7 @@
 | **Package** | `npx pokertools-arena` |
 | **Runtime** | Node.js ≥ 24 for tooling; any modern browser for the app |
 
-> **Current release: 0.4.4.** A maintenance release on top of the 0.4.0 methodology work: modal tooltips float above overflow, the launcher starts exactly once when its default port is busy, real-API diagnostics skip cleanly when repository secrets are absent, the Decision sanity suite attributes results to the correct model, seat editors show the model-derived name, close buttons use centered SVG icons, and decision logs no longer repeat the typed-decision caption.
+> **Current release: 0.4.8.** A maintenance release on top of the 0.4.0 methodology work: modal tooltips float above overflow, the launcher starts exactly once when its default port is busy, real-API diagnostics skip cleanly when repository secrets are absent, the Decision sanity suite attributes results to the correct model, seat editors show the model-derived name, close buttons use centered SVG icons, decision logs no longer repeat the typed-decision caption, Stop immediately freezes the clock and table effects, seat cards clear their last action at the start of each hand, pots fly back to winners at showdown, and the header, table chrome and small-screen board cards are more compact.
 
 ---
 

package/dist/app.js

@@ -115700,6 +115700,16 @@ function showActionToast(text, type = "") {
 function seatEl(playerId) {
   return $(`.seat[data-player-id="${CSS.escape(String(playerId))}"]`, els.seatsLayer);
 }
+function stopTableEffects() {
+  clearTimeout(showActionToast.timer);
+  els.actionToast?.classList.add("hidden");
+  els.pokerTable?.classList.remove("action-message-visible");
+  els.fxLayer?.replaceChildren();
+  for (const el of $$(".seat.fold-flash, .seat.check-flash")) {
+    el.classList.remove("fold-flash");
+    el.classList.remove("check-flash");
+  }
+}
 function animateNewHand(s) {
   if (!animationsAllowed()) return;
   requestAnimationFrame(() => {
@@ -115727,12 +115737,18 @@ function animateBoardCards(previousCount, currentCount) {
 }
 function processVisualEffects(s) {
   const events = s?.events || [];
+  const previous = lastVisualState;
+  if (["STOPPED", "ERROR"].includes(s?.status)) {
+    if (events.length) lastProcessedEventId = events.at(-1).id;
+    lastVisualState = s;
+    stopTableEffects();
+    return;
+  }
   if (!animationsAllowed()) {
     if (events.length) lastProcessedEventId = events.at(-1).id;
     lastVisualState = s;
     return;
   }
-  const previous = lastVisualState;
   if (s?.table && (!previous?.table || s.table.handNumber !== previous.table.handNumber)) animateNewHand(s);
   const prevBoard = previous?.table?.board?.length || 0, nextBoard = s?.table?.board?.length || 0;
   if (s?.table?.handNumber === previous?.table?.handNumber) animateBoardCards(prevBoard, nextBoard);
@@ -115758,12 +115774,14 @@ function processVisualEffects(s) {
       }
       showActionToast(`${displayModelName(e.configuredModel || e.resolvedModel || e.playerName)} \xB7 ${e.action?.description || type}`, type);
     }
-    if (e.type === "HAND_END" && previous?.table) {
-      const before = new Map((previous.table.players || []).filter(Boolean).map((p) => [p.id, Number(p.stack || 0)]));
-      const winners = (s?.table?.players || []).filter((p) => p && Number(p.stack || 0) > (before.get(p.id) ?? Number(p.stack || 0)));
+    if (e.type === "HAND_END") {
+      const before = new Map((previous?.table?.players || []).filter(Boolean).map((p) => [p.id, Number(p.stack || 0)]));
+      const payloadIds = (e.winners || []).map((w) => w?.playerId ?? w?.id ?? w).filter(Boolean);
+      const fromStacks = (s?.table?.players || []).filter((p) => p && Number(p.stack || 0) > (before.get(p.id) ?? Number(p.stack || 0))).map((p) => p.id);
+      const winnerIds = [.../* @__PURE__ */ new Set([...payloadIds, ...fromStacks])];
       const pot = $(".hud-pot", document);
-      winners.forEach((p, i) => setTimeout(() => flyChips(pot, seatEl(p.id), 5, true), i * 130));
-      if (winners.length) playTableSound("winner");
+      winnerIds.forEach((playerId, i) => setTimeout(() => flyChips(pot, seatEl(playerId), 5, true), i * 130));
+      if (winnerIds.length) playTableSound("winner");
     }
     if (e.type === "TOURNAMENT_END") playTableSound("winner");
   }
@@ -116321,6 +116339,7 @@ var TournamentDirector = class {
     await this.waitIfPaused();
     this.pruneBustedSeats();
     this.handNumber++;
+    for (const stat of Object.values(this.stats)) stat.lastAction = null;
     this.handStartStacks = Object.fromEntries((this.engine?.state?.players ?? []).filter(Boolean).map((p) => [p.id, playerStack(p)]));
     try {
       this.engine.deal();
@@ -117160,7 +117179,7 @@ function renderStatus(s) {
   els.pauseBtn.classList.toggle("hidden", !running);
   els.stopBtn.classList.toggle("hidden", !running);
   els.startTopBtn.classList.toggle("hidden", running);
-  els.seatsBtn.classList.toggle("hidden", running);
+  els.seatsBtn.classList.toggle("hidden", running || !["STOPPED", "FINISHED", "ERROR"].includes(status));
   els.setupBtn.disabled = running;
   els.testsBtn.disabled = running;
   const pauseLabel = $(".action-label", els.pauseBtn);
@@ -117353,6 +117372,10 @@ function championBadgeHtml() {
   return '<span class="champion-badge" role="img" aria-label="Tournament champion"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6.6 2.6h10.8v4.7a5.4 5.4 0 0 1-10.8 0V2.6Z"/><path d="M10.7 12.4h2.6V15h-2.6z"/><path d="M7.2 15h9.6v2.1H7.2z"/><path d="M5.6 18.2h12.8v2.3H5.6z"/></svg></span>';
 }
 function renderDecision(s) {
+  if (["STOPPED", "ERROR"].includes(s?.status)) {
+    stopClock();
+    return;
+  }
   const d = s?.currentDecision;
   const last = latestDecisionEvent(s);
   const shouldShowCard = Boolean(d || last || seatAssignments.filter(Boolean).length);
@@ -118269,15 +118292,19 @@ els.pauseBtn.addEventListener("click", () => {
   if (!director) return;
   currentState?.status === "PAUSED" ? director.resume() : director.pause();
 });
-els.stopBtn.addEventListener("click", () => director?.stop());
+els.stopBtn.addEventListener("click", () => {
+  if (!director) return;
+  stopClock();
+  stopTableEffects();
+  director.stop();
+});
 els.exportBtn.addEventListener("click", () => {
   if (!director?.events?.length) return;
   downloadText(`${director.config?.id || "pokertools-arena"}.jsonl`, director.exportJsonl());
 });
 els.seatsBtn.addEventListener("click", () => {
   if (director && ["RUNNING", "PAUSED"].includes(director.status)) return;
-  lobbyVisible = true;
-  render(currentState || { status: "IDLE", events: [] });
+  void startConfiguredTournament();
 });
 els.seatsLayer.addEventListener("click", (event) => {
   const seat = event.target.closest("[data-lobby-seat]");

package/dist/index.html

@@ -64,17 +64,14 @@
           <div class="brand-title">pokertools-arena</div>
         </div>
       </div>
+      <a id="repoLink" class="repo-link" href="https://github.com/pokertools-arena/pokertools-arena.github.io" target="_blank" rel="noopener noreferrer" title="View source on GitHub" aria-label="View source on GitHub"><svg class="repo-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg></a>
       <div class="topbar-actions">
         <button id="startTopBtn" class="button primary top-action" type="button" title="Start tournament"><span class="action-icon">▶</span><span class="action-label">Start</span></button>
-        <button id="seatsBtn" class="button ghost top-action" type="button" title="Edit seats"><span class="action-icon">♟</span><span class="action-label">Seats</span></button>
-        <button id="setupBtn" class="button ghost top-action" type="button" title="Connections and tournament settings"><span class="action-icon">⚙</span><span class="action-label">Settings</span></button>
-        <button id="testsBtn" class="button ghost top-action" type="button" title="Run the 10-spot decision sanity suite"><span class="action-icon">◇</span><span class="action-label">Tests</span></button>
-        <button id="soundBtn" class="button ghost top-action sound-button" type="button" aria-pressed="false" title="Enable table sounds"><span class="action-icon">♪</span><span class="action-label">Sound</span></button>
-        <button id="recordBtn" class="button ghost top-action record-button" type="button" aria-pressed="false" title="Record only the poker table"><span class="action-icon">●</span><span class="action-label">Record</span></button>
-        <button id="exportBtn" class="button ghost top-action" type="button" disabled title="Export tournament log"><span class="action-icon">↓</span><span class="action-label">Log</span></button>
+        <button id="seatsBtn" class="button ghost top-action hidden" type="button" title="Restart with a new tournament"><span class="action-icon">↻</span><span class="action-label">Restart</span></button>
         <button id="pauseBtn" class="button ghost top-action hidden" type="button"><span class="action-icon">Ⅱ</span><span class="action-label">Pause</span></button>
         <button id="stopBtn" class="button danger top-action hidden" type="button"><span class="action-icon">■</span><span class="action-label">Stop</span></button>
-        <a id="repoLink" class="button ghost top-action repo-action" href="https://github.com/pokertools-arena/pokertools-arena.github.io" target="_blank" rel="noopener noreferrer" title="View source on GitHub" aria-label="View source on GitHub"><svg class="action-icon repo-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg><span class="action-label">GitHub</span></a>
+        <button id="testsBtn" class="button ghost top-action" type="button" title="Run the 10-spot decision sanity suite"><span class="action-icon">◇</span><span class="action-label">Tests</span></button>
+        <button id="setupBtn" class="button ghost top-action icon-only-action" type="button" title="Connections and tournament settings" aria-label="Settings"><span class="action-icon">⚙</span><span class="action-label">Settings</span></button>
       </div>
     </header>
 
@@ -83,6 +80,10 @@
         <div class="arena-head">
           <div class="arena-status"><span id="statusDot" class="status-dot"></span><span id="statusLabel">IDLE</span></div>
           <div id="tournamentMeta" class="mono muted">Seat 2–10 models, then press Start</div>
+          <div class="arena-head-actions">
+            <button id="soundBtn" class="arena-icon-button sound-button" type="button" aria-pressed="false" title="Enable table sounds" aria-label="Enable table sounds"><span class="action-icon">♪</span></button>
+            <button id="recordBtn" class="arena-icon-button record-button" type="button" aria-pressed="false" title="Record only the poker table" aria-label="Record only the poker table"><span class="action-icon">●</span></button>
+          </div>
         </div>
 
         <div id="winnerBanner" class="winner-banner hidden" role="status" aria-live="polite"></div>
@@ -137,7 +138,12 @@
           <section class="panel-block"><div class="panel-title">Recent decisions</div><div id="decisionFeed" class="decision-feed"></div></section>
         </div>
 
-        <div id="tab-log" class="tab-panel"><section class="panel-block grow"><div class="panel-title">Tournament events</div><div id="eventLog" class="event-log mono"></div></section></div>
+        <div id="tab-log" class="tab-panel">
+          <section class="panel-block grow">
+            <div class="panel-title-row"><div class="panel-title">Tournament events</div><button id="exportBtn" class="button ghost small-button" type="button" disabled title="Download the tournament log as JSONL"><span class="action-icon">↓</span><span class="action-label">Download</span></button></div>
+            <div id="eventLog" class="event-log mono"></div>
+          </section>
+        </div>
         <div id="tab-stats" class="tab-panel"><section class="panel-block grow"><div class="panel-title">Models</div><div id="statsGrid" class="stats-grid"></div></section></div>
       </aside>
     </main>

package/dist/pokertools-arena.html

@@ -2344,6 +2344,67 @@ a.button{text-decoration:none}
 /* 0.4.0 — methodology, reproducibility and repository-organization release.
    Browser application source moved under src/; visual behavior is unchanged. */
 
+/* 0.4.8 — compact header, table-card parity, quieter chrome.
+
+   Header: brand left, a backgroundless GitHub mark, then actions right. The
+   board uses the same rank-plus-center-suit card language as the hole cards on
+   small screens instead of the crowded duplicated corners. */
+.topbar{flex-wrap:nowrap}
+.brandbar{flex:0 1 auto}
+.repo-link{display:inline-grid;place-items:center;width:26px;height:26px;margin-left:6px;border:0;border-radius:7px;background:none;color:var(--muted);flex:0 0 auto;transition:color .15s ease,opacity .15s ease}
+.repo-link .repo-icon{width:17px;height:17px;opacity:.9}
+.repo-link:hover{color:var(--text)}
+.repo-link:hover .repo-icon{opacity:1}
+.topbar-actions{margin-left:auto;flex:0 1 auto}
+/* Settings is an icon-only control: no label, no wasted width. */
+.icon-only-action{padding:0;width:30px;min-width:30px;justify-content:center}
+.icon-only-action .action-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
+
+/* Sound and recording live with the table status they affect. */
+.arena-head{gap:10px}
+.arena-head-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto;margin-left:auto}
+.arena-icon-button{display:inline-grid;place-items:center;width:24px;height:24px;min-width:24px;padding:0;border:1px solid var(--modal-border,rgba(232,238,243,.09));border-radius:7px;background:rgba(255,255,255,.02);color:#8d98a2;font-size:10px;cursor:pointer;transition:color .14s ease,border-color .14s ease,background .14s ease}
+.arena-icon-button:hover{color:#d8e0e5;border-color:rgba(146,201,164,.3)}
+.arena-icon-button.active{color:var(--accent);border-color:rgba(114,185,138,.35);background:rgba(114,185,138,.08)}
+.arena-icon-button.record-button.active{color:var(--danger);border-color:rgba(200,94,105,.4);background:rgba(200,94,105,.1)}
+.arena-icon-button:disabled{opacity:.42;cursor:not-allowed}
+.arena-head-actions .action-icon{font-size:10px;opacity:1}
+
+/* Download lives inside the Log tab it produces. */
+.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
+.panel-title-row .panel-title{margin-bottom:0}
+.panel-title-row .button{flex:0 0 auto}
+
+/* The bank clock leads the right-hand clock block instead of trailing it. */
+.clock-wrap{align-items:flex-start;text-align:left}
+#bankClock{order:-1;color:var(--muted);font-size:9px;line-height:1.2}
+
+/* Board cards: rank + big centre suit, no duplicated corners. This is the
+   default at small widths and every compact/tight/micro density, so table and
+   hole cards read the same way. */
+@media(max-width:720px){
+  .board .card .card-corner.bottom,
+  .poker-table[data-density="compact"] .board .card .card-corner.bottom,
+  .poker-table[data-density="tight"] .board .card .card-corner.bottom{display:none!important}
+  .board .card .card-corner i,
+  .poker-table[data-density="compact"] .board .card .card-corner i,
+  .poker-table[data-density="tight"] .board .card .card-corner i{display:none!important}
+  .board .card .card-corner,
+  .poker-table[data-density="compact"] .board .card .card-corner,
+  .poker-table[data-density="tight"] .board .card .card-corner{left:3px!important;top:3px!important;line-height:1!important}
+  .board .card .card-corner b,
+  .poker-table[data-density="compact"] .board .card .card-corner b,
+  .poker-table[data-density="tight"] .board .card .card-corner b{font-size:10px!important}
+  .board .card .card-suit,
+  .poker-table[data-density="compact"] .board .card .card-suit,
+  .poker-table[data-density="tight"] .board .card .card-suit{font-size:17px!important}
+}
+.poker-table[data-density="tight"] .board .card .card-suit{font-size:16px!important}
+.poker-table[data-density="micro"] .board .card .card-corner i,
+.poker-table[data-density="micro"] .board .card .card-corner.bottom{display:none!important}
+.poker-table[data-density="micro"] .board .card .card-suit{font-size:13px!important}
+
+
 </style>
 </head>
 <body>
@@ -2355,17 +2416,14 @@ a.button{text-decoration:none}
           <div class="brand-title">pokertools-arena</div>
         </div>
       </div>
+      <a id="repoLink" class="repo-link" href="https://github.com/pokertools-arena/pokertools-arena.github.io" target="_blank" rel="noopener noreferrer" title="View source on GitHub" aria-label="View source on GitHub"><svg class="repo-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg></a>
       <div class="topbar-actions">
         <button id="startTopBtn" class="button primary top-action" type="button" title="Start tournament"><span class="action-icon">▶</span><span class="action-label">Start</span></button>
-        <button id="seatsBtn" class="button ghost top-action" type="button" title="Edit seats"><span class="action-icon">♟</span><span class="action-label">Seats</span></button>
-        <button id="setupBtn" class="button ghost top-action" type="button" title="Connections and tournament settings"><span class="action-icon">⚙</span><span class="action-label">Settings</span></button>
-        <button id="testsBtn" class="button ghost top-action" type="button" title="Run the 10-spot decision sanity suite"><span class="action-icon">◇</span><span class="action-label">Tests</span></button>
-        <button id="soundBtn" class="button ghost top-action sound-button" type="button" aria-pressed="false" title="Enable table sounds"><span class="action-icon">♪</span><span class="action-label">Sound</span></button>
-        <button id="recordBtn" class="button ghost top-action record-button" type="button" aria-pressed="false" title="Record only the poker table"><span class="action-icon">●</span><span class="action-label">Record</span></button>
-        <button id="exportBtn" class="button ghost top-action" type="button" disabled title="Export tournament log"><span class="action-icon">↓</span><span class="action-label">Log</span></button>
+        <button id="seatsBtn" class="button ghost top-action hidden" type="button" title="Restart with a new tournament"><span class="action-icon">↻</span><span class="action-label">Restart</span></button>
         <button id="pauseBtn" class="button ghost top-action hidden" type="button"><span class="action-icon">Ⅱ</span><span class="action-label">Pause</span></button>
         <button id="stopBtn" class="button danger top-action hidden" type="button"><span class="action-icon">■</span><span class="action-label">Stop</span></button>
-        <a id="repoLink" class="button ghost top-action repo-action" href="https://github.com/pokertools-arena/pokertools-arena.github.io" target="_blank" rel="noopener noreferrer" title="View source on GitHub" aria-label="View source on GitHub"><svg class="action-icon repo-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg><span class="action-label">GitHub</span></a>
+        <button id="testsBtn" class="button ghost top-action" type="button" title="Run the 10-spot decision sanity suite"><span class="action-icon">◇</span><span class="action-label">Tests</span></button>
+        <button id="setupBtn" class="button ghost top-action icon-only-action" type="button" title="Connections and tournament settings" aria-label="Settings"><span class="action-icon">⚙</span><span class="action-label">Settings</span></button>
       </div>
     </header>
 
@@ -2374,6 +2432,10 @@ a.button{text-decoration:none}
         <div class="arena-head">
           <div class="arena-status"><span id="statusDot" class="status-dot"></span><span id="statusLabel">IDLE</span></div>
           <div id="tournamentMeta" class="mono muted">Seat 2–10 models, then press Start</div>
+          <div class="arena-head-actions">
+            <button id="soundBtn" class="arena-icon-button sound-button" type="button" aria-pressed="false" title="Enable table sounds" aria-label="Enable table sounds"><span class="action-icon">♪</span></button>
+            <button id="recordBtn" class="arena-icon-button record-button" type="button" aria-pressed="false" title="Record only the poker table" aria-label="Record only the poker table"><span class="action-icon">●</span></button>
+          </div>
         </div>
 
         <div id="winnerBanner" class="winner-banner hidden" role="status" aria-live="polite"></div>
@@ -2428,7 +2490,12 @@ a.button{text-decoration:none}
           <section class="panel-block"><div class="panel-title">Recent decisions</div><div id="decisionFeed" class="decision-feed"></div></section>
         </div>
 
-        <div id="tab-log" class="tab-panel"><section class="panel-block grow"><div class="panel-title">Tournament events</div><div id="eventLog" class="event-log mono"></div></section></div>
+        <div id="tab-log" class="tab-panel">
+          <section class="panel-block grow">
+            <div class="panel-title-row"><div class="panel-title">Tournament events</div><button id="exportBtn" class="button ghost small-button" type="button" disabled title="Download the tournament log as JSONL"><span class="action-icon">↓</span><span class="action-label">Download</span></button></div>
+            <div id="eventLog" class="event-log mono"></div>
+          </section>
+        </div>
         <div id="tab-stats" class="tab-panel"><section class="panel-block grow"><div class="panel-title">Models</div><div id="statsGrid" class="stats-grid"></div></section></div>
       </aside>
     </main>
@@ -118375,6 +118442,16 @@ function showActionToast(text, type = "") {
 function seatEl(playerId) {
   return $(`.seat[data-player-id="${CSS.escape(String(playerId))}"]`, els.seatsLayer);
 }
+function stopTableEffects() {
+  clearTimeout(showActionToast.timer);
+  els.actionToast?.classList.add("hidden");
+  els.pokerTable?.classList.remove("action-message-visible");
+  els.fxLayer?.replaceChildren();
+  for (const el of $$(".seat.fold-flash, .seat.check-flash")) {
+    el.classList.remove("fold-flash");
+    el.classList.remove("check-flash");
+  }
+}
 function animateNewHand(s) {
   if (!animationsAllowed()) return;
   requestAnimationFrame(() => {
@@ -118402,12 +118479,18 @@ function animateBoardCards(previousCount, currentCount) {
 }
 function processVisualEffects(s) {
   const events = s?.events || [];
+  const previous = lastVisualState;
+  if (["STOPPED", "ERROR"].includes(s?.status)) {
+    if (events.length) lastProcessedEventId = events.at(-1).id;
+    lastVisualState = s;
+    stopTableEffects();
+    return;
+  }
   if (!animationsAllowed()) {
     if (events.length) lastProcessedEventId = events.at(-1).id;
     lastVisualState = s;
     return;
   }
-  const previous = lastVisualState;
   if (s?.table && (!previous?.table || s.table.handNumber !== previous.table.handNumber)) animateNewHand(s);
   const prevBoard = previous?.table?.board?.length || 0, nextBoard = s?.table?.board?.length || 0;
   if (s?.table?.handNumber === previous?.table?.handNumber) animateBoardCards(prevBoard, nextBoard);
@@ -118433,12 +118516,14 @@ function processVisualEffects(s) {
       }
       showActionToast(`${displayModelName(e.configuredModel || e.resolvedModel || e.playerName)} \xB7 ${e.action?.description || type}`, type);
     }
-    if (e.type === "HAND_END" && previous?.table) {
-      const before = new Map((previous.table.players || []).filter(Boolean).map((p) => [p.id, Number(p.stack || 0)]));
-      const winners = (s?.table?.players || []).filter((p) => p && Number(p.stack || 0) > (before.get(p.id) ?? Number(p.stack || 0)));
+    if (e.type === "HAND_END") {
+      const before = new Map((previous?.table?.players || []).filter(Boolean).map((p) => [p.id, Number(p.stack || 0)]));
+      const payloadIds = (e.winners || []).map((w) => w?.playerId ?? w?.id ?? w).filter(Boolean);
+      const fromStacks = (s?.table?.players || []).filter((p) => p && Number(p.stack || 0) > (before.get(p.id) ?? Number(p.stack || 0))).map((p) => p.id);
+      const winnerIds = [.../* @__PURE__ */ new Set([...payloadIds, ...fromStacks])];
       const pot = $(".hud-pot", document);
-      winners.forEach((p, i) => setTimeout(() => flyChips(pot, seatEl(p.id), 5, true), i * 130));
-      if (winners.length) playTableSound("winner");
+      winnerIds.forEach((playerId, i) => setTimeout(() => flyChips(pot, seatEl(playerId), 5, true), i * 130));
+      if (winnerIds.length) playTableSound("winner");
     }
     if (e.type === "TOURNAMENT_END") playTableSound("winner");
   }
@@ -118996,6 +119081,7 @@ var TournamentDirector = class {
     await this.waitIfPaused();
     this.pruneBustedSeats();
     this.handNumber++;
+    for (const stat of Object.values(this.stats)) stat.lastAction = null;
     this.handStartStacks = Object.fromEntries((this.engine?.state?.players ?? []).filter(Boolean).map((p) => [p.id, playerStack(p)]));
     try {
       this.engine.deal();
@@ -119835,7 +119921,7 @@ function renderStatus(s) {
   els.pauseBtn.classList.toggle("hidden", !running);
   els.stopBtn.classList.toggle("hidden", !running);
   els.startTopBtn.classList.toggle("hidden", running);
-  els.seatsBtn.classList.toggle("hidden", running);
+  els.seatsBtn.classList.toggle("hidden", running || !["STOPPED", "FINISHED", "ERROR"].includes(status));
   els.setupBtn.disabled = running;
   els.testsBtn.disabled = running;
   const pauseLabel = $(".action-label", els.pauseBtn);
@@ -120028,6 +120114,10 @@ function championBadgeHtml() {
   return '<span class="champion-badge" role="img" aria-label="Tournament champion"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6.6 2.6h10.8v4.7a5.4 5.4 0 0 1-10.8 0V2.6Z"/><path d="M10.7 12.4h2.6V15h-2.6z"/><path d="M7.2 15h9.6v2.1H7.2z"/><path d="M5.6 18.2h12.8v2.3H5.6z"/></svg></span>';
 }
 function renderDecision(s) {
+  if (["STOPPED", "ERROR"].includes(s?.status)) {
+    stopClock();
+    return;
+  }
   const d = s?.currentDecision;
   const last = latestDecisionEvent(s);
   const shouldShowCard = Boolean(d || last || seatAssignments.filter(Boolean).length);
@@ -120944,15 +121034,19 @@ els.pauseBtn.addEventListener("click", () => {
   if (!director) return;
   currentState?.status === "PAUSED" ? director.resume() : director.pause();
 });
-els.stopBtn.addEventListener("click", () => director?.stop());
+els.stopBtn.addEventListener("click", () => {
+  if (!director) return;
+  stopClock();
+  stopTableEffects();
+  director.stop();
+});
 els.exportBtn.addEventListener("click", () => {
   if (!director?.events?.length) return;
   downloadText(`${director.config?.id || "pokertools-arena"}.jsonl`, director.exportJsonl());
 });
 els.seatsBtn.addEventListener("click", () => {
   if (director && ["RUNNING", "PAUSED"].includes(director.status)) return;
-  lobbyVisible = true;
-  render(currentState || { status: "IDLE", events: [] });
+  void startConfiguredTournament();
 });
 els.seatsLayer.addEventListener("click", (event) => {
   const seat = event.target.closest("[data-lobby-seat]");

package/dist/styles.css

@@ -2287,3 +2287,64 @@ a.button{text-decoration:none}
 
 /* 0.4.0 — methodology, reproducibility and repository-organization release.
    Browser application source moved under src/; visual behavior is unchanged. */
+
+/* 0.4.8 — compact header, table-card parity, quieter chrome.
+
+   Header: brand left, a backgroundless GitHub mark, then actions right. The
+   board uses the same rank-plus-center-suit card language as the hole cards on
+   small screens instead of the crowded duplicated corners. */
+.topbar{flex-wrap:nowrap}
+.brandbar{flex:0 1 auto}
+.repo-link{display:inline-grid;place-items:center;width:26px;height:26px;margin-left:6px;border:0;border-radius:7px;background:none;color:var(--muted);flex:0 0 auto;transition:color .15s ease,opacity .15s ease}
+.repo-link .repo-icon{width:17px;height:17px;opacity:.9}
+.repo-link:hover{color:var(--text)}
+.repo-link:hover .repo-icon{opacity:1}
+.topbar-actions{margin-left:auto;flex:0 1 auto}
+/* Settings is an icon-only control: no label, no wasted width. */
+.icon-only-action{padding:0;width:30px;min-width:30px;justify-content:center}
+.icon-only-action .action-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
+
+/* Sound and recording live with the table status they affect. */
+.arena-head{gap:10px}
+.arena-head-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto;margin-left:auto}
+.arena-icon-button{display:inline-grid;place-items:center;width:24px;height:24px;min-width:24px;padding:0;border:1px solid var(--modal-border,rgba(232,238,243,.09));border-radius:7px;background:rgba(255,255,255,.02);color:#8d98a2;font-size:10px;cursor:pointer;transition:color .14s ease,border-color .14s ease,background .14s ease}
+.arena-icon-button:hover{color:#d8e0e5;border-color:rgba(146,201,164,.3)}
+.arena-icon-button.active{color:var(--accent);border-color:rgba(114,185,138,.35);background:rgba(114,185,138,.08)}
+.arena-icon-button.record-button.active{color:var(--danger);border-color:rgba(200,94,105,.4);background:rgba(200,94,105,.1)}
+.arena-icon-button:disabled{opacity:.42;cursor:not-allowed}
+.arena-head-actions .action-icon{font-size:10px;opacity:1}
+
+/* Download lives inside the Log tab it produces. */
+.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
+.panel-title-row .panel-title{margin-bottom:0}
+.panel-title-row .button{flex:0 0 auto}
+
+/* The bank clock leads the right-hand clock block instead of trailing it. */
+.clock-wrap{align-items:flex-start;text-align:left}
+#bankClock{order:-1;color:var(--muted);font-size:9px;line-height:1.2}
+
+/* Board cards: rank + big centre suit, no duplicated corners. This is the
+   default at small widths and every compact/tight/micro density, so table and
+   hole cards read the same way. */
+@media(max-width:720px){
+  .board .card .card-corner.bottom,
+  .poker-table[data-density="compact"] .board .card .card-corner.bottom,
+  .poker-table[data-density="tight"] .board .card .card-corner.bottom{display:none!important}
+  .board .card .card-corner i,
+  .poker-table[data-density="compact"] .board .card .card-corner i,
+  .poker-table[data-density="tight"] .board .card .card-corner i{display:none!important}
+  .board .card .card-corner,
+  .poker-table[data-density="compact"] .board .card .card-corner,
+  .poker-table[data-density="tight"] .board .card .card-corner{left:3px!important;top:3px!important;line-height:1!important}
+  .board .card .card-corner b,
+  .poker-table[data-density="compact"] .board .card .card-corner b,
+  .poker-table[data-density="tight"] .board .card .card-corner b{font-size:10px!important}
+  .board .card .card-suit,
+  .poker-table[data-density="compact"] .board .card .card-suit,
+  .poker-table[data-density="tight"] .board .card .card-suit{font-size:17px!important}
+}
+.poker-table[data-density="tight"] .board .card .card-suit{font-size:16px!important}
+.poker-table[data-density="micro"] .board .card .card-corner i,
+.poker-table[data-density="micro"] .board .card .card-corner.bottom{display:none!important}
+.poker-table[data-density="micro"] .board .card .card-suit{font-size:13px!important}
+

package/docs/diagnostics/SUMMARY.md

@@ -1,4 +1,4 @@
-# pokertools-arena 0.4.4 — benchmark methodology & results
+# pokertools-arena 0.4.8 — benchmark methodology & results
 
 Generated: 2026-09-19T18:19:58.352Z
 Methodology: paired fixed-state corpus; deterministic interleaving with recorded experiment seed.

package/docs/diagnostics/summary.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "version": "0.4.4",
+  "version": "0.4.8",
   "generatedAt": "2026-09-19T18:19:58.352Z",
   "experiments": [
     "paired"

package/docs/releases/RELEASE_NOTES.md

@@ -1,5 +1,46 @@
 # Release notes
 
+## 0.4.8 — Maintenance
+
+- **Compact header.** Left: the logo, `pokertools-arena`, and a backgroundless
+  GitHub mark. Right: Start / Restart / Pause / Stop, Tests, and an icon-only
+  Settings control. The `♟ Seats` button became **Restart**, shown only after a
+  run has started and stopped or finished.
+- **Sound and recording** moved into the table header (`arena-head`) beside the
+  status they affect; **log download** moved into the `Log` tab that produces it.
+- **Bank clock** now leads the right-hand clock block instead of trailing it.
+- **Board cards on small screens** use the same rank-plus-center-suit language as
+  the hole cards: the duplicated bottom-right corner and inline suit glyph are
+  dropped at narrow widths and at compact/tight/micro densities.
+
+## 0.4.7 — Maintenance
+
+- **Pot pays out to the winner.** The pot→winner chip animation never fired.
+  `processVisualEffects` read `lastVisualState` *after* `animateNewHand` and
+  `animateBoardCards` had already advanced it, so at a hand boundary the
+  `HAND_END` stack diff compared a state against itself and matched no winners.
+  The previous state is now snapshotted before any helper runs, and the payout
+  is driven by the `HAND_END` winner payload (with the stack diff as fallback),
+  so chips fly from the pot to every winner and the win sound plays.
+
+## 0.4.6 — Maintenance
+
+- **Seat cards clear their last action each hand.** `stats.lastAction` was only
+  ever written, never reset, so every player card kept showing the previous
+  hand's action into the next deal. `startHand` now clears the last action for
+  every seat. Eliminations still display, because they are derived from the
+  elimination list at render time rather than stored as `lastAction`.
+
+## 0.4.5 — Maintenance
+
+- **Stop now freezes the display.** Stopping a tournament clears the decision
+  clock and cancels every table effect still in flight (chip flies, action
+  toast, fold/check flashes and their pending timers). Previously the turn ring
+  and clock kept counting and queued animations finished after the run had
+  stopped, because the last broadcast still carried `currentDecision` and the
+  effects queue was never drained. `renderDecision` and `processVisualEffects`
+  now hard-stop on `STOPPED`/`ERROR`.
+
 ## 0.4.4 — Maintenance
 
 - **Cleaner decision logs.** Removed the repeated spectator caption ("This

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pokertools-arena",
-  "version": "0.4.4",
+  "version": "0.4.8",
   "description": "Browser-first AI poker benchmark powered by @pokertools/engine with generic OpenAI-compatible endpoints, optional OpenRouter/Jev Decisions routing, deterministic hierarchical decisions, paired fixed-state methodology, and reproducible reporting.",
   "type": "module",
   "bin": {

package/src/app.js

@@ -142,6 +142,17 @@ function showActionToast(text, type = '') {
   }, 1550);
 }
 function seatEl(playerId) { return $(`.seat[data-player-id="${CSS.escape(String(playerId))}"]`, els.seatsLayer); }
+// Cancel every effect the table may still have in flight: chip flies, toast,
+// fold/check flashes and their pending timeouts. Called when a run stops so the
+// display freezes instead of finishing queued animations.
+function stopTableEffects() {
+  clearTimeout(showActionToast.timer);
+  els.actionToast?.classList.add('hidden');
+  els.pokerTable?.classList.remove('action-message-visible');
+  els.fxLayer?.replaceChildren();
+  for (const el of $$('.seat.fold-flash, .seat.check-flash'))
+    { el.classList.remove('fold-flash'); el.classList.remove('check-flash'); }
+}
 function animateNewHand(s) {
   if (!animationsAllowed()) return;
   requestAnimationFrame(() => {
@@ -169,12 +180,25 @@ function animateBoardCards(previousCount, currentCount) {
 }
 function processVisualEffects(s) {
   const events = s?.events || [];
+  // Snapshot the previous state BEFORE any helper runs. animateNewHand and
+  // animateBoardCards advance lastVisualState internally, so reading it later
+  // made the HAND_END winner diff compare a state against itself and the
+  // pot→winner payout animation never fired.
+  const previous = lastVisualState;
+  // Once a run is stopped (or errored) no further effects may be scheduled.
+  // Without this, already-live chip flies, flashes and sounds continued after
+  // Stop, and an in-flight broadcast could replay the last decision's effects.
+  if (['STOPPED', 'ERROR'].includes(s?.status)) {
+    if (events.length) lastProcessedEventId = events.at(-1).id;
+    lastVisualState = s;
+    stopTableEffects();
+    return;
+  }
   if (!animationsAllowed()) {
     if (events.length) lastProcessedEventId = events.at(-1).id;
     lastVisualState = s;
     return;
   }
-  const previous = lastVisualState;
   if (s?.table && (!previous?.table || s.table.handNumber !== previous.table.handNumber)) animateNewHand(s);
   const prevBoard = previous?.table?.board?.length || 0, nextBoard = s?.table?.board?.length || 0;
   if (s?.table?.handNumber === previous?.table?.handNumber) animateBoardCards(prevBoard, nextBoard);
@@ -190,11 +214,19 @@ function processVisualEffects(s) {
       if (type === ACTION.CHECK && seat) { seat.classList.add('check-flash'); setTimeout(() => seat.classList.remove('check-flash'), 500); playTableSound('check'); }
       showActionToast(`${displayModelName(e.configuredModel || e.resolvedModel || e.playerName)} · ${e.action?.description || type}`, type);
     }
-    if (e.type === 'HAND_END' && previous?.table) {
-      const before = new Map((previous.table.players || []).filter(Boolean).map(p => [p.id, Number(p.stack || 0)]));
-      const winners = (s?.table?.players || []).filter(p => p && Number(p.stack || 0) > (before.get(p.id) ?? Number(p.stack || 0)));
-      const pot = $('.hud-pot', document); winners.forEach((p, i) => setTimeout(() => flyChips(pot, seatEl(p.id), 5, true), i * 130));
-      if (winners.length) playTableSound('winner');
+    if (e.type === 'HAND_END') {
+      // Prefer the event payload: `previous` can be missing on a resumed or
+      // re-rendered state, so the stack diff is only a fallback. Chips fly back
+      // from the pot to every winner at showdown, and the hand is announced.
+      const before = new Map((previous?.table?.players || []).filter(Boolean).map(p => [p.id, Number(p.stack || 0)]));
+      const payloadIds = (e.winners || []).map(w => w?.playerId ?? w?.id ?? w).filter(Boolean);
+      const fromStacks = (s?.table?.players || [])
+        .filter(p => p && Number(p.stack || 0) > (before.get(p.id) ?? Number(p.stack || 0)))
+        .map(p => p.id);
+      const winnerIds = [...new Set([...payloadIds, ...fromStacks])];
+      const pot = $('.hud-pot', document);
+      winnerIds.forEach((playerId, i) => setTimeout(() => flyChips(pot, seatEl(playerId), 5, true), i * 130));
+      if (winnerIds.length) playTableSound('winner');
     }
     if (e.type === 'TOURNAMENT_END') playTableSound('winner');
   }
@@ -622,6 +654,10 @@ class TournamentDirector {
   }
   async startHand() {
     await this.waitIfPaused(); this.pruneBustedSeats(); this.handNumber++;
+    // A new hand clears every seat's "last action" so a card never shows what a
+    // player did in the previous hand. Elimination stamps are presentation-only
+    // and are applied in renderTable, so they survive this reset.
+    for (const stat of Object.values(this.stats)) stat.lastAction = null;
     this.handStartStacks = Object.fromEntries((this.engine?.state?.players ?? []).filter(Boolean).map(p => [p.id, playerStack(p)]));
     try { this.engine.deal(); }
     catch {
@@ -1364,7 +1400,9 @@ function renderStatus(s) {
   els.pauseBtn.classList.toggle('hidden', !running);
   els.stopBtn.classList.toggle('hidden', !running);
   els.startTopBtn.classList.toggle('hidden', running);
-  els.seatsBtn.classList.toggle('hidden', running);
+  // Restart is offered only after a run has actually started and stopped or
+  // finished; before the first Start the primary action is Start itself.
+  els.seatsBtn.classList.toggle('hidden', running || !['STOPPED', 'FINISHED', 'ERROR'].includes(status));
   els.setupBtn.disabled = running;
   els.testsBtn.disabled = running;
   const pauseLabel = $('.action-label', els.pauseBtn);
@@ -1569,6 +1607,9 @@ function championBadgeHtml() {
     + '</svg></span>';
 }
 function renderDecision(s) {
+  // A stopped/errored run must not keep a live clock. stop() clears
+  // currentDecision, but the last broadcast can still carry it, so guard here.
+  if (['STOPPED', 'ERROR'].includes(s?.status)) { stopClock(); return; }
   const d = s?.currentDecision;
   const last = latestDecisionEvent(s);
   const shouldShowCard = Boolean(d || last || seatAssignments.filter(Boolean).length);
@@ -2326,12 +2367,17 @@ els.setupBtn.addEventListener('click', openSetup);
 els.closeSetup.addEventListener('click', () => els.setupDialog.close());
 els.addConnectionBtn.addEventListener('click', () => addConnectionRow({ name: `API ${els.connectionsEditor.children.length + 1}`, kind: 'openai', baseUrl: 'https://api.openai.com/v1' }));
 els.pauseBtn.addEventListener('click', () => { if (!director) return; currentState?.status === 'PAUSED' ? director.resume() : director.pause(); });
-els.stopBtn.addEventListener('click', () => director?.stop());
+els.stopBtn.addEventListener('click', () => {
+  if (!director) return;
+  stopClock(); stopTableEffects();
+  director.stop();
+});
 els.exportBtn.addEventListener('click', () => { if (!director?.events?.length) return; downloadText(`${director.config?.id || 'pokertools-arena'}.jsonl`, director.exportJsonl()); });
 els.seatsBtn.addEventListener('click', () => {
+  // This button only appears once a run has stopped or finished, where it
+  // restarts the tournament from the current seats.
   if (director && ['RUNNING', 'PAUSED'].includes(director.status)) return;
-  lobbyVisible = true;
-  render(currentState || { status: 'IDLE', events: [] });
+  void startConfiguredTournament();
 });
 els.seatsLayer.addEventListener('click', event => {
   const seat = event.target.closest('[data-lobby-seat]');

package/src/index.html

@@ -64,17 +64,14 @@
           <div class="brand-title">pokertools-arena</div>
         </div>
       </div>
+      <a id="repoLink" class="repo-link" href="https://github.com/pokertools-arena/pokertools-arena.github.io" target="_blank" rel="noopener noreferrer" title="View source on GitHub" aria-label="View source on GitHub"><svg class="repo-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg></a>
       <div class="topbar-actions">
         <button id="startTopBtn" class="button primary top-action" type="button" title="Start tournament"><span class="action-icon">▶</span><span class="action-label">Start</span></button>
-        <button id="seatsBtn" class="button ghost top-action" type="button" title="Edit seats"><span class="action-icon">♟</span><span class="action-label">Seats</span></button>
-        <button id="setupBtn" class="button ghost top-action" type="button" title="Connections and tournament settings"><span class="action-icon">⚙</span><span class="action-label">Settings</span></button>
-        <button id="testsBtn" class="button ghost top-action" type="button" title="Run the 10-spot decision sanity suite"><span class="action-icon">◇</span><span class="action-label">Tests</span></button>
-        <button id="soundBtn" class="button ghost top-action sound-button" type="button" aria-pressed="false" title="Enable table sounds"><span class="action-icon">♪</span><span class="action-label">Sound</span></button>
-        <button id="recordBtn" class="button ghost top-action record-button" type="button" aria-pressed="false" title="Record only the poker table"><span class="action-icon">●</span><span class="action-label">Record</span></button>
-        <button id="exportBtn" class="button ghost top-action" type="button" disabled title="Export tournament log"><span class="action-icon">↓</span><span class="action-label">Log</span></button>
+        <button id="seatsBtn" class="button ghost top-action hidden" type="button" title="Restart with a new tournament"><span class="action-icon">↻</span><span class="action-label">Restart</span></button>
         <button id="pauseBtn" class="button ghost top-action hidden" type="button"><span class="action-icon">Ⅱ</span><span class="action-label">Pause</span></button>
         <button id="stopBtn" class="button danger top-action hidden" type="button"><span class="action-icon">■</span><span class="action-label">Stop</span></button>
-        <a id="repoLink" class="button ghost top-action repo-action" href="https://github.com/pokertools-arena/pokertools-arena.github.io" target="_blank" rel="noopener noreferrer" title="View source on GitHub" aria-label="View source on GitHub"><svg class="action-icon repo-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg><span class="action-label">GitHub</span></a>
+        <button id="testsBtn" class="button ghost top-action" type="button" title="Run the 10-spot decision sanity suite"><span class="action-icon">◇</span><span class="action-label">Tests</span></button>
+        <button id="setupBtn" class="button ghost top-action icon-only-action" type="button" title="Connections and tournament settings" aria-label="Settings"><span class="action-icon">⚙</span><span class="action-label">Settings</span></button>
       </div>
     </header>
 
@@ -83,6 +80,10 @@
         <div class="arena-head">
           <div class="arena-status"><span id="statusDot" class="status-dot"></span><span id="statusLabel">IDLE</span></div>
           <div id="tournamentMeta" class="mono muted">Seat 2–10 models, then press Start</div>
+          <div class="arena-head-actions">
+            <button id="soundBtn" class="arena-icon-button sound-button" type="button" aria-pressed="false" title="Enable table sounds" aria-label="Enable table sounds"><span class="action-icon">♪</span></button>
+            <button id="recordBtn" class="arena-icon-button record-button" type="button" aria-pressed="false" title="Record only the poker table" aria-label="Record only the poker table"><span class="action-icon">●</span></button>
+          </div>
         </div>
 
         <div id="winnerBanner" class="winner-banner hidden" role="status" aria-live="polite"></div>
@@ -137,7 +138,12 @@
           <section class="panel-block"><div class="panel-title">Recent decisions</div><div id="decisionFeed" class="decision-feed"></div></section>
         </div>
 
-        <div id="tab-log" class="tab-panel"><section class="panel-block grow"><div class="panel-title">Tournament events</div><div id="eventLog" class="event-log mono"></div></section></div>
+        <div id="tab-log" class="tab-panel">
+          <section class="panel-block grow">
+            <div class="panel-title-row"><div class="panel-title">Tournament events</div><button id="exportBtn" class="button ghost small-button" type="button" disabled title="Download the tournament log as JSONL"><span class="action-icon">↓</span><span class="action-label">Download</span></button></div>
+            <div id="eventLog" class="event-log mono"></div>
+          </section>
+        </div>
         <div id="tab-stats" class="tab-panel"><section class="panel-block grow"><div class="panel-title">Models</div><div id="statsGrid" class="stats-grid"></div></section></div>
       </aside>
     </main>

package/src/styles.css

@@ -2287,3 +2287,64 @@ a.button{text-decoration:none}
 
 /* 0.4.0 — methodology, reproducibility and repository-organization release.
    Browser application source moved under src/; visual behavior is unchanged. */
+
+/* 0.4.8 — compact header, table-card parity, quieter chrome.
+
+   Header: brand left, a backgroundless GitHub mark, then actions right. The
+   board uses the same rank-plus-center-suit card language as the hole cards on
+   small screens instead of the crowded duplicated corners. */
+.topbar{flex-wrap:nowrap}
+.brandbar{flex:0 1 auto}
+.repo-link{display:inline-grid;place-items:center;width:26px;height:26px;margin-left:6px;border:0;border-radius:7px;background:none;color:var(--muted);flex:0 0 auto;transition:color .15s ease,opacity .15s ease}
+.repo-link .repo-icon{width:17px;height:17px;opacity:.9}
+.repo-link:hover{color:var(--text)}
+.repo-link:hover .repo-icon{opacity:1}
+.topbar-actions{margin-left:auto;flex:0 1 auto}
+/* Settings is an icon-only control: no label, no wasted width. */
+.icon-only-action{padding:0;width:30px;min-width:30px;justify-content:center}
+.icon-only-action .action-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
+
+/* Sound and recording live with the table status they affect. */
+.arena-head{gap:10px}
+.arena-head-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto;margin-left:auto}
+.arena-icon-button{display:inline-grid;place-items:center;width:24px;height:24px;min-width:24px;padding:0;border:1px solid var(--modal-border,rgba(232,238,243,.09));border-radius:7px;background:rgba(255,255,255,.02);color:#8d98a2;font-size:10px;cursor:pointer;transition:color .14s ease,border-color .14s ease,background .14s ease}
+.arena-icon-button:hover{color:#d8e0e5;border-color:rgba(146,201,164,.3)}
+.arena-icon-button.active{color:var(--accent);border-color:rgba(114,185,138,.35);background:rgba(114,185,138,.08)}
+.arena-icon-button.record-button.active{color:var(--danger);border-color:rgba(200,94,105,.4);background:rgba(200,94,105,.1)}
+.arena-icon-button:disabled{opacity:.42;cursor:not-allowed}
+.arena-head-actions .action-icon{font-size:10px;opacity:1}
+
+/* Download lives inside the Log tab it produces. */
+.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
+.panel-title-row .panel-title{margin-bottom:0}
+.panel-title-row .button{flex:0 0 auto}
+
+/* The bank clock leads the right-hand clock block instead of trailing it. */
+.clock-wrap{align-items:flex-start;text-align:left}
+#bankClock{order:-1;color:var(--muted);font-size:9px;line-height:1.2}
+
+/* Board cards: rank + big centre suit, no duplicated corners. This is the
+   default at small widths and every compact/tight/micro density, so table and
+   hole cards read the same way. */
+@media(max-width:720px){
+  .board .card .card-corner.bottom,
+  .poker-table[data-density="compact"] .board .card .card-corner.bottom,
+  .poker-table[data-density="tight"] .board .card .card-corner.bottom{display:none!important}
+  .board .card .card-corner i,
+  .poker-table[data-density="compact"] .board .card .card-corner i,
+  .poker-table[data-density="tight"] .board .card .card-corner i{display:none!important}
+  .board .card .card-corner,
+  .poker-table[data-density="compact"] .board .card .card-corner,
+  .poker-table[data-density="tight"] .board .card .card-corner{left:3px!important;top:3px!important;line-height:1!important}
+  .board .card .card-corner b,
+  .poker-table[data-density="compact"] .board .card .card-corner b,
+  .poker-table[data-density="tight"] .board .card .card-corner b{font-size:10px!important}
+  .board .card .card-suit,
+  .poker-table[data-density="compact"] .board .card .card-suit,
+  .poker-table[data-density="tight"] .board .card .card-suit{font-size:17px!important}
+}
+.poker-table[data-density="tight"] .board .card .card-suit{font-size:16px!important}
+.poker-table[data-density="micro"] .board .card .card-corner i,
+.poker-table[data-density="micro"] .board .card .card-corner.bottom{display:none!important}
+.poker-table[data-density="micro"] .board .card .card-suit{font-size:13px!important}
+