V1.9.0: full monster stat blocks, and cash ($)

- "+ Add Monster" takes the whole stat block: challenge rating, speed, the
  six ability scores, special trait and notes, as well as name, AC, HP,
  attack and damage. Damage can name its type ("1d6+2 necrotic").
- Monsters can be edited: "Edit" on a row opens the same form filled in.
  Copies already in encounters show the new stat block.
- The monster list shows each full stat block, the library picker shows
  speed and ability scores too, and removing a monster asks first.
- Characters have a fourth balance, cash ($), for crossover worlds. It is
  gained, spent, given and awarded like a coin, but it has no worth in
  coins: it is never exchanged or used to make change.
- `npm test` in the backend runs again (the script pointed at a jest path
  that does not exist in the workspace).
- All packages at version 1.9.0.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "1.8.1",
+  "version": "1.9.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/api/queries.ts

@@ -537,6 +537,20 @@ export function useCreateMonster(campaignId: string) {
   });
 }
 
+// Changes a monster's stat block. Encounters read it live, so copies already
+// in a scene show the new numbers (their HP stays as it was).
+export function useUpdateMonster(campaignId: string) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ id, ...data }: { id: string } & Partial<Omit<Monster, 'id' | 'campaignId'>>) =>
+      (await apiClient.patch<{ monster: Monster }>(`/campaigns/${campaignId}/monsters/${id}`, data)).data.monster,
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['campaign', campaignId, 'monsters'] });
+      qc.invalidateQueries({ queryKey: ['encounter'] });
+    },
+  });
+}
+
 export function useDeleteMonster(campaignId: string) {
   const qc = useQueryClient();
   return useMutation({

frontend/src/api/types.ts

@@ -108,7 +108,9 @@ export interface CampaignMemberSummary {
 }
 
 // The coins a character carries. 1 gold = 10 silver = 100 copper.
-export type Currency = 'GOLD' | 'SILVER' | 'COPPER';
+export type Coin = 'GOLD' | 'SILVER' | 'COPPER';
+// Coins, plus cash ($): modern money for crossover worlds, with no worth in coins.
+export type Currency = Coin | 'CASH';
 
 // Where a character stands at 0 HP. UP: on their feet. DYING: rolling death
 // saves, three of either kind settles it. STABLE: at 0 HP but no longer
@@ -135,10 +137,11 @@ export interface CharacterSummary {
   currentHp: number;
   tempHp: number;
   deathSaves: DeathSaves;
-  // The purse; all three are null for another player's character.
+  // The purse; all four are null for another player's character.
   gold: number | null;
   silver: number | null;
   copper: number | null;
+  cash: number | null;
   maxHp: number | null;
   armorClass: number | null;
   currentLocationId: string | null;
@@ -303,6 +306,7 @@ export interface CharacterDetail {
   gold: number | null;
   silver: number | null;
   copper: number | null;
+  cash: number | null;
   // True when this is another player's character: no gold, inventory or
   // location is sent, only what the party can see across the table.
   restricted: boolean;

frontend/src/lib/format.ts

@@ -1,4 +1,4 @@
-import type { Currency } from '../api/types';
+import type { Coin, Currency } from '../api/types';
 
 export const SPECIES_LABELS: Record<string, string> = {
   HUMAN: 'Human',
@@ -73,25 +73,34 @@ export function hpBarClass(current: number, max: number): string {
 }
 
 // Coins. Silver is worth 0.1 gold and copper 0.01 gold.
-export const CURRENCIES: Currency[] = ['GOLD', 'SILVER', 'COPPER'];
-export const COIN_LABELS: Record<Currency, string> = { GOLD: 'Gold', SILVER: 'Silver', COPPER: 'Copper' };
-export const COIN_SHORT: Record<Currency, string> = { GOLD: 'gp', SILVER: 'sp', COPPER: 'cp' };
-export const COIN_FIELD: Record<Currency, 'gold' | 'silver' | 'copper'> = { GOLD: 'gold', SILVER: 'silver', COPPER: 'copper' };
+export const COINS: Coin[] = ['GOLD', 'SILVER', 'COPPER'];
+// Everything a purse can hold: the coins, plus cash ($) for crossover worlds.
+// Cash has no worth in coins, so it is never exchanged or used to make change.
+export const CURRENCIES: Currency[] = [...COINS, 'CASH'];
+export const COIN_LABELS: Record<Currency, string> = { GOLD: 'Gold', SILVER: 'Silver', COPPER: 'Copper', CASH: 'Cash ($)' };
+export const COIN_FIELD: Record<Currency, 'gold' | 'silver' | 'copper' | 'cash'> = { GOLD: 'gold', SILVER: 'silver', COPPER: 'copper', CASH: 'cash' };
 // What one coin is worth, counted in copper.
-export const COIN_VALUE: Record<Currency, number> = { GOLD: 100, SILVER: 10, COPPER: 1 };
+export const COIN_VALUE: Record<Coin, number> = { GOLD: 100, SILVER: 10, COPPER: 1 };
+const COIN_SHORT: Record<Coin, string> = { GOLD: 'gp', SILVER: 'sp', COPPER: 'cp' };
 
-type Purse = { gold: number | null; silver: number | null; copper: number | null };
+// "12 gp", "5 sp", "$40". With `long`, coins are spelled out: "12 gold".
+export function formatMoney(amount: number, currency: Currency, long = false): string {
+  if (currency === 'CASH') return `$${amount}`;
+  return `${amount} ${long ? COIN_LABELS[currency].toLowerCase() : COIN_SHORT[currency]}`;
+}
 
-// "12 gp · 5 sp · 3 cp". Gold always shows; silver and copper only when held.
+type Purse = { gold: number | null; silver: number | null; copper: number | null; cash: number | null };
+
+// "12 gp · 5 sp · 3 cp · $40". Gold always shows; the rest only when held.
 export function formatPurse(purse: Purse): string {
   return CURRENCIES.filter((c) => c === 'GOLD' || (purse[COIN_FIELD[c]] ?? 0) > 0)
-    .map((c) => `${purse[COIN_FIELD[c]] ?? 0} ${COIN_SHORT[c]}`)
+    .map((c) => formatMoney(purse[COIN_FIELD[c]] ?? 0, c))
     .join(' · ');
 }
 
-// The whole purse as one figure in gold, e.g. 12.65.
+// The purse's coins as one figure in gold, e.g. 12.65. Cash is not counted.
 export function purseWorthInGold(purse: Purse): number {
-  const copper = CURRENCIES.reduce((sum, c) => sum + (purse[COIN_FIELD[c]] ?? 0) * COIN_VALUE[c], 0);
+  const copper = COINS.reduce((sum, c) => sum + (purse[COIN_FIELD[c]] ?? 0) * COIN_VALUE[c], 0);
   return copper / COIN_VALUE.GOLD;
 }
 

frontend/src/pages/CampaignHomePage.tsx

@@ -1,4 +1,4 @@
-import { useState, type FormEvent } from 'react';
+import { useState, type CSSProperties, type FormEvent, type ReactNode } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import {
   useCampaign,
@@ -12,6 +12,7 @@ import {
   useDeleteEncounter,
   useCampaignMonsters,
   useCreateMonster,
+  useUpdateMonster,
   useDeleteMonster,
   useCampaignWeapons,
   useCreateWeapon,
@@ -43,10 +44,10 @@ import { Spinner, ErrorBanner } from '../components/Spinner';
 import { NumberInput } from '../components/NumberInput';
 import { LifeBadge } from '../components/DeathSaves';
 import { usePagination, Pagination } from '../components/Paginated';
-import { SPELL_DAMAGE_GROUPS, SPELL_DAMAGE_SPECIALS, extractErrorMessage, spellLevelLabel, spellRequirementLabel } from '../lib/format';
+import { SPELL_DAMAGE_GROUPS, SPELL_DAMAGE_SPECIALS, extractErrorMessage, fmtMod, spellLevelLabel, spellRequirementLabel } from '../lib/format';
 import { speciesIcon } from '../lib/speciesIcons';
-import { DAMAGE_SCALING_LABELS, MAX_GEAR_LEVEL } from '../lib/previewCalc';
-import type { CharacterSummary, Encounter, EncounterMode, LibraryMonster, LibrarySpell, LibraryWeapon, NpcDisposition } from '../api/types';
+import { ABILITY_ORDER, DAMAGE_SCALING_LABELS, MAX_GEAR_LEVEL } from '../lib/previewCalc';
+import type { CharacterSummary, Encounter, EncounterMode, LibraryMonster, LibrarySpell, LibraryWeapon, Monster, NpcDisposition } from '../api/types';
 
 // How the encounter list can be ordered. "custom" is the campaign's own order,
 // which the DM arranges; the rest only change what this browser shows.
@@ -236,6 +237,142 @@ function SpellDamageSelect({
   );
 }
 
+type MonsterInput = Omit<Monster, 'id' | 'campaignId'>;
+type AbilityScores = Pick<Monster, 'strScore' | 'dexScore' | 'conScore' | 'intScore' | 'wisScore' | 'chaScore'>;
+const scoreField = (ability: string) => `${ability.toLowerCase()}Score` as keyof AbilityScores;
+
+// "STR 8 · DEX 14 · …", in stat-block order.
+function abilityLine(scores: AbilityScores): string {
+  return ABILITY_ORDER.map((a) => `${a} ${scores[scoreField(a)]}`).join(' · ');
+}
+
+// The whole stat block, field for field as a printed one gives it. Adds a
+// monster, or edits one when `monster` is passed (its values fill the form).
+function MonsterForm({
+  monster,
+  saving,
+  onSave,
+  onCancel,
+}: {
+  monster?: Monster;
+  saving: boolean;
+  // Rejects if the save failed, so the form keeps what was typed.
+  onSave: (data: MonsterInput) => Promise<void>;
+  onCancel?: () => void;
+}) {
+  const field = (name: string, label: string, input: ReactNode, style?: CSSProperties) => (
+    <div className="field" style={{ marginBottom: 0, ...style }}>
+      <label htmlFor={`monster-${name}`}>{label}</label>
+      {input}
+    </div>
+  );
+  const number = (name: keyof MonsterInput, label: string, min: number, max: number, fallback?: number) =>
+    field(
+      name,
+      label,
+      <NumberInput
+        id={`monster-${name}`}
+        name={name}
+        min={min}
+        max={max}
+        defaultValue={(monster?.[name] as number | undefined) ?? fallback}
+        keepValue={fallback !== undefined}
+        required
+      />
+    );
+
+  return (
+    <form
+      onSubmit={async (e) => {
+        e.preventDefault();
+        const form = e.target as HTMLFormElement;
+        const fd = new FormData(form);
+        const text = (key: string) => String(fd.get(key) || '').trim() || null;
+        const num = (key: string) => Number(fd.get(key));
+        try {
+          await onSave({
+            name: String(fd.get('name')).trim(),
+            challengeRating: text('challengeRating'),
+            ac: num('ac'),
+            maxHp: num('maxHp'),
+            speed: num('speed'),
+            attackBonus: num('attackBonus'),
+            damageDice: text('damageDice'),
+            strScore: num('strScore'),
+            dexScore: num('dexScore'),
+            conScore: num('conScore'),
+            intScore: num('intScore'),
+            wisScore: num('wisScore'),
+            chaScore: num('chaScore'),
+            specialTrait: text('specialTrait'),
+            notes: text('notes'),
+          });
+          if (!monster) form.reset();
+        } catch {
+          // The page shows the error; what was typed stays.
+        }
+      }}
+    >
+      <div className="grid grid-cols-3">
+        {field('name', 'Name', <input id="monster-name" name="name" defaultValue={monster?.name} required maxLength={80} />)}
+        {field(
+          'challengeRating',
+          'CR (Challenge Rating)',
+          <input id="monster-challengeRating" name="challengeRating" defaultValue={monster?.challengeRating ?? ''} placeholder="e.g. 1/4 or 3" maxLength={10} />
+        )}
+        {number('ac', 'AC (Armor Class)', 0, 50)}
+        {number('maxHp', 'HP (Hit Points)', 1, 100000)}
+        {number('speed', 'Speed (feet)', 0, 1000, 30)}
+        {number('attackBonus', 'Attack bonus', -20, 50, 0)}
+        {field(
+          'damageDice',
+          'Damage',
+          <input id="monster-damageDice" name="damageDice" defaultValue={monster?.damageDice ?? ''} placeholder="e.g. 1d6+2 necrotic" maxLength={60} />
+        )}
+      </div>
+      <div className="grid mt-sm" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(80px, 1fr))' }}>
+        {ABILITY_ORDER.map((a) => number(scoreField(a), a, 1, 30, 10))}
+      </div>
+      {field(
+        'specialTrait',
+        'Special trait',
+        <input
+          id="monster-specialTrait"
+          name="specialTrait"
+          defaultValue={monster?.specialTrait ?? ''}
+          placeholder="The one thing that makes it different"
+          maxLength={500}
+        />,
+        { marginTop: '0.5rem' }
+      )}
+      {field(
+        'notes',
+        'Notes',
+        <textarea
+          id="monster-notes"
+          name="notes"
+          rows={3}
+          className="textarea-block"
+          defaultValue={monster?.notes ?? ''}
+          placeholder="Everything else: other speeds (fly 30, swim 40), extra attacks, spells, tactics, resistances, senses, what it drops"
+          maxLength={2000}
+        />,
+        { marginTop: '0.5rem' }
+      )}
+      <div className="flex-row mt-sm">
+        <button type="submit" className="btn btn-primary" disabled={saving}>
+          {monster ? 'Save Changes' : 'Add Monster'}
+        </button>
+        {onCancel && (
+          <button type="button" className="btn btn-ghost" onClick={onCancel}>
+            Cancel
+          </button>
+        )}
+      </div>
+    </form>
+  );
+}
+
 function LibraryPicker<T extends { key: string; name: string }>({
   items,
   onAdd,
@@ -304,6 +441,7 @@ export function CampaignHomePage() {
   const setEncounterArchived = useSetEncounterArchived(campaignId);
   const deleteEncounter = useDeleteEncounter(campaignId);
   const createMonster = useCreateMonster(campaignId);
+  const updateMonster = useUpdateMonster(campaignId);
   const deleteMonster = useDeleteMonster(campaignId);
   const createWeapon = useCreateWeapon(campaignId);
   const createSpell = useCreateSpell(campaignId);
@@ -341,6 +479,7 @@ export function CampaignHomePage() {
   const [showDelete, setShowDelete] = useState(false);
   const [deleteConfirmName, setDeleteConfirmName] = useState('');
   const [showMonsterForm, setShowMonsterForm] = useState(false);
+  const [editingMonsterId, setEditingMonsterId] = useState<string | null>(null);
   const [showWeaponForm, setShowWeaponForm] = useState(false);
   const [showSpellForm, setShowSpellForm] = useState(false);
   const [showItemForm, setShowItemForm] = useState(false);
@@ -353,6 +492,7 @@ export function CampaignHomePage() {
   const itemsPage = usePagination(items, 8);
   const npcsPage = usePagination(npcs, 8);
   const monstersPage = usePagination(monsters, 8);
+  const editingMonster = monsters?.find((m) => m.id === editingMonsterId);
   const liveEncounters = encounters?.filter((e) => !e.archivedAt) || [];
   const archivedEncounters = encounters?.filter((e) => e.archivedAt) || [];
   const shownEncounters = sortEncounters(liveEncounters, encounterSort);
@@ -1208,8 +1348,14 @@ export function CampaignHomePage() {
                 <button className="btn btn-ghost" onClick={() => setShowMonsterLibrary((s) => !s)}>
                   {showMonsterLibrary ? 'Close Library' : '📚 From Library'}
                 </button>
-                <button className="btn btn-ghost" onClick={() => setShowMonsterForm((s) => !s)}>
-                  {showMonsterForm ? 'Close' : '+ Add Monster'}
+                <button
+                  className="btn btn-ghost"
+                  onClick={() => {
+                    setShowMonsterForm(!(showMonsterForm || editingMonster));
+                    setEditingMonsterId(null);
+                  }}
+                >
+                  {showMonsterForm || editingMonster ? 'Close' : '+ Add Monster'}
                 </button>
               </div>
             </div>
@@ -1219,62 +1365,93 @@ export function CampaignHomePage() {
                 adding={addMonsterFromLibrary.isPending}
                 onAdd={(key) => addMonsterFromLibrary.mutate(key)}
                 placeholder="Search the monster library…"
-                renderMeta={(m) => `CR ${m.challengeRating} · AC ${m.ac} · HP ${m.maxHp} · attack +${m.attackBonus}${m.damageDice ? ` for ${m.damageDice}` : ''}`}
+                renderMeta={(m) =>
+                  `CR ${m.challengeRating ?? '—'} · AC ${m.ac} · HP ${m.maxHp} · speed ${m.speed} · attack ${fmtMod(m.attackBonus)}${m.damageDice ? ` for ${m.damageDice}` : ''} · ${abilityLine(m)}`
+                }
                 renderDetail={(m) => [m.specialTrait, m.notes].filter(Boolean).join(' — ') || null}
               />
             )}
-            {showMonsterForm && (
-              <form
-                onSubmit={async (e) => {
-                  e.preventDefault();
-                  const fd = new FormData(e.target as HTMLFormElement);
-                  await createMonster.mutateAsync({
-                    name: String(fd.get('name')),
-                    ac: Number(fd.get('ac')),
-                    maxHp: Number(fd.get('maxHp')),
-                    speed: 30,
-                    strScore: 10,
-                    dexScore: 10,
-                    conScore: 10,
-                    intScore: 10,
-                    wisScore: 10,
-                    chaScore: 10,
-                    attackBonus: Number(fd.get('attackBonus') || 0),
-                    damageDice: String(fd.get('damageDice') || '') || null,
-                    challengeRating: null,
-                    specialTrait: null,
-                    notes: null,
-                  });
-                  (e.target as HTMLFormElement).reset();
-                }}
-                className="grid grid-cols-3"
-              >
-                <input name="name" placeholder="Name" required />
-                <NumberInput name="ac" min={0} max={50} placeholder="AC" required />
-                <NumberInput name="maxHp" min={1} max={100000} placeholder="Max HP" required />
-                <NumberInput name="attackBonus" min={-20} max={50} placeholder="Attack bonus" />
-                <input name="damageDice" placeholder="Damage dice" />
-                <button type="submit" className="btn btn-primary">Add</button>
-              </form>
+            {(showMonsterForm || editingMonster) && (
+              <div className="card mt-sm" style={{ background: 'var(--bg-inset)' }}>
+                {editingMonster && <div className="section-label">Editing {editingMonster.name}</div>}
+                <MonsterForm
+                  key={editingMonster?.id ?? 'new'}
+                  monster={editingMonster}
+                  saving={createMonster.isPending || updateMonster.isPending}
+                  onCancel={editingMonster ? () => setEditingMonsterId(null) : undefined}
+                  onSave={async (stats) => {
+                    setFormError(null);
+                    try {
+                      if (editingMonster) {
+                        await updateMonster.mutateAsync({ id: editingMonster.id, ...stats });
+                        setEditingMonsterId(null);
+                      } else {
+                        await createMonster.mutateAsync(stats);
+                      }
+                    } catch (err) {
+                      setFormError(extractErrorMessage(err));
+                      throw err;
+                    }
+                  }}
+                />
+              </div>
             )}
             <div className="table-wrap mt-sm">
               <table className="data-table">
                 <thead>
                   <tr>
                     <th>Name</th>
+                    <th>CR</th>
                     <th>AC</th>
                     <th>HP</th>
+                    <th>Speed</th>
+                    <th>Attack</th>
+                    <th>Damage</th>
+                    <th />
                     <th />
                   </tr>
                 </thead>
                 <tbody>
                   {monstersPage.pageItems.map((m) => (
                     <tr key={m.id}>
-                      <td>{m.name}</td>
+                      <td>
+                        <strong>{m.name}</strong>
+                        <div className="mono" style={{ color: 'var(--text-muted)', fontSize: '0.8rem' }}>{abilityLine(m)}</div>
+                        {m.specialTrait && (
+                          <div style={{ fontSize: '0.9rem' }}>
+                            <strong>Trait:</strong> {m.specialTrait}
+                          </div>
+                        )}
+                        {m.notes && <div style={{ color: 'var(--text-muted)', fontSize: '0.9rem', whiteSpace: 'pre-wrap' }}>{m.notes}</div>}
+                      </td>
+                      <td>{m.challengeRating || '—'}</td>
                       <td>{m.ac}</td>
                       <td>{m.maxHp}</td>
+                      <td>{m.speed}</td>
+                      <td>{fmtMod(m.attackBonus)}</td>
+                      <td>{m.damageDice || '—'}</td>
                       <td>
-                        <button className="btn btn-ghost" onClick={() => deleteMonster.mutate(m.id)}>✕</button>
+                        <button
+                          className="btn btn-ghost"
+                          aria-label={`Edit ${m.name}`}
+                          onClick={() => {
+                            setEditingMonsterId(m.id);
+                            setShowMonsterForm(false);
+                          }}
+                        >
+                          Edit
+                        </button>
+                      </td>
+                      <td>
+                        <button
+                          className="btn btn-ghost"
+                          aria-label={`Remove ${m.name}`}
+                          onClick={() =>
+                            window.confirm(`Remove ${m.name}? Copies already in encounters stay, but lose their stat block.`) && deleteMonster.mutate(m.id)
+                          }
+                        >
+                          ✕
+                        </button>
                       </td>
                     </tr>
                   ))}

frontend/src/pages/CharacterSheetPage.tsx

@@ -40,15 +40,16 @@ import { usePagination, Pagination } from '../components/Paginated';
 import {
   ABILITY_LABELS,
   CLASS_LABELS,
+  COINS,
   COIN_FIELD,
   COIN_LABELS,
-  COIN_SHORT,
   COIN_VALUE,
   CURRENCIES,
   SKILL_LABELS,
   SPECIES_LABELS,
   fmtMod,
   extractErrorMessage,
+  formatMoney,
   formatPurse,
   purseWorthInGold,
   spellLevelLabel,
@@ -56,7 +57,7 @@ import {
 import { speciesIcon } from '../lib/speciesIcons';
 import { hpMax as previewHpMax, scaledDamageDice, MAX_GEAR_LEVEL } from '../lib/previewCalc';
 import { CLASS_HIT_DIE } from '../lib/classData';
-import type { Ability, CharacterDetail, Currency } from '../api/types';
+import type { Ability, CharacterDetail, Coin, Currency } from '../api/types';
 
 // The DM's level picker for one held weapon or item, from the level the gear
 // starts at up to the maximum. Each option shows what the dice become at that
@@ -112,10 +113,10 @@ function GiveCard({ character, onError }: { character: CharacterDetail; onError:
   const heldWeapon = character.weapons.find((w) => w.weaponId === id);
   const heldItem = character.inventoryItems.find((i) => i.itemId === id);
   // A gift of coins is paid from the whole purse, with change, so any coin
-  // the purse is worth at least one of can be given.
+  // the purse is worth at least one of can be given. Cash is only paid in cash.
   const held = (c: Currency) => character[COIN_FIELD[c]] ?? 0;
-  const purseInCopper = CURRENCIES.reduce((sum, c) => sum + held(c) * COIN_VALUE[c], 0);
-  const affordable = (c: Currency) => Math.floor(purseInCopper / COIN_VALUE[c]);
+  const purseInCopper = COINS.reduce((sum, c) => sum + held(c) * COIN_VALUE[c], 0);
+  const affordable = (c: Currency) => (c === 'CASH' ? held(c) : Math.floor(purseInCopper / COIN_VALUE[c]));
   const coinsHeld = CURRENCIES.filter((c) => affordable(c) > 0);
   const max = kind === 'gold' ? affordable(coin) : kind === 'weapon' ? (heldWeapon?.quantity ?? 0) : kind === 'item' ? (heldItem?.quantity ?? 0) : 1;
   const count = Math.floor(Number(amount));
@@ -170,7 +171,7 @@ function GiveCard({ character, onError }: { character: CharacterDetail; onError:
             <option value="">What to give…</option>
             {coinsHeld.map((c) => (
               <option key={c} value={`gold:${c}`}>
-                {COIN_LABELS[c]} ({held(c)} {COIN_SHORT[c]} held)
+                {COIN_LABELS[c]} ({formatMoney(held(c), c)} held)
               </option>
             ))}
             {character.weapons.length > 0 && (
@@ -267,8 +268,8 @@ export function CharacterSheetPage() {
   const [goldReason, setGoldReason] = useState('');
   const [goldCurrency, setGoldCurrency] = useState<Currency>('GOLD');
   const [exchangeAmount, setExchangeAmount] = useState('');
-  const [exchangeFrom, setExchangeFrom] = useState<Currency>('GOLD');
-  const [exchangeTo, setExchangeTo] = useState<Currency>('SILVER');
+  const [exchangeFrom, setExchangeFrom] = useState<Coin>('GOLD');
+  const [exchangeTo, setExchangeTo] = useState<Coin>('SILVER');
   const [noteBody, setNoteBody] = useState('');
   const [pickedWeaponId, setPickedWeaponId] = useState('');
   const [pickedSpellId, setPickedSpellId] = useState('');
@@ -828,7 +829,8 @@ export function CharacterSheetPage() {
         </div>
         <p className="subtitle" style={{ marginTop: 0 }}>
           1 gold = 10 silver = 100 copper. Worth {purseWorthInGold(character)} gold in all. Spending and giving make
-          change for you: if you are short of a coin, a bigger one is broken.
+          change for you: if you are short of a coin, a bigger one is broken. Cash ($) is kept apart: it is never
+          exchanged for coins.
         </p>
         {canEdit && (
           <div className="flex-row flex-wrap">
@@ -876,16 +878,16 @@ export function CharacterSheetPage() {
               onChange={(e) => setExchangeAmount(e.target.value)}
               style={{ width: 100 }}
             />
-            <select aria-label="Exchange from" value={exchangeFrom} onChange={(e) => setExchangeFrom(e.target.value as Currency)}>
-              {CURRENCIES.map((c) => (
+            <select aria-label="Exchange from" value={exchangeFrom} onChange={(e) => setExchangeFrom(e.target.value as Coin)}>
+              {COINS.map((c) => (
                 <option key={c} value={c}>
                   {COIN_LABELS[c]}
                 </option>
               ))}
             </select>
             <span className="subtitle">into</span>
-            <select aria-label="Exchange into" value={exchangeTo} onChange={(e) => setExchangeTo(e.target.value as Currency)}>
-              {CURRENCIES.map((c) => (
+            <select aria-label="Exchange into" value={exchangeTo} onChange={(e) => setExchangeTo(e.target.value as Coin)}>
+              {COINS.map((c) => (
                 <option key={c} value={c}>
                   {COIN_LABELS[c]}
                 </option>
@@ -902,7 +904,8 @@ export function CharacterSheetPage() {
             <div key={t.id} className="flex-between" style={{ padding: '0.4rem 0', borderBottom: '1px solid var(--border-soft)' }}>
               <div>
                 <strong className="mono">
-                  {t.amount > 0 ? `+${t.amount}` : `−${Math.abs(t.amount)}`} {COIN_SHORT[t.currency ?? 'GOLD']}
+                  {t.amount > 0 ? '+' : '−'}
+                  {formatMoney(Math.abs(t.amount), t.currency ?? 'GOLD')}
                 </strong>
                 <span style={{ marginLeft: 8 }}>{t.reason || (t.amount > 0 ? 'Gained' : 'Spent')}</span>
                 <div style={{ fontSize: '0.75rem', color: 'var(--text-dim)' }}>
@@ -911,7 +914,7 @@ export function CharacterSheetPage() {
                 </div>
               </div>
               <span className="mono" style={{ color: 'var(--text-muted)' }}>
-                {t.balanceAfter} {COIN_SHORT[t.currency ?? 'GOLD']}
+                {formatMoney(t.balanceAfter, t.currency ?? 'GOLD')}
               </span>
             </div>
           ))}

frontend/src/pages/EncounterPage.tsx

@@ -30,7 +30,7 @@ import { Spinner, ErrorBanner } from '../components/Spinner';
 import { NumberInput } from '../components/NumberInput';
 import { HpBar } from '../components/HpBar';
 import { DeathSaves } from '../components/DeathSaves';
-import { ABILITY_LABELS, CLASS_LABELS, COIN_LABELS, CURRENCIES, SPECIES_LABELS, extractErrorMessage, fmtMod, spellLevelLabel } from '../lib/format';
+import { ABILITY_LABELS, CLASS_LABELS, COIN_LABELS, CURRENCIES, SPECIES_LABELS, extractErrorMessage, fmtMod, formatMoney, spellLevelLabel } from '../lib/format';
 import { abilityModifier, scaledDamageDice, MAX_GEAR_LEVEL } from '../lib/previewCalc';
 import type {
   Ability,
@@ -606,7 +606,7 @@ function AttackBar({
 }
 
 function rewardLabel(r: EncounterReward): string {
-  if (r.type === 'GOLD') return `${r.gold} ${COIN_LABELS[r.currency ?? 'GOLD'].toLowerCase()}`;
+  if (r.type === 'GOLD') return formatMoney(r.gold ?? 0, r.currency ?? 'GOLD', true);
   const entry = r.type === 'WEAPON' ? r.weapon : r.item;
   return `${entry?.name ?? 'Removed from the pool'}${r.quantity > 1 ? ` ×${r.quantity}` : ''} · Lv ${r.level}`;
 }