diff --git a/client/src/Trade.tsx b/client/src/Trade.tsx
index 4793070..13f6950 100644
--- a/client/src/Trade.tsx
+++ b/client/src/Trade.tsx
@@ -1,18 +1,17 @@
-import React, { useState, useCallback, useEffect, useContext, useMemo, useRef } from "react";
-import equal from "fast-deep-equal";
+import React, { useState, useCallback, useEffect, useContext, useMemo, useRef } from 'react';
+import equal from 'fast-deep-equal';
 
-import Paper from "@mui/material/Paper";
-import Button from "@mui/material/Button";
-import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
-import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import Paper from '@mui/material/Paper';
+import Button from '@mui/material/Button';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 
-import { Resource } from "./Resource";
-import { PlayerColor } from "./PlayerColor";
-import { GlobalContext } from "./GlobalContext";
+import { Resource } from './Resource';
+import { PlayerColor } from './PlayerColor';
+import { GlobalContext } from './GlobalContext';
+import { assetsPath } from './Common';
 
-import "./Trade.css";
-
-/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-non-null-assertion */
+import './Trade.css';
 
 interface Resources {
   wheat: number;
@@ -51,7 +50,33 @@ const Trade: React.FC = () => {
   const [players, setPlayers] = useState<any>(undefined);
   const [color, setColor] = useState<string | undefined>(undefined);
 
-  const fields = useMemo(() => ["turn", "players", "private", "color"], []);
+  // Viewer context: either the player's private info or a read-only observer stub.
+  // Observers (no `private` data) will use a read-only view but should be able
+  // to see active offers. Use `observerViewMode` to adjust offer visibility rules.
+  const isPrivObserver = !priv || !priv.name;
+  const observerViewMode = isPrivObserver;
+
+  // Default color for observers until the full flow is implemented
+  const defaultObserverColor = observerViewMode ? 'R' : undefined;
+
+  const viewer: any = priv
+    ? priv
+    : {
+        name: '',
+        color: undefined,
+        gives: [],
+        gets: [],
+        offerRejected: {},
+        banks: [],
+        resources: 0,
+      };
+  const isObserver = !viewer || !viewer.name;
+
+  // Prefer a viewer-specified color. If none, observers default to `defaultObserverColor`, otherwise fall back to server `color`.
+  const effectiveColor =
+    viewer && viewer.color ? viewer.color : defaultObserverColor ? defaultObserverColor : color;
+
+  const fields = useMemo(() => ['turn', 'players', 'private', 'color'], []);
 
   useEffect(() => {
     if (!lastJsonMessage) {
@@ -59,18 +84,18 @@ const Trade: React.FC = () => {
     }
     const data = lastJsonMessage;
     switch (data.type) {
-      case "game-update":
+      case 'game-update':
         console.log(`trade - game-update: `, data.update);
-        if ("turn" in data.update && !equal(turn, data.update.turn)) {
+        if ('turn' in data.update && !equal(turn, data.update.turn)) {
           setTurn(data.update.turn);
         }
-        if ("players" in data.update && !equal(players, data.update.players)) {
+        if ('players' in data.update && !equal(players, data.update.players)) {
           setPlayers(data.update.players);
         }
-        if ("private" in data.update && !equal(priv, data.update.private)) {
+        if ('private' in data.update && !equal(priv, data.update.private)) {
           setPriv(data.update.private);
         }
-        if ("color" in data.update && color !== data.update.color) {
+        if ('color' in data.update && color !== data.update.color) {
           setColor(data.update.color);
         }
         break;
@@ -84,25 +109,30 @@ const Trade: React.FC = () => {
       return;
     }
     sendJsonMessage({
-      type: "get",
+      type: 'get',
       fields,
     });
   }, [sendJsonMessage, fields]);
 
   const transfer = useCallback(
     (type: string, direction: string) => {
-      if (direction === "give") {
+      if (direction === 'give') {
         /* give clicked */
         if (gets[type as keyof Resources]) {
           gets[type as keyof Resources]--;
           gives[type as keyof Resources] = 0;
         } else {
-          if (gives[type as keyof Resources] < priv[type]) {
+          // Only allow incrementing gives if we have a priv viewer with that resource
+          if (
+            viewer &&
+            viewer[type] !== undefined &&
+            gives[type as keyof Resources] < viewer[type]
+          ) {
             gives[type as keyof Resources]++;
           }
           gets[type as keyof Resources] = 0;
         }
-      } else if (direction === "get") {
+      } else if (direction === 'get') {
         /* get clicked */
         if (gives[type as keyof Resources]) {
           gives[type as keyof Resources]--;
@@ -118,7 +148,7 @@ const Trade: React.FC = () => {
       setGets({ ...gets });
       setGives({ ...gives });
     },
-    [setGets, setGives, gets, gives, priv]
+    [setGets, setGives, gets, gives, viewer]
   );
 
   const createTransfer = useCallback(
@@ -126,7 +156,7 @@ const Trade: React.FC = () => {
       return (
         <div key={resource} className="Transfer">
           <Resource
-            onClick={() => transfer(resource, "get")}
+            onClick={() => transfer(resource, 'get')}
             label={true}
             type={resource}
             disabled
@@ -134,7 +164,7 @@ const Trade: React.FC = () => {
           />
           <div className="Direction">
             {gets[resource as keyof Resources] === gives[resource as keyof Resources] ? (
-              ""
+              ''
             ) : gets[resource as keyof Resources] > gives[resource as keyof Resources] ? (
               <ArrowDownwardIcon />
             ) : (
@@ -142,24 +172,28 @@ const Trade: React.FC = () => {
             )}
           </div>
           <Resource
-            onClick={() => transfer(resource, "give")}
+            onClick={() => transfer(resource, 'give')}
             label={true}
             type={resource}
             disabled
-            available={priv ? priv[resource] - gives[resource as keyof Resources] : undefined}
+            available={
+              viewer && viewer[resource] !== undefined
+                ? viewer[resource] - gives[resource as keyof Resources]
+                : undefined
+            }
             count={gives[resource as keyof Resources]}
           />
         </div>
       );
     },
-    [gives, gets, transfer, priv]
+    [gives, gets, transfer, viewer]
   );
 
   const sendTrade = useCallback(
     (action: string, offer: any) => {
       if (sendJsonMessage) {
         sendJsonMessage({
-          type: "trade",
+          type: 'trade',
           action,
           offer,
         });
@@ -192,7 +226,7 @@ const Trade: React.FC = () => {
       console.log(gives, gets);
       trade.gives.forEach((give: any) => (_gives[give.type as keyof Resources] = give.count));
       trade.gets.forEach((get: any) => (_gets[get.type as keyof Resources] = get.count));
-      sendTrade("offer", trade);
+      sendTrade('offer', trade);
       console.log(_gives, _gets);
       setGives(Object.assign({}, empty, _gives));
       setGets(Object.assign({}, empty, _gets));
@@ -200,15 +234,16 @@ const Trade: React.FC = () => {
     [setGives, setGets, gives, gets, sendTrade]
   );
 
-  if (!priv || !turn || !turn.actions || turn.actions.indexOf("trade") === -1) {
+  // Allow observers (no `private` data) to view trades in read-only mode.
+  if (!turn || !turn.actions || turn.actions.indexOf('trade') === -1) {
     return <></>;
   }
 
-  const transfers = ["brick", "wood", "wheat", "sheep", "stone"].map((resource) => {
+  const transfers = ['brick', 'wood', 'wheat', 'sheep', 'stone'].map(resource => {
     return createTransfer(resource);
   });
 
-  priv.offerRejected = priv.offerRejected ? priv.offerRejected : {};
+  const viewerOfferRejected = viewer.offerRejected ? viewer.offerRejected : {};
 
   const canMeetOffer = (player: any, offer: any) => {
     if (offer.gets.length === 0 || offer.gives.length === 0) {
@@ -216,7 +251,7 @@ const Trade: React.FC = () => {
     }
     for (let i = 0; i < offer.gets.length; i++) {
       const get = offer.gets[i];
-      if (offer.name === "The bank") {
+      if (offer.name === 'The bank') {
         const _gives: any[] = [],
           _gets: any[] = [];
         for (const type in gives) {
@@ -238,7 +273,7 @@ const Trade: React.FC = () => {
           return false;
         }
 
-        if (get.type !== "bank") {
+        if (get.type !== 'bank') {
           if (gives[get.type as keyof Resources] < get.count) {
             return false;
           }
@@ -273,8 +308,9 @@ const Trade: React.FC = () => {
         return;
       }
       valid =
-        offer.gives.find((item: any) => (item.type === get.type || item.type === "*") && item.count === get.count) !==
-        undefined;
+        offer.gives.find(
+          (item: any) => (item.type === get.type || item.type === '*') && item.count === get.count
+        ) !== undefined;
     });
 
     if (valid)
@@ -284,13 +320,14 @@ const Trade: React.FC = () => {
         }
         valid =
           offer.gets.find(
-            (item: any) => (item.type === give.type || item.type === "bank") && item.count === give.count
+            (item: any) =>
+              (item.type === give.type || item.type === 'bank') && item.count === give.count
           ) !== undefined;
       });
     return valid;
   };
 
-  const isTurn = turn && turn.color === color ? true : false;
+  const isTurn = turn && turn.color === effectiveColor ? true : false;
 
   const offerClicked = () => {
     const trade = {
@@ -307,20 +344,23 @@ const Trade: React.FC = () => {
         trade.gets.push({ type: key, count: gets[key as keyof Resources] });
       }
     }
-    sendTrade("offer", trade);
+    sendTrade('offer', trade);
   };
 
   const cancelOffer = (offer: any) => {
-    sendTrade("cancel", offer);
+    sendTrade('cancel', offer);
   };
 
   const acceptClicked = (offer: any) => {
-    if (offer.name === "The bank") {
-      sendTrade("accept", Object.assign({}, { name: offer.name, gives: trade.gets, gets: trade.gives }));
+    if (offer.name === 'The bank') {
+      sendTrade(
+        'accept',
+        Object.assign({}, { name: offer.name, gives: trade.gets, gets: trade.gives })
+      );
     } else if (offer.self) {
-      sendTrade("accept", offer);
+      sendTrade('accept', offer);
     } else {
-      sendTrade("accept", Object.assign({}, offer, { gives: offer.gets, gets: offer.gives }));
+      sendTrade('accept', Object.assign({}, offer, { gives: offer.gets, gets: offer.gives }));
     }
   };
 
@@ -329,16 +369,18 @@ const Trade: React.FC = () => {
   /* Player has rejected the active player's bid or active player rejected
    * the other player's bid */
   const rejectClicked = (trade: any) => {
-    sendTrade("reject", trade);
+    sendTrade('reject', trade);
   };
 
   /* Create list of active trades */
   const activeTrades: any[] = [];
+  console.log('trade - building activeTrades', { turn, players, viewer, color });
   for (const colorKey in players) {
     const item = players[colorKey],
       name = item.name;
+    console.log(`trade - processing player ${colorKey}`, { item, name, colorKey });
     item.offerRejected = item.offerRejected ? item.offerRejected : {};
-    if (item.status !== "Active") {
+    if (item.status !== 'Active') {
       continue;
     }
     /* Only list players with an offer, unless it is the active player (see
@@ -346,8 +388,8 @@ const Trade: React.FC = () => {
      * or the player explicitly rejected the player's offer */
     if (
       turn.name !== name &&
-      priv.name !== name &&
-      !(colorKey in priv.offerRejected) &&
+      viewer.name !== name &&
+      !(colorKey in (viewer.offerRejected || {})) &&
       (!item.gets || item.gets.length === 0 || !item.gives || item.gives.length === 0)
     ) {
       continue;
@@ -355,7 +397,7 @@ const Trade: React.FC = () => {
 
     const tmp: TradeItem = {
       negotiator: turn.name === name,
-      self: priv.name === name,
+      self: viewer.name === name,
       name: name,
       color: colorKey,
       valid: false,
@@ -363,6 +405,24 @@ const Trade: React.FC = () => {
       gives: item.gives ? item.gives : [],
       offerRejected: item.offerRejected,
     };
+    console.log('trade - tmp before fallback', { tmp });
+
+    // If this is the active (negotiating) player but their gets/gives
+    // are not present in the players map (e.g. observers where private
+    // data isn't available), fall back to the offer on `turn` so the
+    // trade line shows the active player's current offer.
+    if (tmp.negotiator && turn && turn.offer) {
+      console.log('trade - negotiator detected; turn.offer present', { turnOffer: turn.offer });
+      if ((!tmp.gets || tmp.gets.length === 0) && turn.offer.gets) {
+        console.log('trade - applying turn.offer.gets fallback', { gets: turn.offer.gets });
+        tmp.gets = turn.offer.gets.slice();
+      }
+      if ((!tmp.gives || tmp.gives.length === 0) && turn.offer.gives) {
+        console.log('trade - applying turn.offer.gives fallback', { gives: turn.offer.gives });
+        tmp.gives = turn.offer.gives.slice();
+      }
+    }
+    console.log('trade - tmp after fallback', { tmp });
 
     tmp.canSubmit = !!(tmp.gets.length && tmp.gives.length);
 
@@ -397,17 +457,17 @@ const Trade: React.FC = () => {
     }
   }
 
-  const isOfferSubmitted = isCompatibleOffer(priv, trade),
-    isNegiatorSubmitted = turn && turn.offer && isCompatibleOffer(priv, turn.offer),
+  const isOfferSubmitted = isCompatibleOffer(viewer, trade),
+    isNegiatorSubmitted = turn && turn.offer && isCompatibleOffer(viewer, turn.offer),
     isOfferValid = trade.gives.length && trade.gets.length ? true : false;
 
-  if (isTurn && priv && priv.banks) {
-    priv.banks.forEach((bank: string) => {
-      const count = bank === "bank" ? 3 : 2;
+  if (isTurn && viewer && viewer.banks) {
+    viewer.banks.forEach((bank: string) => {
+      const count = bank === 'bank' ? 3 : 2;
       activeTrades.push({
         name: `The bank`,
         color: undefined,
-        gives: [{ count: 1, type: "*" }],
+        gives: [{ count: 1, type: '*' }],
         gets: [{ count: count, type: bank }],
         valid: false,
         offerRejected: {},
@@ -417,8 +477,8 @@ const Trade: React.FC = () => {
     activeTrades.push({
       name: `The bank`,
       color: undefined,
-      gives: [{ count: 1, type: "*" }],
-      gets: [{ count: 4, type: "bank" }],
+      gives: [{ count: 1, type: '*' }],
+      gets: [{ count: 4, type: 'bank' }],
       valid: false,
       offerRejected: {},
     });
@@ -426,38 +486,45 @@ const Trade: React.FC = () => {
 
   if (isTurn) {
     activeTrades.forEach((offer: any) => {
-      if (offer.name === "The bank") {
+      if (offer.name === 'The bank') {
         /* offer has to be the second parameter for the bank to match */
         offer.valid = isCompatibleOffer({ gives: trade.gets, gets: trade.gives }, offer);
       } else {
-        offer.valid = !(turn.color in offer.offerRejected) && canMeetOffer(priv, offer);
+        // For observers, ignore the offerRejected map so the read-only viewer can
+        // see the active player's offer details.
+        offer.valid =
+          (observerViewMode ? true : !(turn.color in offer.offerRejected)) &&
+          canMeetOffer(viewer, offer);
       }
     });
   } else {
     const found = activeTrades.find((item: any) => item.name === turn.name);
     if (found) {
-      found.valid = !(color! in found.offerRejected) && canMeetOffer(priv, found);
+      found.valid =
+        (observerViewMode ? true : !(effectiveColor! in found.offerRejected)) &&
+        canMeetOffer(viewer, found);
     }
   }
 
   const tradeElements = activeTrades.map((item: any, index: number) => {
-    const youRejectedOffer = color! in item.offerRejected;
+    console.log(`trade - rendering trade element ${index}`, { item, index });
+    const youRejectedOffer = observerViewMode ? false : effectiveColor! in item.offerRejected;
     let youWereRejected;
     if (isTurn) {
-      youWereRejected = item.color && item.color in priv.offerRejected;
+      youWereRejected = item.color && item.color in (viewer.offerRejected || {});
     } else {
-      youWereRejected = Object.getOwnPropertyNames(priv.offerRejected).length !== 0;
+      youWereRejected = Object.getOwnPropertyNames(viewer.offerRejected || {}).length !== 0;
     }
 
     const isNewOffer = item.self && !isOfferSubmitted;
 
     let isSameOffer;
-    const isBank = item.name === "The bank";
+    const isBank = item.name === 'The bank';
 
     if (isTurn) {
       isSameOffer = isCompatibleOffer(trade, { gets: item.gives, gives: item.gets });
     } else {
-      isSameOffer = turn.offer && isCompatibleOffer(priv, turn.offer);
+      isSameOffer = turn.offer && isCompatibleOffer(viewer, turn.offer);
     }
 
     let source;
@@ -472,46 +539,84 @@ const Trade: React.FC = () => {
     } else {
       source = item;
     }
-    const _gets = source.gets.length
+
+    // Ensure arrays exist so .length checks are safe
+    source.gets = source.gets || [];
+    source.gives = source.gives || [];
+
+    // Build display elements and also capture snapshots for logging
+    const computed_gets = source.gets.length
       ? source.gets.map((get: any, index: number) => {
-          if (get.type === "bank") {
+          if (get.type === 'bank') {
             return (
               <span key={`get-bank-${index}`}>
-                <b>{get.count}</b> of any resource{" "}
+                <b>{get.count}</b> of any resource{' '}
               </span>
             );
           }
-          return <Resource key={`get-${get.type}-${index}`} disabled label type={get.type} count={get.count} />;
+          return (
+            <Resource
+              key={`get-${get.type}-${index}`}
+              disabled
+              label
+              type={get.type}
+              count={get.count}
+            />
+          );
         })
-      : "nothing";
-    const _gives = source.gives.length
+      : 'nothing';
+
+    const computed_gives = source.gives.length
       ? source.gives.map((give: any, index: number) => {
-          if (give.type === "*") {
+          if (give.type === '*') {
             return (
               <span key={`give-bank-${index}`}>
-                <b>1</b> of any resource{" "}
+                <b>1</b> of any resource{' '}
               </span>
             );
           }
-          return <Resource key={`give-${give.type}-${index}`} disabled label type={give.type} count={give.count} />;
+          return (
+            <Resource
+              key={`give-${give.type}-${index}`}
+              disabled
+              label
+              type={give.type}
+              count={give.count}
+            />
+          );
         })
-      : "nothing";
+      : 'nothing';
+
+    // Log JSON snapshots so the console shows values at log time (not live objects)
+    try {
+      console.log(`trade - computed for render ${index}`, {
+        item: JSON.parse(JSON.stringify(item)),
+        source: JSON.parse(JSON.stringify(source)),
+        computed_gets: source.gets.length ? JSON.parse(JSON.stringify(source.gets)) : 'nothing',
+        computed_gives: source.gives.length ? JSON.parse(JSON.stringify(source.gives)) : 'nothing',
+      });
+    } catch (e) {
+      // Fallback if stringify fails
+      console.log(`trade - computed for render ${index}`, { item, source });
+    }
 
     return (
       <div className="TradeLine" key={`player-${item.name}-${index}`}>
         <PlayerColor color={item.color} />
         <div className="TradeText">
-          {item.self && (
+          {item.self && !isObserver && (
             <>
-              {(_gets !== "nothing" || _gives !== "nothing") && (
+              {(computed_gets !== 'nothing' || computed_gives !== 'nothing') && (
                 <span>
-                  You want {_gets} and will give {_gives}.
+                  You want {computed_gets} and will give {computed_gives}.
                 </span>
               )}
 
-              {youWereRejected && !isNewOffer && <span>{turn.name} rejected your offer.</span>}
+              {youWereRejected && !isNewOffer && !isObserver && (
+                <span>{turn.name} rejected your offer.</span>
+              )}
 
-              {!youWereRejected && _gets === "nothing" && _gives === "nothing" && (
+              {!youWereRejected && computed_gets === 'nothing' && computed_gives === 'nothing' && (
                 <span>You have not made a trade offer.</span>
               )}
 
@@ -519,9 +624,11 @@ const Trade: React.FC = () => {
                 isSameOffer &&
                 !youWereRejected &&
                 isOfferValid &&
-                _gets !== "nothing" &&
-                _gives !== "nothing" && (
-                  <span style={{ fontWeight: "bold" }}>Your submitted offer agrees with {turn.name}&apos;s terms.</span>
+                computed_gets !== 'nothing' &&
+                computed_gives !== 'nothing' && (
+                  <span style={{ fontWeight: 'bold' }}>
+                    Your submitted offer agrees with {turn.name}&apos;s terms.
+                  </span>
                 )}
             </>
           )}
@@ -530,10 +637,10 @@ const Trade: React.FC = () => {
             <>
               {(!isTurn || !isSameOffer || isBank) &&
                 !youRejectedOffer &&
-                _gets !== "nothing" &&
-                _gives !== "nothing" && (
+                computed_gets !== 'nothing' &&
+                computed_gives !== 'nothing' && (
                   <span>
-                    {item.name} wants {_gets} and will give {_gives}.
+                    {item.name} wants {computed_gets} and will give {computed_gives}.
                   </span>
                 )}
 
@@ -543,20 +650,29 @@ const Trade: React.FC = () => {
                     !isSameOffer &&
                     isOfferValid &&
                     !youRejectedOffer &&
-                    _gets !== "nothing" &&
-                    _gives !== "nothing" && <span style={{ fontWeight: "bold" }}>This is a counter offer.</span>}
+                    computed_gets !== 'nothing' &&
+                    computed_gives !== 'nothing' && (
+                      <span style={{ fontWeight: 'bold' }}>This is a counter offer.</span>
+                    )}
 
-                  {isTurn && isSameOffer && !youRejectedOffer && _gets !== "nothing" && _gives !== "nothing" && (
-                    <span>{item.name} will meet your terms.</span>
+                  {isTurn &&
+                    isSameOffer &&
+                    !youRejectedOffer &&
+                    computed_gets !== 'nothing' &&
+                    computed_gives !== 'nothing' && <span>{item.name} will meet your terms.</span>}
+
+                  {(!isTurn || !youWereRejected) &&
+                    (computed_gets === 'nothing' || computed_gives === 'nothing') && (
+                      <span>{item.name} has not submitted a trade offer.</span>
+                    )}
+
+                  {youRejectedOffer && !isObserver && (
+                    <span>You rejected {item.name}&apos;s offer.</span>
                   )}
 
-                  {(!isTurn || !youWereRejected) && (_gets === "nothing" || _gives === "nothing") && (
-                    <span>{item.name} has not submitted a trade offer.</span>
+                  {isTurn && youWereRejected && !isObserver && (
+                    <span>{item.name} rejected your offer.</span>
                   )}
-
-                  {youRejectedOffer && <span>You rejected {item.name}&apos;s offer.</span>}
-
-                  {isTurn && youWereRejected && <span>{item.name} rejected your offer.</span>}
                 </>
               )}
             </>
@@ -570,27 +686,32 @@ const Trade: React.FC = () => {
           )}
 
           {!isTurn && item.color === turn.color && (
-            <Button disabled={!item.valid || isNegiatorSubmitted} onClick={() => agreeClicked(item)}>
+            <Button
+              disabled={!item.valid || isNegiatorSubmitted || observerViewMode}
+              onClick={() => agreeClicked(item)}
+            >
               agree
             </Button>
           )}
 
-          {item.name !== "The bank" && !item.self && (isTurn || item.name === turn.name) && (
+          {item.name !== 'The bank' && !item.self && (isTurn || item.name === turn.name) && (
             <Button
-              disabled={!item.gets.length || !item.gives.length || youRejectedOffer}
+              disabled={
+                !item.gets.length || !item.gives.length || youRejectedOffer || observerViewMode
+              }
               onClick={() => rejectClicked(item)}
             >
               reject
             </Button>
           )}
 
-          {item.self && (
+          {item.self && !isObserver && (
             <Button disabled={isOfferSubmitted || !isOfferValid} onClick={offerClicked}>
               Offer
             </Button>
           )}
 
-          {item.self && (
+          {item.self && !isObserver && (
             <Button disabled onClick={() => cancelOffer(item)}>
               cancel
             </Button>
@@ -603,12 +724,17 @@ const Trade: React.FC = () => {
   return (
     <Paper className="Trade">
       <div className="PlayerList">{tradeElements}</div>
-      {priv.resources === 0 && (
+      {!priv && (
+        <div style={{ padding: '0.5rem' }}>
+          <b>Read-only: observers can view offers but cannot participate in trades.</b>
+        </div>
+      )}
+      {priv && priv.resources === 0 && (
         <div>
           <b>You have no resources to participate in this trade.</b>
         </div>
       )}
-      {priv.resources !== 0 && (
+      {priv && priv.resources !== 0 && (
         <div className="Transfers">
           <div className="GiveGet">
             <div>Get</div>
diff --git a/server/ai/app.ts b/server/ai/app.ts
index ef25ffe..69780d5 100644
--- a/server/ai/app.ts
+++ b/server/ai/app.ts
@@ -663,8 +663,18 @@ const processDiscard = async (_received?: any): Promise<any> => {
     return waitingFor;
   }
 
-  let mustDiscard = game.players[game.color].mustDiscard;
+  // The server may send the per-player `private` update with mustDiscard
+  // before the aggregated `players` snapshot is delivered (sendUpdateToPlayer
+  // is issued prior to sendUpdateToPlayers). Prefer the value found in
+  // `game.players[...]` when present, otherwise fall back to `game.private`.
+  let mustDiscard: any = undefined;
+  if (game.players && game.players[game.color] && typeof game.players[game.color].mustDiscard !== 'undefined') {
+    mustDiscard = game.players[game.color].mustDiscard;
+  } else if (game.private && typeof game.private.mustDiscard !== 'undefined') {
+    mustDiscard = game.private.mustDiscard;
+  }
 
+  // No discards required or information not present yet
   if (!mustDiscard) {
     return;
   }
@@ -922,8 +932,14 @@ const processTrade = async (received?: any): Promise<any> => {
       offer
     });
 
+    // Wait not only for our private.offerRejected flag but also for any players
+    // updates (other players posting counter-offers or accept/rejects). This
+    // reduces a race where the proposing AI proceeds before opponents have
+    // had a chance to respond.
     return {
-      private: { offerRejected: anyValue }
+      private: { offerRejected: anyValue },
+      players: anyValue,
+      turn: { offer: anyValue }
     };
   }
 
@@ -1012,9 +1028,18 @@ const processNormal = async (received?: any): Promise<any> => {
     const privateTotal = types.reduce((s, t) => s + (Number(game.private && game.private[t]) || 0), 0);
     const totalResources = (typeof playerResources !== 'undefined') ? playerResources : privateTotal;
 
-    if (typeof game.players[game.color].mustDiscard === 'undefined') {
-      // No discard required (totalResources <= 7); proceed with turn actions.
-      console.log(`${name} - robber in action but no discard required (totalResources=${totalResources}); proceeding`);
+    const playerMustDiscard = game.players[game.color] && typeof game.players[game.color].mustDiscard !== 'undefined' ? game.players[game.color].mustDiscard : undefined;
+    if (typeof playerMustDiscard === 'undefined') {
+      // If our total resources indicate a discard should be required (>7) but the
+      // server hasn't provided the `mustDiscard` field yet, explicitly request
+      // the players payload so we get the information. Otherwise, if total
+      // resources are <=7, no discard is needed and we can proceed.
+      if (totalResources > 7) {
+        console.log(`${name} - robber in action but mustDiscard missing (totalResources=${totalResources}); requesting players`);
+        return { players: anyValue };
+      } else {
+        console.log(`${name} - robber in action and no discard required (totalResources=${totalResources}); proceeding`);
+      }
     }
   }
 
@@ -1088,7 +1113,7 @@ const processNormal = async (received?: any): Promise<any> => {
   }
 
   if (game.turn.robberInAction) {
-    console.log({ turn: game.turn });
+    console.log({ "turn.name": game.turn.name });
     return;
   }