new UI, unify map/demo/live architecture more, cleanup

src/components/Accordion.module.css

@@ -0,0 +1,67 @@
+.AccordionGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.Trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background: rgb(255, 255, 255, 0.1);
+  padding: 6px 8px;
+  color: #fff;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: normal;
+  text-align: left;
+  border: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.0417em;
+  gap: 4px;
+}
+
+.TriggerIcon {
+  font-size: 12px;
+  transition: transform 0.2s;
+  transform: rotate(0deg);
+  opacity: 0.5;
+}
+
+.Trigger[data-state="open"] .TriggerIcon {
+  transform: rotate(90deg);
+}
+
+.Content {
+  overflow: hidden;
+}
+
+.Content[data-state="open"] {
+  animation: slideDown 300ms;
+}
+
+.Content[data-state="closed"] {
+  animation: slideUp 300ms;
+}
+
+.Body {
+  padding: 10px;
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

src/components/Accordion.tsx

@@ -0,0 +1,29 @@
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import { ReactNode } from "react";
+import { IoCaretForward } from "react-icons/io5";
+import styles from "./Accordion.module.css";
+
+export function AccordionGroup(props) {
+  return <RadixAccordion.Root className={styles.AccordionGroup} {...props} />;
+}
+
+export function Accordion({
+  value,
+  label,
+  children,
+}: {
+  value: string;
+  label: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <RadixAccordion.Item value={value}>
+      <RadixAccordion.Trigger className={styles.Trigger}>
+        <IoCaretForward className={styles.TriggerIcon} /> {label}
+      </RadixAccordion.Trigger>
+      <RadixAccordion.Content className={styles.Content}>
+        <div className={styles.Body}>{children}</div>
+      </RadixAccordion.Content>
+    </RadixAccordion.Item>
+  );
+}

src/components/AudioContext.tsx

@@ -7,7 +7,8 @@ import {
 } from "react";
 import { useThree } from "@react-three/fiber";
 import { AudioListener, AudioLoader } from "three";
-import { engineStore } from "../state";
+import { engineStore } from "../state/engineStore";
+import { useSettings } from "./SettingsProvider";
 
 interface AudioContextType {
   audioLoader: AudioLoader | null;
@@ -21,7 +22,8 @@ const AudioContext = createContext<AudioContextType | undefined>(undefined);
  * Must be rendered inside the Canvas component.
  */
 export function AudioProvider({ children }: { children: ReactNode }) {
-  const { camera } = useThree();
+  const camera = useThree((state) => state.camera);
+  const { audioVolume } = useSettings();
   const [audioContext, setAudioContext] = useState<AudioContextType>({
     audioLoader: null,
     audioListener: null,
@@ -41,8 +43,6 @@ export function AudioProvider({ children }: { children: ReactNode }) {
       camera.add(listener);
     }
 
-    listener.setMasterVolume(0.8);
-
     setAudioContext({
       audioLoader,
       audioListener: listener,
@@ -51,7 +51,7 @@ export function AudioProvider({ children }: { children: ReactNode }) {
     // Resume the AudioContext on user interaction to satisfy browser autoplay
     // policy. Without this, sounds won't play until the user clicks/taps.
     const resumeOnGesture = () => {
-      const ctx = listener?.context;
+      const ctx = listener.context;
       if (!ctx || ctx.state !== "suspended") return;
       ctx.resume().finally(() => {
         document.removeEventListener("click", resumeOnGesture);
@@ -67,7 +67,7 @@ export function AudioProvider({ children }: { children: ReactNode }) {
     const unsubscribe = engineStore.subscribe(
       (state) => state.playback.status,
       (status) => {
-        const ctx = listener?.context;
+        const ctx = listener.context;
         if (!ctx) return;
         if (status === "paused") {
           ctx.suspend();
@@ -85,6 +85,10 @@ export function AudioProvider({ children }: { children: ReactNode }) {
     };
   }, [camera]);
 
+  useEffect(() => {
+    audioContext.audioListener?.setMasterVolume(audioVolume);
+  }, [audioVolume, audioContext.audioListener]);
+
   return (
     <AudioContext.Provider value={audioContext}>
       {children}

src/components/AudioEmitter.tsx

@@ -8,11 +8,15 @@ import {
   PositionalAudio,
   Vector3,
 } from "three";
+import { createLogger } from "../logger";
 import { audioToUrl } from "../loaders";
 import { useAudio } from "./AudioContext";
 import { useDebug, useSettings } from "./SettingsProvider";
 import { FloatingLabel } from "./FloatingLabel";
-import { engineStore } from "../state";
+import { engineStore } from "../state/engineStore";
+import { AudioEmitterEntity } from "../state/gameEntityTypes";
+
+const log = createLogger("AudioEmitter");
 
 // Global audio buffer cache shared across all audio components.
 export const audioBufferCache = new Map<string, AudioBuffer>();
@@ -50,8 +54,16 @@ export function getSoundGeneration(): number {
 export function stopAllTrackedSounds(): void {
   _soundGeneration++;
   for (const [sound] of _activeSounds) {
-    try { sound.stop(); } catch { /* already stopped */ }
-    try { sound.disconnect(); } catch { /* already disconnected */ }
+    try {
+      sound.stop();
+    } catch {
+      /* already stopped */
+    }
+    try {
+      sound.disconnect();
+    } catch {
+      /* already disconnected */
+    }
   }
   _activeSounds.clear();
 }
@@ -148,7 +160,11 @@ export function playOneShotSound(
         sound.play();
         sound.source!.onended = () => {
           _activeSounds.delete(sound);
-          try { sound.disconnect(); } catch { /* already disconnected */ }
+          try {
+            sound.disconnect();
+          } catch {
+            /* already disconnected */
+          }
           parent.remove(sound);
         };
       } else {
@@ -160,7 +176,11 @@ export function playOneShotSound(
         sound.play();
         sound.source!.onended = () => {
           _activeSounds.delete(sound);
-          try { sound.disconnect(); } catch { /* already disconnected */ }
+          try {
+            sound.disconnect();
+          } catch {
+            /* already disconnected */
+          }
         };
       }
     } catch {
@@ -185,7 +205,7 @@ export function getCachedAudioBuffer(
       },
       undefined,
       (err: any) => {
-        console.error("Audio load error", audioUrl, err);
+        log.error("Audio load error %s: %o", audioUrl, err);
       },
     );
   }
@@ -194,17 +214,7 @@ export function getCachedAudioBuffer(
 export const AudioEmitter = memo(function AudioEmitter({
   entity,
 }: {
-  entity: {
-    audioFileName?: string;
-    audioVolume?: number;
-    audioMinDistance?: number;
-    audioMaxDistance?: number;
-    audioMinLoopGap?: number;
-    audioMaxLoopGap?: number;
-    audioIs3D?: boolean;
-    audioIsLooping?: boolean;
-    position?: [number, number, number];
-  };
+  entity: AudioEmitterEntity;
 }) {
   const { debugMode } = useDebug();
   const fileName = entity.audioFileName ?? "";
@@ -217,7 +227,8 @@ export const AudioEmitter = memo(function AudioEmitter({
   const isLooping = entity.audioIsLooping ?? true;
 
   const [x, y, z] = entity.position ?? [0, 0, 0];
-  const { scene, camera } = useThree();
+  const scene = useThree((state) => state.scene);
+  const camera = useThree((state) => state.camera);
   const { audioLoader, audioListener } = useAudio();
   const { audioEnabled } = useSettings();
 
@@ -268,8 +279,16 @@ export const AudioEmitter = memo(function AudioEmitter({
 
     return () => {
       clearTimers();
-      try { sound.stop(); } catch { /* already stopped */ }
-      try { sound.disconnect(); } catch { /* already disconnected */ }
+      try {
+        sound.stop();
+      } catch {
+        /* already stopped */
+      }
+      try {
+        sound.disconnect();
+      } catch {
+        /* already disconnected */
+      }
       if (is3D) scene.remove(sound);
       soundRef.current = null;
       isLoadedRef.current = false;
@@ -306,7 +325,9 @@ export const AudioEmitter = memo(function AudioEmitter({
             try {
               sound.play();
               setupLooping(sound, gen);
-            } catch { /* expected */ }
+            } catch {
+              /* expected */
+            }
           }, gap);
         } else {
           loopGapIntervalRef.current = setTimeout(checkLoop, 100);
@@ -337,7 +358,9 @@ export const AudioEmitter = memo(function AudioEmitter({
           try {
             sound.play();
             setupLooping(sound, gen);
-          } catch { /* expected */ }
+          } catch {
+            /* expected */
+          }
         }
       });
     } else {
@@ -346,7 +369,9 @@ export const AudioEmitter = memo(function AudioEmitter({
           sound.play();
           setupLooping(sound, gen);
         }
-      } catch { /* expected */ }
+      } catch {
+        /* expected */
+      }
     }
   };
 
@@ -373,7 +398,11 @@ export const AudioEmitter = memo(function AudioEmitter({
     } else if (!isNowInRange && wasInRange) {
       isInRangeRef.current = false;
       clearTimers();
-      try { sound.stop(); } catch { /* expected */ }
+      try {
+        sound.stop();
+      } catch {
+        /* expected */
+      }
     }
   });
 
@@ -384,7 +413,11 @@ export const AudioEmitter = memo(function AudioEmitter({
 
     if (!audioEnabled) {
       clearTimers();
-      try { sound.stop(); } catch { /* expected */ }
+      try {
+        sound.stop();
+      } catch {
+        /* expected */
+      }
       isInRangeRef.current = false;
     }
   }, [audioEnabled]);

src/components/AudioEnabled.tsx

@@ -0,0 +1,7 @@
+import { ReactNode, Suspense } from "react";
+import { useSettings } from "./SettingsProvider";
+
+export function AudioEnabled({ children }: { children: ReactNode }) {
+  const { audioEnabled } = useSettings();
+  return audioEnabled ? <Suspense>{children}</Suspense> : null;
+}

src/components/Camera.tsx

@@ -9,17 +9,12 @@ export function Camera({ entity }: { entity: CameraEntity }) {
 
   const dataBlock = entity.cameraDataBlock;
   const position = useMemo(
-    () =>
-      entity.position
-        ? new Vector3(...entity.position)
-        : new Vector3(),
+    () => (entity.position ? new Vector3(...entity.position) : new Vector3()),
     [entity.position],
   );
   const rotation = useMemo(
     () =>
-      entity.rotation
-        ? new Quaternion(...entity.rotation)
-        : new Quaternion(),
+      entity.rotation ? new Quaternion(...entity.rotation) : new Quaternion(),
     [entity.rotation],
   );
 

src/components/CamerasProvider.tsx

@@ -35,7 +35,7 @@ export function useCameras() {
 }
 
 export function CamerasProvider({ children }: { children: ReactNode }) {
-  const { camera } = useThree();
+  const camera = useThree((state) => state.camera);
   const [cameraIndex, setCameraIndex] = useState(-1);
   const [cameraMap, setCameraMap] = useState<Record<string, CameraEntry>>({});
   const [initialViewState, setInitialViewState] = useState(() => ({
@@ -53,7 +53,8 @@ export function CamerasProvider({ children }: { children: ReactNode }) {
 
   const unregisterCamera = useCallback((camera: CameraEntry) => {
     setCameraMap((prevCameraMap) => {
-      const { [camera.id]: _removedCamera, ...remainingCameras } = prevCameraMap;
+      const { [camera.id]: _removedCamera, ...remainingCameras } =
+        prevCameraMap;
       return remainingCameras;
     });
   }, []);

src/components/ChatInput.module.css

@@ -0,0 +1,26 @@
+.InputForm {
+  display: flex;
+}
+
+.Input {
+  width: 100%;
+  background: rgba(0, 50, 60, 0.8);
+  border: 0;
+  border-top: 1px solid rgba(78, 179, 167, 0.2);
+  border-radius: 0;
+  color: rgb(40, 231, 240);
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 1.25;
+  margin: 0;
+  padding: 6px;
+  outline: none;
+}
+
+.Input::placeholder {
+  color: rgba(44, 172, 181, 0.5);
+}
+
+.Input:focus {
+  background: rgba(0, 50, 60, 0.9);
+}

src/components/ChatInput.tsx

@@ -0,0 +1,33 @@
+import { useCallback, useState } from "react";
+import { liveConnectionStore } from "../state/liveConnectionStore";
+import styles from "./ChatInput.module.css";
+
+export function ChatInput() {
+  const [chatText, setChatText] = useState("");
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      const text = chatText.trim();
+      if (!text) return;
+      liveConnectionStore.getState().sendCommand("messageSent", text);
+      setChatText("");
+    },
+    [chatText],
+  );
+
+  return (
+    <form className={styles.InputForm} onSubmit={handleSubmit}>
+      <input
+        className={styles.Input}
+        type="text"
+        placeholder="Say something…"
+        value={chatText}
+        onChange={(e) => setChatText(e.target.value)}
+        onKeyDown={(e) => e.stopPropagation()}
+        onKeyUp={(e) => e.stopPropagation()}
+        maxLength={255}
+      />
+    </form>
+  );
+}

src/components/ChatSoundPlayer.tsx

@@ -2,9 +2,14 @@ import { useEffect, useRef } from "react";
 import { Audio } from "three";
 import { audioToUrl } from "../loaders";
 import { useAudio } from "./AudioContext";
-import { getCachedAudioBuffer, getSoundGeneration, trackSound, untrackSound } from "./AudioEmitter";
+import {
+  getCachedAudioBuffer,
+  getSoundGeneration,
+  trackSound,
+  untrackSound,
+} from "./AudioEmitter";
 import { useSettings } from "./SettingsProvider";
-import { engineStore, useEngineSelector } from "../state";
+import { engineStore, useEngineSelector } from "../state/engineStore";
 import type { ChatMessage } from "../stream/types";
 
 /**
@@ -13,8 +18,7 @@ import type { ChatMessage } from "../stream/types";
  */
 export function ChatSoundPlayer() {
   const { audioLoader, audioListener } = useAudio();
-  const settings = useSettings();
-  const audioEnabled = settings?.audioEnabled ?? false;
+  const { audioEnabled } = useSettings();
   const messages = useEngineSelector(
     (state) => state.playback.streamSnapshot?.chatMessages,
   );
@@ -24,9 +28,7 @@ export function ChatSoundPlayer() {
   const playedSetRef = useRef(new WeakSet<ChatMessage>());
   // Track active voice chat sound per sender so a new voice bind from the
   // same player stops their previous one (matching Tribes 2 behavior).
-  const activeBySenderRef = useRef(
-    new Map<string, Audio<GainNode>>(),
-  );
+  const activeBySenderRef = useRef(new Map<string, Audio<GainNode>>());
 
   useEffect(() => {
     if (
@@ -58,9 +60,17 @@ export function ChatSoundPlayer() {
           if (sender) {
             const prev = activeBySender.get(sender);
             if (prev) {
-              try { prev.stop(); } catch { /* already stopped */ }
+              try {
+                prev.stop();
+              } catch {
+                /* already stopped */
+              }
               untrackSound(prev);
-              try { prev.disconnect(); } catch { /* already disconnected */ }
+              try {
+                prev.disconnect();
+              } catch {
+                /* already disconnected */
+              }
               activeBySender.delete(sender);
             }
           }
@@ -75,7 +85,11 @@ export function ChatSoundPlayer() {
           // Clean up the source node once playback finishes.
           sound.source!.onended = () => {
             untrackSound(sound);
-            try { sound.disconnect(); } catch { /* already disconnected */ }
+            try {
+              sound.disconnect();
+            } catch {
+              /* already disconnected */
+            }
             if (sender && activeBySender.get(sender) === sound) {
               activeBySender.delete(sender);
             }

src/components/ChatWindow.module.css

@@ -0,0 +1,63 @@
+.ChatContainer {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  width: 400px;
+  max-width: 50%;
+  display: flex;
+  flex-direction: column;
+  pointer-events: auto;
+  border: 1px solid rgba(44, 172, 181, 0.4);
+}
+
+.ChatWindow {
+  max-height: 12.5em;
+  min-height: 4em;
+  overflow-y: auto;
+  background: rgba(0, 50, 60, 0.65);
+  padding: 6px;
+  user-select: text;
+  font-size: 12px;
+  line-height: 1.25;
+  /* Thin scrollbar that doesn't take much space. */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(44, 172, 181, 0.4) transparent;
+}
+
+.ChatMessage {
+  /* Default to \c0 (GuiChatHudProfile fontColor) for untagged messages. */
+  color: rgb(44, 172, 181);
+  padding: 2px 0;
+}
+
+/* T2 GuiChatHudProfile fontColors palette (\c0–\c9). */
+.ChatColor0 {
+  color: rgb(44, 172, 181);
+}
+.ChatColor1 {
+  color: rgb(4, 235, 105);
+}
+.ChatColor2 {
+  color: rgb(219, 200, 128);
+}
+.ChatColor3 {
+  color: rgb(77, 253, 95);
+}
+.ChatColor4 {
+  color: rgb(40, 231, 240);
+}
+.ChatColor5 {
+  color: rgb(200, 200, 50);
+}
+.ChatColor6 {
+  color: rgb(200, 200, 200);
+}
+.ChatColor7 {
+  color: rgb(220, 220, 20);
+}
+.ChatColor8 {
+  color: rgb(150, 150, 250);
+}
+.ChatColor9 {
+  color: rgb(60, 220, 150);
+}

src/components/ChatWindow.tsx

@@ -0,0 +1,84 @@
+import { lazy, memo, Suspense, useEffect, useRef } from "react";
+import { useEngineSelector } from "../state/engineStore";
+import { ChatMessage, ChatSegment } from "../stream/types";
+import styles from "./ChatWindow.module.css";
+
+const ChatInput = lazy(() =>
+  import("./ChatInput").then((mod) => ({ default: mod.ChatInput })),
+);
+
+const EMPTY_MESSAGES: ChatMessage[] = [];
+
+/** Map a colorCode to a CSS module class name (c0–c9 GuiChatHudProfile). */
+const CHAT_COLOR_CLASSES: Record<number, string> = {
+  0: styles.ChatColor0,
+  1: styles.ChatColor1,
+  2: styles.ChatColor2,
+  3: styles.ChatColor3,
+  4: styles.ChatColor4,
+  5: styles.ChatColor5,
+  6: styles.ChatColor6,
+  7: styles.ChatColor7,
+  8: styles.ChatColor8,
+  9: styles.ChatColor9,
+};
+
+function segmentColorClass(colorCode: number): string {
+  return CHAT_COLOR_CLASSES[colorCode] ?? CHAT_COLOR_CLASSES[0];
+}
+
+function chatColorClass(msg: ChatMessage): string {
+  if (msg.colorCode != null && CHAT_COLOR_CLASSES[msg.colorCode]) {
+    return CHAT_COLOR_CLASSES[msg.colorCode];
+  }
+  // Fallback: default to \c0 (teal). Messages with detected codes (like \c2
+  // for flag events) will match above; \c0 kill messages may lose their null
+  // byte color code, so the correct default for server messages is c0.
+  return CHAT_COLOR_CLASSES[0];
+}
+
+export const ChatWindow = memo(function ChatWindow() {
+  const isLive = useEngineSelector(
+    (state) => state.playback.recording?.source === "live",
+  );
+  const messages = useEngineSelector(
+    (state) => state.playback.streamSnapshot?.chatMessages ?? EMPTY_MESSAGES,
+  );
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const lastMessageId = messages[messages.length - 1]?.id;
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [lastMessageId]);
+
+  return (
+    <div className={styles.ChatContainer}>
+      <div ref={scrollRef} className={styles.ChatWindow}>
+        {messages.map((msg: ChatMessage) => (
+          <div key={msg.id} className={styles.ChatMessage} hidden={!msg.text}>
+            {msg.segments ? (
+              msg.segments.map((seg: ChatSegment, j: number) => (
+                <span key={j} className={segmentColorClass(seg.colorCode)}>
+                  {seg.text}
+                </span>
+              ))
+            ) : (
+              <span className={chatColorClass(msg)}>
+                {msg.sender ? `${msg.sender}: ` : ""}
+                {msg.text}
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+      {isLive && (
+        <Suspense>
+          <ChatInput />
+        </Suspense>
+      )}
+    </div>
+  );
+});

src/components/CloudLayers.tsx

@@ -471,16 +471,19 @@ export function CloudLayers({ scene }: CloudLayersProps) {
   const { data: detailMapList } = useDetailMapList(materialList);
 
   // From Tribes 2 sky.cc line 1170: mRadius = visibleDistance * 0.95
-  const visibleDistance = scene.visibleDistance > 0 ? scene.visibleDistance : 500;
+  const visibleDistance =
+    scene.visibleDistance > 0 ? scene.visibleDistance : 500;
   const radius = visibleDistance * 0.95;
 
   const cloudSpeeds = useMemo(
-    () => scene.cloudLayers.map((l, i) => l.speed || [0.0001, 0.0002, 0.0003][i]),
+    () =>
+      scene.cloudLayers.map((l, i) => l.speed || [0.0001, 0.0002, 0.0003][i]),
     [scene.cloudLayers],
   );
 
   const cloudHeights = useMemo(
-    () => scene.cloudLayers.map((l, i) => l.heightPercent || [0.35, 0.25, 0.2][i]),
+    () =>
+      scene.cloudLayers.map((l, i) => l.heightPercent || [0.35, 0.25, 0.2][i]),
     [scene.cloudLayers],
   );
 
@@ -536,7 +539,7 @@ export function CloudLayers({ scene }: CloudLayersProps) {
       {layers.map((layer, i) => {
         const url = textureToUrl(layer.texture);
         return (
-          <Suspense key={i} fallback={null}>
+          <Suspense key={i}>
             <CloudLayer
               textureUrl={url}
               radius={radius}

src/components/CopyCoordinatesButton.tsx

@@ -22,10 +22,12 @@ export function CopyCoordinatesButton({
   cameraRef,
   missionName,
   missionType,
+  disabled,
 }: {
   cameraRef: RefObject<Camera | null>;
   missionName: string;
   missionType: string;
+  disabled?: boolean;
 }) {
   const { fogEnabled } = useSettings();
   const [showCopied, setShowCopied] = useState(false);
@@ -57,15 +59,16 @@ export function CopyCoordinatesButton({
     <button
       type="button"
       className={styles.Root}
-      aria-label="Copy coordinates URL"
-      title="Copy coordinates URL"
+      aria-label="Link to coordinates"
+      title="Copy the current coordinates to URL"
       onClick={handleCopyLink}
+      disabled={disabled}
       data-copied={showCopied ? "true" : "false"}
       id="copyCoordinatesButton"
     >
       <FaMapPin className={styles.MapPin} />
       <FaClipboardCheck className={styles.ClipboardCheck} />
-      <span className={styles.ButtonLabel}> Copy coordinates URL</span>
+      <span className={styles.ButtonLabel}> Link to coordinates</span>
     </button>
   );
 }

src/components/DebugElements.tsx

@@ -1,11 +1,9 @@
 import { Stats, Html } from "@react-three/drei";
-import { useDebug } from "./SettingsProvider";
 import { useEffect, useRef } from "react";
 import { AxesHelper } from "three";
 import styles from "./DebugElements.module.css";
 
 export function DebugElements() {
-  const { debugMode } = useDebug();
   const axesRef = useRef<AxesHelper>(null);
 
   useEffect(() => {
@@ -16,7 +14,7 @@ export function DebugElements() {
     axes.setColors("rgb(153, 255, 0)", "rgb(0, 153, 255)", "rgb(255, 153, 0)");
   });
 
-  return debugMode ? (
+  return (
     <>
       <Stats className={styles.StatsPanel} />
       <axesHelper ref={axesRef} args={[70]} renderOrder={999}>
@@ -43,5 +41,5 @@ export function DebugElements() {
         </span>
       </Html>
     </>
-  ) : null;
+  );
 }

src/components/DebugEnabled.tsx

@@ -0,0 +1,8 @@
+import { ReactNode, Suspense } from "react";
+import { useDebug } from "./SettingsProvider";
+
+export function DebugEnabled({ children }: { children: ReactNode }) {
+  const { debugMode } = useDebug();
+
+  return debugMode ? <Suspense>{children}</Suspense> : null;
+}

src/components/DebugSuspense.tsx

@@ -0,0 +1,50 @@
+import { Suspense, useEffect, type ReactNode } from "react";
+import { createLogger } from "../logger";
+
+const log = createLogger("DebugSuspense");
+
+/**
+ * Suspense wrapper that logs when a component suspends and resolves.
+ * Use in place of `<Suspense>` during debugging to track async loading.
+ */
+export function DebugSuspense({
+  name,
+  fallback = null,
+  children,
+}: {
+  name: string;
+  fallback?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <Suspense
+      name={name}
+      fallback={
+        <DebugSuspenseFallback name={name}>{fallback}</DebugSuspenseFallback>
+      }
+    >
+      <DebugSuspenseResolved name={name} />
+      {children}
+    </Suspense>
+  );
+}
+
+function DebugSuspenseFallback({
+  name,
+  children,
+}: {
+  name: string;
+  children: ReactNode;
+}) {
+  useEffect(() => {
+    log.debug("🛑 SUSPENDED: %s", name);
+  }, [name]);
+  return children;
+}
+
+function DebugSuspenseResolved({ name }: { name: string }) {
+  useEffect(() => {
+    log.debug("✅ RESOLVED: %s", name);
+  }, [name]);
+  return null;
+}

src/components/DemoPlaybackControls.module.css

@@ -1,14 +1,8 @@
 .Root {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 12px;
-  background: rgba(0, 0, 0, 0.7);
-  color: #fff;
   font-size: 13px;
   z-index: 2;
 }

src/components/DemoPlaybackControls.tsx

@@ -78,6 +78,7 @@ export function DemoPlaybackControls() {
         className={styles.PlayPause}
         onClick={isPlaying ? pause : play}
         aria-label={isPlaying ? "Pause" : "Play"}
+        autoFocus
       >
         {isPlaying ? "\u275A\u275A" : "\u25B6"}
       </button>

src/components/EntityRenderer.tsx

@@ -1,20 +1,15 @@
-import { lazy, memo, Suspense, useRef } from "react";
+import { lazy, memo, useRef } from "react";
 import { useFrame } from "@react-three/fiber";
 import type { Group } from "three";
 import type {
   GameEntity,
   ShapeEntity as ShapeEntityType,
-  ForceFieldBareEntity as ForceFieldBareEntityType,
-  PlayerEntity as PlayerEntityType,
-  ExplosionEntity as ExplosionEntityType,
-  TracerEntity as TracerEntityType,
-  SpriteEntity as SpriteEntityType,
-  AudioEmitterEntity as AudioEmitterEntityType,
 } from "../state/gameEntityTypes";
-import { streamPlaybackStore } from "../state/streamPlaybackStore";
-import { ShapeRenderer } from "./GenericShape";
+import { ShapeRenderer, ShapePlaceholder } from "./GenericShape";
 import { ShapeInfoProvider } from "./ShapeInfoProvider";
 import type { StaticShapeType } from "./ShapeInfoProvider";
+import { DebugSuspense } from "./DebugSuspense";
+import { ShapeErrorBoundary } from "./ShapeErrorBoundary";
 import { FloatingLabel } from "./FloatingLabel";
 import { useSettings } from "./SettingsProvider";
 import { Camera } from "./Camera";
@@ -22,44 +17,51 @@ import { WayPoint } from "./WayPoint";
 import { TerrainBlock } from "./TerrainBlock";
 import { InteriorInstance } from "./InteriorInstance";
 import { Sky } from "./Sky";
+import { AudioEnabled } from "./AudioEnabled";
 import type { TorqueObject } from "../torqueScript";
 
-// Lazy-loaded heavy renderers
-const PlayerModel = lazy(() =>
-  import("./PlayerModel").then((mod) => ({ default: mod.PlayerModel })),
-);
+function createLazy<K extends string>(
+  name: K,
+  loader: () => Promise<Record<K, React.ComponentType<any>>>,
+): React.ComponentType<{ entity: GameEntity }> {
+  const LazyComponent = lazy(() =>
+    loader().then((mod) => {
+      const NamedComponent = mod[name];
+      return { default: NamedComponent };
+    }),
+  );
+  const LazyComponentWithSuspense = ({ entity }: { entity: GameEntity }) => {
+    return (
+      <DebugSuspense name={`${name}:${entity.id}`}>
+        <LazyComponent entity={entity} />
+      </DebugSuspense>
+    );
+  };
 
-const ExplosionShape = lazy(() =>
-  import("./ShapeModel").then((mod) => ({
-    default: mod.ExplosionShape,
-  })),
-);
+  LazyComponentWithSuspense.displayName = `createLazy(${name})`;
+  return LazyComponentWithSuspense;
+}
 
-const TracerProjectile = lazy(() =>
-  import("./Projectiles").then((mod) => ({
-    default: mod.TracerProjectile,
-  })),
+const PlayerModel = createLazy("PlayerModel", () => import("./PlayerModel"));
+const ExplosionShape = createLazy(
+  "ExplosionShape",
+  () => import("./ShapeModel"),
 );
-
-const SpriteProjectile = lazy(() =>
-  import("./Projectiles").then((mod) => ({
-    default: mod.SpriteProjectile,
-  })),
+const TracerProjectile = createLazy(
+  "TracerProjectile",
+  () => import("./Projectiles"),
 );
-
-const ForceFieldBareRenderer = lazy(() =>
-  import("./ForceFieldBare").then((mod) => ({
-    default: mod.ForceFieldBare,
-  })),
+const SpriteProjectile = createLazy(
+  "SpriteProjectile",
+  () => import("./Projectiles"),
 );
-
-const AudioEmitter = lazy(() =>
-  import("./AudioEmitter").then((mod) => ({ default: mod.AudioEmitter })),
-);
-
-const WaterBlock = lazy(() =>
-  import("./WaterBlock").then((mod) => ({ default: mod.WaterBlock })),
+const ForceFieldBare = createLazy(
+  "ForceFieldBare",
+  () => import("./ForceFieldBare"),
 );
+const AudioEmitter = createLazy("AudioEmitter", () => import("./AudioEmitter"));
+const WaterBlock = createLazy("WaterBlock", () => import("./WaterBlock"));
+const WeaponModel = createLazy("WeaponModel", () => import("./ShapeModel"));
 
 const TEAM_NAMES: Record<number, string> = {
   1: "Storm",
@@ -81,17 +83,21 @@ export const EntityRenderer = memo(function EntityRenderer({
     case "Shape":
       return <ShapeEntity entity={entity} />;
     case "ForceFieldBare":
-      return <ForceFieldBareEntity entity={entity} />;
+      return <ForceFieldBare entity={entity} />;
     case "Player":
-      return <PlayerEntity entity={entity} />;
+      return <PlayerModel entity={entity} />;
     case "Explosion":
-      return <ExplosionEntity entity={entity} />;
+      return <ExplosionShape entity={entity} />;
     case "Tracer":
-      return <TracerEntity entity={entity} />;
+      return <TracerProjectile entity={entity} />;
     case "Sprite":
-      return <SpriteEntity entity={entity} />;
+      return <SpriteProjectile entity={entity} />;
     case "AudioEmitter":
-      return <AudioEntity entity={entity} />;
+      return (
+        <AudioEnabled>
+          <AudioEmitter entity={entity} />
+        </AudioEnabled>
+      );
     case "Camera":
       return <Camera entity={entity} />;
     case "WayPoint":
@@ -101,25 +107,21 @@ export const EntityRenderer = memo(function EntityRenderer({
     case "InteriorInstance":
       return <InteriorInstance scene={entity.interiorData} />;
     case "Sky":
-      return <Sky scene={entity.skyData} />;
+      return <Sky entity={entity} />;
     case "Sun":
       // Sun lighting is handled by SceneLighting (rendered outside EntityScene)
       return null;
     case "WaterBlock":
-      return (
-        <Suspense fallback={null}>
-          <WaterBlock scene={entity.waterData} />
-        </Suspense>
-      );
+      return <WaterBlock entity={entity} />;
     case "MissionArea":
       return null;
     case "None":
       return null;
+    default:
+      return null;
   }
 });
 
-// ── Shape Entity ──
-
 function ShapeEntity({ entity }: { entity: ShapeEntityType }) {
   const { animationEnabled } = useSettings();
   const groupRef = useRef<Group>(null);
@@ -131,7 +133,9 @@ function ShapeEntity({ entity }: { entity: ShapeEntityType }) {
     groupRef.current.rotation.y = (t / 3.0) * Math.PI * 2;
   });
 
-  if (!entity.shapeName) return null;
+  if (!entity.shapeName) {
+    throw new Error(`Shape entity missing shapeName: ${entity.id}`);
+  }
 
   const torqueObject = entity.runtimeObject as TorqueObject | undefined;
   const shapeType = (entity.shapeType ?? "StaticShape") as StaticShapeType;
@@ -156,7 +160,10 @@ function ShapeEntity({ entity }: { entity: ShapeEntityType }) {
       type={shapeType}
     >
       <group ref={entity.rotate ? groupRef : undefined}>
-        <ShapeRenderer loadingColor={loadingColor} streamEntity={torqueObject ? undefined : entity}>
+        <ShapeRenderer
+          loadingColor={loadingColor}
+          streamEntity={torqueObject ? undefined : entity}
+        >
           {flagLabel ? (
             <FloatingLabel opacity={0.6}>{flagLabel}</FloatingLabel>
           ) : null}
@@ -172,92 +179,26 @@ function ShapeEntity({ entity }: { entity: ShapeEntityType }) {
             </group>
           </ShapeInfoProvider>
         )}
+        {entity.weaponShape && (
+          <ShapeErrorBoundary
+            fallback={
+              <ShapePlaceholder color="red" label={entity.weaponShape} />
+            }
+          >
+            <DebugSuspense
+              name={`Weapon:${entity.id}/${entity.weaponShape}`}
+              fallback={
+                <ShapePlaceholder color="cyan" label={entity.weaponShape} />
+              }
+            >
+              <WeaponModel
+                shapeName={entity.weaponShape}
+                playerShapeName={entity.shapeName}
+              />
+            </DebugSuspense>
+          </ShapeErrorBoundary>
+        )}
       </group>
     </ShapeInfoProvider>
   );
 }
-
-// ── Force Field Entity ──
-
-function ForceFieldBareEntity({ entity }: { entity: ForceFieldBareEntityType }) {
-  if (!entity.forceFieldData) return null;
-  return (
-    <Suspense fallback={null}>
-      <ForceFieldBareRenderer
-        data={entity.forceFieldData}
-        scale={entity.forceFieldData.dimensions}
-      />
-    </Suspense>
-  );
-}
-
-// ── Player Entity ──
-
-function PlayerEntity({ entity }: { entity: PlayerEntityType }) {
-  if (!entity.shapeName) return null;
-
-  return (
-    <Suspense fallback={null}>
-      <PlayerModel entity={entity} />
-    </Suspense>
-  );
-}
-
-// ── Explosion Entity ──
-
-function ExplosionEntity({ entity }: { entity: ExplosionEntityType }) {
-  const playback = streamPlaybackStore.getState().playback;
-
-  // ExplosionShape still expects a StreamEntity-shaped object.
-  // Adapt minimally until that component is also refactored.
-  const streamEntity = {
-    id: entity.id,
-    type: "Explosion" as const,
-    dataBlock: entity.shapeName,
-    position: entity.position,
-    rotation: entity.rotation,
-    faceViewer: entity.faceViewer,
-    explosionDataBlockId: entity.explosionDataBlockId,
-  };
-
-  if (!entity.shapeName || !playback) return null;
-
-  return (
-    <Suspense fallback={null}>
-      <ExplosionShape entity={streamEntity as any} playback={playback} />
-    </Suspense>
-  );
-}
-
-// ── Tracer Entity ──
-
-function TracerEntity({ entity }: { entity: TracerEntityType }) {
-  return (
-    <Suspense fallback={null}>
-      <TracerProjectile entity={entity} visual={entity.visual} />
-    </Suspense>
-  );
-}
-
-// ── Sprite Entity ──
-
-function SpriteEntity({ entity }: { entity: SpriteEntityType }) {
-  return (
-    <Suspense fallback={null}>
-      <SpriteProjectile visual={entity.visual} />
-    </Suspense>
-  );
-}
-
-// ── Audio Entity ──
-
-function AudioEntity({ entity }: { entity: AudioEmitterEntityType }) {
-  const { audioEnabled } = useSettings();
-  if (!entity.audioFileName || !audioEnabled) return null;
-
-  return (
-    <Suspense fallback={null}>
-      <AudioEmitter entity={entity} />
-    </Suspense>
-  );
-}

src/components/EntityScene.tsx

@@ -1,25 +1,21 @@
-import { lazy, memo, Suspense, useCallback, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useRef, useState, useMemo } from "react";
 import { Quaternion } from "three";
 import type { Group } from "three";
 import { useFrame } from "@react-three/fiber";
-import { useAllGameEntities } from "../state";
-import type { GameEntity, PositionedEntity, PlayerEntity } from "../state/gameEntityTypes";
+import { useAllGameEntities } from "../state/gameEntityStore";
+import type {
+  GameEntity,
+  PositionedEntity,
+  PlayerEntity,
+} from "../state/gameEntityTypes";
 import { isSceneEntity } from "../state/gameEntityTypes";
 import { streamPlaybackStore } from "../state/streamPlaybackStore";
 import { EntityRenderer } from "./EntityRenderer";
+import { ShapeErrorBoundary } from "./ShapeErrorBoundary";
 import { PlayerNameplate } from "./PlayerNameplate";
 import { FlagMarker } from "./FlagMarker";
-import { FloatingLabel } from "./FloatingLabel";
 import { entityTypeColor } from "../stream/playbackUtils";
-import { useDebug } from "./SettingsProvider";
-import { useEngineSelector } from "../state";
-
-
-const WeaponModel = lazy(() =>
-  import("./ShapeModel").then((mod) => ({
-    default: mod.WeaponModel,
-  })),
-);
+import { useEngineSelector } from "../state/engineStore";
 
 /**
  * The ONE rendering component tree for all game entities.
@@ -27,39 +23,28 @@ const WeaponModel = lazy(() =>
  * Data sources (mission .mis, demo .rec, live server) are controllers that
  * populate the store — this component doesn't know or care which is active.
  */
-export function EntityScene({ missionType }: { missionType?: string }) {
-  const debug = useDebug();
-  const debugMode = debug?.debugMode ?? false;
-
+export function EntityScene() {
   const rootRef = useCallback((node: Group | null) => {
     streamPlaybackStore.setState({ root: node });
   }, []);
 
   return (
     <group ref={rootRef}>
-      <EntityLayer missionType={missionType} debugMode={debugMode} />
+      <EntityLayer />
     </group>
   );
 }
 
 /** Renders all game entities. Uses an ID-stable selector so the component
  * only re-renders when entities are added or removed, not when their
- * fields change. Entity references are cached so that once an entity
- * renders and loads resources via Suspense, it keeps its reference stable. */
-const EntityLayer = memo(function EntityLayer({
-  missionType,
-  debugMode,
-}: {
-  missionType?: string;
-  debugMode: boolean;
-}) {
+ * fields change. */
+const EntityLayer = memo(function EntityLayer() {
   const entities = useAllGameEntities();
 
   // Cache entity references by ID so that in-place field mutations
-  // (threads, colors, weapon shape) don't cause React to see a new
-  // object and remount Suspense boundaries. The cache IS updated when
-  // the store provides a genuinely new object reference (identity
-  // rebuild: armor change, datablock change, etc.).
+  // (threads, colors, weapon shape) don't cause unnecessary remounts.
+  // The cache IS updated when the store provides a genuinely new object
+  // reference (identity rebuild: armor change, datablock change, etc.).
   const cacheRef = useRef(new Map<string, GameEntity>());
   const cache = cacheRef.current;
 
@@ -75,29 +60,10 @@ const EntityLayer = memo(function EntityLayer({
     }
   }
 
-  const filtered = useMemo(() => {
-    const result: GameEntity[] = [];
-    const lowerType = missionType?.toLowerCase();
-    for (const entity of cache.values()) {
-      if (lowerType && entity.missionTypesList) {
-        const types = new Set(
-          entity.missionTypesList
-            .toLowerCase()
-            .split(/\s+/)
-            .filter(Boolean),
-        );
-        if (types.size > 0 && !types.has(lowerType)) continue;
-      }
-      result.push(entity);
-    }
-    return result;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [entities, missionType]);
-
   return (
     <>
-      {filtered.map((entity) => (
-        <EntityWrapper key={entity.id} entity={entity} debugMode={debugMode} />
+      {[...cache.values()].map((entity) => (
+        <EntityWrapper key={entity.id} entity={entity} />
       ))}
     </>
   );
@@ -105,13 +71,11 @@ const EntityLayer = memo(function EntityLayer({
 
 const EntityWrapper = memo(function EntityWrapper({
   entity,
-  debugMode,
 }: {
   entity: GameEntity;
-  debugMode: boolean;
 }) {
-  // Scene infrastructure handles its own positioning — render directly.
-  // The named group allows the interpolation loop to identify and skip them.
+  // Scene infrastructure handles its own positioning and Suspense — render
+  // directly. The named group allows the interpolation loop to skip them.
   if (isSceneEntity(entity)) {
     return (
       <group name={entity.id}>
@@ -123,14 +87,13 @@ const EntityWrapper = memo(function EntityWrapper({
   if (entity.renderType === "None") return null;
 
   // From here, entity is a PositionedEntity
-  return <PositionedEntityWrapper entity={entity} debugMode={debugMode} />;
+  return <PositionedEntityWrapper entity={entity} />;
 });
 
 /** Renders the player nameplate, subscribing to controlPlayerGhostId
- * internally so that PositionedEntityWrapper doesn't need to. This keeps
+ * internally so that PositionedEntityWrapper doesn't need to. Keeps
  * engine store mutations from triggering synchronous selector evaluations
- * on every positioned entity (which was starving Suspense retries for
- * shape GLB loading). */
+ * on every positioned entity. */
 function PlayerNameplateIfVisible({ entity }: { entity: PlayerEntity }) {
   const controlPlayerGhostId = useEngineSelector(
     (state) => state.playback.streamSnapshot?.controlPlayerGhostId,
@@ -146,13 +109,19 @@ function PlayerNameplateIfVisible({ entity }: { entity: PlayerEntity }) {
 function FlagMarkerSlot({ entity }: { entity: GameEntity }) {
   const flagRef = useRef(false);
   const [isFlag, setIsFlag] = useState(() => {
-    const flags = "targetRenderFlags" in entity ? (entity.targetRenderFlags as number | undefined) : undefined;
+    const flags =
+      "targetRenderFlags" in entity
+        ? (entity.targetRenderFlags as number | undefined)
+        : undefined;
     return ((flags ?? 0) & 0x2) !== 0;
   });
   flagRef.current = isFlag;
 
   useFrame(() => {
-    const flags = "targetRenderFlags" in entity ? (entity.targetRenderFlags as number | undefined) : undefined;
+    const flags =
+      "targetRenderFlags" in entity
+        ? (entity.targetRenderFlags as number | undefined)
+        : undefined;
     const nowFlag = ((flags ?? 0) & 0x2) !== 0;
     if (nowFlag !== flagRef.current) {
       flagRef.current = nowFlag;
@@ -161,19 +130,13 @@ function FlagMarkerSlot({ entity }: { entity: GameEntity }) {
   });
 
   if (!isFlag) return null;
-  return (
-    <Suspense fallback={null}>
-      <FlagMarker entity={entity} />
-    </Suspense>
-  );
+  return <FlagMarker entity={entity} />;
 }
 
 function PositionedEntityWrapper({
   entity,
-  debugMode,
 }: {
   entity: PositionedEntity;
-  debugMode: boolean;
 }) {
   const position = entity.position;
   const scale = entity.scale;
@@ -187,7 +150,12 @@ function PositionedEntityWrapper({
   // Entities without a resolved shape get a wireframe placeholder.
   if (entity.renderType === "Shape" && !entity.shapeName) {
     return (
-      <group name={entity.id} position={position} quaternion={quaternion} scale={scale}>
+      <group
+        name={entity.id}
+        position={position}
+        quaternion={quaternion}
+        scale={scale}
+      >
         <mesh>
           <sphereGeometry args={[0.3, 6, 4]} />
           <meshBasicMaterial
@@ -195,7 +163,6 @@ function PositionedEntityWrapper({
             wireframe
           />
         </mesh>
-        {debugMode && <MissingShapeLabel entity={entity} />}
         <FlagMarkerSlot entity={entity} />
       </group>
     );
@@ -212,82 +179,22 @@ function PositionedEntityWrapper({
       </mesh>
     );
 
-  const shapeName = "shapeName" in entity ? entity.shapeName : undefined;
-  const weaponShape = "weaponShape" in entity ? entity.weaponShape : undefined;
-
   return (
-    <group name={entity.id} position={position} quaternion={quaternion} scale={scale}>
+    <group
+      name={entity.id}
+      position={position}
+      quaternion={quaternion}
+      scale={scale}
+    >
       <group name="model">
         <ShapeErrorBoundary fallback={fallback}>
-          <Suspense fallback={fallback}>
-            <EntityRenderer entity={entity} />
-          </Suspense>
+          <EntityRenderer entity={entity} />
         </ShapeErrorBoundary>
         {isPlayer && (
-          <Suspense fallback={null}>
-            <PlayerNameplateIfVisible entity={entity as PlayerEntity} />
-          </Suspense>
+          <PlayerNameplateIfVisible entity={entity as PlayerEntity} />
         )}
         <FlagMarkerSlot entity={entity} />
-        {debugMode && !shapeName && entity.renderType !== "Shape" && (
-          <MissingShapeLabel entity={entity} />
-        )}
       </group>
-      {weaponShape && shapeName && !isPlayer && (
-        <group name="weapon">
-          <ShapeErrorBoundary fallback={null}>
-            <Suspense fallback={null}>
-              <WeaponModel
-                shapeName={weaponShape}
-                playerShapeName={shapeName}
-              />
-            </Suspense>
-          </ShapeErrorBoundary>
-        </group>
-      )}
     </group>
   );
 }
-
-function MissingShapeLabel({ entity }: { entity: GameEntity }) {
-  const bits: string[] = [];
-  bits.push(`${entity.id} (${entity.className})`);
-  if (typeof entity.ghostIndex === "number") bits.push(`ghost ${entity.ghostIndex}`);
-  if (typeof entity.dataBlockId === "number") bits.push(`db ${entity.dataBlockId}`);
-  bits.push(
-    entity.shapeHint
-      ? `shapeHint ${entity.shapeHint}`
-      : "shapeHint <none resolved>",
-  );
-  return <FloatingLabel color="#ff6688">{bits.join(" | ")}</FloatingLabel>;
-}
-
-/** Error boundary that renders a fallback when shape loading fails. */
-import { Component } from "react";
-import type { ErrorInfo, ReactNode } from "react";
-
-export class ShapeErrorBoundary extends Component<
-  { children: ReactNode; fallback: ReactNode },
-  { hasError: boolean }
-> {
-  state = { hasError: false };
-
-  static getDerivedStateFromError() {
-    return { hasError: true };
-  }
-
-  componentDidCatch(error: Error, info: ErrorInfo) {
-    console.warn(
-      "[entity] Shape load failed:",
-      error.message,
-      info.componentStack,
-    );
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return this.props.fallback;
-    }
-    return this.props.children;
-  }
-}

src/components/FlagMarker.tsx

@@ -3,6 +3,7 @@ import { useFrame, useThree } from "@react-three/fiber";
 import { Html } from "@react-three/drei";
 import { Group, Vector3 } from "three";
 import { textureToUrl } from "../loaders";
+
 interface FlagEntity {
   id: string;
   iffColor?: { r: number; g: number; b: number };
@@ -10,7 +11,6 @@ interface FlagEntity {
 import styles from "./FlagMarker.module.css";
 
 const FLAG_ICON_HEIGHT = 1.5;
-
 const FLAG_ICON_URL = textureToUrl("commander/MiniIcons/com_flag_grey");
 
 const _tmpVec = new Vector3();
@@ -24,7 +24,7 @@ export function FlagMarker({ entity }: { entity: FlagEntity }) {
   const markerRef = useRef<Group>(null);
   const iconRef = useRef<HTMLDivElement>(null);
   const distRef = useRef<HTMLSpanElement>(null);
-  const { camera } = useThree();
+  const camera = useThree((state) => state.camera);
 
   useFrame(() => {
     // Tint imperatively — iffColor is mutated in-place by streaming playback.
@@ -52,10 +52,12 @@ export function FlagMarker({ entity }: { entity: FlagEntity }) {
           <div
             ref={iconRef}
             className={styles.Icon}
-            style={{
-              backgroundColor: initialColor,
-              "--flag-icon-url": `url(${FLAG_ICON_URL})`,
-            } as React.CSSProperties}
+            style={
+              {
+                backgroundColor: initialColor,
+                "--flag-icon-url": `url(${FLAG_ICON_URL})`,
+              } as React.CSSProperties
+            }
           />
         </div>
       </Html>

src/components/FogProvider.tsx

@@ -208,7 +208,14 @@ export function fogStateFromScene(sky: SceneSky): FogState {
 
   const enabled = visibleDistance > fogDistance;
 
-  return { fogDistance, visibleDistance, fogColor, fogVolumes, fogLine, enabled };
+  return {
+    fogDistance,
+    visibleDistance,
+    fogColor,
+    fogVolumes,
+    fogLine,
+    enabled,
+  };
 }
 
 /**

src/components/ForceFieldBare.tsx

@@ -1,4 +1,5 @@
-import { Suspense, useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
+import { DebugSuspense } from "./DebugSuspense";
 import { useTexture } from "@react-three/drei";
 import { useFrame } from "@react-three/fiber";
 import {
@@ -10,7 +11,10 @@ import {
   RepeatWrapping,
 } from "three";
 import type { Texture } from "three";
-import type { ForceFieldData } from "../state/gameEntityTypes";
+import type {
+  ForceFieldBareEntity,
+  ForceFieldData,
+} from "../state/gameEntityTypes";
 import { textureToUrl } from "../loaders";
 import { useSettings } from "./SettingsProvider";
 import {
@@ -126,13 +130,10 @@ function ForceFieldMesh({
  * Renders a ForceFieldBare from pre-resolved ForceFieldData.
  * Used by the unified EntityRenderer — does NOT read from TorqueObject/datablock.
  */
-export function ForceFieldBare({
-  data,
-  scale,
-}: {
-  data: ForceFieldData;
-  scale: [number, number, number];
-}) {
+export function ForceFieldBare({ entity }: { entity: ForceFieldBareEntity }) {
+  const data = entity.forceFieldData;
+  const scale = data.dimensions;
+
   const textureUrls = useMemo(
     () => data.textures.map((t) => textureToUrl(t)),
     [data.textures],
@@ -149,7 +150,8 @@ export function ForceFieldBare({
   }
 
   return (
-    <Suspense
+    <DebugSuspense
+      name={`ForceField`}
       fallback={
         <ForceFieldFallback
           scale={scale}
@@ -159,6 +161,6 @@ export function ForceFieldBare({
       }
     >
       <ForceFieldMesh scale={scale} data={data} />
-    </Suspense>
+    </DebugSuspense>
   );
 }

src/components/GameDialog.module.css

@@ -1,4 +1,33 @@
-/* Shared button base for dialog actions (server browser, map info, etc.). */
+.Dialog {
+  position: relative;
+  max-width: calc(100dvw - 40px);
+  max-height: calc(100dvh - 40px);
+  background: rgba(20, 37, 38, 0.8);
+  border: 1px solid rgba(65, 131, 139, 0.6);
+  border-radius: 4px;
+  box-shadow:
+    0 0 50px rgba(0, 0, 0, 0.4),
+    inset 0 0 60px rgba(1, 7, 13, 0.6);
+  color: #b0d5c9;
+  font-size: 14px;
+  line-height: 1.5;
+  overflow: hidden;
+  outline: none;
+  user-select: text;
+  -webkit-touch-callout: default;
+}
+
+.Overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
 .DialogButton {
   background: linear-gradient(
     to bottom,

src/components/GenericShape.tsx

@@ -2,6 +2,7 @@ import { memo, Suspense, useEffect, useMemo, useRef } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { useGLTF, useTexture } from "@react-three/drei";
 import { useFrame } from "@react-three/fiber";
+import { createLogger } from "../logger";
 import { FALLBACK_TEXTURE_URL, textureToUrl, shapeToUrl } from "../loaders";
 import {
   MeshStandardMaterial,
@@ -21,7 +22,7 @@ import * as SkeletonUtils from "three/examples/jsm/utils/SkeletonUtils.js";
 import { setupTexture } from "../textureUtils";
 import { useDebug, useSettings } from "./SettingsProvider";
 import { useShapeInfo, isOrganicShape } from "./ShapeInfoProvider";
-import { useEngineSelector, effectNow, engineStore } from "../state";
+import { useEngineSelector, effectNow, engineStore } from "../state/engineStore";
 import { FloatingLabel } from "./FloatingLabel";
 import {
   useIflTexture,
@@ -39,6 +40,8 @@ import {
 } from "../stream/playbackUtils";
 import type { ThreadState as StreamThreadState } from "../stream/types";
 
+const log = createLogger("GenericShape");
+
 /** Returns pausable time in seconds for demo mode, real time otherwise. */
 function shapeNowSec(): number {
   const { recording } = engineStore.getState().playback;
@@ -271,9 +274,7 @@ const StaticTexture = memo(function StaticTexture({
 
   const url = useMemo(() => {
     if (!resourcePath) {
-      console.warn(
-        `No resource_path was found on "${shapeName}" - rendering fallback.`,
-      );
+      log.warn("No resource_path found on \"%s\" — rendering fallback", shapeName);
     }
     return resourcePath ? textureToUrl(resourcePath) : FALLBACK_TEXTURE_URL;
   }, [resourcePath, shapeName]);
@@ -662,10 +663,7 @@ export const ShapeModel = memo(function ShapeModel({
           iflMeshAtlasRef.current.set(info.mesh, atlas);
         })
         .catch((err) => {
-          console.warn(
-            `[ShapeModel] Failed to load IFL atlas for ${info.iflPath}:`,
-            err,
-          );
+          log.warn("Failed to load IFL atlas for %s: %o", info.iflPath, err);
         });
     }
   }, [iflMeshes]);

src/components/InputHandlers.tsx

@@ -0,0 +1,37 @@
+import { lazy, ReactNode, Suspense } from "react";
+import { KeyboardControls } from "@react-three/drei";
+import { JoystickProvider } from "./JoystickContext";
+import { useTouchDevice } from "./useTouchDevice";
+import {
+  KeyboardAndMouseHandler,
+  KEYBOARD_CONTROLS,
+} from "./KeyboardAndMouseHandler";
+
+const TouchHandler = lazy(() =>
+  import("@/src/components/TouchHandler").then((mod) => ({
+    default: mod.TouchHandler,
+  })),
+);
+
+export function InputProvider({ children }: { children: ReactNode }) {
+  return (
+    <KeyboardControls map={KEYBOARD_CONTROLS}>
+      <JoystickProvider>{children}</JoystickProvider>
+    </KeyboardControls>
+  );
+}
+
+export function InputHandlers() {
+  const isTouch = useTouchDevice();
+
+  return (
+    <>
+      <KeyboardAndMouseHandler />
+      {isTouch ? (
+        <Suspense>
+          <TouchHandler />
+        </Suspense>
+      ) : null}
+    </>
+  );
+}

src/components/InspectorControls.module.css

@@ -1,57 +1,170 @@
-.Controls {
-  position: fixed;
-  top: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.5);
-  color: #fff;
-  padding: 8px 12px 8px 8px;
-  border-radius: 0 0 4px 0;
+.InspectorControls {
+  position: relative;
   font-size: 13px;
+  line-height: 1.231;
   z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
 }
+
 .Dropdown {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: stretch;
   justify-content: center;
-  gap: 20px;
+  gap: 0;
 }
+
+.ButtonGroup {
+  width: 100%;
+  flex: 1 0 auto;
+  display: flex;
+  align-items: stretch;
+}
+
+.ButtonGroup .IconButton {
+  flex: 1 0 0;
+  flex-direction: column;
+  gap: 1px;
+  font-size: 22px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.ButtonGroup .IconButton svg {
+  margin-bottom: 3px;
+}
+
+.ButtonGroup .IconButton[data-active="true"] {
+  background: rgb(5, 114, 177);
+}
+
+.ButtonGroup .IconButton:not(:first-child) {
+  border-left: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.ButtonGroup .IconButton:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .Group {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 20px;
 }
-.CheckboxField,
+
 .LabelledButton {
   display: flex;
   align-items: center;
   gap: 6px;
 }
-.Field {
+
+.CheckboxField {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto;
+  align-items: center;
+  gap: 0 6px;
+  margin: 0 0 6px 0;
+}
+
+.CheckboxField input[type="checkbox"] {
+  margin-left: 0;
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.CheckboxField .Label {
+  grid-column: 2;
+  grid-row: 1;
   display: flex;
   align-items: center;
   gap: 6px;
 }
+
+.Description {
+  font-size: 12px;
+  line-height: 1.3333;
+  opacity: 0.6;
+  margin: 2px 0 4px 0;
+  padding: 0;
+}
+
+.CheckboxField .Description {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.Control {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.Field select {
+  margin-bottom: 6px;
+}
+
+.Field output {
+  opacity: 0.7;
+}
+
+.Tools {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 10px;
+}
+
+.Field {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  align-items: center;
+  margin: 0 0 6px 0;
+}
+
+.Field label {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.Field .Control {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.Field .Description {
+  grid-column: 1 / -1;
+  grid-row: 2;
+}
+
 .IconButton {
+  flex: 1 1 auto;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: auto;
+  height: auto;
   min-width: 28px;
-  height: 28px;
-  margin: 0 0 0 -12px;
-  font-size: 15px;
-  padding: 0;
+  min-height: 32px;
+  gap: 8px;
+  margin: 0;
+  font-family: inherit;
+  font-size: 18px;
+  font-weight: 500;
+  padding: 4px 8px;
   border-top: 1px solid rgba(255, 255, 255, 0.3);
   border-left: 1px solid rgba(255, 255, 255, 0.3);
   border-right: 1px solid rgba(200, 200, 200, 0.3);
   border-bottom: 1px solid rgba(200, 200, 200, 0.3);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
-  border-radius: 4px;
+  border-radius: 5px;
   background: rgba(3, 82, 147, 0.6);
   color: #fff;
   cursor: pointer;
@@ -60,92 +173,69 @@
     background 0.2s,
     border-color 0.2s;
 }
+
 .IconButton svg {
+  flex: 0 0 auto;
   pointer-events: none;
+  opacity: 0.6;
+  transition: opacity 0.2s;
 }
+
+.IconButton:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
 @media (hover: hover) {
-  .IconButton:hover {
+  .IconButton:not(:disabled):hover {
     background: rgba(0, 98, 179, 0.8);
     border-color: rgba(255, 255, 255, 0.4);
   }
+
+  .IconButton:not(:disabled):hover svg {
+    opacity: 1;
+  }
 }
-.IconButton:active,
+
+.IconButton:not(:disabled):active,
 .IconButton[aria-expanded="true"] {
   background: rgba(0, 98, 179, 0.7);
   border-color: rgba(255, 255, 255, 0.3);
   transform: translate(0, 1px);
 }
+
 .IconButton[data-active="true"] {
   background: rgba(0, 117, 213, 0.9);
   border-color: rgba(255, 255, 255, 0.4);
 }
+
 .ButtonLabel {
-  font-size: 12px;
+  font-size: 14px;
 }
+
+.ButtonHint {
+  font-size: 10px;
+  opacity: 0.7;
+}
+
 .Toggle {
   composes: IconButton;
   margin: 0;
 }
+
 .MapInfoButton {
   composes: IconButton;
   composes: LabelledButton;
 }
-.MissionSelectWrapper {
-}
-@media (max-width: 1279px) {
-  .Dropdown[data-open="false"] {
-    display: none;
-  }
-  .Dropdown {
-    position: absolute;
-    top: calc(100% + 2px);
-    left: 2px;
-    right: 2px;
-    display: flex;
-    overflow: auto;
-    max-height: calc(100dvh - 56px);
-    flex-direction: column;
-    align-items: center;
-    gap: 12px;
-    background: rgba(0, 0, 0, 0.8);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 4px;
-    padding: 12px;
-    box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
-  }
-  .Group {
-    flex-wrap: wrap;
-    gap: 12px 20px;
-  }
-  .LabelledButton {
-    width: auto;
-    padding: 0 10px;
-  }
-}
-@media (max-width: 639px) {
-  .Controls {
-    right: 0;
-    border-radius: 0;
-  }
-  .MissionSelectWrapper {
-    flex: 1 1 0;
-    min-width: 0;
-  }
-  .MissionSelectWrapper input {
-    width: 100%;
-  }
-  .Toggle {
-    flex: 0 0 auto;
-  }
-}
-@media (min-width: 1280px) {
-  .Toggle {
-    display: none;
-  }
-  .LabelledButton .ButtonLabel {
-    display: none;
-  }
-  .MapInfoButton {
-    display: none;
-  }
+
+.ForceRenderButton {
+  display: grid;
+  place-content: center;
+  border: 0;
+  margin: 0;
+  padding: 0 2px;
+  font-size: 16px;
+  background: transparent;
+  color: #4cb5ff;
+  cursor: pointer;
 }

src/components/InspectorControls.tsx

@@ -1,42 +1,62 @@
+import { useEffect, useState, useRef, RefObject } from "react";
+import { RiLandscapeFill } from "react-icons/ri";
+import { FaRotateRight } from "react-icons/fa6";
+import { LuClipboardList } from "react-icons/lu";
+import { Camera } from "three";
 import {
   useControls,
   useDebug,
   useSettings,
   type TouchMode,
 } from "./SettingsProvider";
-import { MissionSelect } from "./MissionSelect";
-import { useEffect, useState, useRef, RefObject } from "react";
 import { CopyCoordinatesButton } from "./CopyCoordinatesButton";
 import { LoadDemoButton } from "./LoadDemoButton";
 import { JoinServerButton } from "./JoinServerButton";
-import { useRecording } from "./RecordingProvider";
-import { useLiveSelector } from "../state/liveConnectionStore";
-import { FiInfo, FiSettings } from "react-icons/fi";
-import { Camera } from "three";
+import { Accordion, AccordionGroup } from "./Accordion";
 import styles from "./InspectorControls.module.css";
+import { useTouchDevice } from "./useTouchDevice";
+import { useRecording } from "./RecordingProvider";
+import { useDataSource, useMissionName } from "../state/gameEntityStore";
+import { useLiveSelector } from "../state/liveConnectionStore";
+import { hasMission } from "../manifest";
+
+const DEFAULT_PANELS = ["controls", "preferences", "audio"];
+
 export function InspectorControls({
   missionName,
   missionType,
-  onChangeMission,
   onOpenMapInfo,
   onOpenServerBrowser,
-  isTouch,
+  onChooseMap,
+  onCancelChoosingMap,
+  choosingMap,
   cameraRef,
+  invalidateRef,
 }: {
   missionName: string;
   missionType: string;
-  onChangeMission: ({
-    missionName,
-    missionType,
-  }: {
-    missionName: string;
-    missionType: string;
-  }) => void;
   onOpenMapInfo: () => void;
   onOpenServerBrowser?: () => void;
-  isTouch: boolean | null;
+  onChooseMap?: () => void;
+  onCancelChoosingMap?: () => void;
+  choosingMap?: boolean;
   cameraRef: RefObject<Camera>;
+  invalidateRef: RefObject<() => void>;
 }) {
+  const isTouch = useTouchDevice();
+  const dataSource = useDataSource();
+  const recording = useRecording();
+  const storeMissionName = useMissionName();
+  const hasStreamData = dataSource === "demo" || dataSource === "live";
+  // When streaming, the URL query param may not reflect the actual map.
+  // Use the store's mission name (from the server) for the manifest check.
+  const effectiveMissionName = hasStreamData ? storeMissionName : missionName;
+  const missionInManifest = effectiveMissionName
+    ? hasMission(effectiveMissionName)
+    : false;
+  const isLiveConnected = useLiveSelector(
+    (s) => s.gameStatus === "connected" || s.gameStatus === "authenticating",
+  );
   const {
     fogEnabled,
     setFogEnabled,
@@ -44,18 +64,25 @@ export function InspectorControls({
     setFov,
     audioEnabled,
     setAudioEnabled,
+    audioVolume,
+    setAudioVolume,
     animationEnabled,
     setAnimationEnabled,
   } = useSettings();
-  const { speedMultiplier, setSpeedMultiplier, touchMode, setTouchMode } =
-    useControls();
-  const { debugMode, setDebugMode } = useDebug();
-  const demoRecording = useRecording();
-  const isLive = useLiveSelector((s) => s.adapter != null);
-  const isStreaming = demoRecording != null || isLive;
-  // Hide FOV/speed controls during .rec playback (faithfully replaying),
-  // but show them in .mis browsing and live observer mode.
-  const hideViewControls = isStreaming && !isLive;
+  const {
+    speedMultiplier,
+    setSpeedMultiplier,
+    touchMode,
+    setTouchMode,
+    invertScroll,
+    setInvertScroll,
+    invertDrag,
+    setInvertDrag,
+    invertJoystick,
+    setInvertJoystick,
+  } = useControls();
+  const { debugMode, setDebugMode, renderOnDemand, setRenderOnDemand } =
+    useDebug();
   const [settingsOpen, setSettingsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -81,34 +108,8 @@ export function InspectorControls({
     }
   };
   return (
-    <div
-      id="controls"
-      className={styles.Controls}
-      onKeyDown={(e) => e.stopPropagation()}
-      onPointerDown={(e) => e.stopPropagation()}
-      onClick={(e) => e.stopPropagation()}
-    >
-      <div className={styles.MissionSelectWrapper}>
-        <MissionSelect
-          value={missionName}
-          missionType={missionType}
-          onChange={onChangeMission}
-          disabled={isStreaming}
-        />
-      </div>
+    <div className={styles.InspectorControls}>
       <div ref={focusAreaRef}>
-        <button
-          ref={buttonRef}
-          className={styles.Toggle}
-          onClick={() => {
-            setSettingsOpen((isOpen) => !isOpen);
-          }}
-          aria-expanded={settingsOpen}
-          aria-controls="settingsPanel"
-          aria-label="Settings"
-        >
-          <FiSettings />
-        </button>
         <div
           className={styles.Dropdown}
           ref={dropdownRef}
@@ -118,122 +119,268 @@ export function InspectorControls({
           onBlur={handleDropdownBlur}
           data-open={settingsOpen}
         >
-          <div className={styles.Group}>
+          <div className={styles.Tools}>
+            <div className={styles.ButtonGroup}>
+              <button
+                type="button"
+                className={styles.IconButton}
+                data-active={
+                  (dataSource === "map" && !recording) || choosingMap
+                }
+                onClick={onChooseMap}
+              >
+                <RiLandscapeFill />
+                <span className={styles.ButtonLabel}>Explore</span>
+                <span className={styles.ButtonHint}>Browse maps</span>
+              </button>
+              <LoadDemoButton
+                isActive={!choosingMap && recording?.source === "demo"}
+                choosingMap={choosingMap}
+                onCancelChoosingMap={onCancelChoosingMap}
+              />
+              {onOpenServerBrowser && (
+                <JoinServerButton
+                  isActive={!choosingMap && isLiveConnected}
+                  onOpenServerBrowser={onOpenServerBrowser}
+                />
+              )}
+            </div>
             <CopyCoordinatesButton
               missionName={missionName}
               missionType={missionType}
               cameraRef={cameraRef}
+              disabled={!missionInManifest}
             />
-            <LoadDemoButton />
-            {onOpenServerBrowser && (
-              <JoinServerButton onOpenServerBrowser={onOpenServerBrowser} />
-            )}
             <button
               type="button"
               className={styles.MapInfoButton}
               aria-label="Show map info"
               onClick={onOpenMapInfo}
+              disabled={!missionInManifest}
             >
-              <FiInfo />
+              <LuClipboardList />
               <span className={styles.ButtonLabel}>Show map info</span>
             </button>
           </div>
-          <div className={styles.Group}>
-            <div className={styles.CheckboxField}>
-              <input
-                id="fogInput"
-                type="checkbox"
-                checked={fogEnabled}
-                onChange={(event) => {
-                  setFogEnabled(event.target.checked);
-                }}
-              />
-              <label htmlFor="fogInput">Fog?</label>
-            </div>
-            <div className={styles.CheckboxField}>
-              <input
-                id="audioInput"
-                type="checkbox"
-                checked={audioEnabled}
-                onChange={(event) => {
-                  setAudioEnabled(event.target.checked);
-                }}
-              />
-              <label htmlFor="audioInput">Audio?</label>
-            </div>
+          <div className={styles.Accordions}>
+            <AccordionGroup type="multiple" defaultValue={DEFAULT_PANELS}>
+              <Accordion value="controls" label="Controls">
+                <div className={styles.Field}>
+                  <label htmlFor="speedInput">Fly speed</label>
+                  <input
+                    id="speedInput"
+                    type="range"
+                    min={0.1}
+                    max={5}
+                    step={0.05}
+                    value={speedMultiplier}
+                    onChange={(event) =>
+                      setSpeedMultiplier(parseFloat(event.target.value))
+                    }
+                  />
+                  <p className={styles.Description}>
+                    How fast you move in free-flying mode.
+                    {isTouch === false
+                      ? " Use your scroll wheel or trackpad to adjust while flying."
+                      : ""}
+                  </p>
+                </div>
+                {isTouch ? (
+                  <div className={styles.Field}>
+                    <label htmlFor="touchModeInput">Joystick</label>{" "}
+                    <select
+                      id="touchModeInput"
+                      value={touchMode}
+                      onChange={(e) =>
+                        setTouchMode(e.target.value as TouchMode)
+                      }
+                    >
+                      <option value="dualStick">Dual stick</option>
+                      <option value="moveLookStick">Single stick</option>
+                    </select>
+                    <p className={styles.Description}>
+                      Single stick has a unified move + look control. Dual stick
+                      has independent move + look.
+                    </p>
+                  </div>
+                ) : null}
+                {isTouch === false ? (
+                  <div className={styles.CheckboxField}>
+                    <input
+                      id="invertScroll"
+                      type="checkbox"
+                      checked={invertScroll}
+                      onChange={(event) => {
+                        setInvertScroll(event.target.checked);
+                      }}
+                    />
+                    <label className={styles.Label} htmlFor="invertScroll">
+                      Invert scroll direction
+                    </label>
+                    <p className={styles.Description}>
+                      Reverse which scroll direction increases and decreases fly
+                      speed.
+                    </p>
+                  </div>
+                ) : null}
+                {isTouch ? (
+                  <div className={styles.CheckboxField}>
+                    <input
+                      id="invertJoystick"
+                      type="checkbox"
+                      checked={invertJoystick}
+                      onChange={(event) => {
+                        setInvertJoystick(event.target.checked);
+                      }}
+                    />
+                    <label className={styles.Label} htmlFor="invertJoystick">
+                      Invert joystick direction
+                    </label>
+                    <p className={styles.Description}>
+                      Reverse joystick look direction.
+                    </p>
+                  </div>
+                ) : null}
+                <div className={styles.CheckboxField}>
+                  <input
+                    id="invertDrag"
+                    type="checkbox"
+                    checked={invertDrag}
+                    onChange={(event) => {
+                      setInvertDrag(event.target.checked);
+                    }}
+                  />
+                  <label className={styles.Label} htmlFor="invertDrag">
+                    Invert drag direction
+                  </label>
+                  <p className={styles.Description}>
+                    Reverse how dragging the viewport aims the camera.
+                  </p>
+                </div>
+              </Accordion>
+              <Accordion value="preferences" label="Preferences">
+                <div className={styles.Field}>
+                  <label htmlFor="fovInput">FOV</label>
+                  <div className={styles.Control}>
+                    <output htmlFor="fovInput">{fov}&deg;</output>
+                    <input
+                      id="fovInput"
+                      type="range"
+                      min={75}
+                      max={120}
+                      step={5}
+                      value={fov}
+                      onChange={(event) => setFov(parseInt(event.target.value))}
+                    />
+                  </div>
+                </div>
+              </Accordion>
+              <Accordion value="audio" label="Audio">
+                <div className={styles.CheckboxField}>
+                  <input
+                    id="audioInput"
+                    type="checkbox"
+                    checked={audioEnabled}
+                    onChange={(event) => {
+                      setAudioEnabled(event.target.checked);
+                    }}
+                  />
+                  <label className={styles.Label} htmlFor="audioInput">
+                    Enable audio
+                  </label>
+                </div>
+                <div className={styles.Field}>
+                  <label htmlFor="volumeInput">Master volume</label>
+                  <div className={styles.Control}>
+                    <output htmlFor="volumeInput">
+                      {Math.round(audioVolume * 100)}%
+                    </output>
+                    <input
+                      id="volumeInput"
+                      type="range"
+                      min={0}
+                      max={1}
+                      step={0.05}
+                      value={audioVolume}
+                      onChange={(event) =>
+                        setAudioVolume(parseFloat(event.target.value))
+                      }
+                    />
+                  </div>
+                </div>
+              </Accordion>
+              <Accordion value="graphics" label="Graphics">
+                <div className={styles.CheckboxField}>
+                  <input
+                    id="fogInput"
+                    type="checkbox"
+                    checked={fogEnabled}
+                    onChange={(event) => {
+                      setFogEnabled(event.target.checked);
+                    }}
+                  />
+                  <label className={styles.Label} htmlFor="fogInput">
+                    Enable fog
+                  </label>
+                </div>
+                <div className={styles.CheckboxField}>
+                  <input
+                    id="animationInput"
+                    type="checkbox"
+                    checked={animationEnabled}
+                    onChange={(event) => {
+                      setAnimationEnabled(event.target.checked);
+                    }}
+                  />
+                  <label className={styles.Label} htmlFor="animationInput">
+                    Enable animations
+                  </label>
+                </div>
+              </Accordion>
+              <Accordion value="debug" label="Debug">
+                <div className={styles.CheckboxField}>
+                  <input
+                    id="debugInput"
+                    type="checkbox"
+                    checked={debugMode}
+                    onChange={(event) => {
+                      setDebugMode(event.target.checked);
+                    }}
+                  />
+                  <label className={styles.Label} htmlFor="debugInput">
+                    Render debug visuals
+                  </label>
+                </div>
+                <div className={styles.CheckboxField}>
+                  <input
+                    id="onDemandInput"
+                    type="checkbox"
+                    checked={renderOnDemand}
+                    onChange={(event) => {
+                      setRenderOnDemand(event.target.checked);
+                    }}
+                  />
+                  <div className={styles.Label}>
+                    <label htmlFor="onDemandInput">Render on demand </label>
+                    <button
+                      type="button"
+                      className={styles.ForceRenderButton}
+                      title="Force render"
+                      aria-label="Force render"
+                      onClick={() => invalidateRef.current?.()}
+                    >
+                      <FaRotateRight />
+                    </button>
+                  </div>
+                  <p className={styles.Description}>
+                    Significantly decreases CPU and GPU usage by only rendering
+                    frames when requested. Helpful when developing parts of the
+                    app unrelated to rendering.
+                  </p>
+                </div>
+              </Accordion>
+            </AccordionGroup>
           </div>
-          <div className={styles.Group}>
-            <div className={styles.CheckboxField}>
-              <input
-                id="animationInput"
-                type="checkbox"
-                checked={animationEnabled}
-                onChange={(event) => {
-                  setAnimationEnabled(event.target.checked);
-                }}
-              />
-              <label htmlFor="animationInput">Animation?</label>
-            </div>
-            <div className={styles.CheckboxField}>
-              <input
-                id="debugInput"
-                type="checkbox"
-                checked={debugMode}
-                onChange={(event) => {
-                  setDebugMode(event.target.checked);
-                }}
-              />
-              <label htmlFor="debugInput">Debug?</label>
-            </div>
-          </div>
-          <div className={styles.Group}>
-            {hideViewControls ? null : (
-              <div className={styles.Field}>
-                <label htmlFor="fovInput">FOV</label>
-                <input
-                  id="fovInput"
-                  type="range"
-                  min={75}
-                  max={120}
-                  step={5}
-                  value={fov}
-                  onChange={(event) => setFov(parseInt(event.target.value))}
-                />
-                <output htmlFor="fovInput">{fov}</output>
-              </div>
-            )}
-            {hideViewControls ? null : (
-              <div className={styles.Field}>
-                <label htmlFor="speedInput">Speed</label>
-                <input
-                  id="speedInput"
-                  type="range"
-                  min={0.1}
-                  max={5}
-                  step={0.05}
-                  value={speedMultiplier}
-                  onChange={(event) =>
-                    setSpeedMultiplier(parseFloat(event.target.value))
-                  }
-                />
-              </div>
-            )}
-          </div>
-          {isTouch && (
-            <div className={styles.Group}>
-              <div className={styles.Field}>
-                <label htmlFor="touchModeInput">Joystick:</label>{" "}
-                <select
-                  id="touchModeInput"
-                  value={touchMode}
-                  onChange={(e) => setTouchMode(e.target.value as TouchMode)}
-                >
-                  <option value="dualStick">Dual Stick</option>
-                  <option value="moveLookStick">Single Stick</option>
-                </select>
-              </div>
-            </div>
-          )}
         </div>
       </div>
     </div>

src/components/InteriorInstance.tsx

@@ -1,5 +1,7 @@
-import { memo, Suspense, useMemo, useCallback, useEffect, useRef } from "react";
+import { memo, useMemo, useCallback, useEffect, useRef } from "react";
+import { DebugSuspense } from "./DebugSuspense";
 import { ErrorBoundary } from "react-error-boundary";
+import { createLogger } from "../logger";
 import {
   Mesh,
   Material,
@@ -24,6 +26,8 @@ import { injectCustomFog } from "../fogShader";
 import { globalFogUniforms } from "../globalFogUniforms";
 import { injectInteriorLighting } from "../interiorMaterial";
 
+const log = createLogger("InteriorInstance");
+
 /**
  * Load a .gltf file that was converted from a .dif, used for "interior" models.
  */
@@ -151,7 +155,8 @@ function InteriorMesh({ node }: { node: Mesh }) {
   return (
     <mesh geometry={node.geometry} castShadow receiveShadow>
       {node.material ? (
-        <Suspense
+        <DebugSuspense
+          label={`InteriorTexture:${Array.isArray(node.material) ? node.material[0]?.userData?.resource_path : node.material?.userData?.resource_path ?? "?"}`}
           fallback={
             // Allow the mesh to render while the texture is still loading;
             // show a wireframe placeholder.
@@ -174,7 +179,7 @@ function InteriorMesh({ node }: { node: Mesh }) {
               lightMap={lightMaps[0]}
             />
           )}
-        </Suspense>
+        </DebugSuspense>
       ) : null}
     </mesh>
   );
@@ -253,18 +258,18 @@ export const InteriorInstance = memo(function InteriorInstance({
           />
         }
         onError={(error) => {
-          console.warn(
-            `[interior] Failed to load ${scene.interiorFile}:`,
-            error.message,
-          );
+          log.error("Failed to load %s: %s", scene.interiorFile, error.message);
         }}
       >
-        <Suspense fallback={<InteriorPlaceholder color="orange" />}>
+        <DebugSuspense
+          label={`InteriorModel:${scene.interiorFile}`}
+          fallback={<InteriorPlaceholder color="orange" />}
+        >
           <InteriorModel
             interiorFile={scene.interiorFile}
             ghostIndex={scene.ghostIndex}
           />
-        </Suspense>
+        </DebugSuspense>
       </ErrorBoundary>
     </group>
   );

src/components/JoinServerButton.module.css

@@ -1,7 +1,6 @@
 .Root {
   composes: IconButton from "./InspectorControls.module.css";
   composes: LabelledButton from "./InspectorControls.module.css";
-  padding: 0 5px;
 }
 /* Text label ("Connect", "Connecting...") follows standard breakpoint rules. */
 .TextLabel {
@@ -14,7 +13,7 @@
   margin-right: 2px;
 }
 .LiveIcon {
-  font-size: 15px;
+  /* font-size: 15px; */
 }
 .Pulsing {
   animation: blink 1.2s ease-out infinite;
@@ -27,3 +26,7 @@
     opacity: 0.25;
   }
 }
+
+.ButtonHint {
+  composes: ButtonHint from "./InspectorControls.module.css";
+}

src/components/JoinServerButton.tsx

@@ -3,12 +3,14 @@ import { useLiveSelector, selectPing } from "../state/liveConnectionStore";
 import styles from "./JoinServerButton.module.css";
 
 function formatPing(ms: number): string {
-  return ms >= 1000 ? ms.toLocaleString() + "ms" : ms + "ms";
+  return `${ms.toLocaleString()} ms`;
 }
 
 export function JoinServerButton({
+  isActive,
   onOpenServerBrowser,
 }: {
+  isActive: boolean;
   onOpenServerBrowser: () => void;
 }) {
   const gameStatus = useLiveSelector((s) => s.gameStatus);
@@ -26,8 +28,8 @@ export function JoinServerButton({
     <button
       type="button"
       className={styles.Root}
-      aria-label={isLive ? `Disconnect from ${serverName ?? "server"}` : "Join server"}
-      title={isLive ? `Disconnect from ${serverName ?? "server"}` : "Join server"}
+      aria-label={isLive ? "Connected – click to disconnect" : "Join server"}
+      title={isLive ? "Connected – click to disconnect" : "Join server"}
       onClick={() => {
         if (isLive) {
           disconnectServer();
@@ -35,21 +37,20 @@ export function JoinServerButton({
           onOpenServerBrowser();
         }
       }}
-      data-active={isLive ? "true" : undefined}
+      data-active={isActive}
     >
       <BsFillLightningChargeFill
         className={`${styles.LiveIcon} ${isLive ? styles.Pulsing : ""}`}
       />
-      {!isLive && (
-        <span className={styles.TextLabel}>
-          {isConnecting ? "Connecting..." : "Connect"}
+      <>
+        <span className={styles.TextLabel}>Live</span>
+        <span className={styles.ButtonHint}>
+          {ping != null ? formatPing(ping) : "Join a game"}
         </span>
-      )}
-      {isLive && ping != null && (
-        <span className={styles.PingLabel}>
-          {formatPing(ping)}
-        </span>
-      )}
+      </>
+      {/* {isLive && ping != null && (
+        <span className={styles.PingLabel}>{formatPing(ping)}</span>
+      )} */}
     </button>
   );
 }

src/components/JoystickContext.tsx

@@ -0,0 +1,69 @@
+import {
+  createContext,
+  ReactNode,
+  RefObject,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+} from "react";
+
+export type JoystickState = {
+  angle: number;
+  force: number;
+};
+
+type JoystickContextType = {
+  moveState: RefObject<JoystickState>;
+  lookState: RefObject<JoystickState>;
+  setMoveState: (state: Partial<JoystickState>) => void;
+  setLookState: (state: Partial<JoystickState>) => void;
+};
+
+export const JoystickContext = createContext<JoystickContextType | null>(null);
+
+export function useJoystick() {
+  const context = useContext(JoystickContext);
+  if (!context) {
+    throw new Error(
+      "No JoystickContext found. Did you forget to add a <JoystickProvider>?",
+    );
+  }
+  return context;
+}
+
+export function JoystickProvider({ children }: { children: ReactNode }) {
+  const moveState = useRef<JoystickState>({ angle: 0, force: 0 });
+  const lookState = useRef<JoystickState>({ angle: 0, force: 0 });
+
+  const setMoveState = useCallback(
+    ({ angle, force }: Partial<JoystickState>) => {
+      if (angle != null) {
+        moveState.current.angle = angle;
+      }
+      if (force != null) {
+        moveState.current.force = force;
+      }
+    },
+    [],
+  );
+
+  const setLookState = useCallback(
+    ({ angle, force }: Partial<JoystickState>) => {
+      if (angle != null) {
+        lookState.current.angle = angle;
+      }
+      if (force != null) {
+        lookState.current.force = force;
+      }
+    },
+    [],
+  );
+
+  const context: JoystickContextType = useMemo(
+    () => ({ moveState, lookState, setMoveState, setLookState }),
+    [setMoveState, setLookState],
+  );
+
+  return <JoystickContext value={context}>{children}</JoystickContext>;
+}

src/components/KeyboardAndMouseHandler.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useEffectEvent, useRef } from "react";
 import { Euler, Vector3 } from "three";
 import { useFrame, useThree } from "@react-three/fiber";
 import { useKeyboardControls } from "@react-three/drei";
@@ -29,6 +29,28 @@ export enum Controls {
   camera9 = "camera9",
 }
 
+export const KEYBOARD_CONTROLS = [
+  { name: Controls.forward, keys: ["KeyW"] },
+  { name: Controls.backward, keys: ["KeyS"] },
+  { name: Controls.left, keys: ["KeyA"] },
+  { name: Controls.right, keys: ["KeyD"] },
+  { name: Controls.up, keys: ["Space"] },
+  { name: Controls.down, keys: ["ShiftLeft", "ShiftRight"] },
+  { name: Controls.lookUp, keys: ["ArrowUp"] },
+  { name: Controls.lookDown, keys: ["ArrowDown"] },
+  { name: Controls.lookLeft, keys: ["ArrowLeft"] },
+  { name: Controls.lookRight, keys: ["ArrowRight"] },
+  { name: Controls.camera1, keys: ["Digit1"] },
+  { name: Controls.camera2, keys: ["Digit2"] },
+  { name: Controls.camera3, keys: ["Digit3"] },
+  { name: Controls.camera4, keys: ["Digit4"] },
+  { name: Controls.camera5, keys: ["Digit5"] },
+  { name: Controls.camera6, keys: ["Digit6"] },
+  { name: Controls.camera7, keys: ["Digit7"] },
+  { name: Controls.camera8, keys: ["Digit8"] },
+  { name: Controls.camera9, keys: ["Digit9"] },
+];
+
 const BASE_SPEED = 80;
 const MIN_SPEED_ADJUSTMENT = 0.05;
 const MAX_SPEED_ADJUSTMENT = 0.5;
@@ -39,13 +61,39 @@ const DRAG_THRESHOLD = 3; // px of movement before it counts as a drag
 export const MOUSE_SENSITIVITY = 0.003;
 export const ARROW_LOOK_SPEED = 1; // radians/sec
 
-function CameraMovement() {
-  const { speedMultiplier, setSpeedMultiplier } = useControls();
+export function KeyboardAndMouseHandler() {
+  // Don't let KeyboardControls handle stuff when metaKey is held.
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      // Let Cmd/Ctrl+K pass through for search focus.
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        return;
+      }
+      if (e.metaKey) {
+        e.stopImmediatePropagation();
+      }
+    };
+
+    window.addEventListener("keydown", handleKey, { capture: true });
+    window.addEventListener("keyup", handleKey, { capture: true });
+
+    return () => {
+      window.removeEventListener("keydown", handleKey, { capture: true });
+      window.removeEventListener("keyup", handleKey, { capture: true });
+    };
+  }, []);
+
+  const { speedMultiplier, setSpeedMultiplier, invertScroll, invertDrag } =
+    useControls();
   const [subscribe, getKeys] = useKeyboardControls<Controls>();
-  const { camera, gl } = useThree();
+  const camera = useThree((state) => state.camera);
+  const gl = useThree((state) => state.gl);
   const { nextCamera, setCameraIndex, cameraCount } = useCameras();
   const controlsRef = useRef<PointerLockControls | null>(null);
 
+  const getInvertScroll = useEffectEvent(() => invertScroll);
+  const getInvertDrag = useEffectEvent(() => invertDrag);
+
   // Scratch vectors/euler to avoid allocations each frame
   const forwardVec = useRef(new Vector3());
   const sideVec = useRef(new Vector3());
@@ -92,9 +140,10 @@ function CameraMovement() {
       }
       didDrag = true;
 
+      const dragSign = getInvertDrag() ? -1 : 1;
       euler.setFromQuaternion(camera.quaternion, "YXZ");
-      euler.y -= e.movementX * MOUSE_SENSITIVITY;
-      euler.x -= e.movementY * MOUSE_SENSITIVITY;
+      euler.y += dragSign * e.movementX * MOUSE_SENSITIVITY;
+      euler.x += dragSign * e.movementY * MOUSE_SENSITIVITY;
       euler.x = Math.max(-MAX_PITCH, Math.min(MAX_PITCH, euler.x));
       camera.quaternion.setFromEuler(euler);
     };
@@ -154,7 +203,8 @@ function CameraMovement() {
     const handleWheel = (e: WheelEvent) => {
       e.preventDefault();
 
-      const direction = e.deltaY > 0 ? -1 : 1;
+      const scrollSign = getInvertScroll() ? -1 : 1;
+      const direction = (e.deltaY > 0 ? -1 : 1) * scrollSign;
 
       const delta =
         // Helps normalize sensitivity; trackpad scrolling will have many small
@@ -253,50 +303,3 @@ function CameraMovement() {
 
   return null;
 }
-
-export const KEYBOARD_CONTROLS = [
-  { name: Controls.forward, keys: ["KeyW"] },
-  { name: Controls.backward, keys: ["KeyS"] },
-  { name: Controls.left, keys: ["KeyA"] },
-  { name: Controls.right, keys: ["KeyD"] },
-  { name: Controls.up, keys: ["Space"] },
-  { name: Controls.down, keys: ["ShiftLeft", "ShiftRight"] },
-  { name: Controls.lookUp, keys: ["ArrowUp"] },
-  { name: Controls.lookDown, keys: ["ArrowDown"] },
-  { name: Controls.lookLeft, keys: ["ArrowLeft"] },
-  { name: Controls.lookRight, keys: ["ArrowRight"] },
-  { name: Controls.camera1, keys: ["Digit1"] },
-  { name: Controls.camera2, keys: ["Digit2"] },
-  { name: Controls.camera3, keys: ["Digit3"] },
-  { name: Controls.camera4, keys: ["Digit4"] },
-  { name: Controls.camera5, keys: ["Digit5"] },
-  { name: Controls.camera6, keys: ["Digit6"] },
-  { name: Controls.camera7, keys: ["Digit7"] },
-  { name: Controls.camera8, keys: ["Digit8"] },
-  { name: Controls.camera9, keys: ["Digit9"] },
-];
-
-export function ObserverControls() {
-  // Don't let KeyboardControls handle stuff when metaKey is held.
-  useEffect(() => {
-    const handleKey = (e: KeyboardEvent) => {
-      // Let Cmd/Ctrl+K pass through for search focus.
-      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
-        return;
-      }
-      if (e.metaKey) {
-        e.stopImmediatePropagation();
-      }
-    };
-
-    window.addEventListener("keydown", handleKey, { capture: true });
-    window.addEventListener("keyup", handleKey, { capture: true });
-
-    return () => {
-      window.removeEventListener("keydown", handleKey, { capture: true });
-      window.removeEventListener("keyup", handleKey, { capture: true });
-    };
-  }, []);
-
-  return <CameraMovement />;
-}

src/components/KeyboardOverlay.module.css

@@ -1,5 +1,5 @@
 .Root {
-  position: fixed;
+  position: absolute;
   bottom: 16px;
   left: 50%;
   transform: translateX(-50%);

src/components/KeyboardOverlay.tsx

@@ -1,5 +1,5 @@
 import { useKeyboardControls } from "@react-three/drei";
-import { Controls } from "./ObserverControls";
+import { Controls } from "./KeyboardAndMouseHandler";
 import { useRecording } from "./RecordingProvider";
 import styles from "./KeyboardOverlay.module.css";
 

src/components/LiveConnection.tsx

@@ -1,15 +0,0 @@
-import { useEffect } from "react";
-import { disposeLiveConnection } from "../state/liveConnectionStore";
-
-/** Cleanup-only provider — disposes the relay connection on unmount. */
-export function LiveConnectionProvider({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  useEffect(() => {
-    return () => disposeLiveConnection();
-  }, []);
-
-  return children;
-}

src/components/LiveObserver.tsx

@@ -2,19 +2,26 @@ import { useRef, useEffect } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import { Vector3 } from "three";
 import { useKeyboardControls } from "@react-three/drei";
-import { useLiveSelector } from "../state/liveConnectionStore";
+import { createLogger } from "../logger";
+import {
+  liveConnectionStore,
+  useLiveSelector,
+} from "../state/liveConnectionStore";
 import { useEngineStoreApi } from "../state/engineStore";
 import { streamPlaybackStore } from "../state/streamPlaybackStore";
-import { Controls, MOUSE_SENSITIVITY, ARROW_LOOK_SPEED } from "./ObserverControls";
+import {
+  Controls,
+  MOUSE_SENSITIVITY,
+  ARROW_LOOK_SPEED,
+} from "./KeyboardAndMouseHandler";
 import { useControls } from "./SettingsProvider";
 import { useTick, TICK_RATE } from "./TickProvider";
-import {
-  yawPitchToQuaternion,
-  MAX_PITCH,
-} from "../stream/streamHelpers";
+import { yawPitchToQuaternion, MAX_PITCH } from "../stream/streamHelpers";
 import type { StreamRecording, StreamCamera } from "../stream/types";
 import type { LiveStreamAdapter } from "../stream/liveStreaming";
 
+const log = createLogger("LiveObserver");
+
 const TICK_INTERVAL = 1 / TICK_RATE;
 
 // Scratch objects to avoid per-frame allocations.
@@ -50,7 +57,7 @@ export function LiveObserver() {
   const store = useEngineStoreApi();
   const { speedMultiplier } = useControls();
   const activeAdapterRef = useRef<LiveStreamAdapter | null>(null);
-  const { gl } = useThree();
+  const gl = useThree((state) => state.gl);
   const [, getKeys] = useKeyboardControls<Controls>();
 
   // Accumulated rotation deltas since last move was sent. Mouse events and
@@ -73,15 +80,22 @@ export function LiveObserver() {
 
   // Wire adapter to engine store.
   useEffect(() => {
-    if (adapter && (gameStatus === "connected" || gameStatus === "authenticating")) {
+    if (
+      adapter &&
+      (gameStatus === "connected" || gameStatus === "authenticating")
+    ) {
       if (activeAdapterRef.current === adapter) return;
 
-      console.log("[LiveObserver] wiring adapter to engine store");
+      log.info("wiring adapter to engine store");
+      const liveState = liveConnectionStore.getState();
       const liveRecording: StreamRecording = {
         source: "live",
         duration: Infinity,
-        missionName: null,
+        missionName: liveState.mapName ?? null,
         gameType: null,
+        serverDisplayName: liveState.serverName ?? null,
+        recorderName: liveState.warriorName ?? null,
+        recordingDate: null,
         streamingPlayback: adapter,
       };
 
@@ -92,7 +106,11 @@ export function LiveObserver() {
       predRef.current.initialized = false;
       predRef.current.lastSyncedCamera = null;
     } else if (!adapter && activeAdapterRef.current) {
-      store.getState().setRecording(null);
+      // Only clear the recording if it's still the live one we set.
+      const current = store.getState().playback.recording;
+      if (current?.source === "live") {
+        store.getState().setRecording(null);
+      }
       activeAdapterRef.current = null;
       predRef.current.initialized = false;
     }
@@ -165,7 +183,7 @@ export function LiveObserver() {
       if (!activeAdapterRef.current) return;
 
       activeAdapterRef.current.toggleObserverMode();
-      console.log(`[LiveObserver] observer mode: ${activeAdapterRef.current.observerMode}`);
+      log.info("observer mode: %s", activeAdapterRef.current.observerMode);
     };
     window.addEventListener("keydown", handleKey);
     return () => window.removeEventListener("keydown", handleKey);
@@ -274,12 +292,15 @@ export function LiveObserver() {
     // Interpolate between previous and current tick prediction, then add
     // pending (unconsumed) mouse/arrow deltas so rotation responds at frame
     // rate rather than waiting for the next useTick to consume them.
-    const interpYaw = pred.prevYaw + (pred.yaw - pred.prevYaw) * t + deltaYawRef.current;
+    const interpYaw =
+      pred.prevYaw + (pred.yaw - pred.prevYaw) * t + deltaYawRef.current;
     const interpPitch = Math.max(
       -MAX_PITCH,
       Math.min(
         MAX_PITCH,
-        pred.prevPitch + (pred.pitch - pred.prevPitch) * t + deltaPitchRef.current,
+        pred.prevPitch +
+          (pred.pitch - pred.prevPitch) * t +
+          deltaPitchRef.current,
       ),
     );
 
@@ -314,7 +335,9 @@ export function LiveObserver() {
         if (_orbitDir.lengthSq() > 1e-8) {
           _orbitDir.normalize();
           const orbitDistance = Math.max(0.1, serverCam.orbitDistance ?? 4);
-          state.camera.position.copy(_orbitTarget).addScaledVector(_orbitDir, orbitDistance);
+          state.camera.position
+            .copy(_orbitTarget)
+            .addScaledVector(_orbitDir, orbitDistance);
           state.camera.lookAt(_orbitTarget);
         }
       }
@@ -323,13 +346,16 @@ export function LiveObserver() {
       // from StreamingController's server snapshot interpolation).
       state.camera.quaternion.set(qx, qy, qz, qw);
     }
-  }, 1);
+  });
 
   // Clean up on unmount.
   useEffect(() => {
     return () => {
       if (activeAdapterRef.current) {
-        store.getState().setRecording(null);
+        const current = store.getState().playback.recording;
+        if (current?.source === "live") {
+          store.getState().setRecording(null);
+        }
         activeAdapterRef.current = null;
       }
     };

src/components/LoadDemoButton.module.css

@@ -7,6 +7,10 @@
   composes: ButtonLabel from "./InspectorControls.module.css";
 }
 
-.DemoIcon {
-  font-size: 19px;
+.ButtonHint {
+  composes: ButtonHint from "./InspectorControls.module.css";
+}
+
+.DemoIcon {
+  /* font-size: 20px; */
 }

src/components/LoadDemoButton.tsx

@@ -1,10 +1,21 @@
 import { useCallback, useRef } from "react";
 import { MdOndemandVideo } from "react-icons/md";
+import { createLogger } from "../logger";
+import { liveConnectionStore } from "../state/liveConnectionStore";
 import { usePlaybackActions, useRecording } from "./RecordingProvider";
-import { createDemoStreamingRecording } from "../stream/demoStreaming";
 import styles from "./LoadDemoButton.module.css";
 
-export function LoadDemoButton() {
+const log = createLogger("LoadDemoButton");
+
+export function LoadDemoButton({
+  isActive = false,
+  choosingMap = false,
+  onCancelChoosingMap,
+}: {
+  isActive?: boolean;
+  choosingMap?: boolean;
+  onCancelChoosingMap?: () => void;
+}) {
   const recording = useRecording();
   const isDemoLoaded = recording?.source === "demo";
   const { setRecording } = usePlaybackActions();
@@ -12,14 +23,18 @@ export function LoadDemoButton() {
   const parseTokenRef = useRef(0);
 
   const handleClick = useCallback(() => {
+    if (choosingMap && isDemoLoaded) {
+      onCancelChoosingMap?.();
+      return;
+    }
     if (isDemoLoaded) {
-      // Unload the current recording.
+      // Unload the recording/parser but leave entities frozen in the store.
       parseTokenRef.current += 1;
       setRecording(null);
       return;
     }
     inputRef.current?.click();
-  }, [isDemoLoaded, setRecording]);
+  }, [isDemoLoaded, choosingMap, onCancelChoosingMap, setRecording]);
 
   const handleFileChange = useCallback(
     async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -31,14 +46,20 @@ export function LoadDemoButton() {
         const buffer = await file.arrayBuffer();
         const parseToken = parseTokenRef.current + 1;
         parseTokenRef.current = parseToken;
+        const { createDemoStreamingRecording } =
+          await import("../stream/demoStreaming");
         const recording = await createDemoStreamingRecording(buffer);
         if (parseTokenRef.current !== parseToken) {
           return;
         }
+        // Disconnect from any live server before loading the demo.
+        const liveState = liveConnectionStore.getState();
+        liveState.disconnectServer();
+        liveState.disconnectRelay();
         // Metadata-first: mission/game-mode sync happens immediately.
         setRecording(recording);
       } catch (err) {
-        console.error("Failed to load demo:", err);
+        log.error("Failed to load demo: %o", err);
       }
     },
     [setRecording],
@@ -59,12 +80,16 @@ export function LoadDemoButton() {
         aria-label={isDemoLoaded ? "Unload demo" : "Load demo (.rec)"}
         title={isDemoLoaded ? "Unload demo" : "Load demo (.rec)"}
         onClick={handleClick}
-        data-active={isDemoLoaded ? "true" : undefined}
-        disabled={recording != null && !isDemoLoaded}
+        data-active={isActive}
       >
         <MdOndemandVideo className={styles.DemoIcon} />
-        <span className={styles.ButtonLabel}>
-          {isDemoLoaded ? "Unload demo" : "Demo"}
+        <span className={styles.ButtonLabel}>Demo</span>
+        <span className={styles.ButtonHint}>
+          {choosingMap && isDemoLoaded
+            ? "Return to demo"
+            : isDemoLoaded
+              ? "Click to unload"
+              : "Load a .rec file"}
         </span>
       </button>
     </>

src/components/LoadingIndicator.module.css

@@ -0,0 +1,62 @@
+.LoadingIndicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  pointer-events: none;
+  z-index: 1;
+  opacity: 0.8;
+}
+
+.LoadingIndicator[data-complete="true"] {
+  animation: loadingComplete 0.3s ease-out forwards;
+}
+
+.Spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid rgba(255, 255, 255, 0.2);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.Progress {
+  width: 200px;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.ProgressBar {
+  height: 100%;
+  background: white;
+  border-radius: 2px;
+  transition: width 0.1s ease-out;
+}
+
+.ProgressText {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.7);
+  font-variant-numeric: tabular-nums;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loadingComplete {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

src/components/LoadingIndicator.tsx

@@ -0,0 +1,22 @@
+import styles from "./LoadingIndicator.module.css";
+
+export function LoadingIndicator({
+  isLoading,
+  progress,
+}: {
+  isLoading: boolean;
+  progress: number;
+}) {
+  return (
+    <div className={styles.LoadingIndicator} data-complete={!isLoading}>
+      <div className={styles.Spinner} />
+      <div className={styles.Progress}>
+        <div
+          className={styles.ProgressBar}
+          style={{ width: `${progress * 100}%` }}
+        />
+      </div>
+      <div className={styles.ProgressText}>{Math.round(progress * 100)}%</div>
+    </div>
+  );
+}

src/components/MapInfoDialog.module.css

@@ -1,36 +1,14 @@
 .Dialog {
-  position: relative;
+  composes: Dialog from "./GameDialog.module.css";
   width: 800px;
   height: 600px;
-  max-width: calc(100dvw - 40px);
-  max-height: calc(100dvh - 40px);
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: 1fr auto;
-  background: rgba(20, 37, 38, 0.8);
-  border: 1px solid rgba(65, 131, 139, 0.6);
-  border-radius: 4px;
-  box-shadow:
-    0 0 50px rgba(0, 0, 0, 0.4),
-    inset 0 0 60px rgba(1, 7, 13, 0.6);
-  color: #bccec3;
-  font-size: 14px;
-  line-height: 1.5;
-  overflow: hidden;
-  outline: none;
-  user-select: text;
-  -webkit-touch-callout: default;
 }
 
 .Overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.7);
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
+  composes: Overlay from "./GameDialog.module.css";
 }
 
 .Body {
@@ -99,7 +77,7 @@
 .MapQuote cite {
   font-style: normal;
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.45);
+  color: rgba(215, 237, 203, 0.5);
   display: block;
 }
 
@@ -125,7 +103,7 @@
 .MusicTrack {
   margin-top: 16px;
   font-size: 14px;
-  color: rgba(202, 208, 172, 0.5);
+  color: rgba(215, 237, 203, 0.5);
   font-style: italic;
   display: flex;
   align-items: center;
@@ -174,7 +152,7 @@
 }
 
 .CloseButton {
-  composes: DialogButton from "./DialogButton.module.css";
+  composes: DialogButton from "./GameDialog.module.css";
 }
 
 .Hint {

src/components/MapInfoDialog.tsx

@@ -50,7 +50,9 @@ function getBitmapUrl(
     try {
       const key = getStandardTextureResourceKey(`textures/gui/${bitmap}`);
       return getUrlForPath(key);
-    } catch  { /* expected */ }
+    } catch {
+      /* expected */
+    }
   }
   // Fall back to Load_<MissionName>.png convention (multiplayer missions)
   try {
@@ -58,7 +60,9 @@ function getBitmapUrl(
       `textures/gui/Load_${missionName}`,
     );
     return getUrlForPath(key);
-  } catch  { /* expected */ }
+  } catch {
+    /* expected */
+  }
   return null;
 }
 
@@ -161,12 +165,10 @@ function MusicPlayer({ track }: { track: string }) {
 }
 
 export function MapInfoDialog({
-  open,
   onClose,
   missionName,
   missionType,
 }: {
-  open: boolean;
   onClose: () => void;
   missionName: string;
   missionType: string;
@@ -175,19 +177,18 @@ export function MapInfoDialog({
   const dialogRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (open) {
-      dialogRef.current?.focus();
-      try {
-        document.exitPointerLock();
-      } catch  { /* expected */ }
+    dialogRef.current?.focus();
+    try {
+      document.exitPointerLock();
+    } catch {
+      /* expected */
     }
-  }, [open]);
+  }, []);
 
   // While open: block keyboard events from reaching drei, and handle close keys.
   useEffect(() => {
-    if (!open) return;
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.code === "KeyI" || e.key === "Escape") {
+      if (e.key === "Escape") {
         onClose();
       } else if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
         onClose();
@@ -204,9 +205,7 @@ export function MapInfoDialog({
       window.removeEventListener("keydown", handleKeyDown, { capture: true });
       window.removeEventListener("keyup", handleKeyUp, { capture: true });
     };
-  }, [open, onClose]);
-
-  if (!open) return null;
+  }, [onClose]);
 
   const missionGroupProps = parsedMission
     ? getMissionGroupProps(parsedMission.ast)
@@ -322,7 +321,7 @@ export function MapInfoDialog({
           <button className={styles.CloseButton} onClick={onClose}>
             Close
           </button>
-          <span className={styles.Hint}>I or Esc to close</span>
+          <span className={styles.Hint}>Esc to close</span>
         </div>
       </div>
     </div>

src/components/MapInspector.module.css

@@ -0,0 +1,169 @@
+.Frame {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas:
+    "sidebar toolbar"
+    "sidebar content"
+    "sidebar footer";
+  width: 100vw;
+  width: 100dvw;
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+}
+
+.Toolbar {
+  display: flex;
+  align-items: center;
+  position: relative;
+  grid-area: toolbar;
+  background: rgb(25, 31, 31);
+  color: #fff;
+  border-bottom: 1px solid rgb(70, 85, 85);
+  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4);
+  z-index: 3;
+  view-transition-class: layout;
+}
+
+.CancelButton {
+  padding: 4px 6px;
+  font-size: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  white-space: nowrap;
+  z-index: 1;
+}
+
+.CancelButton:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+.Sidebar {
+  position: relative;
+  grid-area: sidebar;
+  width: 320px;
+  height: 100%;
+  min-height: 0;
+  overflow-y: auto;
+  background: rgb(25, 31, 31);
+  color: #fff;
+  border-right: 1px solid rgb(70, 85, 85);
+  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4);
+  z-index: 2;
+}
+
+.Content {
+  position: relative;
+  z-index: 0;
+  grid-area: content;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ThreeView {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 0;
+}
+
+.PlayerBar {
+  position: relative;
+  grid-area: footer;
+  background: rgb(25, 31, 31);
+  color: #fff;
+  border-top: 1px solid rgb(70, 85, 85);
+  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.4);
+  z-index: 1;
+}
+
+.ToggleSidebarButton {
+  flex: 0 0 auto;
+  display: grid;
+  place-content: center;
+  min-width: 30px;
+  min-height: 30px;
+  padding: 2px;
+  margin: 0 0 0 8px;
+  font-size: 24px;
+  border-radius: 4px;
+  background: transparent;
+  color: #fff;
+  border: 0;
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+.ToggleSidebarButton[data-orientation="top"] {
+  display: none;
+  min-height: 48px;
+  min-width: 48px;
+  margin: 0;
+}
+
+.ToggleSidebarButton:not(:disabled):hover {
+  opacity: 1;
+}
+
+.ToggleSidebarButton svg {
+  pointer-events: none;
+}
+
+.Backdrop {
+  display: none;
+}
+
+@media (max-width: 899px) {
+  .Frame {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas:
+      "toolbar"
+      "content"
+      "footer";
+  }
+
+  .Sidebar {
+    justify-self: center;
+    grid-area: content;
+    grid-row: content-start / footer-end;
+    width: auto;
+    max-width: 500px;
+    height: calc(100% + 1px);
+    margin: 0 -1px 0 -1px;
+    border: 1px solid rgb(70, 85, 85);
+    border-top: 0;
+  }
+
+  .Toolbar {
+    justify-content: center;
+  }
+
+  .ToggleSidebarButton[data-orientation="left"] {
+    display: none;
+  }
+
+  .ToggleSidebarButton[data-orientation="top"] {
+    display: grid;
+  }
+
+  .Backdrop {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 2;
+  }
+}

src/components/MapInspector.tsx

@@ -0,0 +1,387 @@
+"use client";
+import {
+  useState,
+  useEffect,
+  useCallback,
+  startTransition,
+  Suspense,
+  useRef,
+  lazy,
+  Activity,
+  ViewTransition,
+} from "react";
+import { Camera } from "three";
+import { InspectorControls } from "@/src/components/InspectorControls";
+import { MissionSelect } from "@/src/components/MissionSelect";
+import { StreamingMissionInfo } from "@/src/components/StreamingMissionInfo";
+import { SettingsProvider } from "@/src/components/SettingsProvider";
+import { ObserverCamera } from "@/src/components/ObserverCamera";
+import { AudioProvider } from "@/src/components/AudioContext";
+import { CamerasProvider } from "@/src/components/CamerasProvider";
+import {
+  RecordingProvider,
+  useRecording,
+} from "@/src/components/RecordingProvider";
+import { EntityScene } from "@/src/components/EntityScene";
+import { TickProvider } from "@/src/components/TickProvider";
+import { SceneLighting } from "@/src/components/SceneLighting";
+import { useFeatures } from "@/src/components/FeaturesProvider";
+import {
+  liveConnectionStore,
+  useLiveSelector,
+} from "@/src/state/liveConnectionStore";
+import { usePublicWindowAPI } from "@/src/components/usePublicWindowAPI";
+import {
+  CurrentMission,
+  useFogQueryState,
+  useMissionQueryState,
+} from "@/src/components/useQueryParams";
+import { ThreeCanvas, InvalidateFunction } from "@/src/components/ThreeCanvas";
+import { InputHandlers, InputProvider } from "./InputHandlers";
+import { VisualInput } from "./VisualInput";
+import { LoadingIndicator } from "./LoadingIndicator";
+import { AudioEnabled } from "./AudioEnabled";
+import { DebugEnabled } from "./DebugEnabled";
+import { engineStore } from "../state/engineStore";
+import {
+  gameEntityStore,
+  useDataSource,
+  useMissionName,
+  useMissionType,
+} from "../state/gameEntityStore";
+import { getMissionInfo } from "../manifest";
+import {
+  LuPanelLeftClose,
+  LuPanelLeftOpen,
+  LuPanelTopClose,
+  LuPanelTopOpen,
+} from "react-icons/lu";
+import styles from "./MapInspector.module.css";
+
+function createLazy(
+  name: string,
+  loader: () => Promise<{
+    [name]: React.ComponentType<any>;
+  }>,
+) {
+  return lazy(() => loader().then((mod) => ({ default: mod[name] })));
+}
+
+const StreamingController = createLazy(
+  "StreamingController",
+  () => import("@/src/components/StreamingController"),
+);
+const DemoPlaybackControls = createLazy(
+  "DemoPlaybackControls",
+  () => import("@/src/components/DemoPlaybackControls"),
+);
+const DebugElements = createLazy(
+  "DebugElements",
+  () => import("@/src/components/DebugElements"),
+);
+const Mission = createLazy("Mission", () => import("@/src/components/Mission"));
+const LiveObserver = createLazy(
+  "LiveObserver",
+  () => import("@/src/components/LiveObserver"),
+);
+const ChatSoundPlayer = createLazy(
+  "ChatSoundPlayer",
+  () => import("@/src/components/ChatSoundPlayer"),
+);
+const PlayerHUD = createLazy(
+  "PlayerHUD",
+  () => import("@/src/components/PlayerHUD"),
+);
+const MapInfoDialog = createLazy(
+  "MapInfoDialog",
+  () => import("@/src/components/MapInfoDialog"),
+);
+const ServerBrowser = createLazy(
+  "ServerBrowser",
+  () => import("@/src/components/ServerBrowser"),
+);
+
+export function MapInspector() {
+  const [currentMission, setCurrentMission] = useMissionQueryState();
+  const [fogEnabledOverride, setFogEnabledOverride] = useFogQueryState();
+
+  const clearFogEnabledOverride = useCallback(() => {
+    setFogEnabledOverride(null);
+  }, [setFogEnabledOverride]);
+  const features = useFeatures();
+  const { missionName, missionType } = currentMission;
+  const [mapInfoOpen, setMapInfoOpen] = useState(false);
+  const [serverBrowserOpen, setServerBrowserOpen] = useState(false);
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [choosingMap, setChoosingMap] = useState(false);
+  const [missionLoadingProgress, setMissionLoadingProgress] = useState(0);
+  const [showLoadingIndicator, setShowLoadingIndicator] = useState(true);
+
+  const changeMission = useCallback(
+    (mission: CurrentMission) => {
+      window.location.hash = "";
+      clearFogEnabledOverride();
+      setChoosingMap(false);
+      // Disconnect from any live server, unload any active recording, and
+      // clear stream state before loading the new mission in map mode.
+      const liveState = liveConnectionStore.getState();
+      liveState.disconnectServer();
+      liveState.disconnectRelay();
+      engineStore.getState().setRecording(null);
+      gameEntityStore.getState().endStreaming();
+      setCurrentMission(mission);
+    },
+    [setCurrentMission, clearFogEnabledOverride],
+  );
+
+  usePublicWindowAPI({ onChangeMission: changeMission });
+
+  const recording = useRecording();
+  const dataSource = useDataSource();
+  const hasStreamData = dataSource === "demo" || dataSource === "live";
+  const hasLiveAdapter = useLiveSelector((s) => s.adapter != null);
+
+  // Sync the mission query param when streaming data provides a mission name.
+  const streamMissionName = useMissionName();
+  const streamMissionType = useMissionType();
+  useEffect(() => {
+    if (!hasStreamData || !streamMissionName) return;
+    try {
+      const info = getMissionInfo(streamMissionName);
+      const matchedType =
+        streamMissionType && info.missionTypes.includes(streamMissionType)
+          ? streamMissionType
+          : undefined;
+      setCurrentMission({
+        missionName: streamMissionName,
+        missionType: matchedType,
+      });
+    } catch {
+      // Mission not in manifest — remove the query param.
+      setCurrentMission(null);
+    }
+  }, [hasStreamData, streamMissionName, streamMissionType, setCurrentMission]);
+
+  // Cancel "choosing map" when a new recording loads.
+  useEffect(() => {
+    if (recording) {
+      setChoosingMap(false);
+    }
+  }, [recording]);
+
+  const loadingProgress = missionLoadingProgress;
+  const isLoading = loadingProgress < 1;
+
+  // Keep the loading indicator visible briefly after reaching 100%
+  useEffect(() => {
+    if (isLoading) {
+      setShowLoadingIndicator(true);
+    } else {
+      const timer = setTimeout(() => setShowLoadingIndicator(false), 500);
+      return () => clearTimeout(timer);
+    }
+  }, [isLoading]);
+
+  const handleLoadingChange = useCallback(
+    (_loading: boolean, progress: number = 0) => {
+      setMissionLoadingProgress(progress);
+    },
+    [],
+  );
+
+  const cameraRef = useRef<Camera | null>(null);
+  const invalidateRef = useRef<InvalidateFunction | null>(null);
+
+  return (
+    <main className={styles.Frame}>
+      <RecordingProvider>
+        <SettingsProvider
+          fogEnabledOverride={fogEnabledOverride}
+          onClearFogEnabledOverride={clearFogEnabledOverride}
+        >
+          <header
+            className={styles.Toolbar}
+            onKeyDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <button
+              type="button"
+              className={styles.ToggleSidebarButton}
+              data-orientation="top"
+              aria-label={sidebarOpen ? "Close sidebar" : "Open sidebar"}
+              title={sidebarOpen ? "Close sidebar" : "Open sidebar"}
+              onClick={(event) => {
+                startTransition(() => setSidebarOpen((open) => !open));
+              }}
+            >
+              {sidebarOpen ? <LuPanelTopClose /> : <LuPanelTopOpen />}
+            </button>
+            <button
+              type="button"
+              className={styles.ToggleSidebarButton}
+              data-orientation="left"
+              aria-label={sidebarOpen ? "Close sidebar" : "Open sidebar"}
+              title={sidebarOpen ? "Close sidebar" : "Open sidebar"}
+              onClick={(event) => {
+                startTransition(() => setSidebarOpen((open) => !open));
+              }}
+            >
+              {sidebarOpen ? <LuPanelLeftClose /> : <LuPanelLeftOpen />}
+            </button>
+            <Activity
+              mode={hasStreamData && !choosingMap ? "visible" : "hidden"}
+            >
+              <StreamingMissionInfo />
+            </Activity>
+            <Activity
+              mode={!hasStreamData || choosingMap ? "visible" : "hidden"}
+            >
+              <MissionSelect
+                value={choosingMap ? "" : missionName}
+                missionType={choosingMap ? "" : missionType}
+                onChange={changeMission}
+                autoFocus={choosingMap}
+              />
+              {choosingMap && (
+                <button
+                  type="button"
+                  className={styles.CancelButton}
+                  onClick={() => {
+                    setChoosingMap(false);
+                  }}
+                >
+                  Cancel
+                </button>
+              )}
+            </Activity>
+          </header>
+          {sidebarOpen ? <div className={styles.Backdrop} /> : null}
+          <Activity mode={sidebarOpen ? "visible" : "hidden"}>
+            <ViewTransition>
+              <div
+                className={styles.Sidebar}
+                onKeyDown={(e) => e.stopPropagation()}
+                onPointerDown={(e) => e.stopPropagation()}
+                onClick={(e) => e.stopPropagation()}
+                data-open={sidebarOpen}
+              >
+                <InspectorControls
+                  missionName={missionName}
+                  missionType={missionType}
+                  onOpenMapInfo={() => setMapInfoOpen(true)}
+                  onOpenServerBrowser={
+                    features.live ? () => setServerBrowserOpen(true) : undefined
+                  }
+                  onChooseMap={
+                    hasStreamData
+                      ? () => {
+                          setChoosingMap(true);
+                        }
+                      : undefined
+                  }
+                  onCancelChoosingMap={() => {
+                    setChoosingMap(false);
+                  }}
+                  choosingMap={choosingMap}
+                  cameraRef={cameraRef}
+                  invalidateRef={invalidateRef}
+                />
+              </div>
+            </ViewTransition>
+          </Activity>
+          <InputProvider>
+            <div className={styles.Content}>
+              <div className={styles.ThreeView}>
+                <ThreeCanvas
+                  dpr={mapInfoOpen || serverBrowserOpen ? 0.25 : undefined}
+                  onCreated={(state) => {
+                    cameraRef.current = state.camera;
+                    invalidateRef.current = state.invalidate;
+                  }}
+                >
+                  <TickProvider>
+                    <CamerasProvider>
+                      <InputHandlers />
+                      <AudioProvider>
+                        <SceneLighting />
+                        <Suspense>
+                          <EntityScene />
+                        </Suspense>
+                        <ObserverCamera />
+                        <AudioEnabled>
+                          <ChatSoundPlayer />
+                        </AudioEnabled>
+                        <DebugEnabled>
+                          <DebugElements />
+                        </DebugEnabled>
+                        {recording ? (
+                          <Suspense>
+                            <StreamingController recording={recording} />
+                          </Suspense>
+                        ) : null}
+                        {!hasStreamData ? (
+                          <Suspense>
+                            <Mission
+                              key={`${missionName}~${missionType}`}
+                              name={missionName}
+                              missionType={missionType}
+                              onLoadingChange={handleLoadingChange}
+                            />
+                          </Suspense>
+                        ) : null}
+                        {hasLiveAdapter ? (
+                          <Suspense>
+                            <LiveObserver />
+                          </Suspense>
+                        ) : null}
+                      </AudioProvider>
+                    </CamerasProvider>
+                  </TickProvider>
+                </ThreeCanvas>
+              </div>
+              {hasStreamData ? (
+                <Suspense>
+                  <PlayerHUD />
+                </Suspense>
+              ) : null}
+              <VisualInput />
+              {showLoadingIndicator && (
+                <LoadingIndicator
+                  isLoading={isLoading}
+                  progress={loadingProgress}
+                />
+              )}
+            </div>
+          </InputProvider>
+          <footer
+            className={styles.PlayerBar}
+            onKeyDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {recording?.source === "demo" ? (
+              <Suspense>
+                <DemoPlaybackControls />
+              </Suspense>
+            ) : null}
+          </footer>
+          {mapInfoOpen ? (
+            <Suspense>
+              <MapInfoDialog
+                onClose={() => setMapInfoOpen(false)}
+                missionName={missionName}
+                missionType={missionType ?? ""}
+              />
+            </Suspense>
+          ) : null}
+          {serverBrowserOpen ? (
+            <Suspense>
+              <ServerBrowser onClose={() => setServerBrowserOpen(false)} />
+            </Suspense>
+          ) : null}
+        </SettingsProvider>
+      </RecordingProvider>
+    </main>
+  );
+}

src/components/Mission.tsx

@@ -19,9 +19,13 @@ import {
   getSourceAndPath,
 } from "../manifest";
 import { MissionProvider } from "./MissionContext";
-import { engineStore, gameEntityStore } from "../state";
+import { engineStore } from "../state/engineStore";
+import { gameEntityStore } from "../state/gameEntityStore";
 import { ignoreScripts } from "../torqueScript/ignoreScripts";
 import { walkMissionTree } from "../stream/missionEntityBridge";
+import { createLogger } from "../logger";
+
+const log = createLogger("Mission");
 
 const loadScript = createScriptLoader();
 // Shared cache for parsed scripts - survives runtime restarts
@@ -105,8 +109,16 @@ function useExecutedMission(
         engineStore.getState().setRuntime(runtime);
         const missionGroup = runtime.getObjectByName("MissionGroup");
         if (missionGroup) {
-          const gameEntities = walkMissionTree(missionGroup, runtime);
+          const gameEntities = walkMissionTree(
+            missionGroup,
+            runtime,
+            missionType,
+          );
           gameEntityStore.getState().setAllEntities(gameEntities);
+          gameEntityStore.getState().setMissionInfo({
+            missionName,
+            missionType: missionType ?? undefined,
+          });
         }
         setState({ ready: true, runtime, progress: 1 });
       })
@@ -114,7 +126,7 @@ function useExecutedMission(
         if (err instanceof Error && err.name === "AbortError") {
           return;
         }
-        console.error("Mission runtime failed to become ready:", err);
+        log.error("Mission runtime failed to become ready: %o", err);
       });
 
     // Subscribe as soon as the runtime exists so no mutation batches are missed

src/components/MissionSelect.module.css

@@ -2,6 +2,8 @@
   position: relative;
   display: flex;
   align-items: center;
+  margin: 10px 10px 10px 4px;
+  z-index: 2;
 }
 
 .Shortcut {
@@ -41,7 +43,10 @@
 }
 
 .Input::placeholder {
-  color: transparent;
+  font-size: 12px;
+  font-family: inherit;
+  color: #777;
+  /* color: transparent; */
 }
 
 .SelectedValue {
@@ -63,6 +68,7 @@
   color: #fff;
   font-weight: 600;
   font-size: 14px;
+  line-height: calc(18 / 14);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -158,6 +164,7 @@
 .ItemType {
   font-size: 10px;
   font-weight: 600;
+  line-height: calc(13 / 10);
   padding: 2px 5px;
   border-radius: 3px;
   background: rgba(255, 157, 0, 0.4);
@@ -179,3 +186,13 @@
   color: rgba(255, 255, 255, 0.5);
   text-align: center;
 }
+
+.Backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+}

src/components/MissionSelect.tsx

@@ -1,4 +1,5 @@
 import {
+  Activity,
   Fragment,
   startTransition,
   useEffect,
@@ -15,6 +16,7 @@ import {
   ComboboxGroup,
   ComboboxGroupLabel,
   useComboboxStore,
+  useStoreState,
 } from "@ariakit/react";
 import { matchSorter } from "match-sorter";
 import { getMissionInfo, getMissionList, getSourceAndPath } from "../manifest";
@@ -154,6 +156,7 @@ export function MissionSelect({
   missionType,
   onChange,
   disabled,
+  autoFocus,
 }: {
   value: string;
   missionType: string;
@@ -165,6 +168,7 @@ export function MissionSelect({
     missionType: string | undefined;
   }) => void;
   disabled?: boolean;
+  autoFocus?: boolean;
 }) {
   const [searchValue, setSearchValue] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
@@ -195,6 +199,8 @@ export function MissionSelect({
     },
   });
 
+  const isOpen = useStoreState(combobox, "open");
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
@@ -264,17 +270,23 @@ export function MissionSelect({
 
   return (
     <ComboboxProvider store={combobox}>
+      <Activity mode={isOpen ? "visible" : "hidden"}>
+        <div className={styles.Backdrop} />
+      </Activity>
       <div className={styles.InputWrapper}>
         <Combobox
           ref={inputRef}
           autoSelect
+          autoFocus={autoFocus}
           disabled={disabled}
-          placeholder={displayValue}
+          placeholder={selectedMission ? undefined : "Choose a map…"}
           className={styles.Input}
           onFocus={() => {
             try {
               document.exitPointerLock();
-            } catch  { /* expected */ }
+            } catch {
+              /* expected */
+            }
             combobox.show();
           }}
           onKeyDown={(e) => {
@@ -283,14 +295,16 @@ export function MissionSelect({
             }
           }}
         />
-        <div className={styles.SelectedValue}>
-          <span className={styles.SelectedName}>{displayValue}</span>
-          {missionType && (
-            <span className={styles.ItemType} data-mission-type={missionType}>
-              {missionType}
-            </span>
-          )}
-        </div>
+        {selectedMission && (
+          <div className={styles.SelectedValue}>
+            <span className={styles.SelectedName}>{displayValue}</span>
+            {missionType && (
+              <span className={styles.ItemType} data-mission-type={missionType}>
+                {missionType}
+              </span>
+            )}
+          </div>
+        )}
         <kbd className={styles.Shortcut}>{isMac ? "⌘K" : "^K"}</kbd>
       </div>
       <ComboboxPopover

src/components/ParticleEffects.tsx

@@ -36,10 +36,10 @@ import {
   particleFragmentShader,
 } from "../particles/shaders";
 import type { EmitterDataResolved } from "../particles/types";
-import type {
-  StreamSnapshot,
-  StreamingPlayback,
-} from "../stream/types";
+import type { StreamSnapshot, StreamingPlayback } from "../stream/types";
+import { createLogger } from "../logger";
+
+const log = createLogger("ParticleEffects");
 import { useDebug, useSettings } from "./SettingsProvider";
 import { useAudio } from "./AudioContext";
 import {
@@ -50,7 +50,7 @@ import {
   trackSound,
   untrackSound,
 } from "./AudioEmitter";
-import { effectNow, engineStore } from "../state";
+import { effectNow, engineStore } from "../state/engineStore";
 
 // ── Constants ──
 
@@ -96,9 +96,15 @@ function getParticleTexture(textureName: string): Texture {
 // ── Debug geometry (reusable) ──
 
 const _debugOriginGeo = new SphereGeometry(1, 6, 6);
-const _debugOriginMat = new MeshBasicMaterial({ color: 0xff0000, wireframe: true });
+const _debugOriginMat = new MeshBasicMaterial({
+  color: 0xff0000,
+  wireframe: true,
+});
 const _debugParticleGeo = new BoxGeometry(0.3, 0.3, 0.3);
-const _debugParticleMat = new MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
+const _debugParticleMat = new MeshBasicMaterial({
+  color: 0x00ff00,
+  wireframe: true,
+});
 
 // ── Explosion wireframe sphere geometry (reusable) ──
 
@@ -116,7 +122,10 @@ interface ActiveExplosionSphere {
 }
 
 /** Create a text label sprite for an explosion sphere. */
-function createExplosionLabel(text: string, color: number): { sprite: Sprite; material: SpriteMaterial } {
+function createExplosionLabel(
+  text: string,
+  color: number,
+): { sprite: Sprite; material: SpriteMaterial } {
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d")!;
   const fontSize = 32;
@@ -431,10 +440,10 @@ function getExplosionColor(dataBlock: string | undefined): number {
  * Each entry is `{x, y, z}` with values in range 0–16000 (scale multiplier).
  * Falls back to `particleRadius` or a default of 5.
  */
-function getExplosionRadius(
-  expBlock: Record<string, unknown>,
-): number {
-  const sizes = expBlock.sizes as Array<{ x: number; y: number; z: number }> | undefined;
+function getExplosionRadius(expBlock: Record<string, unknown>): number {
+  const sizes = expBlock.sizes as
+    | Array<{ x: number; y: number; z: number }>
+    | undefined;
   if (Array.isArray(sizes) && sizes.length > 0) {
     let maxVal = 0;
     for (const s of sizes) {
@@ -552,14 +561,17 @@ function checkShaderCompilation(
   material: ShaderMaterial,
   label: string,
 ): void {
-  const props = renderer.properties.get(material) as { currentProgram?: { program: WebGLProgram } };
+  const props = renderer.properties.get(material) as {
+    currentProgram?: { program: WebGLProgram };
+  };
   const program = props.currentProgram;
   if (!program) return; // Not yet compiled.
   const glProgram = program!.program;
   const glContext = renderer.getContext();
   if (!glContext.getProgramParameter(glProgram, glContext.LINK_STATUS)) {
-    console.error(
-      `[ParticleFX] Shader LINK ERROR (${label}):`,
+    log.error(
+      "Shader LINK ERROR (%s): %s",
+      label,
       glContext.getProgramInfoLog(glProgram),
     );
   }
@@ -847,7 +859,8 @@ export function ParticleEffects({
         group.add(sphereMesh);
 
         const labelText = `${entity.id}: ${entity.dataBlock ?? `expId:${entity.explosionDataBlockId}`}`;
-        const { sprite: labelSprite, material: labelMat } = createExplosionLabel(labelText, color);
+        const { sprite: labelSprite, material: labelMat } =
+          createExplosionLabel(labelText, color);
         labelSprite.position.set(origin[1], origin[2] + radius + 2, origin[0]);
         labelSprite.frustumCulled = false;
         group.add(labelSprite);
@@ -891,9 +904,8 @@ export function ParticleEffects({
           }
 
           // Clamp denormalized velocity values (parser bug workaround).
-          const initVelocity = Math.abs(swData.velocity) > 1e-10
-            ? swData.velocity
-            : 0;
+          const initVelocity =
+            Math.abs(swData.velocity) > 1e-10 ? swData.velocity : 0;
 
           activeShockwavesRef.current.push({
             entityId: entity.id as string,
@@ -910,7 +922,6 @@ export function ParticleEffects({
           });
         }
       }
-
     }
 
     // Detect projectile entities with trail emitters (maintainEmitterId).
@@ -918,7 +929,10 @@ export function ParticleEffects({
     for (const entity of snapshot.entities) {
       currentEntityIds.add(entity.id);
 
-      if (!entity.maintainEmitterId || trailEntitiesRef.current.has(entity.id)) {
+      if (
+        !entity.maintainEmitterId ||
+        trailEntitiesRef.current.has(entity.id)
+      ) {
         continue;
       }
       trailEntitiesRef.current.add(entity.id);
@@ -933,7 +947,10 @@ export function ParticleEffects({
         ? [...entity.position]
         : [0, 0, 0];
 
-      const emitter = new EmitterInstance(emitterData, MAX_PARTICLES_PER_EMITTER);
+      const emitter = new EmitterInstance(
+        emitterData,
+        MAX_PARTICLES_PER_EMITTER,
+      );
 
       const texture = getParticleTexture(emitterData.particles.textureName);
       const geometry = createParticleGeometry(MAX_PARTICLES_PER_EMITTER);
@@ -980,7 +997,11 @@ export function ParticleEffects({
 
       // One-time shader compilation check.
       if (!entry.shaderChecked) {
-        checkShaderCompilation(gl, entry.material, entry.isBurst ? "burst" : "stream");
+        checkShaderCompilation(
+          gl,
+          entry.material,
+          entry.isBurst ? "burst" : "stream",
+        );
         entry.shaderChecked = true;
       }
 
@@ -1166,7 +1187,13 @@ export function ParticleEffects({
     // ── Audio: explosion impact sounds ──
     // Only process new audio events while playing to avoid triggering
     // sounds during pause (existing sounds are frozen via AudioContext.suspend).
-    if (isPlaying && audioEnabled && audioLoader && audioListener && groupRef.current) {
+    if (
+      isPlaying &&
+      audioEnabled &&
+      audioLoader &&
+      audioListener &&
+      groupRef.current
+    ) {
       for (const entity of snapshot.entities) {
         if (
           entity.type !== "Explosion" ||
@@ -1205,7 +1232,11 @@ export function ParticleEffects({
       const projSounds = projectileSoundsRef.current;
 
       for (const entity of snapshot.entities) {
-        if (entity.type !== "Projectile" || !entity.dataBlockId || !entity.position) {
+        if (
+          entity.type !== "Projectile" ||
+          !entity.dataBlockId ||
+          !entity.position
+        ) {
           continue;
         }
         if (projSounds.has(entity.id)) {
@@ -1268,8 +1299,16 @@ export function ParticleEffects({
       for (const [entityId, sound] of projSounds) {
         if (!currentEntityIds.has(entityId)) {
           untrackSound(sound);
-          try { sound.stop(); } catch { /* already stopped */ }
-          try { sound.disconnect(); } catch { /* already disconnected */ }
+          try {
+            sound.stop();
+          } catch {
+            /* already stopped */
+          }
+          try {
+            sound.disconnect();
+          } catch {
+            /* already disconnected */
+          }
           groupRef.current?.remove(sound);
           projSounds.delete(entityId);
         }
@@ -1360,8 +1399,16 @@ export function ParticleEffects({
       // Clean up projectile sounds.
       for (const [, sound] of projectileSoundsRef.current) {
         untrackSound(sound);
-        try { sound.stop(); } catch { /* already stopped */ }
-        try { sound.disconnect(); } catch { /* already disconnected */ }
+        try {
+          sound.stop();
+        } catch {
+          /* already stopped */
+        }
+        try {
+          sound.disconnect();
+        } catch {
+          /* already disconnected */
+        }
         if (group) group.remove(sound);
       }
       projectileSoundsRef.current.clear();

src/components/PlayerHUD.module.css

@@ -8,12 +8,10 @@
   pointer-events: none;
 }
 
-/* ── Top-right cluster: compass + bars ── */
-
 .TopRight {
   position: absolute;
-  top: 56px;
-  right: 8px;
+  top: 10px;
+  right: 10px;
   display: flex;
   align-items: flex-start;
   gap: 6px;
@@ -87,103 +85,12 @@
   height: 6px;
 }
 
-/* ── Chat Window (top-left) ── */
-
-.ChatContainer {
-  position: absolute;
-  top: 56px;
-  left: 0;
-  max-width: 420px;
-  display: flex;
-  flex-direction: column;
-  pointer-events: auto;
-  border: 1px solid rgba(44, 172, 181, 0.4);
-}
-
-.ChatWindow {
-  max-width: 450px;
-  max-height: 12.5em;
-  overflow-y: auto;
-  background: rgba(0, 50, 60, 0.65);
-  padding: 6px 8px;
-  user-select: text;
-  font-size: 12px;
-  line-height: 1.333333;
-  /* Thin scrollbar that doesn't take much space. */
-  scrollbar-width: thin;
-  scrollbar-color: rgba(44, 172, 181, 0.4) transparent;
-}
-
-.ChatMessage {
-  padding: 1px 0;
-  /* Default to \c0 (GuiChatHudProfile fontColor) for untagged messages. */
-  color: rgb(44, 172, 181);
-}
-
-.ChatInputForm {
-  display: flex;
-}
-
-.ChatInput {
-  width: 100%;
-  background: rgba(0, 50, 60, 0.8);
-  border: 0;
-  border-top: 1px solid rgba(78, 179, 167, 0.2);
-  border-radius: 0;
-  color: rgb(40, 231, 240);
-  font-family: inherit;
-  font-size: 12px;
-  margin: 0;
-  padding: 6px 8px;
-  outline: none;
-}
-
-.ChatInput::placeholder {
-  color: rgba(44, 172, 181, 0.5);
-}
-
-.ChatInput:focus {
-  background: rgba(0, 50, 60, 0.9);
-}
-
-/* T2 GuiChatHudProfile fontColors palette (\c0–\c9). */
-.ChatColor0 {
-  color: rgb(44, 172, 181);
-}
-.ChatColor1 {
-  color: rgb(4, 235, 105);
-}
-.ChatColor2 {
-  color: rgb(219, 200, 128);
-}
-.ChatColor3 {
-  color: rgb(77, 253, 95);
-}
-.ChatColor4 {
-  color: rgb(40, 231, 240);
-}
-.ChatColor5 {
-  color: rgb(200, 200, 50);
-}
-.ChatColor6 {
-  color: rgb(200, 200, 200);
-}
-.ChatColor7 {
-  color: rgb(220, 220, 20);
-}
-.ChatColor8 {
-  color: rgb(150, 150, 250);
-}
-.ChatColor9 {
-  color: rgb(60, 220, 150);
-}
-
 /* ── Team Scores (bottom-left) ── */
 
 .TeamScores {
   position: absolute;
-  bottom: 130px;
-  left: 0;
+  bottom: 8px;
+  left: 8px;
   font-family: monospace;
   font-size: 12px;
 }
@@ -226,7 +133,7 @@
 
 .PackInventoryHUD {
   position: absolute;
-  bottom: 100px;
+  bottom: 8px;
   right: 8px;
   display: flex;
   align-items: center;

src/components/PlayerHUD.tsx

@@ -1,20 +1,16 @@
-import { useRef, useEffect, useState, useCallback } from "react";
-import { useRecording } from "./RecordingProvider";
-import { useEngineSelector } from "../state";
+import { useEngineSelector } from "../state/engineStore";
 import { textureToUrl } from "../loaders";
-import { liveConnectionStore } from "../state/liveConnectionStore";
-import type {
-  ChatSegment,
-  ChatMessage,
-  StreamEntity,
-  TeamScore,
-  WeaponsHudSlot,
-} from "../stream/types";
+import type { StreamEntity, TeamScore, WeaponsHudSlot } from "../stream/types";
 import styles from "./PlayerHUD.module.css";
-// ── Compass ──
+import { ChatWindow } from "./ChatWindow";
+
 const COMPASS_URL = textureToUrl("gui/hud_new_compass");
 const NSEW_URL = textureToUrl("gui/hud_new_NSEW");
-function Compass({ yaw }: { yaw: number | undefined }) {
+
+function Compass() {
+  const yaw = useEngineSelector(
+    (state) => state.playback.streamSnapshot?.camera?.yaw,
+  );
   if (yaw == null) return null;
   // The ring notch is the fixed heading indicator (always "forward" at top).
   // The NSEW letters rotate to show world cardinal directions relative to
@@ -33,41 +29,51 @@ function Compass({ yaw }: { yaw: number | undefined }) {
     </div>
   );
 }
-// ── Health / Energy bars ──
-function HealthBar({ value }: { value: number }) {
-  const pct = Math.max(0, Math.min(100, value * 100));
+
+function HealthBar() {
+  const health = useEngineSelector(
+    (state) => state.playback.streamSnapshot?.status?.health,
+  );
+  if (health == null) return null;
+  const pct = Math.max(0, Math.min(100, health * 100));
   return (
     <div className={styles.BarTrack}>
       <div className={styles.BarFillHealth} style={{ width: `${pct}%` }} />
     </div>
   );
 }
-function EnergyBar({ value }: { value: number }) {
-  const pct = Math.max(0, Math.min(100, value * 100));
+
+function EnergyBar() {
+  const energy = useEngineSelector(
+    (state) => state.playback.streamSnapshot?.status?.energy,
+  );
+  if (energy == null) return null;
+  const pct = Math.max(0, Math.min(100, energy * 100));
   return (
     <div className={styles.BarTrack}>
       <div className={styles.BarFillEnergy} style={{ width: `${pct}%` }} />
     </div>
   );
 }
-// ── Reticle ──
+
 const RETICLE_TEXTURES: Record<string, string> = {
   weapon_sniper: "gui/hud_ret_sniper",
   weapon_shocklance: "gui/hud_ret_shocklance",
   weapon_targeting: "gui/hud_ret_targlaser",
 };
+
 function normalizeWeaponName(shape: string | undefined): string {
   if (!shape) return "";
   return shape.replace(/\.dts$/i, "").toLowerCase();
 }
+
 function Reticle() {
   const weaponShape = useEngineSelector((state) => {
     const snap = state.playback.streamSnapshot;
     if (!snap || snap.camera?.mode !== "first-person") return undefined;
     const ctrl = snap.controlPlayerGhostId;
     if (!ctrl) return undefined;
-    return snap.entities.find((e: StreamEntity) => e.id === ctrl)
-      ?.weaponShape;
+    return snap.entities.find((e: StreamEntity) => e.id === ctrl)?.weaponShape;
   });
   if (weaponShape === undefined) return null;
   const weapon = normalizeWeaponName(weaponShape);
@@ -75,7 +81,6 @@ function Reticle() {
   if (textureName) {
     return (
       <div className={styles.Reticle}>
-        {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={textureToUrl(textureName)}
           alt=""
@@ -90,7 +95,7 @@ function Reticle() {
     </div>
   );
 }
-// ── Weapon HUD (right side weapon list) ──
+
 /** Maps $WeaponsHudData indices to simple icon textures (no baked background)
  *  and labels. Mortar uses hud_new_ because no simple variant exists. */
 const WEAPON_HUD_SLOTS: Record<number, { icon: string; label: string }> = {
@@ -114,6 +119,7 @@ const WEAPON_HUD_SLOTS: Record<number, { icon: string; label: string }> = {
   16: { icon: "gui/hud_shocklance", label: "Shocklance" },
   17: { icon: "gui/hud_new_mortar", label: "Mortar" },
 };
+
 // Precompute URLs so we don't call textureToUrl on every render.
 const WEAPON_HUD_ICON_URLS = new Map(
   Object.entries(WEAPON_HUD_SLOTS).map(([idx, w]) => [
@@ -121,9 +127,11 @@ const WEAPON_HUD_ICON_URLS = new Map(
     textureToUrl(w.icon),
   ]),
 );
+
 /** Targeting laser HUD indices (standard + TR2 variants). */
 const TARGETING_LASER_INDICES = new Set([9, 14, 15]);
 const INFINITY_ICON_URL = textureToUrl("gui/hud_infinity");
+
 function WeaponSlotIcon({
   slot,
   isSelected,
@@ -138,14 +146,12 @@ function WeaponSlotIcon({
     <div
       className={`${styles.PackInvItem} ${isSelected ? styles.PackInvItemActive : styles.PackInvItemDim}`}
     >
-      {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
         src={WEAPON_HUD_ICON_URLS.get(slot.index)!}
         alt={info.label}
         className={styles.PackInvIcon}
       />
       {isInfinite ? (
-        // eslint-disable-next-line @next/next/no-img-element
         <img
           src={INFINITY_ICON_URL}
           alt="\u221E"
@@ -157,6 +163,7 @@ function WeaponSlotIcon({
     </div>
   );
 }
+
 function WeaponHUD() {
   const weaponsHud = useEngineSelector(
     (state) => state.playback.streamSnapshot?.weaponsHud,
@@ -191,7 +198,7 @@ function WeaponHUD() {
     </div>
   );
 }
-// ── Team Scores (bottom-left) ──
+
 /** Default team names from serverDefaults.cs. */
 const DEFAULT_TEAM_NAMES: Record<number, string> = {
   1: "Storm",
@@ -201,6 +208,7 @@ const DEFAULT_TEAM_NAMES: Record<number, string> = {
   5: "Blood Eagle",
   6: "Phoenix",
 };
+
 function TeamScores() {
   const teamScores = useEngineSelector(
     (state) => state.playback.streamSnapshot?.teamScores,
@@ -242,101 +250,7 @@ function TeamScores() {
     </div>
   );
 }
-// ── Chat Window (top-left) ──
-/** Map a colorCode to a CSS module class name (c0–c9 GuiChatHudProfile). */
-const CHAT_COLOR_CLASSES: Record<number, string> = {
-  0: styles.ChatColor0,
-  1: styles.ChatColor1,
-  2: styles.ChatColor2,
-  3: styles.ChatColor3,
-  4: styles.ChatColor4,
-  5: styles.ChatColor5,
-  6: styles.ChatColor6,
-  7: styles.ChatColor7,
-  8: styles.ChatColor8,
-  9: styles.ChatColor9,
-};
-function segmentColorClass(colorCode: number): string {
-  return CHAT_COLOR_CLASSES[colorCode] ?? CHAT_COLOR_CLASSES[0];
-}
-function chatColorClass(msg: ChatMessage): string {
-  if (msg.colorCode != null && CHAT_COLOR_CLASSES[msg.colorCode]) {
-    return CHAT_COLOR_CLASSES[msg.colorCode];
-  }
-  // Fallback: default to \c0 (teal). Messages with detected codes (like \c2
-  // for flag events) will match above; \c0 kill messages may lose their null
-  // byte color code, so the correct default for server messages is c0.
-  return CHAT_COLOR_CLASSES[0];
-}
-function ChatWindow({ isLive }: { isLive: boolean }) {
-  const messages = useEngineSelector(
-    (state) => state.playback.streamSnapshot?.chatMessages,
-  );
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const prevCountRef = useRef(0);
-  const [chatText, setChatText] = useState("");
 
-  // Auto-scroll to bottom when new messages arrive.
-  const msgCount = messages?.length ?? 0;
-  useEffect(() => {
-    if (msgCount > prevCountRef.current && scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
-    prevCountRef.current = msgCount;
-  }, [msgCount]);
-
-  const handleSubmit = useCallback(
-    (e: React.FormEvent) => {
-      e.preventDefault();
-      const text = chatText.trim();
-      if (!text) return;
-      liveConnectionStore.getState().sendCommand("messageSent", text);
-      setChatText("");
-    },
-    [chatText],
-  );
-
-  const hasMessages = !!messages?.length;
-
-  return (
-    <div className={styles.ChatContainer}>
-      {hasMessages && (
-        <div ref={scrollRef} className={styles.ChatWindow}>
-          {messages!.map((msg: ChatMessage, i: number) => (
-            <div key={msg.id} className={styles.ChatMessage}>
-              {msg.segments ? (
-                msg.segments.map((seg: ChatSegment, j: number) => (
-                  <span key={j} className={segmentColorClass(seg.colorCode)}>
-                    {seg.text}
-                  </span>
-                ))
-              ) : (
-                <span className={chatColorClass(msg)}>
-                  {msg.sender ? `${msg.sender}: ` : ""}
-                  {msg.text}
-                </span>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-      {isLive && (
-        <form className={styles.ChatInputForm} onSubmit={handleSubmit}>
-          <input
-            className={styles.ChatInput}
-            type="text"
-            placeholder="Say something…"
-            value={chatText}
-            onChange={(e) => setChatText(e.target.value)}
-            onKeyDown={(e) => e.stopPropagation()}
-            onKeyUp={(e) => e.stopPropagation()}
-            maxLength={255}
-          />
-        </form>
-      )}
-    </div>
-  );
-}
 // ── Backpack + Inventory HUD (bottom-right) ──
 /** Maps $BackpackHudData indices to icon textures. */
 const BACKPACK_ICONS: Record<number, string> = {
@@ -429,7 +343,6 @@ function PackAndInventoryHUD() {
         <div
           className={`${styles.PackInvItem} ${backpackHud!.active ? styles.PackInvItemActive : ""}`}
         >
-          {/* eslint-disable-next-line @next/next/no-img-element */}
           <img src={packIconUrl} alt="" className={styles.PackInvIcon} />
           <span className={styles.PackInvCount}>
             {backpackHud!.text || "\u00A0"}
@@ -442,7 +355,6 @@ function PackAndInventoryHUD() {
         if (!info || !iconUrl) return null;
         return (
           <div key={slotId} className={styles.PackInvItem}>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
               src={iconUrl}
               alt={info.label}
@@ -457,32 +369,31 @@ function PackAndInventoryHUD() {
     </div>
   );
 }
-// ── Main HUD ──
-export function PlayerHUD({ isLive = false }: { isLive?: boolean } = {}) {
-  const recording = useRecording();
-  const streamSnapshot = useEngineSelector(
-    (state) => state.playback.streamSnapshot,
+
+export function PlayerHUD() {
+  const hasControlPlayer = useEngineSelector(
+    (state) => !!state.playback.streamSnapshot?.controlPlayerGhostId,
   );
-  if (!recording && !isLive) return null;
-  const status = streamSnapshot?.status;
   return (
     <div className={styles.PlayerHUD}>
-      <ChatWindow isLive={isLive} />
-      {status && (
-        <>
-          <div className={styles.TopRight}>
-            <div className={styles.Bars}>
-              <HealthBar value={status.health} />
-              <EnergyBar value={status.energy} />
-            </div>
-            <Compass yaw={streamSnapshot?.camera?.yaw} />
+      <ChatWindow />
+      <div className={styles.TopRight}>
+        {hasControlPlayer && (
+          <div className={styles.Bars}>
+            <HealthBar />
+            <EnergyBar />
           </div>
+        )}
+        <Compass />
+      </div>
+      {hasControlPlayer && (
+        <>
           <WeaponHUD />
           <PackAndInventoryHUD />
-          <TeamScores />
           <Reticle />
         </>
       )}
+      <TeamScores />
     </div>
   );
 }

src/components/PlayerModel.tsx

@@ -1,4 +1,4 @@
-import { Suspense, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import type { MutableRefObject } from "react";
 import { useFrame } from "@react-three/fiber";
 import {
@@ -26,8 +26,9 @@ import { pickMoveAnimation } from "../stream/playerAnimation";
 import { WeaponImageStateMachine } from "../stream/weaponStateMachine";
 import type { WeaponAnimState } from "../stream/weaponStateMachine";
 import { getAliasedActions } from "../torqueScript/shapeConstructor";
-import { useStaticShape } from "./GenericShape";
-import { ShapeErrorBoundary } from "./EntityScene";
+import { useStaticShape, ShapePlaceholder } from "./GenericShape";
+import { ShapeErrorBoundary } from "./ShapeErrorBoundary";
+import { DebugSuspense } from "./DebugSuspense";
 import { useAudio } from "./AudioContext";
 import {
   resolveAudioProfile,
@@ -39,7 +40,7 @@ import {
 } from "./AudioEmitter";
 import { audioToUrl } from "../loaders";
 import { useSettings } from "./SettingsProvider";
-import { useEngineStoreApi, useEngineSelector } from "../state";
+import { useEngineStoreApi, useEngineSelector } from "../state/engineStore";
 import { streamPlaybackStore } from "../state/streamPlaybackStore";
 import type { PlayerEntity } from "../state/gameEntityTypes";
 
@@ -60,8 +61,16 @@ function getArmThread(weaponShape: string | undefined): string {
 const NUM_TABLE_ACTION_ANIMS = 8;
 
 /** Table action names in engine order (indices 0-7). */
-const TABLE_ACTION_NAMES = ["root", "run", "back", "side", "fall", "jet", "jump", "land"];
-
+const TABLE_ACTION_NAMES = [
+  "root",
+  "run",
+  "back",
+  "side",
+  "fall",
+  "jet",
+  "jump",
+  "land",
+];
 
 interface ActionAnimEntry {
   /** GLB clip name (lowercase, e.g. "diehead"). */
@@ -90,7 +99,10 @@ function buildActionAnimMap(
     const spaceIdx = entry.indexOf(" ");
     if (spaceIdx === -1) continue;
     const dsqFile = entry.slice(0, spaceIdx).toLowerCase();
-    const alias = entry.slice(spaceIdx + 1).trim().toLowerCase();
+    const alias = entry
+      .slice(spaceIdx + 1)
+      .trim()
+      .toLowerCase();
     if (!alias || !dsqFile.startsWith(shapePrefix) || !dsqFile.endsWith(".dsq"))
       continue;
     const clipName = dsqFile.slice(shapePrefix.length, -4);
@@ -131,8 +143,16 @@ function stopLoopingSound(
   const sound = soundRef.current;
   if (!sound) return;
   untrackSound(sound);
-  try { sound.stop(); } catch { /* already stopped */ }
-  try { sound.disconnect(); } catch { /* already disconnected */ }
+  try {
+    sound.stop();
+  } catch {
+    /* already stopped */
+  }
+  try {
+    sound.disconnect();
+  } catch {
+    /* already disconnected */
+  }
   parent?.remove(sound);
   soundRef.current = null;
   stateRef.current = -1;
@@ -152,36 +172,44 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
   const gltf = useStaticShape(shapeName!);
   const shapeAliases = useEngineSelector((state) => {
     const sn = shapeName?.toLowerCase();
-    return sn
-      ? state.runtime.sequenceAliases.get(sn)
-      : undefined;
+    return sn ? state.runtime.sequenceAliases.get(sn) : undefined;
   });
 
   // Clone scene preserving skeleton bindings, create mixer, find mount bones.
-  const { clonedScene, mixer, mount0, mount1, iflInitializers } = useMemo(() => {
-    const scene = SkeletonUtils.clone(gltf.scene) as Group;
-    const iflInits = processShapeScene(scene);
+  const { clonedScene, mixer, mount0, mount1, mount2, iflInitializers } =
+    useMemo(() => {
+      const scene = SkeletonUtils.clone(gltf.scene) as Group;
+      const iflInits = processShapeScene(scene);
 
-    // Use front-face-only rendering so the camera can see out from inside the
-    // model in first-person (backface culling hides interior faces).
-    scene.traverse((n: any) => {
-      if (n.isMesh && n.material) {
-        const mats = Array.isArray(n.material) ? n.material : [n.material];
-        for (const m of mats) m.side = FrontSide;
-      }
-    });
+      // Use front-face-only rendering so the camera can see out from inside the
+      // model in first-person (backface culling hides interior faces).
+      scene.traverse((n: any) => {
+        if (n.isMesh && n.material) {
+          const mats = Array.isArray(n.material) ? n.material : [n.material];
+          for (const m of mats) m.side = FrontSide;
+        }
+      });
 
-    const mix = new AnimationMixer(scene);
+      const mix = new AnimationMixer(scene);
 
-    let m0: Object3D | null = null;
-    let m1: Object3D | null = null;
-    scene.traverse((n) => {
-      if (!m0 && n.name === "Mount0") m0 = n;
-      if (!m1 && n.name === "Mount1") m1 = n;
-    });
+      let m0: Object3D | null = null;
+      let m1: Object3D | null = null;
+      let m2: Object3D | null = null;
+      scene.traverse((n) => {
+        if (!m0 && n.name === "Mount0") m0 = n;
+        if (!m1 && n.name === "Mount1") m1 = n;
+        if (!m2 && n.name === "Mount2") m2 = n;
+      });
 
-    return { clonedScene: scene, mixer: mix, mount0: m0, mount1: m1, iflInitializers: iflInits };
-  }, [gltf]);
+      return {
+        clonedScene: scene,
+        mixer: mix,
+        mount0: m0,
+        mount1: m1,
+        mount2: m2,
+        iflInitializers: iflInits,
+      };
+    }, [gltf]);
 
   // Build case-insensitive clip lookup with alias support.
   const animActionsRef = useRef(new Map<string, AnimationAction>());
@@ -226,7 +254,10 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
     // place) since multiple player entities share the same GLTF cache.
 
     // Head blend actions.
-    const blendRefs: typeof blendActionsRef.current = { head: null, headside: null };
+    const blendRefs: typeof blendActionsRef.current = {
+      head: null,
+      headside: null,
+    };
     for (const { key, names } of [
       { key: "head" as const, names: ["head"] },
       { key: "headside" as const, names: ["headside"] },
@@ -318,6 +349,8 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
   );
   const packShapeRef = useRef(entity.packShape);
   const [currentPackShape, setCurrentPackShape] = useState(entity.packShape);
+  const flagShapeRef = useRef(entity.flagShape);
+  const [currentFlagShape, setCurrentFlagShape] = useState(entity.flagShape);
 
   // Per-frame animation selection and mixer update.
   useFrame((_, delta) => {
@@ -329,6 +362,10 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
       packShapeRef.current = entity.packShape;
       setCurrentPackShape(entity.packShape);
     }
+    if (entity.flagShape !== flagShapeRef.current) {
+      flagShapeRef.current = entity.flagShape;
+      setCurrentFlagShape(entity.flagShape);
+    }
     const playback = engineStore.getState().playback;
     const isPlaying = playback.status === "playing";
     const time = streamPlaybackStore.getState().time;
@@ -343,9 +380,8 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
       isDeadRef.current = true;
 
       // The server sends the death animation as an actionAnim index.
-      const deathEntry = kf.actionAnim != null
-        ? actionAnimMap.get(kf.actionAnim)
-        : undefined;
+      const deathEntry =
+        kf.actionAnim != null ? actionAnimMap.get(kf.actionAnim) : undefined;
       if (deathEntry) {
         const deathAction = actions.get(deathEntry.clipName);
         if (deathAction) {
@@ -368,7 +404,9 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
       isDeadRef.current = false;
       actionAnimRef.current = undefined;
 
-      const deathAction = actions.get(currentAnimRef.current.name.toLowerCase());
+      const deathAction = actions.get(
+        currentAnimRef.current.name.toLowerCase(),
+      );
       if (deathAction) {
         deathAction.stop();
         deathAction.setLoop(LoopRepeat, Infinity);
@@ -386,8 +424,10 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
     const prevActionAnim = actionAnimRef.current;
     if (!isDeadRef.current && actionAnim !== prevActionAnim) {
       actionAnimRef.current = actionAnim;
-      const isNonTableAction = actionAnim != null && actionAnim >= NUM_TABLE_ACTION_ANIMS;
-      const wasNonTableAction = prevActionAnim != null && prevActionAnim >= NUM_TABLE_ACTION_ANIMS;
+      const isNonTableAction =
+        actionAnim != null && actionAnim >= NUM_TABLE_ACTION_ANIMS;
+      const wasNonTableAction =
+        prevActionAnim != null && prevActionAnim >= NUM_TABLE_ACTION_ANIMS;
 
       if (isNonTableAction) {
         // Start or change action animation.
@@ -395,7 +435,9 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
         if (entry) {
           const actionAction = actions.get(entry.clipName);
           if (actionAction) {
-            const prevAction = actions.get(currentAnimRef.current.name.toLowerCase());
+            const prevAction = actions.get(
+              currentAnimRef.current.name.toLowerCase(),
+            );
             if (prevAction) prevAction.fadeOut(ANIM_TRANSITION_TIME);
             actionAction.setLoop(LoopOnce, 1);
             actionAction.clampWhenFinished = true;
@@ -421,7 +463,11 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
     }
 
     // If atEnd, clamp the action animation at its final frame.
-    if (actionAnim != null && actionAnim >= NUM_TABLE_ACTION_ANIMS && kf?.actionAtEnd) {
+    if (
+      actionAnim != null &&
+      actionAnim >= NUM_TABLE_ACTION_ANIMS &&
+      kf?.actionAtEnd
+    ) {
       const entry = actionAnimMap.get(actionAnim);
       if (entry) {
         const actionAction = actions.get(entry.clipName);
@@ -432,7 +478,8 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
     }
 
     // Movement animation selection (skip while dead or playing action anim).
-    const playingActionAnim = actionAnimRef.current != null &&
+    const playingActionAnim =
+      actionAnimRef.current != null &&
       actionAnimRef.current >= NUM_TABLE_ACTION_ANIMS;
     if (!isDeadRef.current && !playingActionAnim) {
       const anim = pickMoveAnimation(
@@ -518,24 +565,52 @@ export function PlayerModel({ entity }: { entity: PlayerEntity }) {
         <primitive object={clonedScene} />
       </group>
       {currentWeaponShape && mount0 && (
-        <ShapeErrorBoundary key={currentWeaponShape} fallback={null}>
-          <Suspense fallback={null}>
-            <AnimatedWeaponModel
+        <ShapeErrorBoundary
+          key={currentWeaponShape}
+          fallback={<ShapePlaceholder color="red" label={currentWeaponShape} />}
+        >
+          <DebugSuspense
+            label={`Weapon:${entity.id}/${currentWeaponShape}`}
+            fallback={
+              <ShapePlaceholder color="cyan" label={currentWeaponShape} />
+            }
+          >
+            <WeaponModel
               entity={entity}
               weaponShape={currentWeaponShape}
               mount0={mount0}
             />
-          </Suspense>
+          </DebugSuspense>
         </ShapeErrorBoundary>
       )}
       {currentPackShape && mount1 && (
-        <ShapeErrorBoundary key={currentPackShape} fallback={null}>
-          <Suspense fallback={null}>
-            <MountedPackModel
-              packShape={currentPackShape}
-              mountBone={mount1}
-            />
-          </Suspense>
+        <ShapeErrorBoundary
+          key={currentPackShape}
+          fallback={<ShapePlaceholder color="red" label={currentPackShape} />}
+        >
+          <DebugSuspense
+            label={`Pack:${entity.id}/${currentPackShape}`}
+            fallback={
+              <ShapePlaceholder color="cyan" label={currentPackShape} />
+            }
+          >
+            <PackModel packShape={currentPackShape} mountBone={mount1} />
+          </DebugSuspense>
+        </ShapeErrorBoundary>
+      )}
+      {currentFlagShape && mount2 && (
+        <ShapeErrorBoundary
+          key={currentFlagShape}
+          fallback={<ShapePlaceholder color="red" label={currentFlagShape} />}
+        >
+          <DebugSuspense
+            label={`Flag:${entity.id}/${currentFlagShape}`}
+            fallback={
+              <ShapePlaceholder color="cyan" label={currentFlagShape} />
+            }
+          >
+            <PackModel packShape={currentFlagShape} mountBone={mount2} />
+          </DebugSuspense>
         </ShapeErrorBoundary>
       )}
     </>
@@ -556,7 +631,9 @@ function buildSeqIndexToName(
     try {
       const names: string[] = JSON.parse(raw);
       return names.map((n) => n.toLowerCase());
-    } catch { /* fall through */ }
+    } catch {
+      /* fall through */
+    }
   }
   return animations.map((a) => a.name.toLowerCase());
 }
@@ -571,7 +648,7 @@ function buildSeqIndexToName(
  * from the entity inside useFrame, since these fields are mutated per-tick
  * without triggering React re-renders.
  */
-function AnimatedWeaponModel({
+function WeaponModel({
   entity,
   weaponShape,
   mount0,
@@ -584,55 +661,60 @@ function AnimatedWeaponModel({
   const weaponGltf = useStaticShape(weaponShape);
 
   // Clone weapon with skeleton bindings, create dedicated mixer.
-  const { weaponClone, weaponMixer, seqIndexToName, visNodesBySequence, weaponIflInitializers } =
-    useMemo(() => {
-      const clone = SkeletonUtils.clone(weaponGltf.scene) as Group;
-      const iflInits = processShapeScene(clone);
+  const {
+    weaponClone,
+    weaponMixer,
+    seqIndexToName,
+    visNodesBySequence,
+    weaponIflInitializers,
+  } = useMemo(() => {
+    const clone = SkeletonUtils.clone(weaponGltf.scene) as Group;
+    const iflInits = processShapeScene(clone);
 
-      // Compute Mountpoint inverse offset so the weapon's grip aligns to Mount0.
-      const mp = getPosedNodeTransform(
-        weaponGltf.scene,
-        weaponGltf.animations,
-        "Mountpoint",
-      );
-      if (mp) {
-        const invQuat = mp.quaternion.clone().invert();
-        const invPos = mp.position.clone().negate().applyQuaternion(invQuat);
-        clone.position.copy(invPos);
-        clone.quaternion.copy(invQuat);
+    // Compute Mountpoint inverse offset so the weapon's grip aligns to Mount0.
+    const mp = getPosedNodeTransform(
+      weaponGltf.scene,
+      weaponGltf.animations,
+      "Mountpoint",
+    );
+    if (mp) {
+      const invQuat = mp.quaternion.clone().invert();
+      const invPos = mp.position.clone().negate().applyQuaternion(invQuat);
+      clone.position.copy(invPos);
+      clone.quaternion.copy(invQuat);
+    }
+
+    // Collect vis-animated meshes grouped by controlling sequence name.
+    // E.g. the disc launcher's Disc mesh has vis_sequence="discSpin" and is
+    // hidden by default (vis=0). When "discSpin" plays, the mesh becomes
+    // visible; when a different sequence plays, it hides again.
+    const visBySeq = new Map<string, Object3D[]>();
+    clone.traverse((node: any) => {
+      if (!node.isMesh) return;
+      const ud = node.userData;
+      const seqName = (ud?.vis_sequence ?? "").toLowerCase();
+      if (!seqName) return;
+      let list = visBySeq.get(seqName);
+      if (!list) {
+        list = [];
+        visBySeq.set(seqName, list);
       }
+      list.push(node);
+    });
 
-      // Collect vis-animated meshes grouped by controlling sequence name.
-      // E.g. the disc launcher's Disc mesh has vis_sequence="discSpin" and is
-      // hidden by default (vis=0). When "discSpin" plays, the mesh becomes
-      // visible; when a different sequence plays, it hides again.
-      const visBySeq = new Map<string, Object3D[]>();
-      clone.traverse((node: any) => {
-        if (!node.isMesh) return;
-        const ud = node.userData;
-        const seqName = (ud?.vis_sequence ?? "").toLowerCase();
-        if (!seqName) return;
-        let list = visBySeq.get(seqName);
-        if (!list) {
-          list = [];
-          visBySeq.set(seqName, list);
-        }
-        list.push(node);
-      });
-
-      const mix = new AnimationMixer(clone);
-      const seq = buildSeqIndexToName(
-        weaponGltf.scene as Group,
-        weaponGltf.animations,
-      );
-      return {
-        weaponClone: clone,
-        weaponMixer: mix,
-        seqIndexToName: seq,
-        visNodesBySequence: visBySeq,
-        weaponIflInitializers: iflInits,
-      };
-    }, [weaponGltf]);
+    const mix = new AnimationMixer(clone);
+    const seq = buildSeqIndexToName(
+      weaponGltf.scene as Group,
+      weaponGltf.animations,
+    );
+    return {
+      weaponClone: clone,
+      weaponMixer: mix,
+      seqIndexToName: seq,
+      visNodesBySequence: visBySeq,
+      weaponIflInitializers: iflInits,
+    };
+  }, [weaponGltf]);
 
   // Build case-insensitive action map for weapon animations.
   const weaponActionsRef = useRef(new Map<string, AnimationAction>());
@@ -760,8 +842,10 @@ function AnimatedWeaponModel({
         audioListener &&
         animState.soundDataBlockIds.length > 0
       ) {
-        const getDb = playback.recording?.streamingPlayback.getDataBlockData
-          .bind(playback.recording.streamingPlayback);
+        const getDb =
+          playback.recording?.streamingPlayback.getDataBlockData.bind(
+            playback.recording.streamingPlayback,
+          );
         if (getDb) {
           for (const soundDbId of animState.soundDataBlockIds) {
             const resolved = resolveAudioProfile(soundDbId, getDb);
@@ -795,7 +879,9 @@ function AnimatedWeaponModel({
                     loopingSoundRef.current = sound;
                     loopingSoundStateRef.current = currentIdx;
                   });
-                } catch  { /* expected */ }
+                } catch {
+                  /* expected */
+                }
               }
             } else {
               playOneShotSound(
@@ -814,7 +900,6 @@ function AnimatedWeaponModel({
       if (spinActionRef.current) {
         spinActionRef.current.timeScale = animState.spinTimeScale;
       }
-
     }
 
     // Advance the weapon mixer.
@@ -898,9 +983,8 @@ function applyWeaponAnim(
     // Scale animation to fit the state timeout if requested.
     if (animState.scaleAnimation && animState.timeoutValue > 0) {
       const clipDuration = action.getClip().duration;
-      action.timeScale = clipDuration > 0
-        ? clipDuration / animState.timeoutValue
-        : 1;
+      action.timeScale =
+        clipDuration > 0 ? clipDuration / animState.timeoutValue : 1;
     } else {
       action.timeScale = animState.reverse ? -1 : 1;
     }
@@ -921,7 +1005,7 @@ function applyWeaponAnim(
  * mounted images (no state machine or animation) — just positioned via
  * the pack shape's Mountpoint node inverse offset, same as weapons.
  */
-function MountedPackModel({
+function PackModel({
   packShape,
   mountBone,
 }: {

src/components/PlayerNameplate.tsx

@@ -29,7 +29,7 @@ const _tmpVec = new Vector3();
  */
 export function PlayerNameplate({ entity }: { entity: PlayerEntity }) {
   const gltf = useStaticShape((entity.shapeName ?? entity.dataBlock)!);
-  const { camera } = useThree();
+  const camera = useThree((state) => state.camera);
   const groupRef = useRef<Object3D>(null);
   const iffContainerRef = useRef<HTMLDivElement>(null);
   const nameContainerRef = useRef<HTMLDivElement>(null);
@@ -75,7 +75,10 @@ export function PlayerNameplate({ entity }: { entity: PlayerEntity }) {
     if (!shouldBeVisible) return;
 
     // Hide nameplate when player is dead.
-    const kf = getKeyframeAtTime(keyframes, streamPlaybackStore.getState().time);
+    const kf = getKeyframeAtTime(
+      keyframes,
+      streamPlaybackStore.getState().time,
+    );
     const health = kf?.health ?? 1;
     if (kf?.damageState != null && kf.damageState >= 1) {
       if (iffContainerRef.current) iffContainerRef.current.style.opacity = "0";

src/components/Projectiles.tsx

@@ -16,7 +16,7 @@ import {
   setQuaternionFromDir,
 } from "../stream/playbackUtils";
 import { textureToUrl } from "../loaders";
-import type { TracerVisual, SpriteVisual } from "../stream/types";
+import { SpriteEntity, TracerEntity } from "../state/gameEntityTypes";
 
 const _tracerDir = new Vector3();
 const _tracerDirFromCam = new Vector3();
@@ -26,7 +26,8 @@ const _tracerEnd = new Vector3();
 const _tracerWorldPos = new Vector3();
 const _upY = new Vector3(0, 1, 0);
 
-export function SpriteProjectile({ visual }: { visual: SpriteVisual }) {
+export function SpriteProjectile({ entity }: { entity: SpriteEntity }) {
+  const { visual } = entity;
   const url = textureToUrl(visual.texture);
   const texture = useTexture(url, (tex) => {
     const t = Array.isArray(tex) ? tex[0] : tex;
@@ -37,7 +38,12 @@ export function SpriteProjectile({ visual }: { visual: SpriteVisual }) {
   // Convert sRGB datablock color to linear for Three.js material.
   const color = useMemo(
     () =>
-      new Color().setRGB(visual.color.r, visual.color.g, visual.color.b, SRGBColorSpace),
+      new Color().setRGB(
+        visual.color.r,
+        visual.color.g,
+        visual.color.b,
+        SRGBColorSpace,
+      ),
     [visual.color.r, visual.color.g, visual.color.b],
   );
 
@@ -55,13 +61,8 @@ export function SpriteProjectile({ visual }: { visual: SpriteVisual }) {
   );
 }
 
-export function TracerProjectile({
-  entity,
-  visual,
-}: {
-  entity: { keyframes?: Array<{ position?: [number, number, number]; velocity?: [number, number, number] }>; direction?: [number, number, number] };
-  visual: TracerVisual;
-}) {
+export function TracerProjectile({ entity }: { entity: TracerEntity }) {
+  const { visual } = entity;
   const tracerRef = useRef<Mesh>(null);
   const tracerPosRef = useRef<BufferAttribute>(null);
   const crossRef = useRef<Mesh>(null);
@@ -167,14 +168,12 @@ export function TracerProjectile({
           />
           <bufferAttribute
             attach="attributes-uv"
-            args={[
-              new Float32Array([
-                0, 0, 0, 1, 1, 1, 1, 0,
-              ]),
-              2,
-            ]}
+            args={[new Float32Array([0, 0, 0, 1, 1, 1, 1, 0]), 2]}
+          />
+          <bufferAttribute
+            attach="index"
+            args={[new Uint16Array([0, 1, 2, 0, 2, 3]), 1]}
           />
-          <bufferAttribute attach="index" args={[new Uint16Array([0, 1, 2, 0, 2, 3]), 1]} />
         </bufferGeometry>
         <meshBasicMaterial
           map={tracerTexture}
@@ -192,24 +191,19 @@ export function TracerProjectile({
               attach="attributes-position"
               args={[
                 new Float32Array([
-                  -0.5, 0, -0.5,
-                  0.5, 0, -0.5,
-                  0.5, 0, 0.5,
-                  -0.5, 0, 0.5,
+                  -0.5, 0, -0.5, 0.5, 0, -0.5, 0.5, 0, 0.5, -0.5, 0, 0.5,
                 ]),
                 3,
               ]}
             />
             <bufferAttribute
               attach="attributes-uv"
-              args={[
-                new Float32Array([
-                  0, 0, 0, 1, 1, 1, 1, 0,
-                ]),
-                2,
-              ]}
+              args={[new Float32Array([0, 0, 0, 1, 1, 1, 1, 0]), 2]}
+            />
+            <bufferAttribute
+              attach="index"
+              args={[new Uint16Array([0, 1, 2, 0, 2, 3]), 1]}
             />
-            <bufferAttribute attach="index" args={[new Uint16Array([0, 1, 2, 0, 2, 3]), 1]} />
           </bufferGeometry>
           <meshBasicMaterial
             map={crossTexture}

src/components/RecordingProvider.tsx

@@ -1,6 +1,6 @@
 import { useCallback, type ReactNode } from "react";
 import type { StreamRecording } from "../stream/types";
-import { useEngineSelector } from "../state";
+import { useEngineSelector } from "../state/engineStore";
 
 export function RecordingProvider({ children }: { children: ReactNode }) {
   return <>{children}</>;

src/components/RuntimeProvider.tsx

@@ -1,7 +1,6 @@
 import { createContext, ReactNode, useContext } from "react";
 import type { TorqueRuntime } from "../torqueScript";
 
-
 const RuntimeContext = createContext<TorqueRuntime | null>(null);
 
 export interface RuntimeProviderProps {
@@ -24,4 +23,3 @@ export function useRuntime(): TorqueRuntime {
   }
   return runtime;
 }
-

src/components/SceneLighting.tsx

@@ -1,9 +1,12 @@
 import { useEffect, useMemo } from "react";
 import { Color, Vector3 } from "three";
+import { createLogger } from "../logger";
 import { useSceneSun } from "../state/gameEntityStore";
 import { torqueToThree } from "../scene/coordinates";
 import { updateGlobalSunUniforms } from "../globalSunUniforms";
 
+const log = createLogger("SceneLighting");
+
 /**
  * Renders scene-global lights (directional sun + ambient) derived from the
  * Sun entity in the game entity store. Rendered outside EntityScene so that
@@ -14,6 +17,25 @@ import { updateGlobalSunUniforms } from "../globalSunUniforms";
 export function SceneLighting() {
   const sunData = useSceneSun();
 
+  useEffect(() => {
+    if (sunData) {
+      log.debug(
+        "sunData: dir=(%s, %s, %s) color=(%s, %s, %s) ambient=(%s, %s, %s)",
+        sunData.direction.x.toFixed(3),
+        sunData.direction.y.toFixed(3),
+        sunData.direction.z.toFixed(3),
+        sunData.color.r.toFixed(3),
+        sunData.color.g.toFixed(3),
+        sunData.color.b.toFixed(3),
+        sunData.ambient.r.toFixed(3),
+        sunData.ambient.g.toFixed(3),
+        sunData.ambient.b.toFixed(3),
+      );
+    } else {
+      log.debug("No sunData — using fallback ambient #888");
+    }
+  }, [sunData]);
+
   if (!sunData) {
     // Fallback lighting when no Sun entity exists yet
     return <ambientLight color="#888888" intensity={1.0} />;
@@ -22,7 +44,11 @@ export function SceneLighting() {
   return <SunLighting sunData={sunData} />;
 }
 
-function SunLighting({ sunData }: { sunData: NonNullable<ReturnType<typeof useSceneSun>> }) {
+function SunLighting({
+  sunData,
+}: {
+  sunData: NonNullable<ReturnType<typeof useSceneSun>>;
+}) {
   const direction = useMemo(() => {
     const [x, y, z] = torqueToThree(sunData.direction);
     const len = Math.sqrt(x * x + y * y + z * z);

src/components/ServerBrowser.module.css

@@ -1,36 +1,14 @@
 .Dialog {
-  position: relative;
+  composes: Dialog from "./GameDialog.module.css";
   width: 860px;
   height: 560px;
-  max-width: calc(100dvw - 40px);
-  max-height: calc(100dvh - 40px);
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: auto 1fr auto;
-  background: rgba(20, 37, 38, 0.8);
-  border: 1px solid rgba(65, 131, 139, 0.6);
-  border-radius: 4px;
-  box-shadow:
-    0 0 50px rgba(0, 0, 0, 0.4),
-    inset 0 0 60px rgba(1, 7, 13, 0.6);
-  color: #b0d5c9;
-  font-size: 14px;
-  line-height: 1.5;
-  overflow: hidden;
-  outline: none;
-  user-select: text;
-  -webkit-touch-callout: default;
 }
 
 .Overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.7);
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
+  composes: Overlay from "./GameDialog.module.css";
 }
 
 .Header {
@@ -50,8 +28,18 @@
   flex: 1;
 }
 
+.HiddenRadio {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  z-index: -1;
+  overflow: hidden;
+  pointer-events: none;
+}
+
 .RefreshButton {
-  composes: DialogButton from "./DialogButton.module.css";
+  composes: DialogButton from "./GameDialog.module.css";
   padding: 3px 14px;
   font-size: 12px;
 }
@@ -74,6 +62,7 @@
 
 .Table th {
   position: sticky;
+  z-index: 1;
   top: 0;
   background: rgba(10, 25, 26, 0.95);
   padding: 6px 12px;
@@ -100,6 +89,8 @@
 }
 
 .Table td {
+  position: relative;
+  z-index: 0;
   padding: 3px 12px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.04);
   white-space: nowrap;
@@ -109,15 +100,19 @@
   font-weight: 500;
 }
 
-.Table tbody tr {
+.Table td.EmptyServer {
+  opacity: 0.4;
+}
+
+.Table tbody tr:not(.Empty) {
   cursor: pointer;
 }
 
-.Table tbody tr:hover {
+.Table tbody tr:not(.Empty):hover {
   background: rgba(65, 131, 139, 0.12);
 }
 
-.Selected {
+.Table tbody tr:has(input:checked) {
   background: rgba(93, 255, 225, 0.9) !important;
   color: #1e2828;
 }
@@ -128,7 +123,7 @@
   font-size: 11px;
 }
 
-.Empty {
+.Empty td {
   text-align: center;
   color: rgba(201, 220, 216, 0.3);
   padding: 32px 12px !important;
@@ -146,12 +141,12 @@
 }
 
 .JoinButton {
-  composes: DialogButton from "./DialogButton.module.css";
+  composes: DialogButton from "./GameDialog.module.css";
   min-width: 100px;
 }
 
 .CloseButton {
-  composes: Secondary from "./DialogButton.module.css";
+  composes: Secondary from "./GameDialog.module.css";
 }
 
 .WarriorField {

src/components/ServerBrowser.tsx

@@ -1,57 +1,47 @@
 import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import type { ServerInfo } from "../../relay/types";
 import styles from "./ServerBrowser.module.css";
-export function ServerBrowser({
-  open,
-  onClose,
-  servers,
-  loading,
-  onRefresh,
-  onJoin,
-  wsPing,
-  warriorName,
-  onWarriorNameChange,
-}: {
-  open: boolean;
-  onClose: () => void;
-  servers: ServerInfo[];
-  loading: boolean;
-  onRefresh: () => void;
-  onJoin: (address: string) => void;
-  /** Browser↔relay RTT to add to server pings for effective latency. */
-  wsPing?: number | null;
-  warriorName: string;
-  onWarriorNameChange: (name: string) => void;
-}) {
+import { useLiveSelector } from "../state/liveConnectionStore";
+import { useSettings } from "./SettingsProvider";
+
+export function ServerBrowser({ onClose }: { onClose: () => void }) {
+  const servers = useLiveSelector((s) => s.servers);
+  const serversLoading = useLiveSelector((s) => s.serversLoading);
+  const browserToRelayPing = useLiveSelector((s) => s.browserToRelayPing);
+  const listServers = useLiveSelector((s) => s.listServers);
+  const joinServer = useLiveSelector((s) => s.joinServer);
+  const { warriorName, setWarriorName } = useSettings();
   const [selectedAddress, setSelectedAddress] = useState<string | null>(null);
+  const handleJoinSelected = () => {
+    if (selectedAddress) {
+      joinServer(selectedAddress, warriorName);
+      onClose();
+    }
+  };
+
+  const handleJoin = (address: string) => {
+    joinServer(address, warriorName);
+    onClose();
+  };
   const [sortKey, setSortKey] = useState<keyof ServerInfo>("ping");
   const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
   const dialogRef = useRef<HTMLDivElement>(null);
-  const onRefreshRef = useRef(onRefresh);
-  onRefreshRef.current = onRefresh;
-  const didAutoRefreshRef = useRef(false);
+
   useEffect(() => {
-    if (open) {
-      dialogRef.current?.focus();
-      try {
-        document.exitPointerLock();
-      } catch {
-        /* expected */
-      }
-    } else {
-      didAutoRefreshRef.current = false;
+    dialogRef.current?.focus();
+    try {
+      document.exitPointerLock();
+    } catch {
+      /* expected */
     }
-  }, [open]);
-  // Refresh on open if no servers cached
+  }, []);
+
   useEffect(() => {
-    if (open && servers.length === 0 && !didAutoRefreshRef.current) {
-      didAutoRefreshRef.current = true;
-      onRefreshRef.current();
-    }
-  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+    listServers();
+  }, [listServers]);
+
   // Block keyboard events from reaching Three.js while open
   useEffect(() => {
-    if (!open) return;
     const handleKeyDown = (e: KeyboardEvent) => {
       e.stopPropagation();
       if (e.key === "Escape") {
@@ -60,7 +50,8 @@ export function ServerBrowser({
     };
     window.addEventListener("keydown", handleKeyDown, true);
     return () => window.removeEventListener("keydown", handleKeyDown, true);
-  }, [open, onClose]);
+  }, [onClose]);
+
   const handleSort = useCallback(
     (key: keyof ServerInfo) => {
       if (sortKey === key) {
@@ -85,15 +76,6 @@ export function ServerBrowser({
     });
   }, [servers, sortDir, sortKey]);
 
-  const handleJoin = useCallback(() => {
-    if (selectedAddress) {
-      onJoin(selectedAddress);
-      onClose();
-    }
-  }, [selectedAddress, onJoin, onClose]);
-
-  if (!open) return null;
-
   return (
     <div className={styles.Overlay} onClick={onClose}>
       <div
@@ -109,75 +91,93 @@ export function ServerBrowser({
           </span>
           <button
             className={styles.RefreshButton}
-            onClick={onRefresh}
-            disabled={loading}
+            onClick={listServers}
+            disabled={serversLoading}
           >
-            {loading ? "Refreshing..." : "Refresh"}
+            Refresh
           </button>
         </div>
         <div className={styles.TableWrapper}>
-          <table className={styles.Table}>
-            <thead>
-              <tr>
-                <th onClick={() => handleSort("name")}>Server Name</th>
-                <th onClick={() => handleSort("playerCount")}>Players</th>
-                <th onClick={() => handleSort("ping")}>Ping</th>
-                <th onClick={() => handleSort("mapName")}>Map</th>
-                <th onClick={() => handleSort("gameType")}>Type</th>
-                <th onClick={() => handleSort("mod")}>Mod</th>
-              </tr>
-            </thead>
-            <tbody>
-              {sorted.map((server) => (
-                <tr
-                  key={server.address}
-                  className={
-                    selectedAddress === server.address
-                      ? styles.Selected
-                      : undefined
-                  }
-                  onClick={() => setSelectedAddress(server.address)}
-                  onDoubleClick={() => {
-                    setSelectedAddress(server.address);
-                    onJoin(server.address);
-                    onClose();
-                  }}
-                >
-                  <td>
-                    {server.passwordRequired && (
-                      <span className={styles.PasswordIcon}>&#x1F512;</span>
-                    )}
-                    {server.name}
-                  </td>
-                  <td>
-                    {server.playerCount}/{server.maxPlayers}
-                  </td>
-                  <td>
-                    {wsPing != null
-                      ? (server.ping + wsPing).toLocaleString()
-                      : "\u2014"}
-                  </td>
-                  <td>{server.mapName}</td>
-                  <td>{server.gameType}</td>
-                  <td>{server.mod}</td>
-                </tr>
-              ))}
-              {sorted.length === 0 && !loading && (
+          <form name="serverList" onSubmit={handleJoinSelected}>
+            <table className={styles.Table}>
+              <thead>
                 <tr>
-                  <td colSpan={6} className={styles.Empty}>
-                    No servers found
-                  </td>
+                  <th onClick={() => handleSort("name")}>Server Name</th>
+                  <th onClick={() => handleSort("playerCount")}>Players</th>
+                  <th onClick={() => handleSort("ping")}>Ping</th>
+                  <th onClick={() => handleSort("mapName")}>Map</th>
+                  <th onClick={() => handleSort("gameType")}>Type</th>
+                  <th onClick={() => handleSort("mod")}>Mod</th>
                 </tr>
-              )}
-              {loading && sorted.length === 0 && (
-                <tr>
-                  <td colSpan={6} className={styles.Empty}>
-                    Querying master server...
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
+              </thead>
+              <tbody>
+                {sorted.map((server) => (
+                  <tr
+                    key={server.address}
+                    onClick={() => {
+                      setSelectedAddress(server.address);
+                      const form = document.forms["serverList"];
+                      const inputs: RadioNodeList =
+                        form.elements["serverAddress"];
+                      const input = Array.from(inputs).find(
+                        (input) => input.value === server.address,
+                      );
+                      input.focus();
+                    }}
+                    onDoubleClick={() => {
+                      setSelectedAddress(server.address);
+                      handleJoin(server.address);
+                      onClose();
+                    }}
+                  >
+                    <td>
+                      <input
+                        type="radio"
+                        className={styles.HiddenRadio}
+                        name="serverAddress"
+                        value={server.address}
+                        checked={selectedAddress === server.address}
+                        onChange={(event) => {
+                          setSelectedAddress(event.target.value);
+                        }}
+                      />
+                      {server.passwordRequired && (
+                        <span className={styles.PasswordIcon}>&#x1F512;</span>
+                      )}
+                      {server.name}
+                    </td>
+                    <td
+                      className={
+                        server.playerCount === 0
+                          ? styles.EmptyServer
+                          : undefined
+                      }
+                    >
+                      {server.playerCount}&thinsp;/&thinsp;{server.maxPlayers}
+                    </td>
+                    <td>
+                      {browserToRelayPing != null
+                        ? (server.ping + browserToRelayPing).toLocaleString()
+                        : "\u2014"}
+                    </td>
+                    <td>{server.mapName}</td>
+                    <td>{server.gameType}</td>
+                    <td>{server.mod}</td>
+                  </tr>
+                ))}
+                {sorted.length === 0 && !serversLoading && (
+                  <tr className={styles.Empty}>
+                    <td colSpan={6}>No servers found</td>
+                  </tr>
+                )}
+                {serversLoading && sorted.length === 0 && (
+                  <tr className={styles.Empty}>
+                    <td colSpan={6}>Querying master server…</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </form>
         </div>
         <div className={styles.Footer}>
           <div className={styles.WarriorField}>
@@ -189,7 +189,7 @@ export function ServerBrowser({
               className={styles.WarriorInput}
               type="text"
               value={warriorName}
-              onChange={(e) => onWarriorNameChange(e.target.value)}
+              onChange={(e) => setWarriorName(e.target.value)}
               placeholder="Name thyself…"
               maxLength={24}
             />
@@ -199,7 +199,7 @@ export function ServerBrowser({
             Cancel
           </button>
           <button
-            onClick={handleJoin}
+            onClick={handleJoinSelected}
             disabled={!selectedAddress}
             className={styles.JoinButton}
           >

src/components/SettingsProvider.tsx

@@ -27,11 +27,15 @@ type SettingsContext = {
   setAnimationEnabled: StateSetter<boolean>;
   warriorName: string;
   setWarriorName: StateSetter<string>;
+  audioVolume: number;
+  setAudioVolume: StateSetter<number>;
 };
 
 type DebugContext = {
   debugMode: boolean;
   setDebugMode: StateSetter<boolean>;
+  renderOnDemand: boolean;
+  setRenderOnDemand: StateSetter<boolean>;
 };
 
 type ControlsContext = {
@@ -39,6 +43,12 @@ type ControlsContext = {
   setSpeedMultiplier: StateSetter<number>;
   touchMode: TouchMode;
   setTouchMode: StateSetter<TouchMode>;
+  invertScroll: boolean;
+  setInvertScroll: StateSetter<boolean>;
+  invertDrag: boolean;
+  setInvertDrag: StateSetter<boolean>;
+  invertJoystick: boolean;
+  setInvertJoystick: StateSetter<boolean>;
 };
 
 const SettingsContext = createContext<SettingsContext | null>(null);
@@ -55,6 +65,10 @@ type PersistedSettings = {
   debugMode?: boolean;
   touchMode?: TouchMode;
   warriorName?: string;
+  audioVolume?: number;
+  invertScroll?: boolean;
+  invertDrag?: boolean;
+  invertJoystick?: boolean;
 };
 
 export function useSettings() {
@@ -83,10 +97,15 @@ export function SettingsProvider({
   const [speedMultiplier, setSpeedMultiplier] = useState(1);
   const [fov, setFov] = useState(90);
   const [audioEnabled, setAudioEnabled] = useState(false);
+  const [audioVolume, setAudioVolume] = useState(0.75);
   const [animationEnabled, setAnimationEnabled] = useState(true);
   const [debugMode, setDebugMode] = useState(false);
   const [touchMode, setTouchMode] = useState<TouchMode>("moveLookStick");
   const [warriorName, setWarriorName] = useState("MapGenius");
+  const [invertScroll, setInvertScroll] = useState(false);
+  const [invertDrag, setInvertDrag] = useState(false);
+  const [invertJoystick, setInvertJoystick] = useState(false);
+  const [renderOnDemand, setRenderOnDemand] = useState(false);
 
   const setFogEnabledWithoutOverride: StateSetter<boolean> = useCallback(
     (value) => {
@@ -110,6 +129,8 @@ export function SettingsProvider({
       setAnimationEnabled,
       warriorName,
       setWarriorName,
+      audioVolume,
+      setAudioVolume,
     }),
     [
       fogEnabled,
@@ -120,21 +141,46 @@ export function SettingsProvider({
       audioEnabled,
       animationEnabled,
       warriorName,
+      audioVolume,
     ],
   );
 
   const debugContext: DebugContext = useMemo(
-    () => ({ debugMode, setDebugMode }),
-    [debugMode, setDebugMode],
+    () => ({
+      debugMode,
+      setDebugMode,
+      renderOnDemand,
+      setRenderOnDemand,
+    }),
+    [debugMode, setDebugMode, renderOnDemand],
   );
 
   const controlsContext: ControlsContext = useMemo(
-    () => ({ speedMultiplier, setSpeedMultiplier, touchMode, setTouchMode }),
-    [speedMultiplier, setSpeedMultiplier, touchMode, setTouchMode],
+    () => ({
+      speedMultiplier,
+      setSpeedMultiplier,
+      touchMode,
+      setTouchMode,
+      invertScroll,
+      setInvertScroll,
+      invertDrag,
+      setInvertDrag,
+      invertJoystick,
+      setInvertJoystick,
+    }),
+    [
+      speedMultiplier,
+      setSpeedMultiplier,
+      touchMode,
+      setTouchMode,
+      invertScroll,
+      invertDrag,
+      invertJoystick,
+    ],
   );
 
   // Read persisted settings from localStorage.
-  useLayoutEffect(() => {
+  useEffect(() => {
     let savedSettings: PersistedSettings = {};
     try {
       savedSettings = JSON.parse(localStorage.getItem("settings")) || {};
@@ -157,7 +203,9 @@ export function SettingsProvider({
       setHighQualityFog(savedSettings.highQualityFog);
     }
     if (savedSettings.speedMultiplier != null) {
-      setSpeedMultiplier(savedSettings.speedMultiplier);
+      setSpeedMultiplier(
+        Math.max(0, Math.min(1, savedSettings.speedMultiplier)),
+      );
     }
     if (savedSettings.fov != null) {
       setFov(savedSettings.fov);
@@ -168,6 +216,18 @@ export function SettingsProvider({
     if (savedSettings.warriorName != null) {
       setWarriorName(savedSettings.warriorName);
     }
+    if (savedSettings.audioVolume != null) {
+      setAudioVolume(savedSettings.audioVolume);
+    }
+    if (savedSettings.invertScroll != null) {
+      setInvertScroll(savedSettings.invertScroll);
+    }
+    if (savedSettings.invertDrag != null) {
+      setInvertDrag(savedSettings.invertDrag);
+    }
+    if (savedSettings.invertJoystick != null) {
+      setInvertJoystick(savedSettings.invertJoystick);
+    }
   }, []);
 
   // Persist settings to localStorage with debouncing to avoid excessive writes
@@ -191,6 +251,10 @@ export function SettingsProvider({
         debugMode,
         touchMode,
         warriorName,
+        audioVolume,
+        invertScroll,
+        invertDrag,
+        invertJoystick,
       };
       try {
         localStorage.setItem("settings", JSON.stringify(settingsToSave));
@@ -214,6 +278,10 @@ export function SettingsProvider({
     debugMode,
     touchMode,
     warriorName,
+    audioVolume,
+    invertScroll,
+    invertDrag,
+    invertJoystick,
   ]);
 
   return (

src/components/ShapeErrorBoundary.tsx

@@ -0,0 +1,28 @@
+import { Component } from "react";
+import type { ErrorInfo, ReactNode } from "react";
+import { createLogger } from "../logger";
+
+const log = createLogger("ShapeErrorBoundary");
+
+/** Error boundary that renders a fallback when shape loading fails. */
+export class ShapeErrorBoundary extends Component<
+  { children: ReactNode; fallback: ReactNode },
+  { hasError: boolean }
+> {
+  state = { hasError: false };
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    log.error("Shape load failed: %s %s", error.message, info.componentStack);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+    return this.props.children;
+  }
+}

src/components/ShapeModel.tsx

@@ -1,13 +1,8 @@
 import { useEffect, useMemo, useRef } from "react";
 import { useFrame } from "@react-three/fiber";
-import {
-  AnimationMixer,
-  LoopOnce,
-  Quaternion,
-  Vector3,
-} from "three";
+import { AnimationMixer, LoopOnce, Quaternion, Vector3 } from "three";
 import type { Group, Material } from "three";
-import { effectNow, engineStore } from "../state";
+import { effectNow, engineStore } from "../state/engineStore";
 import * as SkeletonUtils from "three/examples/jsm/utils/SkeletonUtils.js";
 import {
   _r90,
@@ -21,14 +16,11 @@ import {
   updateAtlasFrame,
 } from "./useIflTexture";
 import type { IflAtlas } from "./useIflTexture";
-import {
-  ShapeRenderer,
-  useStaticShape,
-} from "./GenericShape";
+import { ShapeRenderer, useStaticShape } from "./GenericShape";
 import { ShapeInfoProvider } from "./ShapeInfoProvider";
 import type { TorqueObject } from "../torqueScript";
-import type { StreamEntity } from "../stream/types";
-import type { StreamingPlayback } from "../stream/types";
+import type { ExplosionEntity } from "../state/gameEntityTypes";
+import { streamPlaybackStore } from "../state/streamPlaybackStore";
 
 /**
  * Map weapon shape to the arm blend animation (armThread).
@@ -167,7 +159,13 @@ function extractSizeKeyframes(expBlock: Record<string, unknown>): {
   const rawTimes = expBlock.times as number[] | undefined;
 
   if (!Array.isArray(rawSizes) || rawSizes.length === 0) {
-    return { times: [0, 1], sizes: [[1, 1, 1], [1, 1, 1]] };
+    return {
+      times: [0, 1],
+      sizes: [
+        [1, 1, 1],
+        [1, 1, 1],
+      ],
+    };
   }
 
   // sizes are packed as value*100 integers on the wire; divide by 100.
@@ -210,14 +208,9 @@ function interpolateSize(
  * Renders an explosion DTS shape using useStaticShape (shared GLTF cache)
  * with custom rendering for faceViewer, vis/IFL animation, and size keyframes.
  */
-export function ExplosionShape({
-  entity,
-  playback,
-}: {
-  entity: StreamEntity;
-  playback: StreamingPlayback;
-}) {
-  const gltf = useStaticShape(entity.dataBlock!);
+export function ExplosionShape({ entity }: { entity: ExplosionEntity }) {
+  const playback = streamPlaybackStore.getState().playback;
+  const gltf = useStaticShape(entity.shapeName!);
   const groupRef = useRef<Group>(null);
   const startTimeRef = useRef(effectNow());
   // eslint-disable-next-line react-hooks/purity
@@ -256,7 +249,9 @@ export function ExplosionShape({
     const iflInfos: IflInfo[] = [];
     scene.traverse((node: any) => {
       if (!node.isMesh || !node.material) return;
-      const mat = Array.isArray(node.material) ? node.material[0] : node.material;
+      const mat = Array.isArray(node.material)
+        ? node.material[0]
+        : node.material;
       if (!mat?.userData) return;
       const flags = new Set<string>(mat.userData.flag_names ?? []);
       const rp: string | undefined = mat.userData.resource_path;
@@ -270,12 +265,13 @@ export function ExplosionShape({
             : undefined,
           duration: ud?.ifl_duration ? Number(ud.ifl_duration) : undefined,
           cyclic: ud?.ifl_sequence ? !!ud.ifl_cyclic : undefined,
-          toolBegin: ud?.ifl_tool_begin != null ? Number(ud.ifl_tool_begin) : undefined,
+          toolBegin:
+            ud?.ifl_tool_begin != null ? Number(ud.ifl_tool_begin) : undefined,
         });
       }
     });
 
-    processShapeScene(scene, entity.dataBlock);
+    processShapeScene(scene, entity.shapeName);
 
     // Collect vis-animated nodes keyed by sequence name.
     const visNodes: VisNode[] = [];
@@ -290,7 +286,12 @@ export function ExplosionShape({
         return;
       // Only include vis nodes tied to the "ambient" sequence.
       if (seqName === "ambient") {
-        visNodes.push({ mesh: node, keyframes: kf, duration: dur, cyclic: !!ud.vis_cyclic });
+        visNodes.push({
+          mesh: node,
+          keyframes: kf,
+          duration: dur,
+          cyclic: !!ud.vis_cyclic,
+        });
       }
     });
 
@@ -340,7 +341,9 @@ export function ExplosionShape({
     });
 
     // Disable frustum culling (explosion may scale beyond bounds).
-    scene.traverse((child) => { child.frustumCulled = false; });
+    scene.traverse((child) => {
+      child.frustumCulled = false;
+    });
 
     return { scene, mixer, visNodes, iflInfos, materials };
   }, [gltf, expBlock]);
@@ -369,8 +372,8 @@ export function ExplosionShape({
     if (!group) return;
 
     const playbackState = engineStore.getState().playback;
-    const effectDelta = playbackState.status === "playing"
-      ? delta * playbackState.rate : 0;
+    const effectDelta =
+      playbackState.status === "playing" ? delta * playbackState.rate : 0;
 
     const elapsed = effectNow() - startTimeRef.current;
     const t = Math.min(elapsed / lifetimeMS, 1);

src/components/ShapeSelect.tsx

@@ -1,10 +1,4 @@
-import {
-  startTransition,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { startTransition, useEffect, useMemo, useRef, useState } from "react";
 import {
   Combobox,
   ComboboxItem,
@@ -166,7 +160,9 @@ export function ShapeSelect({
           onFocus={() => {
             try {
               document.exitPointerLock();
-            } catch  { /* expected */ }
+            } catch {
+              /* expected */
+            }
             combobox.show();
           }}
           onKeyDown={(e) => {
@@ -197,9 +193,7 @@ export function ShapeSelect({
                   {shapes.map(renderItem)}
                 </ComboboxGroup>
               ))}
-          {noResults && (
-            <div className={styles.NoResults}>No shapes found</div>
-          )}
+          {noResults && <div className={styles.NoResults}>No shapes found</div>}
         </ComboboxList>
       </ComboboxPopover>
     </ComboboxProvider>

src/components/Sky.tsx

@@ -1,9 +1,9 @@
-import { Suspense, useMemo, useEffect, useRef } from "react";
+import { memo, Suspense, useMemo, useEffect, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useThree, useFrame } from "@react-three/fiber";
 import { useCubeTexture } from "@react-three/drei";
 import { Color, Fog } from "three";
-import type { SceneSky } from "../scene/types";
+import { createLogger } from "../logger";
 import { useSettings } from "./SettingsProvider";
 import { loadDetailMapList, textureToUrl } from "../loaders";
 import { CloudLayers } from "./CloudLayers";
@@ -16,10 +16,13 @@ import {
   resetGlobalFogUniforms,
 } from "../globalFogUniforms";
 
+const log = createLogger("Sky");
+
 // Track if fog shader has been installed (idempotent installation)
 let fogShaderInstalled = false;
 
 import type { Color3 } from "../scene/types";
+import { SkyEntity } from "../state/gameEntityTypes";
 
 /** Convert a Color3 to [sRGB Color, linear Color]. */
 function color3ToThree(c: Color3): [Color, Color] {
@@ -33,10 +36,25 @@ function color3ToThree(c: Color3): [Color, Color] {
  * Load a .dml file, used to list the textures for different faces of a skybox.
  */
 function useDetailMapList(name: string) {
-  return useQuery({
+  const result = useQuery({
     queryKey: ["detailMapList", name],
-    queryFn: () => loadDetailMapList(name),
+    queryFn: () => {
+      log.debug("Loading detail map list: %s", name);
+      return loadDetailMapList(name);
+    },
   });
+
+  useEffect(() => {
+    log.debug(
+      "DML query status: %s%s%s file=%s",
+      result.status,
+      result.error ? ` error=${result.error.message}` : "",
+      result.data ? ` (${result.data.length} entries)` : " (no data)",
+      name,
+    );
+  }, [result.status, result.error, result.data, name]);
+
+  return result;
 }
 
 /**
@@ -56,7 +74,7 @@ function SkyBoxTexture({
   fogColor?: Color;
   fogState?: FogState;
 }) {
-  const { camera } = useThree();
+  const camera = useThree((state) => state.camera);
   const skyBox = useCubeTexture(skyBoxFiles, { path: "" });
 
   const enableFog = !!fogColor;
@@ -320,7 +338,7 @@ function SolidColorSky({
   fogColor?: Color;
   fogState?: FogState;
 }) {
-  const { camera } = useThree();
+  const camera = useThree((state) => state.camera);
 
   const enableFog = !!fogColor;
 
@@ -515,7 +533,8 @@ function DynamicFog({
   fogState: FogState;
   enabled: boolean;
 }) {
-  const { scene, camera } = useThree();
+  const scene = useThree((state) => state.scene);
+  const camera = useThree((state) => state.camera);
   const fogRef = useRef<Fog | null>(null);
 
   // Pack fog volume data once (it doesn't change during runtime)
@@ -594,29 +613,43 @@ function DynamicFog({
   return null;
 }
 
-export function Sky({ scene }: { scene: SceneSky }) {
+export const Sky = memo(function Sky({ entity }: { entity: SkyEntity }) {
+  const { skyData } = entity;
+  log.debug(
+    "Rendering: materialList=%s, useSkyTextures=%s",
+    skyData.materialList,
+    skyData.useSkyTextures,
+  );
   const { fogEnabled } = useSettings();
 
   // Skybox textures
-  const materialList = scene.materialList || undefined;
+  const materialList = skyData.materialList || undefined;
 
   const skySolidColor = useMemo(
-    () => color3ToThree(scene.skySolidColor),
-    [scene.skySolidColor],
+    () => color3ToThree(skyData.skySolidColor),
+    [skyData.skySolidColor],
   );
 
-  const useSkyTextures = scene.useSkyTextures;
+  const useSkyTextures = skyData.useSkyTextures;
 
   // Parse full fog state from typed scene sky
-  const fogState = useMemo(
-    () => fogStateFromScene(scene),
-    [scene],
+  const fogState = useMemo(() => fogStateFromScene(skyData), [skyData]);
+
+  log.debug(
+    "fogState: fogColor=(%s, %s, %s) visibleDistance=%d fogDistance=%d enabled=%s volumes=%d",
+    skyData.fogColor.r.toFixed(3),
+    skyData.fogColor.g.toFixed(3),
+    skyData.fogColor.b.toFixed(3),
+    skyData.visibleDistance,
+    skyData.fogDistance,
+    fogState.enabled,
+    fogState.fogVolumes.length,
   );
 
   // Get sRGB fog color for background
   const fogColor = useMemo(
-    () => color3ToThree(scene.fogColor),
-    [scene.fogColor],
+    () => color3ToThree(skyData.fogColor),
+    [skyData.fogColor],
   );
 
   const skyColor = skySolidColor || fogColor;
@@ -629,7 +662,8 @@ export function Sky({ scene }: { scene: SceneSky }) {
 
   // Set scene background color directly using useThree
   // This ensures the gap between fogged terrain and skybox blends correctly
-  const { scene: threeScene, gl } = useThree();
+  const threeScene = useThree((state) => state.scene);
+  const gl = useThree((state) => state.gl);
   useEffect(() => {
     if (hasFogParams) {
       // Use effective fog color for background (matches terrain fog)
@@ -655,7 +689,7 @@ export function Sky({ scene }: { scene: SceneSky }) {
   return (
     <>
       {materialList && useSkyTextures && materialList.length > 0 ? (
-        <Suspense fallback={null}>
+        <Suspense>
           {/* Key forces remount when mission changes to clear texture caches */}
           <SkyBox
             key={materialList}
@@ -674,7 +708,7 @@ export function Sky({ scene }: { scene: SceneSky }) {
       ) : null}
       {/* Cloud layers render independently of skybox textures */}
       <Suspense>
-        <CloudLayers scene={scene} />
+        <CloudLayers scene={skyData} />
       </Suspense>
       {/* Always render DynamicFog when mission has fog params.
           Pass fogEnabled to control visibility - this avoids shader recompilation
@@ -684,4 +718,4 @@ export function Sky({ scene }: { scene: SceneSky }) {
       ) : null}
     </>
   );
-}
+});

src/components/StreamPlayback.tsx

@@ -1,9 +0,0 @@
-import { useRecording } from "./RecordingProvider";
-import { StreamingController } from "./StreamingController";
-
-export function StreamPlayback() {
-  const recording = useRecording();
-
-  if (!recording) return null;
-  return <StreamingController recording={recording} />;
-}

src/components/StreamingController.tsx

@@ -1,10 +1,7 @@
 import { Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { useFrame } from "@react-three/fiber";
 import { useGLTF } from "@react-three/drei";
-import {
-  Quaternion,
-  Vector3,
-} from "three";
+import { Quaternion, Vector3 } from "three";
 import {
   DEFAULT_EYE_HEIGHT,
   STREAM_TICK_SEC,
@@ -14,7 +11,7 @@ import { shapeToUrl } from "../loaders";
 import { ParticleEffects } from "./ParticleEffects";
 import { PlayerEyeOffset } from "./PlayerModel";
 import { stopAllTrackedSounds } from "./AudioEmitter";
-import { useEngineStoreApi, advanceEffectClock } from "../state";
+import { useEngineStoreApi, advanceEffectClock } from "../state/engineStore";
 import { gameEntityStore } from "../state/gameEntityStore";
 import {
   streamPlaybackStore,
@@ -33,7 +30,9 @@ type EntityById = Map<string, StreamEntity>;
 
 /** Safely access a field that exists only on some GameEntity variants. */
 function getField(entity: GameEntity, field: string): string | undefined {
-  return (entity as unknown as Record<string, unknown>)[field] as string | undefined;
+  return (entity as unknown as Record<string, unknown>)[field] as
+    | string
+    | undefined;
 }
 
 /** Mutate render-affecting fields on an entity in-place from stream data.
@@ -49,6 +48,7 @@ function mutateRenderFields(
       e.threads = stream.threads;
       e.weaponShape = stream.weaponShape;
       e.packShape = stream.packShape;
+      e.flagShape = stream.flagShape;
       e.falling = stream.falling;
       e.jetting = stream.jetting;
       e.weaponImageState = stream.weaponImageState;
@@ -98,8 +98,11 @@ const _billboardFlip = new Quaternion(0, 1, 0, 0); // 180° around Y
 const _orbitDir = new Vector3();
 const _orbitTarget = new Vector3();
 const _orbitCandidate = new Vector3();
-
-export function StreamingController({ recording }: { recording: StreamRecording }) {
+export function StreamingController({
+  recording,
+}: {
+  recording: StreamRecording;
+}) {
   const engineStore = useEngineStoreApi();
   const playbackClockRef = useRef(0);
   const prevTickSnapshotRef = useRef<StreamSnapshot | null>(null);
@@ -117,30 +120,42 @@ export function StreamingController({ recording }: { recording: StreamRecording
 
     const prevMap = entityMapRef.current;
     const nextMap = new Map<string, GameEntity>();
-    let shouldRebuild = false;
 
     for (const entity of snapshot.entities) {
       let renderEntity = prevMap.get(entity.id);
 
       // Identity change -> new component (unmount/remount).
       // Compare fields that, when changed, require a full entity rebuild.
+      // Only compare shapeName for entity types that actually use it.
+      // Scene entities (Terrain, Interior, Sky, etc.), ForceFieldBare,
+      // AudioEmitter, WayPoint, and Camera don't have shapeName on their
+      // GameEntity, so comparing against entity.dataBlock would always
+      // mismatch and trigger a needless rebuild every frame.
+      const hasShapeName =
+        renderEntity &&
+        (renderEntity.renderType === "Shape" ||
+          renderEntity.renderType === "Player" ||
+          renderEntity.renderType === "Explosion");
+
       const needsNewIdentity =
         !renderEntity ||
         renderEntity.className !== (entity.className ?? entity.type) ||
         renderEntity.ghostIndex !== entity.ghostIndex ||
         renderEntity.dataBlockId !== entity.dataBlockId ||
         renderEntity.shapeHint !== entity.shapeHint ||
-        getField(renderEntity, "shapeName") !== entity.dataBlock ||
+        (hasShapeName &&
+          entity.dataBlock != null &&
+          getField(renderEntity, "shapeName") !== entity.dataBlock) ||
         // weaponShape changes only force rebuild for non-Player shapes
         // (turrets, vehicles). Players handle weapon changes internally
         // via PlayerModel's Mount0 bone, and rebuilding on weapon change
         // would lose animation state (death animations, etc.).
         (renderEntity.renderType !== "Player" &&
+          hasShapeName &&
           getField(renderEntity, "weaponShape") !== entity.weaponShape);
 
       if (needsNewIdentity) {
         renderEntity = streamEntityToGameEntity(entity, snapshot.timeSec);
-        shouldRebuild = true;
       } else {
         // Mutate render fields in-place on the existing entity object.
         // Components read these imperatively in useFrame — no React
@@ -153,7 +168,8 @@ export function StreamingController({ recording }: { recording: StreamRecording
       // Keyframe update (mutable -- used for fallback position for
       // retained explosion entities and per-frame reads in useFrame).
       // Scene entities and None don't have keyframes.
-      if (isSceneEntity(renderEntity) || renderEntity.renderType === "None") continue;
+      if (isSceneEntity(renderEntity) || renderEntity.renderType === "None")
+        continue;
       const keyframes = renderEntity.keyframes!;
       if (keyframes.length === 0) {
         keyframes.push({
@@ -189,12 +205,12 @@ export function StreamingController({ recording }: { recording: StreamRecording
           continue;
         }
       }
-      // Entity removed (or retention expired).
-      shouldRebuild = true;
     }
 
-    // Detect new entities added.
-    if (nextMap.size !== prevMap.size) shouldRebuild = true;
+    // Only push to store when the entity set changed (adds/removes).
+    const shouldRebuild =
+      nextMap.size !== prevMap.size ||
+      [...nextMap.keys()].some((id) => !prevMap.has(id));
 
     entityMapRef.current = nextMap;
     if (shouldRebuild) {
@@ -202,7 +218,10 @@ export function StreamingController({ recording }: { recording: StreamRecording
     }
 
     let nextFirstPersonShape: string | null = null;
-    if (snapshot.camera?.mode === "first-person" && snapshot.camera.controlEntityId) {
+    if (
+      snapshot.camera?.mode === "first-person" &&
+      snapshot.camera.controlEntityId
+    ) {
       const entity = nextMap.get(snapshot.camera.controlEntityId);
       const sn = entity ? getField(entity, "shapeName") : undefined;
       if (sn) {
@@ -231,13 +250,31 @@ export function StreamingController({ recording }: { recording: StreamRecording
 
     const stream = streamRef.current;
     streamPlaybackStore.setState({ playback: stream });
-    gameEntityStore.getState().beginStreaming();
+    gameEntityStore.getState().beginStreaming(recording.source);
 
     if (!stream) {
       engineStore.getState().setPlaybackStreamSnapshot(null);
       return;
     }
 
+    // Update gameEntityStore when mission info arrives via server messages
+    // (MsgMissionDropInfo, MsgLoadInfo, MsgClientReady).
+    stream.onMissionInfoChange = () => {
+      gameEntityStore.getState().setMissionInfo({
+        missionDisplayName: stream.missionDisplayName ?? undefined,
+        missionTypeDisplayName: stream.missionTypeDisplayName ?? undefined,
+        gameClassName: stream.gameClassName ?? undefined,
+        recorderName: stream.connectedPlayerName ?? undefined,
+      });
+    };
+
+    // Save pre-populated mission info before reset clears it.
+    const savedMissionDisplayName = stream.missionDisplayName;
+    const savedMissionTypeDisplayName = stream.missionTypeDisplayName;
+    const savedGameClassName = stream.gameClassName;
+    const savedServerDisplayName = stream.serverDisplayName;
+    const savedConnectedPlayerName = stream.connectedPlayerName;
+
     // Reset the stream cursor for demo playback (replay from the beginning).
     // For live streams, skip reset — the adapter is already receiving packets
     // and has accumulated protocol state (net strings, target info, sensor
@@ -245,6 +282,26 @@ export function StreamingController({ recording }: { recording: StreamRecording
     if (recording.source !== "live") {
       stream.reset();
     }
+
+    // Restore mission info fields that were parsed from the initial block
+    // (demoValues) — reset() clears them but they won't be re-sent.
+    stream.missionDisplayName = savedMissionDisplayName;
+    stream.missionTypeDisplayName = savedMissionTypeDisplayName;
+    stream.gameClassName = savedGameClassName;
+    stream.serverDisplayName = savedServerDisplayName;
+    stream.connectedPlayerName = savedConnectedPlayerName;
+
+    gameEntityStore.getState().setMissionInfo({
+      missionName: recording.missionName ?? undefined,
+      missionTypeDisplayName: recording.gameType ?? undefined,
+      missionDisplayName: savedMissionDisplayName ?? undefined,
+      gameClassName: savedGameClassName ?? undefined,
+      serverDisplayName:
+        savedServerDisplayName ?? recording.serverDisplayName ?? undefined,
+      recorderName:
+        savedConnectedPlayerName ?? recording.recorderName ?? undefined,
+      recordingDate: recording.recordingDate ?? undefined,
+    });
     // Preload weapon effect shapes (explosions) so they're cached before
     // the first projectile detonates -- otherwise the GLB fetch latency
     // causes the short-lived explosion entity to expire before it renders.
@@ -264,9 +321,11 @@ export function StreamingController({ recording }: { recording: StreamRecording
 
     return () => {
       stopAllTrackedSounds();
-      gameEntityStore.getState().endStreaming();
+      // Null out streamRef so useFrame stops syncing entities.
+      streamRef.current = null;
+      // Don't call endStreaming() or clear the snapshot — leave entities,
+      // HUD, and chat in place as a frozen snapshot after disconnect.
       resetStreamPlayback();
-      engineStore.getState().setPlaybackStreamSnapshot(null);
     };
   }, [recording, engineStore, syncRenderableEntities]);
 
@@ -279,9 +338,11 @@ export function StreamingController({ recording }: { recording: StreamRecording
     const isPlaying = playback.status === "playing";
     const requestedTimeSec = playback.timeMs / 1000;
     const externalSeekWhilePaused =
-      !isPlaying && Math.abs(requestedTimeSec - playbackClockRef.current) > 0.0005;
+      !isPlaying &&
+      Math.abs(requestedTimeSec - playbackClockRef.current) > 0.0005;
     const externalSeekWhilePlaying =
-      isPlaying && Math.abs(requestedTimeSec - streamPlaybackStore.getState().time) > 0.05;
+      isPlaying &&
+      Math.abs(requestedTimeSec - streamPlaybackStore.getState().time) > 0.05;
     const isSeeking = externalSeekWhilePaused || externalSeekWhilePlaying;
     if (isSeeking) {
       // Sync stream cursor to UI/programmatic seek.
@@ -334,7 +395,10 @@ export function StreamingController({ recording }: { recording: StreamRecording
 
     streamPlaybackStore.setState({ time: playbackClockRef.current });
     if (snapshot.exhausted && isPlaying) {
-      playbackClockRef.current = Math.min(playbackClockRef.current, snapshot.timeSec);
+      playbackClockRef.current = Math.min(
+        playbackClockRef.current,
+        snapshot.timeSec,
+      );
     }
 
     syncRenderableEntities(renderCurrent);
@@ -404,7 +468,8 @@ export function StreamingController({ recording }: { recording: StreamRecording
         const perspectiveCamera = state.camera as any;
         const fovValue =
           previousCamera && Number.isFinite(previousCamera.fov)
-            ? previousCamera.fov + (currentCamera.fov - previousCamera.fov) * interpT
+            ? previousCamera.fov +
+              (currentCamera.fov - previousCamera.fov) * interpT
             : currentCamera.fov;
         const verticalFov = torqueHorizontalFovToThreeVerticalFov(
           fovValue,
@@ -436,7 +501,10 @@ export function StreamingController({ recording }: { recording: StreamRecording
         // snapshot lifetime) won't be in the snapshot entity map. Fall back
         // to their last-known keyframe position from the render entity.
         if (!entity) {
-          const kfs = renderEntity && "keyframes" in renderEntity ? renderEntity.keyframes : undefined;
+          const kfs =
+            renderEntity && "keyframes" in renderEntity
+              ? renderEntity.keyframes
+              : undefined;
           if (kfs?.[0]?.position) {
             const kf = kfs[0];
             child.visible = true;
@@ -463,11 +531,17 @@ export function StreamingController({ recording }: { recording: StreamRecording
           const iz = pz + (cz - pz) * interpT;
           child.position.set(iy, iz, ix);
         } else {
-          child.position.set(entity.position[1], entity.position[2], entity.position[0]);
+          child.position.set(
+            entity.position[1],
+            entity.position[2],
+            entity.position[0],
+          );
         }
 
         if (entity.faceViewer) {
-          child.quaternion.copy(state.camera.quaternion).multiply(_billboardFlip);
+          child.quaternion
+            .copy(state.camera.quaternion)
+            .multiply(_billboardFlip);
         } else if (entity.visual?.kind === "tracer") {
           child.quaternion.identity();
         } else if (entity.rotation) {
@@ -486,7 +560,13 @@ export function StreamingController({ recording }: { recording: StreamRecording
     const mode = currentCamera?.mode;
     // In live mode, LiveObserver handles orbit positioning from predicted
     // angles so the orbit responds at frame rate. Skip here to avoid fighting.
-    if (!freeFly && !isLive && mode === "third-person" && root && currentCamera?.orbitTargetId) {
+    if (
+      !freeFly &&
+      !isLive &&
+      mode === "third-person" &&
+      root &&
+      currentCamera?.orbitTargetId
+    ) {
       const targetGroup = root.children.find(
         (child) => child.name === currentCamera.orbitTargetId,
       );
@@ -530,7 +610,9 @@ export function StreamingController({ recording }: { recording: StreamRecording
         if (hasDirection) {
           _orbitDir.normalize();
           const orbitDistance = Math.max(0.1, currentCamera.orbitDistance ?? 4);
-          _orbitCandidate.copy(_orbitTarget).addScaledVector(_orbitDir, orbitDistance);
+          _orbitCandidate
+            .copy(_orbitTarget)
+            .addScaledVector(_orbitDir, orbitDistance);
 
           state.camera.position.copy(_orbitCandidate);
           state.camera.lookAt(_orbitTarget);
@@ -538,12 +620,19 @@ export function StreamingController({ recording }: { recording: StreamRecording
       }
     }
 
-    if (!freeFly && mode === "first-person" && root && currentCamera?.controlEntityId) {
+    if (
+      !freeFly &&
+      mode === "first-person" &&
+      root &&
+      currentCamera?.controlEntityId
+    ) {
       const playerGroup = root.children.find(
         (child) => child.name === currentCamera.controlEntityId,
       );
       if (playerGroup) {
-        _tmpVec.copy(eyeOffsetRef.current).applyQuaternion(playerGroup.quaternion);
+        _tmpVec
+          .copy(eyeOffsetRef.current)
+          .applyQuaternion(playerGroup.quaternion);
         state.camera.position.add(_tmpVec);
       } else {
         state.camera.position.y += eyeOffsetRef.current.y;
@@ -567,8 +656,11 @@ export function StreamingController({ recording }: { recording: StreamRecording
         snapshotRef={currentTickSnapshotRef}
       />
       {firstPersonShape && (
-        <Suspense fallback={null}>
-          <PlayerEyeOffset shapeName={firstPersonShape} eyeOffsetRef={eyeOffsetRef} />
+        <Suspense>
+          <PlayerEyeOffset
+            shapeName={firstPersonShape}
+            eyeOffsetRef={eyeOffsetRef}
+          />
         </Suspense>
       )}
     </>

src/components/StreamingMissionInfo.module.css

@@ -0,0 +1,90 @@
+.Header {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+}
+
+.MissionInfo {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 10px auto 10px 4px;
+  border: 1px solid rgba(255, 255, 255, 0);
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0);
+  color: #fff;
+  padding: 5px 8px;
+}
+
+.MissionName {
+  composes: SelectedName from "./MissionSelect.module.css";
+}
+
+.MissionType {
+  composes: ItemType from "./MissionSelect.module.css";
+  pointer-events: none;
+}
+
+.MissionTypeDisplayName {
+  font-size: 12px;
+  opacity: 0.5;
+}
+
+.Metadata {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 12px;
+  line-height: calc(14 / 12);
+  text-align: right;
+  padding: 8px 12px;
+  margin: 0 0 0 auto;
+}
+
+.Attribution,
+.ServerInfo {
+  color: #83938b;
+}
+
+.PlayerName,
+.RecordingDate,
+.ServerName {
+  color: #eceae7;
+}
+
+.ActionButton {
+  composes: IconButton from "./InspectorControls.module.css";
+  flex: 0 0 auto;
+  margin: 0 10px 0 0;
+  font-size: 16px;
+  min-width: 28px;
+  min-height: 28px;
+  padding: 2px;
+  /* display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  padding: 6px;
+  font-size: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer; */
+}
+
+/* .ActionButton:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+} */
+
+.EjectIcon {
+  font-size: 21px;
+  margin-top: -0.5px;
+}
+
+@media (max-width: 899px) {
+  .Metadata {
+    display: none;
+  }
+}

src/components/StreamingMissionInfo.tsx

@@ -0,0 +1,118 @@
+import { useCallback } from "react";
+import {
+  useDataSource,
+  useMissionDisplayName,
+  useMissionType,
+  useMissionTypeDisplayName,
+  useRecorderName,
+  useRecordingDate,
+  useServerDisplayName,
+} from "../state/gameEntityStore";
+import { engineStore } from "../state/engineStore";
+import {
+  liveConnectionStore,
+  useLiveSelector,
+} from "../state/liveConnectionStore";
+import { useRecording } from "./RecordingProvider";
+import { LuCircleArrowOutUpLeft } from "react-icons/lu";
+import { BiSolidEject } from "react-icons/bi";
+import styles from "./StreamingMissionInfo.module.css";
+
+export function StreamingMissionInfo() {
+  const dataSource = useDataSource();
+  const missionDisplayName = useMissionDisplayName();
+  const missionType = useMissionType();
+  const missionTypeDisplayName = useMissionTypeDisplayName();
+  const serverName = useServerDisplayName();
+  const playerName = useRecorderName();
+  const dateString = useRecordingDate();
+  const [datePart, timePart] = dateString
+    ? dateString.split(" ")
+    : [null, null];
+  const isLive = dataSource === "live";
+  const recording = useRecording();
+  const isLiveConnected = useLiveSelector(
+    (s) => s.gameStatus === "connected" || s.gameStatus === "authenticating",
+  );
+
+  const handleEject = useCallback(() => {
+    engineStore.getState().setRecording(null);
+  }, []);
+
+  const handleDisconnect = useCallback(() => {
+    const liveState = liveConnectionStore.getState();
+    liveState.disconnectServer();
+    liveState.disconnectRelay();
+    engineStore.getState().setRecording(null);
+  }, []);
+
+  return (
+    <div className={styles.Header}>
+      <div className={styles.MissionInfo}>
+        {missionDisplayName && missionType ? (
+          <>
+            <span className={styles.MissionName}>{missionDisplayName}</span>
+            {missionType && (
+              <>
+                {" "}
+                <span
+                  className={styles.MissionType}
+                  data-mission-type={missionType}
+                >
+                  {missionTypeDisplayName === "LCTF" ? "LCTF" : missionType}
+                </span>
+              </>
+            )}
+          </>
+        ) : null}
+      </div>
+      <div className={styles.Metadata}>
+        {isLive ? (
+          playerName ? (
+            <div className={styles.Attribution}>
+              Connected as{" "}
+              <span className={styles.PlayerName}>{playerName}</span>
+            </div>
+          ) : null
+        ) : playerName && dateString ? (
+          <div className={styles.Attribution}>
+            Recorded by <span className={styles.PlayerName}>{playerName}</span>{" "}
+            on{" "}
+            <span className={styles.RecordingDate}>
+              {datePart.replace(/-/g, " ")}
+            </span>{" "}
+            at <span className={styles.RecordingDate}>{timePart}</span>
+          </div>
+        ) : null}
+        {serverName ? (
+          <div className={styles.ServerInfo}>
+            Server: <span className={styles.ServerName}>{serverName}</span>
+          </div>
+        ) : null}
+      </div>
+      {dataSource === "demo" ? (
+        <button
+          type="button"
+          className={styles.ActionButton}
+          title="Unload demo"
+          aria-label="Unload demo"
+          onClick={handleEject}
+          disabled={!recording}
+        >
+          <BiSolidEject className={styles.EjectIcon} />
+        </button>
+      ) : isLive ? (
+        <button
+          type="button"
+          className={styles.ActionButton}
+          title="Disconnect"
+          aria-label="Disconnect"
+          onClick={handleDisconnect}
+          disabled={!isLiveConnected}
+        >
+          <LuCircleArrowOutUpLeft />
+        </button>
+      ) : null}
+    </div>
+  );
+}

src/components/TSStatic.tsx

@@ -1,5 +1,8 @@
 import { useMemo } from "react";
+import { createLogger } from "../logger";
 import type { SceneTSStatic } from "../scene/types";
+
+const log = createLogger("TSStatic");
 import {
   torqueToThree,
   torqueScaleToThree,
@@ -18,10 +21,7 @@ export function TSStatic({ scene }: { scene: SceneTSStatic }) {
   );
   const scale = useMemo(() => torqueScaleToThree(scene.scale), [scene.scale]);
   if (!scene.shapeName) {
-    console.error(
-      "<TSStatic> missing shapeName for ghostIndex",
-      scene.ghostIndex,
-    );
+    log.error("TSStatic missing shapeName for ghostIndex %d", scene.ghostIndex);
   }
   return (
     <ShapeInfoProvider type="TSStatic" shapeName={scene.shapeName}>

src/components/TerrainBlock.tsx

@@ -17,7 +17,10 @@ import {
   Vector3,
 } from "three";
 import type { SceneTerrainBlock } from "../scene/types";
+import { createLogger } from "../logger";
 import { torqueToThree } from "../scene/coordinates";
+
+const log = createLogger("TerrainBlock");
 import { useSceneSky, useSceneSun } from "../state/gameEntityStore";
 import { loadTerrain } from "../loaders";
 import { uint16ToFloat32 } from "../arrayUtils";
@@ -413,10 +416,25 @@ function generateTerrainLightmap(
  * Load a .ter file, used for terrain heightmap and texture info.
  */
 function useTerrain(terrainFile: string) {
-  return useQuery({
+  const result = useQuery({
     queryKey: ["terrain", terrainFile],
-    queryFn: () => loadTerrain(terrainFile),
+    queryFn: () => {
+      log.debug("Loading terrain: %s", terrainFile);
+      return loadTerrain(terrainFile);
+    },
   });
+
+  useEffect(() => {
+    log.debug(
+      "Query status: %s%s%s file=%s",
+      result.status,
+      result.error ? ` error=${result.error.message}` : "",
+      result.data ? " (data ready)" : " (no data)",
+      terrainFile,
+    );
+  }, [result.status, result.error, result.data, terrainFile]);
+
+  return result;
 }
 /**
  * Get visibleDistance from the Sky scene object, used to determine how far
@@ -607,6 +625,13 @@ export const TerrainBlock = memo(function TerrainBlock({
     !sharedDisplacementMap ||
     !sharedAlphaTextures
   ) {
+    log.debug(
+      "Not ready: terrain=%s geometry=%s displacement=%s alpha=%s",
+      !!terrain,
+      !!sharedGeometry,
+      !!sharedDisplacementMap,
+      !!sharedAlphaTextures,
+    );
     return null;
   }
   return (

src/components/ThreeCanvas.tsx

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+import { Canvas, GLProps, RootState } from "@react-three/fiber";
+import { NoToneMapping, PCFShadowMap, SRGBColorSpace } from "three";
+import { useDebug } from "./SettingsProvider";
+
+export type InvalidateFunction = RootState["invalidate"];
+
+// Renderer settings to match Tribes 2's simple rendering pipeline.
+// Tribes 2 (Torque engine, 2001) worked entirely in gamma/sRGB space with no HDR
+// or tone mapping. We disable tone mapping and ensure proper sRGB output.
+const glSettings: GLProps = {
+  toneMapping: NoToneMapping,
+  outputColorSpace: SRGBColorSpace,
+};
+
+export function ThreeCanvas({
+  children,
+  renderOnDemand: renderOnDemandFromProps = false,
+  dpr: dprFromProps,
+  onCreated,
+}: {
+  children?: ReactNode;
+  dpr?: number;
+  renderOnDemand?: boolean;
+  onCreated?: (state: RootState) => void;
+}) {
+  const { renderOnDemand: renderOnDemandFromSettings } = useDebug();
+  const renderOnDemand = renderOnDemandFromProps || renderOnDemandFromSettings;
+
+  return (
+    <Canvas
+      frameloop={renderOnDemand ? "demand" : "always"}
+      dpr={dprFromProps}
+      gl={glSettings}
+      shadows={{ type: PCFShadowMap }}
+      onCreated={onCreated}
+    >
+      {children}
+    </Canvas>
+  );
+}

src/components/TouchControls.tsx

@@ -1,338 +0,0 @@
-import { useEffect, useRef, type RefObject } from "react";
-import { Euler, Vector3 } from "three";
-import { useFrame, useThree } from "@react-three/fiber";
-import type nipplejs from "nipplejs";
-import { useControls } from "./SettingsProvider";
-import styles from "./TouchControls.module.css";
-
-/** Apply styles to nipplejs-generated `.back` and `.front` elements imperatively. */
-function applyNippleStyles(zone: HTMLElement) {
-  const back = zone.querySelector<HTMLElement>(".back");
-  if (back) {
-    back.style.background = "rgba(3, 79, 76, 0.6)";
-    back.style.border = "1px solid rgba(0, 219, 223, 0.5)";
-    back.style.boxShadow = "inset 0 0 10px rgba(0, 0, 0, 0.7)";
-  }
-  const front = zone.querySelector<HTMLElement>(".front");
-  if (front) {
-    front.style.background =
-      "radial-gradient(circle at 50% 50%, rgba(23, 247, 198, 0.9) 0%, rgba(9, 184, 170, 0.95) 100%)";
-    front.style.border = "2px solid rgba(255, 255, 255, 0.4)";
-    front.style.boxShadow =
-      "0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 2px rgba(0, 0, 0, 0.3)";
-  }
-}
-
-const BASE_SPEED = 80;
-const LOOK_SENSITIVITY = 0.004;
-const STICK_LOOK_SENSITIVITY = 2.5;
-const DUAL_MOVE_DEADZONE = 0.08;
-const DUAL_LOOK_DEADZONE = 0.15;
-const SINGLE_STICK_DEADZONE = 0.15;
-const MAX_PITCH = Math.PI / 2 - 0.01; // ~89°
-
-export type JoystickState = {
-  angle: number;
-  force: number;
-};
-
-type SharedProps = {
-  joystickState: RefObject<JoystickState>;
-  joystickZone: RefObject<HTMLDivElement | null>;
-  lookJoystickState: RefObject<JoystickState>;
-  lookJoystickZone: RefObject<HTMLDivElement | null>;
-};
-
-/** Renders the joystick zone(s). Place inside canvasContainer, outside Canvas. */
-export function TouchJoystick({
-  joystickState,
-  joystickZone,
-  lookJoystickState,
-  lookJoystickZone,
-}: SharedProps) {
-  const { touchMode } = useControls();
-  // Move joystick
-  useEffect(() => {
-    const zone = joystickZone.current;
-    if (!zone) return;
-
-    let manager: nipplejs.JoystickManager | null = null;
-    let cancelled = false;
-
-    import("nipplejs").then((mod) => {
-      if (cancelled) return;
-      manager = mod.default.create({
-        zone,
-        mode: "static",
-        position: { left: "70px", bottom: "70px" },
-        size: 120,
-        restOpacity: 0.9,
-      });
-
-      applyNippleStyles(zone);
-
-      manager.on("move", (_event, data) => {
-        joystickState.current.angle = data.angle.radian;
-        joystickState.current.force = Math.min(1, data.force);
-      });
-
-      manager.on("end", () => {
-        joystickState.current.force = 0;
-      });
-    });
-
-    return () => {
-      cancelled = true;
-      manager?.destroy();
-    };
-  }, [joystickState, joystickZone, touchMode]);
-
-  // Look joystick (dual stick mode only)
-  useEffect(() => {
-    if (touchMode !== "dualStick") return;
-
-    const zone = lookJoystickZone.current;
-    if (!zone) return;
-
-    let manager: nipplejs.JoystickManager | null = null;
-    let cancelled = false;
-
-    import("nipplejs").then((mod) => {
-      if (cancelled) return;
-      manager = mod.default.create({
-        zone,
-        mode: "static",
-        position: { right: "70px", bottom: "70px" },
-        size: 120,
-        restOpacity: 0.9,
-      });
-
-      applyNippleStyles(zone);
-
-      manager.on("move", (_event, data) => {
-        lookJoystickState.current.angle = data.angle.radian;
-        lookJoystickState.current.force = Math.min(1, data.force);
-      });
-
-      manager.on("end", () => {
-        lookJoystickState.current.force = 0;
-      });
-    });
-
-    return () => {
-      cancelled = true;
-      manager?.destroy();
-    };
-  }, [touchMode, lookJoystickState, lookJoystickZone]);
-
-  const blurActiveElement = () => {
-    if (document.activeElement instanceof HTMLElement) {
-      document.activeElement.blur();
-    }
-  };
-
-  if (touchMode === "dualStick") {
-    return (
-      <>
-        <div
-          ref={joystickZone}
-          className={styles.Left}
-          onContextMenu={(e) => e.preventDefault()}
-          onTouchStart={blurActiveElement}
-        />
-        <div
-          ref={lookJoystickZone}
-          className={styles.Right}
-          onContextMenu={(e) => e.preventDefault()}
-          onTouchStart={blurActiveElement}
-        />
-      </>
-    );
-  }
-
-  return (
-    <div
-      ref={joystickZone}
-      className={styles.Joystick}
-      onContextMenu={(e) => e.preventDefault()}
-      onTouchStart={blurActiveElement}
-    />
-  );
-}
-
-/** Handles touch look and joystick-driven movement. Place inside Canvas. */
-export function TouchCameraMovement({
-  joystickState,
-  joystickZone,
-  lookJoystickState,
-}: SharedProps) {
-  const { speedMultiplier, touchMode } = useControls();
-  const { camera, gl } = useThree();
-
-  // Touch look state
-  const euler = useRef(new Euler(0, 0, 0, "YXZ"));
-  const lookTouchId = useRef<number | null>(null);
-  const lastTouchPos = useRef({ x: 0, y: 0 });
-
-  // Scratch vectors
-  const forwardVec = useRef(new Vector3());
-  const sideVec = useRef(new Vector3());
-  const moveVec = useRef(new Vector3());
-
-  // Initialize euler from current camera rotation on mount
-  useEffect(() => {
-    euler.current.setFromQuaternion(camera.quaternion, "YXZ");
-  }, [camera]);
-
-  // Touch-drag look handling (moveLookStick mode)
-  useEffect(() => {
-    if (touchMode !== "moveLookStick") return;
-
-    const canvas = gl.domElement;
-
-    const isTouchOnJoystick = (touch: Touch) => {
-      const zone = joystickZone.current;
-      if (!zone) return false;
-      const rect = zone.getBoundingClientRect();
-      return (
-        touch.clientX >= rect.left &&
-        touch.clientX <= rect.right &&
-        touch.clientY >= rect.top &&
-        touch.clientY <= rect.bottom
-      );
-    };
-
-    const handleTouchStart = (e: TouchEvent) => {
-      if (lookTouchId.current !== null) return;
-      for (let i = 0; i < e.changedTouches.length; i++) {
-        const touch = e.changedTouches[i];
-        if (!isTouchOnJoystick(touch)) {
-          lookTouchId.current = touch.identifier;
-          lastTouchPos.current = { x: touch.clientX, y: touch.clientY };
-          break;
-        }
-      }
-    };
-
-    const handleTouchMove = (e: TouchEvent) => {
-      if (lookTouchId.current === null) return;
-      for (let i = 0; i < e.changedTouches.length; i++) {
-        const touch = e.changedTouches[i];
-        if (touch.identifier === lookTouchId.current) {
-          const dx = touch.clientX - lastTouchPos.current.x;
-          const dy = touch.clientY - lastTouchPos.current.y;
-          lastTouchPos.current = { x: touch.clientX, y: touch.clientY };
-
-          euler.current.setFromQuaternion(camera.quaternion, "YXZ");
-          euler.current.y -= dx * LOOK_SENSITIVITY;
-          euler.current.x -= dy * LOOK_SENSITIVITY;
-          euler.current.x = Math.max(
-            -MAX_PITCH,
-            Math.min(MAX_PITCH, euler.current.x),
-          );
-          camera.quaternion.setFromEuler(euler.current);
-          break;
-        }
-      }
-    };
-
-    const handleTouchEnd = (e: TouchEvent) => {
-      for (let i = 0; i < e.changedTouches.length; i++) {
-        if (e.changedTouches[i].identifier === lookTouchId.current) {
-          lookTouchId.current = null;
-          break;
-        }
-      }
-    };
-
-    canvas.addEventListener("touchstart", handleTouchStart, { passive: true });
-    canvas.addEventListener("touchmove", handleTouchMove, { passive: true });
-    canvas.addEventListener("touchend", handleTouchEnd, { passive: true });
-    canvas.addEventListener("touchcancel", handleTouchEnd, { passive: true });
-
-    return () => {
-      canvas.removeEventListener("touchstart", handleTouchStart);
-      canvas.removeEventListener("touchmove", handleTouchMove);
-      canvas.removeEventListener("touchend", handleTouchEnd);
-      canvas.removeEventListener("touchcancel", handleTouchEnd);
-      lookTouchId.current = null;
-    };
-  }, [camera, gl.domElement, joystickZone, touchMode]);
-
-  useFrame((_state, delta) => {
-    const { force, angle } = joystickState.current;
-
-    if (touchMode === "dualStick") {
-      // Right stick → camera rotation
-      const look = lookJoystickState.current;
-      if (look.force > DUAL_LOOK_DEADZONE) {
-        const lookForce =
-          (look.force - DUAL_LOOK_DEADZONE) / (1 - DUAL_LOOK_DEADZONE);
-        const lookX = Math.cos(look.angle);
-        const lookY = Math.sin(look.angle);
-
-        euler.current.setFromQuaternion(camera.quaternion, "YXZ");
-        euler.current.y -= lookX * lookForce * STICK_LOOK_SENSITIVITY * delta;
-        euler.current.x += lookY * lookForce * STICK_LOOK_SENSITIVITY * delta;
-        euler.current.x = Math.max(
-          -MAX_PITCH,
-          Math.min(MAX_PITCH, euler.current.x),
-        );
-        camera.quaternion.setFromEuler(euler.current);
-      }
-
-      // Left stick → movement
-      if (force > DUAL_MOVE_DEADZONE) {
-        const moveForce =
-          (force - DUAL_MOVE_DEADZONE) / (1 - DUAL_MOVE_DEADZONE);
-        const speed = BASE_SPEED * speedMultiplier * moveForce;
-        const joyX = Math.cos(angle);
-        const joyY = Math.sin(angle);
-
-        camera.getWorldDirection(forwardVec.current);
-        forwardVec.current.normalize();
-        sideVec.current.crossVectors(camera.up, forwardVec.current).normalize();
-
-        moveVec.current
-          .set(0, 0, 0)
-          .addScaledVector(forwardVec.current, joyY)
-          .addScaledVector(sideVec.current, -joyX);
-
-        if (moveVec.current.lengthSq() > 0) {
-          moveVec.current.normalize().multiplyScalar(speed * delta);
-          camera.position.add(moveVec.current);
-        }
-      }
-    } else if (touchMode === "moveLookStick") {
-      if (force > 0) {
-        // Move forward at half the configured speed.
-        const speed = BASE_SPEED * speedMultiplier * 0.5;
-        camera.getWorldDirection(forwardVec.current);
-        forwardVec.current.normalize();
-        moveVec.current.copy(forwardVec.current).multiplyScalar(speed * delta);
-        camera.position.add(moveVec.current);
-
-        if (force >= SINGLE_STICK_DEADZONE) {
-          // Outer zone: also control camera look (yaw + pitch).
-          const lookX = Math.cos(angle);
-          const lookY = Math.sin(angle);
-          const lookForce =
-            (force - SINGLE_STICK_DEADZONE) / (1 - SINGLE_STICK_DEADZONE);
-
-          euler.current.setFromQuaternion(camera.quaternion, "YXZ");
-          euler.current.y -=
-            lookX * lookForce * STICK_LOOK_SENSITIVITY * 0.5 * delta;
-          euler.current.x +=
-            lookY * lookForce * STICK_LOOK_SENSITIVITY * 0.5 * delta;
-          euler.current.x = Math.max(
-            -MAX_PITCH,
-            Math.min(MAX_PITCH, euler.current.x),
-          );
-          camera.quaternion.setFromEuler(euler.current);
-        }
-      }
-    }
-  });
-
-  return null;
-}

src/components/TouchHandler.tsx

@@ -0,0 +1,218 @@
+import { useEffect, useEffectEvent, useRef } from "react";
+import { Euler, Vector3 } from "three";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useControls } from "./SettingsProvider";
+import { useJoystick } from "./JoystickContext";
+
+const BASE_SPEED = 80;
+const LOOK_SENSITIVITY = 0.004;
+const STICK_LOOK_SENSITIVITY = 2.5;
+const DUAL_MOVE_DEADZONE = 0.08;
+const DUAL_LOOK_DEADZONE = 0.15;
+const SINGLE_STICK_DEADZONE = 0.15;
+const MAX_PITCH = Math.PI / 2 - 0.01; // ~89°
+
+export type JoystickState = {
+  angle: number;
+  force: number;
+};
+
+/** Handles touch look and joystick-driven movement. Place inside Canvas. */
+export function TouchHandler() {
+  const { speedMultiplier, touchMode, invertDrag, invertJoystick } =
+    useControls();
+  const camera = useThree((state) => state.camera);
+  const gl = useThree((state) => state.gl);
+  const { moveState, lookState } = useJoystick();
+
+  // Touch look state
+  const euler = useRef(new Euler(0, 0, 0, "YXZ"));
+  const lookTouchId = useRef<number | null>(null);
+  const lastTouchPos = useRef({ x: 0, y: 0 });
+  const getInvertDrag = useEffectEvent(() => invertDrag);
+
+  // Scratch vectors
+  const forwardVec = useRef(new Vector3());
+  const sideVec = useRef(new Vector3());
+  const moveVec = useRef(new Vector3());
+
+  // Initialize euler from current camera rotation on mount
+  useEffect(() => {
+    euler.current.setFromQuaternion(camera.quaternion, "YXZ");
+  }, [camera]);
+
+  // Touch-drag look handling (moveLookStick mode)
+  useEffect(() => {
+    if (touchMode !== "moveLookStick") return;
+
+    const canvas = gl.domElement;
+
+    // const isTouchOnJoystick = (touch: Touch) => {
+    //   const zone = joystickZone.current;
+    //   if (!zone) return false;
+    //   const rect = zone.getBoundingClientRect();
+    //   return (
+    //     touch.clientX >= rect.left &&
+    //     touch.clientX <= rect.right &&
+    //     touch.clientY >= rect.top &&
+    //     touch.clientY <= rect.bottom
+    //   );
+    // };
+
+    const handleTouchStart = (e: TouchEvent) => {
+      if (lookTouchId.current !== null) return;
+      for (let i = 0; i < e.changedTouches.length; i++) {
+        const touch = e.changedTouches[i];
+        // if (!isTouchOnJoystick(touch)) {
+        lookTouchId.current = touch.identifier;
+        lastTouchPos.current = { x: touch.clientX, y: touch.clientY };
+        break;
+        // }
+      }
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      if (lookTouchId.current === null) return;
+      for (let i = 0; i < e.changedTouches.length; i++) {
+        const touch = e.changedTouches[i];
+        if (touch.identifier === lookTouchId.current) {
+          const dx = touch.clientX - lastTouchPos.current.x;
+          const dy = touch.clientY - lastTouchPos.current.y;
+          lastTouchPos.current = { x: touch.clientX, y: touch.clientY };
+
+          const dragSign = getInvertDrag() ? -1 : 1;
+          euler.current.setFromQuaternion(camera.quaternion, "YXZ");
+          euler.current.y += dragSign * dx * LOOK_SENSITIVITY;
+          euler.current.x += dragSign * dy * LOOK_SENSITIVITY;
+          euler.current.x = Math.max(
+            -MAX_PITCH,
+            Math.min(MAX_PITCH, euler.current.x),
+          );
+          camera.quaternion.setFromEuler(euler.current);
+          break;
+        }
+      }
+    };
+
+    const handleTouchEnd = (e: TouchEvent) => {
+      for (let i = 0; i < e.changedTouches.length; i++) {
+        if (e.changedTouches[i].identifier === lookTouchId.current) {
+          lookTouchId.current = null;
+          break;
+        }
+      }
+    };
+
+    canvas.addEventListener("touchstart", handleTouchStart, { passive: true });
+    canvas.addEventListener("touchmove", handleTouchMove, { passive: true });
+    canvas.addEventListener("touchend", handleTouchEnd, { passive: true });
+    canvas.addEventListener("touchcancel", handleTouchEnd, { passive: true });
+
+    return () => {
+      canvas.removeEventListener("touchstart", handleTouchStart);
+      canvas.removeEventListener("touchmove", handleTouchMove);
+      canvas.removeEventListener("touchend", handleTouchEnd);
+      canvas.removeEventListener("touchcancel", handleTouchEnd);
+      lookTouchId.current = null;
+    };
+  }, [camera, gl.domElement, touchMode]);
+
+  useFrame((_state, delta) => {
+    const { force: moveForce, angle: moveAngle } = moveState.current;
+    const { force: lookForce, angle: lookAngle } = lookState.current;
+
+    if (touchMode === "dualStick") {
+      // Right stick → camera rotation
+      if (lookForce > DUAL_LOOK_DEADZONE) {
+        const normalizedLookForce =
+          (lookForce - DUAL_LOOK_DEADZONE) / (1 - DUAL_LOOK_DEADZONE);
+        const lookX = Math.cos(lookAngle);
+        const lookY = Math.sin(lookAngle);
+
+        const joySign = invertJoystick ? -1 : 1;
+        euler.current.setFromQuaternion(camera.quaternion, "YXZ");
+        euler.current.y -=
+          joySign *
+          lookX *
+          normalizedLookForce *
+          STICK_LOOK_SENSITIVITY *
+          delta;
+        euler.current.x +=
+          joySign *
+          lookY *
+          normalizedLookForce *
+          STICK_LOOK_SENSITIVITY *
+          delta;
+        euler.current.x = Math.max(
+          -MAX_PITCH,
+          Math.min(MAX_PITCH, euler.current.x),
+        );
+        camera.quaternion.setFromEuler(euler.current);
+      }
+
+      // Left stick → movement
+      if (moveForce > DUAL_MOVE_DEADZONE) {
+        const normalizedMoveForce =
+          (moveForce - DUAL_MOVE_DEADZONE) / (1 - DUAL_MOVE_DEADZONE);
+        const speed = BASE_SPEED * speedMultiplier * normalizedMoveForce;
+        const joyX = Math.cos(moveAngle);
+        const joyY = Math.sin(moveAngle);
+
+        camera.getWorldDirection(forwardVec.current);
+        forwardVec.current.normalize();
+        sideVec.current.crossVectors(camera.up, forwardVec.current).normalize();
+
+        moveVec.current
+          .set(0, 0, 0)
+          .addScaledVector(forwardVec.current, joyY)
+          .addScaledVector(sideVec.current, -joyX);
+
+        if (moveVec.current.lengthSq() > 0) {
+          moveVec.current.normalize().multiplyScalar(speed * delta);
+          camera.position.add(moveVec.current);
+        }
+      }
+    } else if (touchMode === "moveLookStick") {
+      if (moveForce > 0) {
+        // Move forward at half the configured speed.
+        const speed = BASE_SPEED * speedMultiplier * 0.5;
+        camera.getWorldDirection(forwardVec.current);
+        forwardVec.current.normalize();
+        moveVec.current.copy(forwardVec.current).multiplyScalar(speed * delta);
+        camera.position.add(moveVec.current);
+
+        if (moveForce >= SINGLE_STICK_DEADZONE) {
+          // Outer zone: also control camera look (yaw + pitch).
+          const lookX = Math.cos(moveAngle);
+          const lookY = Math.sin(moveAngle);
+          const normalizedLookForce =
+            (moveForce - SINGLE_STICK_DEADZONE) / (1 - SINGLE_STICK_DEADZONE);
+
+          const singleJoySign = invertJoystick ? -1 : 1;
+          euler.current.setFromQuaternion(camera.quaternion, "YXZ");
+          euler.current.y -=
+            singleJoySign *
+            lookX *
+            normalizedLookForce *
+            STICK_LOOK_SENSITIVITY *
+            0.5 *
+            delta;
+          euler.current.x +=
+            singleJoySign *
+            lookY *
+            normalizedLookForce *
+            STICK_LOOK_SENSITIVITY *
+            0.5 *
+            delta;
+          euler.current.x = Math.max(
+            -MAX_PITCH,
+            Math.min(MAX_PITCH, euler.current.x),
+          );
+          camera.quaternion.setFromEuler(euler.current);
+        }
+      }
+    }
+  });
+
+  return null;
+}

src/components/TouchJoystick.module.css

@@ -1,5 +1,5 @@
 .Joystick {
-  position: fixed;
+  position: absolute;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);

src/components/TouchJoystick.tsx

@@ -0,0 +1,130 @@
+import { useEffect, useState } from "react";
+import type nipplejs from "nipplejs";
+import { useControls } from "./SettingsProvider";
+import { useJoystick } from "./JoystickContext";
+import styles from "./TouchJoystick.module.css";
+
+/** Apply styles to nipplejs-generated `.back` and `.front` elements imperatively. */
+function applyNippleStyles(zone: HTMLElement) {
+  const back = zone.querySelector<HTMLElement>(".back");
+  if (back) {
+    back.style.background = "rgba(3, 79, 76, 0.6)";
+    back.style.border = "1px solid rgba(0, 219, 223, 0.5)";
+    back.style.boxShadow = "inset 0 0 10px rgba(0, 0, 0, 0.7)";
+  }
+  const front = zone.querySelector<HTMLElement>(".front");
+  if (front) {
+    front.style.background =
+      "radial-gradient(circle at 50% 50%, rgba(23, 247, 198, 0.9) 0%, rgba(9, 184, 170, 0.95) 100%)";
+    front.style.border = "2px solid rgba(255, 255, 255, 0.4)";
+    front.style.boxShadow =
+      "0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 2px rgba(0, 0, 0, 0.3)";
+  }
+}
+
+export function TouchJoystick() {
+  const { touchMode } = useControls();
+  const [moveZone, setMoveZone] = useState<HTMLDivElement>(null);
+  const [lookZone, setLookZone] = useState<HTMLDivElement>(null);
+  const { moveState, lookState, setMoveState, setLookState } = useJoystick();
+
+  // Move joystick
+  useEffect(() => {
+    if (!moveZone) return;
+
+    let manager: nipplejs.JoystickManager | null = null;
+    let cancelled = false;
+
+    import("nipplejs").then((mod) => {
+      if (cancelled) return;
+      manager = mod.default.create({
+        zone: moveZone,
+        mode: "static",
+        position: { left: "70px", bottom: "70px" },
+        size: 120,
+        restOpacity: 0.9,
+      });
+
+      applyNippleStyles(moveZone);
+
+      manager.on("move", (_event, data) => {
+        setMoveState({
+          angle: data.angle.radian,
+          force: Math.min(1, data.force),
+        });
+      });
+
+      manager.on("end", () => {
+        setMoveState({ force: 0 });
+      });
+    });
+
+    return () => {
+      cancelled = true;
+      manager?.destroy();
+    };
+  }, [moveState, moveZone, setMoveState]);
+
+  // Look joystick (dual stick mode only)
+  useEffect(() => {
+    if (!lookZone) return;
+
+    let manager: nipplejs.JoystickManager | null = null;
+    let cancelled = false;
+
+    import("nipplejs").then((mod) => {
+      if (cancelled) return;
+      manager = mod.default.create({
+        zone: lookZone,
+        mode: "static",
+        position: { right: "70px", bottom: "70px" },
+        size: 120,
+        restOpacity: 0.9,
+      });
+
+      applyNippleStyles(lookZone);
+
+      manager.on("move", (_event, data) => {
+        setLookState({
+          angle: data.angle.radian,
+          force: Math.min(1, data.force),
+        });
+      });
+
+      manager.on("end", () => {
+        setLookState({ force: 0 });
+      });
+    });
+
+    return () => {
+      cancelled = true;
+      manager?.destroy();
+    };
+  }, [lookState, lookZone, setLookState]);
+
+  const blurActiveElement = () => {
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+  };
+
+  return (
+    <>
+      <div
+        ref={setMoveZone}
+        key={touchMode}
+        className={touchMode === "dualStick" ? styles.Left : styles.Joystick}
+        onContextMenu={(e) => e.preventDefault()}
+        onTouchStart={blurActiveElement}
+      />
+      {touchMode === "dualStick" ? (
+        <div
+          ref={setLookZone}
+          className={styles.Right}
+          onContextMenu={(e) => e.preventDefault()}
+          onTouchStart={blurActiveElement}
+        />
+      ) : null}
+    </>
+  );
+}

src/components/Turret.tsx

@@ -1,9 +1,12 @@
 import { useMemo } from "react";
 import type { TorqueObject } from "../torqueScript";
+import { createLogger } from "../logger";
 import { getPosition, getProperty, getRotation, getScale } from "../mission";
 import { ShapeRenderer } from "./GenericShape";
 import { ShapeInfoProvider } from "./ShapeInfoProvider";
 import { useDatablock } from "./useDatablock";
+
+const log = createLogger("Turret");
 export function Turret({ object }: { object: TorqueObject }) {
   const datablockName = getProperty(object, "dataBlock") ?? "";
   const barrelDatablockName = getProperty(object, "initialBarrel");
@@ -15,14 +18,12 @@ export function Turret({ object }: { object: TorqueObject }) {
   const shapeName = getProperty(datablock, "shapeFile");
   const barrelShapeName = getProperty(barrelDatablock, "shapeFile");
   if (!shapeName) {
-    console.error(`<Turret> missing shape for datablock: ${datablockName}`);
+    log.error("Turret missing shape for datablock: %s", datablockName);
   }
   // `initialBarrel` is optional - turrets can exist without a barrel mounted.
   // But if we do have one, it needs a shape name.
   if (barrelDatablockName && !barrelShapeName) {
-    console.error(
-      `<Turret> missing shape for barrel datablock: ${barrelDatablockName}`,
-    );
+    log.error("Turret missing shape for barrel datablock: %s", barrelDatablockName);
   }
   return (
     <ShapeInfoProvider type="Turret" object={object} shapeName={shapeName}>

src/components/VisualInput.tsx

@@ -0,0 +1,29 @@
+import { lazy, Suspense } from "react";
+import { useTouchDevice } from "./useTouchDevice";
+
+const TouchJoystick = lazy(() =>
+  import("@/src/components/TouchJoystick").then((mod) => ({
+    default: mod.TouchJoystick,
+  })),
+);
+
+const KeyboardOverlay = lazy(() =>
+  import("@/src/components/KeyboardOverlay").then((mod) => ({
+    default: mod.KeyboardOverlay,
+  })),
+);
+
+export function VisualInput() {
+  const isTouch = useTouchDevice();
+
+  return (
+    <Suspense>
+      {isTouch ? <TouchJoystick /> : null}
+      {isTouch === false ? (
+        // isTouch can be `null` before we know for sure; make sure this doesn't
+        // render until it's definitively false
+        <KeyboardOverlay />
+      ) : null}
+    </Suspense>
+  );
+}

src/components/WaterBlock.tsx

@@ -4,11 +4,16 @@ import { useFrame, useThree } from "@react-three/fiber";
 import { DoubleSide, NoColorSpace, PlaneGeometry, RepeatWrapping } from "three";
 import { textureToUrl } from "../loaders";
 import type { SceneWaterBlock } from "../scene/types";
-import { torqueToThree, torqueScaleToThree, matrixFToQuaternion } from "../scene";
+import {
+  torqueToThree,
+  torqueScaleToThree,
+  matrixFToQuaternion,
+} from "../scene";
 import { setupTexture } from "../textureUtils";
 import { createWaterMaterial } from "../waterMaterial";
 import { useDebug, useSettings } from "./SettingsProvider";
 import { usePositionTracker } from "./usePositionTracker";
+import { WaterBlockEntity } from "../state/gameEntityTypes";
 
 const REP_SIZE = 2048;
 
@@ -87,13 +92,20 @@ export function WaterMaterial({
  * - Renders 9 reps (3x3 grid) centered on camera's rep
  */
 export const WaterBlock = memo(function WaterBlock({
-  scene,
+  entity,
 }: {
-  scene: SceneWaterBlock;
+  entity: WaterBlockEntity;
 }) {
+  const scene = entity.waterData;
   const { debugMode } = useDebug();
-  const q = useMemo(() => matrixFToQuaternion(scene.transform), [scene.transform]);
-  const position = useMemo(() => torqueToThree(scene.transform.position), [scene.transform]);
+  const q = useMemo(
+    () => matrixFToQuaternion(scene.transform),
+    [scene.transform],
+  );
+  const position = useMemo(
+    () => torqueToThree(scene.transform.position),
+    [scene.transform],
+  );
   const scale = useMemo(() => torqueScaleToThree(scene.scale), [scene.scale]);
   const [scaleX, scaleY, scaleZ] = scale;
   const camera = useThree((state) => state.camera);

src/components/useDatablock.ts

@@ -1,5 +1,5 @@
 import type { TorqueObject } from "../torqueScript";
-import { useDatablockByName } from "../state";
+import { useDatablockByName } from "../state/engineStore";
 
 /** Look up a datablock by name from runtime state (reactive). */
 export function useDatablock(

src/components/useDistanceFromCamera.ts

@@ -6,7 +6,7 @@ import { useWorldPosition } from "./useWorldPosition";
 export function useDistanceFromCamera<T extends Object3D>(
   ref: RefObject<T>,
 ): RefObject<number> {
-  const { camera } = useThree();
+  const camera = useThree((state) => state.camera);
   const distanceRef = useRef<number>(null);
   const worldPosRef = useWorldPosition(ref);
 

src/components/useIflTexture.ts

@@ -103,10 +103,7 @@ export function updateAtlasFrame(atlas: IflAtlas, frameIndex: number) {
  * Find the frame index for a given time in seconds. Matches Torque's
  * `animateIfls()` lookup using cumulative `iflFrameOffTimes`.
  */
-export function getFrameIndexForTime(
-  atlas: IflAtlas,
-  seconds: number,
-): number {
+export function getFrameIndexForTime(atlas: IflAtlas, seconds: number): number {
   const dur = atlas.totalDurationSeconds;
   if (dur <= 0) return 0;
   let t = seconds;

src/components/usePublicWindowAPI.ts

@@ -0,0 +1,29 @@
+import { useEffect, useEffectEvent } from "react";
+import { getMissionInfo, getMissionList } from "../manifest";
+import { usePlaybackActions } from "./RecordingProvider";
+
+export function usePublicWindowAPI({ onChangeMission }) {
+  const { setRecording } = usePlaybackActions();
+  const handleChangeMission = useEffectEvent(onChangeMission);
+
+  useEffect(() => {
+    // For automation, like the t2-maps app!
+    window.setMissionName = (missionName: string) => {
+      const availableMissionTypes = getMissionInfo(missionName).missionTypes;
+      handleChangeMission({
+        missionName,
+        missionType: availableMissionTypes[0],
+      });
+    };
+    window.getMissionList = getMissionList;
+    window.getMissionInfo = getMissionInfo;
+    window.loadDemoRecording = setRecording;
+
+    return () => {
+      delete window.setMissionName;
+      delete window.getMissionList;
+      delete window.getMissionInfo;
+      delete window.loadDemoRecording;
+    };
+  }, [setRecording]);
+}

src/components/useQueryParams.ts

@@ -0,0 +1,50 @@
+import { createParser, parseAsBoolean, useQueryState } from "nuqs";
+import { getMissionInfo } from "../manifest";
+
+export type CurrentMission = {
+  missionName: string;
+  missionType?: string;
+};
+
+const defaultMission: CurrentMission = {
+  missionName: "RiverDance",
+  missionType: "CTF",
+};
+
+const parseAsMissionWithType = createParser<CurrentMission>({
+  parse(query: string) {
+    const [missionName, missionType] = query.split("~");
+    let selectedMissionType = missionType;
+    const availableMissionTypes = getMissionInfo(missionName).missionTypes;
+    if (!missionType || !availableMissionTypes.includes(missionType)) {
+      selectedMissionType = availableMissionTypes[0];
+    }
+    return { missionName, missionType: selectedMissionType };
+  },
+  serialize({ missionName, missionType }): string {
+    const availableMissionTypes = getMissionInfo(missionName).missionTypes;
+    if (!missionType || availableMissionTypes.length === 1) {
+      return missionName;
+    }
+    return `${missionName}~${missionType}`;
+  },
+  eq(a, b) {
+    return a.missionName === b.missionName && a.missionType === b.missionType;
+  },
+}).withDefault(defaultMission);
+
+export function useMissionQueryState() {
+  const [currentMission, setCurrentMission] = useQueryState(
+    "mission",
+    parseAsMissionWithType,
+  );
+  return [currentMission, setCurrentMission] as const;
+}
+
+export function useFogQueryState() {
+  const [fogEnabledOverride, setFogEnabledOverride] = useQueryState(
+    "fog",
+    parseAsBoolean,
+  );
+  return [fogEnabledOverride, setFogEnabledOverride] as const;
+}

src/components/useSceneObject.ts

@@ -1,5 +1,5 @@
 import type { TorqueObject } from "../torqueScript";
-import { useRuntimeObjectByName } from "../state";
+import { useRuntimeObjectByName } from "../state/engineStore";
 
 /**
  * Look up a scene object by name from the runtime.

src/loaders.ts

@@ -1,4 +1,5 @@
 import { parseImageFileList } from "./imageFileList";
+import { createLogger } from "./logger";
 import {
   getActualResourceKey,
   getMissionInfo,
@@ -9,6 +10,8 @@ import { parseMissionScript } from "./mission";
 import { normalizePath } from "./stringUtils";
 import { parseTerrainBuffer, type TerrainFile } from "./terrain";
 
+const log = createLogger("loaders");
+
 export type { TerrainFile };
 
 export const BASE_URL = "/t2-mapper";
@@ -21,9 +24,7 @@ export function getUrlForPath(resourcePath: string, fallbackUrl?: string) {
     resourceKey = getActualResourceKey(resourcePath);
   } catch (err) {
     if (fallbackUrl) {
-      console.warn(
-        `Resource "${resourcePath}" not found - rendering fallback.`,
-      );
+      log.warn("Resource \"%s\" not found — rendering fallback", resourcePath);
       return fallbackUrl;
     } else {
       throw err;
@@ -108,8 +109,16 @@ export async function loadMission(name: string) {
 }
 
 export async function loadTerrain(fileName: string) {
-  const res = await fetch(getUrlForPath(`terrains/${fileName}`));
+  const url = getUrlForPath(`terrains/${fileName}`);
+  log.debug("Fetching terrain: %s", url);
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error(
+      `[loadTerrain] Failed to fetch ${url}: ${res.status} ${res.statusText}`,
+    );
+  }
   const terrainBuffer = await res.arrayBuffer();
+  log.debug("Loaded terrain %s: %d bytes", fileName, terrainBuffer.byteLength);
   return parseTerrainBuffer(terrainBuffer);
 }
 

src/logger.ts

@@ -0,0 +1,88 @@
+import pino from "pino";
+
+/**
+ * Module-scoped browser logging via pino.
+ *
+ * Control via NEXT_PUBLIC_LOG (comma-separated):
+ *   "debug"                                    → all modules at debug
+ *   "liveStreaming:debug,DebugSuspense:trace"  → those modules only, rest silent
+ *   "debug,liveStreaming:trace"                → all at debug, liveStreaming at trace
+ *
+ * Bare level names (no colon) set the global default. Entries with colons
+ * set per-module overrides. If no global level is specified but module
+ * overrides exist, unlisted modules default to silent.
+ *
+ * Unset or empty → all modules default to "info".
+ *
+ * At runtime: `logger.level = "debug"` on any module logger.
+ */
+
+const PINO_LEVELS = new Set([
+  "trace",
+  "debug",
+  "info",
+  "warn",
+  "error",
+  "fatal",
+  "silent",
+]);
+
+/** Parse NEXT_PUBLIC_LOG into a global default and per-module overrides. */
+function parseLogConfig(): {
+  globalLevel: string;
+  modules: Map<string, string>;
+} {
+  const raw = process.env.NEXT_PUBLIC_LOG?.trim();
+  if (!raw) return { globalLevel: "info", modules: new Map() };
+
+  let globalLevel: string | null = null;
+  const modules = new Map<string, string>();
+
+  for (const entry of raw.split(",")) {
+    const trimmed = entry.trim();
+    if (!trimmed) continue;
+    if (trimmed.includes(":")) {
+      const [name, level] = trimmed.split(":");
+      if (name && level) modules.set(name, level);
+    } else if (PINO_LEVELS.has(trimmed)) {
+      globalLevel = trimmed;
+    }
+  }
+
+  // If only module overrides were given, default the rest to silent.
+  globalLevel ??= modules.size > 0 ? "silent" : "info";
+
+  return { globalLevel, modules };
+}
+
+const { globalLevel, modules: moduleLevels } = parseLogConfig();
+
+// Map pino numeric levels → console methods.
+const LEVEL_TO_CONSOLE: Record<number, "debug" | "log" | "warn" | "error"> = {
+  10: "debug", // trace
+  20: "debug",
+  30: "log", // info
+  40: "warn",
+  50: "error",
+  60: "error", // fatal
+};
+
+/** Custom write function so pino formats the message (resolving %s etc.)
+ * before we output it. Setting `write` implies `asObject: true`. */
+function write(o: { level: number; module?: string; msg: string }) {
+  const method = LEVEL_TO_CONSOLE[o.level] ?? "log";
+  const prefix = o.module ? `[${o.module}]` : "[t2-mapper]";
+  console[method](prefix, o.msg);
+}
+
+export const rootLogger = pino({
+  name: "t2-mapper",
+  level: "trace", // allow children to go as low as they want
+  browser: { write },
+});
+
+/** Create a named child logger. */
+export function createLogger(name: string): pino.Logger {
+  const level = moduleLevels.get(name) ?? globalLevel;
+  return rootLogger.child({ module: name }, { level });
+}

src/manifest.ts

@@ -140,6 +140,10 @@ export function getMissionInfo(missionName: string) {
   return missionInfo;
 }
 
+export function hasMission(missionName: string): boolean {
+  return missionName in manifest.missions;
+}
+
 export function getMissionList() {
   return Object.keys(manifest.missions);
 }

src/mission.ts

@@ -19,7 +19,7 @@ interface CommentSection {
   comments: string[];
 }
 
-const normalizedMissionTypes = {
+export const normalizedMissionTypes = {
   arena: "Arena",
   bounty: "Bounty",
   cnh: "CnH",

src/particles/ParticleSystem.ts

@@ -67,8 +67,8 @@ export function resolveParticleData(
         b: k.b ?? 1,
         a: k.a ?? 1,
         // V12 packs size as size/MaxParticleSize; parser returns [0,1].
-        size: (k.size ?? (1 / MAX_PARTICLE_SIZE)) * MAX_PARTICLE_SIZE,
-        time: i === 0 ? 0 : k.time ?? 1,
+        size: (k.size ?? 1 / MAX_PARTICLE_SIZE) * MAX_PARTICLE_SIZE,
+        time: i === 0 ? 0 : (k.time ?? 1),
       });
     }
   }
@@ -98,7 +98,8 @@ export function resolveParticleData(
     inheritedVelFactor: getNumber(raw, "inheritedVelFactor", 0),
     constantAcceleration: getNumber(raw, "constantAcceleration", 0),
     lifetimeMS: getNumber(raw, "lifetimeMS", 31) << LIFETIME_SHIFT,
-    lifetimeVarianceMS: getNumber(raw, "lifetimeVarianceMS", 0) << LIFETIME_SHIFT,
+    lifetimeVarianceMS:
+      getNumber(raw, "lifetimeVarianceMS", 0) << LIFETIME_SHIFT,
     spinSpeed: getNumber(raw, "spinSpeed", 0),
     // V12 packs spinRandom as value+1000; parser returns raw integer.
     spinRandomMin: getNumber(raw, "spinRandomMin", 1000) + SPIN_RANDOM_OFFSET,
@@ -142,7 +143,8 @@ export function resolveEmitterData(
     orientParticles: getBool(raw, "orientParticles", false),
     orientOnVelocity: getBool(raw, "orientOnVelocity", true),
     lifetimeMS: getNumber(raw, "lifetimeMS", 0) << LIFETIME_SHIFT,
-    lifetimeVarianceMS: getNumber(raw, "lifetimeVarianceMS", 0) << LIFETIME_SHIFT,
+    lifetimeVarianceMS:
+      getNumber(raw, "lifetimeVarianceMS", 0) << LIFETIME_SHIFT,
     particles: resolveParticleData(particleRaw),
   };
 }
@@ -268,7 +270,11 @@ export class EmitterInstance {
     count: number,
     axis: [number, number, number] = [0, 0, 1],
   ): void {
-    for (let i = 0; i < count && this.particles.length < this.maxParticles; i++) {
+    for (
+      let i = 0;
+      i < count && this.particles.length < this.maxParticles;
+      i++
+    ) {
       this.addParticle(pos, axis);
     }
   }
@@ -322,10 +328,7 @@ export class EmitterInstance {
     this.emitterAge += dtMS;
 
     // Check emitter lifetime (V12 uses strictly greater).
-    if (
-      this.emitterLifetime > 0 &&
-      this.emitterAge > this.emitterLifetime
-    ) {
+    if (this.emitterLifetime > 0 && this.emitterAge > this.emitterLifetime) {
       this.emitterDead = true;
     }
 
@@ -408,13 +411,21 @@ export class EmitterInstance {
 
     // Rotate axis by theta around axisx, then by phi around original axis.
     [ejX, ejY, ejZ] = rotateAroundAxis(
-      ejX, ejY, ejZ,
-      axisx[0], axisx[1], axisx[2],
+      ejX,
+      ejY,
+      ejZ,
+      axisx[0],
+      axisx[1],
+      axisx[2],
       theta,
     );
     [ejX, ejY, ejZ] = rotateAroundAxis(
-      ejX, ejY, ejZ,
-      axis[0], axis[1], axis[2],
+      ejX,
+      ejY,
+      ejZ,
+      axis[0],
+      axis[1],
+      axis[2],
       phi,
     );
 

src/scene/coordinates.spec.ts

@@ -42,12 +42,7 @@ describe("matrixFToQuaternion", () => {
     const c = Math.cos(angleRad);
     const s = Math.sin(angleRad);
 
-    const elements = [
-      c, s, 0, 0,
-      -s, c, 0, 0,
-      0, 0, 1, 0,
-      0, 0, 0, 1,
-    ];
+    const elements = [c, s, 0, 0, -s, c, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
 
     const m: MatrixF = { elements, position: { x: 0, y: 0, z: 0 } };
     const q = matrixFToQuaternion(m);
@@ -69,12 +64,7 @@ describe("matrixFToQuaternion", () => {
     const c = Math.cos(angleRad);
     const s = Math.sin(angleRad);
 
-    const elements = [
-      1, 0, 0, 0,
-      0, c, s, 0,
-      0, -s, c, 0,
-      0, 0, 0, 1,
-    ];
+    const elements = [1, 0, 0, 0, 0, c, s, 0, 0, -s, c, 0, 0, 0, 0, 1];
 
     const m: MatrixF = { elements, position: { x: 0, y: 0, z: 0 } };
     const q = matrixFToQuaternion(m);
@@ -96,12 +86,7 @@ describe("matrixFToQuaternion", () => {
     const c = Math.cos(angleRad);
     const s = Math.sin(angleRad);
 
-    const elements = [
-      c, 0, -s, 0,
-      0, 1, 0, 0,
-      s, 0, c, 0,
-      0, 0, 0, 1,
-    ];
+    const elements = [c, 0, -s, 0, 0, 1, 0, 0, s, 0, c, 0, 0, 0, 0, 1];
 
     const m: MatrixF = { elements, position: { x: 0, y: 0, z: 0 } };
     const q = matrixFToQuaternion(m);
@@ -120,7 +105,9 @@ describe("matrixFToQuaternion", () => {
   it("produces unit quaternion from valid rotation matrix", () => {
     // Arbitrary rotation: 45° around Torque (1,1,0) normalized
     const len = Math.sqrt(2);
-    const nx = 1 / len, ny = 1 / len, nz = 0;
+    const nx = 1 / len,
+      ny = 1 / len,
+      nz = 0;
     const angle = Math.PI / 4;
     const c = Math.cos(angle);
     const s = Math.sin(angle);
@@ -184,17 +171,15 @@ describe("torqueAxisAngleToQuaternion", () => {
   it("agrees with matrixFToQuaternion for same rotation", () => {
     // 60° around Torque Z-axis
     // Both functions should produce the same quaternion.
-    const ax = 0, ay = 0, az = 1, angleDeg = 60;
+    const ax = 0,
+      ay = 0,
+      az = 1,
+      angleDeg = 60;
     const angleRad = angleDeg * (Math.PI / 180);
 
     const c = Math.cos(angleRad);
     const s = Math.sin(angleRad);
-    const elements = [
-      c, s, 0, 0,
-      -s, c, 0, 0,
-      0, 0, 1, 0,
-      0, 0, 0, 1,
-    ];
+    const elements = [c, s, 0, 0, -s, c, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
     const m: MatrixF = { elements, position: { x: 0, y: 0, z: 0 } };
 
     const qFromMatrix = matrixFToQuaternion(m);

src/scene/coordinates.ts

@@ -103,7 +103,9 @@ export function torqueAxisAngleToQuaternion(
   const threeAx = ay;
   const threeAy = az;
   const threeAz = ax;
-  const len = Math.sqrt(threeAx * threeAx + threeAy * threeAy + threeAz * threeAz);
+  const len = Math.sqrt(
+    threeAx * threeAx + threeAy * threeAy + threeAz * threeAz,
+  );
   if (len < 1e-8) return new Quaternion();
   const angleRad = -angleDeg * (Math.PI / 180);
   return new Quaternion().setFromAxisAngle(

src/scene/crossValidation.spec.ts

@@ -90,12 +90,7 @@ describe("misToScene ↔ ghostToScene cross-validation", () => {
     // Build the same matrix manually: 90° around Z
     const c = Math.cos(Math.PI / 2);
     const s = Math.sin(Math.PI / 2);
-    const elements = [
-      c, s, 0, 0,
-      -s, c, 0, 0,
-      0, 0, 1, 0,
-      0, 0, 0, 1,
-    ];
+    const elements = [c, s, 0, 0, -s, c, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
 
     const ghostResult = interiorFromGhost(42, {
       interiorFile: "building.dif",
@@ -132,7 +127,9 @@ describe("misToScene ↔ ghostToScene cross-validation", () => {
 
     expect(misResult.shapeName).toBe(ghostResult.shapeName);
     expect(misResult.scale).toEqual(ghostResult.scale);
-    expect(misResult.transform.position).toEqual(ghostResult.transform.position);
+    expect(misResult.transform.position).toEqual(
+      ghostResult.transform.position,
+    );
   });
 
   it("Sky: fog and cloud data match", () => {

src/scene/ghostToScene.spec.ts

@@ -71,7 +71,12 @@ describe("skyFromGhost", () => {
       skySolidColor: { r: 0.1, g: 0.2, b: 0.3 },
       useSkyTextures: true,
       fogVolumes: [
-        { visibleDistance: 500, minHeight: 0, maxHeight: 300, color: { r: 0.5, g: 0.5, b: 0.5 } },
+        {
+          visibleDistance: 500,
+          minHeight: 0,
+          maxHeight: 300,
+          color: { r: 0.5, g: 0.5, b: 0.5 },
+        },
       ],
       cloudLayers: [
         { texture: "cloud1.png", heightPercent: 0.35, speed: 0.001 },

src/scene/ghostToScene.ts

@@ -12,6 +12,9 @@ import type {
   Color3,
   Color4,
 } from "./types";
+import { createLogger } from "../logger";
+
+const log = createLogger("ghostToScene");
 
 type GhostData = Record<string, unknown>;
 
@@ -43,26 +46,39 @@ function matrixF(v: unknown): MatrixF {
     return v as MatrixF;
   }
   // readAffineTransform() returns {position, rotation} — convert to MatrixF.
-  if (
-    v &&
-    typeof v === "object" &&
-    "position" in v &&
-    "rotation" in v
-  ) {
+  if (v && typeof v === "object" && "position" in v && "rotation" in v) {
     const { position: pos, rotation: q } = v as {
       position: { x: number; y: number; z: number };
       rotation: { x: number; y: number; z: number; w: number };
     };
     // Quaternion to column-major 4×4 matrix (idx = row + col*4).
-    const xx = q.x * q.x, yy = q.y * q.y, zz = q.z * q.z;
-    const xy = q.x * q.y, xz = q.x * q.z, yz = q.y * q.z;
-    const wx = q.w * q.x, wy = q.w * q.y, wz = q.w * q.z;
+    const xx = q.x * q.x,
+      yy = q.y * q.y,
+      zz = q.z * q.z;
+    const xy = q.x * q.y,
+      xz = q.x * q.z,
+      yz = q.y * q.z;
+    const wx = q.w * q.x,
+      wy = q.w * q.y,
+      wz = q.w * q.z;
     return {
       elements: [
-        1 - 2 * (yy + zz), 2 * (xy + wz),     2 * (xz - wy),     0,
-        2 * (xy - wz),      1 - 2 * (xx + zz), 2 * (yz + wx),     0,
-        2 * (xz + wy),      2 * (yz - wx),     1 - 2 * (xx + yy), 0,
-        pos.x,              pos.y,              pos.z,              1,
+        1 - 2 * (yy + zz),
+        2 * (xy + wz),
+        2 * (xz - wy),
+        0,
+        2 * (xy - wz),
+        1 - 2 * (xx + zz),
+        2 * (yz + wx),
+        0,
+        2 * (xz + wy),
+        2 * (yz - wx),
+        1 - 2 * (xx + yy),
+        0,
+        pos.x,
+        pos.y,
+        pos.z,
+        1,
       ],
       position: { x: pos.x, y: pos.y, z: pos.z },
     };
@@ -118,12 +134,14 @@ export function tsStaticFromGhost(
 
 export function skyFromGhost(ghostIndex: number, data: GhostData): SceneSky {
   const fogVolumes = Array.isArray(data.fogVolumes)
-    ? (data.fogVolumes as Array<{
-        visibleDistance?: number;
-        minHeight?: number;
-        maxHeight?: number;
-        color?: Color3;
-      }>).map((v) => ({
+    ? (
+        data.fogVolumes as Array<{
+          visibleDistance?: number;
+          minHeight?: number;
+          maxHeight?: number;
+          color?: Color3;
+        }>
+      ).map((v) => ({
         visibleDistance: v.visibleDistance ?? 0,
         minHeight: v.minHeight ?? 0,
         maxHeight: v.maxHeight ?? 0,
@@ -132,11 +150,13 @@ export function skyFromGhost(ghostIndex: number, data: GhostData): SceneSky {
     : [];
 
   const cloudLayers = Array.isArray(data.cloudLayers)
-    ? (data.cloudLayers as Array<{
-        texture?: string;
-        heightPercent?: number;
-        speed?: number;
-      }>).map((c) => ({
+    ? (
+        data.cloudLayers as Array<{
+          texture?: string;
+          heightPercent?: number;
+          speed?: number;
+        }>
+      ).map((c) => ({
         texture: c.texture ?? "",
         heightPercent: c.heightPercent ?? 0,
         speed: c.speed ?? 0,
@@ -210,17 +230,41 @@ export function ghostToSceneObject(
   ghostIndex: number,
   data: GhostData,
 ): SceneObject | null {
+  let result: SceneObject | null;
   switch (className) {
     case "TerrainBlock":
-      return terrainFromGhost(ghostIndex, data);
+      result = terrainFromGhost(ghostIndex, data);
+      log.debug("TerrainBlock #%d: terrFileName=%s", ghostIndex, (result as SceneTerrainBlock).terrFileName);
+      return result;
     case "InteriorInstance":
-      return interiorFromGhost(ghostIndex, data);
+      result = interiorFromGhost(ghostIndex, data);
+      log.debug("InteriorInstance #%d: interiorFile=%s", ghostIndex, (result as SceneInteriorInstance).interiorFile);
+      return result;
     case "TSStatic":
       return tsStaticFromGhost(ghostIndex, data);
-    case "Sky":
-      return skyFromGhost(ghostIndex, data);
-    case "Sun":
-      return sunFromGhost(ghostIndex, data);
+    case "Sky": {
+      result = skyFromGhost(ghostIndex, data);
+      const sky = result as SceneSky;
+      log.debug(
+        "Sky #%d: materialList=%s fogColor=(%s, %s, %s) visibleDist=%d fogDist=%d useSkyTextures=%s",
+        ghostIndex, sky.materialList,
+        sky.fogColor.r.toFixed(3), sky.fogColor.g.toFixed(3), sky.fogColor.b.toFixed(3),
+        sky.visibleDistance, sky.fogDistance, sky.useSkyTextures,
+      );
+      return result;
+    }
+    case "Sun": {
+      result = sunFromGhost(ghostIndex, data);
+      const sun = result as SceneSun;
+      log.debug(
+        "Sun #%d: dir=(%s, %s, %s) color=(%s, %s, %s) ambient=(%s, %s, %s)",
+        ghostIndex,
+        sun.direction.x.toFixed(3), sun.direction.y.toFixed(3), sun.direction.z.toFixed(3),
+        sun.color.r.toFixed(3), sun.color.g.toFixed(3), sun.color.b.toFixed(3),
+        sun.ambient.r.toFixed(3), sun.ambient.g.toFixed(3), sun.ambient.b.toFixed(3),
+      );
+      return result;
+    }
     case "MissionArea":
       return missionAreaFromGhost(ghostIndex, data);
     case "WaterBlock":

src/scene/misToScene.spec.ts

@@ -162,8 +162,8 @@ describe("skyFromMis", () => {
       cloudText1: "cloud1.png",
       cloudText2: "cloud2.png",
       cloudText3: "",
-      "cloudheightper0": "0.35",
-      "cloudheightper1": "0.25",
+      cloudheightper0: "0.35",
+      cloudheightper1: "0.25",
       cloudSpeed1: "0.001",
     });
     const result = skyFromMis(obj);

src/scene/misToScene.ts

@@ -41,7 +41,10 @@ function propInt(obj: TorqueObject, name: string): number | undefined {
   return Number.isFinite(n) ? n : undefined;
 }
 
-function parseVec3(s: string | undefined, fallback: Vec3 = { x: 0, y: 0, z: 0 }): Vec3 {
+function parseVec3(
+  s: string | undefined,
+  fallback: Vec3 = { x: 0, y: 0, z: 0 },
+): Vec3 {
   if (!s) return fallback;
   const parts = s.split(" ").map(Number);
   return {
@@ -51,7 +54,10 @@ function parseVec3(s: string | undefined, fallback: Vec3 = { x: 0, y: 0, z: 0 })
   };
 }
 
-function parseColor3(s: string | undefined, fallback: Color3 = { r: 0, g: 0, b: 0 }): Color3 {
+function parseColor3(
+  s: string | undefined,
+  fallback: Color3 = { r: 0, g: 0, b: 0 },
+): Color3 {
   if (!s) return fallback;
   const parts = s.split(" ").map(Number);
   return {
@@ -93,7 +99,9 @@ function buildMatrixF(
 
   // Normalize axis
   const len = Math.sqrt(ax * ax + ay * ay + az * az);
-  let nx = 0, ny = 0, nz = 1;
+  let nx = 0,
+    ny = 0,
+    nz = 1;
   if (len > 1e-8) {
     nx = ax / len;
     ny = ay / len;
@@ -191,8 +199,12 @@ export function skyFromMis(obj: TorqueObject): SceneSky {
   const cloudLayers: SceneSkyCloudLayer[] = [];
   for (let i = 0; i < 3; i++) {
     const texture = prop(obj, `cloudText${i + 1}`) ?? "";
-    const heightPercent = propFloat(obj, `cloudHeightPer[${i}]`) ?? propFloat(obj, `cloudheightper${i}`) ?? [0.35, 0.25, 0.2][i];
-    const speed = propFloat(obj, `cloudSpeed${i + 1}`) ?? [0.0001, 0.0002, 0.0003][i];
+    const heightPercent =
+      propFloat(obj, `cloudHeightPer[${i}]`) ??
+      propFloat(obj, `cloudheightper${i}`) ??
+      [0.35, 0.25, 0.2][i];
+    const speed =
+      propFloat(obj, `cloudSpeed${i + 1}`) ?? [0.0001, 0.0002, 0.0003][i];
     cloudLayers.push({ texture, heightPercent, speed });
   }
 

src/state/engineStore.ts

@@ -42,7 +42,10 @@ export interface EngineStoreState {
   playback: PlaybackSliceState;
   setRuntime(runtime: TorqueRuntime): void;
   clearRuntime(): void;
-  applyRuntimeBatch(events: RuntimeMutationEvent[], tickInfo?: RuntimeTickInfo): void;
+  applyRuntimeBatch(
+    events: RuntimeMutationEvent[],
+    tickInfo?: RuntimeTickInfo,
+  ): void;
   setRecording(recording: StreamRecording | null): void;
   setPlaybackTime(ms: number): void;
   setPlaybackStatus(status: PlaybackStatus): void;
@@ -65,7 +68,9 @@ function clamp(value: number, min: number, max: number): number {
   return value;
 }
 
-function buildRuntimeIndexes(runtime: TorqueRuntime): Pick<
+function buildRuntimeIndexes(
+  runtime: TorqueRuntime,
+): Pick<
   RuntimeSliceState,
   | "objectVersionById"
   | "globalVersionByName"
@@ -165,7 +170,10 @@ export const engineStore = createStore<EngineStoreState>()(
       }));
     },
 
-    applyRuntimeBatch(events: RuntimeMutationEvent[], tickInfo?: RuntimeTickInfo) {
+    applyRuntimeBatch(
+      events: RuntimeMutationEvent[],
+      tickInfo?: RuntimeTickInfo,
+    ) {
       if (events.length === 0) {
         return;
       }
@@ -249,11 +257,14 @@ export const engineStore = createStore<EngineStoreState>()(
         ...state,
         playback: {
           recording,
-          status: "stopped",
-          timeMs: 0,
-          rate: 1,
+          status: recording ? "stopped" : state.playback.status,
+          timeMs: recording ? 0 : state.playback.timeMs,
+          rate: recording ? 1 : state.playback.rate,
           durationMs,
-          streamSnapshot: null,
+          // Preserve the last snapshot so HUD/chat persist after unload.
+          streamSnapshot: recording
+            ? null
+            : state.playback.streamSnapshot,
         },
       }));
     },
@@ -301,7 +312,6 @@ export const engineStore = createStore<EngineStoreState>()(
         },
       }));
     },
-
   })),
 );
 
@@ -475,4 +485,3 @@ export function useRuntimeChildIds(
 
   return parent._children.map((child) => child._id);
 }
-

src/state/gameEntityStore.ts

@@ -1,6 +1,9 @@
 import { createStore } from "zustand/vanilla";
 import { useStoreWithEqualityFn } from "zustand/traditional";
 import type { GameEntity, RenderType } from "./gameEntityTypes";
+import { normalizedMissionTypes } from "../mission";
+
+export type DataSource = "map" | "demo" | "live";
 
 export interface GameEntityState {
   /**
@@ -16,6 +19,24 @@ export interface GameEntityState {
   streamEntities: Map<string, GameEntity>;
   /** True when a demo/live source is actively driving entity state. */
   isStreaming: boolean;
+  /** Which data source is currently populating entities, or null if empty. */
+  dataSource: DataSource | null;
+  /** Mission slug (e.g. "ScarabRae") — the $MissionName / $CurrentMission value. */
+  missionName: string | null;
+  /** Mission type short code (e.g. "CTF"), as used in .mis MissionTypes. */
+  missionType: string | null;
+  /** Mission type display name (e.g. "Capture the Flag"), from MsgMissionDropInfo. */
+  missionTypeDisplayName: string | null;
+  /** Mission display name (e.g. "Scarabrae"), from MsgMissionDropInfo. */
+  missionDisplayName: string | null;
+  /** Game class name (e.g. "CTFGame"), from MsgClientReady. */
+  gameClassName: string | null;
+  /** Server display name. */
+  serverDisplayName: string | null;
+  /** Name of the player who recorded the demo / connected to the server. */
+  recorderName: string | null;
+  /** Recording date string from readplayerinfo (e.g. "May-4-2025 10:37PM"). */
+  recordingDate: string | null;
   /** Monotonically increasing version counter, bumped on any mutation. */
   version: number;
 
@@ -26,9 +47,21 @@ export interface GameEntityState {
   setAllEntities(entities: GameEntity[]): void;
   clearEntities(): void;
 
+  /** Update mission info fields. Pass null to clear a field, omit to leave unchanged. */
+  setMissionInfo(info: {
+    missionName?: string | null;
+    missionType?: string | null;
+    missionTypeDisplayName?: string | null;
+    missionDisplayName?: string | null;
+    gameClassName?: string | null;
+    serverDisplayName?: string | null;
+    recorderName?: string | null;
+    recordingDate?: string | null;
+  }): void;
+
   // ── Stream entity mutations ──
   /** Begin streaming mode. Stream entities will be rendered instead of mission entities. */
-  beginStreaming(): void;
+  beginStreaming(source: "demo" | "live"): void;
   /** End streaming mode and clear stream entities. Mission entities become active again. */
   endStreaming(): void;
   setStreamEntity(entity: GameEntity): void;
@@ -42,6 +75,15 @@ export const gameEntityStore = createStore<GameEntityState>()((set) => ({
   missionEntities: new Map(),
   streamEntities: new Map(),
   isStreaming: false,
+  dataSource: null,
+  missionName: null,
+  missionType: null,
+  missionTypeDisplayName: null,
+  missionDisplayName: null,
+  gameClassName: null,
+  serverDisplayName: null,
+  recorderName: null,
+  recordingDate: null,
   version: 0,
 
   // ── Mission entity mutations ──
@@ -74,35 +116,112 @@ export const gameEntityStore = createStore<GameEntityState>()((set) => ({
   },
 
   setAllEntities(entities: GameEntity[]) {
-    set(() => {
+    set((state) => {
       const next = new Map<string, GameEntity>();
       for (const entity of entities) {
         next.set(entity.id, entity);
       }
-      return { missionEntities: next };
+      return {
+        missionEntities: next,
+        dataSource: state.isStreaming ? state.dataSource : "map",
+      };
     });
   },
 
   clearEntities() {
     set((state) => {
       if (state.missionEntities.size === 0) return state;
-      return { missionEntities: new Map(), version: state.version + 1 };
+      // When streaming is active, only clear mission entities — don't
+      // touch dataSource or metadata, those belong to the stream.
+      if (state.isStreaming) {
+        return {
+          missionEntities: new Map(),
+          version: state.version + 1,
+        };
+      }
+      return {
+        missionEntities: new Map(),
+        dataSource: null,
+        missionName: null,
+        missionType: null,
+        missionTypeDisplayName: null,
+        missionDisplayName: null,
+        gameClassName: null,
+        serverDisplayName: null,
+        recorderName: null,
+        recordingDate: null,
+        version: state.version + 1,
+      };
     });
   },
 
+  setMissionInfo(info) {
+    const updates: Partial<GameEntityState> = {};
+    if (info.missionName !== undefined) updates.missionName = info.missionName;
+    if (info.missionType !== undefined) updates.missionType = info.missionType;
+    if (info.missionTypeDisplayName !== undefined)
+      updates.missionTypeDisplayName = info.missionTypeDisplayName;
+    if (info.missionDisplayName !== undefined)
+      updates.missionDisplayName = info.missionDisplayName;
+    if (info.gameClassName !== undefined) {
+      updates.gameClassName = info.gameClassName;
+      // Derive missionType from gameClassName (e.g. "CTFGame" → "CTF")
+      // unless missionType was explicitly provided.
+      if (info.missionType === undefined) {
+        if (info.gameClassName) {
+          const raw = info.gameClassName.replace(/Game$/i, "");
+          updates.missionType =
+            normalizedMissionTypes[raw.toLowerCase()] ?? raw;
+        } else {
+          updates.missionType = null;
+        }
+      }
+    }
+    if (info.serverDisplayName !== undefined)
+      updates.serverDisplayName = info.serverDisplayName;
+    if (info.recorderName !== undefined)
+      updates.recorderName = info.recorderName;
+    if (info.recordingDate !== undefined)
+      updates.recordingDate = info.recordingDate;
+    set((state) => ({ ...updates, version: state.version + 1 }));
+  },
+
   // ── Stream entity mutations ──
 
-  beginStreaming() {
-    set((state) => {
-      if (state.isStreaming) return state;
-      return { isStreaming: true, streamEntities: new Map(), version: state.version + 1 };
-    });
+  beginStreaming(source: "demo" | "live") {
+    set((state) => ({
+      isStreaming: true,
+      dataSource: source,
+      streamEntities: new Map(),
+      missionName: null,
+      missionType: null,
+      missionTypeDisplayName: null,
+      missionDisplayName: null,
+      gameClassName: null,
+      serverDisplayName: null,
+      recorderName: null,
+      recordingDate: null,
+      version: state.version + 1,
+    }));
   },
 
   endStreaming() {
     set((state) => {
       if (!state.isStreaming) return state;
-      return { isStreaming: false, streamEntities: new Map(), version: state.version + 1 };
+      return {
+        isStreaming: false,
+        dataSource: state.missionEntities.size > 0 ? "map" : null,
+        missionName: null,
+        missionType: null,
+        missionTypeDisplayName: null,
+        missionDisplayName: null,
+        gameClassName: null,
+        serverDisplayName: null,
+        recorderName: null,
+        recordingDate: null,
+        streamEntities: new Map(),
+        version: state.version + 1,
+      };
     });
   },
 
@@ -135,17 +254,17 @@ export const gameEntityStore = createStore<GameEntityState>()((set) => ({
 
   setAllStreamEntities(entities: GameEntity[]) {
     set((state) => {
-      const prev = state.streamEntities;
       const next = new Map<string, GameEntity>();
       for (const entity of entities) {
         next.set(entity.id, entity);
       }
-      // Only update (and bump version) when the entity set changed
-      // (adds/removes). Render-field-only updates (threads, colors, etc.)
-      // are applied via mutateStreamEntities below instead. This prevents
-      // frequent Zustand set() calls from starving React Suspense.
-      if (next.size === prev.size && [...next.keys()].every((id) => prev.has(id))) {
-        return state; // same set — no store update at all
+      // Skip store update if the entity key set is unchanged.
+      const prev = state.streamEntities;
+      if (
+        next.size === prev.size &&
+        [...next.keys()].every((id) => prev.has(id))
+      ) {
+        return state;
       }
       return { streamEntities: next, version: state.version + 1 };
     });
@@ -221,7 +340,9 @@ export function useAllGameEntities(): GameEntity[] {
 }
 
 /** Hook returning entities filtered by render type. */
-export function useGameEntitiesByRenderType(renderType: RenderType): GameEntity[] {
+export function useGameEntitiesByRenderType(
+  renderType: RenderType,
+): GameEntity[] {
   const entities = useGameEntitiesInternal();
   const result: GameEntity[] = [];
   for (const entity of entities.values()) {
@@ -248,18 +369,16 @@ export function useGameEntity(id: string): GameEntity | undefined {
 
 // ── Scene infrastructure queries ──
 
-import type {
-  SceneSky,
-  SceneSun,
-  SceneMissionArea,
-} from "../scene/types";
+import type { SceneSky, SceneSun, SceneMissionArea } from "../scene/types";
 
 // Scene infrastructure selectors use Object.is equality (default) on the
 // extracted data object — these are set once and referentially stable, so
 // the hooks won't re-render when unrelated (dynamic) entities update.
 
 function selectSkyData(state: GameEntityState): SceneSky | null {
-  const entities = state.isStreaming ? state.streamEntities : state.missionEntities;
+  const entities = state.isStreaming
+    ? state.streamEntities
+    : state.missionEntities;
   for (const e of entities.values()) {
     if (e.renderType === "Sky") return e.skyData;
   }
@@ -267,15 +386,21 @@ function selectSkyData(state: GameEntityState): SceneSky | null {
 }
 
 function selectSunData(state: GameEntityState): SceneSun | null {
-  const entities = state.isStreaming ? state.streamEntities : state.missionEntities;
+  const entities = state.isStreaming
+    ? state.streamEntities
+    : state.missionEntities;
   for (const e of entities.values()) {
     if (e.renderType === "Sun") return e.sunData;
   }
   return null;
 }
 
-function selectMissionAreaData(state: GameEntityState): SceneMissionArea | null {
-  const entities = state.isStreaming ? state.streamEntities : state.missionEntities;
+function selectMissionAreaData(
+  state: GameEntityState,
+): SceneMissionArea | null {
+  const entities = state.isStreaming
+    ? state.streamEntities
+    : state.missionEntities;
   for (const e of entities.values()) {
     if (e.renderType === "MissionArea") return e.missionAreaData;
   }
@@ -296,3 +421,75 @@ export function useSceneSun(): SceneSun | null {
 export function useSceneMissionArea(): SceneMissionArea | null {
   return useStoreWithEqualityFn(gameEntityStore, selectMissionAreaData);
 }
+
+/** Hook returning which data source is currently populating entities. */
+export function useDataSource(): DataSource | null {
+  return useStoreWithEqualityFn(
+    gameEntityStore,
+    (state) => state.dataSource,
+  );
+}
+
+/** Hook returning the current mission name. */
+export function useMissionName(): string | null {
+  return useStoreWithEqualityFn(
+    gameEntityStore,
+    (state) => state.missionName,
+  );
+}
+
+/** Hook returning the mission type short code (e.g. "CTF"). */
+export function useMissionType(): string | null {
+  return useStoreWithEqualityFn(
+    gameEntityStore,
+    (state) => state.missionType,
+  );
+}
+
+/** Hook returning the mission type display name (e.g. "Capture the Flag"). */
+export function useMissionTypeDisplayName(): string | null {
+  return useStoreWithEqualityFn(
+    gameEntityStore,
+    (state) => state.missionTypeDisplayName,
+  );
+}
+
+/** Hook returning the mission display name (e.g. "Scarabrae"). */
+export function useMissionDisplayName(): string | null {
+  return useStoreWithEqualityFn(
+    gameEntityStore,
+    (state) => state.missionDisplayName,
+  );
+}
+
+/** Hook returning the game class name (e.g. "CTFGame"). */
+export function useGameClassName(): string | null {
+  return useStoreWithEqualityFn(
+    gameEntityStore,
+    (state) => state.gameClassName,
+  );
+}
+
+/** Hook returning the server display name. */
+export function useServerDisplayName(): string | null {
+  return useStoreWithEqualityFn(
+    gameEntityStore,
+    (state) => state.serverDisplayName,
+  );
+}
+
+/** Hook returning the name of the player who recorded the demo / connected. */
+export function useRecorderName(): string | null {
+  return useStoreWithEqualityFn(
+    gameEntityStore,
+    (state) => state.recorderName,
+  );
+}
+
+/** Hook returning the demo recording date string. */
+export function useRecordingDate(): string | null {
+  return useStoreWithEqualityFn(
+    gameEntityStore,
+    (state) => state.recordingDate,
+  );
+}