The host has a hand on the other seats: once the game begins, Seats makes a transfer phrase for another person's seat, which gives it a new token when claimed, and gives the seat of a player who cannot go on to a bot, which plays the move the seat owes at once and speaks nothing in their name; the person's token opens nothing while it stands in, their page goes to the gallery with the reason and a claim box, and a rematch holds their seat without the stand-in; the server pings every socket and closes one a dead browser left open

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0141G6xqLeNRYEtviLWSB5Up

template/src/lib/components/Hall.svelte

@@ -163,7 +163,7 @@
 		const g = games[held.roomId];
 		if (g === undefined) return 'looking';
 		if (g === null) return 'unreachable';
-		const others = g.seats.filter((s) => s.id !== held.seat).map((s) => (s.bot ? `${s.name} (the bot)` : s.name));
+		const others = g.seats.filter((s) => s.id !== held.seat).map((s) => (s.standIn ? `${s.name} (a bot stands in)` : s.bot ? `${s.name} (the bot)` : s.name));
 		if (!g.state) return `waiting to start${g.seats.length ? ` · ${g.seats.map((s) => s.name).join(', ')}` : ''}`;
 		if (g.over) {
 			if (g.over.winner === held.seat) return 'you won';

template/src/lib/components/SeatsSlip.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+	// The host's hand on the other seats during a game: a transfer phrase for a
+	// player whose browser lost their seat, and a bot to play the seat of one
+	// who cannot go on, until a phrase gives it back.
+	import type { SeatId } from '$lib/game/spec';
+	import type { Room } from '$lib/net/room.svelte';
+
+	let { room, open = $bindable(false) }: { room: Room; open?: boolean } = $props();
+
+	const people = $derived(room.view.seats.filter((s) => s.id !== room.me && (!s.bot || s.standIn)));
+	let asked = $state<SeatId | null>(null);
+	let phrase = $state<{ name: string; phrase: string; expiresAt: number } | null>(null);
+	let error = $state('');
+
+	function close() {
+		open = false;
+		asked = null;
+		error = '';
+	}
+
+	async function makePhrase(seat: SeatId, name: string) {
+		error = '';
+		try {
+			const made = await room.hostPhrase(seat);
+			phrase = { name, ...made };
+			setTimeout(() => {
+				if (phrase?.phrase === made.phrase) phrase = null;
+			}, Math.max(0, made.expiresAt - Date.now()));
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'The phrase could not be made.';
+		}
+	}
+
+	async function standIn(seat: SeatId) {
+		asked = null;
+		if (!(await room.standIn(seat))) error = room.error;
+	}
+
+	function phraseTitle(name: string, standIn: boolean): string {
+		const why = standIn ? `Brings ${name} back from the bot.` : `For when ${name}'s browser lost the seat, or they need to play from another device.`;
+		return `${why} You get four words to pass to them. Within ten minutes, they enter them in the hall, or in the claim box while watching this table, and sit back down as ${name}. The phrase works once, and the browser they used before stops opening the seat.`;
+	}
+</script>
+
+<svelte:window onkeydown={(e) => open && e.key === 'Escape' && close()} />
+
+{#if open}
+	<div class="scrim" role="presentation" onclick={(ev) => ev.target === ev.currentTarget && close()}>
+		<div class="slip" role="dialog" aria-labelledby="seats-heading">
+			<h2 id="seats-heading">The other seats</h2>
+			<p class="muted small">As the host, you can bring a player back to a seat their browser lost, or give the seat of one who cannot go on to a bot, which plays it at once.</p>
+			{#if people.length === 0}
+				<p class="muted">Nobody else at this table is a person.</p>
+			{/if}
+			<ul>
+				{#each people as s (s.id)}
+					<li>
+						<span class="name">{s.name}{#if s.standIn}<span class="muted note">a bot plays for them</span>{/if}</span>
+						<span class="ways">
+							<button type="button" class="quiet" title={phraseTitle(s.name, !!s.standIn)} onclick={() => makePhrase(s.id, s.name)}>{s.standIn ? 'Transfer phrase to take it back' : 'Make a transfer phrase'}</button>
+							{#if !s.standIn && !room.view.over}
+								{#if asked === s.id}
+									<button type="button" class="commit small" onclick={() => standIn(s.id)}>Yes, a bot plays for {s.name}</button>
+									<button type="button" class="link" onclick={() => (asked = null)}>no</button>
+								{:else}
+									<button type="button" class="quiet" title="A bot plays {s.name}'s seat from their next move, and their browser stops opening it. A transfer phrase gives it back." onclick={() => (asked = s.id)}>Give to a bot</button>
+								{/if}
+							{/if}
+						</span>
+					</li>
+				{/each}
+			</ul>
+			{#if phrase}
+				<p class="made">Give {phrase.name} this phrase to claim within ten minutes, in the hall or while watching this table: <b class="phrase">{phrase.phrase}</b>. It works once, and their old link stops opening the seat.</p>
+			{/if}
+			{#if error}<p class="warning">{error}</p>{/if}
+			<div class="actions"><button type="button" class="link" onclick={close}>close</button></div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.scrim {
+		position: fixed;
+		inset: 0;
+		z-index: 20;
+		background: rgba(0, 0, 0, 0.55);
+		display: grid;
+		grid-template-rows: minmax(0, 1fr);
+		place-items: center;
+		padding: 16px;
+	}
+
+	.slip {
+		width: min(100%, 34rem);
+		max-height: 100%;
+		overflow-y: auto;
+		background: var(--slate);
+		border: 1px solid var(--rule-strong);
+		border-radius: 6px;
+		padding: 1rem 1.2rem 1.2rem;
+	}
+
+	h2 {
+		font-size: 1.3rem;
+		margin-bottom: 0.4rem;
+	}
+
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0.8rem 0 0;
+	}
+
+	li {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.4rem 1rem;
+		padding: 0.5rem 0;
+		border-bottom: 1px solid var(--rule);
+	}
+
+	.note {
+		margin-left: 0.5em;
+		font-style: italic;
+		font-size: 0.9em;
+	}
+
+	.ways {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.made {
+		margin-top: 0.8rem;
+	}
+
+	.phrase {
+		letter-spacing: 0.06em;
+		user-select: all;
+	}
+
+	.warning {
+		margin-top: 0.5rem;
+	}
+
+	.actions {
+		margin-top: 0.9rem;
+	}
+</style>

template/src/lib/net/client.ts

@@ -148,6 +148,9 @@ export function makeApi<State, Input>() {
 		rematch: (roomId: string, token: string) =>
 			call<{ roomId: string; seat: SeatId | null; token: string | null; created: boolean }>('POST', `/api/rooms/${roomId}/rematch`, { token }),
 		transfer: (roomId: string, token: string) => call<{ phrase: string; expiresAt: number }>('POST', `/api/rooms/${roomId}/transfer`, { token }),
+		/** The host's phrase for another person's seat; claimed, it re-seats them. */
+		hostPhrase: (roomId: string, token: string, seat: SeatId) => call<{ phrase: string; expiresAt: number }>('POST', `/api/rooms/${roomId}/phrase`, { token, seat }),
+		standIn: (roomId: string, token: string, seat: SeatId) => call<View>('POST', `/api/rooms/${roomId}/standin`, { token, seat }),
 		claim: (phrase: string) => call<{ roomId: string; seat: SeatId; token: string }>('POST', '/api/transfer', { phrase }),
 		report: (roomId: string, token: string, happened: string, expected: string) =>
 			call<{ id: string }>('POST', `/api/rooms/${roomId}/report`, { token, happened, expected }),

template/src/lib/net/room.svelte.ts

@@ -5,7 +5,7 @@
 import { game } from '$lib/game';
 import { SPECTATOR, type SeatId, type TableOptions } from '$lib/game/spec';
 import type { Input, State } from '$lib/game';
-import { makeApi, rememberSeat, watchRoom, type HeldSeat } from './client';
+import { makeApi, rememberSeat, ServerError, watchRoom, type HeldSeat } from './client';
 import { markTalkSeen } from './talk';
 import type { RoomView } from './view';
 
@@ -44,6 +44,8 @@ export class Room {
 	error = $state('');
 	/** A move is on its way to the server. */
 	sending = $state(false);
+	/** The server stopped taking this seat's token while the page was open, and why; the page goes to the gallery. */
+	lost = $state('');
 
 	constructor(view: RoomView<State>, token: string) {
 		this.view = view;
@@ -83,7 +85,10 @@ export class Room {
 		const refresh = () => {
 			fetchView()
 				.then((v) => this.apply(v))
-				.catch((e: Error) => (this.error = e.message));
+				.catch((e: Error) => {
+					if (e instanceof ServerError && e.status === 403 && !this.spectating) this.lost = e.message;
+					else this.error = e.message;
+				});
 		};
 		return watchRoom(this.roomId, this.token, refresh, (open) => (this.connected = open));
 	}
@@ -156,6 +161,16 @@ export class Room {
 		return api.transfer(this.roomId, this.token);
 	}
 
+	/** Host only: a phrase for another person's seat, which gives it a new token when claimed. */
+	hostPhrase(seat: SeatId): Promise<{ phrase: string; expiresAt: number }> {
+		return api.hostPhrase(this.roomId, this.token, seat);
+	}
+
+	/** Host only: a bot plays this person's seat for the rest of the game, until a phrase gives it back. */
+	standIn(seat: SeatId): Promise<boolean> {
+		return this.act(() => api.standIn(this.roomId, this.token, seat), 'The seat could not be given to a bot.');
+	}
+
 	async submit(input: Input): Promise<boolean> {
 		this.sending = true;
 		try {

template/src/lib/net/view.ts

@@ -26,7 +26,8 @@ export interface RoomView<State> {
 	me: SeatId;
 	/** The player who opened the table and may begin the game. */
 	host: SeatId;
-	seats: { id: SeatId; name: string; bot: boolean }[];
+	/** Who sits where; `standIn` marks a person's seat the host gave to a bot, which plays it until they take it back. */
+	seats: { id: SeatId; name: string; bot: boolean; standIn?: true }[];
 	/** Seats that still have to move before the round resolves. */
 	waitingOn: SeatId[];
 	/** Rounds played so far; a move is sent with the count it was made against. */

template/src/routes/guide/+page.svelte

@@ -46,7 +46,7 @@
 	<section id="gallery">
 		<h2>The Peanut Gallery and table talk</h2>
 		<p>A room's link is an invitation to sit while the table is laid and to watch once the game has begun. Anyone who opens it without a seat takes a place in the Peanut Gallery, shown only what every player at the table could see. <em>Table talk</em> is for the players seated, unless the host lets the gallery talk. Then a watcher gives a name, and their lines are marked as the gallery's. A line goes to everyone at the table and everyone in the gallery, and is kept with the game.</p>
-		<p>A seat can follow you to another device. <em>Transfer seat</em> in the masthead gives four words, good for ten minutes, and the hall on the other device claims them. When a game ends, anyone at the table may call for a rematch, which opens a new table for the same company and holds their seats until they are back. While a table is laid, you may challenge the keeper of this site to a seat; the note beside the button gives the hour where they live.</p>
+		<p>A seat can follow you to another device. <em>Transfer seat</em> in the masthead gives four words, good for ten minutes, and the hall on the other device claims them. If your browser loses the seat, the host's <em>Seats</em> makes those words for you. If a player cannot go on, the host can give their seat to a bot there, and the same words bring them back to it. When a game ends, anyone at the table may call for a rematch, which opens a new table for the same company and holds their seats until they are back. While a table is laid, you may challenge the keeper of this site to a seat; the note beside the button gives the hour where they live.</p>
 	</section>
 
 	<section id="first">

template/src/routes/join/[code]/+page.svelte

@@ -4,9 +4,10 @@
 	import Board from '$lib/components/Board.svelte';
 	import Lobby from '$lib/components/Lobby.svelte';
 	import ReportSlip from '$lib/components/ReportSlip.svelte';
+	import SeatsSlip from '$lib/components/SeatsSlip.svelte';
 	import Preferences from '$lib/components/Preferences.svelte';
 	import { rememberSeat, seatFor, seatInLink, ServerError, trustSeat, type HeldSeat } from '$lib/net/client';
-	import { NAME_MAX, playerName, rememberName, Room } from '$lib/net/room.svelte';
+	import { api, NAME_MAX, playerName, rememberName, Room } from '$lib/net/room.svelte';
 
 	const roomId = $derived((page.params.code ?? '').toUpperCase());
 
@@ -21,6 +22,11 @@
 	/** A phrase minted to carry this seat to another device, while it lasts. */
 	let phrase = $state<{ phrase: string; expiresAt: number } | null>(null);
 	let rematching = $state(false);
+	let seatsOpen = $state(false);
+	/** Why this browser's seat no longer opens, when the server said so; shown while watching. */
+	let seatLost = $state('');
+	let claimPhrase = $state('');
+	let claiming = $state(false);
 
 	const link = $derived(`${location.origin}/join/${roomId}`);
 	const watching = $derived(room?.spectating ?? false);
@@ -44,7 +50,17 @@
 			});
 		// Only the server's refusal of the held token lets a link in: a dropped connection is not a lost seat.
 		const refused = (e: unknown) => e instanceof ServerError && e.status === 403;
-		const arrive = held ? Room.resume(id, held).catch((e: Error) => (sent && refused(e) ? take(sent) : Promise.reject(e))) : sent ? take(sent).catch(() => Room.watch(id)) : Room.watch(id);
+		// A held seat the server refuses, with no link to replace it, is watched from the gallery, with the reason.
+		const watchRefused = (e: Error) => {
+			seatLost = e.message;
+			return Room.watch(id);
+		};
+		seatLost = '';
+		const arrive = held
+			? Room.resume(id, held).catch((e: Error) => (sent && refused(e) ? take(sent) : refused(e) ? watchRefused(e) : Promise.reject(e)))
+			: sent
+				? take(sent).catch(() => Room.watch(id))
+				: Room.watch(id);
 		joining = !held && !sent;
 		if (!held) name = playerName();
 		arrive
@@ -62,6 +78,36 @@
 		return r.connect();
 	});
 
+	// The seat stopped opening while the page was open (the host gave it to a bot): watch on from the gallery.
+	$effect(() => {
+		const r = room;
+		if (!r?.lost) return;
+		seatLost = r.lost;
+		Room.watch(r.roomId)
+			.then((w) => (room = w))
+			.catch((e: Error) => (error = e.message));
+	});
+
+	/** Sit back down by a phrase: the host's, or one this seat minted on another device. */
+	async function claim(e: SubmitEvent) {
+		e.preventDefault();
+		claiming = true;
+		error = '';
+		try {
+			const got = await api.claim(claimPhrase.trim());
+			rememberSeat(got.roomId, { seat: got.seat, token: got.token });
+			trustSeat(got.roomId);
+			claimPhrase = '';
+			seatLost = '';
+			if (got.roomId === roomId) room = await Room.resume(roomId, { seat: got.seat, token: got.token });
+			else await goto(`/join/${got.roomId}`);
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'The phrase could not be claimed.';
+		} finally {
+			claiming = false;
+		}
+	}
+
 	async function takeSeat(e: SubmitEvent) {
 		e.preventDefault();
 		busy = true;
@@ -137,6 +183,9 @@
 			{#if !watching}
 				<button type="button" class="quiet" title="A phrase that brings this seat to another device" onclick={transfer}>Transfer seat</button>
 			{/if}
+			{#if room.isHost && room.started}
+				<button type="button" class="quiet" title="Bring a player back to a seat their browser lost, or give a seat to a bot" onclick={() => (seatsOpen = true)}>Seats</button>
+			{/if}
 		{/if}
 		<button type="button" class="quiet" onclick={() => (prefsOpen = true)}>Preferences</button>
 		<a class="quiet" href={room ? `/guide?room=${roomId}` : '/guide'}>How to play</a>
@@ -151,6 +200,7 @@
 <Preferences bind:open={prefsOpen} />
 {#if room}
 	<ReportSlip {room} bind:open={reporting} />
+	{#if room.isHost}<SeatsSlip {room} bind:open={seatsOpen} />{/if}
 {/if}
 
 {#if error}
@@ -189,8 +239,19 @@
 	</section>
 {/if}
 
+{#if room?.started && !seatLost && room.view.seats.some((s) => s.standIn)}
+	<p class="notice muted">A bot plays for {room.view.seats.filter((s) => s.standIn).map((s) => s.name).join(', ')}, at the host's word, until a transfer phrase from the host brings them back.</p>
+{/if}
+
 {#if watching && room?.started && !room.view.over}
-	<p class="notice muted">Had a seat at this table on another device? Transfer it from there and claim the phrase in the hall, or <a href="mailto:eric@ericwagoner.com?subject={encodeURIComponent(`My seat in room ${roomId}`)}">write to the keeper</a> for a link that brings it back.</p>
+	<div class="notice muted">
+		{#if seatLost}<p>{seatLost} Claim it here, or <a href="mailto:eric@ericwagoner.com?subject={encodeURIComponent(`My seat in room ${roomId}`)}">write to the keeper</a>.</p>
+		{:else}<p>Had a seat at this table? Ask the host for a transfer phrase, or make one on the device that still holds the seat, and claim it here. Or <a href="mailto:eric@ericwagoner.com?subject={encodeURIComponent(`My seat in room ${roomId}`)}">write to the keeper</a> for a link that brings it back.</p>{/if}
+		<form class="sit" onsubmit={claim}>
+			<input type="text" bind:value={claimPhrase} placeholder="the four-word phrase" autocomplete="off" aria-label="transfer phrase" />
+			<button type="submit" class="quiet" disabled={claiming || claimPhrase.trim().split(/[\s-]+/).length < 4}>Claim the seat</button>
+		</form>
+	</div>
 {/if}
 
 {#if room && !room.started}