batched round: queue actions/diplomacy, jump forward commits one turn (v0.2.0)

src/App.tsx

@@ -225,38 +225,37 @@ export default function App() {
     [screen],
   );
 
-  const runAction = useCallback(
-    async (action: string) => {
+  // Add an action to the pending round. Fast, non-LLM — no `busy`; the pending
+  // list updates from the response and the SSE `state` event.
+  const runAddAction = useCallback(
+    async (text: string) => {
       if (!game) return;
-      setBusy(true);
       try {
-        const { state } = await api.turn(game.id, action);
-        setGame(state);
+        const { game: g } = await api.addAction(game.id, text);
+        setGame(g);
       } catch (e) {
         toastError(e);
-      } finally {
-        setBusy(false);
       }
     },
     [game],
   );
 
-  const runChat = useCallback(
+  // Add a diplomatic message to the pending round. Fast, non-LLM — no `busy`.
+  const runAddDiplomacy = useCallback(
     async (to: string, message: string) => {
       if (!game) return;
-      setBusy(true);
       try {
-        const { state } = await api.turn(game.id, undefined, { to, message });
-        setGame(state);
+        const { game: g } = await api.addDiplomacy(game.id, to, message);
+        setGame(g);
       } catch (e) {
         toastError(e);
-      } finally {
-        setBusy(false);
       }
     },
     [game],
   );
 
+  // Jump forward: the single LLM call that commits the pending round. Only this
+  // sets `busy` (the adds above are fast and non-LLM).
   const runJump = useCallback(async () => {
     if (!game) return;
     setBusy(true);
@@ -321,8 +320,8 @@ export default function App() {
           regions={regions}
           busy={busy}
           advisors={advisors}
-          onAction={runAction}
-          onChat={runChat}
+          onAddAction={runAddAction}
+          onAddDiplomacy={runAddDiplomacy}
           onAdvisor={askAdvisor}
           onJump={runJump}
           onHome={goHome}
@@ -360,8 +359,8 @@ interface GameScreenProps {
   regions: RegionMap;
   busy: boolean;
   advisors: string[];
-  onAction: (a: string) => void;
-  onChat: (to: string, m: string) => void;
+  onAddAction: (a: string) => void;
+  onAddDiplomacy: (to: string, m: string) => void;
   onAdvisor: (p?: string) => void;
   onJump: () => void;
   onHome: () => void;
@@ -383,8 +382,8 @@ function GameScreen({
   regions,
   busy,
   advisors,
-  onAction,
-  onChat,
+  onAddAction,
+  onAddDiplomacy,
   onAdvisor,
   onJump,
   onHome,
@@ -561,7 +560,7 @@ function GameScreen({
         <EventFeed events={game.events} nations={game.nations} inWindow />
       </FloatingWindow>
 
-      {/* Command deck ("Your move"), bottom-center — the prominent typing spot. */}
+      {/* Command deck ("Your move"), bottom-center — queue items, then commit. */}
       <FloatingWindow
         id="action"
         anchor="bottom-center"
@@ -569,16 +568,11 @@ function GameScreen({
         title="Your move"
         titleIcon={<Radar className="size-4 text-primary" />}
         titleExtra={
-          <Button
-            variant="secondary"
-            size="sm"
-            onClick={onJump}
-            disabled={busy}
-            data-testid="jump-forward"
-            className="shrink-0"
-          >
-            {busy ? 'Simulating…' : 'Jump forward'}
-          </Button>
+          game.pending.length > 0 ? (
+            <Badge variant="secondary" className="shrink-0 text-xs tabular-nums" data-testid="title-queued">
+              {game.pending.length} queued
+            </Badge>
+          ) : undefined
         }
         collapsed={!!collapsed.action}
         onCollapsedChange={(c) => setCollapsedFor('action', c)}
@@ -588,8 +582,8 @@ function GameScreen({
           game={game}
           busy={busy}
           advisors={advisors}
-          onAction={onAction}
-          onChat={onChat}
+          onAddAction={onAddAction}
+          onAddDiplomacy={onAddDiplomacy}
           onAdvisor={onAdvisor}
           onJump={onJump}
           inWindow

src/components/ActionPanel.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Loader2, Radar, Send } from 'lucide-react';
+import { Loader2, MessageSquare, Radar, Zap } from 'lucide-react';
+import { Badge } from './ui/badge';
 import { Button } from './ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
 import { Input } from './ui/input';
@@ -10,36 +11,38 @@ import type { GameState } from '@shared/types';
 
 interface Props {
   game: GameState;
-  /** A turn is currently resolving (action/chat/jump) — disable those controls. */
+  /** A jump (the only LLM call) is currently in flight — disable the commit. */
   busy: boolean;
   /** Advisor brainstorm suggestions from the last request. */
   advisors: string[];
-  onAction: (action: string) => void;
-  onChat: (to: string, message: string) => void;
+  /** Queue a free-text action onto the pending round (no turn advance). */
+  onAddAction: (text: string) => void;
+  /** Queue a diplomatic message onto the pending round (no turn advance). */
+  onAddDiplomacy: (to: string, message: string) => void;
   onAdvisor: (prompt?: string) => void;
+  /** Commit the whole pending round in a single LLM turn. */
   onJump: () => void;
   /**
    * Render without the outer card chrome (the surrounding floating window
-   * provides the border, the "Your move" title, and the "Jump forward" button
-   * in its title bar). Same content, same testids.
+   * provides the border and the "Your move" title). Same content, same testids.
    */
   inWindow?: boolean;
 }
 
 /**
- * The player's command deck ("Your move"). Three tabs — Action (free-text move),
- * Diplomacy (a message to a specific nation), Advisor (ask the LLM for ideas,
- * "Use" feeds one into the Action tab) — share one prominent Send button that
- * routes to the active tab. While a turn resolves it shows a spinner + a hint
- * that turns take a few seconds. A "Jump forward" button auto-simulates the
- * world with no player move.
+ * The player's command deck ("Your move"). Three tabs — Action, Diplomacy,
+ * Advisor — each with a small "Add" button that queues an item onto the pending
+ * round (these never advance the turn). Below the tabs a visible pending-queue
+ * list and one prominent "Jump forward" button commit the whole round in a
+ * single LLM turn. While a jump is in flight the commit is disabled and a hint
+ * is shown; an empty jump (nothing queued) is allowed and advances time.
  */
 export default function ActionPanel({
   game,
   busy,
   advisors,
-  onAction,
-  onChat,
+  onAddAction,
+  onAddDiplomacy,
   onAdvisor,
   onJump,
   inWindow = false,
@@ -54,18 +57,20 @@ export default function ActionPanel({
     .filter(([id]) => id !== game.playerNationId)
     .sort(([a], [b]) => a.localeCompare(b));
 
-  const submitAction = () => {
+  const nationName = (id?: string) => (id ? (game.nations[id]?.name ?? id) : '');
+
+  const queueAction = () => {
     const text = action.trim();
     if (!text || busy) return;
+    onAddAction(text);
     setAction('');
-    onAction(text);
   };
 
-  const submitChat = () => {
+  const queueDiplomacy = () => {
     const msg = message.trim();
     if (!msg || !target || busy) return;
+    onAddDiplomacy(target, msg);
     setMessage('');
-    onChat(target, msg);
   };
 
   const applyIdea = (idea: string) => {
@@ -73,41 +78,17 @@ export default function ActionPanel({
     setTab('action');
   };
 
-  // The single Send button routes to the active tab.
-  const sendDisabled =
-    busy ||
-    (tab === 'action'
-      ? !action.trim()
-      : tab === 'diplo'
-        ? !message.trim() || !target
-        : false);
-
-  const sendLabel = busy
+  const pending = game.pending;
+  const queuedLabel = busy
     ? 'Simulating…'
-    : tab === 'action'
-      ? 'Take action'
-      : tab === 'diplo'
-        ? 'Send message'
-        : 'Ask the advisor';
+    : `Jump forward${pending.length > 0 ? ` · ${pending.length} queued` : ''}`;
 
-  const send = () => {
-    if (busy) return;
-    if (tab === 'action') submitAction();
-    else if (tab === 'diplo') submitChat();
-    else onAdvisor(prompt.trim() || undefined);
-  };
-
-  // In window mode the surrounding FloatingWindow shows "Your move" and the
-  // "Jump forward" button in its own title bar, so omit both here.
   const header = inWindow ? null : (
     <CardHeader className="flex-row items-center justify-between space-y-0">
       <div className="flex items-center gap-2">
         <Radar className="size-4 text-primary" />
         <CardTitle className="text-base">Your move</CardTitle>
       </div>
-      <Button variant="secondary" size="sm" onClick={onJump} disabled={busy} data-testid="jump-forward">
-        {busy ? 'Simulating…' : 'Jump forward'}
-      </Button>
     </CardHeader>
   );
 
@@ -134,6 +115,15 @@ export default function ActionPanel({
             rows={3}
             data-testid="action-textarea"
           />
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={queueAction}
+            disabled={busy || !action.trim()}
+            data-testid="add-action"
+          >
+            Add action
+          </Button>
         </TabsContent>
 
         <TabsContent value="diplo" className="space-y-2">
@@ -156,6 +146,15 @@ export default function ActionPanel({
             rows={3}
             data-testid="chat-message"
           />
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={queueDiplomacy}
+            disabled={busy || !message.trim() || !target}
+            data-testid="add-diplomacy"
+          >
+            Add to round
+          </Button>
         </TabsContent>
 
         <TabsContent value="advisor" className="space-y-2">
@@ -165,6 +164,14 @@ export default function ActionPanel({
             placeholder="Optional focus — e.g. “the nuclear standoff”"
             data-testid="advisor-prompt"
           />
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => onAdvisor(prompt.trim() || undefined)}
+            data-testid="ask-advisor"
+          >
+            Ask advisor
+          </Button>
           {advisors.length > 0 && (
             <ul className="space-y-1.5" data-testid="advisor-list">
               {advisors.map((a, i) => (
@@ -184,14 +191,52 @@ export default function ActionPanel({
         </TabsContent>
       </Tabs>
 
+      {/* Pending queue + the prominent commit — always visible, in any mode. */}
       <div className="mt-3 space-y-2">
-        <Button className="h-11 w-full" onClick={send} disabled={sendDisabled} data-testid="action-submit">
-          {busy ? (
-            <Loader2 className="size-4 animate-spin" />
+        <div className="rounded-lg border border-border/60 bg-card/40 p-2.5" data-testid="pending-list">
+          {pending.length === 0 ? (
+            <p className="text-xs text-muted-foreground" data-testid="pending-empty">
+              Nothing queued — add an action or a message, then jump forward.
+            </p>
           ) : (
-            <Send className="size-4" />
+            <>
+              <div className="mb-1.5 flex items-center justify-between">
+                <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                  Queued this round
+                </span>
+                <Badge variant="secondary" className="text-[11px] tabular-nums">
+                  {pending.length}
+                </Badge>
+              </div>
+              <ul className="space-y-1">
+                {pending.map((item, i) => (
+                  <li
+                    key={`${i}-${item.text}`}
+                    className="flex items-center gap-2 text-sm"
+                    data-testid="pending-item"
+                    data-kind={item.kind}
+                  >
+                    {item.kind === 'action' ? (
+                      <Zap className="size-3.5 shrink-0 text-amber-400" aria-hidden />
+                    ) : (
+                      <MessageSquare className="size-3.5 shrink-0 text-cyan-400" aria-hidden />
+                    )}
+                    {item.kind === 'diplomacy' && (
+                      <span className="shrink-0 text-xs text-muted-foreground">
+                        → {nationName(item.to)}
+                      </span>
+                    )}
+                    <span className="min-w-0 flex-1 truncate text-foreground/85">{item.text}</span>
+                  </li>
+                ))}
+              </ul>
+            </>
           )}
-          {sendLabel}
+        </div>
+
+        <Button className="h-11 w-full" onClick={onJump} disabled={busy} data-testid="jump-forward">
+          {busy ? <Loader2 className="size-4 animate-spin" /> : <Radar className="size-4" />}
+          {queuedLabel}
         </Button>
         {busy && (
           <p

src/lib/api.ts

@@ -2,7 +2,14 @@
 // proxied by Vite in dev and served by Express in prod), so no origin is ever
 // hardcoded — this works unchanged behind the Traefik proxy.
 import type { GameState, Preset, PresetMeta } from '@shared/types';
-import type { AdvisorResponse, CreateGameResponse, GameSummary, TurnResponse } from '@shared/protocol';
+import type {
+  AddActionResponse,
+  AddDiplomacyResponse,
+  AdvisorResponse,
+  CreateGameResponse,
+  GameSummary,
+  TurnResponse,
+} from '@shared/protocol';
 
 async function req<T>(path: string, init?: RequestInit): Promise<T> {
   const res = await fetch(path, {
@@ -28,11 +35,20 @@ export const api = {
   // Every saved game as a lightweight summary, newest-updated first (for the
   // home screen's "Saved games" section / resume affordances).
   listGames: () => req<{ games: GameSummary[] }>('/api/games'),
-  turn: (id: string, action?: string, chat?: { to: string; message: string }) =>
-    req<TurnResponse>(`/api/games/${id}/turn`, {
+  // Queue a free-text player action onto the pending round. No LLM call — the
+  // round is only committed by `jump`. Returns the updated game (with pending).
+  addAction: (id: string, text: string) =>
+    req<AddActionResponse>(`/api/games/${id}/action`, {
       method: 'POST',
-      body: JSON.stringify({ action, chat }),
+      body: JSON.stringify({ text }),
     }),
+  // Queue a diplomatic message to a target nation onto the pending round.
+  addDiplomacy: (id: string, to: string, message: string) =>
+    req<AddDiplomacyResponse>(`/api/games/${id}/diplomacy`, {
+      method: 'POST',
+      body: JSON.stringify({ to, message }),
+    }),
+  // Commit the whole pending round (or an empty one) in a single LLM turn.
   jump: (id: string) =>
     req<TurnResponse>(`/api/games/${id}/jump`, {
       method: 'POST',