Say so when the browser refuses to save

Every save goes through one try/catch, and the catch was empty:

    } catch {
        // Storage full/unavailable (private browsing, etc.) — the table still works
        // for the rest of the session, it just won't survive a refresh.
    }

The comment is accurate and the behaviour is right -- the chips have already moved in
memory and refusing to continue would be worse. What was missing is anybody being
told. Driven with setItem throwing: two saves failed, no toast, nothing on the page,
and a refresh came back to before the hand was dealt with the dealer none the wiser.

That is the same shape of fault the bank reconciliation exists for. Silent until it is
too late to act on, and the way you find out is the last two players cashing out.

Now it says so twice, in the two places that suit the two timescales.

A toast the first time, and only the first time -- a dealer taps this bar thirty times
a hand and does not need thirty warnings. Measured: four failed saves, one toast.

  "This table isn't being saved — refreshing would lose it. Keep this tab open."

And a standing line at the top of the Session panel, because a toast is a moment and
this is a fact about the rest of the night. The raise pad dismisses toasts, and the one
warning that must not be missed is not the one to leave to a toast.

  "This table isn't being saved — the browser refused. It'll keep working, but
   closing or refreshing this tab loses the session. Export CSV below keeps a copy."

Amber, like the bank check's disagreement, because both mean the same thing: your
record of the night is wrong and you can still do something about it. The export is
named because it is the thing that helps.

6 tests (255 total): a good save reports success and leaves no mark, a failing one
reports failure rather than throwing, the listener fires exactly once across twenty
failures, it is handed the error so the reason can be reported later, a failing save
still does not stop the table, and no listener at all is not an error.

Driven through the UI with setItem throwing: hidden while saving works, toast on the
first failure, zero further toasts across three more actions, the panel line present
and readable. Contrast clean, layout audit clean, no console errors.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb

JoshHeaps.Net/Pages/Casino/TexasHoldem.cshtml

@@ -103,6 +103,7 @@
             <details class="sidebarPanel">
                 <summary>Session</summary>
                 <div class="panelBody">
+                    <p id="storageWarning" class="storageWarning" hidden></p>
                     <h3 class="panelSubhead">Standings</h3>
                     <div class="standingsTableWrap">
                         <div id="standingsTable">
@@ -156,6 +157,14 @@
                 </div>
             </details>
 
+            <details class="sidebarPanel" id="keyboardPanel">
+                <summary>Keyboard</summary>
+                <div class="panelBody">
+                    <dl id="shortcutLegend" class="shortcutLegend"></dl>
+                    <p class="fieldHint">Nothing fires while you're typing in a field, or while a sheet is open over the table.</p>
+                </div>
+            </details>
+
             <details class="sidebarPanel">
                 <summary>Table Notes</summary>
                 <div class="panelBody">

JoshHeaps.Net/wwwroot/css/casino/holdem.css

@@ -1095,6 +1095,59 @@ button,
     line-height: 1.5;
 }
 
+/* Amber, like the bank check's disagreement — both are "your record of the night is
+   wrong and you can still do something about it". */
+.storageWarning {
+    margin: 0;
+    padding: 0.5rem 0.6rem;
+    border: 1px solid rgba(240, 180, 106, 0.45);
+    border-radius: 7px;
+    background: rgba(240, 180, 106, 0.08);
+    color: #f0b46a;
+    font-size: 0.76rem;
+    line-height: 1.4;
+}
+
+/* The shortcut legend. A touch device has no keys to press, so it doesn't get a panel
+   telling it about them — the same pointer question the touch-target rules ask. */
+@media (pointer: coarse) {
+    #keyboardPanel {
+        display: none;
+    }
+}
+
+.shortcutLegend {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.45rem 0.6rem;
+    margin: 0;
+    align-items: baseline;
+}
+
+.shortcutLegend dt {
+    display: flex;
+    gap: 0.2rem;
+}
+
+.shortcutLegend dd {
+    margin: 0;
+    color: #b8b8b8;
+    font-size: 0.78rem;
+    line-height: 1.35;
+}
+
+.shortcutKey {
+    background: #232323;
+    border: 1px solid #3f3f3f;
+    border-bottom-width: 2px;
+    border-radius: 4px;
+    padding: 0.05rem 0.32rem;
+    font-family: inherit;
+    font-size: 0.68rem;
+    color: #d8b46a;
+    white-space: nowrap;
+}
+
 /* One chip per ruling, wrapped across the top of the sheet. Names rather than icons:
    a dealer scanning this is looking for the words somebody at the table just said. */
 .rulingsIndex {
@@ -2117,6 +2170,20 @@ body.hasActionBar #holdemSidebar {
     font-variant-numeric: tabular-nums;
 }
 
+/* The undo pill's key, inline rather than pinned to a corner — see actionBar.js. */
+.actionUndoKey {
+    margin-left: 0.4rem;
+    padding: 0 0.25rem;
+    border-radius: 4px;
+    border: 1px solid currentColor;
+    opacity: 0.55;
+    font-family: inherit;
+    font-size: 0.6rem;
+    line-height: 1.4;
+    text-transform: uppercase;
+    pointer-events: none;
+}
+
 .actionKey {
     position: absolute;
     top: 5px;

JoshHeaps.Net/wwwroot/js/casino/holdem/actionBar.js

@@ -176,6 +176,17 @@ const ActionBar = {
             undo.className = "actionUndo";
             undo.title = `Undo ${undoLabel}`;
             undo.textContent = `↶ ${undoLabel}`;
+            // U undoes, and nothing said so — this control was the only place a dealer
+            // could have learned it, and it was the one action bar control without its
+            // key printed on it.
+            const key = document.createElement("kbd");
+            // Its own class, not .actionKey: that one pins itself to the top-right
+            // corner of a big action button, and this control is a 30px pill with
+            // overflow hidden and no positioning context — the cap escaped it and
+            // floated above the bar. Here the key belongs inline, after the label.
+            key.className = "actionUndoKey";
+            key.textContent = this.KEY_HINTS.actionUndo;
+            undo.appendChild(key);
             undo.addEventListener("click", () => this.hooks.undoLast());
             row.appendChild(undo);
         }
@@ -281,6 +292,8 @@ const ActionBar = {
         actionAdvance: "↵",
         raiseConfirm: "↵",
         raiseCancel: "esc",
+        raiseAllIn: "A",
+        actionUndo: "U",
     },
 
     button(label, className, onClick, sublabel) {
@@ -293,7 +306,10 @@ const ActionBar = {
         main.textContent = label;
         btn.appendChild(main);
 
-        const hint = this.KEY_HINTS[className];
+        // Looked up by any of the button's classes, so a button can carry a shared
+        // class for its looks and a specific one for its key — the raise pad's four
+        // quick amounts are all raiseQuickBtn, but only All-in has a key.
+        const hint = className.split(/\s+/).map(name => this.KEY_HINTS[name]).find(Boolean);
         if (hint) {
             const kbd = document.createElement("kbd");
             kbd.className = "actionKey";
@@ -397,7 +413,7 @@ const ActionBar = {
         ];
         options.forEach(option => {
             const value = Math.max(minTo, Math.min(option.value, maxTo));
-            const btn = this.button(option.label, "raiseQuickBtn", () => {
+            const btn = this.button(option.label, `raiseQuickBtn${option.label === "All-in" ? " raiseAllIn" : ""}`, () => {
                 this.raiseDraft = value;
                 this.render();
             }, Money.format(value));

JoshHeaps.Net/wwwroot/js/casino/holdem/main.js

@@ -458,6 +458,35 @@ document.addEventListener("DOMContentLoaded", () => {
     // Escape is Modal's job now, for this sheet and the five others that never had it.
     const rulingsOverlay = document.getElementById("rulingsOverlay");
     const closeRulings = () => { rulingsOverlay.hidden = true; };
+    // The one time the browser refuses to save, say so out loud as well as leaving the
+    // standing warning in the Session panel. Set before the first render so a failure
+    // during start-up is caught too.
+    HoldemState.onSaveFailed = () => {
+        Toast.show(
+            "This table isn't being saved — refreshing would lose it. Keep this tab open.",
+            { duration: 12000 });
+        Render.renderStorageWarning();
+    };
+
+    // The shortcut legend, built from the same list the handlers are keyed off, so a
+    // shortcut can't exist without a line here saying what it does.
+    const legend = document.getElementById("shortcutLegend");
+    if (legend) {
+        Shortcuts.LEGEND.forEach(entry => {
+            const term = document.createElement("dt");
+            entry.keys.forEach(key => {
+                const kbd = document.createElement("kbd");
+                kbd.className = "shortcutKey";
+                kbd.textContent = key;
+                term.appendChild(kbd);
+            });
+            const detail = document.createElement("dd");
+            detail.textContent = entry.what;
+            legend.appendChild(term);
+            legend.appendChild(detail);
+        });
+    }
+
     // An index across the top of the rulings sheet, one chip per ruling.
     //
     // This is opened mid-argument with players waiting, and it was nine rulings of

JoshHeaps.Net/wwwroot/js/casino/holdem/render.js

@@ -751,6 +751,21 @@ const Render = {
 
         this.renderBankReconciliation();
         this.renderSettleUp(standings);
+        this.renderStorageWarning();
+    },
+
+    // A toast is a moment; this table not being saved is a fact about the rest of the
+    // night. It sits at the top of the panel a dealer opens to check the money, and it
+    // stays there, because the raise pad dismisses toasts and the one time this warning
+    // matters is the one time it must not have been missed.
+    renderStorageWarning() {
+        const host = document.getElementById("storageWarning");
+        if (!host) return;
+        host.hidden = !HoldemState.saveFailed;
+        if (host.hidden) return;
+        host.textContent =
+            "This table isn't being saved — the browser refused. It'll keep working, " +
+            "but closing or refreshing this tab loses the session. Export CSV below keeps a copy.";
     },
 
     // The last step the standings stopped short of. Six signed numbers at 2am is not

JoshHeaps.Net/wwwroot/js/casino/holdem/shortcuts.js

@@ -18,6 +18,23 @@ const Shortcuts = {
         escape: "cancel",
     },
 
+    // What each one does, in a dealer's words, for the legend in the sidebar.
+    //
+    // Lives beside KEYS because the two must not drift: F, C and R are printed on the
+    // buttons they drive, but A and U were on nothing at all — a dealer who learned
+    // the first three from the bar had no way to find out the other two existed. A
+    // shortcut with no line here is a shortcut nobody can find, and there's a test
+    // that says so.
+    LEGEND: [
+        { keys: ["F"], action: "fold", what: "Fold" },
+        { keys: ["C"], action: "checkOrCall", what: "Check, or call the bet" },
+        { keys: ["R"], action: "raise", what: "Open the amount pad to bet or raise" },
+        { keys: ["A"], action: "allIn", what: "Put this player all-in" },
+        { keys: ["U"], action: "undo", what: "Take back the last action" },
+        { keys: ["Space", "Enter"], action: "advance", what: "Deal, or move to the next street" },
+        { keys: ["Esc"], action: "cancel", what: "Close the amount pad without betting" },
+    ],
+
     mount(handlers) {
         this.handlers = handlers;
         document.addEventListener("keydown", e => this.onKey(e));

JoshHeaps.Net/wwwroot/js/casino/holdem/state.js

@@ -122,12 +122,32 @@ const HoldemState = {
         }
     },
 
+    // True once a save has failed. The UI reads this to keep saying so, because a
+    // toast is a moment and this is a fact about the rest of the night.
+    saveFailed: false,
+
+    // Called the first time a save fails. Set by the UI.
+    onSaveFailed: null,
+
     save(state) {
         try {
             localStorage.setItem(this.STORAGE_KEY, JSON.stringify(state));
-        } catch {
-            // Storage full/unavailable (private browsing, etc.) — the table still works
-            // for the rest of the session, it just won't survive a refresh.
+            return true;
+        } catch (error) {
+            // Storage full, or private browsing. The table still works for the rest of
+            // the session — it just won't survive a refresh, and nothing used to say
+            // so. That is the same shape of fault the bank check exists for: silent
+            // until it is too late to do anything about it. A dealer who finds out by
+            // refreshing has lost the night's standings, and the only warning they got
+            // was the table being empty.
+            //
+            // Announced once. A dealer tapping a bar thirty times a hand does not need
+            // thirty of these.
+            if (!this.saveFailed) {
+                this.saveFailed = true;
+                if (typeof this.onSaveFailed === "function") this.onSaveFailed(error);
+            }
+            return false;
         }
     },
 

tests/holdem/saveFailure.test.js

@@ -0,0 +1,95 @@
+// What happens when the browser refuses to save.
+//
+// The table keeps working — that was always true and is still the right behaviour.
+// What was missing is anybody being told, which is the same shape of fault the bank
+// check exists for: silent until it's too late to act on.
+const test = require("node:test");
+const assert = require("node:assert");
+const { HoldemState, makeTable } = require("./load");
+
+function withStorage(behaviour) {
+    const calls = [];
+    globalThis.localStorage = {
+        setItem(key, value) {
+            calls.push({ key, value });
+            if (behaviour === "throw") {
+                const error = new Error("QuotaExceededError");
+                error.name = "QuotaExceededError";
+                throw error;
+            }
+        },
+        getItem: () => null,
+        removeItem() {},
+    };
+    return calls;
+}
+
+test.beforeEach(() => {
+    HoldemState.saveFailed = false;
+    HoldemState.onSaveFailed = null;
+});
+
+test.after(() => {
+    delete globalThis.localStorage;
+    HoldemState.saveFailed = false;
+    HoldemState.onSaveFailed = null;
+});
+
+test("a save that works says so and leaves no mark", () => {
+    withStorage("ok");
+    const state = makeTable({ seatCount: 6, seated: [0, 1], stack: 100 });
+
+    assert.equal(HoldemState.save(state), true);
+    assert.equal(HoldemState.saveFailed, false);
+});
+
+test("a save that fails says so rather than throwing", () => {
+    withStorage("throw");
+    const state = makeTable({ seatCount: 6, seated: [0, 1], stack: 100 });
+
+    assert.equal(HoldemState.save(state), false);
+    assert.equal(HoldemState.saveFailed, true);
+});
+
+test("the table is told once, not on every action", () => {
+    // A dealer taps the bar thirty times a hand and doesn't need thirty warnings.
+    withStorage("throw");
+    const state = makeTable({ seatCount: 6, seated: [0, 1], stack: 100 });
+    let told = 0;
+    HoldemState.onSaveFailed = () => { told++; };
+
+    for (let i = 0; i < 20; i++) HoldemState.save(state);
+
+    assert.equal(told, 1);
+});
+
+test("the failure is handed the error, so the reason can be reported later", () => {
+    withStorage("throw");
+    const state = makeTable({ seatCount: 6, seated: [0, 1], stack: 100 });
+    let seen = null;
+    HoldemState.onSaveFailed = error => { seen = error; };
+
+    HoldemState.save(state);
+
+    assert.equal(seen && seen.name, "QuotaExceededError");
+});
+
+test("a failing save still doesn't stop the table", () => {
+    // The chips have already moved in memory; refusing to continue would be worse
+    // than not persisting.
+    withStorage("throw");
+    const state = makeTable({ seatCount: 6, seated: [0, 1, 2], stack: 100 });
+    state.seats[0].stack = 175;
+
+    assert.doesNotThrow(() => HoldemState.save(state));
+    assert.equal(state.seats[0].stack, 175);
+});
+
+test("no listener is not an error", () => {
+    withStorage("throw");
+    const state = makeTable({ seatCount: 6, seated: [0, 1], stack: 100 });
+    HoldemState.onSaveFailed = null;
+
+    assert.doesNotThrow(() => HoldemState.save(state));
+    assert.equal(HoldemState.saveFailed, true);
+});

tests/holdem/shortcutLegend.test.js

@@ -0,0 +1,51 @@
+// The legend and the key map must not drift apart.
+//
+// F, C and R are printed on the buttons they drive. A and U were on nothing at all,
+// so a dealer who learned the first three from the action bar had no way to find out
+// the other two existed. The guard against that happening again is this file.
+const test = require("node:test");
+const assert = require("node:assert");
+const path = require("path");
+
+const Shortcuts = require(path.join(
+    __dirname, "..", "..", "JoshHeaps.Net", "wwwroot", "js", "casino", "holdem", "shortcuts.js"));
+
+test("every shortcut has a line in the legend", () => {
+    const documented = new Set(Shortcuts.LEGEND.map(entry => entry.action));
+    const missing = [...new Set(Object.values(Shortcuts.KEYS))].filter(action => !documented.has(action));
+    assert.deepEqual(missing, [], "a shortcut with no legend line is one nobody can find");
+});
+
+test("the legend doesn't describe shortcuts that don't exist", () => {
+    const real = new Set(Object.values(Shortcuts.KEYS));
+    const invented = Shortcuts.LEGEND.map(entry => entry.action).filter(action => !real.has(action));
+    assert.deepEqual(invented, []);
+});
+
+test("every legend line names its keys and says what they do", () => {
+    Shortcuts.LEGEND.forEach(entry => {
+        assert.ok(Array.isArray(entry.keys) && entry.keys.length > 0, `${entry.action} has no keys`);
+        assert.ok(entry.keys.every(key => typeof key === "string" && key.trim()), `${entry.action} has a blank key`);
+        assert.ok(entry.what && entry.what.trim().length > 3, `${entry.action} has no description`);
+    });
+});
+
+test("the keys named match the keys bound", () => {
+    // "Space" and "Enter" both drive advance; the map holds them as " " and "enter".
+    const spoken = { space: " ", enter: "enter", esc: "escape" };
+    Shortcuts.LEGEND.forEach(entry => {
+        entry.keys.forEach(label => {
+            const key = spoken[label.toLowerCase()] || label.toLowerCase();
+            assert.equal(Shortcuts.KEYS[key], entry.action,
+                `the legend says ${label} is ${entry.action}, the map disagrees`);
+        });
+    });
+});
+
+test("no two lines claim the same key", () => {
+    const seen = new Set();
+    Shortcuts.LEGEND.forEach(entry => entry.keys.forEach(key => {
+        assert.ok(!seen.has(key.toLowerCase()), `${key} is listed twice`);
+        seen.add(key.toLowerCase());
+    }));
+});