feat(initiative-tracker): DM HP control, status effects, current turn

- Hide monster HP from players: the DM now redacts monster hp from every
  snapshot sent over the wire, so joined clients never receive it (the DM still
  sees full health bars).
- DM combat controls per combatant (gear panel): adjust HP with an amount field
  plus Damage/Heal (clamped 0..max), and toggle the 15 standard 5e conditions
  as chips or add a custom one.
- Current turn is shown everywhere: the DM turn bar names the active combatant,
  and players get a banner ("X's turn" / "Your turn!" / not started).

Co-Authored-By: Claude Opus 4.8 <[email protected]>

Author: Dunky13

initiative-tracker/src/domain/conditions.ts

@@ -0,0 +1,18 @@
+/** The 15 standard D&D 5e conditions, for the DM's quick-toggle status picker. */
+export const CONDITIONS = [
+  'Blinded',
+  'Charmed',
+  'Deafened',
+  'Exhaustion',
+  'Frightened',
+  'Grappled',
+  'Incapacitated',
+  'Invisible',
+  'Paralyzed',
+  'Petrified',
+  'Poisoned',
+  'Prone',
+  'Restrained',
+  'Stunned',
+  'Unconscious',
+] as const;

initiative-tracker/src/store/dmStore.ts

@@ -9,6 +9,19 @@ import { createRoom, type Room } from '../net/room';
 
 const makeCode = customAlphabet('ABCDEFGHJKLMNPQRSTUVWXYZ23456789', 4);
 
+/**
+ * Player-facing view of the encounter. Monster HP is the DM's secret, so it is
+ * stripped before any snapshot leaves the DM — players never receive it.
+ */
+function redactForPlayers(state: EncounterState): EncounterState {
+  return {
+    ...state,
+    combatants: state.combatants.map((c) =>
+      c.kind === 'monster' && c.hp ? { ...c, hp: null } : c,
+    ),
+  };
+}
+
 interface DmStore {
   roomCode: string;
   encounter: EncounterState;
@@ -38,26 +51,26 @@ export const useDmStore = create<DmStore>()(
           ) {
             const next = applyAction(get().encounter, action);
             set({ encounter: next });
-            room.broadcast(next);
+            room.broadcast(redactForPlayers(next));
           }
         });
-        room.onPeerJoin(() => room.broadcast(get().encounter));
+        room.onPeerJoin(() => room.broadcast(redactForPlayers(get().encounter)));
         set({ room });
       },
       dispatch: (action) => {
         const next = applyAction(get().encounter, action);
         set({ encounter: next });
-        get().room?.broadcast(next);
+        get().room?.broadcast(redactForPlayers(next));
       },
       next: () => {
         const next = advanceTurn(get().encounter);
         set({ encounter: next });
-        get().room?.broadcast(next);
+        get().room?.broadcast(redactForPlayers(next));
       },
       prev: () => {
         const next = prevTurn(get().encounter);
         set({ encounter: next });
-        get().room?.broadcast(next);
+        get().room?.broadcast(redactForPlayers(next));
       },
     }),
     {

initiative-tracker/src/styles/app.css

@@ -347,6 +347,37 @@ ol, ul { list-style: none; padding: 0; }
   color: oklch(0.85 0.08 24);
 }
 
+/* ── DM manage panel (HP adjust + status effects) ──────────────────────────*/
+.manage {
+  grid-column: 1 / -1;
+  margin-top: var(--sp-2);
+  padding-top: var(--sp-3);
+  border-top: 1px solid var(--ink-700);
+  display: flex; flex-direction: column; gap: var(--sp-3);
+  animation: rise 0.2s ease both;
+}
+.manage__hp, .manage__status { display: flex; flex-direction: column; gap: var(--sp-2); }
+.hpadjust { display: flex; gap: var(--sp-2); }
+.hpadjust .input { flex: 0 0 4.5rem; }
+.hpadjust .btn { flex: 1; padding-inline: var(--sp-2); }
+
+.cond-grid { display: flex; flex-wrap: wrap; gap: 0.35rem; }
+.cond-chip {
+  font-size: 0.72rem; letter-spacing: 0.02em;
+  padding: 0.3em 0.7em; min-height: 2.1rem;
+  border-radius: 999px;
+  background: var(--ink-900);
+  border: 1px solid var(--ink-700);
+  color: var(--parchment-dim);
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+.cond-chip:hover { color: var(--parchment); border-color: var(--ink-600); }
+.cond-chip.is-on {
+  background: color-mix(in oklch, var(--danger) 22%, var(--ink-900));
+  border-color: color-mix(in oklch, var(--danger) 48%, var(--ink-700));
+  color: oklch(0.87 0.09 24);
+}
+
 /* ── HP stepper (player) ───────────────────────────────────────────────────*/
 .stepper { display: flex; align-items: stretch; gap: var(--sp-2); }
 .stepper .input { font-size: var(--step-1); font-weight: 600; }
@@ -391,20 +422,54 @@ ol, ul { list-style: none; padding: 0; }
 /* ── Turn bar (DM, sticky bottom, thumb reach) ─────────────────────────────*/
 .turnbar {
   position: sticky; bottom: 0; z-index: 20;
-  display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: var(--sp-2);
+  display: flex; flex-direction: column; gap: var(--sp-2);
   padding: var(--sp-3);
   padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0));
   margin: 0 calc(var(--sp-3) * -1) calc(var(--sp-3) * -1);
   background: color-mix(in oklch, var(--ink-900) 90%, transparent);
   backdrop-filter: blur(10px);
   border-top: 1px solid var(--ink-700);
 }
+.turnbar__now {
+  display: flex; align-items: baseline; gap: var(--sp-2);
+  padding: 0.1rem var(--sp-2);
+}
+.turnbar__now strong {
+  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1);
+  color: var(--ember-bright); letter-spacing: 0.01em;
+}
+.turnbar__cue { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); }
+.turnbar__idle { font-size: var(--step--1); color: var(--muted); font-style: italic; }
+.turnbar__controls {
+  display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: var(--sp-2);
+}
 .turnbar__round {
   display: flex; flex-direction: column; line-height: 1; padding-inline: var(--sp-2);
 }
 .turnbar__round span { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); }
 .turnbar__round strong { font-family: var(--font-display); font-size: var(--step-2); color: var(--gold); }
 
+/* ── Current-turn banner (player) ──────────────────────────────────────────*/
+.turn-now {
+  text-align: center;
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: var(--step-1);
+  letter-spacing: 0.01em;
+  padding: var(--sp-3);
+  border-radius: var(--radius);
+  background: var(--ink-850);
+  border: 1px solid var(--ink-700);
+  color: var(--parchment-dim);
+}
+.turn-now--you {
+  color: oklch(0.2 0.04 47);
+  background: linear-gradient(180deg, var(--ember-bright), var(--ember));
+  border-color: oklch(0.55 0.16 47);
+  box-shadow: 0 10px 26px -12px oklch(0.69 0.17 47 / 0.8);
+  animation: rise 0.3s ease both;
+}
+
 /* ── Hero (player initiative) ──────────────────────────────────────────────*/
 .hero { text-align: center; gap: var(--sp-4); }
 .hero__value {