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

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