V1.28.0: free roam, and completed encounters out of the way

- Free roam: a third kind of encounter. The DM ticks the nearby locations,
  the whole party is in it from the start, and each player sends their own
  character to a place
- A place shows who is found there and what is for sale; a character shops
  (a place's own shop, or an NPC's wares and exchange) only where they stand
- Locations can have a shop of their own; an NPC can be "found at" a location
- Completed encounters are hidden from the campaign's list until "Show
  completed" is ticked; moving an encounter works on the list as shown

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

frontend/package.json

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

frontend/src/api/queries.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQuery, useQueryClient, type QueryClient } from '@tanstack/react-query';
 import { apiClient } from './client';
 import type {
+  Ability,
   ActionPatch,
   ActionSource,
   BuildOptions,
@@ -646,6 +647,11 @@ export function usePatchPoolEntry(campaignId: string, pool: Pool) {
       exchangeCash?: number | null;
       effects?: GearEffect[];
       effectNote?: string | null;
+      // A spell: how it lands in a battle. An NPC: where they are found.
+      attackRoll?: boolean;
+      saveAbility?: Ability | null;
+      halfOnSave?: boolean;
+      locationId?: string | null;
     }) =>
       (await apiClient.patch(`/campaigns/${campaignId}/${pool}/${id}`, data)).data,
     onSuccess: () => {
@@ -840,7 +846,7 @@ export function useCreateEncounter(campaignId: string) {
   const qc = useQueryClient();
   return useMutation({
     // Where it goes in the campaign's order: the top, the bottom (the default), or straight after another.
-    mutationFn: async (data: { name: string; mode?: EncounterMode; position?: 'TOP' | 'BOTTOM'; afterEncounterId?: string }) =>
+    mutationFn: async (data: { name: string; mode?: EncounterMode; position?: 'TOP' | 'BOTTOM'; afterEncounterId?: string; placeIds?: string[] }) =>
       (await apiClient.post<{ encounter: Encounter }>(`/campaigns/${campaignId}/encounters`, data)).data.encounter,
     onSuccess: () => qc.invalidateQueries({ queryKey: ['campaign', campaignId, 'encounters'] }),
   });
@@ -986,6 +992,28 @@ export function useSetTargets(encounterId: string) {
   });
 }
 
+// Free roam: the DM sets the places the party can go to in the scene.
+export function useSetPlaces(encounterId: string) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async (locationIds: string[]) => (await apiClient.put(`/encounters/${encounterId}/places`, { locationIds })).data,
+    onSuccess: (data) => keepEncounter(qc, encounterId, data),
+  });
+}
+
+// Free roam: a character goes to one of the scene's places.
+export function useVisitPlace(encounterId: string) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async (data: { characterId: string; locationId: string }) => (await apiClient.post(`/encounters/${encounterId}/visit`, data)).data,
+    onSuccess: (data, { characterId }) => {
+      keepEncounter(qc, encounterId, data);
+      qc.invalidateQueries({ queryKey: ['character', characterId] });
+      qc.invalidateQueries({ queryKey: ['campaign'] }); // the places a player knows, and where the party is
+    },
+  });
+}
+
 // Declares an attack or a spell: by whoever is on turn unless an actor is
 // named, at the targets marked unless some are given.
 export function useDeclareAction(encounterId: string) {
@@ -1121,7 +1149,7 @@ export function useCreateNpc(campaignId: string) {
 // in progress, characters in the scene change money and buy
 // --------------------------------------------------------------------------
 
-export type NewWare = ({ npcId: string } | { encounterId: string }) &
+export type NewWare = ({ npcId: string } | { encounterId: string } | { locationId: string }) &
   ({ weaponId: string } | { itemId: string }) & { price: number; currency: Currency; level?: number; stock: number | null };
 
 // Wares reach the screen inside the NPC list and inside each encounter.

frontend/src/api/types.ts

@@ -584,7 +584,8 @@ export interface MonsterAttack {
 }
 
 export type EncounterStatus = 'PLANNING' | 'ACTIVE' | 'COMPLETE';
-export type EncounterMode = 'BATTLE' | 'QUEST';
+// A fight in initiative order, a quest scene around NPCs, or free roam between places the DM has laid out.
+export type EncounterMode = 'BATTLE' | 'QUEST' | 'FREE_ROAM';
 export type NpcDisposition = 'FRIENDLY' | 'NEUTRAL' | 'HOSTILE';
 
 // Something for sale: a weapon or item from the campaign pools, at a price.
@@ -594,6 +595,7 @@ export interface SaleOffer {
   campaignId: string;
   npcId: string | null;
   encounterId: string | null;
+  locationId: string | null; // a shop that is always at this place
   weaponId: string | null;
   itemId: string | null;
   price: number; // for one, in `currency`
@@ -616,6 +618,18 @@ export interface NpcPublic {
   exchangeGold: number | null;
   exchangeCash: number | null;
   wares?: SaleOffer[]; // what they have for sale
+  locationId?: string | null; // where they are usually found: met there in a free-roam scene
+}
+
+// A place the party can go to in a free-roam scene: who is found there, what
+// is for sale there, and which of the characters in the scene are there now.
+export interface FreeRoamPlace {
+  id: string;
+  name: string;
+  description: string | null;
+  wares: SaleOffer[];
+  npcs: (NpcPublic & Partial<Npc>)[];
+  here: { characterId: string; name: string; userId: string | null }[];
 }
 
 // The DM's full record. dmNotes and the combat stats never reach a player.
@@ -802,7 +816,8 @@ export interface EncounterParticipant {
   // hidden from the players. Only the DM is ever sent one of these.
   hidden: boolean;
   npcId: string | null;
-  character?: { id: string; name: string; userId: string | null } | null;
+  // currentLocationId is sent in a free-roam scene only: where they have gone.
+  character?: { id: string; name: string; userId: string | null; currentLocationId?: string | null } | null;
   // The DM gets the whole stat block; players only the id and name.
   monster?: ({ id: string; name: string } & Partial<Monster>) | null;
   npc?: (NpcPublic & Partial<Npc>) | null;
@@ -838,6 +853,7 @@ export interface Encounter {
   // hidden ones), and the last few that landed.
   actions?: EncounterAction[];
   recentActions?: EncounterAction[];
+  places?: FreeRoamPlace[]; // a free-roam scene's places; absent for any other kind
   rewards?: EncounterReward[]; // players only receive the awarded ones
   wares?: SaleOffer[]; // for sale at the scene itself, not by an NPC in it
 }

frontend/src/components/TradePanel.tsx

@@ -9,6 +9,7 @@ import type { CharacterSummary, Encounter, Item, SaleOffer, Weapon } from '../ap
 
 type ExchangeSide = 'GOLD' | 'CASH';
 
+// (A free-roam scene has its own panel: components/encounter/FreeRoam.tsx.)
 // Trade in a quest: changing gold and cash with an NPC who does that, at
 // their own rate, and buying what the NPCs in the scene — or the scene itself
 // — have for sale. Everyone sees what is on offer; a player trades for their

frontend/src/components/Wares.tsx

@@ -73,8 +73,8 @@ function WareRow({ campaignId, ware, onError }: { campaignId: string; ware: Sale
   );
 }
 
-// The DM's list of what one seller has for sale — an NPC, or an encounter
-// itself — with a form to put something from the campaign pools up for sale.
+// The DM's list of what one seller has for sale — an NPC, an encounter
+// itself, or a location (a shop that is always there) — with a form to put something from the campaign pools up for sale.
 export function WaresEditor({
   campaignId,
   seller,
@@ -84,7 +84,7 @@ export function WaresEditor({
   onError,
 }: {
   campaignId: string;
-  seller: { npcId: string } | { encounterId: string };
+  seller: { npcId: string } | { encounterId: string } | { locationId: string };
   wares: SaleOffer[];
   weapons: Weapon[];
   items: Item[];

frontend/src/components/campaign/EntryDetail.tsx

@@ -1,5 +1,5 @@
 import { useState, type ReactNode } from 'react';
-import { useDeleteMonster, useDeletePoolEntry, usePatchPoolEntry, useUpdateMonster } from '../../api/queries';
+import { useCampaignLocations, useDeleteMonster, useDeletePoolEntry, usePatchPoolEntry, useUpdateMonster } from '../../api/queries';
 import { Modal } from '../Modal';
 import { NumberInput } from '../NumberInput';
 import { ErrorBanner } from '../Spinner';
@@ -230,6 +230,7 @@ function MonsterDetail({ campaignId, monster, added, onClose }: { added: ReactNo
 function NpcDetail({ campaignId, npc, weapons, items, added, onClose }: { added: ReactNode; campaignId: string; npc: Npc; weapons: Weapon[]; items: Item[]; onClose: () => void }) {
   const patch = usePatchPoolEntry(campaignId, 'npcs');
   const remove = useDeletePoolEntry(campaignId, 'npcs');
+  const { data: locations } = useCampaignLocations(campaignId);
   const [gold, setGold] = useState(npc.exchangeGold ? String(npc.exchangeGold) : '');
   const [cash, setCash] = useState(npc.exchangeCash ? String(npc.exchangeCash) : '');
   const [error, setError] = useState<string | null>(null);
@@ -263,6 +264,26 @@ function NpcDetail({ campaignId, npc, weapons, items, added, onClose }: { added:
         </div>
       )}
 
+      <div className="section-label mt-md">Found at</div>
+      <p className="combatant-sub" style={{ marginTop: 0 }}>
+        Where the party meets {npc.name} in a free-roam scene: whoever goes to that place can talk and trade with them there. (In a quest, they
+        are met when you add them to it.)
+      </p>
+      <select
+        aria-label={`Where ${npc.name} is found`}
+        value={npc.locationId ?? ''}
+        disabled={patch.isPending}
+        onChange={(e) => patch.mutate({ id: npc.id, locationId: e.target.value || null }, { onError })}
+        style={{ maxWidth: 320 }}
+      >
+        <option value="">Nowhere in particular</option>
+        {(locations ?? []).map((loc) => (
+          <option key={loc.id} value={loc.id}>
+            📍 {loc.name}
+          </option>
+        ))}
+      </select>
+
       <div className="section-label mt-md">Changes money</div>
       <p className="combatant-sub" style={{ marginTop: 0 }}>
         Set a rate and the party can change gold into cash, or cash into gold, with {npc.name}. Silver and copper are not

frontend/src/components/encounter/FreeRoam.tsx

@@ -0,0 +1,266 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useBuyWare, useExchangeWithNpc, useSetPlaces, useVisitPlace } from '../../api/queries';
+import { NumberInput } from '../NumberInput';
+import { WaresEditor } from '../Wares';
+import { stockLabel, wareName } from '../../lib/wares';
+import { formatMoney, formatPurse } from '../../lib/format';
+import type { CharacterSummary, Encounter, FreeRoamPlace, Item, Location, SaleOffer, Weapon } from '../../api/types';
+
+type ExchangeSide = 'GOLD' | 'CASH';
+
+// A free-roam scene: the places the DM has laid out, each with who is found
+// there and what is for sale, and who of the party is there now. A player
+// sends their own character to a place and shops where they stand; the DM
+// can send anyone, picks which of the campaign's locations are part of the
+// scene, and stocks each place's own shop here. (What an NPC sells, and where
+// they are found, is set on the NPC, on the campaign page.)
+export function FreeRoamPanel({
+  encounter,
+  isDM,
+  userId,
+  characters,
+  locations,
+  weapons,
+  items,
+  onError,
+}: {
+  encounter: Encounter;
+  isDM: boolean;
+  userId: string | undefined;
+  characters: CharacterSummary[];
+  locations: Location[]; // the campaign's, for the DM to pick places from
+  weapons: Weapon[];
+  items: Item[];
+  onError: (err: unknown) => void;
+}) {
+  const setPlaces = useSetPlaces(encounter.id);
+  const visit = useVisitPlace(encounter.id);
+  const buy = useBuyWare(encounter.id);
+  const exchange = useExchangeWithNpc(encounter.id);
+  const [roamerId, setRoamerId] = useState('');
+  const [done, setDone] = useState<string | null>(null);
+  const [amounts, setAmounts] = useState<Record<string, string>>({});
+  const [sides, setSides] = useState<Record<string, ExchangeSide>>({});
+
+  const places = encounter.places ?? [];
+  const open = encounter.status === 'ACTIVE';
+  // Who can be moved and can shop: a player's own characters in the scene; for the DM, anyone's.
+  const roamers = (encounter.participants ?? []).flatMap((p) => (p.character && !p.hidden && (isDM || p.character.userId === userId) ? [p.character] : []));
+  const roamer = roamers.find((c) => c.id === roamerId) ?? roamers[0];
+  const purse = characters.find((c) => c.id === roamer?.id);
+  const whereabouts = places.find((place) => place.here.some((h) => h.characterId === roamer?.id));
+  const busy = visit.isPending || buy.isPending || exchange.isPending;
+  const placeIds = places.map((p) => p.id);
+
+  function go(place: FreeRoamPlace) {
+    if (!roamer) return;
+    setDone(null);
+    visit.mutate({ characterId: roamer.id, locationId: place.id }, { onError, onSuccess: () => setDone(`${roamer.name} goes to ${place.name}.`) });
+  }
+
+  function handleBuy(ware: SaleOffer) {
+    if (!roamer) return;
+    setDone(null);
+    buy.mutate(
+      { wareId: ware.id, characterId: roamer.id },
+      { onError, onSuccess: () => setDone(`${roamer.name} bought ${(ware.weapon ?? ware.item)?.name} for ${formatMoney(ware.price, ware.currency, true)}.`) }
+    );
+  }
+
+  const wareRow = (ware: SaleOffer, atPlace: boolean) => (
+    <div key={ware.id} className="reward-row">
+      <div className="flex-between">
+        <span>
+          <strong>{wareName(ware)}</strong>
+          <span className="combatant-sub"> · {stockLabel(ware)}</span>
+        </span>
+        <button
+          className="btn"
+          disabled={!open || !roamer || !atPlace || ware.stock === 0 || busy}
+          title={!open ? 'The scene has not begun' : !atPlace ? `${roamer?.name ?? 'Your character'} has to go here first` : undefined}
+          onClick={() => handleBuy(ware)}
+        >
+          Buy · {formatMoney(ware.price, ware.currency)}
+        </button>
+      </div>
+      {ware.item?.description && <div className="combatant-sub">{ware.item.description}</div>}
+    </div>
+  );
+
+  return (
+    <div>
+      <div className="card">
+        <div className="card-title">
+          <span>🧭 Places to go</span>
+          {!open && <span className="badge">{encounter.status === 'PLANNING' ? 'Not begun yet' : 'Over'}</span>}
+        </div>
+        {roamers.length > 0 ? (
+          <div className="flex-row flex-wrap gap-sm">
+            <label className="flex-row gap-sm" style={{ flex: 1, minWidth: 180 }}>
+              {roamers.length > 1 ? 'Moving' : 'You are'}
+              <select aria-label="Which character is moving and shopping" value={roamer?.id ?? ''} onChange={(e) => setRoamerId(e.target.value)} style={{ flex: 1 }}>
+                {roamers.map((c) => (
+                  <option key={c.id} value={c.id}>
+                    {c.name}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <span className="combatant-sub">📍 {whereabouts ? whereabouts.name : 'not at any of these places yet'}</span>
+            {purse && purse.gold !== null && <span className="mono">{formatPurse(purse)}</span>}
+          </div>
+        ) : (
+          <p className="combatant-sub" style={{ margin: 0 }}>
+            {isDM ? 'No characters are in this scene yet: add them from "Add to the scene".' : 'Your character has to be in the scene to go anywhere.'}
+          </p>
+        )}
+        {done && <p className="combatant-sub" style={{ marginBottom: 0 }}>✓ {done}</p>}
+        {places.length === 0 && (
+          <p className="combatant-sub" style={{ marginBottom: 0 }}>
+            {isDM ? 'No places yet. Tick the locations the party can go to, below.' : 'The DM has not opened any places yet.'}
+          </p>
+        )}
+
+        {isDM && (
+          <details className="mt-sm" open={places.length === 0}>
+            <summary className="section-label" style={{ cursor: 'pointer' }}>
+              Places in this scene ({places.length} of {locations.length} locations)
+            </summary>
+            {locations.length === 0 ? (
+              <p className="combatant-sub">
+                This campaign has no locations yet. Add some under Locations on the <Link to={`/campaigns/${encounter.campaignId}`}>campaign page</Link>.
+              </p>
+            ) : (
+              <div className="flex-row flex-wrap gap-sm mt-sm">
+                {locations.map((loc) => {
+                  const included = placeIds.includes(loc.id);
+                  return (
+                    <label key={loc.id} className="checkbox-row" title={loc.description ?? undefined}>
+                      <input
+                        type="checkbox"
+                        checked={included}
+                        disabled={setPlaces.isPending}
+                        onChange={() => setPlaces.mutate(included ? placeIds.filter((id) => id !== loc.id) : [...placeIds, loc.id], { onError })}
+                      />
+                      📍 {loc.name}
+                    </label>
+                  );
+                })}
+              </div>
+            )}
+          </details>
+        )}
+      </div>
+
+      <div className="place-grid">
+        {places.map((place) => {
+          const atPlace = Boolean(roamer) && place.here.some((h) => h.characterId === roamer?.id);
+          return (
+            <div key={place.id} className={`card place-card${atPlace ? ' is-here' : ''}`}>
+              <div className="card-title">
+                <span>📍 {place.name}</span>
+                {atPlace ? (
+                  <span className="badge badge-live">{roamer?.name} is here</span>
+                ) : (
+                  <button className="btn btn-primary" disabled={!open || !roamer || busy} onClick={() => go(place)}>
+                    Go here
+                  </button>
+                )}
+              </div>
+              {place.description && <p style={{ margin: '0 0 0.4rem', whiteSpace: 'pre-wrap' }}>{place.description}</p>}
+              <div className="combatant-sub">{place.here.length > 0 ? `Here now: ${place.here.map((h) => h.name).join(', ')}` : 'Nobody from the party is here.'}</div>
+
+              {place.npcs.map((npc) => {
+                const rate = { GOLD: npc.exchangeGold ?? 0, CASH: npc.exchangeCash ?? 0 };
+                const changes = rate.GOLD > 0 && rate.CASH > 0;
+                const from = sides[npc.id] ?? 'GOLD';
+                const to = from === 'GOLD' ? 'CASH' : 'GOLD';
+                const amount = Math.floor(Number(amounts[npc.id]));
+                const whole = changes && amount > 0 && amount % rate[from] === 0;
+                return (
+                  <div key={npc.id} className="mt-sm">
+                    <div className="section-label">
+                      🧑 {npc.name}
+                      {npc.role ? `, ${npc.role}` : ''}
+                    </div>
+                    {npc.description && <p className="combatant-sub" style={{ margin: 0, whiteSpace: 'pre-wrap' }}>{npc.description}</p>}
+                    {npc.dmNotes && (
+                      <p className="combatant-sub" style={{ margin: 0 }} title="Only you can see this">
+                        🔒 {npc.dmNotes}
+                      </p>
+                    )}
+                    {(npc.wares ?? []).map((ware) => wareRow(ware, atPlace))}
+                    {changes && (
+                      <div className="reward-row">
+                        <span className="combatant-sub">
+                          💱 Changes {formatMoney(rate.GOLD, 'GOLD', true)} for {formatMoney(rate.CASH, 'CASH')}, either way.
+                        </span>
+                        <div className="flex-row flex-wrap gap-sm mt-sm">
+                          <NumberInput
+                            min={1}
+                            max={1000000}
+                            placeholder="Amount"
+                            aria-label={`How much to change with ${npc.name}`}
+                            value={amounts[npc.id] ?? ''}
+                            onChange={(e) => setAmounts((a) => ({ ...a, [npc.id]: e.target.value }))}
+                            style={{ width: 90 }}
+                          />
+                          <select aria-label={`What to hand ${npc.name}`} value={from} onChange={(e) => setSides((s) => ({ ...s, [npc.id]: e.target.value as ExchangeSide }))}>
+                            <option value="GOLD">gold into cash</option>
+                            <option value="CASH">cash into gold</option>
+                          </select>
+                          <button
+                            className="btn"
+                            disabled={!open || !roamer || !atPlace || !whole || busy}
+                            onClick={() => {
+                              if (!roamer) return;
+                              setDone(null);
+                              exchange.mutate(
+                                { characterId: roamer.id, npcId: npc.id, from, amount },
+                                {
+                                  onError,
+                                  onSuccess: ({ received, currency }) => {
+                                    setDone(`${roamer.name} changed ${formatMoney(amount, from, true)} for ${formatMoney(received, currency, true)} with ${npc.name}.`);
+                                    setAmounts((a) => ({ ...a, [npc.id]: '' }));
+                                  },
+                                }
+                              );
+                            }}
+                          >
+                            {whole ? `Get ${formatMoney((amount / rate[from]) * rate[to], to, true)}` : 'Exchange'}
+                          </button>
+                        </div>
+                      </div>
+                    )}
+                    {(npc.wares ?? []).length === 0 && !changes && <div className="combatant-sub">Nothing to sell: someone to talk to.</div>}
+                  </div>
+                );
+              })}
+
+              {place.wares.length > 0 && (
+                <div className="mt-sm">
+                  <div className="section-label">🛒 For sale here</div>
+                  {place.wares.map((ware) => wareRow(ware, atPlace))}
+                </div>
+              )}
+              {place.npcs.length === 0 && place.wares.length === 0 && !isDM && <div className="combatant-sub mt-sm">Nothing to buy here.</div>}
+
+              {isDM && (
+                <details className="mt-sm">
+                  <summary className="section-label" style={{ cursor: 'pointer' }}>
+                    Set up this place’s own shop
+                  </summary>
+                  <p className="combatant-sub" style={{ marginTop: '0.3rem' }}>
+                    Sold here whenever this place is part of a free-roam scene. To have an NPC found here, set their location on the NPC (campaign page).
+                  </p>
+                  <WaresEditor campaignId={encounter.campaignId} seller={{ locationId: place.id }} wares={place.wares} weapons={weapons} items={items} onError={onError} />
+                </details>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

frontend/src/index.css

@@ -978,6 +978,22 @@ input[type='radio'] {
   margin-left: 0.4rem;
 }
 
+/* Free roam: a card per place the party can go to. */
+.place-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 0.9rem;
+  margin-top: 0.9rem;
+  align-items: start;
+}
+.place-card {
+  margin: 0;
+}
+.place-card.is-here {
+  border-color: var(--accent-strong);
+  box-shadow: 0 0 14px rgba(201, 162, 39, 0.2);
+}
+
 /* What the scene is waiting on, in a sentence. */
 .cue-card {
   display: flex;

frontend/src/pages/CampaignHomePage.tsx

@@ -68,6 +68,17 @@ function storedEncounterSort(): EncounterSort {
 const ENCOUNTER_PLACE_KEY = 'dnd_encounter_place';
 const AFTER = 'after:';
 
+// Finished encounters are left off the list until asked for; the choice is remembered.
+const SHOW_COMPLETED_KEY = 'dnd_show_completed_encounters';
+
+function storedShowCompleted(): boolean {
+  try {
+    return localStorage.getItem(SHOW_COMPLETED_KEY) === '1';
+  } catch {
+    return false;
+  }
+}
+
 function storedEncounterPlace(): string {
   return localStorage.getItem(ENCOUNTER_PLACE_KEY) === 'TOP' ? 'TOP' : 'BOTTOM';
 }
@@ -80,7 +91,7 @@ function sortEncounters(encounters: Encounter[], sort: EncounterSort): Encounter
     custom: () => 0,
     name: (a, b) => a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' }),
     status: (a, b) => STATUS_RANK[a.status] - STATUS_RANK[b.status],
-    type: (a, b) => Number(a.mode === 'QUEST') - Number(b.mode === 'QUEST'),
+    type: (a, b) => MODE_RANK[a.mode] - MODE_RANK[b.mode],
     newest: (a, b) => time(b) - time(a),
     oldest: (a, b) => time(a) - time(b),
   };
@@ -135,7 +146,8 @@ function CharacterRow({ character, isDM, mine = false, onDelete }: { character:
   );
 }
 
-const MODE_LABELS: Record<EncounterMode, string> = { BATTLE: '⚔ Battle', QUEST: '📜 Quest' };
+const MODE_LABELS: Record<EncounterMode, string> = { BATTLE: '⚔ Battle', QUEST: '📜 Quest', FREE_ROAM: '🧭 Free roam' };
+const MODE_RANK: Record<EncounterMode, number> = { BATTLE: 0, QUEST: 1, FREE_ROAM: 2 };
 
 // A long note, cut down to a line for a search result.
 const snippet = (text: string) => (text.length > 110 ? `${text.slice(0, 110).trimEnd()}…` : text);
@@ -193,13 +205,16 @@ export function CampaignHomePage() {
   const [showDelete, setShowDelete] = useState(false);
   const [resting, setResting] = useState(false);
   const [levelling, setLevelling] = useState(false);
+  const [showCompleted, setShowCompleted] = useState(storedShowCompleted);
   const [deleteConfirmName, setDeleteConfirmName] = useState('');
 
   const liveEncounters = encounters?.filter((e) => !e.archivedAt) || [];
   // An encounter picked to go after may have been archived or deleted since.
   const encounterPlace = newEncounterPlace.startsWith(AFTER) && !liveEncounters.some((e) => AFTER + e.id === newEncounterPlace) ? 'BOTTOM' : newEncounterPlace;
   const archivedEncounters = encounters?.filter((e) => e.archivedAt) || [];
-  const shownEncounters = sortEncounters(liveEncounters, encounterSort);
+  // Complete encounters are hidden unless "Show completed" is ticked.
+  const completedCount = liveEncounters.filter((e) => e.status === 'COMPLETE').length;
+  const shownEncounters = sortEncounters(showCompleted ? liveEncounters : liveEncounters.filter((e) => e.status !== 'COMPLETE'), encounterSort);
   const encountersPage = usePagination(shownEncounters, 10);
   const archivedEncountersPage = usePagination(archivedEncounters, 10);
   const sharedNotes = notes?.filter((n) => n.visibility === 'SHARED');
@@ -243,11 +258,15 @@ export function CampaignHomePage() {
     }
   }
 
-  // Swaps an encounter with its neighbour in the campaign's own order.
-  function moveEncounter(index: number, step: -1 | 1) {
+  // Swaps an encounter with its neighbour on the list as shown (which may
+  // leave the completed ones out) in the campaign's own order.
+  function moveEncounter(shownIndex: number, step: -1 | 1) {
+    const neighbour = shownEncounters[shownIndex + step];
+    const moving = shownEncounters[shownIndex];
+    if (!neighbour || !moving) return;
     const ids = liveEncounters.map((e) => e.id);
-    const target = index + step;
-    if (target < 0 || target >= ids.length) return;
+    const index = ids.indexOf(moving.id);
+    const target = ids.indexOf(neighbour.id);
     [ids[index], ids[target]] = [ids[target], ids[index]];
     reorderEncounters.mutate([...ids, ...archivedEncounters.map((e) => e.id)], {
       onError: (err) => setFormError(extractErrorMessage(err)),
@@ -511,6 +530,23 @@ export function CampaignHomePage() {
         <div className="section-block">
           <div className="page-header" style={{ marginBottom: '0.75rem' }}>
             <h2 style={{ fontSize: '1.1rem', margin: 0 }}>Encounters</h2>
+            {completedCount > 0 && (
+              <label className="checkbox-row subtitle" title="Encounters that are complete are left off the list until this is ticked">
+                <input
+                  type="checkbox"
+                  checked={showCompleted}
+                  onChange={(e) => {
+                    setShowCompleted(e.target.checked);
+                    try {
+                      localStorage.setItem(SHOW_COMPLETED_KEY, e.target.checked ? '1' : '0');
+                    } catch {
+                      // Private browsing: the choice lasts as long as the page.
+                    }
+                  }}
+                />
+                Show completed ({completedCount})
+              </label>
+            )}
             {liveEncounters.length > 1 && (
               <label className="flex-row subtitle">
                 Sort by
@@ -542,6 +578,7 @@ export function CampaignHomePage() {
               <select aria-label="Encounter type" value={newEncounterMode} onChange={(e) => setNewEncounterMode(e.target.value as EncounterMode)}>
                 <option value="BATTLE">Battle</option>
                 <option value="QUEST">NPC quest</option>
+                <option value="FREE_ROAM">Free roam</option>
               </select>
               {liveEncounters.length > 0 && (
                 <select
@@ -566,7 +603,7 @@ export function CampaignHomePage() {
                 </select>
               )}
               <button type="submit" className="btn btn-primary" disabled={createEncounter.isPending}>
-                {newEncounterMode === 'QUEST' ? '📜 Start Quest' : '⚔ Start Encounter'}
+                {newEncounterMode === 'QUEST' ? '📜 Start Quest' : newEncounterMode === 'FREE_ROAM' ? '🧭 Start Free Roam' : '⚔ Start Encounter'}
               </button>
             </form>
           )}
@@ -579,6 +616,9 @@ export function CampaignHomePage() {
           {encounters && liveEncounters.length === 0 && (
             <div className="empty-state">{archivedEncounters.length > 0 ? 'Every encounter is archived.' : 'No encounters yet.'}</div>
           )}
+          {liveEncounters.length > 0 && shownEncounters.length === 0 && (
+            <div className="empty-state">Every encounter here is complete. Tick “Show completed” to see them.</div>
+          )}
           {encountersPage.pageItems.map((enc) => {
             // Its place in the whole list, not on this page: that is what moving it changes.
             const index = shownEncounters.indexOf(enc);

frontend/src/pages/EncounterPage.tsx

@@ -33,6 +33,7 @@ import { useAuth } from '../auth/useAuth';
 import { RollFeed } from '../components/RollFeed';
 import { InitiativeTrack } from '../components/encounter/InitiativeTrack';
 import { ActionCard, ActionComposer, RecentActions } from '../components/encounter/ActionPanel';
+import { FreeRoamPanel } from '../components/encounter/FreeRoam';
 import { Spinner, ErrorBanner } from '../components/Spinner';
 import { NumberInput } from '../components/NumberInput';
 import { HpBar } from '../components/HpBar';
@@ -72,7 +73,7 @@ const areaPenalty = (targetCount: number, step: number) => Math.max(0, targetCou
 
 const KIND_LABELS = { CHARACTER: 'PC', MONSTER: 'Monster', NPC: 'NPC' } as const;
 const KIND_BADGES = { CHARACTER: 'badge-player', MONSTER: 'badge-hostile', NPC: 'badge-friendly' } as const;
-const MODE_LABELS: Record<EncounterMode, string> = { BATTLE: '⚔ Battle', QUEST: '📜 Quest' };
+const MODE_LABELS: Record<EncounterMode, string> = { BATTLE: '⚔ Battle', QUEST: '📜 Quest', FREE_ROAM: '🧭 Free roam' };
 const STATUS_LABELS = { PLANNING: 'Planning', ACTIVE: 'In progress', COMPLETE: 'Complete' } as const;
 
 function StatChip({ label, children }: { label: string; children: ReactNode }) {
@@ -1380,6 +1381,7 @@ export function EncounterPage() {
   if (error || !encounter) return <ErrorBanner message="Could not load this encounter." />;
 
   const isBattle = encounter.mode === 'BATTLE';
+  const isRoam = encounter.mode === 'FREE_ROAM';
   const participants = encounter.participants ?? []; // already in initiative order
   // The fallen: dead characters, and monsters and NPCs at 0 HP. Only the DM is
   // sent their cards, and they sit apart from those still in the fight.
@@ -1507,7 +1509,7 @@ export function EncounterPage() {
       <div className="page-header">
         <div>
           <h1>
-            {isBattle ? '⚔' : '📜'} {encounter.name}
+            {isBattle ? '⚔' : isRoam ? '🧭' : '📜'} {encounter.name}
           </h1>
           <div className="flex-row flex-wrap">
             <span className="badge badge-dm">{MODE_LABELS[encounter.mode]}</span>
@@ -1539,6 +1541,7 @@ export function EncounterPage() {
               >
                 <option value="BATTLE">Battle</option>
                 <option value="QUEST">NPC quest</option>
+                <option value="FREE_ROAM">Free roam</option>
               </select>
               <select
                 aria-label="Location"
@@ -1560,7 +1563,7 @@ export function EncounterPage() {
               )}
               {encounter.status === 'PLANNING' && (
                 <button className="btn btn-primary" onClick={() => patchEncounter.mutate({ status: 'ACTIVE' }, fail)}>
-                  {isBattle ? 'Begin Battle' : 'Begin Quest'}
+                  {isBattle ? 'Begin Battle' : isRoam ? 'Begin Roaming' : 'Begin Quest'}
                 </button>
               )}
               {encounter.status === 'ACTIVE' && isBattle && (
@@ -1580,7 +1583,7 @@ export function EncounterPage() {
               )}
               {encounter.status === 'ACTIVE' && (
                 <button className="btn btn-danger" onClick={() => patchEncounter.mutate({ status: 'COMPLETE' }, fail)}>
-                  {isBattle ? 'End Battle' : 'Complete Quest'}
+                  {isBattle ? 'End Battle' : isRoam ? 'End Free Roam' : 'Complete Quest'}
                 </button>
               )}
               {encounter.status === 'COMPLETE' && (
@@ -1654,7 +1657,7 @@ export function EncounterPage() {
 
       {(isDM || encounter.description) && (
         <div className="card">
-          <div className="card-title">{isBattle ? 'The Scene' : 'Quest'}</div>
+          <div className="card-title">{isBattle ? 'The Scene' : isRoam ? 'Where the party is' : 'Quest'}</div>
           {isDM ? (
             <textarea
               key={`description:${encounter.description ?? ''}`}
@@ -1665,7 +1668,9 @@ export function EncounterPage() {
               placeholder={
                 isBattle
                   ? 'Describe the battlefield: terrain, cover, hazards… (shown to players)'
-                  : 'What is being asked of the party, and by whom? (shown to players)'
+                  : isRoam
+                    ? 'Where the party finds itself, and what is around to visit… (shown to players)'
+                    : 'What is being asked of the party, and by whom? (shown to players)'
               }
               onBlur={(e) => {
                 const description = e.target.value.trim() || null;
@@ -1678,6 +1683,19 @@ export function EncounterPage() {
         </div>
       )}
 
+      {isRoam && (
+        <FreeRoamPanel
+          encounter={encounter}
+          isDM={isDM}
+          userId={user?.id}
+          characters={builtCharacters}
+          locations={locations ?? []}
+          weapons={weapons ?? []}
+          items={items ?? []}
+          onError={onError}
+        />
+      )}
+
       <div className="encounter-layout mt-md">
         <div>
           {actions.map((action) => (