feat: nation-op split/merge review — dialog (part list + successor radio, merge name), docs (P4b, #16)
This commit is contained in:
+6
-5
@@ -405,11 +405,12 @@ export default function App() {
|
||||
[game, applyState],
|
||||
);
|
||||
|
||||
// Apply a pending nation op the model proposed (confirm, with an optional
|
||||
// rename-name edit). Fast, non-LLM — gated by `opBusy`, not `busy`. The
|
||||
// version-bumped state comes back in the response and the SSE `state` event.
|
||||
// Apply a pending nation op the model proposed (confirm; `edits.name`
|
||||
// overrides a rename/merge name, `edits.playerPart` picks the player's
|
||||
// successor part in a split). Fast, non-LLM — gated by `opBusy`, not `busy`.
|
||||
// The version-bumped state comes back in the response and the SSE `state` event.
|
||||
const runConfirmNationOp = useCallback(
|
||||
async (index: number, edits?: { name?: string }) => {
|
||||
async (index: number, edits?: { name?: string; playerPart?: number }) => {
|
||||
if (!game) return;
|
||||
setOpBusy(true);
|
||||
try {
|
||||
@@ -603,7 +604,7 @@ interface GameScreenProps {
|
||||
onRemoveQueueItem: (index: number) => void;
|
||||
onAdvisor: (p?: string) => void;
|
||||
onJump: () => void;
|
||||
onConfirmNationOp: (index: number, edits?: { name?: string }) => void;
|
||||
onConfirmNationOp: (index: number, edits?: { name?: string; playerPart?: number }) => void;
|
||||
onRejectNationOp: (index: number) => void;
|
||||
onHome: () => void;
|
||||
}
|
||||
|
||||
@@ -44,8 +44,12 @@ interface Props {
|
||||
onAdvisor: (prompt?: string) => void;
|
||||
/** Commit the whole pending round in a single LLM turn. */
|
||||
onJump: () => void;
|
||||
/** Apply a pending nation op; `edits.name` optionally overrides a rename. */
|
||||
onConfirmNationOp: (index: number, edits?: { name?: string }) => void;
|
||||
/**
|
||||
* Apply a pending nation op: `edits.name` overrides a rename's target name
|
||||
* (or a merge's name); `edits.playerPart` picks the player's successor part
|
||||
* in a split (default 0).
|
||||
*/
|
||||
onConfirmNationOp: (index: number, edits?: { name?: string; playerPart?: number }) => void;
|
||||
/** Drop (reject) a pending nation op by its index. */
|
||||
onRejectNationOp: (index: number) => void;
|
||||
/**
|
||||
|
||||
@@ -19,8 +19,12 @@ interface Props {
|
||||
onOpenChange: (open: boolean) => void;
|
||||
/** A confirm/reject request is in flight — disable the per-op controls. */
|
||||
opBusy: boolean;
|
||||
/** Apply a pending op; `edits.name` optionally overrides a rename's target name. */
|
||||
onConfirm: (index: number, edits?: { name?: string }) => void;
|
||||
/**
|
||||
* Apply a pending op: `edits.name` overrides a rename's target name (or the
|
||||
* merged name for a merge); `edits.playerPart` picks which new part the
|
||||
* player's nation becomes in a split (default 0).
|
||||
*/
|
||||
onConfirm: (index: number, edits?: { name?: string; playerPart?: number }) => void;
|
||||
/** Drop a pending op (reject / dismiss). */
|
||||
onReject: (index: number) => void;
|
||||
}
|
||||
@@ -37,10 +41,12 @@ function describeOp(op: NationOp, name: (ref: string) => string): string {
|
||||
|
||||
/**
|
||||
* Reviews the nation ops the LLM has proposed (stored in `pendingNationOps`)
|
||||
* and lets the player apply ("LLM proposes, player confirms") or drop each one.
|
||||
* A rename shows the model's proposed name in an editable field (so the player
|
||||
* can tweak it before confirming); split and merge are declared but not yet
|
||||
* applied (P4b) — they can be dismissed but not confirmed.
|
||||
* and lets the player apply ("LLM proposes, player confirms") or drop each one:
|
||||
* a rename shows the proposed name in an editable field; a split lists the
|
||||
* proposed parts (with the number of regions each is assigned) and, when the
|
||||
* split parent is the player's own nation, radio buttons to pick which new
|
||||
* part the player leads; a merge shows the input nations (the survivor
|
||||
* highlighted) and an editable name for the merged state (default `into`).
|
||||
*/
|
||||
export default function NationOpDialog({
|
||||
game,
|
||||
@@ -52,9 +58,24 @@ export default function NationOpDialog({
|
||||
}: Props) {
|
||||
const ops = game.pendingNationOps;
|
||||
const name = (ref: string) => game.nations[ref]?.name ?? ref;
|
||||
// The player's edit to a rename's target name, keyed by pending-op index.
|
||||
// An unset entry means "use the model's proposed name" (`op.to`).
|
||||
// Resolve a nation ref the way the server does (id first, then a unique
|
||||
// case-insensitive name; null when unknown/ambiguous) — UI hints only, the
|
||||
// server stays authoritative.
|
||||
const resolveRef = (ref: string): string | null => {
|
||||
const r = (ref ?? '').trim();
|
||||
if (!r) return null;
|
||||
if (game.nations[r]) return r;
|
||||
const matches = Object.values(game.nations).filter(
|
||||
(n) => n.name.trim().toLowerCase() === r.toLowerCase(),
|
||||
);
|
||||
return matches.length === 1 ? matches[0].id : null;
|
||||
};
|
||||
// The player's edits, keyed by pending-op index: the rename/merge target
|
||||
// name (an unset entry means "use the model's proposed name"), and which
|
||||
// split part the player succeeds to (preselected 0 — the radio is
|
||||
// "required" and always has a valid answer).
|
||||
const [edits, setEdits] = useState<Record<number, string>>({});
|
||||
const [playerParts, setPlayerParts] = useState<Record<number, number>>({});
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
@@ -68,7 +89,8 @@ export default function NationOpDialog({
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
The model proposed changes to nations. Confirm to apply them (you can edit a
|
||||
rename) or reject to leave the world as it is.
|
||||
name and choose your successor state in a split) or reject to leave the world
|
||||
as it is.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
@@ -80,7 +102,34 @@ export default function NationOpDialog({
|
||||
<ul className="max-h-[50vh] space-y-2.5 overflow-y-auto pr-1" data-testid="nation-op-list">
|
||||
{ops.map((op, i) => {
|
||||
const isRename = op.kind === 'rename';
|
||||
const isSplit = op.kind === 'split';
|
||||
const isMerge = op.kind === 'merge';
|
||||
const finalName = isRename ? (edits[i] ?? (op as RenameOp).to).trim() : '';
|
||||
// Split: is the parent the player's own nation? (the successor radio
|
||||
// is offered only in that case — the engine ignores playerPart otherwise)
|
||||
const splitParentIsPlayer =
|
||||
isSplit && resolveRef((op as { nationRef: string }).nationRef) === game.playerNationId;
|
||||
const playerPart = playerParts[i] ?? 0;
|
||||
// Merge: the survivor (highlighted) and whether the proposal is
|
||||
// even valid (2+ distinct inputs; the survivor among them).
|
||||
const survivorId = isMerge ? resolveRef((op as { survivingRef: string }).survivingRef) : null;
|
||||
const inputIds = isMerge
|
||||
? new Set(
|
||||
(op as { nationRefs: string[] }).nationRefs
|
||||
.map(resolveRef)
|
||||
.filter((x): x is string => x !== null),
|
||||
)
|
||||
: new Set<string>();
|
||||
const mergeValid =
|
||||
!isMerge || (inputIds.size >= 2 && (survivorId !== null && inputIds.has(survivorId)));
|
||||
const mergeName = isMerge ? (edits[i] ?? (op as { into: string }).into).trim() : '';
|
||||
|
||||
const confirm = () => {
|
||||
if (isRename) onConfirm(i, finalName ? { name: finalName } : undefined);
|
||||
else if (isMerge) onConfirm(i, mergeName ? { name: mergeName } : undefined);
|
||||
else onConfirm(i, splitParentIsPlayer ? { playerPart } : undefined);
|
||||
};
|
||||
|
||||
return (
|
||||
<li
|
||||
key={`${i}-${op.kind}`}
|
||||
@@ -96,6 +145,7 @@ export default function NationOpDialog({
|
||||
{describeOp(op, name)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{isRename ? (
|
||||
<div className="space-y-2.5">
|
||||
<Input
|
||||
@@ -118,7 +168,72 @@ export default function NationOpDialog({
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => onConfirm(i, finalName ? { name: finalName } : undefined)}
|
||||
onClick={confirm}
|
||||
disabled={opBusy}
|
||||
data-testid="nation-op-confirm"
|
||||
>
|
||||
{opBusy ? <Loader2 className="size-3.5 animate-spin" /> : <Check className="size-3.5" />}
|
||||
Confirm
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : isSplit ? (
|
||||
<div className="space-y-2.5">
|
||||
<div className="space-y-1">
|
||||
{(op as { parts: { name: string; territory?: string[] }[] }).parts.map((p, pi) => (
|
||||
<div
|
||||
key={pi}
|
||||
className="flex items-center gap-2 text-sm"
|
||||
data-testid="nation-op-part"
|
||||
data-part={pi}
|
||||
>
|
||||
{splitParentIsPlayer ? (
|
||||
<input
|
||||
type="radio"
|
||||
name={`player-part-${i}`}
|
||||
checked={playerPart === pi}
|
||||
onChange={() => setPlayerParts((prev) => ({ ...prev, [i]: pi }))}
|
||||
disabled={opBusy}
|
||||
className="size-3.5 shrink-0 accent-amber-400"
|
||||
aria-label={`Make ${p.name} the player's successor state`}
|
||||
data-testid="nation-op-player-part"
|
||||
/>
|
||||
) : (
|
||||
<span className="size-3.5 shrink-0" aria-hidden />
|
||||
)}
|
||||
<span className="min-w-0 flex-1 truncate">{p.name}</span>
|
||||
<span className="shrink-0 text-[11px] tabular-nums text-muted-foreground">
|
||||
{p.territory?.length ?? 0} region{(p.territory?.length ?? 0) === 1 ? '' : 's'}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{splitParentIsPlayer && (
|
||||
<p className="text-[11px] text-muted-foreground" data-testid="nation-op-split-hint">
|
||||
Choose which new state you will lead after the split.
|
||||
</p>
|
||||
)}
|
||||
{(op as { parts: unknown[] }).parts.length < 2 && (
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
This split names fewer than two parts — confirming will dismiss it
|
||||
without changing the world.
|
||||
</p>
|
||||
)}
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onReject(i)}
|
||||
disabled={opBusy}
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
data-testid="nation-op-reject"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
Reject
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={confirm}
|
||||
disabled={opBusy}
|
||||
data-testid="nation-op-confirm"
|
||||
>
|
||||
@@ -128,21 +243,57 @@ export default function NationOpDialog({
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="text-[11px] text-muted-foreground">
|
||||
{op.kind === 'split' ? 'Split' : 'Merge'} isn’t available yet — dismiss to ignore it.
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onReject(i)}
|
||||
disabled={opBusy}
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
data-testid="nation-op-reject"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
Dismiss
|
||||
</Button>
|
||||
<div className="space-y-2.5">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{(op as { nationRefs: string[] }).nationRefs.map((ref, ri) => {
|
||||
const isSurvivor = resolveRef(ref) === survivorId;
|
||||
return (
|
||||
<Badge
|
||||
key={ri}
|
||||
variant={isSurvivor ? 'default' : 'secondary'}
|
||||
className="text-[11px]"
|
||||
data-testid="nation-op-input"
|
||||
>
|
||||
{name(ref)}
|
||||
{isSurvivor ? ' (survivor)' : ''}
|
||||
</Badge>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<Input
|
||||
value={edits[i] ?? (op as { into: string }).into}
|
||||
onChange={(e) => setEdits((p) => ({ ...p, [i]: e.target.value }))}
|
||||
placeholder="New name…"
|
||||
data-testid="nation-op-name-input"
|
||||
/>
|
||||
{!mergeValid && (
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
This merge is not valid as proposed — confirming will dismiss it
|
||||
without changing the world.
|
||||
</p>
|
||||
)}
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onReject(i)}
|
||||
disabled={opBusy}
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
data-testid="nation-op-reject"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
Reject
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={confirm}
|
||||
disabled={opBusy}
|
||||
data-testid="nation-op-confirm"
|
||||
>
|
||||
{opBusy ? <Loader2 className="size-3.5 animate-spin" /> : <Check className="size-3.5" />}
|
||||
Confirm
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
|
||||
+7
-4
@@ -62,10 +62,13 @@ export const api = {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ index }),
|
||||
}),
|
||||
// (v0.23, #16 P4a) Confirm a pending nation-op proposal by its index in
|
||||
// `game.pendingNationOps` (a rename takes effect; `edits.name` overrides the
|
||||
// proposed name). Fast, non-LLM — no turn advance. Returns the updated game.
|
||||
confirmNationOp: (id: string, index: number, edits?: { name?: string }) =>
|
||||
// (v0.23, #16 P4a; v0.24, #16 P4b) Confirm a pending nation-op proposal by
|
||||
// its index in `game.pendingNationOps`: a rename takes effect (`edits.name`
|
||||
// overrides the proposed name), a split partitions the nation's territory
|
||||
// (`edits.playerPart` picks which part the player leads, default 0), and a
|
||||
// merge folds its inputs into the survivor (`edits.name` overrides the
|
||||
// merged name). Fast, non-LLM — no turn advance. Returns the updated game.
|
||||
confirmNationOp: (id: string, index: number, edits?: { name?: string; playerPart?: number }) =>
|
||||
req<ConfirmNationOpResponse>(`/api/games/${id}/nation-op/confirm`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ index, ...(edits ? { edits } : {}) }),
|
||||
|
||||
Reference in New Issue
Block a user