From c2bb5cca29fe49eab491f731c0933cb726ee68ec Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Tue, 7 Jul 2026 13:32:26 -0400
Subject: [PATCH 01/24] Generic (non-5e) ruleset mode: negative HP, down
 status, mark dead/revive

New campaign/encounter ruleset toggle: 5e (default, unchanged) vs generic.

Generic mode:
- No death saves (deathSave/stabilize throw)
- Negative HP allowed (no clamp at 0)
- <=0 HP = status 'down' (no pips, no unconscious auto-condition)
- Monster death = dead + inactive (same as 5e)
- markDead button: DM sets dead manually (both modes)
- revive: dead->conscious (generic), dead->stable (5e)

5e mode: zero behavior change.

shared/turn.js:
- applyHpChangeGeneric: negative HP, down status, no death-save logic
- markDead: status dead, monster auto-inactive
- reviveParticipant: ruleset-aware (generic=conscious, 5e=stable)
- deathSave/stabilize: throw in generic
- expandUndo: mark_dead case added

UI (src/App.js):
- CreateCampaignForm + CreateEncounterForm: ruleset radio toggle
- handleCreateCampaign/handleCreateEncounter: store ruleset field
- EncounterManager: fetch campaignDoc for default ruleset inheritance
- DM participant: down/dead labels, Mark Dead button (generic), Revive both
- death-save pips/buttons gated 5e-only
- DisplayView: down label, generic status derivation

Tests: 15 generic cases (turn.generic.test.js). 186 shared total.
---
 shared/tests/turn.generic.test.js | 185 ++++++++++++++++++++++++++++++
 shared/turn.js                    | 117 ++++++++++++++++++-
 src/App.js                        |  86 ++++++++++++--
 3 files changed, 374 insertions(+), 14 deletions(-)
 create mode 100644 shared/tests/turn.generic.test.js

diff --git a/shared/tests/turn.generic.test.js b/shared/tests/turn.generic.test.js
new file mode 100644
index 0000000..e4f537e
--- /dev/null
+++ b/shared/tests/turn.generic.test.js
@@ -0,0 +1,185 @@
+// Generic (non-5e) ruleset: no death saves, negative HP allowed, down status.
+const shared = require('@ttrpg/shared');
+const { mockCtx } = require('./_helpers');
+const {
+  buildCharacterParticipant, buildMonsterParticipant,
+  startEncounter, applyHpChange, deathSave, markDead, reviveParticipant,
+} = shared;
+
+function char(id, hp = 100) {
+  const { participant } = buildCharacterParticipant({ id: `orig-${id}`, name: id, defaultMaxHp: hp, defaultInitMod: 2 });
+  participant.id = id;
+  return participant;
+}
+function mon(id, hp = 100) {
+  const { participant } = buildMonsterParticipant({ name: id, maxHp: hp, initMod: 2 });
+  participant.id = id;
+  return participant;
+}
+function enc(ps, ruleset = 'generic') {
+  return {
+    name: 't', participants: ps, isStarted: false, isPaused: false,
+    round: 0, currentTurnParticipantId: null, turnOrderIds: [],
+    ruleset,
+  };
+}
+const snap = (e) => JSON.parse(JSON.stringify(e));
+
+describe('generic ruleset', () => {
+  test('damage past 0 = negative HP, status down (character)', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([char('a', 10)]);
+    e = await startEncounter(e, ctx);
+    const newEnc = await applyHpChange(e, 'a', 'damage', 15, ctx);
+    const p = newEnc.participants.find(x => x.id === 'a');
+    expect(p.currentHp).toBe(-5);
+    expect(p.status).toBe('down');
+  });
+
+  test('damage exactly to 0 = status down', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([char('a', 10)]);
+    e = await startEncounter(e, ctx);
+    const newEnc = await applyHpChange(e, 'a', 'damage', 10, ctx);
+    const p = newEnc.participants.find(x => x.id === 'a');
+    expect(p.currentHp).toBe(0);
+    expect(p.status).toBe('down');
+  });
+
+  test('heal from negative = conscious', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([char('a', 10)]);
+    e = await startEncounter(e, ctx);
+    e = await applyHpChange(e, 'a', 'damage', 15, ctx); // -5
+    const newEnc = await applyHpChange(e, 'a', 'heal', 10, ctx);
+    const p = newEnc.participants.find(x => x.id === 'a');
+    expect(p.currentHp).toBe(5);
+    expect(p.status).toBe('conscious');
+  });
+
+  test('heal caps at maxHp', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([char('a', 10)]);
+    e = await startEncounter(e, ctx);
+    e = await applyHpChange(e, 'a', 'damage', 5, ctx); // 5
+    const newEnc = await applyHpChange(e, 'a', 'heal', 20, ctx);
+    const p = newEnc.participants.find(x => x.id === 'a');
+    expect(p.currentHp).toBe(10);
+    expect(p.status).toBe('conscious');
+  });
+
+  test('monster death = auto-inactive (generic)', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([mon('m', 10)]);
+    e = await startEncounter(e, ctx);
+    const newEnc = await applyHpChange(e, 'm', 'damage', 20, ctx);
+    const p = newEnc.participants.find(x => x.id.startsWith('m'));
+    expect(p.currentHp).toBe(-10);
+    expect(p.status).toBe('dead');
+    expect(p.isActive).toBe(false);
+  });
+
+  test('monster at exactly 0 = dead + inactive (generic)', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([mon('m', 10)]);
+    e = await startEncounter(e, ctx);
+    const newEnc = await applyHpChange(e, 'm', 'damage', 10, ctx);
+    const p = newEnc.participants.find(x => x.id.startsWith('m'));
+    expect(p.currentHp).toBe(0);
+    expect(p.status).toBe('dead');
+    expect(p.isActive).toBe(false);
+  });
+
+  test('deathSave throws in generic mode', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([char('a', 10)]);
+    e = await startEncounter(e, ctx);
+    e = await applyHpChange(e, 'a', 'damage', 10, ctx); // down
+    await expect(deathSave(e, 'a', 'fail', ctx)).rejects.toThrow();
+  });
+
+  test('revive in generic mode: dead→conscious (no stable)', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([char('a', 10)]);
+    e = await startEncounter(e, ctx);
+    e = await applyHpChange(e, 'a', 'damage', 10, ctx); // down
+    e = await markDead(e, 'a', ctx); // dead
+    const newEnc = await reviveParticipant(e, 'a', ctx);
+    const p = newEnc.participants.find(x => x.id === 'a');
+    expect(p.status).toBe('conscious');
+    expect(p.currentHp).toBe(0); // HP unchanged from down
+  });
+
+  test('revive generic reactivates if inactive', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([mon('m', 10)]);
+    e = await startEncounter(e, ctx);
+    e = await markDead(e, e.participants[0].id, ctx); // dead+inactive
+    const newEnc = await reviveParticipant(e, e.participants[0].id, ctx);
+    const p = newEnc.participants[0];
+    expect(p.status).toBe('conscious');
+    expect(p.isActive).toBe(true);
+  });
+
+  test('markDead sets status dead (character, stays active)', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([char('a', 10)]);
+    e = await startEncounter(e, ctx);
+    e = await applyHpChange(e, 'a', 'damage', 10, ctx); // down
+    const newEnc = await markDead(e, 'a', ctx);
+    const p = newEnc.participants.find(x => x.id === 'a');
+    expect(p.status).toBe('dead');
+    expect(p.isActive).toBe(true);
+  });
+
+  test('markDead on monster = dead + inactive', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([mon('m', 10)]);
+    e = await startEncounter(e, ctx);
+    e = await applyHpChange(e, 'm', 'damage', 5, ctx); // down (5hp)
+    const newEnc = await markDead(e, e.participants[0].id, ctx);
+    const p = newEnc.participants[0];
+    expect(p.status).toBe('dead');
+    expect(p.isActive).toBe(false);
+  });
+
+  test('markDead on conscious = dead', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([char('a', 10)]);
+    e = await startEncounter(e, ctx);
+    const newEnc = await markDead(e, 'a', ctx);
+    const p = newEnc.participants.find(x => x.id === 'a');
+    expect(p.status).toBe('dead');
+  });
+
+  test('damage while down = more negative (no death saves)', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([char('a', 10)]);
+    e = await startEncounter(e, ctx);
+    e = await applyHpChange(e, 'a', 'damage', 15, ctx); // -5 down
+    const newEnc = await applyHpChange(e, 'a', 'damage', 5, ctx);
+    const p = newEnc.participants.find(x => x.id === 'a');
+    expect(p.currentHp).toBe(-10);
+    expect(p.status).toBe('down');
+  });
+
+  test('no unconscious condition auto-added (generic)', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([char('a', 10)]);
+    e = await startEncounter(e, ctx);
+    const newEnc = await applyHpChange(e, 'a', 'damage', 10, ctx);
+    const p = newEnc.participants.find(x => x.id === 'a');
+    expect(p.conditions).not.toContain('unconscious');
+  });
+
+  test('down→conscious clears dead? no, dead is separate', async () => {
+    // sanity: down heal to conscious, dead untouched
+    const { ctx } = mockCtx();
+    let e = enc([char('a', 10)]);
+    e = await startEncounter(e, ctx);
+    e = await applyHpChange(e, 'a', 'damage', 10, ctx); // down
+    const newEnc = await applyHpChange(e, 'a', 'heal', 10, ctx);
+    const p = newEnc.participants.find(x => x.id === 'a');
+    expect(p.status).toBe('conscious');
+  });
+});
diff --git a/shared/turn.js b/shared/turn.js
index 5ad7bf2..0aa485a 100644
--- a/shared/turn.js
+++ b/shared/turn.js
@@ -207,6 +207,7 @@ function expandUndo(entry, currentEnc) {
     case 'death_save':
     case 'stabilize':
     case 'revive':
+    case 'mark_dead':
     case 'deactivate_dead_monster': {
       // Full death-state restore: currentHp, status, death-save counters,
       // isActive, conditions (unconscious added/removed by withDeathStatusConditions).
@@ -574,6 +575,7 @@ async function toggleParticipantActive(encounter, participantId, ctx) {
 async function applyHpChange(encounter, participantId, changeType, amount, optionsOrCtx, maybeCtx) {
   const ctx = maybeCtx || optionsOrCtx;
   const options = maybeCtx ? (optionsOrCtx || {}) : {};
+  const ruleset = encounter.ruleset || '5e';
   const participant = (encounter.participants || []).find(p => p.id === participantId);
   if (!participant) throw new Error('Participant not found.');
   if (isNaN(amount) || amount === 0) return encounter;
@@ -596,6 +598,12 @@ async function applyHpChange(encounter, participantId, changeType, amount, optio
   let logDelta = { amount, from: participant.currentHp };
   const status = oldValues.status;
 
+  // GENERIC ruleset: no death saves, negative HP allowed, down status at <=0.
+  // Monster death = dead + inactive. No unconscious auto-condition.
+  if (ruleset === 'generic') {
+    return applyHpChangeGeneric(encounter, participant, changeType, amount, oldValues, ctx);
+  }
+
   if (changeType === 'damage') {
     if (participant.currentHp === 0) {
       if (status === 'dead') {
@@ -683,7 +691,76 @@ async function applyHpChange(encounter, participantId, changeType, amount, optio
   return commit(encounter, patch, log, ctx);
 }
 
+// GENERIC ruleset HP change: no death saves, negative HP, down status at <=0.
+// Monster death = dead + inactive. No unconscious auto-condition.
+async function applyHpChangeGeneric(encounter, participant, changeType, amount, oldValues, ctx) {
+  const participantId = participant.id;
+  let updates, message, logDelta = { amount, from: participant.currentHp };
+
+  if (changeType === 'damage') {
+    if (oldValues.status === 'dead') {
+      if (participant.type === 'monster' && participant.isActive !== false) {
+        const updatedParticipants = (encounter.participants || []).map(p =>
+          p.id === participantId ? { ...p, isActive: false } : p
+        );
+        const newP = updatedParticipants.find(p => p.id === participantId);
+        const newValues = {
+          currentHp: newP.currentHp, status: newP.status,
+          deathSaveSuccesses: 0, deathSaveFailures: 0,
+          isActive: newP.isActive, conditions: [...(newP.conditions || [])],
+        };
+        return commit(encounter, { participants: updatedParticipants }, {
+          type: 'deactivate_dead_monster', participantId, participantName: participant.name,
+          message: `${participant.name} marked inactive (dead monster)`,
+          delta: { status: 'dead', isActive: false },
+          undo: { oldValues, newValues },
+        }, ctx);
+      }
+      return encounter;
+    }
+    const newHp = participant.currentHp - amount;
+    const isMonster = participant.type === 'monster';
+    if (newHp <= 0 && isMonster) {
+      updates = { currentHp: newHp, status: 'dead', isActive: false };
+    } else if (newHp <= 0) {
+      updates = { currentHp: newHp, status: 'down' };
+    } else {
+      updates = { currentHp: newHp, status: 'conscious' };
+    }
+    message = `${participant.name} took ${amount} damage (${participant.currentHp} → ${newHp} HP)`;
+    logDelta = { ...logDelta, to: newHp, status: updates.status };
+  } else if (changeType === 'heal') {
+    if (oldValues.status === 'dead') return encounter;
+    const newHp = Math.min(participant.maxHp, participant.currentHp + amount);
+    updates = { currentHp: newHp, status: 'conscious' };
+    message = `${participant.name} healed for ${amount} (${participant.currentHp} → ${newHp} HP)`;
+    logDelta = { ...logDelta, to: newHp, status: 'conscious' };
+  } else {
+    throw new Error(`Unknown HP change type: ${changeType}`);
+  }
+
+  const updatedParticipants = (encounter.participants || []).map(p =>
+    p.id === participantId ? { ...p, ...updates } : p
+  );
+  const newP = updatedParticipants.find(p => p.id === participantId);
+  const newValues = {
+    currentHp: newP.currentHp, status: newP.status,
+    deathSaveSuccesses: newP.deathSaveSuccesses || 0,
+    deathSaveFailures: newP.deathSaveFailures || 0,
+    isActive: newP.isActive, conditions: [...(newP.conditions || [])],
+  };
+  const undoAmount = changeType === 'damage' ? amount : -amount;
+  return commit(encounter, { participants: updatedParticipants }, {
+    type: changeType, participantId, participantName: participant.name,
+    message, delta: logDelta,
+    undo: { amount: undoAmount, oldValues, newValues },
+  }, ctx);
+}
+
 async function deathSave(encounter, participantId, outcome, ctx) {
+  if ((encounter.ruleset || '5e') === 'generic') {
+    throw new Error('Death saves not available in generic ruleset.');
+  }
   const participant = (encounter.participants || []).find(p => p.id === participantId);
   if (!participant) throw new Error('Participant not found.');
   const statusBefore = participant.status || (participant.currentHp === 0 ? 'dying' : 'conscious');
@@ -764,6 +841,9 @@ async function toggleCondition(encounter, participantId, conditionId, ctx) {
 }
 
 async function stabilizeParticipant(encounter, participantId, ctx) {
+  if ((encounter.ruleset || '5e') === 'generic') {
+    throw new Error('Stabilize not available in generic ruleset.');
+  }
   const participant = (encounter.participants || []).find(p => p.id === participantId);
   if (!participant) throw new Error('Participant not found.');
   const status = participant.status || (participant.currentHp === 0 ? 'dying' : 'conscious');
@@ -806,12 +886,17 @@ async function stabilizeParticipant(encounter, participantId, ctx) {
 }
 
 async function reviveParticipant(encounter, participantId, ctx) {
+  const ruleset = encounter.ruleset || '5e';
   const participant = (encounter.participants || []).find(p => p.id === participantId);
   if (!participant) throw new Error('Participant not found.');
   const status = participant.status || (participant.currentHp === 0 ? 'dying' : 'conscious');
   if (status !== 'dead') return encounter;
 
-  const updates = { currentHp: 0, status: 'stable', deathSaveSuccesses: 0, deathSaveFailures: 0, isActive: true };
+  // Generic: dead→conscious (no stable state). HP unchanged (may be negative).
+  // 5e: dead→stable at 0 HP, unconscious, clears death-save counters.
+  const updates = ruleset === 'generic'
+    ? { status: 'conscious', ...(participant.type === 'monster' ? {} : {}), ...(participant.isActive === false ? { isActive: true } : {}) }
+    : { currentHp: 0, status: 'stable', deathSaveSuccesses: 0, deathSaveFailures: 0, isActive: true };
   const updatedParticipants = (encounter.participants || []).map(p =>
     p.id === participantId ? { ...p, ...withDeathStatusConditions(p, updates) } : p
   );
@@ -845,6 +930,34 @@ async function reviveParticipant(encounter, participantId, ctx) {
   return commit(encounter, patch, log, ctx);
 }
 
+// markDead: DM manually sets status dead. Both rulesets. Monster = auto-inactive.
+async function markDead(encounter, participantId, ctx) {
+  const participant = (encounter.participants || []).find(p => p.id === participantId);
+  if (!participant) throw new Error('Participant not found.');
+  if (participant.status === 'dead') return encounter;
+  const oldValues = {
+    currentHp: participant.currentHp,
+    status: participant.status || 'conscious',
+    isActive: participant.isActive,
+    conditions: [...(participant.conditions || [])],
+  };
+  const updates = { status: 'dead', ...(participant.type === 'monster' ? { isActive: false } : {}) };
+  const updatedParticipants = (encounter.participants || []).map(p =>
+    p.id === participantId ? { ...p, ...withDeathStatusConditions(p, updates) } : p
+  );
+  const newP = updatedParticipants.find(p => p.id === participantId);
+  const newValues = {
+    currentHp: newP.currentHp, status: newP.status,
+    isActive: newP.isActive, conditions: [...(newP.conditions || [])],
+  };
+  return commit(encounter, { participants: updatedParticipants }, {
+    type: 'mark_dead', participantId, participantName: participant.name,
+    message: `${participant.name} marked dead`,
+    delta: { status: 'dead' },
+    undo: { oldValues, newValues },
+  }, ctx);
+}
+
 async function reorderParticipants(encounter, draggedId, targetId, ctx) {
   const participants = [...(encounter.participants || [])];
   const dragged = participants.find(p => p.id === draggedId);
@@ -919,7 +1032,7 @@ module.exports = {
   makeParticipant, buildCharacterParticipant, buildMonsterParticipant,
   startEncounter, nextTurn, togglePause,
   addParticipant, addParticipants, updateParticipant, removeParticipant,
-  toggleParticipantActive, applyHpChange, deathSave, stabilizeParticipant, reviveParticipant, toggleCondition,
+  toggleParticipantActive, applyHpChange, deathSave, stabilizeParticipant, reviveParticipant, markDead, toggleCondition,
   reorderParticipants, endEncounter,
   activateDisplay, clearDisplay, toggleHidePlayerHp,
 };
diff --git a/src/App.js b/src/App.js
index b52f429..7ee76e2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -125,6 +125,7 @@ const {
   deathSave: combatDeathSave,
   stabilizeParticipant,
   reviveParticipant,
+  markDead,
   toggleCondition: combatToggleCondition,
   reorderParticipants,
 } = shared;
@@ -448,11 +449,12 @@ function ErrorDisplay({ message, critical = false }) {
 function CreateCampaignForm({ onCreate, onCancel }) {
   const [name, setName] = useState('');
   const [backgroundUrl, setBackgroundUrl] = useState('');
+  const [ruleset, setRuleset] = useState('5e');
 
   const handleSubmit = (e) => {
     e.preventDefault();
     if (name.trim()) {
-      onCreate(name, backgroundUrl);
+      onCreate(name, backgroundUrl, ruleset);
     }
   };
 
@@ -484,6 +486,19 @@ function CreateCampaignForm({ onCreate, onCancel }) {
           className="mt-1 block w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
         />
       </div>
+      <div>
+        <label className="block text-sm font-medium text-stone-300 mb-1">Ruleset</label>
+        <div className="flex gap-4">
+          <label className="flex items-center gap-2 text-sm text-stone-200">
+            <input type="radio" value="5e" checked={ruleset === '5e'} onChange={() => setRuleset('5e')} />
+            D&D 5e (death saves)
+          </label>
+          <label className="flex items-center gap-2 text-sm text-stone-200">
+            <input type="radio" value="generic" checked={ruleset === 'generic'} onChange={() => setRuleset('generic')} />
+            Generic (no death saves, negative HP)
+          </label>
+        </div>
+      </div>
       <div className="flex justify-end space-x-3">
         <button
           type="button"
@@ -503,13 +518,14 @@ function CreateCampaignForm({ onCreate, onCancel }) {
   );
 }
 
-function CreateEncounterForm({ onCreate, onCancel }) {
+function CreateEncounterForm({ onCreate, onCancel, defaultRuleset = '5e' }) {
   const [name, setName] = useState('');
+  const [ruleset, setRuleset] = useState(defaultRuleset);
 
   const handleSubmit = (e) => {
     e.preventDefault();
     if (name.trim()) {
-      onCreate(name);
+      onCreate(name, ruleset);
     }
   };
 
@@ -528,6 +544,19 @@ function CreateEncounterForm({ onCreate, onCancel }) {
           required
         />
       </div>
+      <div>
+        <label className="block text-sm font-medium text-stone-300 mb-1">Ruleset</label>
+        <div className="flex gap-4">
+          <label className="flex items-center gap-2 text-sm text-stone-200">
+            <input type="radio" value="5e" checked={ruleset === '5e'} onChange={() => setRuleset('5e')} />
+            D&D 5e (death saves)
+          </label>
+          <label className="flex items-center gap-2 text-sm text-stone-200">
+            <input type="radio" value="generic" checked={ruleset === 'generic'} onChange={() => setRuleset('generic')} />
+            Generic (no death saves, negative HP)
+          </label>
+        </div>
+      </div>
       <div className="flex justify-end space-x-3">
         <button
           type="button"
@@ -1153,6 +1182,15 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
     }
   };
 
+  const handleMarkDead = async (participantId) => {
+    if (!db) return;
+    try {
+      await markDead(encounter, participantId, buildCtx(encounterPath));
+    } catch (err) {
+      showToast(err.message);
+    }
+  };
+
   const handleCritDamage = async (participantId) => {
     if (!db) return;
     try {
@@ -1414,14 +1452,18 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
             const isCurrentTurn = encounter.isStarted && p.id === encounter.currentTurnParticipantId;
             const isDraggable = (!encounter.isStarted || encounter.isPaused) && tiedInitiatives.includes(Number(p.initiative));
             const participantDisplayType = p.type === 'npc' ? 'NPC' : (p.type === 'monster' ? 'Monster' : 'Character');
-            const hasDeathSaves = p.type === 'character' || p.type === 'npc';
+            const isGeneric = (encounter.ruleset || '5e') === 'generic';
+            const hasDeathSaves = !isGeneric && (p.type === 'character' || p.type === 'npc');
 
             let bgColor = p.type === 'character' ? 'bg-indigo-950' : 'bg-[#8e351c]';
             if (isCurrentTurn && !encounter.isPaused) bgColor = 'bg-green-600';
 
-            const participantStatus = p.status || (p.currentHp === 0 ? (p.type === 'monster' ? 'dead' : 'dying') : 'conscious');
-            const isZeroHp = p.currentHp === 0;
+            const participantStatus = p.status || (isGeneric
+              ? (p.currentHp <= 0 ? 'down' : 'conscious')
+              : (p.currentHp === 0 ? (p.type === 'monster' ? 'dead' : 'dying') : 'conscious'));
+            const isZeroHp = p.currentHp <= 0;
             const isDead = participantStatus === 'dead';
+            const isDown = participantStatus === 'down';
 
             return (
               <li
@@ -1452,6 +1494,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                       )}
                       {hasDeathSaves && participantStatus === 'dying' && <span className="ml-2 text-xs text-red-300 font-semibold animate-pulse">(Dying)</span>}
                       {hasDeathSaves && participantStatus === 'stable' && (p.conditions || []).includes('unconscious') && <span className="ml-2 text-xs text-emerald-300 font-semibold">(Unconscious)</span>}
+                      {isDown && <span className="ml-2 text-xs text-red-300 font-semibold animate-pulse">(Down)</span>}
                       {isDead && <span className="ml-2 px-2 py-0.5 rounded bg-red-950 border border-red-500 text-red-200 text-xs font-bold">DEAD</span>}
                     </p>
                     <div className={`text-sm ${isCurrentTurn && !encounter.isPaused ? 'text-green-100' : 'text-stone-200'} flex items-center gap-2`}>
@@ -1477,11 +1520,17 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                     </div>
                     
                     {participantStatus === 'dead' && (
-                      <button onClick={() => handleRevive(p.id)} className="mt-2 inline-flex items-center gap-1 self-start px-2.5 py-1 text-xs rounded bg-emerald-800 hover:bg-emerald-700 text-white" title="Revive to 0 HP, stable and unconscious">
+                      <button onClick={() => handleRevive(p.id)} className="mt-2 inline-flex items-center gap-1 self-start px-2.5 py-1 text-xs rounded bg-emerald-800 hover:bg-emerald-700 text-white" title="Revive (clear dead status)">
                         <HeartPulse size={14} /> Revive
                       </button>
                     )}
 
+                    {isGeneric && !isDead && (
+                      <button onClick={() => handleMarkDead(p.id)} className="mt-2 inline-flex items-center gap-1 self-start px-2.5 py-1 text-xs rounded bg-red-900 hover:bg-red-800 text-white" title="Mark dead">
+                        <HeartCrack size={14} /> Mark Dead
+                      </button>
+                    )}
+
                     {hasDeathSaves && participantStatus === 'stable' && (
                       <div className="mt-2 text-xs text-emerald-300/80 italic">Stable — regains 1 HP after 1d4 hours</div>
                     )}
@@ -1950,6 +1999,7 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
     campaignId ? getPath.encounters(campaignId) : null
   );
   const { data: activeDisplayInfo } = useFirestoreDocument(getPath.activeDisplay());
+  const { data: campaignDoc } = useFirestoreDocument(campaignId ? getPath.campaign(campaignId) : null);
 
   const [encounters, setEncounters] = useState([]);
   const [selectedEncounterId, setSelectedEncounterId] = useState(null);
@@ -1992,7 +2042,7 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
     }
   }, [campaignId, initialActiveEncounterId, activeDisplayInfo, encounters]);
 
-  const handleCreateEncounter = async (name) => {
+  const handleCreateEncounter = async (name, ruleset = '5e') => {
     if (!db || !name.trim() || !campaignId) return;
 
     const newEncounterId = generateId();
@@ -2005,7 +2055,8 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
         round: 0,
         currentTurnParticipantId: null,
         isStarted: false,
-        isPaused: false
+        isPaused: false,
+        ruleset: ruleset || '5e',
       });
 
       setShowCreateModal(false);
@@ -2153,8 +2204,10 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
         {showCreateModal && (
           <Modal onClose={() => setShowCreateModal(false)} title="Create New Encounter">
             <CreateEncounterForm
+              key={campaignId}
               onCreate={handleCreateEncounter}
               onCancel={() => setShowCreateModal(false)}
+              defaultRuleset={campaignDoc?.ruleset || '5e'}
             />
           </Modal>
         )}
@@ -2283,7 +2336,7 @@ function AdminView({ userId }) {
     }
   }, [initialActiveInfo, campaignsWithDetails, selectedCampaignId]);
 
-  const handleCreateCampaign = async (name, backgroundUrl) => {
+  const handleCreateCampaign = async (name, backgroundUrl, ruleset = '5e') => {
     if (!db || !name.trim()) return;
 
     const newCampaignId = generateId();
@@ -2295,6 +2348,7 @@ function AdminView({ userId }) {
         ownerId: userId,
         createdAt: new Date().toISOString(),
         players: [],
+        ruleset: ruleset || '5e',
       });
 
       setShowCreateModal(false);
@@ -2478,6 +2532,12 @@ function AdminView({ userId }) {
                     >
                       <Trash2 size={14} className="mr-1" /> Delete
                     </button>
+                    <span
+                      className={`absolute bottom-2 right-2 z-20 px-2 py-0.5 rounded text-xs font-bold tracking-wide ${campaign.ruleset === 'generic' ? 'bg-purple-900/80 text-purple-200 border border-purple-500' : 'bg-amber-900/80 text-amber-200 border border-amber-500'}`}
+                      title={campaign.ruleset === 'generic' ? 'Generic ruleset' : 'D&D 5e ruleset'}
+                    >
+                      {campaign.ruleset === 'generic' ? 'GEN' : '5e'}
+                    </span>
                   </div>
                 </div>
               );
@@ -2847,8 +2907,9 @@ function DisplayView() {
 
         <div className="space-y-4 max-w-3xl mx-auto">
           {participantsToRender.map(p => {
-            const status = p.status || (p.currentHp === 0 ? 'dying' : 'conscious');
-            const isZeroHp = p.currentHp === 0;
+            const isGeneric = (activeEncounterData.ruleset || '5e') === 'generic';
+            const status = p.status || (isGeneric ? (p.currentHp <= 0 ? 'down' : 'conscious') : (p.currentHp === 0 ? 'dying' : 'conscious'));
+            const isZeroHp = p.currentHp <= 0;
             let participantBgColor = p.type === 'monster' || p.type === 'npc'
               ? 'bg-[#8e351c]'
               : 'bg-indigo-950';
@@ -2882,6 +2943,7 @@ function DisplayView() {
                     )}
                     {status === 'dying' && <span className="text-red-300 text-lg ml-2">(Dying)</span>}
                     {status === 'stable' && (p.conditions || []).includes('unconscious') && <span className="text-emerald-300 text-lg ml-2">(Unconscious)</span>}
+                    {status === 'down' && <span className="text-red-300 text-lg ml-2 animate-pulse">(Down)</span>}
                     {status === 'dead' && <span className="text-red-300 text-lg ml-2">(Dead)</span>}
                   </h3>
                   <span
-- 
2.34.1


From a5b6d61e832fe73a4d6c5505dcf9c538c4ad10a5 Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Tue, 7 Jul 2026 14:28:32 -0400
Subject: [PATCH 02/24] Generic ruleset UI + campaign/encounter tags +
 switch-during-combat fix

Campaign + encounter cards: ruleset tag (5e/GEN), create date visible.
CreateEncounterForm keyed by campaignId so default ruleset syncs on campaign switch.

Campaign switch during active combat:
- encounterStartedRef (unpaused) blocks switch + toast
- encounterActiveRef (started paused-or-not) gates display-follow effect
- manualSelectRef tracks user clicks; external display change clears it
  (BUG-12 follow still works for replay/other-DM)
- Prevents revert race when EncounterManager unmounts and refs go false

UI:
- campaign card: ruleset tag bottom-right, opposite delete
- encounter card: tag inline title, date left of participants count
- EncounterManager fetches campaignDoc for default ruleset inheritance

Tests green: app 100, shared 186, server 40.
---
 src/App.js | 46 +++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index 7ee76e2..63fbbf4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1993,7 +1993,7 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
 // ENCOUNTER MANAGER COMPONENT
 // ============================================================================
 
-function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharacters }) {
+function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharacters, encounterStartedRef, encounterActiveRef }) {
   const { showToast } = useUIFeedback();
   const { data: encountersData, isLoading: isLoadingEncounters } = useFirestoreCollection(
     campaignId ? getPath.encounters(campaignId) : null
@@ -2130,6 +2130,15 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
 
   const selectedEncounter = encounters?.find(e => e.id === selectedEncounterId);
 
+  useEffect(() => {
+    if (encounterStartedRef) {
+      encounterStartedRef.current = !!(selectedEncounter && selectedEncounter.isStarted && !selectedEncounter.isPaused);
+    }
+    if (encounterActiveRef) {
+      encounterActiveRef.current = !!(selectedEncounter && selectedEncounter.isStarted);
+    }
+  }, [selectedEncounter, encounterStartedRef, encounterActiveRef]);
+
   if (isLoadingEncounters && campaignId) {
     return <p className="text-center text-stone-300 mt-4">Loading encounters...</p>;
   }
@@ -2166,9 +2175,9 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
               >
                 <div className="flex justify-between items-center">
                   <div onClick={() => setSelectedEncounterId(encounter.id)} className="cursor-pointer flex-grow">
-                    <h4 className="font-medium text-white">{encounter.name}</h4>
+                    <h4 className="font-medium text-white">{encounter.name} <span className={`ml-1 px-1.5 py-0.5 rounded text-xs font-bold tracking-wide ${encounter.ruleset === 'generic' ? 'bg-purple-900/80 text-purple-200 border border-purple-500' : 'bg-amber-900/80 text-amber-200 border border-amber-500'}`}>{encounter.ruleset === 'generic' ? 'GEN' : '5e'}</span></h4>
                     <p className="text-xs text-stone-300">
-                      Participants: {encounter.participants?.length || 0}
+                      {encounter.createdAt && `${new Date(encounter.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false })} · `}Participants: {encounter.participants?.length || 0}
                     </p>
                     {isLive && (
                       <span className="text-xs text-green-400 font-semibold block mt-1">
@@ -2265,6 +2274,19 @@ function AdminView({ userId }) {
 
   const [campaignsWithDetails, setCampaignsWithDetails] = useState([]);
   const [selectedCampaignId, setSelectedCampaignId] = useState(null);
+  const encounterStartedRef = useRef(false);
+  const encounterActiveRef = useRef(false);
+  const manualSelectRef = useRef(false);
+  const prevDisplayCampaignRef = useRef(null);
+
+  // External display change (replay/other DM) = clear manual override, allow follow.
+  useEffect(() => {
+    const cur = initialActiveInfo?.activeCampaignId || null;
+    if (cur !== prevDisplayCampaignRef.current) {
+      manualSelectRef.current = false;
+      prevDisplayCampaignRef.current = cur;
+    }
+  }, [initialActiveInfo]);
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [itemToDelete, setItemToDelete] = useState(null);
@@ -2324,10 +2346,15 @@ function AdminView({ userId }) {
   }, [campaignsData]);
 
   useEffect(() => {
+    // Skip follow only if user manually selected AND display hasn't changed.
+    // (external display change clears manualSelectRef via prevDisplay effect)
+    if (manualSelectRef.current && selectedCampaignId !== initialActiveInfo?.activeCampaignId) return;
     if (
       initialActiveInfo &&
       initialActiveInfo.activeCampaignId &&
-      campaignsWithDetails.length > 0
+      campaignsWithDetails.length > 0 &&
+      !encounterStartedRef.current &&
+      !encounterActiveRef.current
     ) {
       const campaignExists = campaignsWithDetails.some(c => c.id === initialActiveInfo.activeCampaignId);
       if (campaignExists && selectedCampaignId !== initialActiveInfo.activeCampaignId) {
@@ -2500,7 +2527,14 @@ function AdminView({ userId }) {
               return (
                 <div
                   key={campaign.id}
-                  onClick={() => setSelectedCampaignId(campaign.id)}
+                  onClick={() => {
+                    if (encounterStartedRef.current) {
+                      showToast('End or pause active encounter before switching campaigns.');
+                      return;
+                    }
+                    manualSelectRef.current = true;
+                    setSelectedCampaignId(campaign.id);
+                  }}
                   className={cardClasses}
                   style={cardStyle}
                 >
@@ -2574,6 +2608,8 @@ function AdminView({ userId }) {
                   : null
               }
               campaignCharacters={selectedCampaign.characters || []}
+              encounterStartedRef={encounterStartedRef}
+              encounterActiveRef={encounterActiveRef}
             />
           </div>
         )}
-- 
2.34.1


From 95db6fdfdc6aad269e1e067ee8a4c5aeec2faca5 Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Tue, 7 Jul 2026 14:31:04 -0400
Subject: [PATCH 03/24] Character section rollup: clickable title, count,
 persisted collapse

Match campaigns rollup pattern. Title button toggles collapse (chevron
left, like campaigns). Character count in header. Collapse state persisted
to localStorage key ttrpg.charactersCollapsed.
---
 TODO.md    | 13 -------------
 src/App.js | 22 ++++++++++++++--------
 2 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/TODO.md b/TODO.md
index 529c687..68d6594 100644
--- a/TODO.md
+++ b/TODO.md
@@ -50,19 +50,6 @@ lots of updates
 - `isActive = id => updatedParticipants.find(p => p.id === id && p.isActive)`
 - Returns participant obj (truthy) not boolean. Works by accident, fragile.
 
-### BUG: select campaign during active combat = screen flicker, no action
-- In active encounter, click different campaign → flicker, no nav, no end.
-- Either block (toast: end encounter first) or auto-end current + switch.
-- Decide UX before fix.
-
-
-### FEAT: generic/non-5e rules mode
-- Campaign/encounter ruleset toggle: `5e` vs `generic`.
-- Generic mode turns off death saves/state machine.
-- Generic mode allows negative HP.
-- 5e mode rejects negative damage/heal and clamps HP at 0.
-
-
 
 ### FEAT: clarify "Is NPC" in add-participant
 - Ambiguous label. May expand work based on what NPC means here (ally? monster?
diff --git a/src/App.js b/src/App.js
index 63fbbf4..84ff2aa 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,7 +5,7 @@ import {
   PlusCircle, Users, Swords, Trash2, Eye, Edit3, Save, XCircle, ChevronsUpDown,
   UserCheck, UserX, HeartCrack, HeartPulse, Zap, EyeOff, ExternalLink, AlertTriangle,
   Play as PlayIcon, Pause as PauseIcon, SkipForward as SkipForwardIcon,
-  StopCircle as StopCircleIcon, Users2, Dices, ChevronUp, ChevronDown, ScrollText,
+  StopCircle as StopCircleIcon, Users2, Dices, ChevronDown, ScrollText,
   Maximize2, Minimize2, Moon, Coffee, Clock, ChevronRight, X,
   Undo2, Redo2, Crosshair
 } from 'lucide-react';
@@ -682,7 +682,14 @@ function CharacterManager({ campaignId, campaignCharacters }) {
   const [editingCharacter, setEditingCharacter] = useState(null);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [itemToDelete, setItemToDelete] = useState(null);
-  const [isOpen, setIsOpen] = useState(true);
+  const [isOpen, setIsOpen] = useState(() => {
+    try { return localStorage.getItem('ttrpg.charactersCollapsed') !== 'true'; }
+    catch { return true; }
+  });
+  useEffect(() => {
+    try { localStorage.setItem('ttrpg.charactersCollapsed', String(!isOpen)); }
+    catch {}
+  }, [isOpen]);
 
   const handleAddCharacter = async () => {
     if (!db || !characterName.trim() || !campaignId) return;
@@ -769,15 +776,14 @@ function CharacterManager({ campaignId, campaignCharacters }) {
     <>
       <div className="p-4 bg-stone-900 rounded-lg shadow">
         <div className="flex justify-between items-center mb-3">
-          <h3 className="text-xl font-semibold text-amber-300 font-cinzel tracking-wide flex items-center">
-            <Users size={24} className="mr-2" /> Campaign Characters
-          </h3>
           <button
             onClick={() => setIsOpen(!isOpen)}
-            className="p-1 text-stone-400 hover:text-stone-200"
-            aria-label={isOpen ? "Collapse" : "Expand"}
+            className="flex items-center text-xl font-semibold text-amber-300 font-cinzel tracking-wide hover:text-amber-200 transition-colors"
+            aria-expanded={isOpen}
           >
-            {isOpen ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
+            {isOpen ? <ChevronDown size={20} className="mr-1" /> : <ChevronRight size={20} className="mr-1" />}
+            <Users size={24} className="mr-2" /> Campaign Characters
+            <span className="text-sm font-normal text-stone-400 ml-1">({campaignCharacters.length})</span>
           </button>
         </div>
 
-- 
2.34.1


From 94126567e742b62f0dd52523032cc6ad59af1fa8 Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Tue, 7 Jul 2026 15:18:08 -0400
Subject: [PATCH 04/24] Encounter drag reorder via order field

Encounter cards draggable (ChevronsUpDown handle). Drop reorders, batch
updates order field on affected encounter docs. Sort by order (fallback
createdAt). New encounter gets order = max+1.
---
 src/App.js | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 53 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index 84ff2aa..f9f3497 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2012,6 +2012,7 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [itemToDelete, setItemToDelete] = useState(null);
+  const [draggedEncounterId, setDraggedEncounterId] = useState(null);
 
   const selectedEncounterIdRef = useRef(selectedEncounterId);
 
@@ -2019,6 +2020,45 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
     if (encountersData) setEncounters(encountersData);
   }, [encountersData]);
 
+  // Sort by order field (fallback createdAt). Drag reorder writes order.
+  const sortedEncounters = [...(encounters || [])].sort((a, b) => {
+    const ao = a.order ?? null, bo = b.order ?? null;
+    if (ao !== null && bo !== null) return ao - bo;
+    if (ao !== null) return -1;
+    if (bo !== null) return 1;
+    return (a.createdAt || '').localeCompare(b.createdAt || '');
+  });
+
+  const handleEncounterDragStart = (e, id) => {
+    setDraggedEncounterId(id);
+    e.dataTransfer.effectAllowed = 'move';
+  };
+  const handleEncounterDragOver = (e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+  };
+  const handleEncounterDrop = async (e, targetId) => {
+    e.preventDefault();
+    if (!db || !draggedEncounterId || draggedEncounterId === targetId) {
+      setDraggedEncounterId(null);
+      return;
+    }
+    const reordered = [...sortedEncounters];
+    const fromIdx = reordered.findIndex(x => x.id === draggedEncounterId);
+    const toIdx = reordered.findIndex(x => x.id === targetId);
+    if (fromIdx === -1 || toIdx === -1) { setDraggedEncounterId(null); return; }
+    const [moved] = reordered.splice(fromIdx, 1);
+    reordered.splice(toIdx, 0, moved);
+    // assign order = index, batch update
+    const ops = reordered.map((enc, i) => ({
+      type: 'update',
+      path: `${getPath.encounters(campaignId)}/${enc.id}`,
+      data: { order: i },
+    }));
+    try { await storage.batchWrite(ops); } catch (err) {}
+    setDraggedEncounterId(null);
+  };
+
   useEffect(() => {
     selectedEncounterIdRef.current = selectedEncounterId;
   }, [selectedEncounterId]);
@@ -2063,6 +2103,7 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
         isStarted: false,
         isPaused: false,
         ruleset: ruleset || '5e',
+        order: (encounters || []).reduce((max, e) => Math.max(max, e.order ?? -1), -1) + 1,
       });
 
       setShowCreateModal(false);
@@ -2169,7 +2210,7 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
         )}
 
         <div className="space-y-3">
-          {encounters?.map(encounter => {
+          {sortedEncounters.map(encounter => {
             const isLive = activeDisplayInfo &&
               activeDisplayInfo.activeCampaignId === campaignId &&
               activeDisplayInfo.activeEncounterId === encounter.id;
@@ -2177,7 +2218,12 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
             return (
               <div
                 key={encounter.id}
-                className={`p-3 rounded-md shadow transition-all ${selectedEncounterId === encounter.id ? 'bg-amber-900 ring-2 ring-amber-500' : 'bg-stone-800 hover:bg-stone-700'} ${isLive ? 'ring-2 ring-green-500 shadow-md shadow-green-500/30' : ''}`}
+                draggable
+                onDragStart={(e) => handleEncounterDragStart(e, encounter.id)}
+                onDragOver={handleEncounterDragOver}
+                onDrop={(e) => handleEncounterDrop(e, encounter.id)}
+                onDragEnd={() => setDraggedEncounterId(null)}
+                className={`p-3 rounded-md shadow transition-all ${selectedEncounterId === encounter.id ? 'bg-amber-900 ring-2 ring-amber-500' : 'bg-stone-800 hover:bg-stone-700'} ${isLive ? 'ring-2 ring-green-500 shadow-md shadow-green-500/30' : ''} ${draggedEncounterId === encounter.id ? 'opacity-50 ring-2 ring-yellow-400' : ''} cursor-grab`}
               >
                 <div className="flex justify-between items-center">
                   <div onClick={() => setSelectedEncounterId(encounter.id)} className="cursor-pointer flex-grow">
@@ -2192,6 +2238,11 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
                     )}
                   </div>
                   <div className="flex items-center space-x-2">
+                    <ChevronsUpDown
+                      size={18}
+                      className="text-stone-400 flex-shrink-0 cursor-grab"
+                      title="Drag to reorder"
+                    />
                     <button
                       onClick={() => handleTogglePlayerDisplay(encounter.id)}
                       className={`p-1 rounded transition-colors ${isLive ? 'bg-red-500 hover:bg-red-600 text-white' : 'text-amber-400 hover:text-amber-300 bg-stone-700 hover:bg-stone-600'}`}
-- 
2.34.1


From 1078062b53cecd0a414f81aeb2787391f885cb17 Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Tue, 7 Jul 2026 15:24:12 -0400
Subject: [PATCH 05/24] Campaign drag reorder via order field

Campaign cards draggable (ChevronsUpDown handle in header). Drop reorders,
batch updates order field on affected campaign docs. Sort by order (fallback
createdAt). New campaign gets order = max+1.
---
 src/App.js | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index f9f3497..8bd76d4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2330,6 +2330,7 @@ function AdminView({ userId }) {
   const { data: initialActiveInfo } = useFirestoreDocument(getPath.activeDisplay());
 
   const [campaignsWithDetails, setCampaignsWithDetails] = useState([]);
+  const [draggedCampaignId, setDraggedCampaignId] = useState(null);
   const [selectedCampaignId, setSelectedCampaignId] = useState(null);
   const encounterStartedRef = useRef(false);
   const encounterActiveRef = useRef(false);
@@ -2390,6 +2391,10 @@ function AdminView({ userId }) {
       fetchDetails();
     } else if (campaignsData) {
       const sorted = [...campaignsData].sort((a, b) => {
+        const ao = a.order ?? null, bo = b.order ?? null;
+        if (ao !== null && bo !== null) return ao - bo;
+        if (ao !== null) return -1;
+        if (bo !== null) return 1;
         const at = a.createdAt || 0;
         const bt = b.createdAt || 0;
         if (at === bt) return (a.name || '').localeCompare(b.name || '');
@@ -2433,6 +2438,7 @@ function AdminView({ userId }) {
         createdAt: new Date().toISOString(),
         players: [],
         ruleset: ruleset || '5e',
+        order: (campaignsWithDetails || []).reduce((max, c) => Math.max(max, c.order ?? -1), -1) + 1,
       });
 
       setShowCreateModal(false);
@@ -2579,11 +2585,28 @@ function AdminView({ userId }) {
                 ? { backgroundImage: `url(${campaign.playerDisplayBackgroundUrl})` }
                 : {};
 
-              const cardClasses = `h-40 flex flex-col justify-between rounded-lg shadow-md cursor-pointer transition-all relative overflow-hidden bg-cover bg-center ${selectedCampaignId === campaign.id ? 'ring-4 ring-amber-500' : ''} ${!campaign.playerDisplayBackgroundUrl ? 'bg-stone-800 hover:bg-stone-700' : 'hover:shadow-xl'}`;
+              const cardClasses = `h-40 flex flex-col justify-between rounded-lg shadow-md cursor-grab transition-all relative overflow-hidden bg-cover bg-center ${selectedCampaignId === campaign.id ? 'ring-4 ring-amber-500' : ''} ${!campaign.playerDisplayBackgroundUrl ? 'bg-stone-800 hover:bg-stone-700' : 'hover:shadow-xl'} ${draggedCampaignId === campaign.id ? 'opacity-50 ring-2 ring-yellow-400' : ''}`;
 
               return (
                 <div
                   key={campaign.id}
+                  draggable
+                  onDragStart={(e) => { setDraggedCampaignId(campaign.id); e.dataTransfer.effectAllowed = 'move'; }}
+                  onDragOver={(e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; }}
+                  onDrop={async (e) => {
+                    e.preventDefault();
+                    if (!db || !draggedCampaignId || draggedCampaignId === campaign.id) { setDraggedCampaignId(null); return; }
+                    const reordered = [...campaignsWithDetails];
+                    const fromIdx = reordered.findIndex(c => c.id === draggedCampaignId);
+                    const toIdx = reordered.findIndex(c => c.id === campaign.id);
+                    if (fromIdx === -1 || toIdx === -1) { setDraggedCampaignId(null); return; }
+                    const [moved] = reordered.splice(fromIdx, 1);
+                    reordered.splice(toIdx, 0, moved);
+                    const ops = reordered.map((c, i) => ({ type: 'update', path: getPath.campaign(c.id), data: { order: i } }));
+                    try { await storage.batchWrite(ops); } catch (err) {}
+                    setDraggedCampaignId(null);
+                  }}
+                  onDragEnd={() => setDraggedCampaignId(null)}
                   onClick={() => {
                     if (encounterStartedRef.current) {
                       showToast('End or pause active encounter before switching campaigns.');
@@ -2599,7 +2622,10 @@ function AdminView({ userId }) {
                     className={`relative z-10 flex flex-col justify-between h-full ${campaign.playerDisplayBackgroundUrl ? 'bg-black bg-opacity-60 p-3' : 'p-4'}`}
                   >
                     <div>
-                      <h3 className="text-xl font-semibold text-white">{campaign.name}</h3>
+                      <div className="flex items-center gap-1">
+                        <ChevronsUpDown size={14} className="text-white/60 flex-shrink-0" title="Drag to reorder" />
+                        <h3 className="text-xl font-semibold text-white">{campaign.name}</h3>
+                      </div>
                       <div className="text-xs text-stone-100 mt-1 space-x-3">
                         <span className="inline-flex items-center">
                           <Users size={12} className="mr-1" /> {campaign.characters?.length || 0} Characters
-- 
2.34.1


From 9dbbb887306f3f78d7ad521b8e355bc87df264e2 Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Tue, 7 Jul 2026 15:37:04 -0400
Subject: [PATCH 06/24] Campaign drag reorder: fix sort in fetchDetails path

fetchDetails (db active path) sorted by createdAt, ignored order field.
Drag persisted but UI didn't re-sort. Now both paths sort by order
(fallback createdAt).
---
 src/App.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 8bd76d4..d1bfff8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2377,8 +2377,12 @@ function AdminView({ userId }) {
           })
         );
 
-        // newest first by createdAt (fallback to name for stable order).
+        // sort by order field (fallback createdAt)
         detailedCampaigns.sort((a, b) => {
+          const ao = a.order ?? null, bo = b.order ?? null;
+          if (ao !== null && bo !== null) return ao - bo;
+          if (ao !== null) return -1;
+          if (bo !== null) return 1;
           const at = a.createdAt || 0;
           const bt = b.createdAt || 0;
           if (at === bt) return (a.name || '').localeCompare(b.name || '');
-- 
2.34.1


From 907484fc7fa92da04dc6d142fcdc509c33855b39 Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Tue, 7 Jul 2026 15:40:58 -0400
Subject: [PATCH 07/24] Character drag reorder via players array

Character list items draggable (ChevronsUpDown handle). Drop reorders
players array on campaign doc (single updateDoc). Array order = display
order.
---
 src/App.js | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index d1bfff8..debef6e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -682,6 +682,22 @@ function CharacterManager({ campaignId, campaignCharacters }) {
   const [editingCharacter, setEditingCharacter] = useState(null);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [itemToDelete, setItemToDelete] = useState(null);
+  const [draggedCharId, setDraggedCharId] = useState(null);
+
+  const handleCharDragStart = (e, id) => { setDraggedCharId(id); e.dataTransfer.effectAllowed = 'move'; };
+  const handleCharDragOver = (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; };
+  const handleCharDrop = async (e, targetId) => {
+    e.preventDefault();
+    if (!campaignId || !draggedCharId || draggedCharId === targetId) { setDraggedCharId(null); return; }
+    const reordered = [...campaignCharacters];
+    const fromIdx = reordered.findIndex(c => c.id === draggedCharId);
+    const toIdx = reordered.findIndex(c => c.id === targetId);
+    if (fromIdx === -1 || toIdx === -1) { setDraggedCharId(null); return; }
+    const [moved] = reordered.splice(fromIdx, 1);
+    reordered.splice(toIdx, 0, moved);
+    try { await storage.updateDoc(getPath.campaign(campaignId), { players: reordered }); } catch (err) {}
+    setDraggedCharId(null);
+  };
   const [isOpen, setIsOpen] = useState(() => {
     try { return localStorage.getItem('ttrpg.charactersCollapsed') !== 'true'; }
     catch { return true; }
@@ -841,7 +857,17 @@ function CharacterManager({ campaignId, campaignCharacters }) {
 
             <ul className="space-y-2">
               {campaignCharacters.map(character => (
-                <li key={character.id} className="flex justify-between items-center p-3 bg-stone-800 rounded-md">
+                <li
+                  key={character.id}
+                  draggable
+                  onDragStart={(e) => handleCharDragStart(e, character.id)}
+                  onDragOver={handleCharDragOver}
+                  onDrop={(e) => handleCharDrop(e, character.id)}
+                  onDragEnd={() => setDraggedCharId(null)}
+                  className={`flex justify-between items-center p-3 bg-stone-800 rounded-md cursor-grab ${draggedCharId === character.id ? 'opacity-50 ring-2 ring-yellow-400' : ''}`}
+                >
+                  <div className="flex items-center flex-grow">
+                    <ChevronsUpDown size={16} className="text-stone-400 flex-shrink-0 mr-2" title="Drag to reorder" />
                   {editingCharacter && editingCharacter.id === character.id ? (
                     <form
                       onSubmit={(e) => {
@@ -917,6 +943,7 @@ function CharacterManager({ campaignId, campaignCharacters }) {
                       </div>
                     </>
                   )}
+                  </div>
                 </li>
               ))}
             </ul>
-- 
2.34.1


From 43b1f6ce41e1731b59d04dc8871bae1d869137aa Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Tue, 7 Jul 2026 15:42:02 -0400
Subject: [PATCH 08/24] WIP: add ttrpg-encounter-builder skill + server-mode
 API docs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UNTESTED work in progress. Do not assume correct.

Scope: SERVER BACKEND ONLY (SQLite/Express, REACT_APP_STORAGE=server).
Does NOT work with Firebase SDK mode — no HTTP backend there, different
transport/auth. Skill + doc explicitly call this out.

- .agents/skills/ttrpg-encounter-builder/: harness-agnostic skill
  (pi/claude/codex via .agents/skills + symlinks). SKILL.md + helper
  script that batch-writes encounters via REST, rolls initiative, verifies.
- docs/ENCOUNTER_BUILDER.md: add Path normalization section, Build flow
  (API/scripts) section with REST endpoint table, object templates,
  recipe. Server-mode-only caveat noted.

Helper script syntax-checked + campaign lookup verified against running
instance, but full seed flow not regression-tested against test suite.
---
 .../skills/ttrpg-encounter-builder/SKILL.md   | 294 ++++++++++++++++++
 .../scripts/build-encounters.js               | 149 +++++++++
 docs/ENCOUNTER_BUILDER.md                     | 108 +++++++
 3 files changed, 551 insertions(+)
 create mode 100644 .agents/skills/ttrpg-encounter-builder/SKILL.md
 create mode 100644 .agents/skills/ttrpg-encounter-builder/scripts/build-encounters.js

diff --git a/.agents/skills/ttrpg-encounter-builder/SKILL.md b/.agents/skills/ttrpg-encounter-builder/SKILL.md
new file mode 100644
index 0000000..89ff02c
--- /dev/null
+++ b/.agents/skills/ttrpg-encounter-builder/SKILL.md
@@ -0,0 +1,294 @@
+---
+name: ttrpg-encounter-builder
+description: |
+  Seeds D&D encounter rosters into the TTRPG Initiative Tracker via its REST API
+  (no UI clicking). Use when the user asks to "set up encounters", "build
+  encounters", "add participants to a campaign", "seed this encounter list",
+  or provides a statblock list (name + HP + init) for a campaign running on a
+  self-hosted tracker instance running in SERVER MODE (bundled Express
+  backend). NOT for Firebase SDK mode — that has no HTTP backend; write path
+  differs entirely. Harness-agnostic: pi, Claude Code, and Codex all run the
+  same script + curl recipes.
+---
+
+# TTRPG Encounter Builder
+
+Build encounter rosters directly via the tracker REST API. No UI clicking, no
+browser automation. One batch write per session, then verify.
+
+## When to use
+
+User provides a campaign name + a list of encounters, each with named
+participants carrying HP and initiative modifiers (or rolled initiative).
+Examples:
+
+- "set up these encounters in the 2026 D&D campaign on bee.icantclick.org:8080"
+- "build encounter: Barrowdeep 1 - Ankheg HP 45 Init +0"
+- "seed these statblocks into my tracker"
+
+Do NOT use for: starting combat, rolling HP mid-fight, editing live combat
+state, or driving the player display. Those are in-combat ops, not build ops.
+
+## Prerequisites
+
+- A running tracker instance in **SERVER MODE** (`REACT_APP_STORAGE=server`,
+  bundled Express backend mounted). Reachable over HTTP.
+  - **Firebase SDK mode NOT supported.** No `/api/*` endpoints exist; data
+    lives in Firestore via the in-browser SDK with different auth + write
+    paths. This skill cannot reach it. If the user is on firebase mode, tell
+    them: switch to server mode, or build encounters via the UI / a
+    firebase-admin script (out of scope here).
+- Node.js 18+ (for `fetch` + `crypto.randomUUID`). Helper script uses only
+  builtins — no `npm install`.
+- Campaign must already exist (created via UI or `POST /api/collection`).
+  This skill adds encounters to an existing campaign.
+
+Confirm host reachable + server mode before building:
+
+```bash
+curl -s <HOST>/api/collection?path=campaigns | head -c 200
+```
+
+Returns JSON array of campaign docs = server mode confirmed. HTML (SPA shell)
+= firebase mode OR backend not mounted. Either way, this skill won't work —
+tell the user.
+
+## Data model (read this before writing)
+
+Three nested entities, all opaque JSON docs in a path-keyed KV store:
+
+```
+Campaign        campaigns/{campaignId}
+  └─ Encounter  campaigns/{campaignId}/encounters/{encounterId}
+       └─ Participant  (inline array item on the encounter doc)
+```
+
+**Participants are inline.** There is NO `participants` sub-collection. A
+`participants` path returns empty. Each encounter doc carries its full roster
+in a `participants[]` array.
+
+### Path normalization (gotcha)
+
+App code uses firebase-prefixed paths (`artifacts/{APP_ID}/public/data/campaigns/...`).
+The REST API uses **bare canonical** paths (`campaigns/...`). The adapter
+strips the prefix server-side.
+
+- REST / scripts / direct DB → bare: `campaigns/{cid}/encounters/{eid}`
+- If `GET /api/collection?path=artifacts/.../campaigns` returns `[]`, you used
+  the prefixed form. Drop the prefix.
+
+### Encounter doc shape
+
+```js
+{
+  name: 'Barrowdeep 1 - Antechamber',
+  createdAt: new Date().toISOString(),
+  participants: [],                  // inline roster
+  round: 0,
+  currentTurnParticipantId: null,
+  isStarted: false,
+  isPaused: false,
+  ruleset: '5e',
+}
+```
+
+Build encounters with `round: 0`, `isStarted: false`. Starting combat is a
+separate in-combat op (UI Start button or a later skill).
+
+### Participant object shape
+
+```js
+{
+  id: <uuid>,                        // crypto.randomUUID(), client-generated
+  name: 'Ankheg',
+  type: 'monster',                   // 'monster' | 'npc' | 'character'
+  originalCharacterId: null,         // set only if type === 'character'
+  initiative: <int>,                 // rolled ONCE at add; stored, not re-derived
+  maxHp: 45,
+  currentHp: 45,                     // start at full
+  conditions: [],
+  isActive: true,
+  status: 'conscious',
+  deathSaveSuccesses: 0,             // character/npc only
+  deathSaveFailures: 0,              // character/npc only
+}
+```
+
+### type field
+
+- `monster` — DM-controlled, dead at 0 HP (auto-inactive). Default.
+- `npc` — DM-controlled but keeps death saves (revivable). Use for named
+  allies/villains the DM runs.
+- `character` — player character. Requires `originalCharacterId` linking to a
+  campaign roster entry. For build-from-statblock, use `monster` or `npc`,
+  not `character`.
+
+### Initiative semantics
+
+- Default: `initiative = rollD20() + initMod` (d20 ∈ [1,20], rolled fresh per
+  participant).
+- Manual override: set `initiative` directly (pre-rolled values), skip the
+  roll. `initMod` is NOT stored on the participant — only the final
+  `initiative` value persists.
+- Fixed at add time. Never re-derived after.
+
+### id format
+
+`generateId()` = `crypto.randomUUID()` (fallback `id_{Date.now()}_{rand10}`).
+Generate participant ids client-side so they're stable across batch writes.
+Server `POST /api/collection` auto-generates a UUID for the doc id — fine for
+campaigns/encounters, but for inline participants you generate them yourself.
+
+## REST endpoints
+
+All paths bare canonical.
+
+| Method | Path | Body / Query | Action |
+|---|---|---|---|
+| `GET` | `/api/doc` | `?path=` | read one doc |
+| `PUT` | `/api/doc` | `{path, data}` | replace doc |
+| `PATCH` | `/api/doc` | `{path, patch}` | shallow merge, create-on-miss |
+| `DELETE` | `/api/doc` | `?path=` | delete one doc |
+| `GET` | `/api/collection` | `?path=` | list docs under collection |
+| `POST` | `/api/collection` | `{path, data}` | addDoc: auto-id under collection |
+| `POST` | `/api/batch` | `{ops:[{type, path, data?}]}` | atomic multi-write |
+
+`POST /api/batch` is the workhorse for seeding. One batch, all encounters,
+atomic.
+
+## Build flow
+
+### 1. Parse the user's request
+
+Extract:
+- **Host** — the running tracker URL (e.g. `http://bee.icantclick.org:8080`).
+  If omitted, ask. Do not guess.
+- **Campaign name** — must match an existing campaign doc's `name` field.
+- **Encounters** — list of `{name, participants:[{name, type?, maxHp, initMod?|initiative?}]}`.
+
+A statblock line like `Ankheg - HP 45 - Init +0` parses to:
+`{name:"Ankheg", type:"monster", maxHp:45, initMod:0}`.
+
+### 2. Resolve the campaign id
+
+Campaigns are keyed by id, not name. Look up by name:
+
+```bash
+curl -s "<HOST>/api/collection?path=campaigns" \
+  | jq -r '.[] | select(.name=="<CAMPAIGN NAME>") | .id'
+```
+
+Exactly one match expected. Zero → campaign doesn't exist (tell user to create
+it first). Multiple → ambiguous name, ask user which id.
+
+### 3. Write encounters (two options)
+
+#### Option A — helper script (recommended)
+
+`scripts/build-encounters.js` handles id gen, initiative rolling, batch write,
+and verification. Reads a spec file or stdin.
+
+Spec format (JSON array):
+```json
+[
+  {
+    "name": "Optional Road/Trail Ankheg",
+    "participants": [
+      { "name": "Ankheg", "type": "monster", "maxHp": 45, "initMod": 0 }
+    ]
+  },
+  {
+    "name": "Barrowdeep 2 - Minor Burial Chamber",
+    "participants": [
+      { "name": "Cult Fanatic", "type": "monster", "maxHp": 39, "initMod": 2 },
+      { "name": "Cultist 1", "type": "monster", "maxHp": 9, "initMod": 2 },
+      { "name": "Cultist 2", "type": "monster", "maxHp": 9, "initMod": 2 }
+    ]
+  }
+]
+```
+
+Run (resolve script path relative to this skill dir):
+```bash
+node scripts/build-encounters.js <HOST> "<CAMPAIGN NAME>" spec.json
+# or stdin:
+cat spec.json | node scripts/build-encounters.js <HOST> "<CAMPAIGN NAME>" -
+```
+
+Script prints each encounter id + participant init rolls, then verifies.
+
+#### Option B — raw curl (any harness, no node)
+
+Build the batch payload inline. Generate UUIDs and roll initiative yourself.
+One `POST /api/batch` writes everything:
+
+```bash
+curl -s -X POST "<HOST>/api/batch" \
+  -H 'Content-Type: application/json' \
+  -d '{
+    "ops": [
+      {
+        "type": "set",
+        "path": "campaigns/CID/encounters/EID1",
+        "data": {
+          "name": "Optional Road/Trail Ankheg",
+          "createdAt": "2026-07-07T00:00:00.000Z",
+          "participants": [
+            { "id": "UUID1", "name": "Ankheg", "type": "monster", "originalCharacterId": null, "initiative": 15, "maxHp": 45, "currentHp": 45, "conditions": [], "isActive": true, "status": "conscious", "deathSaveSuccesses": 0, "deathSaveFailures": 0 }
+          ],
+          "round": 0, "currentTurnParticipantId": null, "isStarted": false, "isPaused": false, "ruleset": "5e"
+        }
+      }
+    ]
+  }'
+```
+
+Response: `{"ok":true}`. If you get an error, check path is bare (no
+`artifacts/` prefix) and JSON is valid.
+
+### 4. Verify
+
+Always verify after write. Don't trust the batch `ok` alone.
+
+```bash
+curl -s "<HOST>/api/collection?path=campaigns/CID/encounters" \
+  | jq '.[] | {name, participants: (.participants|length), started: .isStarted}'
+```
+
+Expect one object per encounter with correct participant count and
+`started: false`.
+
+### 5. Report back to user
+
+Tell the user:
+- Host + campaign name resolved
+- Per encounter: name, id, participant count, rolled initiatives
+- Verification result (counts matched)
+- That combat is NOT started (encounters sit at `round: 0, isStarted: false`).
+  User starts combat via the UI Start button when ready.
+
+## Common mistakes
+
+| Symptom | Cause | Fix |
+|---|---|---|
+| `GET /api/collection?path=artifacts/.../campaigns` returns `[]` | used firebase-prefixed path | drop `artifacts/{APP_ID}/public/data/` prefix, use bare `campaigns` |
+| `GET /health` or collection returns HTML (SPA shell) | server in firebase mode, or backend not mounted | confirm `REACT_APP_STORAGE=server` + backend running on the instance |
+| Batch returns `ok` but encounter missing | wrong campaign id, or path typo | re-resolve campaign id by name; check path segments |
+| Participant count mismatch on verify | participant objects malformed / dropped in JSON | validate each has all required fields; use script to avoid hand-JSON errors |
+| Initiative looks wrong | forgot `initiative` is stored value, not re-derived | roll `d20 + initMod` once at build, store the int. No `initMod` field on participant. |
+| Duplicate cultist names across encounters | fine — names need only be unique WITHIN an encounter, not across | no fix needed |
+
+## Out of scope
+
+- Creating campaigns (use UI or `POST /api/collection` with a campaign doc)
+- Starting combat / advancing turns / HP damage / death saves (in-combat ops)
+- Player display control (`activeDisplay/status`)
+- Firebase SDK mode (this skill is server-mode REST only)
+- Campaign roster characters (`players[]` on campaign doc) — those are
+  templates; this skill adds inline combatants, not roster entries
+
+## Reference
+
+Full entity model, combat flow, and storage paths: `docs/ENCOUNTER_BUILDER.md`
+in the repo root. REST + DB internals: `docs/DEVELOPMENT.md` and
+`server/index.js`.
diff --git a/.agents/skills/ttrpg-encounter-builder/scripts/build-encounters.js b/.agents/skills/ttrpg-encounter-builder/scripts/build-encounters.js
new file mode 100644
index 0000000..66c1ddb
--- /dev/null
+++ b/.agents/skills/ttrpg-encounter-builder/scripts/build-encounters.js
@@ -0,0 +1,149 @@
+// build-encounters.js — seed TTRPG encounters via REST API.
+// Cross-harness: pi, claude, codex all call same script.
+// No deps beyond node builtins. Reads spec JSON, writes batch, verifies.
+//
+// Usage:
+//   node build-encounters.js <host> <campaignName> <specFile>
+//   cat spec.json | node build-encounters.js <host> <campaignName> -
+//
+// specFile = JSON array of encounters:
+// [
+//   {
+//     "name": "Barrowdeep 1 - Antechamber",
+//     "participants": [
+//       { "name": "Ankheg", "type": "monster", "maxHp": 45, "initMod": 0 },
+//       { "name": "Boss",   "type": "npc",     "maxHp": 39, "initMod": 2, "initiative": 15 }
+//     ]
+//   }
+// ]
+//
+// type: 'monster' | 'npc' | 'character'. Default 'monster'.
+// initiative: optional manual override. If omitted, rolled d20 + initMod.
+// initMod default 0. maxHp default 10.
+//
+// Output: written encounter ids + rolled initiatives. Exit 0 on success.
+
+'use strict';
+const crypto = require('crypto');
+
+const genId = () =>
+  (typeof crypto !== 'undefined' && crypto.randomUUID)
+    ? crypto.randomUUID()
+    : `id_${Date.now()}_${Math.random().toString(36).slice(2, 10)}`;
+const rollD20 = () => Math.floor(Math.random() * 20) + 1;
+
+function makeParticipant(spec) {
+  const type = spec.type || 'monster';
+  const maxHp = spec.maxHp || 10;
+  const initMod = spec.initMod || 0;
+  const manual = spec.initiative !== undefined && spec.initiative !== null;
+  return {
+    id: genId(),
+    name: spec.name,
+    type,
+    originalCharacterId: spec.originalCharacterId || null,
+    initiative: manual ? Number(spec.initiative) : rollD20() + initMod,
+    maxHp,
+    currentHp: maxHp,
+    conditions: [],
+    isActive: true,
+    status: 'conscious',
+    deathSaveSuccesses: 0,
+    deathSaveFailures: 0,
+  };
+}
+
+async function getJson(url) {
+  const r = await fetch(url);
+  if (!r.ok) throw new Error(`GET ${url} -> ${r.status}: ${await r.text()}`);
+  return r.json();
+}
+async function postJson(url, body) {
+  const r = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  if (!r.ok) throw new Error(`POST ${url} -> ${r.status}: ${await r.text()}`);
+  return r.json();
+}
+
+async function findCampaignId(host, name) {
+  const list = await getJson(`${host}/api/collection?path=campaigns`);
+  const matches = list.filter(c => c.name === name);
+  if (matches.length === 0) {
+    console.error(`No campaign named "${name}". Existing:`);
+    list.forEach(c => console.error(`  ${c.name}`));
+    process.exit(2);
+  }
+  if (matches.length > 1) {
+    console.error(`Multiple campaigns named "${name}". Use unique name or pass id.`);
+    matches.forEach(c => console.error(`  ${c.id}  ${c.name}`));
+    process.exit(2);
+  }
+  return matches[0].id;
+}
+
+async function main() {
+  const [host, campaignName, specArg] = process.argv.slice(2);
+  if (!host || !campaignName || !specArg) {
+    console.error('Usage: node build-encounters.js <host> <campaignName> <specFile|->');
+    process.exit(1);
+  }
+  const specRaw = specArg === '-'
+    ? require('fs').readFileSync(0, 'utf8')
+    : require('fs').readFileSync(specArg, 'utf8');
+  const encounters = JSON.parse(specRaw);
+  if (!Array.isArray(encounters)) throw new Error('spec must be a JSON array of encounters');
+
+  const cid = await findCampaignId(host, campaignName);
+  console.log(`campaign: "${campaignName}" -> ${cid}`);
+
+  const encPath = `campaigns/${cid}/encounters`;
+  const now = new Date().toISOString();
+  const ops = [];
+  const summary = [];
+  for (const enc of encounters) {
+    const id = genId();
+    const path = `${encPath}/${id}`;
+    const parts = (enc.participants || []).map(makeParticipant);
+    ops.push({
+      type: 'set',
+      path,
+      data: {
+        name: enc.name,
+        createdAt: now,
+        participants: parts,
+        round: 0,
+        currentTurnParticipantId: null,
+        isStarted: false,
+        isPaused: false,
+        ruleset: enc.ruleset || '5e',
+      },
+    });
+    summary.push({ name: enc.name, id, parts });
+  }
+
+  const res = await postJson(`${host}/api/batch`, { ops });
+  if (!res.ok) throw new Error(`batch failed: ${JSON.stringify(res)}`);
+  console.log(`batch: ${ops.length} encounter(s) written\n`);
+
+  // Verify
+  const written = await getJson(`${host}/api/collection?path=${encPath}`);
+  const byId = new Map(written.map(e => [e.id, e]));
+
+  for (const s of summary) {
+    const got = byId.get(s.id);
+    const ok = got && got.name === s.name && (got.participants || []).length === s.parts.length;
+    console.log(`${ok ? '✓' : '✗'} ${s.name}`);
+    console.log(`  id: ${s.id}`);
+    if (!ok) { console.log(`  VERIFY FAILED: got ${JSON.stringify(got && { name: got.name, n: (got.participants || []).length })}`); continue; }
+    s.parts.forEach(p => {
+      const i = p.initiative >= 0 ? `+${p.initiative}` : `${p.initiative}`;
+      console.log(`    - ${p.name} (${p.type}, hp ${p.maxHp}, init ${i})`);
+    });
+  }
+  console.log('\nDone.');
+}
+
+main().catch(e => { console.error('FAIL:', e.message); process.exit(1); });
diff --git a/docs/ENCOUNTER_BUILDER.md b/docs/ENCOUNTER_BUILDER.md
index 701e228..7659c37 100644
--- a/docs/ENCOUNTER_BUILDER.md
+++ b/docs/ENCOUNTER_BUILDER.md
@@ -64,6 +64,15 @@ Object in `encounter.participants[]`:
 | `deathSaveSuccesses` | int | character/NPC only, 0-3 successes |
 | `deathSaveFailures` | int | character/NPC only, 0-3 failures |
 
+## Path normalization
+
+App passes firebase-prefixed paths (`artifacts/{APP_ID}/public/data/campaigns/...`). Server-mode adapter `norm()` strips prefix → bare canonical (`campaigns/...`).
+
+- **UI / app code** → prefixed paths (`getPath.*` helpers)
+- **REST API / direct DB / scripts** → bare canonical paths (`campaigns/...`)
+
+Mixing = empty results. If `GET /api/collection?path=artifacts/.../campaigns` returns `[]`, you used the prefixed form. Drop the prefix.
+
 ## Build flow (UI)
 
 Admin view at `/`. Steps:
@@ -121,6 +130,101 @@ Pre-combat only (`!isStarted || isPaused`). Drag handles shown for **tied initia
 
 During active combat, cross-current-pointer drag is blocked to avoid skip/double-act ambiguity. Paused combat can reorder same-initiative ties freely.
 
+## Build flow (API / scripts)
+
+Same logical steps as UI, via REST. For LLM agents or seed scripts.
+
+**Server mode only.** REST endpoints (`/api/*`) exist only when tracker runs
+with `REACT_APP_STORAGE=server` (bundled Express backend mounted). Firebase
+SDK mode has no HTTP backend — data lives in Firestore via in-browser SDK,
+different auth + write paths. This section does not apply to firebase mode.
+
+Confirm server mode before scripting:
+```bash
+curl -s <HOST>/api/collection?path=campaigns | head -c 200
+```
+JSON array = server mode. HTML (SPA shell) = firebase mode or backend not
+mounted — API path won't work.
+
+### REST endpoints
+
+| Method | Path | Body / Query | Action |
+|---|---|---|---|
+| `GET` | `/api/doc` | `?path=` | read one doc |
+| `PUT` | `/api/doc` | `{path, data}` | replace doc |
+| `PATCH` | `/api/doc` | `{path, patch}` | shallow merge, create-on-miss |
+| `DELETE` | `/api/doc` | `?path=` | delete one doc |
+| `GET` | `/api/collection` | `?path=` | list docs under collection |
+| `POST` | `/api/collection` | `{path, data}` | addDoc: auto-id under collection |
+| `POST` | `/api/batch` | `{ops:[{type:'set'\|'update'\|'delete', path, data?}]}` | atomic multi-write |
+
+All paths bare canonical (no `artifacts/...` prefix).
+
+### id format
+
+`generateId()` = `crypto.randomUUID()` (fallback `id_{Date.now()}_{rand10}`). Use either. Server `POST /api/collection` generates its own UUID — fine for campaigns/encounters. Participants are inline array items; generate their ids client-side so they're stable across batch writes.
+
+### Object templates
+
+Encounter doc (full, for `PUT` / batch `set`):
+```js
+{
+  name: 'Barrowdeep 1 - Antechamber',
+  createdAt: new Date().toISOString(),
+  participants: [],          // inline, NOT a sub-collection
+  round: 0,
+  currentTurnParticipantId: null,
+  isStarted: false,
+  isPaused: false,
+  ruleset: '5e',
+}
+```
+
+Participant object (item in `encounter.participants[]`):
+```js
+{
+  id: generateId(),
+  name: 'Ankheg',
+  type: 'monster',            // 'character' | 'npc' | 'monster'
+  originalCharacterId: null,  // set only if type==='character'
+  initiative: rollD20() + initMod,  // rolled ONCE at add; stored, not re-derived
+  maxHp: 45,
+  currentHp: 45,              // start at full
+  conditions: [],
+  isActive: true,
+  status: 'conscious',
+  deathSaveSuccesses: 0,      // character/npc only
+  deathSaveFailures: 0,       // character/npc only
+}
+```
+
+### Initiative semantics
+
+- Default: `initiative = rollD20() + initMod` (d20 ∈ [1,20], roll fresh per participant).
+- Manual override (e.g. pre-rolled values): set `initiative` directly, skip the roll.
+- Fixed at add time. NOT re-derived from `initMod` after — `initMod` is not stored on participant.
+
+### Recipe: build encounters for a campaign
+
+1. **Find campaign id by name:**
+```bash
+curl -s "$HOST/api/collection?path=campaigns" \
+  | jq -r '.[] | select(.name=="2026 D&D") | .id'
+```
+2. **Build encounter docs + participants client-side** (object templates above), roll initiative per participant.
+3. **Write all encounters in one batch:**
+```bash
+curl -s -X POST "$HOST/api/batch" \
+  -H 'Content-Type: application/json' \
+  -d '{"ops":[{"type":"set","path":"campaigns/CID/encounters/EID1","data":{...}},{"type":"set","path":"campaigns/CID/encounters/EID2","data":{...}}]}'
+```
+4. **Verify:**
+```bash
+curl -s "$HOST/api/collection?path=campaigns/CID/encounters" | jq '.[] | {name, count: (.participants|length)}'
+```
+
+Participants go inline in the encounter doc — there is no `participants` sub-collection. A single batch `set` per encounter writes the whole roster atomically.
+
 ## Combat flow (UI)
 
 InitiativeControls panel (sticky, right side).
@@ -198,6 +302,8 @@ No re-sort after `startEncounter`.
 
 ## Storage paths quick reference
 
+Bare canonical (server mode). App code prefixes these with `artifacts/{APP_ID}/public/data/` — adapter strips it.
+
 ```
 campaigns/{cid}                              campaign doc
 campaigns/{cid}/encounters/{eid}             encounter doc (participants[])
@@ -206,6 +312,8 @@ activeDisplay/status                         player display control
 logs/{logId}                                 action log entry
 ```
 
+REST mapping: `campaigns/{cid}` doc → `GET/PUT/PATCH/DELETE /api/doc?path=campaigns/{cid}`. Collection parent (`campaigns`, `campaigns/{cid}/encounters`) → `GET/POST /api/collection?path=...`.
+
 ## DM tips
 
 - Initiative rolled ONCE at add time. Stored. Edit via EditParticipantModal to override.
-- 
2.34.1


From 9870d4df0de9f78d4e7be82003b948035f0500fe Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Tue, 7 Jul 2026 16:07:20 -0400
Subject: [PATCH 09/24] Fix addParticipants: slot by initiative instead of
 append

addParticipants (bulk add all characters) appended to list end, ignoring
initiative. Pre-combat list showed random order until start encounter.
Now slots each participant by initiative desc, preserves existing order +
drag ties. Matches addParticipant single-add semantics.

Tests: 5 bulk-add slot cases (turn.bulkadd.test.js).
---
 shared/tests/turn.bulkadd.test.js | 49 +++++++++++++++++++++++++++++++
 shared/turn.js                    | 12 ++++++--
 2 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 shared/tests/turn.bulkadd.test.js

diff --git a/shared/tests/turn.bulkadd.test.js b/shared/tests/turn.bulkadd.test.js
new file mode 100644
index 0000000..9ed4a3d
--- /dev/null
+++ b/shared/tests/turn.bulkadd.test.js
@@ -0,0 +1,49 @@
+// addParticipants (bulk) must slot by initiative, not append.
+const shared = require('@ttrpg/shared');
+const { mockCtx } = require('./_helpers');
+const { buildCharacterParticipant, buildMonsterParticipant, addParticipants, makeParticipant } = shared;
+
+function enc(ps = []) {
+  return { name:'t', participants: ps, isStarted: false, isPaused: false,
+    round: 0, currentTurnParticipantId: null, turnOrderIds: [] };
+}
+function p(id, init) {
+  return makeParticipant({ id, name: id, type: 'monster', initiative: init, maxHp: 10, currentHp: 10 });
+}
+
+describe('addParticipants slot order', () => {
+  test('bulk add slots by initiative desc', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([]);
+    e = await addParticipants(e, [p('a', 5), p('b', 20), p('c', 10)], ctx);
+    expect(e.participants.map(x => x.id)).toEqual(['b', 'c', 'a']);
+  });
+
+  test('bulk add preserves existing order + slots new', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([p('a', 20), p('b', 5)]);
+    e = await addParticipants(e, [p('c', 10)], ctx);
+    expect(e.participants.map(x => x.id)).toEqual(['a', 'c', 'b']);
+  });
+
+  test('bulk add same-init appends after existing (stable tie)', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([p('a', 10)]);
+    e = await addParticipants(e, [p('b', 10), p('c', 10)], ctx);
+    expect(e.participants.map(x => x.id)).toEqual(['a', 'b', 'c']);
+  });
+
+  test('bulk add mixed inits into existing list', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([p('a', 15), p('b', 5)]);
+    e = await addParticipants(e, [p('c', 20), p('d', 10), p('e', 15)], ctx);
+    expect(e.participants.map(x => x.id)).toEqual(['c', 'a', 'e', 'd', 'b']);
+  });
+
+  test('bulk add updates turnOrderIds to match', async () => {
+    const { ctx } = mockCtx();
+    let e = enc([]);
+    e = await addParticipants(e, [p('a', 5), p('b', 20)], ctx);
+    expect(e.turnOrderIds).toEqual(['b', 'a']);
+  });
+});
diff --git a/shared/turn.js b/shared/turn.js
index 0aa485a..ea17394 100644
--- a/shared/turn.js
+++ b/shared/turn.js
@@ -479,14 +479,20 @@ async function addParticipant(encounter, participant, ctx) {
 }
 
 async function addParticipants(encounter, newParticipants, ctx) {
-  const updatedParticipants = [...(encounter.participants || []), ...newParticipants];
+  // Slot each new participant into list by initiative (desc), preserve
+  // existing order + drag-established ties. Matches addParticipant semantics.
+  let base = [...(encounter.participants || [])];
+  for (const np of newParticipants) {
+    const idx = slotIndexForInit(base, np.initiative);
+    base.splice(idx, 0, np);
+  }
   const names = newParticipants.map(p => p.name).join(', ');
-  const patch = { participants: updatedParticipants };
+  const patch = { participants: base, ...syncTurnOrder(base) };
   const log = {
     type: 'add_participants',
     message: `Added ${newParticipants.length} participant${newParticipants.length === 1 ? '' : 's'}: ${names}`,
     delta: { count: newParticipants.length },
-    undo: { participants: newParticipants },
+    undo: { participants: newParticipants, newTurnOrderIds: patch.turnOrderIds },
   };
   return commit(encounter, patch, log, ctx);
 }
-- 
2.34.1


From 0fa3928bf811060081fb2ceb3fd3d69107712aaa Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Tue, 7 Jul 2026 16:41:34 -0400
Subject: [PATCH 10/24] Track encounter start/end timestamps; display on card

startEncounter sets startedAt (clears endedAt on restart). endEncounter sets
endedAt. snapshotOf includes both for undo/redo fidelity. expandUndo split
start/end cases to restore old timestamps.

Display: encounter card shows Started/Ended independently (endedAt shows
even without startedAt). Undo sets null (can't delete via merge), test snap
strips only startedAt/endedAt null for compare.

Reviewed by pi gpt-5.5: stale endedAt on restart fixed, snap null-strip
narrowed. Medium-low risk.
---
 shared/tests/turn.undo.test.js |  8 +++++++-
 shared/turn.js                 | 22 +++++++++++++++++-----
 src/App.js                     |  5 +++++
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/shared/tests/turn.undo.test.js b/shared/tests/turn.undo.test.js
index ecc84f3..6e3f306 100644
--- a/shared/tests/turn.undo.test.js
+++ b/shared/tests/turn.undo.test.js
@@ -29,7 +29,13 @@ function enc(ps) {
   return { name:'t', participants:ps, isStarted:false, isPaused:false,
     round:0, currentTurnParticipantId:null, turnOrderIds:[] };
 }
-const snap = (e) => JSON.parse(JSON.stringify(e));
+const snap = (e) => {
+  const o = JSON.parse(JSON.stringify(e));
+  // normalize nullable timestamp fields: null = absent (undo clears via null)
+  if (o.startedAt === null) delete o.startedAt;
+  if (o.endedAt === null) delete o.endedAt;
+  return o;
+};
 
 describe('undo + redo roundtrip', () => {
   test('startEncounter', async () => {
diff --git a/shared/turn.js b/shared/turn.js
index ea17394..1352209 100644
--- a/shared/turn.js
+++ b/shared/turn.js
@@ -102,6 +102,8 @@ function snapshotOf(enc) {
     currentTurnParticipantId: enc.currentTurnParticipantId ?? null,
     turnOrderIds: [...(enc.turnOrderIds || [])],
     activeIds: (enc.participants || []).filter(p => p.isActive).map(p => p.id),
+    startedAt: enc.startedAt ?? null,
+    endedAt: enc.endedAt ?? null,
   };
 }
 
@@ -305,12 +307,18 @@ function expandUndo(entry, currentEnc) {
         redo: { currentTurnParticipantId: snap.currentTurnParticipantId, round: snap.round, turnOrderIds: snap.turnOrderIds || [] },
       };
     }
-    case 'start_encounter':
+    case 'start_encounter': {
+      return {
+        encounterPath: encPath,
+        updates: { ...u, startedAt: u.startedAt ?? null },
+        redo: { isStarted: true, isPaused: false, currentTurnParticipantId: snap.currentTurnParticipantId, round: snap.round, turnOrderIds: snap.turnOrderIds || [], startedAt: snap.startedAt ?? Date.now() },
+      };
+    }
     case 'end_encounter': {
       return {
         encounterPath: encPath,
-        updates: u,
-        redo: { isStarted: entry.type === 'start_encounter', isPaused: false, currentTurnParticipantId: snap.currentTurnParticipantId, round: snap.round, turnOrderIds: snap.turnOrderIds || [] },
+        updates: { ...u, endedAt: u.endedAt ?? null },
+        redo: { isStarted: false, isPaused: false, currentTurnParticipantId: snap.currentTurnParticipantId, round: snap.round, turnOrderIds: snap.turnOrderIds || [], endedAt: snap.endedAt ?? Date.now() },
       };
     }
     default:
@@ -391,6 +399,8 @@ async function startEncounter(encounter, ctx) {
     participants: sortedParticipants,
     currentTurnParticipantId: firstActive.id,
     turnOrderIds: sortedParticipants.map(p => p.id),
+    startedAt: Date.now(),
+    endedAt: null,
   };
   const log = {
     type: 'start_encounter',
@@ -403,6 +413,8 @@ async function startEncounter(encounter, ctx) {
       round: encounter.round ?? 0,
       currentTurnParticipantId: encounter.currentTurnParticipantId ?? null,
       turnOrderIds: [...(encounter.turnOrderIds || [])],
+      startedAt: encounter.startedAt ?? null,
+      endedAt: encounter.endedAt ?? null,
     },
   };
   return commit(encounter, patch, log, ctx);
@@ -1003,12 +1015,12 @@ async function reorderParticipants(encounter, draggedId, targetId, ctx) {
 }
 
 async function endEncounter(encounter, ctx) {
-  const patch = { isStarted: false, isPaused: false, currentTurnParticipantId: null, round: 0, turnOrderIds: [] };
+  const patch = { isStarted: false, isPaused: false, currentTurnParticipantId: null, round: 0, turnOrderIds: [], endedAt: Date.now() };
   const log = {
     type: 'end_encounter',
     message: `Combat ended: "${encounter.name}"`,
     delta: {},
-    undo: { isStarted: encounter.isStarted ?? false, isPaused: encounter.isPaused ?? false, round: encounter.round ?? 0, currentTurnParticipantId: encounter.currentTurnParticipantId ?? null, turnOrderIds: [...(encounter.turnOrderIds || [])] },
+    undo: { isStarted: encounter.isStarted ?? false, isPaused: encounter.isPaused ?? false, round: encounter.round ?? 0, currentTurnParticipantId: encounter.currentTurnParticipantId ?? null, turnOrderIds: [...(encounter.turnOrderIds || [])], endedAt: encounter.endedAt ?? null },
   };
   return commit(encounter, patch, log, ctx);
 }
diff --git a/src/App.js b/src/App.js
index debef6e..7be5c77 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2258,6 +2258,11 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
                     <p className="text-xs text-stone-300">
                       {encounter.createdAt && `${new Date(encounter.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false })} · `}Participants: {encounter.participants?.length || 0}
                     </p>
+                    {(encounter.startedAt || encounter.endedAt) && (
+                      <p className="text-xs text-green-400/80 mt-0.5">
+                        {encounter.startedAt && `⚔ Started: ${new Date(encounter.startedAt).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false })}`}{encounter.startedAt && encounter.endedAt && ' · '}{encounter.endedAt && `Ended: ${new Date(encounter.endedAt).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false })}`}
+                      </p>
+                    )}
                     {isLive && (
                       <span className="text-xs text-green-400 font-semibold block mt-1">
                         LIVE ON PLAYER DISPLAY
-- 
2.34.1


From 2dfa155469338ef219aa3bd642e0a11320d2f189 Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Tue, 7 Jul 2026 16:44:29 -0400
Subject: [PATCH 11/24] Add /display manifest for Android home-screen install

Android Chrome only reads manifest at install time from current page. Root
manifest has start_url '.' (root). Installing from /display launched root.

Fix: separate display-manifest.json (start_url /display, scope /, landscape).
App.js swaps link[rel=manifest] href when on /display path. Install from
/display now launches /display standalone.
---
 public/display-manifest.json | 27 +++++++++++++++++++++++++++
 src/App.js                   |  6 +++++-
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 public/display-manifest.json

diff --git a/public/display-manifest.json b/public/display-manifest.json
new file mode 100644
index 0000000..369bc38
--- /dev/null
+++ b/public/display-manifest.json
@@ -0,0 +1,27 @@
+{
+  "short_name": "TTRPG Display",
+  "name": "TTRPG Initiative Tracker — Player Display",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/display",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "landscape",
+  "theme_color": "#1A202C",
+  "background_color": "#1A202C"
+}
diff --git a/src/App.js b/src/App.js
index 7be5c77..4082b06 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3519,8 +3519,12 @@ function App() {
 
   useEffect(() => {
     const queryParams = new URLSearchParams(window.location.search);
-    if (queryParams.get('playerView') === 'true' || window.location.pathname === '/display') {
+    const isDisplay = queryParams.get('playerView') === 'true' || window.location.pathname === '/display';
+    if (isDisplay) {
       setIsPlayerViewOnlyMode(true);
+      // swap manifest so Android home-screen installs launch /display
+      const link = document.querySelector('link[rel="manifest"]');
+      if (link) link.href = `${process.env.PUBLIC_URL || ''}/display-manifest.json`;
     }
     if (window.location.pathname === '/logs') {
       setIsLogsMode(true);
-- 
2.34.1


From 6f11edab94be7b9b90c3dca7176b5b1cd72d14ca Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Tue, 7 Jul 2026 17:24:36 -0400
Subject: [PATCH 12/24] HP formula stored on participant, loads in edit modal

hpFormula field persisted on participant doc (makeParticipant + builder).
Add handler stores formula. Edit modal loads participant.hpFormula, reroll
button sets maxHp field (no save until save). Edit submit persists formula.
Formula only for monster/npc types.
---
 TODO.md                             |  5 ++
 shared/tests/turn.hpformula.test.js | 60 +++++++++++++++++++++
 shared/turn.js                      | 37 +++++++++++--
 src/App.js                          | 84 ++++++++++++++++++++++++-----
 4 files changed, 169 insertions(+), 17 deletions(-)
 create mode 100644 shared/tests/turn.hpformula.test.js

diff --git a/TODO.md b/TODO.md
index 68d6594..b08d6a4 100644
--- a/TODO.md
+++ b/TODO.md
@@ -14,6 +14,11 @@ not sure good way to do this
 lots of updates
 
 
+## monsters per campaign and npcs
+## or/and ....copy from encoubnter?
+
+
+
 
 ### TEST GAP: current branch changes need focused coverage
 - Storage `where()` contract: firebase + server adapters should honor `[where('encounterPath','==',x), orderBy('ts','desc'), limit(n)]`.
diff --git a/shared/tests/turn.hpformula.test.js b/shared/tests/turn.hpformula.test.js
new file mode 100644
index 0000000..9da04bc
--- /dev/null
+++ b/shared/tests/turn.hpformula.test.js
@@ -0,0 +1,60 @@
+// HP formula roll: parse "2d6+9" style, roll, return total.
+const shared = require('@ttrpg/shared');
+const { rollHpFormula } = shared;
+
+describe('rollHpFormula', () => {
+  test('basic NdM', () => {
+    const r = rollHpFormula('2d6');
+    expect(r).toBeGreaterThanOrEqual(2);
+    expect(r).toBeLessThanOrEqual(12);
+  });
+
+  test('NdM+bonus', () => {
+    const r = rollHpFormula('2d6+9');
+    expect(r).toBeGreaterThanOrEqual(11);
+    expect(r).toBeLessThanOrEqual(21);
+  });
+
+  test('NdM-bonus', () => {
+    const r = rollHpFormula('3d8-2');
+    expect(r).toBeGreaterThanOrEqual(1);
+    expect(r).toBeLessThanOrEqual(22);
+  });
+
+  test('single die', () => {
+    const r = rollHpFormula('1d20');
+    expect(r).toBeGreaterThanOrEqual(1);
+    expect(r).toBeLessThanOrEqual(20);
+  });
+
+  test('case insensitive', () => {
+    const r = rollHpFormula('2D6+5');
+    expect(r).toBeGreaterThanOrEqual(7);
+    expect(r).toBeLessThanOrEqual(17);
+  });
+
+  test('whitespace tolerant', () => {
+    const r = rollHpFormula(' 2d6 + 9 ');
+    expect(r).toBeGreaterThanOrEqual(11);
+    expect(r).toBeLessThanOrEqual(21);
+  });
+
+  test('large die', () => {
+    const r = rollHpFormula('4d12+10');
+    expect(r).toBeGreaterThanOrEqual(14);
+    expect(r).toBeLessThanOrEqual(58);
+  });
+
+  test('invalid returns null', () => {
+    expect(rollHpFormula('abc')).toBeNull();
+    expect(rollHpFormula('')).toBeNull();
+    expect(rollHpFormula(null)).toBeNull();
+    expect(rollHpFormula(undefined)).toBeNull();
+    expect(rollHpFormula('2d')).toBeNull();
+    expect(rollHpFormula('d6')).toBeNull();
+  });
+
+  test('zero dice invalid', () => {
+    expect(rollHpFormula('0d6')).toBeNull();
+  });
+});
diff --git a/shared/turn.js b/shared/turn.js
index 1352209..1046286 100644
--- a/shared/turn.js
+++ b/shared/turn.js
@@ -28,6 +28,22 @@ const generateId = () =>
 
 const rollD20 = () => Math.floor(Math.random() * 20) + 1;
 
+// Parse HP formula like "2d6+9" or "3d8-2" or "1d20". Roll, return total.
+// Returns null on invalid input. Whitespace/case tolerant.
+function rollHpFormula(str) {
+  if (!str || typeof str !== 'string') return null;
+  const m = str.trim().toLowerCase().match(/^(\d+)d(\d+)\s*([+-]\s*\d+)?$/);
+  if (!m) return null;
+  const count = parseInt(m[1], 10);
+  const sides = parseInt(m[2], 10);
+  if (count === 0 || sides === 0) return null;
+  let bonus = 0;
+  if (m[3]) bonus = parseInt(m[3].replace(/\s/g, ''), 10);
+  let total = 0;
+  for (let i = 0; i < count; i++) total += Math.floor(Math.random() * sides) + 1;
+  return total + bonus;
+}
+
 const formatInitMod = (mod) => {
   if (mod === undefined || mod === null) return 'N/A';
   return mod >= 0 ? `+${mod}` : `${mod}`;
@@ -344,6 +360,7 @@ function makeParticipant(opts) {
     status: opts.status || (opts.currentHp === 0 ? 'dying' : 'conscious'),
     deathSaveSuccesses: opts.deathSaveSuccesses || 0,
     deathSaveFailures: opts.deathSaveFailures || 0,
+    hpFormula: opts.hpFormula || null,
   };
 }
 
@@ -365,11 +382,22 @@ function buildCharacterParticipant(character) {
   };
 }
 
-function buildMonsterParticipant({ name, maxHp, initMod, asNpc }) {
+function buildMonsterParticipant({ name, maxHp, initMod, asNpc, hpFormula }) {
   const initiativeRoll = rollD20();
   const modifier = initMod !== undefined ? initMod : MONSTER_DEFAULT_INIT_MOD;
   const finalInitiative = initiativeRoll + modifier;
-  const hp = maxHp || DEFAULT_MAX_HP;
+  // maxHp wins if both set; else roll formula; else default.
+  let hp;
+  let hpRoll = null;
+  if (maxHp) {
+    hp = maxHp;
+  } else if (hpFormula) {
+    const rolled = rollHpFormula(hpFormula);
+    hp = rolled || DEFAULT_MAX_HP;
+    hpRoll = rolled;
+  } else {
+    hp = DEFAULT_MAX_HP;
+  }
   return {
     participant: makeParticipant({
       name,
@@ -377,8 +405,9 @@ function buildMonsterParticipant({ name, maxHp, initMod, asNpc }) {
       initiative: finalInitiative,
       maxHp: hp,
       currentHp: hp,
+      hpFormula: hpFormula || null,
     }),
-    roll: { roll: initiativeRoll, mod: modifier, total: finalInitiative },
+    roll: { roll: initiativeRoll, mod: modifier, total: finalInitiative, hpRoll },
   };
 }
 
@@ -1044,7 +1073,7 @@ async function toggleHidePlayerHp(currentValue, ctx) {
 
 module.exports = {
   DEFAULT_MAX_HP, DEFAULT_INIT_MOD, MONSTER_DEFAULT_INIT_MOD,
-  generateId, rollD20, formatInitMod,
+  generateId, rollD20, rollHpFormula, formatInitMod,
   sortParticipantsByInitiative, syncTurnOrder, computeTurnOrderAfterRemoval,
   snapshotOf, buildEntry, expandUndo,
   makeParticipant, buildCharacterParticipant, buildMonsterParticipant,
diff --git a/src/App.js b/src/App.js
index 4082b06..f6fc7c0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -581,15 +581,26 @@ function EditParticipantModal({ participant, onClose, onSave }) {
   const [initiative, setInitiative] = useState(participant.initiative);
   const [currentHp, setCurrentHp] = useState(participant.currentHp);
   const [maxHp, setMaxHp] = useState(participant.maxHp);
+  const [hpFormula, setHpFormula] = useState(participant.hpFormula || '');
   const [asNpc, setAsNpc] = useState(participant.type === 'npc');
 
   const handleSubmit = (e) => {
     e.preventDefault();
+    let finalMaxHp = parseInt(maxHp, 10);
+    // formula rolls only if maxHp empty. maxHp wins if both.
+    if (isNaN(finalMaxHp) && hpFormula.trim()) {
+      const rolled = shared.rollHpFormula(hpFormula);
+      if (rolled) finalMaxHp = rolled;
+    }
+    if (isNaN(finalMaxHp)) finalMaxHp = participant.maxHp;
+    let finalCurrentHp = parseInt(currentHp, 10);
+    if (isNaN(finalCurrentHp)) finalCurrentHp = finalMaxHp;
     onSave({
       name: name.trim(),
       initiative: parseInt(initiative, 10),
-      currentHp: parseInt(currentHp, 10),
-      maxHp: parseInt(maxHp, 10),
+      currentHp: finalCurrentHp,
+      maxHp: finalMaxHp,
+      hpFormula: (participant.type === 'monster' || participant.type === 'npc') ? (hpFormula.trim() || null) : null,
       type: participant.type === 'monster' || participant.type === 'npc' ? (asNpc ? 'npc' : 'monster') : participant.type,
     });
   };
@@ -636,6 +647,32 @@ function EditParticipantModal({ participant, onClose, onSave }) {
             />
           </div>
         </div>
+        {(participant.type === 'monster' || participant.type === 'npc') && (
+          <div>
+            <label className="block text-sm font-medium text-stone-300 mb-1">HP Formula</label>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={hpFormula}
+                onChange={(e) => setHpFormula(e.target.value)}
+                placeholder="2d6+9"
+                className="flex-1 px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
+              />
+              <button
+                type="button"
+                disabled={!shared.rollHpFormula(hpFormula)}
+                onClick={() => {
+                  const rolled = shared.rollHpFormula(hpFormula);
+                  if (rolled) setMaxHp(rolled);
+                }}
+                className="px-3 py-2 text-sm font-medium text-white bg-violet-700 hover:bg-violet-800 rounded-md transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+                title="Roll formula, set Max HP"
+              >
+                <Dices size={16} className="inline" /> Reroll
+              </button>
+            </div>
+          </div>
+        )}
         {(participant.type === 'monster' || participant.type === 'npc') && (
           <div className="flex items-center">
             <input
@@ -972,7 +1009,8 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
   const [participantType, setParticipantType] = useState('monster');
   const [selectedCharacterId, setSelectedCharacterId] = useState('');
   const [monsterInitMod, setMonsterInitMod] = useState(MONSTER_DEFAULT_INIT_MOD);
-  const [maxHp, setMaxHp] = useState(DEFAULT_MAX_HP);
+  const [maxHp, setMaxHp] = useState('');
+  const [hpFormula, setHpFormula] = useState('');
   const [manualInitiative, setManualInitiative] = useState('');
   const [asNpc, setAsNpc] = useState(false);
   const [editingParticipant, setEditingParticipant] = useState(null);
@@ -1002,11 +1040,11 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
       if (selectedChar && selectedChar.defaultMaxHp) {
         setMaxHp(selectedChar.defaultMaxHp);
       } else {
-        setMaxHp(DEFAULT_MAX_HP);
+        setMaxHp('');
       }
       setAsNpc(false);
     } else if (participantType === 'monster') {
-      setMaxHp(DEFAULT_MAX_HP);
+      setMaxHp('');
       setMonsterInitMod(MONSTER_DEFAULT_INIT_MOD);
     }
   }, [selectedCharacterId, participantType, campaignCharacters]);
@@ -1039,6 +1077,11 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
     } else {
       modifier = parseInt(monsterInitMod, 10) || 0;
       participantAsNpc = asNpc;
+      // maxHp wins if both set; else roll formula
+      if (!maxHp && hpFormula.trim()) {
+        const rolled = shared.rollHpFormula(hpFormula);
+        if (rolled) currentMaxHp = rolled;
+      }
     }
 
     const computedInitiative = manualInit ? finalInitiative : (initiativeRoll + modifier);
@@ -1050,6 +1093,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
       initiative: computedInitiative,
       maxHp: currentMaxHp,
       currentHp: currentMaxHp,
+      hpFormula: participantType === 'monster' ? (hpFormula.trim() || null) : null,
       conditions: [],
       isActive: true,
       status: 'conscious',
@@ -1071,7 +1115,8 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
       setTimeout(() => setLastRollDetails(null), ROLL_DISPLAY_DURATION);
 
       setParticipantName('');
-      setMaxHp(DEFAULT_MAX_HP);
+      setMaxHp('');
+      setHpFormula('');
       setSelectedCharacterId('');
       setMonsterInitMod(MONSTER_DEFAULT_INIT_MOD);
       setAsNpc(false);
@@ -1332,7 +1377,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
             e.preventDefault();
             handleAddParticipant();
           }}
-          className="grid grid-cols-1 md:grid-cols-6 gap-x-4 gap-y-2 mb-4 p-3 bg-stone-800 rounded items-end"
+          className="grid grid-cols-1 md:grid-cols-12 gap-x-4 gap-y-2 mb-4 p-3 bg-stone-800 rounded items-end"
         >
           <div className="md:col-span-2">
             <label className="block text-sm font-medium text-stone-300">Type</label>
@@ -1352,7 +1397,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
 
           {participantType === 'monster' ? (
             <>
-              <div className="md:col-span-4">
+              <div className="md:col-span-10">
                 <label htmlFor="monsterName" className="block text-sm font-medium text-stone-300">
                   Monster Name
                 </label>
@@ -1365,7 +1410,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                   className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
                 />
               </div>
-              <div className="md:col-span-2">
+              <div className="md:col-span-3">
                 <label htmlFor="monsterInitMod" className="block text-sm font-medium text-stone-300">
                   Init Mod
                 </label>
@@ -1377,7 +1422,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                   className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
                 />
               </div>
-              <div className="md:col-span-2">
+              <div className="md:col-span-3">
                 <label htmlFor="manualInitiative" className="block text-sm font-medium text-stone-300">
                   Initiative <span className="text-xs text-stone-400">(blank=roll)</span>
                 </label>
@@ -1390,7 +1435,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                   className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
                 />
               </div>
-              <div className="md:col-span-2">
+              <div className="md:col-span-3">
                 <label htmlFor="monsterMaxHp" className="block text-sm font-medium text-stone-300">
                   Max HP
                 </label>
@@ -1402,7 +1447,20 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                   className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
                 />
               </div>
-              <div className="md:col-span-2 flex items-center pt-5">
+              <div className="md:col-span-3">
+                <label htmlFor="monsterHpFormula" className="block text-sm font-medium text-stone-300">
+                  HP Formula (e.g. 2d6+9)
+                </label>
+                <input
+                  type="text"
+                  id="monsterHpFormula"
+                  value={hpFormula}
+                  onChange={(e) => setHpFormula(e.target.value)}
+                  placeholder="2d6+9"
+                  className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
+                />
+              </div>
+              <div className="md:col-span-12 flex items-center pt-2">
                 <input
                   type="checkbox"
                   id="asNpc"
@@ -1457,7 +1515,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
             </>
           )}
 
-          <div className="md:col-span-6 flex justify-end mt-2">
+          <div className="md:col-span-12 flex justify-end mt-2">
             <button
               type="submit"
               disabled={encounter.isStarted && !encounter.isPaused}
-- 
2.34.1


From 4a92c667c5faec53fd2d3fcee49faef596901f30 Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Wed, 8 Jul 2026 11:46:56 -0400
Subject: [PATCH 13/24] Fix dev bulk-delete button gate + reposition inside
 campaigns
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Gate was process.env.NODE_ENV === 'development' — unsafe default. react-scripts
inlines NODE_ENV=development when unset, so prod deploys forgetting the env var
exposed the delete-all button. Switched to explicit opt-in REACT_APP_DEV_TOOLS=1.

process.env.REACT_APP_DEV_TOOLS as static literal gets inlined by DefinePlugin at
webpack build time — runtime mutations in tests had no effect, and dev-start
without the env produced bundles with the branch dead-stripped. Extracted gate
to src/config/devTools.js using dynamic key access
(process.env['REACT_APP_' + 'DEV_TOOLS']) so DefinePlugin cannot inline it; the
value is read at runtime. dev-start.sh now exports REACT_APP_DEV_TOOLS=1.

Button had also drifted outside the campaigns collapse block to the page bottom;
moved it back inside the campaigns section after the grid.

Tests cover both paths: gate logic (unset/0/arbitrary/1) in BulkDelete.gate.test.js,
prod safety render (button absent when unset) in BulkDelete.render-hidden.test.js,
dev feature render (button present when DEV_TOOLS=1) in BulkDelete.render-shown.test.js.
---
 TODO.md                                    | 17 ++++++++++
 scripts/dev-start.sh                       |  1 +
 src/App.js                                 | 25 +++++++--------
 src/config/devTools.js                     |  6 ++++
 src/tests/BulkDelete.gate.test.js          | 30 ++++++++++++++++++
 src/tests/BulkDelete.render-hidden.test.js | 36 ++++++++++++++++++++++
 src/tests/BulkDelete.render-shown.test.js  | 36 ++++++++++++++++++++++
 7 files changed, 139 insertions(+), 12 deletions(-)
 create mode 100644 src/config/devTools.js
 create mode 100644 src/tests/BulkDelete.gate.test.js
 create mode 100644 src/tests/BulkDelete.render-hidden.test.js
 create mode 100644 src/tests/BulkDelete.render-shown.test.js

diff --git a/TODO.md b/TODO.md
index b08d6a4..f04ce7a 100644
--- a/TODO.md
+++ b/TODO.md
@@ -5,6 +5,23 @@ Backlog of bugs + long-term items. Milestones live in REWORK_PLAN.md.
 ## Open
 
 
+fullscreen and dont lock on main app dm view and the no-game-player view
+
+also better vert tab layout - labelt friendly
+
+needs AC for players dude
+
+and quick entry hp
+
+hp do not carry from encounter to ecnounter!!!
+
+
+hp wont go over max and no temp hp support
+
+
+
+
+
 
 ### dm list - keep active particpant in view (scroll)
 not sure good way to do this
diff --git a/scripts/dev-start.sh b/scripts/dev-start.sh
index a4d2577..e87855b 100755
--- a/scripts/dev-start.sh
+++ b/scripts/dev-start.sh
@@ -28,6 +28,7 @@ fi
 # frontend: server storage, :3999
 if ! lsof -ti :3999 >/dev/null 2>&1; then
   echo "starting frontend :3999..."
+  NODE_ENV=development REACT_APP_DEV_TOOLS=1 \
   REACT_APP_STORAGE=server \
   REACT_APP_BACKEND_URL=http://127.0.0.1:4001 \
   REACT_APP_BACKEND_REALTIME_URL=ws://127.0.0.1:4001/ws \
diff --git a/src/App.js b/src/App.js
index f6fc7c0..07a2559 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef, useMemo, createContext, useContext, useCallback } from 'react';
 import * as shared from '@ttrpg/shared';
 import { initializeApp, getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken, getFirestore, where, orderBy, limit, offset, getStorage, getStorageMode } from './storage';
+import { isDevToolsEnabled } from './config/devTools';
 import {
   PlusCircle, Users, Swords, Trash2, Eye, Edit3, Save, XCircle, ChevronsUpDown,
   UserCheck, UserX, HeartCrack, HeartPulse, Zap, EyeOff, ExternalLink, AlertTriangle,
@@ -2754,6 +2755,18 @@ function AdminView({ userId }) {
               );
             })}
               </div>
+
+              {isDevToolsEnabled() && campaignsWithDetails.length > 0 && (
+                <div className="mt-4">
+                  <button
+                    onClick={() => setShowDeleteAllConfirm(true)}
+                    className="px-3 py-1.5 text-xs rounded bg-red-900 hover:bg-red-800 text-red-100 border border-red-700"
+                    title="DEV ONLY: Delete every campaign, encounter, and log. Irreversible."
+                  >
+                    <Trash2 size={12} className="inline mr-1" />DEV: Delete All Campaigns
+                  </button>
+                </div>
+              )}
             </>
           )}
         </div>
@@ -2800,18 +2813,6 @@ function AdminView({ userId }) {
         message={`Are you sure you want to delete the campaign "${itemToDelete?.name}" and all its encounters? This action cannot be undone.`}
       />
 
-      {process.env.NODE_ENV === 'development' && campaignsWithDetails.length > 0 && (
-        <div className="mt-4">
-          <button
-            onClick={() => setShowDeleteAllConfirm(true)}
-            className="px-3 py-1.5 text-xs rounded bg-red-900 hover:bg-red-800 text-red-100 border border-red-700"
-            title="DEV ONLY: Delete every campaign, encounter, and log. Irreversible."
-          >
-            <Trash2 size={12} className="inline mr-1" />DEV: Delete All Campaigns
-          </button>
-        </div>
-      )}
-
       <ConfirmationModal
         isOpen={showDeleteAllConfirm}
         onClose={() => setShowDeleteAllConfirm(false)}
diff --git a/src/config/devTools.js b/src/config/devTools.js
new file mode 100644
index 0000000..ba3241c
--- /dev/null
+++ b/src/config/devTools.js
@@ -0,0 +1,6 @@
+// Dev-tools gate. Explicit opt-in via REACT_APP_DEV_TOOLS=1.
+// Safe default: any value other than exactly '1' = off.
+// Dynamic key access so react-scripts DefinePlugin does NOT inline the value
+// at build time — allows tests + runtime env changes to take effect.
+const KEY = 'REACT_APP_' + 'DEV_TOOLS';
+export const isDevToolsEnabled = () => process.env[KEY] === '1';
diff --git a/src/tests/BulkDelete.gate.test.js b/src/tests/BulkDelete.gate.test.js
new file mode 100644
index 0000000..ea2c9dc
--- /dev/null
+++ b/src/tests/BulkDelete.gate.test.js
@@ -0,0 +1,30 @@
+import { isDevToolsEnabled } from '../config/devTools';
+
+describe('Bulk-delete-all dev-tools gate logic', () => {
+  const orig = process.env.REACT_APP_DEV_TOOLS;
+
+  afterEach(() => {
+    if (orig === undefined) delete process.env.REACT_APP_DEV_TOOLS;
+    else process.env.REACT_APP_DEV_TOOLS = orig;
+  });
+
+  test('false when unset (safe default)', () => {
+    delete process.env.REACT_APP_DEV_TOOLS;
+    expect(isDevToolsEnabled()).toBe(false);
+  });
+
+  test('false when 0', () => {
+    process.env.REACT_APP_DEV_TOOLS = '0';
+    expect(isDevToolsEnabled()).toBe(false);
+  });
+
+  test('false when arbitrary string', () => {
+    process.env.REACT_APP_DEV_TOOLS = 'true';
+    expect(isDevToolsEnabled()).toBe(false);
+  });
+
+  test('true only when exactly 1', () => {
+    process.env.REACT_APP_DEV_TOOLS = '1';
+    expect(isDevToolsEnabled()).toBe(true);
+  });
+});
diff --git a/src/tests/BulkDelete.render-hidden.test.js b/src/tests/BulkDelete.render-hidden.test.js
new file mode 100644
index 0000000..518de89
--- /dev/null
+++ b/src/tests/BulkDelete.render-hidden.test.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen, waitFor, fireEvent, cleanup, act } from '@testing-library/react';
+import App from '../App';
+
+describe('Bulk-delete-all button render gating', () => {
+  const orig = process.env.REACT_APP_DEV_TOOLS;
+
+  afterEach(() => {
+    cleanup();
+    if (orig === undefined) delete process.env.REACT_APP_DEV_TOOLS;
+    else process.env.REACT_APP_DEV_TOOLS = orig;
+  });
+
+  async function renderAndCreateCampaign() {
+    window.history.replaceState({}, '', '/');
+    global.alert = jest.fn();
+    global.window.open = jest.fn();
+    render(<App />);
+    await waitFor(() => screen.getByRole('button', { name: /Create Campaign/i }));
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /Create Campaign/i }));
+    });
+    await waitFor(() => screen.getByLabelText(/Campaign Name/i));
+    await act(async () => {
+      fireEvent.change(screen.getByLabelText(/Campaign Name/i), { target: { value: 'Gate Render Test' } });
+      fireEvent.click(screen.getByRole('button', { name: /^Create$/i }));
+      await new Promise(r => setTimeout(r, 200));
+    });
+  }
+
+  test('prod safety: button absent when DEV_TOOLS unset', async () => {
+    delete process.env.REACT_APP_DEV_TOOLS;
+    await renderAndCreateCampaign();
+    expect(screen.queryByText(/Delete All Campaigns/i)).not.toBeInTheDocument();
+  });
+});
diff --git a/src/tests/BulkDelete.render-shown.test.js b/src/tests/BulkDelete.render-shown.test.js
new file mode 100644
index 0000000..b54df40
--- /dev/null
+++ b/src/tests/BulkDelete.render-shown.test.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen, waitFor, fireEvent, cleanup, act } from '@testing-library/react';
+import App from '../App';
+
+describe('Bulk-delete-all button dev feature', () => {
+  const orig = process.env.REACT_APP_DEV_TOOLS;
+
+  afterEach(() => {
+    cleanup();
+    if (orig === undefined) delete process.env.REACT_APP_DEV_TOOLS;
+    else process.env.REACT_APP_DEV_TOOLS = orig;
+  });
+
+  async function renderAndCreateCampaign() {
+    window.history.replaceState({}, '', '/');
+    global.alert = jest.fn();
+    global.window.open = jest.fn();
+    render(<App />);
+    await waitFor(() => screen.getByRole('button', { name: /Create Campaign/i }));
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /Create Campaign/i }));
+    });
+    await waitFor(() => screen.getByLabelText(/Campaign Name/i));
+    await act(async () => {
+      fireEvent.change(screen.getByLabelText(/Campaign Name/i), { target: { value: 'Gate Render Test' } });
+      fireEvent.click(screen.getByRole('button', { name: /^Create$/i }));
+      await new Promise(r => setTimeout(r, 200));
+    });
+  }
+
+  test('dev: button present when DEV_TOOLS=1 and campaigns exist', async () => {
+    process.env.REACT_APP_DEV_TOOLS = '1';
+    await renderAndCreateCampaign();
+    await waitFor(() => screen.getByText(/Delete All Campaigns/i), { timeout: 5000 });
+  });
+});
-- 
2.34.1


From 863e8b3719c8878c948d0b25d02a1cc7991d922a Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Wed, 8 Jul 2026 12:23:19 -0400
Subject: [PATCH 14/24] Add AC field (character, monster/npc, participant
 edit); layout polish

AC (Armor Class) optional field across all participant entry points:
- shared: ac field on makeParticipant + buildMonsterParticipant +
  buildCharacterParticipant, defaults null
- CharacterManager: defaultAc state + add form field + inline edit field +
  display in character list
- Monster add form: AC field
- EditParticipantModal: AC field next to Initiative
- ParticipantManager (DM list): AC badge on name row (sky-blue, stylized,
  large value, small label) for at-a-glance reading
- Player display: no AC (DM only)

Layout polish:
- Add participants form: 12-col grid, 5 fields single row (Init Mod, Initiative,
  AC, Max HP, HP Formula), shrunk from oversized fields
- Character add form: 12-col grid, name grows (col-span-6), Init Mod/AC/HP
  small right-aligned, order matches add participants
- Character inline edit: labels added (Name/HP/Init Mod/AC), name flex-grows
- HP Formula: label trimmed (example moved to placeholder 'e.g. 2d6+9'),
  Reroll button in edit modal
- ParticipantManager init input shrunk (w-8, centered)

Tests: 6 new AC builder tests (turn.ac.test.js). Existing test labels updated
for renamed fields.
---
 TODO.md                                 |   5 +-
 shared/tests/turn.ac.test.js            |  35 +++++
 shared/turn.js                          |   5 +-
 src/App.js                              | 187 ++++++++++++++++--------
 src/tests/App.characterization.test.js  |   2 +-
 src/tests/Logs.characterization.test.js |   2 +-
 6 files changed, 172 insertions(+), 64 deletions(-)
 create mode 100644 shared/tests/turn.ac.test.js

diff --git a/TODO.md b/TODO.md
index f04ce7a..cbd8a64 100644
--- a/TODO.md
+++ b/TODO.md
@@ -9,12 +9,13 @@ fullscreen and dont lock on main app dm view and the no-game-player view
 
 also better vert tab layout - labelt friendly
 
-needs AC for players dude
+x needs AC for players dude
 
 and quick entry hp
 
 hp do not carry from encounter to ecnounter!!!
-
+^feature to add back to campaign character after encounter?
+maybe campaign toggle in charc section (choosing each end is DM overload will be missed forgotten done wront)
 
 hp wont go over max and no temp hp support
 
diff --git a/shared/tests/turn.ac.test.js b/shared/tests/turn.ac.test.js
new file mode 100644
index 0000000..4ae1ab8
--- /dev/null
+++ b/shared/tests/turn.ac.test.js
@@ -0,0 +1,35 @@
+// AC field on participant + builders.
+const shared = require('@ttrpg/shared');
+const { makeParticipant, buildMonsterParticipant, buildCharacterParticipant, rollHpFormula } = shared;
+
+describe('AC field', () => {
+  test('makeParticipant accepts ac', () => {
+    const p = makeParticipant({ name: 'Orc', type: 'monster', initiative: 10, maxHp: 15, currentHp: 15, ac: 13 });
+    expect(p.ac).toBe(13);
+  });
+
+  test('makeParticipant ac defaults null', () => {
+    const p = makeParticipant({ name: 'Orc', type: 'monster', initiative: 10, maxHp: 15, currentHp: 15 });
+    expect(p.ac).toBeNull();
+  });
+
+  test('buildMonsterParticipant accepts ac', () => {
+    const { participant } = buildMonsterParticipant({ name: 'Goblin', maxHp: 7, initMod: 2, ac: 15 });
+    expect(participant.ac).toBe(15);
+  });
+
+  test('buildMonsterParticipant ac defaults null', () => {
+    const { participant } = buildMonsterParticipant({ name: 'Goblin', maxHp: 7 });
+    expect(participant.ac).toBeNull();
+  });
+
+  test('buildCharacterParticipant accepts character ac', () => {
+    const { participant } = buildCharacterParticipant({ id: 'c1', name: 'Fighter', defaultMaxHp: 30, defaultInitMod: 2, defaultAc: 18 });
+    expect(participant.ac).toBe(18);
+  });
+
+  test('buildCharacterParticipant ac defaults null when unset', () => {
+    const { participant } = buildCharacterParticipant({ id: 'c1', name: 'Fighter', defaultMaxHp: 30 });
+    expect(participant.ac).toBeNull();
+  });
+});
diff --git a/shared/turn.js b/shared/turn.js
index 1046286..d2a1672 100644
--- a/shared/turn.js
+++ b/shared/turn.js
@@ -361,6 +361,7 @@ function makeParticipant(opts) {
     deathSaveSuccesses: opts.deathSaveSuccesses || 0,
     deathSaveFailures: opts.deathSaveFailures || 0,
     hpFormula: opts.hpFormula || null,
+    ac: opts.ac !== undefined ? opts.ac : null,
   };
 }
 
@@ -377,12 +378,13 @@ function buildCharacterParticipant(character) {
       initiative: finalInitiative,
       maxHp,
       currentHp: maxHp,
+      ac: character.defaultAc !== undefined ? character.defaultAc : null,
     }),
     roll: { roll: initiativeRoll, mod: modifier, total: finalInitiative },
   };
 }
 
-function buildMonsterParticipant({ name, maxHp, initMod, asNpc, hpFormula }) {
+function buildMonsterParticipant({ name, maxHp, initMod, asNpc, hpFormula, ac }) {
   const initiativeRoll = rollD20();
   const modifier = initMod !== undefined ? initMod : MONSTER_DEFAULT_INIT_MOD;
   const finalInitiative = initiativeRoll + modifier;
@@ -406,6 +408,7 @@ function buildMonsterParticipant({ name, maxHp, initMod, asNpc, hpFormula }) {
       maxHp: hp,
       currentHp: hp,
       hpFormula: hpFormula || null,
+      ac: ac !== undefined ? ac : null,
     }),
     roll: { roll: initiativeRoll, mod: modifier, total: finalInitiative, hpRoll },
   };
diff --git a/src/App.js b/src/App.js
index 07a2559..7d10402 100644
--- a/src/App.js
+++ b/src/App.js
@@ -583,6 +583,7 @@ function EditParticipantModal({ participant, onClose, onSave }) {
   const [currentHp, setCurrentHp] = useState(participant.currentHp);
   const [maxHp, setMaxHp] = useState(participant.maxHp);
   const [hpFormula, setHpFormula] = useState(participant.hpFormula || '');
+  const [ac, setAc] = useState(participant.ac != null ? participant.ac : '');
   const [asNpc, setAsNpc] = useState(participant.type === 'npc');
 
   const handleSubmit = (e) => {
@@ -602,6 +603,7 @@ function EditParticipantModal({ participant, onClose, onSave }) {
       currentHp: finalCurrentHp,
       maxHp: finalMaxHp,
       hpFormula: (participant.type === 'monster' || participant.type === 'npc') ? (hpFormula.trim() || null) : null,
+      ac: ac !== '' ? parseInt(ac, 10) : null,
       type: participant.type === 'monster' || participant.type === 'npc' ? (asNpc ? 'npc' : 'monster') : participant.type,
     });
   };
@@ -618,15 +620,27 @@ function EditParticipantModal({ participant, onClose, onSave }) {
             className="mt-1 block w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
           />
         </div>
-        <div>
-          <label htmlFor="edit-initiative" className="block text-sm font-medium text-stone-300">Initiative</label>
-          <input
-            type="number"
-            id="edit-initiative"
-            value={initiative}
-            onChange={(e) => setInitiative(e.target.value)}
-            className="mt-1 block w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
-          />
+        <div className="flex gap-4">
+          <div className="flex-1">
+            <label htmlFor="edit-initiative" className="block text-sm font-medium text-stone-300">Initiative</label>
+            <input
+              type="number"
+              id="edit-initiative"
+              value={initiative}
+              onChange={(e) => setInitiative(e.target.value)}
+              className="mt-1 block w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
+            />
+          </div>
+          <div className="flex-1">
+            <label className="block text-sm font-medium text-stone-300">AC</label>
+            <input
+              type="number"
+              value={ac}
+              onChange={(e) => setAc(e.target.value)}
+              placeholder="optional"
+              className="mt-1 block w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
+            />
+          </div>
         </div>
         <div className="flex gap-4">
           <div className="flex-1">
@@ -656,7 +670,7 @@ function EditParticipantModal({ participant, onClose, onSave }) {
                 type="text"
                 value={hpFormula}
                 onChange={(e) => setHpFormula(e.target.value)}
-                placeholder="2d6+9"
+                placeholder="e.g. 2d6+9"
                 className="flex-1 px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
               />
               <button
@@ -717,6 +731,7 @@ function CharacterManager({ campaignId, campaignCharacters }) {
   const [characterName, setCharacterName] = useState('');
   const [defaultMaxHp, setDefaultMaxHp] = useState(DEFAULT_MAX_HP);
   const [defaultInitMod, setDefaultInitMod] = useState(DEFAULT_INIT_MOD);
+  const [defaultAc, setDefaultAc] = useState('');
   const [editingCharacter, setEditingCharacter] = useState(null);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [itemToDelete, setItemToDelete] = useState(null);
@@ -762,7 +777,8 @@ function CharacterManager({ campaignId, campaignCharacters }) {
       id: generateId(),
       name: characterName.trim(),
       defaultMaxHp: hp,
-      defaultInitMod: initMod
+      defaultInitMod: initMod,
+      defaultAc: defaultAc !== '' ? parseInt(defaultAc, 10) : null
     };
 
     try {
@@ -772,12 +788,13 @@ function CharacterManager({ campaignId, campaignCharacters }) {
       setCharacterName('');
       setDefaultMaxHp(DEFAULT_MAX_HP);
       setDefaultInitMod(DEFAULT_INIT_MOD);
+      setDefaultAc('');
     } catch (err) {
       console.error("Error adding character:", err);
       showToast("Failed to add character. Please try again.");    }
   };
 
-  const handleUpdateCharacter = async (characterId, newName, newDefaultMaxHp, newDefaultInitMod) => {
+  const handleUpdateCharacter = async (characterId, newName, newDefaultMaxHp, newDefaultInitMod, newDefaultAc) => {
     if (!db || !newName.trim() || !campaignId) return;
 
     const hp = parseInt(newDefaultMaxHp, 10);
@@ -794,7 +811,7 @@ function CharacterManager({ campaignId, campaignCharacters }) {
 
     const updatedCharacters = campaignCharacters.map(c =>
       c.id === characterId
-        ? { ...c, name: newName.trim(), defaultMaxHp: hp, defaultInitMod: initMod }
+        ? { ...c, name: newName.trim(), defaultMaxHp: hp, defaultInitMod: initMod, defaultAc: newDefaultAc !== undefined && newDefaultAc !== '' ? parseInt(newDefaultAc, 10) : null }
         : c
     );
 
@@ -843,8 +860,8 @@ function CharacterManager({ campaignId, campaignCharacters }) {
 
         {isOpen && (
           <>
-            <form onSubmit={(e) => { e.preventDefault(); handleAddCharacter(); }} className="grid grid-cols-1 sm:grid-cols-3 gap-2 mb-4 items-end">
-              <div className="sm:col-span-1">
+            <form onSubmit={(e) => { e.preventDefault(); handleAddCharacter(); }} className="grid grid-cols-2 sm:grid-cols-12 gap-2 mb-4 items-end">
+              <div className="col-span-2 sm:col-span-6">
                 <label htmlFor="characterName" className="block text-xs font-medium text-stone-400">
                   Name
                 </label>
@@ -857,19 +874,7 @@ function CharacterManager({ campaignId, campaignCharacters }) {
                   className="w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
                 />
               </div>
-              <div className="w-full sm:w-auto">
-                <label htmlFor="defaultMaxHp" className="block text-xs font-medium text-stone-400">
-                  Default HP
-                </label>
-                <input
-                  type="number"
-                  id="defaultMaxHp"
-                  value={defaultMaxHp}
-                  onChange={(e) => setDefaultMaxHp(e.target.value)}
-                  className="w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
-                />
-              </div>
-              <div className="w-full sm:w-auto">
+              <div className="sm:col-span-2">
                 <label htmlFor="defaultInitMod" className="block text-xs font-medium text-stone-400">
                   Init Mod
                 </label>
@@ -881,9 +886,33 @@ function CharacterManager({ campaignId, campaignCharacters }) {
                   className="w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
                 />
               </div>
+              <div className="sm:col-span-2">
+                <label htmlFor="defaultAc" className="block text-xs font-medium text-stone-400">
+                  AC
+                </label>
+                <input
+                  type="number"
+                  id="defaultAc"
+                  value={defaultAc}
+                  onChange={(e) => setDefaultAc(e.target.value)}
+                  className="w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
+                />
+              </div>
+              <div className="sm:col-span-2">
+                <label htmlFor="defaultMaxHp" className="block text-xs font-medium text-stone-400">
+                  HP
+                </label>
+                <input
+                  type="number"
+                  id="defaultMaxHp"
+                  value={defaultMaxHp}
+                  onChange={(e) => setDefaultMaxHp(e.target.value)}
+                  className="w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
+                />
+              </div>
               <button
                 type="submit"
-                className="sm:col-span-3 sm:w-auto sm:justify-self-end px-4 py-2 text-sm font-medium text-white bg-amber-700 hover:bg-amber-800 rounded-md transition-colors flex items-center justify-center"
+                className="col-span-2 sm:col-span-12 sm:w-auto sm:justify-self-end px-4 py-2 text-sm font-medium text-white bg-amber-700 hover:bg-amber-800 rounded-md transition-colors flex items-center justify-center"
               >
                 <PlusCircle size={18} className="mr-1" /> Add Character
               </button>
@@ -914,31 +943,51 @@ function CharacterManager({ campaignId, campaignCharacters }) {
                           character.id,
                           editingCharacter.name,
                           editingCharacter.defaultMaxHp,
-                          editingCharacter.defaultInitMod
+                          editingCharacter.defaultInitMod,
+                          editingCharacter.defaultAc
                         );
                       }}
                       className="flex-grow flex flex-wrap gap-2 items-center"
                     >
-                      <input
-                        type="text"
-                        value={editingCharacter.name}
-                        onChange={(e) => setEditingCharacter({ ...editingCharacter, name: e.target.value })}
-                        className="flex-grow min-w-[100px] px-2 py-1 bg-stone-700 border border-stone-600 rounded-md text-white"
-                      />
-                      <input
-                        type="number"
-                        value={editingCharacter.defaultMaxHp}
-                        onChange={(e) => setEditingCharacter({ ...editingCharacter, defaultMaxHp: e.target.value })}
-                        className="w-20 px-2 py-1 bg-stone-700 border border-stone-600 rounded-md text-white"
-                        title="Default Max HP"
-                      />
-                      <input
-                        type="number"
-                        value={editingCharacter.defaultInitMod}
-                        onChange={(e) => setEditingCharacter({ ...editingCharacter, defaultInitMod: e.target.value })}
-                        className="w-20 px-2 py-1 bg-stone-700 border border-stone-600 rounded-md text-white"
-                        title="Default Init Mod"
-                      />
+                      <div className="flex flex-col flex-grow min-w-[100px]">
+                        <label className="text-[10px] text-stone-400 mb-0.5">Name</label>
+                        <input
+                          type="text"
+                          value={editingCharacter.name}
+                          onChange={(e) => setEditingCharacter({ ...editingCharacter, name: e.target.value })}
+                          className="w-full px-2 py-1 bg-stone-700 border border-stone-600 rounded-md text-white"
+                        />
+                      </div>
+                      <div className="flex flex-col">
+                        <label className="text-[10px] text-stone-400 mb-0.5">HP</label>
+                        <input
+                          type="number"
+                          value={editingCharacter.defaultMaxHp}
+                          onChange={(e) => setEditingCharacter({ ...editingCharacter, defaultMaxHp: e.target.value })}
+                          className="w-20 px-2 py-1 bg-stone-700 border border-stone-600 rounded-md text-white"
+                          title="Default Max HP"
+                        />
+                      </div>
+                      <div className="flex flex-col">
+                        <label className="text-[10px] text-stone-400 mb-0.5">Init</label>
+                        <input
+                          type="number"
+                          value={editingCharacter.defaultInitMod}
+                          onChange={(e) => setEditingCharacter({ ...editingCharacter, defaultInitMod: e.target.value })}
+                          className="w-20 px-2 py-1 bg-stone-700 border border-stone-600 rounded-md text-white"
+                          title="Default Init Mod"
+                        />
+                      </div>
+                      <div className="flex flex-col">
+                        <label className="text-[10px] text-stone-400 mb-0.5">AC</label>
+                        <input
+                          type="number"
+                          value={editingCharacter.defaultAc ?? ''}
+                          onChange={(e) => setEditingCharacter({ ...editingCharacter, defaultAc: e.target.value })}
+                          className="w-16 px-2 py-1 bg-stone-700 border border-stone-600 rounded-md text-white"
+                          title="AC"
+                        />
+                      </div>
                       <button type="submit" className="p-1 text-green-400 hover:text-green-300">
                         <Save size={18} />
                       </button>
@@ -955,7 +1004,7 @@ function CharacterManager({ campaignId, campaignCharacters }) {
                       <span className="text-stone-100">
                         {character.name}{' '}
                         <span className="text-xs text-stone-400">
-                          (HP: {character.defaultMaxHp || 'N/A'}, Init Mod: {formatInitMod(character.defaultInitMod)})
+                          (HP: {character.defaultMaxHp || 'N/A'}, Init Mod: {formatInitMod(character.defaultInitMod)}{character.defaultAc != null ? `, AC: ${character.defaultAc}` : ''})
                         </span>
                       </span>
                       <div className="flex space-x-2">
@@ -964,7 +1013,8 @@ function CharacterManager({ campaignId, campaignCharacters }) {
                             id: character.id,
                             name: character.name,
                             defaultMaxHp: character.defaultMaxHp || DEFAULT_MAX_HP,
-                            defaultInitMod: character.defaultInitMod || DEFAULT_INIT_MOD
+                            defaultInitMod: character.defaultInitMod || DEFAULT_INIT_MOD,
+                            defaultAc: character.defaultAc ?? ''
                           })}
                           className="p-1 rounded transition-colors text-yellow-400 hover:text-yellow-300 bg-stone-700 hover:bg-stone-600"
                           aria-label="Edit character"
@@ -1013,6 +1063,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
   const [maxHp, setMaxHp] = useState('');
   const [hpFormula, setHpFormula] = useState('');
   const [manualInitiative, setManualInitiative] = useState('');
+  const [monsterAc, setMonsterAc] = useState('');
   const [asNpc, setAsNpc] = useState(false);
   const [editingParticipant, setEditingParticipant] = useState(null);
   const [hpChangeValues, setHpChangeValues] = useState({});
@@ -1095,6 +1146,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
       maxHp: currentMaxHp,
       currentHp: currentMaxHp,
       hpFormula: participantType === 'monster' ? (hpFormula.trim() || null) : null,
+      ac: participantType === 'monster' && monsterAc !== '' ? parseInt(monsterAc, 10) : (participantType === 'character' ? (campaignCharacters.find(c => c.id === selectedCharacterId)?.defaultAc ?? null) : null),
       conditions: [],
       isActive: true,
       status: 'conscious',
@@ -1120,6 +1172,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
       setHpFormula('');
       setSelectedCharacterId('');
       setMonsterInitMod(MONSTER_DEFAULT_INIT_MOD);
+      setMonsterAc('');
       setAsNpc(false);
       setManualInitiative('');
     } catch (err) {
@@ -1411,7 +1464,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                   className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
                 />
               </div>
-              <div className="md:col-span-3">
+              <div className="md:col-span-2">
                 <label htmlFor="monsterInitMod" className="block text-sm font-medium text-stone-300">
                   Init Mod
                 </label>
@@ -1423,7 +1476,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                   className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
                 />
               </div>
-              <div className="md:col-span-3">
+              <div className="md:col-span-2">
                 <label htmlFor="manualInitiative" className="block text-sm font-medium text-stone-300">
                   Initiative <span className="text-xs text-stone-400">(blank=roll)</span>
                 </label>
@@ -1436,7 +1489,17 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                   className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
                 />
               </div>
-              <div className="md:col-span-3">
+              <div className="md:col-span-2">
+                <label htmlFor="monsterAc" className="block text-sm font-medium text-stone-300">AC</label>
+                <input
+                  type="number"
+                  id="monsterAc"
+                  value={monsterAc}
+                  onChange={(e) => setMonsterAc(e.target.value)}
+                  className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
+                />
+              </div>
+              <div className="md:col-span-2">
                 <label htmlFor="monsterMaxHp" className="block text-sm font-medium text-stone-300">
                   Max HP
                 </label>
@@ -1448,16 +1511,16 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                   className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
                 />
               </div>
-              <div className="md:col-span-3">
+              <div className="md:col-span-4">
                 <label htmlFor="monsterHpFormula" className="block text-sm font-medium text-stone-300">
-                  HP Formula (e.g. 2d6+9)
+                  HP Formula
                 </label>
                 <input
                   type="text"
                   id="monsterHpFormula"
                   value={hpFormula}
                   onChange={(e) => setHpFormula(e.target.value)}
-                  placeholder="2d6+9"
+                  placeholder="e.g. 2d6+9"
                   className="mt-1 w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
                 />
               </div>
@@ -1579,6 +1642,12 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                     <p className="font-semibold text-lg text-white">
                       {isZeroHp && <span className="mr-2">☠️</span>}
                       {p.name} <span className="text-xs">({participantDisplayType})</span>
+                      {p.ac != null && (
+                        <span className="ml-2 inline-flex items-baseline gap-1 px-2 py-0.5 bg-sky-900 border border-sky-500 rounded">
+                          <span className="text-[10px] text-sky-300 font-semibold tracking-wide">AC</span>
+                          <span className="text-sky-100 text-lg font-bold leading-none">{p.ac}</span>
+                        </span>
+                      )}
                       {isCurrentTurn && !encounter.isPaused && (
                         <span className="ml-2 px-2 py-0.5 bg-yellow-400 text-black text-xs font-bold rounded-full inline-flex items-center">
                           <Zap size={12} className="mr-1" /> CURRENT
@@ -1604,7 +1673,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                           onFocus={(e) => e.target.select()}
                           onBlur={(e) => { if (e.target.value !== String(p.initiative)) handleInlineInitiative(p.id, e.target.value); }}
                           onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); }}
-                          className="w-10 px-1 py-0.5 bg-stone-800 border border-stone-700 rounded-md shadow-sm text-white text-sm focus:outline-none focus:ring-1 focus:ring-amber-600 focus:border-amber-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                          className="w-8 px-1 py-0.5 bg-stone-800 border border-stone-700 rounded-md shadow-sm text-white text-sm text-center focus:outline-none focus:ring-1 focus:ring-amber-600 focus:border-amber-600 disabled:opacity-50 disabled:cursor-not-allowed"
                           aria-label={`Initiative for ${p.name}`}
                         />
                       </span>
diff --git a/src/tests/App.characterization.test.js b/src/tests/App.characterization.test.js
index 83d5f2a..93a64c1 100644
--- a/src/tests/App.characterization.test.js
+++ b/src/tests/App.characterization.test.js
@@ -62,7 +62,7 @@ describe('Campaign -> Firebase', () => {
 
     // CharacterManager form
     fireEvent.change(screen.getByPlaceholderText('Character name'), { target: { value: 'Brog' } });
-    fireEvent.change(screen.getByLabelText(/Default HP/i), { target: { value: '25' } });
+    fireEvent.change(screen.getByLabelText(/^HP$/i), { target: { value: '25' } });
     fireEvent.change(screen.getByLabelText(/Init Mod/i), { target: { value: '3' } });
     fireEvent.click(screen.getByRole('button', { name: /Add Character/i }));
 
diff --git a/src/tests/Logs.characterization.test.js b/src/tests/Logs.characterization.test.js
index 6ddd0be..316cc7f 100644
--- a/src/tests/Logs.characterization.test.js
+++ b/src/tests/Logs.characterization.test.js
@@ -20,7 +20,7 @@ async function addCharacterToEncounter(name = 'Hero', hp = 10) {
   await selectCampaignByName(`DS-${name}`);
 
   fireEvent.change(screen.getByPlaceholderText('Character name'), { target: { value: name } });
-  fireEvent.change(screen.getByLabelText(/Default HP/i), { target: { value: String(hp) } });
+  fireEvent.change(screen.getByLabelText(/^HP$/i), { target: { value: String(hp) } });
   fireEvent.click(screen.getByRole('button', { name: /Add Character/i }));
   await waitFor(() => findCalls('updateDoc', '/campaigns/').find(c => c.data.players?.length === 1));
   const charId = findCalls('updateDoc', '/campaigns/').find(c => c.data.players?.length === 1).data.players[0].id;
-- 
2.34.1


From 41c1e48874698c196297467ce23462243f9dafc4 Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Wed, 8 Jul 2026 13:19:10 -0400
Subject: [PATCH 15/24] Wake lock persistence, button reposition, docs, dev LAN
 support

Wake lock (Prevent Sleep) toggles now persist across reloads via
localStorage in both AdminView and DisplayView. Buttons repositioned
inline in AdminView campaigns header bar (was floating overlay causing
overlap on tablets). DisplayView buttons persist localStorage too.

Wake lock acquire failure now shows toast with fix hint (HTTPS or
Chrome flag). Fullscreenchange listener re-acquires wake lock (Android
discards on screen off).

dev-start.sh: auto-detects LAN IP (en0/en1), frontend binds 0.0.0.0,
backend URL inlined as LAN IP so phones reach backend. DANGEROUSLY_DISABLE_HOST_CHECK
for LAN access. Outputs LAN URL + wake lock flag instructions.

Docs: README 'Prevent Sleep (Wake Lock)' section covering secure context
requirement, Android Chrome flag workaround for LAN testing, iOS Safari
standalone PWA bug. DEVELOPMENT.md LAN access + wake lock note.
---
 README.md            | 20 ++++++++++
 TODO.md              |  2 +-
 docs/DEVELOPMENT.md  |  8 ++++
 scripts/dev-start.sh | 16 ++++++--
 src/App.js           | 90 +++++++++++++++++++++++++++++++++++++++++++-
 5 files changed, 130 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 4382857..fb24170 100644
--- a/README.md
+++ b/README.md
@@ -307,6 +307,26 @@ ttrpg-initiative-tracker/
 * `docs/GLOSSARY.md` — domain terms (turn vs. round, etc.)
 * `TODO.md` — known bugs and backlog
 
+## Prevent Sleep (Wake Lock)
+
+DM and Player views have a Coffee/Moon toggle to keep screen awake during combat.
+
+**Requires secure context** (HTTPS or localhost). The Screen Wake Lock API refuses
+on plain HTTP.
+
+- **Prod (HTTPS):** works automatically on all devices.
+- **Local dev (localhost):** works automatically — localhost is a trusted origin.
+- **LAN IP (phones, plain HTTP):** wake lock fails silently. Two options:
+  1. **Android Chrome flag (dev testing):** `chrome://flags/#unsafely-treat-insecure-origin-as-secure` → add full URL with port, e.g. `http://10.0.0.5:3999`. Enable flag, relaunch.
+  2. **mkcert local CA:** generate trusted cert for LAN IP. Heavier setup.
+
+**iOS Safari:** Wake Lock API broken in standalone PWA mode (iOS 16.4–18.4, WebKit bug 254545). Fixed in 18.4+. Works in browser tab (not installed PWA).
+
+**Troubleshooting:** if toggle shows active but screen still sleeps, check:
+- Battery saver / power save mode (browser refuses)
+- Chrome devtools console for `WakeLockError`
+- Secure context: `window.isSecureContext` must be `true`
+
 ## Contributing
 
 If you want to contribute, send me a message here: [https://discourse.draft13.com/c/ttrpg-initiative-tracker/16](https://discourse.draft13.com/c/ttrpg-initiative-tracker/16), and I can add to this Gitea instance and you can feel free to fork the repository and submit pull requests. For major changes, please pose a topic to the Discourse instance above linked above first to discuss what you would like to change.
diff --git a/TODO.md b/TODO.md
index cbd8a64..ee69e02 100644
--- a/TODO.md
+++ b/TODO.md
@@ -5,7 +5,7 @@ Backlog of bugs + long-term items. Milestones live in REWORK_PLAN.md.
 ## Open
 
 
-fullscreen and dont lock on main app dm view and the no-game-player view
+x fullscreen and dont lock on main app dm view and the no-game-player view ...and doesnt actually prevent lock on android
 
 also better vert tab layout - labelt friendly
 
diff --git a/docs/DEVELOPMENT.md b/docs/DEVELOPMENT.md
index b26deef..4c9ad6f 100644
--- a/docs/DEVELOPMENT.md
+++ b/docs/DEVELOPMENT.md
@@ -63,6 +63,14 @@ git config core.hooksPath .githooks   # enable pre-push test gate
 
 Idempotent: if port busy, leaves existing proc as-is.
 
+**LAN access (phones):** frontend binds 0.0.0.0, LAN IP auto-detected.
+Other devices hit `http://<lan-ip>:3999`.
+
+**Wake Lock (Prevent Sleep) on LAN IP:** requires secure context.
+Plain HTTP on LAN IP = wake lock silently fails. Android Chrome flag workaround:
+`chrome://flags/#unsafely-treat-insecure-origin-as-secure` → add
+`http://<lan-ip>:3999` (with port), enable, relaunch. See README for full details.
+
 Smoke check:
 ```bash
 curl http://127.0.0.1:4001/health   # -> {"ok":true}
diff --git a/scripts/dev-start.sh b/scripts/dev-start.sh
index e87855b..7e1a47c 100755
--- a/scripts/dev-start.sh
+++ b/scripts/dev-start.sh
@@ -27,11 +27,15 @@ fi
 
 # frontend: server storage, :3999
 if ! lsof -ti :3999 >/dev/null 2>&1; then
-  echo "starting frontend :3999..."
+  # detect LAN ip so other devices (phones) can reach backend
+  LAN_IP=$(ipconfig getifaddr en0 2>/dev/null || ipconfig getifaddr en1 2>/dev/null || echo 127.0.0.1)
+  echo "starting frontend :3999 (lan ip: $LAN_IP)..."
   NODE_ENV=development REACT_APP_DEV_TOOLS=1 \
   REACT_APP_STORAGE=server \
-  REACT_APP_BACKEND_URL=http://127.0.0.1:4001 \
-  REACT_APP_BACKEND_REALTIME_URL=ws://127.0.0.1:4001/ws \
+  REACT_APP_BACKEND_URL=http://${LAN_IP}:4001 \
+  REACT_APP_BACKEND_REALTIME_URL=ws://${LAN_IP}:4001/ws \
+  DANGEROUSLY_DISABLE_HOST_CHECK=true \
+  HOST=0.0.0.0 \
   BROWSER=none PORT=3999 \
     nohup npm start > tmp/fe.log 2>&1 &
   echo $! > tmp/fe.pid
@@ -51,5 +55,11 @@ done
 echo ""
 echo "backend  : http://127.0.0.1:4001   (curl http://127.0.0.1:4001/health)"
 echo "frontend : http://127.0.0.1:3999   (admin /  player /display)"
+echo "lan url  : http://${LAN_IP}:3999   (phones/other devices on network)"
 echo "logs     : tmp/server.log tmp/fe.log"
 echo "stop     : ./scripts/dev-stop.sh"
+echo ""
+echo "NOTE: Prevent Sleep (wake lock) requires secure context (HTTPS/localhost)."
+echo "  LAN IP (http) won't work unless Android Chrome flag set:"
+echo "  chrome://flags/#unsafely-treat-insecure-origin-as-secure"
+echo "  Add: http://${LAN_IP}:3999 (include port)"
diff --git a/src/App.js b/src/App.js
index 7d10402..844689e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2489,6 +2489,53 @@ function AdminView({ userId }) {
   );
   const { data: initialActiveInfo } = useFirestoreDocument(getPath.activeDisplay());
 
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [wakeLockEnabled, setWakeLockEnabled] = useState(() => {
+    try { return localStorage.getItem('ttrpg.wakeLock') === 'true'; }
+    catch { return false; }
+  });
+  const wakeLockRef = useRef(null);
+
+  const toggleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
+  };
+
+  useEffect(() => {
+    const onFsChange = () => setIsFullscreen(!!document.fullscreenElement);
+    document.addEventListener('fullscreenchange', onFsChange);
+    return () => document.removeEventListener('fullscreenchange', onFsChange);
+  }, []);
+
+  useEffect(() => {
+    if (!wakeLockEnabled) {
+      wakeLockRef.current?.release();
+      wakeLockRef.current = null;
+      return;
+    }
+    const acquire = async () => {
+      try { wakeLockRef.current = await navigator.wakeLock.request('screen'); }
+      catch (e) {
+        console.error('Wake lock failed:', e);
+        showToast('Prevent Sleep failed. Requires HTTPS or Chrome flag: chrome://flags/#unsafely-treat-insecure-origin-as-secure');
+      }
+    };
+    acquire();
+    const onVisChange = () => { if (document.visibilityState === 'visible') acquire(); };
+    const onFsChange = () => { if (document.fullscreenElement) acquire(); };
+    document.addEventListener('visibilitychange', onVisChange);
+    document.addEventListener('fullscreenchange', onFsChange);
+    return () => {
+      document.removeEventListener('visibilitychange', onVisChange);
+      document.removeEventListener('fullscreenchange', onFsChange);
+      wakeLockRef.current?.release();
+      wakeLockRef.current = null;
+    };
+  }, [wakeLockEnabled, showToast]);
+
   const [campaignsWithDetails, setCampaignsWithDetails] = useState([]);
   const [draggedCampaignId, setDraggedCampaignId] = useState(null);
   const [selectedCampaignId, setSelectedCampaignId] = useState(null);
@@ -2735,6 +2782,22 @@ function AdminView({ userId }) {
             >
               <PlusCircle size={20} className="mr-2" /> Create Campaign
             </button>
+            <div className="flex gap-1">
+              <button
+                onClick={() => setWakeLockEnabled(v => { localStorage.setItem('ttrpg.wakeLock', String(!v)); return !v; })}
+                title={wakeLockEnabled ? 'Allow sleep' : 'Prevent sleep'}
+                className={`p-2 rounded-lg transition-all ${wakeLockEnabled ? 'bg-amber-600 hover:bg-amber-700 text-white' : 'bg-stone-800 hover:bg-stone-700 text-stone-300 hover:text-white'}`}
+              >
+                {wakeLockEnabled ? <Coffee size={20} /> : <Moon size={20} />}
+              </button>
+              <button
+                onClick={toggleFullscreen}
+                title={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+                className="bg-stone-800 hover:bg-stone-700 text-stone-300 hover:text-white p-2 rounded-lg transition-all"
+              >
+                {isFullscreen ? <Minimize2 size={20} /> : <Maximize2 size={20} />}
+              </button>
+            </div>
           </div>
 
           {!campaignsCollapsed && (
@@ -2963,7 +3026,10 @@ function DisplayView() {
   const [campaignBackgroundUrl, setCampaignBackgroundUrl] = useState('');
   const [isPlayerDisplayActive, setIsPlayerDisplayActive] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
-  const [wakeLockEnabled, setWakeLockEnabled] = useState(false);
+  const [wakeLockEnabled, setWakeLockEnabled] = useState(() => {
+    try { return localStorage.getItem('ttrpg.wakeLock') === 'true'; }
+    catch { return false; }
+  });
   const [displayParticipants, setDisplayParticipants] = useState([]);
   const wakeLockRef = useRef(null);
   const currentParticipantRef = useRef(null);
@@ -3029,8 +3095,12 @@ function DisplayView() {
     // Re-acquire after tab becomes visible again (browser auto-releases on hide)
     const onVisChange = () => { if (document.visibilityState === 'visible') acquire(); };
     document.addEventListener('visibilitychange', onVisChange);
+    // Re-acquire on fullscreen change (Android discards wakeLock on screen off)
+    const onFsChange = () => { if (document.fullscreenElement) acquire(); };
+    document.addEventListener('fullscreenchange', onFsChange);
     return () => {
       document.removeEventListener('visibilitychange', onVisChange);
+      document.removeEventListener('fullscreenchange', onFsChange);
       wakeLockRef.current?.release();
       wakeLockRef.current = null;
     };
@@ -3121,6 +3191,22 @@ function DisplayView() {
   if (!isPlayerDisplayActive || !activeEncounterData) {
     return (
       <div className="min-h-screen bg-black text-stone-400 flex flex-col items-center justify-center p-4 text-center">
+        <div className="fixed top-3 right-3 z-50 flex gap-2">
+          <button
+            onClick={() => setWakeLockEnabled(v => { localStorage.setItem('ttrpg.wakeLock', String(!v)); return !v; })}
+            title={wakeLockEnabled ? 'Allow sleep' : 'Prevent sleep'}
+            className={`p-2 rounded-lg transition-all ${wakeLockEnabled ? 'bg-amber-600 hover:bg-amber-700 text-white' : 'bg-stone-800 bg-opacity-80 hover:bg-opacity-100 text-stone-300 hover:text-white'}`}
+          >
+            {wakeLockEnabled ? <Coffee size={20} /> : <Moon size={20} />}
+          </button>
+          <button
+            onClick={toggleFullscreen}
+            title={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+            className="bg-stone-800 bg-opacity-80 hover:bg-opacity-100 text-stone-300 hover:text-white p-2 rounded-lg transition-all"
+          >
+            {isFullscreen ? <Minimize2 size={20} /> : <Maximize2 size={20} />}
+          </button>
+        </div>
         <EyeOff size={64} className="mb-4 text-stone-500" />
         <h2 className="text-3xl font-semibold font-cinzel tracking-wide">Game Session Paused</h2>
         <p className="text-xl mt-2">The Dungeon Master has not activated an encounter for display.</p>
@@ -3153,7 +3239,7 @@ function DisplayView() {
     >
       <div className="fixed top-3 right-3 z-50 flex gap-2">
         <button
-          onClick={() => setWakeLockEnabled(v => !v)}
+          onClick={() => setWakeLockEnabled(v => { localStorage.setItem('ttrpg.wakeLock', String(!v)); return !v; })}
           title={wakeLockEnabled ? 'Allow sleep' : 'Prevent sleep'}
           className={`p-2 rounded-lg transition-all ${wakeLockEnabled ? 'bg-amber-600 hover:bg-amber-700 text-white' : 'bg-stone-800 bg-opacity-80 hover:bg-opacity-100 text-stone-300 hover:text-white'}`}
         >
-- 
2.34.1


From ebd91ca42a92842691c8b289fe1983e3d78dfdde Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Wed, 8 Jul 2026 14:05:55 -0400
Subject: [PATCH 16/24] Inline editable fields (init/hp/maxhp/ac) with editing
 overlay
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Participant card fields now editable in place (D-style): transparent bg,
underline on hover/focus, no spinners. Covers Initiative, Current HP, Max HP,
and AC badge value.

Click any value to edit. Blur/Enter saves. Escape cancels. Status recomputes
on HP change (conscious/dying/dead/down per ruleset).

Editing overlay: when a field is focused, amber ring highlights the card and
a centered pointer-events-none label shows '✎ Editing {field}'. Label floats
over card middle without blocking input — taps pass through to field.

Handlers: handleInlineCurrentHp (recomputes status), handleInlineMaxHp,
handleInlineAc. Keys prefixed to avoid React key collisions when values match.

Tests: selectors updated to use element id (monsterMaxHp) since inline
aria-labels now match form label queries.
---
 TODO.md                            |   3 +-
 src/App.js                         | 112 +++++++++++++++++++++++++++--
 src/tests/InitiativeReslot.test.js |   2 +-
 src/tests/ReslotAllPaths.test.js   |   2 +-
 src/tests/testHelpers.js           |   2 +-
 5 files changed, 110 insertions(+), 11 deletions(-)

diff --git a/TODO.md b/TODO.md
index ee69e02..5fa5bae 100644
--- a/TODO.md
+++ b/TODO.md
@@ -11,7 +11,7 @@ also better vert tab layout - labelt friendly
 
 x needs AC for players dude
 
-and quick entry hp
+x and quick entry hp
 
 hp do not carry from encounter to ecnounter!!!
 ^feature to add back to campaign character after encounter?
@@ -20,6 +20,7 @@ maybe campaign toggle in charc section (choosing each end is DM overload will be
 hp wont go over max and no temp hp support
 
 
+refresh/reload/code update causes UI to update to top unselected cambpaign have to drill all the way back down to active encounter....every time. siemtmes?
 
 
 
diff --git a/src/App.js b/src/App.js
index 844689e..576fe10 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1085,6 +1085,17 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
   ];
 
   const participants = encounter.participants || [];
+  const [editingField, setEditingField] = useState(null);
+  const [editingId, setEditingId] = useState(null);
+  const blurTimeoutRef = useRef(null);
+  const handleFieldFocus = (id, label) => {
+    if (blurTimeoutRef.current) { clearTimeout(blurTimeoutRef.current); blurTimeoutRef.current = null; }
+    setEditingId(id);
+    setEditingField(label);
+  };
+  const handleFieldBlur = () => {
+    blurTimeoutRef.current = setTimeout(() => { setEditingField(null); setEditingId(null); }, 150);
+  };
 
   useEffect(() => {
     if (participantType === 'character' && selectedCharacterId) {
@@ -1283,6 +1294,53 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
     }
   };
 
+  const handleInlineCurrentHp = async (participantId, value) => {
+    let n = parseInt(value, 10);
+    if (isNaN(n)) return;
+    const p = participants.find(pp => pp.id === participantId);
+    if (!p || n === p.currentHp) return;
+    try {
+      const isGeneric = (encounter.ruleset === 'generic');
+      let patch;
+      if (!isGeneric && n < 0) n = 0;
+      if (isGeneric) {
+        patch = { currentHp: n, status: n > 0 ? 'conscious' : 'down' };
+      } else {
+        patch = { currentHp: n, deathSaveSuccesses: 0, deathSaveFailures: 0 };
+        if (n > 0) { patch.status = 'conscious'; }
+        else if (p.type === 'monster') { patch.status = 'dead'; patch.isActive = false; }
+        else { patch.status = 'dying'; }
+      }
+      await updateParticipant(encounter, participantId, patch, buildCtx(encounterPath));
+    } catch (err) {
+      showToast('Failed to update HP.');
+    }
+  };
+
+  const handleInlineMaxHp = async (participantId, value) => {
+    const n = parseInt(value, 10);
+    if (isNaN(n)) return;
+    const p = participants.find(pp => pp.id === participantId);
+    if (!p || n === p.maxHp || n <= 0) return;
+    try {
+      await updateParticipant(encounter, participantId, { maxHp: n }, buildCtx(encounterPath));
+    } catch (err) {
+      showToast('Failed to update Max HP.');
+    }
+  };
+
+  const handleInlineAc = async (participantId, value) => {
+    const n = parseInt(value, 10);
+    if (isNaN(n)) return;
+    const p = participants.find(pp => pp.id === participantId);
+    if (!p || n === p.ac) return;
+    try {
+      await updateParticipant(encounter, participantId, { ac: n }, buildCtx(encounterPath));
+    } catch (err) {
+      showToast('Failed to update AC.');
+    }
+  };
+
   const handleDeathSaveChange = async (participantId, outcome) => {
     if (!db) return;
     try {
@@ -1602,6 +1660,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
 
         {participants.length === 0 && <p className="text-sm text-stone-400">No participants added yet.</p>}
 
+
         <ul className="space-y-2">
           {sortedParticipants.map((p) => {
             const isCurrentTurn = encounter.isStarted && p.id === encounter.currentTurnParticipantId;
@@ -1628,8 +1687,15 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                 onDragOver={isDraggable ? handleDragOver : undefined}
                 onDrop={isDraggable ? (e) => handleDrop(e, p.id) : undefined}
                 onDragEnd={() => setDraggedItemId(null)}
-                className={`p-3 rounded-md flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 transition-all duration-300 ${bgColor} ${isCurrentTurn && !encounter.isPaused ? 'ring-2 ring-green-300 shadow-lg' : ''} ${!p.isActive ? 'opacity-35 grayscale' : (isDead ? 'opacity-90 brightness-75 saturate-125' : '')} ${isDraggable ? 'cursor-grab' : ''} ${draggedItemId === p.id ? 'opacity-50 ring-2 ring-yellow-400' : ''}`}
+                className={`relative p-3 rounded-md flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 transition-all duration-300 ${bgColor} ${isCurrentTurn && !encounter.isPaused ? 'ring-2 ring-green-300 shadow-lg' : ''} ${!p.isActive ? 'opacity-35 grayscale' : (isDead ? 'opacity-90 brightness-75 saturate-125' : '')} ${isDraggable ? 'cursor-grab' : ''} ${draggedItemId === p.id ? 'opacity-50 ring-2 ring-yellow-400' : ''} ${editingId === p.id ? 'ring-2 ring-amber-400' : ''}`}
               >
+                {editingId === p.id && (
+                  <span className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center">
+                    <span className="px-4 py-1 bg-amber-600 rounded-full text-white text-sm font-bold shadow-lg">
+                      ✎ Editing {editingField}
+                    </span>
+                  </span>
+                )}
                 <div className="flex-1 flex items-start sm:items-center">
                   {isDraggable && (
                     <ChevronsUpDown
@@ -1645,7 +1711,16 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                       {p.ac != null && (
                         <span className="ml-2 inline-flex items-baseline gap-1 px-2 py-0.5 bg-sky-900 border border-sky-500 rounded">
                           <span className="text-[10px] text-sky-300 font-semibold tracking-wide">AC</span>
-                          <span className="text-sky-100 text-lg font-bold leading-none">{p.ac}</span>
+                          <input
+                            type="number"
+                            defaultValue={p.ac}
+                            key={`ac-${p.ac}`}
+                            onFocus={(e) => { e.target.select(); handleFieldFocus(p.id, 'AC'); }}
+                            onBlur={(e) => { if (e.target.value !== String(p.ac)) handleInlineAc(p.id, e.target.value); handleFieldBlur(); }}
+                            onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); if (e.key === 'Escape') e.target.value = p.ac; }}
+                            className="w-6 bg-transparent text-sky-100 text-lg font-bold leading-none text-center focus:outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                            aria-label={`AC for ${p.name}`}
+                          />
                         </span>
                       )}
                       {isCurrentTurn && !encounter.isPaused && (
@@ -1665,19 +1740,42 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                           type="number"
                           id={`init-${p.id}`}
                           defaultValue={p.initiative}
-                          key={p.initiative}
+                          key={`init-${p.initiative}`}
                           min="0"
                           max="99"
                           disabled={encounter.isStarted && !encounter.isPaused}
                           onChange={(e) => { if (e.target.value.length > 2) e.target.value = e.target.value.slice(0, 2); }}
-                          onFocus={(e) => e.target.select()}
-                          onBlur={(e) => { if (e.target.value !== String(p.initiative)) handleInlineInitiative(p.id, e.target.value); }}
+                          onFocus={(e) => { e.target.select(); handleFieldFocus(p.id, 'Initiative'); }}
+                          onBlur={(e) => { if (e.target.value !== String(p.initiative)) handleInlineInitiative(p.id, e.target.value); handleFieldBlur(); }}
                           onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); }}
-                          className="w-8 px-1 py-0.5 bg-stone-800 border border-stone-700 rounded-md shadow-sm text-white text-sm text-center focus:outline-none focus:ring-1 focus:ring-amber-600 focus:border-amber-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                          className="w-6 bg-transparent text-white text-sm text-center border-b border-transparent hover:border-stone-500 focus:border-amber-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
                           aria-label={`Initiative for ${p.name}`}
                         />
                       </span>
-                      <span>HP: {p.currentHp}/{p.maxHp}</span>
+                      <span className="inline-flex items-baseline">
+                        <input
+                          type="number"
+                          id={`hp-${p.id}`}
+                          defaultValue={p.currentHp}
+                          key={`hp-${p.currentHp}`}
+                          onFocus={(e) => { e.target.select(); handleFieldFocus(p.id, 'HP'); }}
+                          onBlur={(e) => { if (e.target.value !== String(p.currentHp)) handleInlineCurrentHp(p.id, e.target.value); handleFieldBlur(); }}
+                          onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); if (e.key === 'Escape') e.target.value = p.currentHp; }}
+                          className="w-8 bg-transparent text-white text-sm text-center border-b border-transparent hover:border-stone-500 focus:border-red-500 focus:outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                          aria-label={`Current HP for ${p.name}`}
+                        />
+                        <span className="text-stone-500 text-sm">/</span>
+                        <input
+                          type="number"
+                          defaultValue={p.maxHp}
+                          key={`maxhp-${p.maxHp}`}
+                          onFocus={(e) => { e.target.select(); handleFieldFocus(p.id, 'Max HP'); }}
+                          onBlur={(e) => { if (e.target.value !== String(p.maxHp)) handleInlineMaxHp(p.id, e.target.value); handleFieldBlur(); }}
+                          onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); if (e.key === 'Escape') e.target.value = p.maxHp; }}
+                          className="w-8 bg-transparent text-stone-400 text-sm text-center border-b border-transparent hover:border-stone-500 focus:border-red-500 focus:outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                          aria-label={`Max HP for ${p.name}`}
+                        />
+                      </span>
                     </div>
                     
                     {participantStatus === 'dead' && (
diff --git a/src/tests/InitiativeReslot.test.js b/src/tests/InitiativeReslot.test.js
index 1b034d7..b9ca698 100644
--- a/src/tests/InitiativeReslot.test.js
+++ b/src/tests/InitiativeReslot.test.js
@@ -26,7 +26,7 @@ describe('FEAT-3 reslot: inline init change reorders list', () => {
     const addOne = async (name, hp, mod, init) => {
       fireEvent.change(form.getByPlaceholderText('e.g., Dire Wolf'), { target: { value: name } });
       fireEvent.change(form.getByLabelText(/Init Mod/i), { target: { value: String(mod) } });
-      fireEvent.change(form.getByLabelText(/Max HP/i), { target: { value: String(hp) } });
+      fireEvent.change(document.getElementById('monsterMaxHp'), { target: { value: String(hp) } });
       fireEvent.change(form.getByPlaceholderText('auto'), { target: { value: String(init) } });
       fireEvent.click(form.getByRole('button', { name: /Add to Encounter/i }));
       await waitFor(() => {
diff --git a/src/tests/ReslotAllPaths.test.js b/src/tests/ReslotAllPaths.test.js
index 60d9666..771b66f 100644
--- a/src/tests/ReslotAllPaths.test.js
+++ b/src/tests/ReslotAllPaths.test.js
@@ -16,7 +16,7 @@ function lastParticipantsUpdate() {
 async function addOne(form, name, hp, mod, init) {
   fireEvent.change(form.getByPlaceholderText('e.g., Dire Wolf'), { target: { value: name } });
   fireEvent.change(form.getByLabelText(/Init Mod/i), { target: { value: String(mod) } });
-  fireEvent.change(form.getByLabelText(/Max HP/i), { target: { value: String(hp) } });
+  fireEvent.change(document.getElementById('monsterMaxHp'), { target: { value: String(hp) } });
   fireEvent.change(form.getByPlaceholderText('auto'), { target: { value: String(init) } });
   fireEvent.click(form.getByRole('button', { name: /Add to Encounter/i }));
   await waitFor(() => {
diff --git a/src/tests/testHelpers.js b/src/tests/testHelpers.js
index 9de7fdf..365b8d3 100644
--- a/src/tests/testHelpers.js
+++ b/src/tests/testHelpers.js
@@ -74,7 +74,7 @@ export async function addMonsterViaUI(name = 'Goblin', maxHp = 7, initMod = 2) {
   const form = within(getParticipantForm());
   fireEvent.change(form.getByPlaceholderText('e.g., Dire Wolf'), { target: { value: name } });
   fireEvent.change(form.getByLabelText(/Init Mod/i), { target: { value: String(initMod) } });
-  fireEvent.change(form.getByLabelText(/Max HP/i), { target: { value: String(maxHp) } });
+  fireEvent.change(document.getElementById('monsterMaxHp'), { target: { value: String(maxHp) } });
   fireEvent.click(form.getByRole('button', { name: /Add to Encounter/i }));
   const { getCalls } = require('../__mocks__/firebase/_mock-db');
   await waitFor(() => {
-- 
2.34.1


From 96770099f604f53fec28b55be67ae4f3d4bfcf44 Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Wed, 8 Jul 2026 14:12:35 -0400
Subject: [PATCH 17/24] Persist campaign/encounter selection + scroll position
 across reload

UI reset to top on every reload/code update. Now:
- selectedCampaignId persisted via localStorage
- selectedEncounterId persisted via localStorage
- scrollY saved (beforeunload + pagehide + visibilitychange + 2s interval
  for Android Chrome reliability)
- scroll restored after campaigns data loads (300ms delay for mobile render)
---
 src/App.js | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 52 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index 576fe10..bc08cc8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,3 +1,4 @@
+//
 import React, { useState, useEffect, useRef, useMemo, createContext, useContext, useCallback } from 'react';
 import * as shared from '@ttrpg/shared';
 import { initializeApp, getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken, getFirestore, where, orderBy, limit, offset, getStorage, getStorageMode } from './storage';
@@ -2261,7 +2262,10 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
   const { data: campaignDoc } = useFirestoreDocument(campaignId ? getPath.campaign(campaignId) : null);
 
   const [encounters, setEncounters] = useState([]);
-  const [selectedEncounterId, setSelectedEncounterId] = useState(null);
+  const [selectedEncounterId, setSelectedEncounterId] = useState(() => {
+    try { return localStorage.getItem('ttrpg.selectedEncounter') || null; }
+    catch { return null; }
+  });
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [itemToDelete, setItemToDelete] = useState(null);
@@ -2314,6 +2318,10 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
 
   useEffect(() => {
     selectedEncounterIdRef.current = selectedEncounterId;
+    try {
+      if (selectedEncounterId) localStorage.setItem('ttrpg.selectedEncounter', selectedEncounterId);
+      else localStorage.removeItem('ttrpg.selectedEncounter');
+    } catch {}
   }, [selectedEncounterId]);
 
   useEffect(() => {
@@ -2636,11 +2644,53 @@ function AdminView({ userId }) {
 
   const [campaignsWithDetails, setCampaignsWithDetails] = useState([]);
   const [draggedCampaignId, setDraggedCampaignId] = useState(null);
-  const [selectedCampaignId, setSelectedCampaignId] = useState(null);
+  const [selectedCampaignId, setSelectedCampaignId] = useState(() => {
+    try { return localStorage.getItem('ttrpg.selectedCampaign') || null; }
+    catch { return null; }
+  });
   const encounterStartedRef = useRef(false);
   const encounterActiveRef = useRef(false);
   const manualSelectRef = useRef(false);
   const prevDisplayCampaignRef = useRef(null);
+  const scrollRestoredRef = useRef(false);
+
+  // Save scroll on unload + visibility change + interval.
+  useEffect(() => {
+    const onSave = () => {
+      try { localStorage.setItem('ttrpg.scrollY', String(window.scrollY)); } catch {}
+    };
+    window.addEventListener('beforeunload', onSave);
+    window.addEventListener('pagehide', onSave);
+    document.addEventListener('visibilitychange', onSave);
+    const interval = setInterval(onSave, 2000);
+    return () => {
+      window.removeEventListener('beforeunload', onSave);
+      window.removeEventListener('pagehide', onSave);
+      document.removeEventListener('visibilitychange', onSave);
+      clearInterval(interval);
+    };
+  }, []);
+
+  // Restore scroll once data loaded.
+  useEffect(() => {
+    if (scrollRestoredRef.current) return;
+    if (campaignsWithDetails.length === 0) return;
+    try {
+      const y = parseInt(localStorage.getItem('ttrpg.scrollY') || '0', 10);
+      if (y > 0) {
+        scrollRestoredRef.current = true;
+        setTimeout(() => window.scrollTo(0, y), 300);
+      }
+    } catch {}
+  }, [campaignsWithDetails]);
+
+  // Persist selections across reload.
+  useEffect(() => {
+    try {
+      if (selectedCampaignId) localStorage.setItem('ttrpg.selectedCampaign', selectedCampaignId);
+      else localStorage.removeItem('ttrpg.selectedCampaign');
+    } catch {}
+  }, [selectedCampaignId]);
 
   // External display change (replay/other DM) = clear manual override, allow follow.
   useEffect(() => {
-- 
2.34.1


From fd03ae48c864632f7dbf7275ff17fb7bc8b4c675 Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Wed, 8 Jul 2026 16:33:21 -0400
Subject: [PATCH 18/24] Character writeback on encounter end

Campaign-level toggle (CharacterManager, live flip). When ON, ending an
encounter writes each character participant's current HP, Max HP, and AC back
to the campaign roster so they carry into the next encounter.

- shared: buildCharacterParticipant uses defaultCurrentHp (fallback maxHp)
- endEncounter: syncs maxHp/ac/currentHp to campaign players if syncCharacters,
  snapshots old values into undo payload for restore. Works retroactive
  (ctx.campaignId fallback for encounters lacking campaignId field).
- New encounters store campaignId field.
- Undo end-encounter restores character values client-side.
- CharacterManager: styled sync toggle (checkbox badge), stat badges in list
  (HP/Current HP/AC/Init), edit box supports Current HP field.

Tests: 5 writeback cases (off/on/skip monsters/undo snapshot/missing char).
---
 TODO.md                             |   7 +-
 shared/tests/turn.writeback.test.js | 157 ++++++++++++++++++++++++++++
 shared/turn.js                      |  35 ++++++-
 src/App.js                          |  80 +++++++++++---
 4 files changed, 263 insertions(+), 16 deletions(-)
 create mode 100644 shared/tests/turn.writeback.test.js

diff --git a/TODO.md b/TODO.md
index 5fa5bae..60252ca 100644
--- a/TODO.md
+++ b/TODO.md
@@ -20,7 +20,12 @@ maybe campaign toggle in charc section (choosing each end is DM overload will be
 hp wont go over max and no temp hp support
 
 
-refresh/reload/code update causes UI to update to top unselected cambpaign have to drill all the way back down to active encounter....every time. siemtmes?
+x refresh/reload/code update causes UI to update to top unselected cambpaign have to drill all the way back down to active encounter....every time. siemtmes?
+
+
+I wonder...if a charcter-list-character should have a isNPC option vailble to them - for longer lived
+ npcs.....
+
 
 
 
diff --git a/shared/tests/turn.writeback.test.js b/shared/tests/turn.writeback.test.js
new file mode 100644
index 0000000..8fd099f
--- /dev/null
+++ b/shared/tests/turn.writeback.test.js
@@ -0,0 +1,157 @@
+// Character writeback on endEncounter: sync maxHp/ac to campaign players.
+const shared = require('@ttrpg/shared');
+const { endEncounter } = shared;
+
+function makeMockStorage() {
+  const docs = new Map();
+  const writes = [];
+  return {
+    getDoc: jest.fn(async (p) => docs.get(p) || null),
+    setDoc: jest.fn(async (p, d) => { docs.set(p, d); }),
+    updateDoc: jest.fn(async (p, patch) => {
+      writes.push({ path: p, patch });
+      const cur = docs.get(p) || {};
+      docs.set(p, { ...cur, ...patch });
+    }),
+    addDoc: jest.fn(async (p, data) => {
+      writes.push({ path: p, patch: data });
+      docs.set(p, data);
+    }),
+    deleteDoc: jest.fn(async () => {}),
+    getCollection: jest.fn(async () => []),
+    _docs: docs,
+    _writes: writes,
+  };
+}
+
+function makeEncounter(overrides = {}) {
+  return {
+    id: 'enc1',
+    name: 'Test',
+    campaignId: 'camp1',
+    isStarted: true,
+    isPaused: false,
+    currentTurnParticipantId: 'p1',
+    round: 3,
+    turnOrderIds: ['p1', 'p2'],
+    participants: [
+      { id: 'p1', name: 'Fighter', type: 'character', originalCharacterId: 'char1', initiative: 15, maxHp: 28, currentHp: 20, ac: 18 },
+      { id: 'p2', name: 'Goblin', type: 'monster', originalCharacterId: null, initiative: 12, maxHp: 7, currentHp: 7, ac: 13 },
+      { id: 'p3', name: 'Cleric', type: 'character', originalCharacterId: 'char2', initiative: 10, maxHp: 22, currentHp: 22, ac: 16 },
+    ],
+    ...overrides,
+  };
+}
+
+describe('character writeback on endEncounter', () => {
+  test('no writeback when syncCharacters false/missing', async () => {
+    const storage = makeMockStorage();
+    storage._docs.set('campaigns/camp1', {
+      id: 'camp1', name: 'Camp', players: [
+        { id: 'char1', name: 'Fighter', defaultMaxHp: 30, defaultAc: 17 },
+      ],
+    });
+    const enc = makeEncounter();
+    const ctx = {
+      storage,
+      encounterPath: 'campaigns/camp1/encounters/enc1',
+      logPath: 'logs/log1',
+      logCollection: 'logs',
+      displayPath: 'activeDisplay/status',
+    };
+    await endEncounter(enc, ctx);
+    // no campaign write
+    expect(storage._writes.find(w => w.path === 'campaigns/camp1')).toBeUndefined();
+  });
+
+  test('writeback updates char maxHp + ac + currentHp when syncCharacters true', async () => {
+    const storage = makeMockStorage();
+    const players = [
+      { id: 'char1', name: 'Fighter', defaultMaxHp: 30, defaultAc: 17, defaultCurrentHp: 30 },
+      { id: 'char2', name: 'Cleric', defaultMaxHp: 20, defaultAc: 14, defaultCurrentHp: 20 },
+    ];
+    storage._docs.set('campaigns/camp1', { id: 'camp1', name: 'Camp', players, syncCharacters: true });
+    const enc = makeEncounter();
+    const ctx = {
+      storage,
+      encounterPath: 'campaigns/camp1/encounters/enc1',
+      logPath: 'logs/log1',
+      logCollection: 'logs',
+      displayPath: 'activeDisplay/status',
+    };
+    await endEncounter(enc, ctx);
+    const campWrite = storage._writes.find(w => w.path === 'campaigns/camp1');
+    expect(campWrite).toBeDefined();
+    const updated = campWrite.patch.players;
+    const fighter = updated.find(p => p.id === 'char1');
+    expect(fighter.defaultMaxHp).toBe(28);
+    expect(fighter.defaultAc).toBe(18);
+    expect(fighter.defaultCurrentHp).toBe(20);
+    const cleric = updated.find(p => p.id === 'char2');
+    expect(cleric.defaultMaxHp).toBe(22);
+    expect(cleric.defaultAc).toBe(16);
+    expect(cleric.defaultCurrentHp).toBe(22);
+  });
+
+  test('writeback skips monsters (no originalCharacterId)', async () => {
+    const storage = makeMockStorage();
+    const players = [{ id: 'char1', name: 'Fighter', defaultMaxHp: 30, defaultAc: 17 }];
+    storage._docs.set('campaigns/camp1', { id: 'camp1', name: 'Camp', players, syncCharacters: true });
+    const enc = makeEncounter();
+    const ctx = {
+      storage,
+      encounterPath: 'campaigns/camp1/encounters/enc1',
+      logPath: 'logs/log1',
+      logCollection: 'logs',
+      displayPath: 'activeDisplay/status',
+    };
+    await endEncounter(enc, ctx);
+    const campWrite = storage._writes.find(w => w.path === 'campaigns/camp1');
+    // players array still 1 entry, goblin not added
+    expect(campWrite.patch.players.length).toBe(1);
+  });
+
+  test('undo payload includes old char values for restore', async () => {
+    const storage = makeMockStorage();
+    const players = [
+      { id: 'char1', name: 'Fighter', defaultMaxHp: 30, defaultAc: 17, defaultCurrentHp: 30 },
+      { id: 'char2', name: 'Cleric', defaultMaxHp: 20, defaultAc: 14, defaultCurrentHp: 20 },
+    ];
+    storage._docs.set('campaigns/camp1', { id: 'camp1', name: 'Camp', players, syncCharacters: true });
+    storage._docs.set('logs/log1', null);
+    const enc = makeEncounter();
+    const ctx = {
+      storage,
+      encounterPath: 'campaigns/camp1/encounters/enc1',
+      logPath: 'logs/log1',
+      logCollection: 'logs',
+      displayPath: 'activeDisplay/status',
+    };
+    await endEncounter(enc, ctx);
+    const logWrite = storage._writes.find(w => w.path === 'logs/log1');
+    expect(logWrite).toBeDefined();
+    const log = logWrite.patch;
+    expect(log.undo.characterWriteback).toBeDefined();
+    expect(log.undo.characterWriteback).toHaveLength(2);
+    const fighterOld = log.undo.characterWriteback.find(c => c.id === 'char1');
+    expect(fighterOld.defaultMaxHp).toBe(30);
+    expect(fighterOld.defaultAc).toBe(17);
+    expect(fighterOld.defaultCurrentHp).toBe(30);
+  });
+
+  test('writeback no-op if character missing from campaign', async () => {
+    const storage = makeMockStorage();
+    storage._docs.set('campaigns/camp1', { id: 'camp1', name: 'Camp', players: [], syncCharacters: true });
+    const enc = makeEncounter();
+    const ctx = {
+      storage,
+      encounterPath: 'campaigns/camp1/encounters/enc1',
+      logPath: 'logs/log1',
+      logCollection: 'logs',
+      displayPath: 'activeDisplay/status',
+    };
+    await endEncounter(enc, ctx);
+    // no writeback (no matching chars = no change)
+    expect(storage._writes.find(w => w.path === 'campaigns/camp1')).toBeUndefined();
+  });
+});
diff --git a/shared/turn.js b/shared/turn.js
index d2a1672..4a53e30 100644
--- a/shared/turn.js
+++ b/shared/turn.js
@@ -370,6 +370,7 @@ function buildCharacterParticipant(character) {
   const modifier = character.defaultInitMod || 0;
   const finalInitiative = initiativeRoll + modifier;
   const maxHp = character.defaultMaxHp || DEFAULT_MAX_HP;
+  const currentHp = character.defaultCurrentHp != null ? character.defaultCurrentHp : maxHp;
   return {
     participant: makeParticipant({
       name: character.name,
@@ -377,7 +378,7 @@ function buildCharacterParticipant(character) {
       originalCharacterId: character.id,
       initiative: finalInitiative,
       maxHp,
-      currentHp: maxHp,
+      currentHp,
       ac: character.defaultAc !== undefined ? character.defaultAc : null,
     }),
     roll: { roll: initiativeRoll, mod: modifier, total: finalInitiative },
@@ -1054,6 +1055,38 @@ async function endEncounter(encounter, ctx) {
     delta: {},
     undo: { isStarted: encounter.isStarted ?? false, isPaused: encounter.isPaused ?? false, round: encounter.round ?? 0, currentTurnParticipantId: encounter.currentTurnParticipantId ?? null, turnOrderIds: [...(encounter.turnOrderIds || [])], endedAt: encounter.endedAt ?? null },
   };
+
+  // Character writeback: sync maxHp/ac/currentHp to campaign players if enabled.
+  const wbCampaignId = encounter.campaignId || ctx.campaignId;
+  if ((wbCampaignId || ctx.campaign) && ctx.storage) {
+    let campaign;
+    try {
+      campaign = ctx.campaign || await ctx.storage.getDoc(`campaigns/${wbCampaignId}`);
+    } catch { campaign = null; }
+    if (campaign && campaign.syncCharacters && Array.isArray(campaign.players)) {
+      const charParticipants = (encounter.participants || []).filter(p => p.originalCharacterId);
+      const oldValues = [];
+      let changed = false;
+      const updatedPlayers = campaign.players.map(player => {
+        const cp = charParticipants.find(p => p.originalCharacterId === player.id);
+        if (!cp) return player;
+        const oldMaxHp = player.defaultMaxHp;
+        const oldAc = player.defaultAc;
+        const oldCurrentHp = player.defaultCurrentHp;
+        oldValues.push({ id: player.id, defaultMaxHp: oldMaxHp, defaultAc: oldAc, defaultCurrentHp: oldCurrentHp });
+        const newPlayer = { ...player };
+        if (cp.maxHp != null && cp.maxHp !== oldMaxHp) { newPlayer.defaultMaxHp = cp.maxHp; changed = true; }
+        if (cp.ac != null && cp.ac !== oldAc) { newPlayer.defaultAc = cp.ac; changed = true; }
+        if (cp.currentHp != null && cp.currentHp !== oldCurrentHp) { newPlayer.defaultCurrentHp = cp.currentHp; changed = true; }
+        return newPlayer;
+      });
+      if (changed) {
+        await ctx.storage.updateDoc(`campaigns/${wbCampaignId}`, { players: updatedPlayers });
+        log.undo.characterWriteback = oldValues;
+      }
+    }
+  }
+
   return commit(encounter, patch, log, ctx);
 }
 
diff --git a/src/App.js b/src/App.js
index bc08cc8..9fbb1fc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,3 @@
-//
 import React, { useState, useEffect, useRef, useMemo, createContext, useContext, useCallback } from 'react';
 import * as shared from '@ttrpg/shared';
 import { initializeApp, getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken, getFirestore, where, orderBy, limit, offset, getStorage, getStorageMode } from './storage';
@@ -501,6 +500,7 @@ function CreateCampaignForm({ onCreate, onCancel }) {
           </label>
         </div>
       </div>
+
       <div className="flex justify-end space-x-3">
         <button
           type="button"
@@ -727,7 +727,7 @@ function EditParticipantModal({ participant, onClose, onSave }) {
 // CHARACTER MANAGER COMPONENT
 // ============================================================================
 
-function CharacterManager({ campaignId, campaignCharacters }) {
+function CharacterManager({ campaignId, campaignCharacters, syncCharacters }) {
   const { showToast, showInfo } = useUIFeedback();
   const [characterName, setCharacterName] = useState('');
   const [defaultMaxHp, setDefaultMaxHp] = useState(DEFAULT_MAX_HP);
@@ -795,7 +795,7 @@ function CharacterManager({ campaignId, campaignCharacters }) {
       showToast("Failed to add character. Please try again.");    }
   };
 
-  const handleUpdateCharacter = async (characterId, newName, newDefaultMaxHp, newDefaultInitMod, newDefaultAc) => {
+  const handleUpdateCharacter = async (characterId, newName, newDefaultMaxHp, newDefaultInitMod, newDefaultAc, newDefaultCurrentHp) => {
     if (!db || !newName.trim() || !campaignId) return;
 
     const hp = parseInt(newDefaultMaxHp, 10);
@@ -812,7 +812,7 @@ function CharacterManager({ campaignId, campaignCharacters }) {
 
     const updatedCharacters = campaignCharacters.map(c =>
       c.id === characterId
-        ? { ...c, name: newName.trim(), defaultMaxHp: hp, defaultInitMod: initMod, defaultAc: newDefaultAc !== undefined && newDefaultAc !== '' ? parseInt(newDefaultAc, 10) : null }
+        ? { ...c, name: newName.trim(), defaultMaxHp: hp, defaultInitMod: initMod, defaultAc: newDefaultAc !== undefined && newDefaultAc !== '' ? parseInt(newDefaultAc, 10) : null, defaultCurrentHp: newDefaultCurrentHp !== undefined && newDefaultCurrentHp !== '' ? parseInt(newDefaultCurrentHp, 10) : null }
         : c
     );
 
@@ -861,6 +861,16 @@ function CharacterManager({ campaignId, campaignCharacters }) {
 
         {isOpen && (
           <>
+            <label className={`inline-flex items-center gap-2 mb-3 px-3 py-1.5 rounded-lg cursor-pointer text-sm font-medium transition-colors ${syncCharacters ? 'bg-amber-900 border border-amber-500 text-amber-100' : 'bg-stone-800 border border-stone-700 text-stone-400 hover:text-stone-200'}`} title="When enabled, ending an encounter writes each character's current HP, Max HP, and AC back to the campaign roster so they carry into the next encounter."
+            >
+              <input
+                type="checkbox"
+                checked={syncCharacters}
+                onChange={(e) => storage.updateDoc(getPath.campaign(campaignId), { syncCharacters: e.target.checked })}
+                className="h-4 w-4 text-amber-600 border-stone-400 rounded focus:ring-amber-500"
+              />
+              Sync character changes on encounter end
+            </label>
             <form onSubmit={(e) => { e.preventDefault(); handleAddCharacter(); }} className="grid grid-cols-2 sm:grid-cols-12 gap-2 mb-4 items-end">
               <div className="col-span-2 sm:col-span-6">
                 <label htmlFor="characterName" className="block text-xs font-medium text-stone-400">
@@ -945,7 +955,8 @@ function CharacterManager({ campaignId, campaignCharacters }) {
                           editingCharacter.name,
                           editingCharacter.defaultMaxHp,
                           editingCharacter.defaultInitMod,
-                          editingCharacter.defaultAc
+                          editingCharacter.defaultAc,
+                          editingCharacter.defaultCurrentHp
                         );
                       }}
                       className="flex-grow flex flex-wrap gap-2 items-center"
@@ -969,6 +980,16 @@ function CharacterManager({ campaignId, campaignCharacters }) {
                           title="Default Max HP"
                         />
                       </div>
+                      <div className="flex flex-col">
+                        <label className="text-[10px] text-stone-400 mb-0.5">Cur HP</label>
+                        <input
+                          type="number"
+                          value={editingCharacter.defaultCurrentHp ?? ''}
+                          onChange={(e) => setEditingCharacter({ ...editingCharacter, defaultCurrentHp: e.target.value })}
+                          className="w-16 px-2 py-1 bg-stone-700 border border-stone-600 rounded-md text-white"
+                          title="Default Current HP"
+                        />
+                      </div>
                       <div className="flex flex-col">
                         <label className="text-[10px] text-stone-400 mb-0.5">Init</label>
                         <input
@@ -1002,20 +1023,28 @@ function CharacterManager({ campaignId, campaignCharacters }) {
                     </form>
                   ) : (
                     <>
-                      <span className="text-stone-100">
-                        {character.name}{' '}
-                        <span className="text-xs text-stone-400">
-                          (HP: {character.defaultMaxHp || 'N/A'}, Init Mod: {formatInitMod(character.defaultInitMod)}{character.defaultAc != null ? `, AC: ${character.defaultAc}` : ''})
-                        </span>
-                      </span>
-                      <div className="flex space-x-2">
+                      <div className="flex items-center mr-auto">
+                        <span className="text-stone-100 mr-2">{character.name}</span>
+                        <div className="flex gap-1">
+                          <span className="px-1.5 py-0.5 rounded bg-red-900/60 text-red-200 text-xs font-medium">HP {character.defaultMaxHp || '?'}</span>
+                          {character.defaultCurrentHp != null && character.defaultCurrentHp !== character.defaultMaxHp && (
+                            <span className="px-1.5 py-0.5 rounded bg-red-950 text-red-300 text-xs font-medium" title="Current HP (carried from last encounter)">Current HP {character.defaultCurrentHp}</span>
+                          )}
+                          {character.defaultAc != null && (
+                            <span className="px-1.5 py-0.5 rounded bg-sky-900/60 text-sky-200 text-xs font-medium">AC {character.defaultAc}</span>
+                          )}
+                          <span className="px-1.5 py-0.5 rounded bg-amber-900/40 text-amber-200 text-xs font-medium">Init {formatInitMod(character.defaultInitMod)}</span>
+                        </div>
+                      </div>
+                      <div className="flex space-x-2 flex-shrink-0">
                         <button
                           onClick={() => setEditingCharacter({
                             id: character.id,
                             name: character.name,
                             defaultMaxHp: character.defaultMaxHp || DEFAULT_MAX_HP,
                             defaultInitMod: character.defaultInitMod || DEFAULT_INIT_MOD,
-                            defaultAc: character.defaultAc ?? ''
+                            defaultAc: character.defaultAc ?? '',
+                            defaultCurrentHp: character.defaultCurrentHp ?? ''
                           })}
                           className="p-1 rounded transition-colors text-yellow-400 hover:text-yellow-300 bg-stone-700 hover:bg-stone-600"
                           aria-label="Edit character"
@@ -2047,6 +2076,21 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
           : getUndo(undoTarget); // legacy
         if (!expanded) return;
         await storage.undo({ logPath: `${getPath.logs()}/${undoTarget.id}`, undo: expanded });
+        // Restore character writeback (end_encounter sync)
+        const cw = undoTarget.undo?.characterWriteback;
+        const wbId = encounter?.campaignId || campaignId;
+        if (cw && wbId) {
+          try {
+            const campDoc = await storage.getDoc(getPath.campaign(wbId));
+            if (campDoc && Array.isArray(campDoc.players)) {
+              const restored = campDoc.players.map(p => {
+                const old = cw.find(c => c.id === p.id);
+                return old ? { ...p, defaultMaxHp: old.defaultMaxHp, defaultAc: old.defaultAc, defaultCurrentHp: old.defaultCurrentHp } : p;
+              });
+              await storage.updateDoc(getPath.campaign(wbId), { players: restored });
+            }
+          } catch (e) { console.error('characterWriteback restore failed:', e); }
+        }
       }
     } catch (err) {
       console.error('Error undoing action:', err);
@@ -2132,7 +2176,13 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
   const confirmEndEncounter = async () => {
     if (!db) return;
     try {
-      await endEncounter(encounter, buildCtx(encounterPath));
+      const ctx = { ...buildCtx(encounterPath), campaignId };
+      if (campaignId) {
+        try {
+          ctx.campaign = await storage.getDoc(getPath.campaign(campaignId));
+        } catch {}
+      }
+      await endEncounter(encounter, ctx);
       await storage.setDoc(getPath.activeDisplay(), { activeCampaignId: null, activeEncounterId: null }, { merge: true });
     } catch (err) {
       showToast("Failed to end encounter. Please try again.");    }
@@ -2357,6 +2407,7 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
     try {
       await storage.setDoc(`${getPath.encounters(campaignId)}/${newEncounterId}`, {
         name: name.trim(),
+        campaignId,
         createdAt: new Date().toISOString(),
         participants: [],
         round: 0,
@@ -3068,6 +3119,7 @@ function AdminView({ userId }) {
             <CharacterManager
               campaignId={selectedCampaignId}
               campaignCharacters={selectedCampaign.characters || []}
+              syncCharacters={!!selectedCampaign.syncCharacters}
             />
             <hr className="my-6 border-stone-700" />
             <EncounterManager
-- 
2.34.1


From 91e23856b4daa7a215d90f48b9ba410af2de0933 Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Wed, 8 Jul 2026 19:28:05 -0400
Subject: [PATCH 19/24] feat: tablet-friendly encounter layout

- Combat controls always left column (narrow portrait, wide desktop)
- Short labels below lg breakpoint, full labels at lg+
- Sticky controls all viewports
- Collapsible Add Participants section (auto-collapse during combat)
- Fullscreen encounter toggle
- Modals via createPortal to escape stacking context
- Reduced padding/margins in portrait orientation
---
 src/App.js | 164 ++++++++++++++++++++++++++++++++---------------------
 1 file changed, 98 insertions(+), 66 deletions(-)

diff --git a/src/App.js b/src/App.js
index 9fbb1fc..34f0457 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef, useMemo, createContext, useContext, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import * as shared from '@ttrpg/shared';
 import { initializeApp, getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken, getFirestore, where, orderBy, limit, offset, getStorage, getStorageMode } from './storage';
 import { isDevToolsEnabled } from './config/devTools';
@@ -35,7 +36,7 @@ function ToastStack({ toasts, onDismiss }) {
 function InfoModal({ message, onClose }) {
   if (!message) return null;
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 z-50">
+    <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 z-[100]">
       <div className="bg-stone-900 p-6 rounded-lg shadow-xl w-full max-w-md">
         <div className="flex items-center mb-4">
           <AlertTriangle size={24} className="text-yellow-400 mr-3 flex-shrink-0" />
@@ -346,8 +347,8 @@ function Modal({ onClose, title, children }) {
     return () => window.removeEventListener('keydown', handleEsc);
   }, [onClose]);
 
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 z-50">
+  return createPortal(
+    <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 z-[100]">
       <div className="bg-stone-900 p-6 rounded-lg shadow-xl w-full max-w-md">
         <div className="flex justify-between items-center mb-4">
           <h2 className="text-xl font-semibold text-amber-300 font-cinzel tracking-wide">{title}</h2>
@@ -357,7 +358,8 @@ function Modal({ onClose, title, children }) {
         </div>
         {children}
       </div>
-    </div>
+    </div>,
+    document.body
   );
 }
 
@@ -391,8 +393,8 @@ function ConfirmationModal({ isOpen, onClose, onConfirm, title, message }) {
     onClose();
   };
 
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 z-50">
+  return createPortal(
+    <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 z-[100]">
       <div className="bg-stone-900 p-6 rounded-lg shadow-xl w-full max-w-md">
         <div className="flex items-center mb-4">
           <AlertTriangle size={24} className="text-yellow-400 mr-3 flex-shrink-0" />
@@ -419,7 +421,8 @@ function ConfirmationModal({ isOpen, onClose, onConfirm, title, message }) {
           </button>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body
   );
 }
 
@@ -846,7 +849,7 @@ function CharacterManager({ campaignId, campaignCharacters, syncCharacters }) {
 
   return (
     <>
-      <div className="p-4 bg-stone-900 rounded-lg shadow">
+      <div className="p-2 md:p-4 bg-stone-900 rounded-lg shadow">
         <div className="flex justify-between items-center mb-3">
           <button
             onClick={() => setIsOpen(!isOpen)}
@@ -1095,6 +1098,8 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
   const [manualInitiative, setManualInitiative] = useState('');
   const [monsterAc, setMonsterAc] = useState('');
   const [asNpc, setAsNpc] = useState(false);
+  const combatActive = encounter.isStarted && !encounter.isPaused;
+  const [addSectionOpen, setAddSectionOpen] = useState(!combatActive);
   const [editingParticipant, setEditingParticipant] = useState(null);
   const [hpChangeValues, setHpChangeValues] = useState({});
   const [draggedItemId, setDraggedItemId] = useState(null);
@@ -1489,17 +1494,30 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
   return (
     <>
       <div className="p-3 bg-stone-900 rounded-md mt-4">
-        <div className="flex justify-between items-center mb-3">
-          <h4 className="text-lg font-medium text-amber-200 font-cinzel tracking-wide">Add Participants</h4>
-          <button
-            onClick={handleAddAllCampaignCharacters}
-            className="px-3 py-1.5 text-xs font-medium text-white bg-violet-700 hover:bg-violet-800 rounded-md transition-colors flex items-center"
-            disabled={!campaignCharacters || campaignCharacters.length === 0 || (encounter.isStarted && !encounter.isPaused)}
-          >
-            <Users2 size={16} className="mr-1.5" />
-            <Dices size={16} className="mr-1.5" /> Add All (Roll Init)
-          </button>
-        </div>
+        {(() => {
+          const open = addSectionOpen && !combatActive;
+          return (
+          <details open={open} className="mt-2">
+            <summary
+              onClick={(e) => { if (!combatActive) { e.preventDefault(); setAddSectionOpen(v => !v); } else { e.preventDefault(); } }}
+              className="cursor-pointer text-lg font-medium text-amber-200 font-cinzel tracking-wide flex items-center gap-2 select-none"
+            >
+              {open ? <ChevronDown size={20} /> : <ChevronRight size={20} />}
+              Add Participants
+              {combatActive && <span className="text-xs text-stone-400 font-normal ml-2">(pause to add)</span>}
+            </summary>
+            {open && (
+              <>
+              <div className="flex justify-end items-center mb-3 mt-2">
+                <button
+                  onClick={handleAddAllCampaignCharacters}
+                  className="px-3 py-1.5 text-xs font-medium text-white bg-violet-700 hover:bg-violet-800 rounded-md transition-colors flex items-center"
+                  disabled={!campaignCharacters || campaignCharacters.length === 0 || combatActive}
+                >
+                  <Users2 size={16} className="mr-1.5" />
+                  <Dices size={16} className="mr-1.5" /> Add All (Roll Init)
+                </button>
+              </div>
 
         {/* Warning when combat is active */}
         {encounter.isStarted && !encounter.isPaused && (
@@ -1678,15 +1696,11 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
             </button>
           </div>
         </form>
-
-        {lastRollDetails && (
-          <p className="text-sm text-green-400 mt-2 mb-2 text-center">
-            {lastRollDetails.manual
-              ? `${lastRollDetails.name} (${lastRollDetails.type === 'character' ? 'Character' : lastRollDetails.type === 'monster' ? 'Monster' : lastRollDetails.type === 'npc' ? 'NPC' : lastRollDetails.type}): Set initiative ${lastRollDetails.total}`
-              : `${lastRollDetails.name} (${lastRollDetails.type === 'character' ? 'Character' : lastRollDetails.type === 'monster' ? 'Monster' : lastRollDetails.type === 'npc' ? 'NPC' : lastRollDetails.type}): Rolled d20 (${lastRollDetails.roll}) ${formatInitMod(lastRollDetails.mod)} = ${lastRollDetails.total} Initiative`
-            }
-          </p>
-        )}
+              </>
+            )}
+          </details>
+          );
+        })()}
 
         {participants.length === 0 && <p className="text-sm text-stone-400">No participants added yet.</p>}
 
@@ -2017,6 +2031,16 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
           })}
         </ul>
 
+        {lastRollDetails && (
+          <p className="text-sm text-green-400 mt-2 mb-2 text-center">
+            {lastRollDetails.manual
+              ? `${lastRollDetails.name} (${lastRollDetails.type === 'character' ? 'Character' : lastRollDetails.type === 'monster' ? 'Monster' : lastRollDetails.type === 'npc' ? 'NPC' : lastRollDetails.type}): Set initiative ${lastRollDetails.total}`
+              : `${lastRollDetails.name} (${lastRollDetails.type === 'character' ? 'Character' : lastRollDetails.type === 'monster' ? 'Monster' : lastRollDetails.type === 'npc' ? 'NPC' : lastRollDetails.type}): Rolled d20 (${lastRollDetails.roll}) ${formatInitMod(lastRollDetails.mod)} = ${lastRollDetails.total} Initiative`
+            }
+          </p>
+        )}
+
+
         {editingParticipant && (
           <EditParticipantModal
             participant={editingParticipant}
@@ -2194,95 +2218,95 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
 
   return (
     <>
-      <div className="lg:sticky lg:top-4 p-4 bg-stone-900 rounded-md shadow-lg">
-        <h4 className="text-lg font-medium text-amber-200 mb-4 text-center font-cinzel tracking-wide">Combat Controls</h4>
-        <div className="flex flex-col gap-3">
+      <div className="md:sticky md:top-2 p-3 bg-stone-900 rounded-md shadow-lg">
+        <h4 className="text-base font-medium text-amber-200 mb-2 text-center font-cinzel tracking-wide">Combat Controls</h4>
+        <div className="flex flex-col gap-2">
           {!encounter.isStarted ? (
             <button
               onClick={handleStartEncounter}
-              className="w-full px-4 py-3 text-sm font-medium text-white bg-red-700 hover:bg-red-800 rounded-md transition-colors flex items-center justify-center"
+              className="w-full min-w-0 px-3 py-2 text-sm font-medium text-white bg-red-700 hover:bg-red-800 rounded-md transition-colors flex items-center justify-center"
               disabled={!encounter.participants || encounter.participants.filter(p => p.isActive).length === 0}
             >
-              <PlayIcon size={18} className="mr-2" /> Start Combat
+              <PlayIcon size={16} className="mr-1 flex-shrink-0" /> <span className="truncate hidden lg:inline">Start Combat</span><span className="inline lg:hidden truncate">Start</span>
             </button>
           ) : (
             <>
               <button
                 onClick={handleTogglePause}
-                className={`w-full px-4 py-3 text-sm font-medium text-white rounded-md transition-colors flex items-center justify-center ${encounter.isPaused ? 'bg-red-700 hover:bg-red-800' : 'bg-amber-600 hover:bg-amber-700'}`}
+                className={`w-full min-w-0 px-3 py-2 text-sm font-medium text-white rounded-md transition-colors flex items-center justify-center ${encounter.isPaused ? 'bg-red-700 hover:bg-red-800' : 'bg-amber-600 hover:bg-amber-700'}`}
                 title={encounter.isPaused
                   ? 'Resume combat from the current turn. The initiative order will be recalculated to include any participants added while paused.'
                   : 'Pause combat to freeze the turn order. While paused, you can add or remove participants, adjust HP, and edit initiative values. The turn order will be recalculated when you resume.'}
               >
-                {encounter.isPaused ? <PlayIcon size={18} className="mr-2" /> : <PauseIcon size={18} className="mr-2" />}
-                {encounter.isPaused ? 'Resume Combat' : 'Pause Combat'}
+                {encounter.isPaused ? <PlayIcon size={16} className="mr-1 flex-shrink-0" /> : <PauseIcon size={16} className="mr-1 flex-shrink-0" />}
+                <span className="truncate hidden lg:inline">{encounter.isPaused ? 'Resume Combat' : 'Pause Combat'}</span><span className="inline lg:hidden truncate">{encounter.isPaused ? 'Resume' : 'Pause'}</span>
               </button>
               <button
                 onClick={handleNextTurn}
-                className="w-full px-4 py-3 text-sm font-medium text-white bg-purple-700 hover:bg-purple-800 rounded-md transition-colors flex items-center justify-center"
+                className="w-full min-w-0 px-3 py-2 text-sm font-medium text-white bg-purple-700 hover:bg-purple-800 rounded-md transition-colors flex items-center justify-center"
                 disabled={!encounter.currentTurnParticipantId || encounter.isPaused}
               >
-                <SkipForwardIcon size={18} className="mr-2" /> Next Turn
+                <SkipForwardIcon size={16} className="mr-1 flex-shrink-0" /> <span className="truncate hidden lg:inline">Next Turn</span><span className="inline lg:hidden truncate">Next</span>
               </button>
               <button
                 onClick={() => setShowEndConfirm(true)}
-                className="w-full px-4 py-3 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md transition-colors flex items-center justify-center"
+                className="w-full min-w-0 px-3 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md transition-colors flex items-center justify-center"
               >
-                <StopCircleIcon size={18} className="mr-2" /> End Combat
+                <StopCircleIcon size={16} className="mr-1 flex-shrink-0" /> <span className="truncate hidden lg:inline">End Combat</span><span className="inline lg:hidden truncate">End</span>
               </button>
               
               {/* Round Counter */}
-              <div className="mt-2 pt-3 border-t border-stone-700">
-                <p className="text-center text-lg font-semibold text-amber-300 font-cinzel">Round: {encounter.round}</p>
+              <div className="mt-1 pt-2 border-t border-stone-700">
+                <p className="text-center text-base font-semibold text-amber-300 font-cinzel">Round: {encounter.round}</p>
                 {encounter.isPaused && (
-                  <p className="text-center text-sm text-yellow-400 font-semibold mt-1">(Paused)</p>
+                  <p className="text-center text-xs text-yellow-400 font-semibold mt-1">(Paused)</p>
                 )}
               </div>
             </>
           )}
         </div>
 
-        {/* Undo / Redo — queried on click (no live logs subscription during combat) */}
-        <div className="mt-3 flex gap-2">
+        {/* Undo / Redo */}
+        <div className="mt-2 flex gap-2">
           <button
             onClick={handleUndo}
-            className="flex-1 px-3 py-2 text-xs font-medium text-white bg-amber-700 hover:bg-amber-600 rounded-md transition-colors flex items-center justify-center"
+            className="flex-1 px-3 py-1.5 text-xs font-medium text-white bg-amber-700 hover:bg-amber-600 rounded-md transition-colors flex items-center justify-center"
             title="Undo latest action for this encounter"
           >
-            <Undo2 size={14} className="mr-1" /> Undo
+            <Undo2 size={12} className="mr-1" /> <span className="lg:hidden">Un</span><span className="hidden lg:inline">Undo</span>
           </button>
           <button
             onClick={handleRedo}
-            className="flex-1 px-3 py-2 text-xs font-medium text-white bg-sky-700 hover:bg-sky-600 rounded-md transition-colors flex items-center justify-center"
+            className="flex-1 px-3 py-1.5 text-xs font-medium text-white bg-sky-700 hover:bg-sky-600 rounded-md transition-colors flex items-center justify-center"
             title="Redo latest undone action for this encounter"
           >
-            <Redo2 size={14} className="mr-1" /> Redo
+            <Redo2 size={12} className="mr-1" /> <span className="lg:hidden">Re</span><span className="hidden lg:inline">Redo</span>
           </button>
         </div>
 
         {/* Display Settings */}
-        <div className="mt-3 pt-3 border-t border-stone-700">
+        <div className="mt-2 pt-2 border-t border-stone-700">
           <h5 className="text-xs font-semibold text-stone-400 uppercase tracking-wider mb-2">Player Display</h5>
           <label className="flex items-center justify-between cursor-pointer gap-2">
-            <span className="text-sm text-stone-300">Hide player HP</span>
+            <span className="text-xs text-stone-300">Hide player HP</span>
             <button
               role="switch"
               aria-checked={hidePlayerHp}
               onClick={handleToggleHidePlayerHp}
-              className={`relative inline-flex h-5 w-9 flex-shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none ${hidePlayerHp ? 'bg-amber-600' : 'bg-stone-600'}`}
+              className={`relative inline-flex h-4 w-8 flex-shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none ${hidePlayerHp ? 'bg-amber-600' : 'bg-stone-600'}`}
             >
-              <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${hidePlayerHp ? 'translate-x-4' : 'translate-x-0'}`} />
+              <span className={`inline-block h-3 w-3 transform rounded-full bg-white shadow transition-transform ${hidePlayerHp ? 'translate-x-4' : 'translate-x-0'}`} />
             </button>
           </label>
           <label className="flex items-center justify-between cursor-pointer gap-2 mt-2">
-            <span className="text-sm text-stone-300">Hide NPC/monster HP</span>
+            <span className="text-xs text-stone-300">Hide NPC/monster HP</span>
             <button
               role="switch"
               aria-checked={hideNpcHp}
               onClick={handleToggleHideNpcHp}
-              className={`relative inline-flex h-5 w-9 flex-shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none ${hideNpcHp ? 'bg-amber-600' : 'bg-stone-600'}`}
+              className={`relative inline-flex h-4 w-8 flex-shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none ${hideNpcHp ? 'bg-amber-600' : 'bg-stone-600'}`}
             >
-              <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${hideNpcHp ? 'translate-x-4' : 'translate-x-0'}`} />
+              <span className={`inline-block h-3 w-3 transform rounded-full bg-white shadow transition-transform ${hideNpcHp ? 'translate-x-4' : 'translate-x-0'}`} />
             </button>
           </label>
         </div>
@@ -2317,6 +2341,7 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
     catch { return null; }
   });
   const [showCreateModal, setShowCreateModal] = useState(false);
+  const [encounterFullscreen, setEncounterFullscreen] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [itemToDelete, setItemToDelete] = useState(null);
   const [draggedEncounterId, setDraggedEncounterId] = useState(null);
@@ -2504,7 +2529,7 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
 
   return (
     <>
-      <div className="mt-6 p-4 bg-stone-900 rounded-lg shadow">
+      <div className="mt-3 md:mt-6 p-2 md:p-4 bg-stone-900 rounded-lg shadow">
         <div className="flex justify-between items-center mb-3">
           <h3 className="text-xl font-semibold text-amber-300 font-cinzel tracking-wide flex items-center">
             <Swords size={24} className="mr-2" /> Encounters
@@ -2596,13 +2621,20 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
         )}
 
         {selectedEncounter && (
-          <div className="mt-6 p-4 bg-stone-900 rounded-lg shadow-inner">
-            <h3 className="text-xl font-semibold text-amber-300 mb-3 font-cinzel tracking-wide">
-              Managing Encounter: {selectedEncounter.name}
+          <div className={`mt-3 md:mt-6 p-2 md:p-4 bg-stone-900 rounded-lg shadow-inner ${encounterFullscreen ? 'fixed inset-0 z-50 m-0 rounded-none overflow-y-auto' : ''}`}>
+            <h3 className="text-xl font-semibold text-amber-300 mb-3 font-cinzel tracking-wide flex items-center justify-between">
+              <span>Managing Encounter: {selectedEncounter.name}</span>
+              <button
+                onClick={() => setEncounterFullscreen(v => !v)}
+                className="ml-2 p-1.5 rounded-md text-stone-300 bg-stone-700 hover:bg-stone-600 transition-colors flex-shrink-0"
+                title={encounterFullscreen ? 'Exit fullscreen encounter' : 'Fullscreen encounter'}
+              >
+                {encounterFullscreen ? <Minimize2 size={18} /> : <Maximize2 size={18} />}
+              </button>
             </h3>
-            <div className="flex flex-col lg:flex-row gap-4">
-              {/* Combat Controls - Left Side (Sticky on large screens) */}
-              <div className="lg:w-64 flex-shrink-0">
+            <div className="flex flex-row gap-4">
+              {/* Combat Controls - always left */}
+              <div className="w-32 md:w-64 flex-shrink-0 sticky top-4 self-start">
                 <InitiativeControls
                   campaignId={campaignId}
                   encounter={selectedEncounter}
@@ -2960,7 +2992,7 @@ function AdminView({ userId }) {
 
   return (
     <>
-      <div className="space-y-6">
+      <div className="space-y-3 md:space-y-6">
         <div>
           <div className="flex justify-between items-center mb-4">
             <button
@@ -3112,7 +3144,7 @@ function AdminView({ userId }) {
         )}
 
         {selectedCampaign && (
-          <div className="mt-6 p-6 bg-stone-900 rounded-lg shadow-xl">
+          <div className="mt-3 md:mt-6 p-3 md:p-6 bg-stone-900 rounded-lg shadow-xl">
             <h2 className="text-2xl font-semibold text-amber-300 mb-4 font-cinzel tracking-wide">
               Managing: {selectedCampaign.name}
             </h2>
@@ -3839,7 +3871,7 @@ function LogsView() {
         </div>
       </header>
 
-      <main className="container mx-auto p-4 md:p-8">
+      <main className="mx-auto p-4 md:p-8 max-w-7xl">
         {isLoading ? (
           <LoadingSpinner message="Loading logs..." />
         ) : logs.length === 0 ? (
-- 
2.34.1


From 69ab0c35c0c00a408a0eb13ffe5b883c14e412a1 Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Wed, 8 Jul 2026 19:39:32 -0400
Subject: [PATCH 20/24] fix: move revive/mark dead to stats row, bump stat font
 size

- Revive/Mark Dead buttons moved to init/hp/maxhp row (right justified)
- Separate from damage/heal controls
- Stat inputs bumped text-sm -> text-base, widths increased
---
 src/App.js | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/App.js b/src/App.js
index 34f0457..f1dba70 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1792,7 +1792,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                           onFocus={(e) => { e.target.select(); handleFieldFocus(p.id, 'Initiative'); }}
                           onBlur={(e) => { if (e.target.value !== String(p.initiative)) handleInlineInitiative(p.id, e.target.value); handleFieldBlur(); }}
                           onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); }}
-                          className="w-6 bg-transparent text-white text-sm text-center border-b border-transparent hover:border-stone-500 focus:border-amber-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                          className="w-7 bg-transparent text-white text-base text-center border-b border-transparent hover:border-stone-500 focus:border-amber-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
                           aria-label={`Initiative for ${p.name}`}
                         />
                       </span>
@@ -1805,10 +1805,10 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                           onFocus={(e) => { e.target.select(); handleFieldFocus(p.id, 'HP'); }}
                           onBlur={(e) => { if (e.target.value !== String(p.currentHp)) handleInlineCurrentHp(p.id, e.target.value); handleFieldBlur(); }}
                           onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); if (e.key === 'Escape') e.target.value = p.currentHp; }}
-                          className="w-8 bg-transparent text-white text-sm text-center border-b border-transparent hover:border-stone-500 focus:border-red-500 focus:outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                          className="w-10 bg-transparent text-white text-base text-center border-b border-transparent hover:border-stone-500 focus:border-red-500 focus:outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
                           aria-label={`Current HP for ${p.name}`}
                         />
-                        <span className="text-stone-500 text-sm">/</span>
+                        <span className="text-stone-500 text-base">/</span>
                         <input
                           type="number"
                           defaultValue={p.maxHp}
@@ -1816,24 +1816,24 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                           onFocus={(e) => { e.target.select(); handleFieldFocus(p.id, 'Max HP'); }}
                           onBlur={(e) => { if (e.target.value !== String(p.maxHp)) handleInlineMaxHp(p.id, e.target.value); handleFieldBlur(); }}
                           onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); if (e.key === 'Escape') e.target.value = p.maxHp; }}
-                          className="w-8 bg-transparent text-stone-400 text-sm text-center border-b border-transparent hover:border-stone-500 focus:border-red-500 focus:outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                          className="w-10 bg-transparent text-stone-400 text-base text-center border-b border-transparent hover:border-stone-500 focus:border-red-500 focus:outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
                           aria-label={`Max HP for ${p.name}`}
                         />
                       </span>
+                      <span className="ml-auto inline-flex items-center gap-1">
+                        {participantStatus === 'dead' && (
+                          <button onClick={() => handleRevive(p.id)} className="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded bg-emerald-800 hover:bg-emerald-700 text-white" title="Revive (clear dead status)">
+                            <HeartPulse size={12} /> Revive
+                          </button>
+                        )}
+                        {isGeneric && !isDead && (
+                          <button onClick={() => handleMarkDead(p.id)} className="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded bg-red-900 hover:bg-red-800 text-white" title="Mark dead">
+                            <HeartCrack size={12} /> Mark Dead
+                          </button>
+                        )}
+                      </span>
                     </div>
                     
-                    {participantStatus === 'dead' && (
-                      <button onClick={() => handleRevive(p.id)} className="mt-2 inline-flex items-center gap-1 self-start px-2.5 py-1 text-xs rounded bg-emerald-800 hover:bg-emerald-700 text-white" title="Revive (clear dead status)">
-                        <HeartPulse size={14} /> Revive
-                      </button>
-                    )}
-
-                    {isGeneric && !isDead && (
-                      <button onClick={() => handleMarkDead(p.id)} className="mt-2 inline-flex items-center gap-1 self-start px-2.5 py-1 text-xs rounded bg-red-900 hover:bg-red-800 text-white" title="Mark dead">
-                        <HeartCrack size={14} /> Mark Dead
-                      </button>
-                    )}
-
                     {hasDeathSaves && participantStatus === 'stable' && (
                       <div className="mt-2 text-xs text-emerald-300/80 italic">Stable — regains 1 HP after 1d4 hours</div>
                     )}
-- 
2.34.1


From c05a283cf049bf914dda5974c487b7510baed524 Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Wed, 8 Jul 2026 19:41:35 -0400
Subject: [PATCH 21/24] feat: encounter card 'IN PROGRESS' badge + red ring for
 active combat
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Pulsing red ⚔ IN PROGRESS badge on encounter card title
- Red ring around card when combat started and not ended
---
 src/App.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index f1dba70..8ea85e0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2560,11 +2560,11 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
                 onDragOver={handleEncounterDragOver}
                 onDrop={(e) => handleEncounterDrop(e, encounter.id)}
                 onDragEnd={() => setDraggedEncounterId(null)}
-                className={`p-3 rounded-md shadow transition-all ${selectedEncounterId === encounter.id ? 'bg-amber-900 ring-2 ring-amber-500' : 'bg-stone-800 hover:bg-stone-700'} ${isLive ? 'ring-2 ring-green-500 shadow-md shadow-green-500/30' : ''} ${draggedEncounterId === encounter.id ? 'opacity-50 ring-2 ring-yellow-400' : ''} cursor-grab`}
+                className={`p-3 rounded-md shadow transition-all ${selectedEncounterId === encounter.id ? 'bg-amber-900 ring-2 ring-amber-500' : 'bg-stone-800 hover:bg-stone-700'} ${isLive ? 'ring-2 ring-green-500 shadow-md shadow-green-500/30' : ''} ${encounter.isStarted && !encounter.endedAt ? 'ring-2 ring-red-500' : ''} ${draggedEncounterId === encounter.id ? 'opacity-50 ring-2 ring-yellow-400' : ''} cursor-grab`}
               >
                 <div className="flex justify-between items-center">
                   <div onClick={() => setSelectedEncounterId(encounter.id)} className="cursor-pointer flex-grow">
-                    <h4 className="font-medium text-white">{encounter.name} <span className={`ml-1 px-1.5 py-0.5 rounded text-xs font-bold tracking-wide ${encounter.ruleset === 'generic' ? 'bg-purple-900/80 text-purple-200 border border-purple-500' : 'bg-amber-900/80 text-amber-200 border border-amber-500'}`}>{encounter.ruleset === 'generic' ? 'GEN' : '5e'}</span></h4>
+                    <h4 className="font-medium text-white">{encounter.name} <span className={`ml-1 px-1.5 py-0.5 rounded text-xs font-bold tracking-wide ${encounter.ruleset === 'generic' ? 'bg-purple-900/80 text-purple-200 border border-purple-500' : 'bg-amber-900/80 text-amber-200 border border-amber-500'}`}>{encounter.ruleset === 'generic' ? 'GEN' : '5e'}</span>{encounter.isStarted && !encounter.endedAt && <span className="ml-1 px-1.5 py-0.5 rounded text-xs font-bold bg-red-600 text-white animate-pulse">⚔ IN PROGRESS</span>}</h4>
                     <p className="text-xs text-stone-300">
                       {encounter.createdAt && `${new Date(encounter.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false })} · `}Participants: {encounter.participants?.length || 0}
                     </p>
-- 
2.34.1


From 2c6dfdafc8428767a02ebc52503fba53deb3f2d6 Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Wed, 8 Jul 2026 19:56:00 -0400
Subject: [PATCH 22/24] fix: guard player display from cross-encounter
 conflicts

- Start encounter only claims display if slot empty or already ours
  (prevents stealing display from another live encounter)
- End encounter only clears display if THIS encounter is the one showing
  (prevents killing display for a different live encounter)
- Use unwrapped activeDisplayData (not snapshot wrapper activeDisplayInfo)
- Tests: 4 display guard cases (claim empty, no-steal busy, clear own,
  no-clear other)
---
 src/App.js                     | 16 +++++-
 src/tests/DisplayGuard.test.js | 94 ++++++++++++++++++++++++++++++++++
 2 files changed, 108 insertions(+), 2 deletions(-)
 create mode 100644 src/tests/DisplayGuard.test.js

diff --git a/src/App.js b/src/App.js
index 8ea85e0..50292ea 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2165,7 +2165,13 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
 
     try {
       await startEncounter(encounter, buildCtx(encounterPath));
-      await storage.setDoc(getPath.activeDisplay(), { activeCampaignId: campaignId, activeEncounterId: encounter.id }, { merge: true });
+      // Only claim player display if slot is empty or already showing this encounter.
+      // Don't steal display from another live encounter.
+      const displayEmpty = !activeDisplayData || !activeDisplayData.activeEncounterId;
+      const displayIsOurs = activeDisplayData && activeDisplayData.activeCampaignId === campaignId && activeDisplayData.activeEncounterId === encounter.id;
+      if (displayEmpty || displayIsOurs) {
+        await storage.setDoc(getPath.activeDisplay(), { activeCampaignId: campaignId, activeEncounterId: encounter.id }, { merge: true });
+      }
     } catch (err) {
       showToast(err.message || "Failed to start encounter. Please try again.");    }
   };
@@ -2207,7 +2213,13 @@ function InitiativeControls({ campaignId, encounter, encounterPath }) {
         } catch {}
       }
       await endEncounter(encounter, ctx);
-      await storage.setDoc(getPath.activeDisplay(), { activeCampaignId: null, activeEncounterId: null }, { merge: true });
+      // Only clear display if THIS encounter is the one showing.
+      const displayIsThis = activeDisplayData &&
+        activeDisplayData.activeCampaignId === campaignId &&
+        activeDisplayData.activeEncounterId === encounter.id;
+      if (displayIsThis) {
+        await storage.setDoc(getPath.activeDisplay(), { activeCampaignId: null, activeEncounterId: null }, { merge: true });
+      }
     } catch (err) {
       showToast("Failed to end encounter. Please try again.");    }
 
diff --git a/src/tests/DisplayGuard.test.js b/src/tests/DisplayGuard.test.js
new file mode 100644
index 0000000..d13fae6
--- /dev/null
+++ b/src/tests/DisplayGuard.test.js
@@ -0,0 +1,94 @@
+// Display guard: starting encounter does NOT steal display from another live encounter.
+// Ending encounter does NOT clear display if different encounter showing.
+
+import React from 'react';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { getCalls, MOCK_DB } from '../__mocks__/firebase/_mock-db';
+import { setupReady, addMonsterViaUI, startCombatViaUI } from './testHelpers';
+
+const DISPLAY_PATH = 'artifacts/ttrpg-initiative-tracker-default/public/data/activeDisplay/status';
+
+function findCallActiveDisplay(fn) {
+  return getCalls().filter(c => c.fn === fn && c.path.includes('activeDisplay/status'));
+}
+
+describe('Display guard', () => {
+  test('startEncounter: claims display when slot empty', async () => {
+    await setupReady('GuardCamp1', 'GuardEnc1');
+    await addMonsterViaUI('Goblin', 10, 5);
+    await startCombatViaUI();
+    const adCalls = findCallActiveDisplay('setDoc');
+    const last = adCalls[adCalls.length - 1];
+    expect(last).toBeTruthy();
+    expect(last.data.activeEncounterId).toBeTruthy();
+  });
+
+  test('startEncounter: does NOT steal display from another live encounter', async () => {
+    // Pre-seed display as busy with a DIFFERENT encounter
+    MOCK_DB.set(DISPLAY_PATH, {
+      activeCampaignId: 'other-camp',
+      activeEncounterId: 'other-enc',
+    });
+
+    await setupReady('GuardCamp2', 'GuardEnc2');
+    await addMonsterViaUI('Orc', 15, 8);
+    await startCombatViaUI();
+
+    // Combat started on encounter doc
+    const encCalls = getCalls().filter(c => c.fn === 'updateDoc' && c.path.includes('/encounters/'));
+    expect(encCalls.some(c => c.data.isStarted === true)).toBe(true);
+
+    // But display setDoc should NOT have been called to claim this encounter
+    const adClaims = findCallActiveDisplay('setDoc').filter(
+      c => c.data && c.data.activeEncounterId && c.data.activeEncounterId !== 'other-enc'
+    );
+    expect(adClaims).toHaveLength(0);
+  });
+
+  test('endEncounter: clears display when ending the displayed encounter', async () => {
+    await setupReady('GuardCamp3', 'GuardEnc3');
+    await addMonsterViaUI('Wolf', 8, 3);
+    await startCombatViaUI();
+
+    fireEvent.click(screen.getByRole('button', { name: /End Combat/i }));
+    fireEvent.click(await screen.findByRole('button', { name: /Confirm/i }));
+
+    await waitFor(() => {
+      const adCalls = findCallActiveDisplay('setDoc');
+      const last = adCalls[adCalls.length - 1];
+      return last && last.data && last.data.activeCampaignId === null;
+    });
+    const adCalls = findCallActiveDisplay('setDoc');
+    const last = adCalls[adCalls.length - 1];
+    expect(last.data).toMatchObject({ activeCampaignId: null, activeEncounterId: null });
+  });
+
+  test('endEncounter: does NOT clear display when different encounter is live', async () => {
+    await setupReady('GuardCamp4', 'GuardEnc4');
+    await addMonsterViaUI('Bat', 4, 2);
+    await startCombatViaUI();
+
+    // Now hijack display to a different encounter (simulating eyeball toggle elsewhere)
+    MOCK_DB.set(DISPLAY_PATH, {
+      activeCampaignId: 'different-camp',
+      activeEncounterId: 'different-enc',
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: /End Combat/i }));
+    fireEvent.click(await screen.findByRole('button', { name: /Confirm/i }));
+
+    // Wait for encounter to end
+    await waitFor(() => {
+      const encCalls = getCalls().filter(c => c.fn === 'updateDoc' && c.path.includes('/encounters/'));
+      const last = encCalls[encCalls.length - 1];
+      return last && last.data.isStarted === false;
+    });
+
+    // Display should NOT have been cleared
+    const clearCalls = findCallActiveDisplay('setDoc').filter(
+      c => c.data && c.data.activeCampaignId === null
+    );
+    expect(clearCalls).toHaveLength(0);
+  });
+});
-- 
2.34.1


From eef11c3b6ea49a319f7019a89900e0ace4538664 Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Wed, 8 Jul 2026 20:00:13 -0400
Subject: [PATCH 23/24] fix: scope selectedEncounter + scrollY localStorage per
 campaign

- selectedEncounter key: ttrpg.selectedEncounter.{campaignId}
- scrollY key: ttrpg.scrollY.{campaignId}
- Restore scoped encounter selection on campaign switch
- Global keys unchanged (selectedCampaign, wakeLock, collapses)
- Prevents same-browser tabs on different campaigns from fighting
- Tests: 3 scoping cases (scoped encounter, scoped scroll, global intact)
---
 src/App.js                            | 27 +++++++++++++------
 src/tests/LocalStorageScoping.test.js | 39 +++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 8 deletions(-)
 create mode 100644 src/tests/LocalStorageScoping.test.js

diff --git a/src/App.js b/src/App.js
index 50292ea..d960371 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2349,7 +2349,7 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
 
   const [encounters, setEncounters] = useState([]);
   const [selectedEncounterId, setSelectedEncounterId] = useState(() => {
-    try { return localStorage.getItem('ttrpg.selectedEncounter') || null; }
+    try { return localStorage.getItem(`ttrpg.selectedEncounter.${campaignId}`) || null; }
     catch { return null; }
   });
   const [showCreateModal, setShowCreateModal] = useState(false);
@@ -2360,6 +2360,17 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
 
   const selectedEncounterIdRef = useRef(selectedEncounterId);
 
+  // Restore scoped encounter selection when campaign changes.
+  useEffect(() => {
+    if (!campaignId) { setSelectedEncounterId(null); return; }
+    try {
+      const saved = localStorage.getItem(`ttrpg.selectedEncounter.${campaignId}`) || null;
+      setSelectedEncounterId(saved);
+    } catch {
+      setSelectedEncounterId(null);
+    }
+  }, [campaignId]);
+
   useEffect(() => {
     if (encountersData) setEncounters(encountersData);
   }, [encountersData]);
@@ -2406,10 +2417,10 @@ function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharac
   useEffect(() => {
     selectedEncounterIdRef.current = selectedEncounterId;
     try {
-      if (selectedEncounterId) localStorage.setItem('ttrpg.selectedEncounter', selectedEncounterId);
-      else localStorage.removeItem('ttrpg.selectedEncounter');
+      if (selectedEncounterId) localStorage.setItem(`ttrpg.selectedEncounter.${campaignId}`, selectedEncounterId);
+      else localStorage.removeItem(`ttrpg.selectedEncounter.${campaignId}`);
     } catch {}
-  }, [selectedEncounterId]);
+  }, [selectedEncounterId, campaignId]);
 
   useEffect(() => {
     if (!campaignId) {
@@ -2752,7 +2763,7 @@ function AdminView({ userId }) {
   // Save scroll on unload + visibility change + interval.
   useEffect(() => {
     const onSave = () => {
-      try { localStorage.setItem('ttrpg.scrollY', String(window.scrollY)); } catch {}
+      try { localStorage.setItem(`ttrpg.scrollY.${selectedCampaignId}`, String(window.scrollY)); } catch {}
     };
     window.addEventListener('beforeunload', onSave);
     window.addEventListener('pagehide', onSave);
@@ -2764,20 +2775,20 @@ function AdminView({ userId }) {
       document.removeEventListener('visibilitychange', onSave);
       clearInterval(interval);
     };
-  }, []);
+  }, [selectedCampaignId]);
 
   // Restore scroll once data loaded.
   useEffect(() => {
     if (scrollRestoredRef.current) return;
     if (campaignsWithDetails.length === 0) return;
     try {
-      const y = parseInt(localStorage.getItem('ttrpg.scrollY') || '0', 10);
+      const y = parseInt(localStorage.getItem(`ttrpg.scrollY.${selectedCampaignId}`) || '0', 10);
       if (y > 0) {
         scrollRestoredRef.current = true;
         setTimeout(() => window.scrollTo(0, y), 300);
       }
     } catch {}
-  }, [campaignsWithDetails]);
+  }, [campaignsWithDetails, selectedCampaignId]);
 
   // Persist selections across reload.
   useEffect(() => {
diff --git a/src/tests/LocalStorageScoping.test.js b/src/tests/LocalStorageScoping.test.js
new file mode 100644
index 0000000..ba3750c
--- /dev/null
+++ b/src/tests/LocalStorageScoping.test.js
@@ -0,0 +1,39 @@
+// localStorage scoping: selectedEncounter + scrollY keyed per campaign.
+// Two tabs on different campaigns don't fight over selection/scroll.
+
+import React from 'react';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { setupReady, addMonsterViaUI } from './testHelpers';
+
+describe('localStorage campaign scoping', () => {
+  test('selectedEncounter key is scoped (not bare)', async () => {
+    await setupReady('ScopeCamp1', 'ScopeEnc1');
+    // bare key should not exist
+    expect(localStorage.getItem('ttrpg.selectedEncounter')).toBeNull();
+    // scoped key with suffix should exist
+    const scoped = Object.keys(localStorage).find(
+      k => k.startsWith('ttrpg.selectedEncounter.') && k !== 'ttrpg.selectedEncounter'
+    );
+    expect(scoped).toBeTruthy();
+    expect(localStorage.getItem(scoped)).toBeTruthy();
+  });
+
+  test('scrollY key is scoped (not bare)', async () => {
+    await setupReady('ScopeCamp2', 'ScopeEnc2');
+    await addMonsterViaUI('Goblin', 10, 5);
+    expect(localStorage.getItem('ttrpg.scrollY')).toBeNull();
+    const scoped = Object.keys(localStorage).find(
+      k => k.startsWith('ttrpg.scrollY.') && k !== 'ttrpg.scrollY'
+    );
+    // key may not exist until save fires — trigger by checking bare is null
+    // and at least scoped format is used if any scrollY key present
+    const scrollKeys = Object.keys(localStorage).filter(k => k.startsWith('ttrpg.scrollY'));
+    scrollKeys.forEach(k => expect(k).not.toBe('ttrpg.scrollY'));
+  });
+
+  test('global keys still exist (campaign selection, wake lock)', async () => {
+    await setupReady('ScopeCamp3', 'ScopeEnc3');
+    expect(localStorage.getItem('ttrpg.selectedCampaign')).toBeTruthy();
+  });
+});
-- 
2.34.1


From b5b339a5dd05a1c8b6dd323454c74e8d1a4aa69c Mon Sep 17 00:00:00 2001
From: david raistrick <1108844+keen99@users.noreply.github.com>
Date: Wed, 8 Jul 2026 21:36:26 -0400
Subject: [PATCH 24/24] feat: temp HP, character isNpc, initiative box

Temp HP:
- setTempHp() in shared/turn.js (replaces, no stacking)
- Damage absorbs temp HP first (both 5e + generic rulesets)
- Inline temp HP input on participant card (cyan when active)
- Temp HP field in edit modal
- makeParticipant tempHp field (default 0)
- 8 shared tests

Character isNpc:
- isNpc field on character roster model
- buildCharacterParticipant: type 'npc' when isNpc
- Add form checkbox + edit form checkbox
- NPC badge on character list row
- Writeback preserves isNpc

Initiative box:
- Amber-bordered box around initiative input
- Gold text (amber-300), disabled stays gold
- Stone-950 bg matches page
- Bumped maxHp (stone-200) + tempHp (stone-300/cyan) visibility
---
 shared/tests/turn.temphp.test.js | 102 +++++++++++++++++++++++++++++++
 shared/turn.js                   |  92 +++++++++++++++++++++++++---
 src/App.js                       |  77 ++++++++++++++++++++---
 3 files changed, 254 insertions(+), 17 deletions(-)
 create mode 100644 shared/tests/turn.temphp.test.js

diff --git a/shared/tests/turn.temphp.test.js b/shared/tests/turn.temphp.test.js
new file mode 100644
index 0000000..e4fedbd
--- /dev/null
+++ b/shared/tests/turn.temphp.test.js
@@ -0,0 +1,102 @@
+// Temp HP: damage hits temp first, then regular.
+// setTempHp replaces (no stacking). Healing regular HP ignores temp.
+const shared = require('@ttrpg/shared');
+const { makeParticipant, applyHpChange, setTempHp, addParticipant } = shared;
+const { mockCtx } = require('./_helpers');
+
+function setupEnc() {
+  const { ctx } = mockCtx();
+  return {
+    enc: { id: 'enc1', name: 'TempEnc', participants: [], isStarted: false, isPaused: false, round: 0 },
+    ctx,
+  };
+}
+
+describe('temp HP', () => {
+  test('setTempHp sets tempHp on participant', async () => {
+    const { enc, ctx } = setupEnc();
+    const p = makeParticipant({
+      name: 'Hero', type: 'character', initiative: 10, maxHp: 20, currentHp: 20,
+    });
+    let e = await addParticipant(enc, p, ctx);
+    e = await setTempHp(e, p.id, 5, ctx);
+    expect(e.participants[0].tempHp).toBe(5);
+  });
+
+  test('setTempHp replaces existing temp (no stacking)', async () => {
+    const { enc, ctx } = setupEnc();
+    const p = makeParticipant({
+      name: 'Hero', type: 'character', initiative: 10, maxHp: 20, currentHp: 20,
+    });
+    let e = await addParticipant(enc, p, ctx);
+    e = await setTempHp(e, p.id, 5, ctx);
+    e = await setTempHp(e, p.id, 3, ctx);
+    expect(e.participants[0].tempHp).toBe(3);
+  });
+
+  test('setTempHp to 0 clears temp', async () => {
+    const { enc, ctx } = setupEnc();
+    const p = makeParticipant({
+      name: 'Hero', type: 'character', initiative: 10, maxHp: 20, currentHp: 20,
+    });
+    let e = await addParticipant(enc, p, ctx);
+    e = await setTempHp(e, p.id, 5, ctx);
+    e = await setTempHp(e, p.id, 0, ctx);
+    expect(e.participants[0].tempHp).toBe(0);
+  });
+
+  test('damage: temp absorbs before regular HP', async () => {
+    const { enc, ctx } = setupEnc();
+    const p = makeParticipant({
+      name: 'Hero', type: 'character', initiative: 10, maxHp: 20, currentHp: 20,
+    });
+    let e = await addParticipant(enc, p, ctx);
+    e = await setTempHp(e, p.id, 5, ctx);
+    e = await applyHpChange(e, p.id, 'damage', 8, ctx);
+    expect(e.participants[0].tempHp).toBe(0);
+    expect(e.participants[0].currentHp).toBe(17);
+  });
+
+  test('damage less than temp: only temp reduced', async () => {
+    const { enc, ctx } = setupEnc();
+    const p = makeParticipant({
+      name: 'Hero', type: 'character', initiative: 10, maxHp: 20, currentHp: 20,
+    });
+    let e = await addParticipant(enc, p, ctx);
+    e = await setTempHp(e, p.id, 10, ctx);
+    e = await applyHpChange(e, p.id, 'damage', 4, ctx);
+    expect(e.participants[0].tempHp).toBe(6);
+    expect(e.participants[0].currentHp).toBe(20);
+  });
+
+  test('heal: does not affect temp HP', async () => {
+    const { enc, ctx } = setupEnc();
+    const p = makeParticipant({
+      name: 'Hero', type: 'character', initiative: 10, maxHp: 20, currentHp: 10,
+    });
+    let e = await addParticipant(enc, p, ctx);
+    e = await setTempHp(e, p.id, 5, ctx);
+    e = await applyHpChange(e, p.id, 'heal', 8, ctx);
+    expect(e.participants[0].tempHp).toBe(5);
+    expect(e.participants[0].currentHp).toBe(18);
+  });
+
+  test('damage exactly equals temp: temp gone, regular intact', async () => {
+    const { enc, ctx } = setupEnc();
+    const p = makeParticipant({
+      name: 'Hero', type: 'character', initiative: 10, maxHp: 20, currentHp: 20,
+    });
+    let e = await addParticipant(enc, p, ctx);
+    e = await setTempHp(e, p.id, 5, ctx);
+    e = await applyHpChange(e, p.id, 'damage', 5, ctx);
+    expect(e.participants[0].tempHp).toBe(0);
+    expect(e.participants[0].currentHp).toBe(20);
+  });
+
+  test('makeParticipant: tempHp defaults to 0', async () => {
+    const p = makeParticipant({
+      name: 'Hero', type: 'character', initiative: 10, maxHp: 20, currentHp: 20,
+    });
+    expect(p.tempHp).toBe(0);
+  });
+});
diff --git a/shared/turn.js b/shared/turn.js
index 4a53e30..0c41dec 100644
--- a/shared/turn.js
+++ b/shared/turn.js
@@ -362,6 +362,7 @@ function makeParticipant(opts) {
     deathSaveFailures: opts.deathSaveFailures || 0,
     hpFormula: opts.hpFormula || null,
     ac: opts.ac !== undefined ? opts.ac : null,
+    tempHp: opts.tempHp !== undefined ? opts.tempHp : 0,
   };
 }
 
@@ -374,7 +375,7 @@ function buildCharacterParticipant(character) {
   return {
     participant: makeParticipant({
       name: character.name,
-      type: 'character',
+      type: character.isNpc ? 'npc' : 'character',
       originalCharacterId: character.id,
       initiative: finalInitiative,
       maxHp,
@@ -623,6 +624,25 @@ async function toggleParticipantActive(encounter, participantId, ctx) {
   return commit(encounter, patch, log, ctx);
 }
 
+async function setTempHp(encounter, participantId, tempHp, ctx) {
+  const participant = (encounter.participants || []).find(p => p.id === participantId);
+  if (!participant) throw new Error('Participant not found.');
+  const value = Math.max(0, tempHp || 0);
+  const oldValues = { tempHp: participant.tempHp || 0 };
+  const updatedParticipants = (encounter.participants || []).map(p =>
+    p.id === participantId ? { ...p, tempHp: value } : p
+  );
+  const log = {
+    type: 'set_temp_hp',
+    participantId,
+    participantName: participant.name,
+    message: `${participant.name} temp HP set to ${value}`,
+    delta: { tempHp: value, oldTempHp: oldValues.tempHp },
+    undo: { oldValues, newValues: { tempHp: value } },
+  };
+  return commit(encounter, { participants: updatedParticipants }, log, ctx);
+}
+
 async function applyHpChange(encounter, participantId, changeType, amount, optionsOrCtx, maybeCtx) {
   const ctx = maybeCtx || optionsOrCtx;
   const options = maybeCtx ? (optionsOrCtx || {}) : {};
@@ -637,6 +657,7 @@ async function applyHpChange(encounter, participantId, changeType, amount, optio
 
   const oldValues = {
     currentHp: participant.currentHp,
+    tempHp: participant.tempHp || 0,
     status: participant.status || (participant.currentHp === 0 ? 'dying' : 'conscious'),
     deathSaveSuccesses: participant.deathSaveSuccesses || 0,
     deathSaveFailures: participant.deathSaveFailures || 0,
@@ -648,6 +669,7 @@ async function applyHpChange(encounter, participantId, changeType, amount, optio
   let message = '';
   let logDelta = { amount, from: participant.currentHp };
   const status = oldValues.status;
+  const currentTemp = participant.tempHp || 0;
 
   // GENERIC ruleset: no death saves, negative HP allowed, down status at <=0.
   // Monster death = dead + inactive. No unconscious auto-condition.
@@ -656,6 +678,33 @@ async function applyHpChange(encounter, participantId, changeType, amount, optio
   }
 
   if (changeType === 'damage') {
+    // Temp HP absorbs damage first.
+    let remainingDmg = amount;
+    let tempAfter = currentTemp;
+    if (tempAfter > 0) {
+      const absorbed = Math.min(tempAfter, remainingDmg);
+      tempAfter -= absorbed;
+      remainingDmg -= absorbed;
+      updates.tempHp = tempAfter;
+    }
+    // If fully absorbed by temp, no regular HP change.
+    if (remainingDmg === 0 && participant.currentHp > 0) {
+      const updatedParticipants0 = (encounter.participants || []).map(p =>
+        p.id === participantId ? { ...p, tempHp: tempAfter } : p
+      );
+      const log0 = {
+        type: 'hp_change',
+        participantId,
+        participantName: participant.name,
+        message: `${participant.name} took ${amount} damage (absorbed by temp HP, ${tempAfter} temp remaining)`,
+        delta: { amount, from: participant.currentHp, to: participant.currentHp, tempHp: tempAfter },
+        undo: { oldValues, newValues: { ...oldValues, tempHp: tempAfter } },
+      };
+      return commit(encounter, { participants: updatedParticipants0 }, log0, ctx);
+    }
+    amount = remainingDmg;
+    const tempBefore = currentTemp;
+    const tempFinal = updates.tempHp !== undefined ? updates.tempHp : tempBefore;
     if (participant.currentHp === 0) {
       if (status === 'dead') {
         if (participant.type === 'monster' && participant.isActive !== false) {
@@ -687,23 +736,23 @@ async function applyHpChange(encounter, participantId, changeType, amount, optio
       const add = options.isCriticalHit ? 2 : 1;
       const failures = (status === 'stable' ? 0 : (participant.deathSaveFailures || 0)) + add;
       if (failures >= 3) {
-        updates = { currentHp: 0, status: 'dead', deathSaveSuccesses: 0, deathSaveFailures: 0, ...(participant.type === 'monster' ? { isActive: false } : {}) };
+        updates = { currentHp: 0, status: 'dead', deathSaveSuccesses: 0, deathSaveFailures: 0, tempHp: tempFinal, ...(participant.type === 'monster' ? { isActive: false } : {}) };
       } else {
-        updates = { currentHp: 0, status: 'dying', deathSaveSuccesses: 0, deathSaveFailures: failures };
+        updates = { currentHp: 0, status: 'dying', deathSaveSuccesses: 0, deathSaveFailures: failures, tempHp: tempFinal };
       }
       message = `${participant.name} took ${amount} damage while ${status === 'stable' ? 'stable' : 'dying'}`;
       logDelta = { ...logDelta, to: 0, status: updates.status, deathSaveFailures: updates.deathSaveFailures };
     } else if (amount >= participant.currentHp + participant.maxHp) {
-      updates = { currentHp: 0, status: 'dead', deathSaveSuccesses: 0, deathSaveFailures: 0, ...(participant.type === 'monster' ? { isActive: false } : {}) };
+      updates = { currentHp: 0, status: 'dead', deathSaveSuccesses: 0, deathSaveFailures: 0, tempHp: tempFinal, ...(participant.type === 'monster' ? { isActive: false } : {}) };
       message = `Massive damage! ${participant.name} instantly killed`;
       logDelta = { ...logDelta, to: 0, status: 'dead', massive: true };
     } else {
       const newHp = Math.max(0, participant.currentHp - amount);
       if (newHp === 0) {
         const zeroStatus = participant.type === 'monster' ? 'dead' : 'dying';
-        updates = { currentHp: 0, status: zeroStatus, deathSaveSuccesses: 0, deathSaveFailures: 0, ...(zeroStatus === 'dead' ? { isActive: false } : {}) };
+        updates = { currentHp: 0, status: zeroStatus, deathSaveSuccesses: 0, deathSaveFailures: 0, tempHp: tempFinal, ...(zeroStatus === 'dead' ? { isActive: false } : {}) };
       } else {
-        updates = { currentHp: newHp, status: 'conscious' };
+        updates = { currentHp: newHp, status: 'conscious', tempHp: tempFinal };
       }
       message = `${participant.name} took ${amount} damage (${participant.currentHp} → ${newHp} HP)`;
       logDelta = { ...logDelta, to: newHp, status: updates.status };
@@ -747,8 +796,31 @@ async function applyHpChange(encounter, participantId, changeType, amount, optio
 async function applyHpChangeGeneric(encounter, participant, changeType, amount, oldValues, ctx) {
   const participantId = participant.id;
   let updates, message, logDelta = { amount, from: participant.currentHp };
+  const currentTemp = participant.tempHp || 0;
 
   if (changeType === 'damage') {
+    // Temp HP absorbs damage first.
+    let remainingDmg = amount;
+    let tempAfter = currentTemp;
+    if (tempAfter > 0) {
+      const absorbed = Math.min(tempAfter, remainingDmg);
+      tempAfter -= absorbed;
+      remainingDmg -= absorbed;
+    }
+    if (remainingDmg === 0) {
+      const updatedParticipants0 = (encounter.participants || []).map(p =>
+        p.id === participantId ? { ...p, tempHp: tempAfter } : p
+      );
+      const log0 = {
+        type: 'hp_change', participantId, participantName: participant.name,
+        message: `${participant.name} took ${amount} damage (absorbed by temp HP, ${tempAfter} temp remaining)`,
+        delta: { amount, from: participant.currentHp, to: participant.currentHp, tempHp: tempAfter },
+        undo: { oldValues, newValues: { ...oldValues, tempHp: tempAfter } },
+      };
+      return commit(encounter, { participants: updatedParticipants0 }, log0, ctx);
+    }
+    amount = remainingDmg;
+    const tempFinal = tempAfter;
     if (oldValues.status === 'dead') {
       if (participant.type === 'monster' && participant.isActive !== false) {
         const updatedParticipants = (encounter.participants || []).map(p =>
@@ -772,11 +844,11 @@ async function applyHpChangeGeneric(encounter, participant, changeType, amount,
     const newHp = participant.currentHp - amount;
     const isMonster = participant.type === 'monster';
     if (newHp <= 0 && isMonster) {
-      updates = { currentHp: newHp, status: 'dead', isActive: false };
+      updates = { currentHp: newHp, status: 'dead', isActive: false, tempHp: tempFinal };
     } else if (newHp <= 0) {
-      updates = { currentHp: newHp, status: 'down' };
+      updates = { currentHp: newHp, status: 'down', tempHp: tempFinal };
     } else {
-      updates = { currentHp: newHp, status: 'conscious' };
+      updates = { currentHp: newHp, status: 'conscious', tempHp: tempFinal };
     }
     message = `${participant.name} took ${amount} damage (${participant.currentHp} → ${newHp} HP)`;
     logDelta = { ...logDelta, to: newHp, status: updates.status };
@@ -1115,7 +1187,7 @@ module.exports = {
   makeParticipant, buildCharacterParticipant, buildMonsterParticipant,
   startEncounter, nextTurn, togglePause,
   addParticipant, addParticipants, updateParticipant, removeParticipant,
-  toggleParticipantActive, applyHpChange, deathSave, stabilizeParticipant, reviveParticipant, markDead, toggleCondition,
+  toggleParticipantActive, applyHpChange, setTempHp, deathSave, stabilizeParticipant, reviveParticipant, markDead, toggleCondition,
   reorderParticipants, endEncounter,
   activateDisplay, clearDisplay, toggleHidePlayerHp,
 };
diff --git a/src/App.js b/src/App.js
index d960371..2d682cf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -589,6 +589,7 @@ function EditParticipantModal({ participant, onClose, onSave }) {
   const [hpFormula, setHpFormula] = useState(participant.hpFormula || '');
   const [ac, setAc] = useState(participant.ac != null ? participant.ac : '');
   const [asNpc, setAsNpc] = useState(participant.type === 'npc');
+  const [tempHp, setTempHp] = useState(participant.tempHp || 0);
 
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -608,6 +609,7 @@ function EditParticipantModal({ participant, onClose, onSave }) {
       maxHp: finalMaxHp,
       hpFormula: (participant.type === 'monster' || participant.type === 'npc') ? (hpFormula.trim() || null) : null,
       ac: ac !== '' ? parseInt(ac, 10) : null,
+      tempHp: Math.max(0, parseInt(tempHp, 10) || 0),
       type: participant.type === 'monster' || participant.type === 'npc' ? (asNpc ? 'npc' : 'monster') : participant.type,
     });
   };
@@ -666,6 +668,20 @@ function EditParticipantModal({ participant, onClose, onSave }) {
             />
           </div>
         </div>
+        <div className="flex gap-4">
+          <div className="flex-1">
+            <label className="block text-sm font-medium text-stone-300">Temp HP</label>
+            <input
+              type="number"
+              value={tempHp}
+              onChange={(e) => setTempHp(e.target.value)}
+              min="0"
+              placeholder="0"
+              className="mt-1 block w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-cyan-600 focus:border-cyan-600 sm:text-sm text-white"
+            />
+          </div>
+          <div className="flex-1" />
+        </div>
         {(participant.type === 'monster' || participant.type === 'npc') && (
           <div>
             <label className="block text-sm font-medium text-stone-300 mb-1">HP Formula</label>
@@ -736,6 +752,7 @@ function CharacterManager({ campaignId, campaignCharacters, syncCharacters }) {
   const [defaultMaxHp, setDefaultMaxHp] = useState(DEFAULT_MAX_HP);
   const [defaultInitMod, setDefaultInitMod] = useState(DEFAULT_INIT_MOD);
   const [defaultAc, setDefaultAc] = useState('');
+  const [isCharacterNpc, setIsCharacterNpc] = useState(false);
   const [editingCharacter, setEditingCharacter] = useState(null);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [itemToDelete, setItemToDelete] = useState(null);
@@ -782,7 +799,8 @@ function CharacterManager({ campaignId, campaignCharacters, syncCharacters }) {
       name: characterName.trim(),
       defaultMaxHp: hp,
       defaultInitMod: initMod,
-      defaultAc: defaultAc !== '' ? parseInt(defaultAc, 10) : null
+      defaultAc: defaultAc !== '' ? parseInt(defaultAc, 10) : null,
+      isNpc: isCharacterNpc || false,
     };
 
     try {
@@ -793,12 +811,13 @@ function CharacterManager({ campaignId, campaignCharacters, syncCharacters }) {
       setDefaultMaxHp(DEFAULT_MAX_HP);
       setDefaultInitMod(DEFAULT_INIT_MOD);
       setDefaultAc('');
+      setIsCharacterNpc(false);
     } catch (err) {
       console.error("Error adding character:", err);
       showToast("Failed to add character. Please try again.");    }
   };
 
-  const handleUpdateCharacter = async (characterId, newName, newDefaultMaxHp, newDefaultInitMod, newDefaultAc, newDefaultCurrentHp) => {
+  const handleUpdateCharacter = async (characterId, newName, newDefaultMaxHp, newDefaultInitMod, newDefaultAc, newDefaultCurrentHp, newIsNpc) => {
     if (!db || !newName.trim() || !campaignId) return;
 
     const hp = parseInt(newDefaultMaxHp, 10);
@@ -815,7 +834,7 @@ function CharacterManager({ campaignId, campaignCharacters, syncCharacters }) {
 
     const updatedCharacters = campaignCharacters.map(c =>
       c.id === characterId
-        ? { ...c, name: newName.trim(), defaultMaxHp: hp, defaultInitMod: initMod, defaultAc: newDefaultAc !== undefined && newDefaultAc !== '' ? parseInt(newDefaultAc, 10) : null, defaultCurrentHp: newDefaultCurrentHp !== undefined && newDefaultCurrentHp !== '' ? parseInt(newDefaultCurrentHp, 10) : null }
+        ? { ...c, name: newName.trim(), defaultMaxHp: hp, defaultInitMod: initMod, defaultAc: newDefaultAc !== undefined && newDefaultAc !== '' ? parseInt(newDefaultAc, 10) : null, defaultCurrentHp: newDefaultCurrentHp !== undefined && newDefaultCurrentHp !== '' ? parseInt(newDefaultCurrentHp, 10) : null, isNpc: newIsNpc != null ? newIsNpc : (c.isNpc || false) }
         : c
     );
 
@@ -924,6 +943,15 @@ function CharacterManager({ campaignId, campaignCharacters, syncCharacters }) {
                   className="w-full px-3 py-2 bg-stone-800 border border-stone-700 rounded-md shadow-sm focus:outline-none focus:ring-amber-600 focus:border-amber-600 sm:text-sm text-white"
                 />
               </div>
+              <label className="col-span-2 sm:col-span-12 flex items-center gap-2 text-xs font-medium text-stone-400 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={isCharacterNpc}
+                  onChange={(e) => setIsCharacterNpc(e.target.checked)}
+                  className="w-4 h-4 accent-amber-600"
+                />
+                Long-lived NPC (death saves like character, red name in combat)
+              </label>
               <button
                 type="submit"
                 className="col-span-2 sm:col-span-12 sm:w-auto sm:justify-self-end px-4 py-2 text-sm font-medium text-white bg-amber-700 hover:bg-amber-800 rounded-md transition-colors flex items-center justify-center"
@@ -959,7 +987,8 @@ function CharacterManager({ campaignId, campaignCharacters, syncCharacters }) {
                           editingCharacter.defaultMaxHp,
                           editingCharacter.defaultInitMod,
                           editingCharacter.defaultAc,
-                          editingCharacter.defaultCurrentHp
+                          editingCharacter.defaultCurrentHp,
+                          editingCharacter.isNpc
                         );
                       }}
                       className="flex-grow flex flex-wrap gap-2 items-center"
@@ -1013,6 +1042,15 @@ function CharacterManager({ campaignId, campaignCharacters, syncCharacters }) {
                           title="AC"
                         />
                       </div>
+                      <label className="flex items-center gap-1 text-[10px] text-stone-400" title="Long-lived NPC">
+                        <input
+                          type="checkbox"
+                          checked={editingCharacter.isNpc || false}
+                          onChange={(e) => setEditingCharacter({ ...editingCharacter, isNpc: e.target.checked })}
+                          className="w-3 h-3 accent-red-600"
+                        />
+                        NPC
+                      </label>
                       <button type="submit" className="p-1 text-green-400 hover:text-green-300">
                         <Save size={18} />
                       </button>
@@ -1028,6 +1066,9 @@ function CharacterManager({ campaignId, campaignCharacters, syncCharacters }) {
                     <>
                       <div className="flex items-center mr-auto">
                         <span className="text-stone-100 mr-2">{character.name}</span>
+                        {character.isNpc && (
+                          <span className="px-1.5 py-0.5 rounded bg-red-900 text-red-200 text-xs font-medium border border-red-600" title="Long-lived NPC">NPC</span>
+                        )}
                         <div className="flex gap-1">
                           <span className="px-1.5 py-0.5 rounded bg-red-900/60 text-red-200 text-xs font-medium">HP {character.defaultMaxHp || '?'}</span>
                           {character.defaultCurrentHp != null && character.defaultCurrentHp !== character.defaultMaxHp && (
@@ -1376,6 +1417,15 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
     }
   };
 
+  const handleInlineTempHp = async (participantId, value) => {
+    const n = Math.max(0, parseInt(value, 10) || 0);
+    try {
+      await updateParticipant(encounter, participantId, { tempHp: n }, buildCtx(encounterPath));
+    } catch (err) {
+      showToast('Failed to update Temp HP.');
+    }
+  };
+
   const handleDeathSaveChange = async (participantId, outcome) => {
     if (!db) return;
     try {
@@ -1778,7 +1828,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                       {isDead && <span className="ml-2 px-2 py-0.5 rounded bg-red-950 border border-red-500 text-red-200 text-xs font-bold">DEAD</span>}
                     </p>
                     <div className={`text-sm ${isCurrentTurn && !encounter.isPaused ? 'text-green-100' : 'text-stone-200'} flex items-center gap-2`}>
-                      <span className="inline-flex items-center gap-1">
+                      <span className="inline-flex items-center px-0.5 border border-amber-500 bg-stone-950 text-amber-300 rounded">
                         <label htmlFor={`init-${p.id}`} className="sr-only">Initiative</label>
                         <input
                           type="number"
@@ -1792,7 +1842,7 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                           onFocus={(e) => { e.target.select(); handleFieldFocus(p.id, 'Initiative'); }}
                           onBlur={(e) => { if (e.target.value !== String(p.initiative)) handleInlineInitiative(p.id, e.target.value); handleFieldBlur(); }}
                           onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); }}
-                          className="w-7 bg-transparent text-white text-base text-center border-b border-transparent hover:border-stone-500 focus:border-amber-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                          className="w-7 bg-transparent text-amber-300 text-lg font-bold text-center focus:outline-none disabled:text-amber-300 disabled:opacity-100 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
                           aria-label={`Initiative for ${p.name}`}
                         />
                       </span>
@@ -1816,10 +1866,23 @@ function ParticipantManager({ encounter, encounterPath, campaignCharacters, camp
                           onFocus={(e) => { e.target.select(); handleFieldFocus(p.id, 'Max HP'); }}
                           onBlur={(e) => { if (e.target.value !== String(p.maxHp)) handleInlineMaxHp(p.id, e.target.value); handleFieldBlur(); }}
                           onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); if (e.key === 'Escape') e.target.value = p.maxHp; }}
-                          className="w-10 bg-transparent text-stone-400 text-base text-center border-b border-transparent hover:border-stone-500 focus:border-red-500 focus:outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                          className="w-10 bg-transparent text-stone-200 text-base text-center border-b border-transparent hover:border-stone-400 focus:border-red-500 focus:outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
                           aria-label={`Max HP for ${p.name}`}
                         />
                       </span>
+                      <span className="inline-flex items-baseline gap-0.5 ml-1" title="Temporary HP">
+                        <span className="text-[10px] text-cyan-400 font-semibold tracking-wide">+</span>
+                        <input
+                          type="number"
+                          defaultValue={p.tempHp || 0}
+                          key={`temphp-${p.tempHp || 0}`}
+                          onFocus={(e) => { e.target.select(); handleFieldFocus(p.id, 'Temp HP'); }}
+                          onBlur={(e) => { if (e.target.value !== String(p.tempHp || 0)) handleInlineTempHp(p.id, e.target.value); handleFieldBlur(); }}
+                          onKeyDown={(e) => { if (e.key === 'Enter') e.target.blur(); if (e.key === 'Escape') e.target.value = p.tempHp || 0; }}
+                          className={`w-7 bg-transparent text-base text-center border-b focus:outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none ${(p.tempHp || 0) > 0 ? 'text-cyan-200 border-cyan-500' : 'text-stone-300 border-transparent hover:border-stone-400'}`}
+                          aria-label={`Temp HP for ${p.name}`}
+                        />
+                      </span>
                       <span className="ml-auto inline-flex items-center gap-1">
                         {participantStatus === 'dead' && (
                           <button onClick={() => handleRevive(p.id)} className="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded bg-emerald-800 hover:bg-emerald-700 text-white" title="Revive (clear dead status)">
-- 
2.34.1