From b1c539b560bf07647cdea3486ff5a929108e9231 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 01:18:53 +0000
Subject: [PATCH 01/18] feat: redesign Mission page with immersive war room
 aesthetic

Replace the Flex/Surface two-column layout with a full-viewport
conference room design featuring three composited screen panels:
- Left: MatrixBackground tenant signal display
- Center: checkpoint interaction with progress pips, styled choices
- Right: mission briefing with timer widget and abandon controls

Background uses room-bg.jpg with darkened filter, vignette overlay,
and desk foreground gradient. All screens have scan-line overlays
and CRT-inspired styling. Replaced RadioGroup/Radio with custom
styled choice divs. Added .jpg module declaration to types.d.ts.

https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
---
 ui/app/pages/Mission.tsx | 913 ++++++++++++++++++++++++++-------------
 ui/assets/room-bg.jpg    |   0
 ui/types.d.ts            |   5 +
 3 files changed, 619 insertions(+), 299 deletions(-)
 create mode 100644 ui/assets/room-bg.jpg

diff --git a/ui/app/pages/Mission.tsx b/ui/app/pages/Mission.tsx
index d12d3fa..fc263e3 100644
--- a/ui/app/pages/Mission.tsx
+++ b/ui/app/pages/Mission.tsx
@@ -1,22 +1,8 @@
 import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { Flex } from "@dynatrace/strato-components/layouts";
-import { Surface } from "@dynatrace/strato-components/layouts";
-import {
-  Heading,
-  Paragraph,
-  Strong,
-  Text,
-} from "@dynatrace/strato-components/typography";
-import { Button } from "@dynatrace/strato-components/buttons";
-import { Chip } from "@dynatrace/strato-components-preview/content";
-import {
-  RadioGroup,
-  Radio,
-} from "@dynatrace/strato-components-preview/forms";
-import { SuccessIcon } from "@dynatrace/strato-icons";
 import { getMissionById } from "../data/missions";
 import { MatrixBackground } from "../components/MatrixBackground";
+import roomBg from "../assets/room-bg.jpg";
 
 type CheckpointStatus = "locked" | "active" | "completed";
 
@@ -24,21 +10,76 @@ const TIME_BONUS_PER_SECOND = 0.5;
 const HINT_PENALTY = 50;
 const WRONG_ANSWER_PENALTY = 100;
 
+const CHOICE_KEYS = ["A", "B", "C", "D", "E", "F", "G", "H"];
+
 function formatTime(totalSeconds: number): string {
   const minutes = Math.floor(totalSeconds / 60);
   const seconds = totalSeconds % 60;
   return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
 }
 
+/** Renders checkpoint instruction text, styling backtick-wrapped DQL as inline code */
+function renderInstruction(text: string): React.ReactNode {
+  const parts = text.split(/(`[^`]+`)/g);
+  return parts.map((part, i) => {
+    if (part.startsWith("`") && part.endsWith("`")) {
+      return (
+        <code
+          key={i}
+          style={{
+            color: "#1dbb7e",
+            fontFamily: "monospace",
+            background: "rgba(29,187,126,0.08)",
+            padding: "1px 4px",
+            borderRadius: 3,
+          }}
+        >
+          {part.slice(1, -1)}
+        </code>
+      );
+    }
+    return <span key={i}>{part}</span>;
+  });
+}
+
+const DIFFICULTY_COLORS: Record<string, string> = {
+  rookie: "rgba(29,187,126,0.7)",
+  operator: "rgba(255,191,0,0.7)",
+  elite: "rgba(231,76,60,0.7)",
+  legend: "rgba(231,76,60,0.7)",
+};
+
+const DIFFICULTY_BG: Record<string, string> = {
+  rookie: "rgba(29,187,126,0.1)",
+  operator: "rgba(255,191,0,0.1)",
+  elite: "rgba(231,76,60,0.1)",
+  legend: "rgba(231,76,60,0.1)",
+};
+
+const scanLineStyle: React.CSSProperties = {
+  position: "absolute",
+  inset: 0,
+  background:
+    "repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px)",
+  pointerEvents: "none",
+  zIndex: 10,
+};
+
+const screenBase: React.CSSProperties = {
+  borderRadius: 5,
+  border: "1px solid rgba(255,255,255,0.07)",
+  overflow: "hidden",
+  position: "relative",
+  background: "rgba(4,6,14,0.88)",
+};
+
 export const Mission = () => {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const mission = id ? getMissionById(id) : undefined;
 
   const [currentCheckpoint, setCurrentCheckpoint] = useState(0);
-  const [completedCheckpoints, setCompletedCheckpoints] = useState<number[]>(
-    []
-  );
+  const [completedCheckpoints, setCompletedCheckpoints] = useState<number[]>([]);
   const [timerSeconds, setTimerSeconds] = useState<number | null>(null);
   const [isValidating, setIsValidating] = useState(false);
   const [selectedAnswer, setSelectedAnswer] = useState("");
@@ -50,6 +91,20 @@ export const Mission = () => {
   const [abandonConfirm, setAbandonConfirm] = useState(false);
   const hasTimedOutRef = useRef(false);
 
+  // Inject keyframes
+  useEffect(() => {
+    const styleId = "mission-war-room-keyframes";
+    if (document.getElementById(styleId)) return;
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = `@keyframes missionLiveDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }`;
+    document.head.appendChild(style);
+    return () => {
+      const el = document.getElementById(styleId);
+      if (el) el.remove();
+    };
+  }, []);
+
   // Initialize timer when mission loads
   useEffect(() => {
     if (mission) {
@@ -202,313 +257,573 @@ export const Mission = () => {
     });
   }, [mission, timerSeconds, baseScore, hintsUsed, navigate]);
 
-  // Mission not found
+  // ── Room wrapper (shared by all states) ──
+  const roomWrapper = (children: React.ReactNode) => (
+    <div style={{ position: "relative", minHeight: "100vh", overflow: "hidden", background: "#060810" }}>
+      {/* Room photo */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          backgroundImage: `url(${roomBg})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center 15%",
+          filter: "brightness(0.38) saturate(0.75)",
+          zIndex: 0,
+        }}
+      />
+      {/* Vignette overlay */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background:
+            "radial-gradient(ellipse at 50% 120%, rgba(8,4,2,0.9) 0%, transparent 55%), linear-gradient(to bottom, rgba(4,6,14,0.25) 0%, transparent 30%, transparent 55%, rgba(4,6,14,0.7) 100%)",
+          zIndex: 1,
+          pointerEvents: "none",
+        }}
+      />
+      {/* Desk foreground */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: 50,
+          background:
+            "linear-gradient(to top, rgba(10,5,2,0.96) 0%, rgba(10,5,2,0.55) 60%, transparent 100%)",
+          zIndex: 3,
+        }}
+      />
+      {/* UI layer */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          zIndex: 2,
+          display: "flex",
+          flexDirection: "column",
+          padding: "16px 18px 12px",
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+
+  // ── Mission not found ──
   if (!mission) {
-    return (
-      <Flex flexDirection="column" gap={32} padding={32} alignItems="center">
-        <Surface>
-          <Flex flexDirection="column" padding={48} gap={16} alignItems="center">
-            <Heading level={2}>Mission Not Found</Heading>
-            <Paragraph>
-              The requested mission does not exist or has been decommissioned.
-            </Paragraph>
-            <Button variant="emphasized" onClick={() => navigate("/missions")}>
-              Back to Missions
-            </Button>
-          </Flex>
-        </Surface>
-      </Flex>
+    return roomWrapper(
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 16,
+        }}
+      >
+        <div style={{ fontSize: 14, fontWeight: 600, color: "#d8e4f0" }}>Mission Not Found</div>
+        <div style={{ fontSize: 11, color: "rgba(150,170,200,0.5)" }}>
+          The requested mission does not exist or has been decommissioned.
+        </div>
+        <button
+          onClick={() => navigate("/missions")}
+          style={{
+            fontSize: 10,
+            padding: "5px 14px",
+            borderRadius: 3,
+            background: "rgba(20,150,255,0.1)",
+            border: "1px solid rgba(20,150,255,0.28)",
+            color: "#1496ff",
+            letterSpacing: "0.1em",
+            textTransform: "uppercase",
+            cursor: "pointer",
+          }}
+        >
+          Back to Missions
+        </button>
+      </div>
     );
   }
 
   const displaySeconds = timerSeconds ?? mission.timerSeconds;
   const timerIsLow = displaySeconds < 60;
-
-  return (
-    <div style={{ position: "relative", minHeight: "100vh" }}>
-      <MatrixBackground colorTier={colorTier} />
-    <Flex gap={24} padding={24} style={{ alignItems: "flex-start", position: "relative", zIndex: 1 }}>
-      {/* Left column — Briefing panel */}
-      <Flex
-        flexDirection="column"
-        gap={8}
-        style={{ flex: "0 0 40%", minWidth: 300 }}
+  const checkpoint = mission.checkpoints[currentCheckpoint];
+  const cpStatus = getCheckpointStatus(currentCheckpoint);
+  const isMultipleChoice = checkpoint?.type === "multiple-choice";
+  const hintAvailable = checkpoint ? checkpoint.hint.length > 0 : false;
+  const hintRevealed = checkpoint ? hintsRevealed.includes(checkpoint.id) : false;
+
+  return roomWrapper(
+    <>
+      {/* ── Status bar ── */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 10,
+          marginBottom: 10,
+          fontSize: 10,
+          letterSpacing: "0.12em",
+          textTransform: "uppercase",
+          color: "rgba(180,200,220,0.4)",
+        }}
       >
-        <Heading level={3}>Mission</Heading>
-        <Surface>
-          <Flex flexDirection="column" padding={20} gap={12}>
-            {/* Title + codename */}
-            <Text textStyle="small">
-              <span style={{ fontFamily: "monospace", opacity: 0.6 }}>
-                {mission.codename}
-              </span>
-            </Text>
-            <Heading level={2}>{mission.title}</Heading>
-
-            {/* Role + difficulty badges */}
-            <Flex gap={8}>
-              <Chip color="neutral">{mission.role}</Chip>
-              <Chip
-                color={
-                  mission.difficulty === "rookie"
-                    ? "success"
-                    : mission.difficulty === "operator"
-                      ? "warning"
-                      : "critical"
-                }
-                variant="emphasized"
-              >
-                {mission.difficulty.toUpperCase()}
-              </Chip>
-            </Flex>
-
-            {/* Briefing */}
-            <Paragraph>{mission.briefing}</Paragraph>
-
-            {/* Timer */}
-            <Surface>
-              <Flex flexDirection="column" alignItems="center" padding={16} gap={4}>
-                <Text textStyle="small">Time Remaining</Text>
-                <Heading level={1}>
-                  <span
-                    style={{
-                      fontFamily: "monospace",
-                      color: timerIsLow ? "var(--dt-colors-text-critical-default, #e74c3c)" : undefined,
-                    }}
-                  >
-                    {formatTime(displaySeconds)}
-                  </span>
-                </Heading>
-              </Flex>
-            </Surface>
-
-            {/* Hint cost notice */}
-            <Text textStyle="small" style={{ opacity: 0.6 }}>
-              Intel requested: -{HINT_PENALTY} pts per hint used
-            </Text>
-
-          </Flex>
-        </Surface>
-
-        {/* Abandon Mission */}
-        <div style={{ display: "flex", justifyContent: "center", marginTop: "16px" }}>
-          {!abandonConfirm ? (
-            <button
-              onClick={() => setAbandonConfirm(true)}
+        {/* Pulsing red dot */}
+        <div
+          style={{
+            width: 6,
+            height: 6,
+            borderRadius: "50%",
+            background: "#e74c3c",
+            animation: "missionLiveDot 2s infinite",
+          }}
+        />
+        <span>Mission Control</span>
+        {/* Separator */}
+        <div style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.06)" }} />
+        <span style={{ color: "rgba(20,150,255,0.65)" }}>
+          {mission.codename} / {mission.title}
+        </span>
+        <div style={{ flex: 0, width: 1, height: 8, background: "rgba(255,255,255,0.06)" }} />
+        <span style={{ color: "rgba(29,187,126,0.6)" }}>Operator Active</span>
+        <div style={{ flex: 0, width: 1, height: 8, background: "rgba(255,255,255,0.06)" }} />
+        <span>Playground Env</span>
+      </div>
+
+      {/* ── Screen wall ── */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "1fr 1.75fr 1fr",
+          gap: 8,
+          flex: 1,
+          minHeight: 0,
+        }}
+      >
+        {/* ═══ LEFT screen — Tenant Signal / MatrixBackground ═══ */}
+        <div style={{ ...screenBase, display: "flex", flexDirection: "column" }}>
+          <div style={scanLineStyle} />
+          {/* Header strip */}
+          <div
+            style={{
+              padding: "6px 10px",
+              borderBottom: "1px solid rgba(0,200,50,0.1)",
+              background: "rgba(0,200,50,0.04)",
+              fontSize: 9,
+              letterSpacing: "0.12em",
+              textTransform: "uppercase",
+              color: "rgba(0,200,50,0.4)",
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              flexShrink: 0,
+            }}
+          >
+            <div style={{ width: 5, height: 5, borderRadius: "50%", background: "rgba(0,200,50,0.6)" }} />
+            Tenant Signal
+          </div>
+          {/* Matrix canvas wrapper */}
+          <div style={{ flex: 1, position: "relative" }}>
+            <MatrixBackground colorTier={colorTier} />
+          </div>
+        </div>
+
+        {/* ═══ CENTER screen — Checkpoint ═══ */}
+        <div style={{ ...screenBase, display: "flex", flexDirection: "column" }}>
+          <div style={scanLineStyle} />
+          {/* Top bar */}
+          <div
+            style={{
+              padding: "7px 14px",
+              borderBottom: "1px solid rgba(20,150,255,0.1)",
+              background: "rgba(20,150,255,0.05)",
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              flexShrink: 0,
+            }}
+          >
+            <span
               style={{
-                background: "transparent",
-                border: "none",
-                color: "var(--dt-colors-text-neutral-default)",
-                fontSize: "20px",
-                fontWeight: "600",
-                cursor: "pointer",
-                letterSpacing: "0.3px",
-                padding: "0",
+                color: "rgba(20,150,255,0.6)",
+                fontSize: 9,
+                textTransform: "uppercase",
+                letterSpacing: "0.13em",
               }}
             >
-              Abandon Mission
-            </button>
-          ) : (
-            <div
+              {mission.title} — CP {currentCheckpoint + 1} of {mission.checkpoints.length}
+            </span>
+            <div style={{ flex: 1 }} />
+            <span
               style={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                gap: "10px",
-                color: "var(--dt-colors-text-neutral-default)",
-                fontSize: "13px",
-                marginTop: "32px",
+                color: timerIsLow ? "#e74c3c" : "#1496ff",
+                fontSize: 13,
+                fontWeight: 700,
+                fontFamily: "monospace",
               }}
             >
-              <span>This will end your mission.</span>
-              <div style={{ display: "flex", gap: "24px" }}>
-                <button
-                  onClick={() => navigate("/missions")}
+              {formatTime(displaySeconds)}
+            </span>
+          </div>
+
+          {/* Checkpoint body */}
+          <div
+            style={{
+              flex: 1,
+              padding: "14px 16px",
+              display: "flex",
+              flexDirection: "column",
+              gap: 10,
+              overflow: "hidden",
+            }}
+          >
+            {/* Progress pips */}
+            <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
+              {mission.checkpoints.map((_, i) => {
+                const st = getCheckpointStatus(i);
+                let bg = "rgba(255,255,255,0.08)";
+                if (st === "completed") bg = "#1dbb7e";
+                if (st === "active") bg = "#1496ff";
+                return (
+                  <div
+                    key={i}
+                    style={{ height: 3, width: 22, borderRadius: 2, background: bg }}
+                  />
+                );
+              })}
+              <span
+                style={{
+                  fontSize: 9,
+                  color: "rgba(150,170,200,0.35)",
+                  letterSpacing: "0.08em",
+                  textTransform: "uppercase",
+                  marginLeft: 6,
+                }}
+              >
+                Checkpoint {currentCheckpoint + 1}
+              </span>
+            </div>
+
+            {cpStatus === "completed" || completedCheckpoints.includes(currentCheckpoint) ? (
+              /* ── Completed state ── */
+              <div
+                style={{
+                  flex: 1,
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: 8,
+                }}
+              >
+                <span style={{ fontSize: 24, color: "#1dbb7e" }}>✓</span>
+                <span style={{ fontSize: 12, color: "#1dbb7e", fontWeight: 600 }}>
+                  Checkpoint Complete
+                </span>
+                <span style={{ fontSize: 10, color: "rgba(150,170,200,0.4)", fontFamily: "monospace" }}>
+                  +{checkpoint?.points ?? 0} pts
+                </span>
+              </div>
+            ) : checkpoint ? (
+              <>
+                {/* Section label */}
+                <div
                   style={{
-                    background: "transparent",
-                    border: "none",
-                    color: "var(--dt-colors-text-critical-default)",
-                    fontSize: "20px",
-                    fontWeight: "600",
-                    cursor: "pointer",
-                    letterSpacing: "0.3px",
-                    padding: "0",
+                    fontSize: 9,
+                    textTransform: "uppercase",
+                    color: "rgba(150,170,200,0.4)",
+                    letterSpacing: "0.08em",
                   }}
                 >
-                  Confirm
-                </button>
-                <button
-                  onClick={() => setAbandonConfirm(false)}
+                  {checkpoint.title}
+                </div>
+
+                {/* Question text */}
+                <div style={{ fontSize: 12, color: "#c0cce0", lineHeight: 1.55 }}>
+                  {renderInstruction(checkpoint.instruction)}
+                </div>
+
+                {/* Hint revealed */}
+                {hintRevealed && (
+                  <div
+                    style={{
+                      padding: "6px 10px",
+                      borderRadius: 4,
+                      border: "1px solid rgba(255,191,0,0.15)",
+                      background: "rgba(255,191,0,0.05)",
+                      fontSize: 11,
+                      color: "rgba(255,191,0,0.7)",
+                    }}
+                  >
+                    {checkpoint.hint}
+                  </div>
+                )}
+
+                {/* Multiple choice options */}
+                {isMultipleChoice && checkpoint.choices && (
+                  <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
+                    {checkpoint.choices.map((option, i) => {
+                      const isSelected = selectedAnswer === option;
+                      return (
+                        <div
+                          key={option}
+                          onClick={() => setSelectedAnswer(option)}
+                          style={{
+                            padding: "6px 10px",
+                            borderRadius: 4,
+                            border: isSelected
+                              ? "1px solid rgba(20,150,255,0.45)"
+                              : "1px solid rgba(255,255,255,0.07)",
+                            fontSize: 11,
+                            color: isSelected ? "#c8d4e8" : "rgba(180,200,220,0.6)",
+                            background: isSelected
+                              ? "rgba(20,150,255,0.1)"
+                              : "rgba(255,255,255,0.025)",
+                            cursor: "pointer",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 8,
+                          }}
+                        >
+                          <span
+                            style={{
+                              fontSize: 9,
+                              fontFamily: "monospace",
+                              color: "rgba(150,170,200,0.3)",
+                            }}
+                          >
+                            {CHOICE_KEYS[i] ?? String(i + 1)}
+                          </span>
+                          {option}
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+
+                {/* Answer error */}
+                {answerError && (
+                  <div style={{ fontSize: 11, color: "rgba(231,76,60,0.8)" }}>{answerError}</div>
+                )}
+
+                {/* Action row */}
+                <div
                   style={{
-                    background: "transparent",
-                    border: "none",
-                    color: "var(--dt-colors-text-neutral-default)",
-                    fontSize: "20px",
-                    fontWeight: "600",
-                    cursor: "pointer",
-                    letterSpacing: "0.3px",
-                    padding: "0",
+                    marginTop: "auto",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    borderTop: "1px solid rgba(255,255,255,0.05)",
+                    paddingTop: 8,
                   }}
                 >
-                  Cancel
-                </button>
-              </div>
-            </div>
-          )}
+                  {/* Hint button */}
+                  <div>
+                    {hintAvailable && !hintRevealed && (
+                      <span
+                        onClick={() => handleRequestHint(checkpoint.id)}
+                        style={{
+                          fontSize: 10,
+                          textTransform: "uppercase",
+                          color: "rgba(150,170,200,0.32)",
+                          cursor: "pointer",
+                          letterSpacing: "0.08em",
+                        }}
+                      >
+                        ⊹ Request intel (−{HINT_PENALTY} pts)
+                      </span>
+                    )}
+                  </div>
+                  {/* Validate button */}
+                  <button
+                    onClick={() => handleValidate(currentCheckpoint)}
+                    disabled={isValidating || (isMultipleChoice && !selectedAnswer)}
+                    style={{
+                      fontSize: 10,
+                      padding: "5px 14px",
+                      borderRadius: 3,
+                      background: "rgba(20,150,255,0.1)",
+                      border: "1px solid rgba(20,150,255,0.28)",
+                      color: "#1496ff",
+                      letterSpacing: "0.1em",
+                      textTransform: "uppercase",
+                      cursor:
+                        isValidating || (isMultipleChoice && !selectedAnswer)
+                          ? "default"
+                          : "pointer",
+                      opacity:
+                        isValidating || (isMultipleChoice && !selectedAnswer) ? 0.4 : 1,
+                    }}
+                  >
+                    {isValidating ? "Confirming..." : "Validate →"}
+                  </button>
+                </div>
+              </>
+            ) : null}
+          </div>
         </div>
-      </Flex>
 
-      {/* Right column — Checkpoints */}
-      <Flex
-        flexDirection="column"
-        gap={8}
-        style={{ flex: "1 1 60%" }}
-      >
-        <Heading level={3}>Checkpoints</Heading>
-
-        {mission.checkpoints.map((checkpoint, index) => {
-          const status = getCheckpointStatus(index);
-          const isMultipleChoice = checkpoint.type === "multiple-choice";
-          const hintAvailable = checkpoint.hint.length > 0;
-          const hintRevealed = hintsRevealed.includes(checkpoint.id);
-          const isActive = status === "active";
-          const isCompleted = status === "completed";
-          const isLocked = status === "locked";
-
-          return (
-            <Surface key={checkpoint.id}>
-              <Flex
-                padding={16}
-                gap={12}
-                alignItems="flex-start"
+        {/* ═══ RIGHT screen — Mission Briefing ═══ */}
+        <div style={{ ...screenBase, display: "flex", flexDirection: "column" }}>
+          <div style={scanLineStyle} />
+          <div
+            style={{
+              padding: 12,
+              display: "flex",
+              flexDirection: "column",
+              gap: 9,
+              flex: 1,
+              overflow: "hidden",
+            }}
+          >
+            {/* Eyebrow */}
+            <div
+              style={{
+                fontSize: 9,
+                textTransform: "uppercase",
+                color: "rgba(150,170,200,0.28)",
+                letterSpacing: "0.14em",
+              }}
+            >
+              Mission Briefing
+            </div>
+
+            {/* Mission title */}
+            <div style={{ fontSize: 14, fontWeight: 600, color: "#d8e4f0" }}>{mission.title}</div>
+
+            {/* Tags */}
+            <div style={{ display: "flex", gap: 6 }}>
+              <span
                 style={{
-                  opacity: isLocked ? 0.4 : 1,
-                  borderLeft: isActive
-                    ? "3px solid var(--dt-colors-charts-categorical-default-12, #1496ff)"
-                    : "3px solid transparent",
+                  fontSize: 9,
+                  textTransform: "uppercase",
+                  padding: "2px 7px",
+                  borderRadius: 3,
+                  color: "rgba(200,215,230,0.5)",
+                  background: "rgba(255,255,255,0.05)",
                 }}
               >
-                {/* Step number / status indicator */}
-                <Flex
-                  flexDirection="column"
-                  alignItems="center"
-                  justifyContent="center"
-                  style={{ minWidth: 32 }}
-                >
-                  {isCompleted ? (
-                    <SuccessIcon />
-                  ) : (
-                    <Text textStyle="base-emphasized">
-                      <span style={{ fontFamily: "monospace" }}>
-                        {String(index + 1).padStart(2, "0")}
-                      </span>
-                    </Text>
-                  )}
-                </Flex>
-
-                {/* Content */}
-                <Flex flexDirection="column" gap={8} flexGrow={1}>
-                  <Flex gap={8} alignItems="center">
-                    <Strong>{checkpoint.title}</Strong>
-                    {isCompleted && (
-                      <Flex gap={8} alignItems="center">
-                        <Chip color="success" variant="emphasized">
-                          Complete
-                        </Chip>
-                        <Text textStyle="small">
-                          <span style={{ fontFamily: "monospace" }}>
-                            {checkpoint.points} pts
-                          </span>
-                        </Text>
-                      </Flex>
-                    )}
-                    {isActive && (
-                      <Chip color="primary" variant="emphasized">
-                        Active
-                      </Chip>
-                    )}
-                    {isLocked && (
-                      <Chip color="neutral">Locked</Chip>
-                    )}
-                  </Flex>
+                {mission.role}
+              </span>
+              <span
+                style={{
+                  fontSize: 9,
+                  textTransform: "uppercase",
+                  padding: "2px 7px",
+                  borderRadius: 3,
+                  color: DIFFICULTY_COLORS[mission.difficulty] ?? "rgba(200,215,230,0.5)",
+                  background: DIFFICULTY_BG[mission.difficulty] ?? "rgba(255,255,255,0.05)",
+                }}
+              >
+                {mission.difficulty}
+              </span>
+            </div>
 
-                  {!isLocked && (
-                    <Paragraph>{checkpoint.instruction}</Paragraph>
-                  )}
+            {/* Divider */}
+            <div style={{ height: 1, background: "rgba(255,255,255,0.06)" }} />
 
-                  {/* Hint system */}
-                  {isActive && hintAvailable && !hintRevealed && (
-                    <Flex>
-                      <Button
-                        variant="default"
-                        onClick={() => handleRequestHint(checkpoint.id)}
-                      >
-                        Request Intel
-                      </Button>
-                    </Flex>
-                  )}
-
-                  {hintRevealed && (
-                    <Surface>
-                      <Flex flexDirection="column" padding={12} gap={4}>
-                        <Chip color="warning" variant="emphasized">
-                          Intel
-                        </Chip>
-                        <Text>{checkpoint.hint}</Text>
-                        <Text textStyle="small" style={{ opacity: 0.6 }}>
-                          Intel requested: -{HINT_PENALTY} pts
-                        </Text>
-                      </Flex>
-                    </Surface>
-                  )}
-
-                  {/* Multiple choice options */}
-                  {isActive && isMultipleChoice && checkpoint.choices && (
-                    <Flex flexDirection="column" gap={8}>
-                      <RadioGroup
-                        value={selectedAnswer}
-                        onChange={(value: string) => setSelectedAnswer(value)}
-                      >
-                        {checkpoint.choices.map((option) => (
-                          <Radio key={option} value={option}>
-                            {option}
-                          </Radio>
-                        ))}
-                      </RadioGroup>
-                      {answerError && (
-                        <Chip color="critical" variant="emphasized">
-                          {answerError}
-                        </Chip>
-                      )}
-                    </Flex>
-                  )}
+            {/* Briefing text */}
+            <div
+              style={{
+                fontSize: 10,
+                color: "rgba(140,160,185,0.5)",
+                lineHeight: 1.65,
+                flex: 1,
+                overflow: "hidden",
+              }}
+            >
+              {mission.briefing}
+            </div>
 
-                  {/* Validate button */}
-                  {isActive && (
-                    <Flex padding={4}>
-                      <Button
-                        variant="accent"
-                        disabled={
-                          isValidating ||
-                          (isMultipleChoice && !selectedAnswer)
-                        }
-                        onClick={() => handleValidate(index)}
-                      >
-                        {isValidating
-                          ? "Confirming..."
-                          : isMultipleChoice
-                            ? "Submit"
-                            : "Complete"}
-                      </Button>
-                    </Flex>
-                  )}
-                </Flex>
-              </Flex>
-            </Surface>
-          );
-        })}
-      </Flex>
-    </Flex>
-    </div>
+            {/* Timer widget */}
+            <div
+              style={{
+                border: "1px solid rgba(20,150,255,0.12)",
+                borderRadius: 4,
+                background: "rgba(20,150,255,0.035)",
+                padding: 9,
+                textAlign: "center",
+              }}
+            >
+              <div
+                style={{
+                  fontSize: 9,
+                  color: "rgba(150,170,200,0.28)",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.08em",
+                  marginBottom: 4,
+                }}
+              >
+                Time Remaining
+              </div>
+              <div
+                style={{
+                  fontSize: 24,
+                  fontWeight: 700,
+                  color: timerIsLow ? "#e74c3c" : "#1496ff",
+                  fontFamily: "monospace",
+                }}
+              >
+                {formatTime(displaySeconds)}
+              </div>
+            </div>
+
+            {/* Abandon section */}
+            <div style={{ textAlign: "center" }}>
+              {!abandonConfirm ? (
+                <span
+                  onClick={() => setAbandonConfirm(true)}
+                  style={{
+                    fontSize: 9,
+                    textTransform: "uppercase",
+                    color: "rgba(200,80,80,0.35)",
+                    cursor: "pointer",
+                    letterSpacing: "0.08em",
+                  }}
+                >
+                  Abandon Mission
+                </span>
+              ) : (
+                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
+                  <span style={{ fontSize: 9, color: "rgba(150,170,200,0.4)" }}>
+                    This will end your mission.
+                  </span>
+                  <div style={{ display: "flex", gap: 12 }}>
+                    <span
+                      onClick={() => navigate("/missions")}
+                      style={{
+                        fontSize: 9,
+                        textTransform: "uppercase",
+                        color: "rgba(231,76,60,0.7)",
+                        cursor: "pointer",
+                        letterSpacing: "0.08em",
+                      }}
+                    >
+                      Confirm
+                    </span>
+                    <span
+                      onClick={() => setAbandonConfirm(false)}
+                      style={{
+                        fontSize: 9,
+                        textTransform: "uppercase",
+                        color: "rgba(150,170,200,0.4)",
+                        cursor: "pointer",
+                        letterSpacing: "0.08em",
+                      }}
+                    >
+                      Cancel
+                    </span>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
   );
 };
diff --git a/ui/assets/room-bg.jpg b/ui/assets/room-bg.jpg
new file mode 100644
index 0000000..e69de29
diff --git a/ui/types.d.ts b/ui/types.d.ts
index 2e9cb26..4dde23d 100644
--- a/ui/types.d.ts
+++ b/ui/types.d.ts
@@ -7,3 +7,8 @@ declare module "*.png" {
   const src: string;
   export default src;
 }
+
+declare module "*.jpg" {
+  const src: string;
+  export default src;
+}

From 35f7540911f660e43de048534ee545c9c04d7708 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 01:29:55 +0000
Subject: [PATCH 02/18] refactor: use plain string constant for room-bg.jpg
 path

Replace JS asset import with a static path string to avoid
bundler dependency on the image file.

https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
---
 ui/app/pages/Mission.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/app/pages/Mission.tsx b/ui/app/pages/Mission.tsx
index fc263e3..ca175fc 100644
--- a/ui/app/pages/Mission.tsx
+++ b/ui/app/pages/Mission.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback, useMemo, useRef } from "react"
 import { useNavigate, useParams } from "react-router-dom";
 import { getMissionById } from "../data/missions";
 import { MatrixBackground } from "../components/MatrixBackground";
-import roomBg from "../assets/room-bg.jpg";
+const roomBg = "/ui/assets/room-bg.jpg";
 
 type CheckpointStatus = "locked" | "active" | "completed";
 

From d5f60bd6e915c75d95d20a6c24211919905dde31 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 16:26:23 +0000
Subject: [PATCH 03/18] fix: Mission.tsx contrast, brightness, and hint handler
 form

- Darken room bg brightness to 0.28 for better UI contrast
- Increase status bar text opacity to 0.75
- Darken panel backgrounds to rgba(4,6,14,0.92)
- Brighten checkpoint question text to #e0eaf8
- Brighten choice text to rgba(210,225,240,0.85)
- Brighten briefing body text to rgba(170,190,210,0.75)
- Brighten mission title to #eef4fc
- Use explicit mission.checkpoints[currentCheckpoint].id for hint handler

https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
---
 ui/app/pages/Mission.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui/app/pages/Mission.tsx b/ui/app/pages/Mission.tsx
index ca175fc..e6aa44f 100644
--- a/ui/app/pages/Mission.tsx
+++ b/ui/app/pages/Mission.tsx
@@ -70,7 +70,7 @@ const screenBase: React.CSSProperties = {
   border: "1px solid rgba(255,255,255,0.07)",
   overflow: "hidden",
   position: "relative",
-  background: "rgba(4,6,14,0.88)",
+  background: "rgba(4,6,14,0.92)",
 };
 
 export const Mission = () => {
@@ -268,7 +268,7 @@ export const Mission = () => {
           backgroundImage: `url(${roomBg})`,
           backgroundSize: "cover",
           backgroundPosition: "center 15%",
-          filter: "brightness(0.38) saturate(0.75)",
+          filter: "brightness(0.28) saturate(0.75)",
           zIndex: 0,
         }}
       />
@@ -369,7 +369,7 @@ export const Mission = () => {
           fontSize: 10,
           letterSpacing: "0.12em",
           textTransform: "uppercase",
-          color: "rgba(180,200,220,0.4)",
+          color: "rgba(180,200,220,0.75)",
         }}
       >
         {/* Pulsing red dot */}
@@ -543,7 +543,7 @@ export const Mission = () => {
                 </div>
 
                 {/* Question text */}
-                <div style={{ fontSize: 12, color: "#c0cce0", lineHeight: 1.55 }}>
+                <div style={{ fontSize: 12, color: "#e0eaf8", lineHeight: 1.55 }}>
                   {renderInstruction(checkpoint.instruction)}
                 </div>
 
@@ -579,7 +579,7 @@ export const Mission = () => {
                               ? "1px solid rgba(20,150,255,0.45)"
                               : "1px solid rgba(255,255,255,0.07)",
                             fontSize: 11,
-                            color: isSelected ? "#c8d4e8" : "rgba(180,200,220,0.6)",
+                            color: isSelected ? "#c8d4e8" : "rgba(210,225,240,0.85)",
                             background: isSelected
                               ? "rgba(20,150,255,0.1)"
                               : "rgba(255,255,255,0.025)",
@@ -625,7 +625,7 @@ export const Mission = () => {
                   <div>
                     {hintAvailable && !hintRevealed && (
                       <span
-                        onClick={() => handleRequestHint(checkpoint.id)}
+                        onClick={() => handleRequestHint(mission.checkpoints[currentCheckpoint].id)}
                         style={{
                           fontSize: 10,
                           textTransform: "uppercase",
@@ -693,7 +693,7 @@ export const Mission = () => {
             </div>
 
             {/* Mission title */}
-            <div style={{ fontSize: 14, fontWeight: 600, color: "#d8e4f0" }}>{mission.title}</div>
+            <div style={{ fontSize: 14, fontWeight: 600, color: "#eef4fc" }}>{mission.title}</div>
 
             {/* Tags */}
             <div style={{ display: "flex", gap: 6 }}>
@@ -730,7 +730,7 @@ export const Mission = () => {
             <div
               style={{
                 fontSize: 10,
-                color: "rgba(140,160,185,0.5)",
+                color: "rgba(170,190,210,0.75)",
                 lineHeight: 1.65,
                 flex: 1,
                 overflow: "hidden",

From f3ad008059122ad89d2b58c0e2c3a05f2dea8a39 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 16:54:34 +0000
Subject: [PATCH 04/18] debug: add console.log to choice onClick and
 handleValidate

https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
---
 ui/app/pages/Mission.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/app/pages/Mission.tsx b/ui/app/pages/Mission.tsx
index e6aa44f..ac89e21 100644
--- a/ui/app/pages/Mission.tsx
+++ b/ui/app/pages/Mission.tsx
@@ -180,6 +180,7 @@ export const Mission = () => {
 
   const handleValidate = useCallback(
     (index: number) => {
+      console.log("handleValidate called, index:", index, "selectedAnswer:", selectedAnswer, "isValidating:", isValidating);
       if (isValidating || !mission) return;
 
       const checkpoint = mission.checkpoints[index];
@@ -571,7 +572,10 @@ export const Mission = () => {
                       return (
                         <div
                           key={option}
-                          onClick={() => setSelectedAnswer(option)}
+                          onClick={() => {
+                            console.log("choice clicked:", option);
+                            setSelectedAnswer(option);
+                          }}
                           style={{
                             padding: "6px 10px",
                             borderRadius: 4,

From 28f44a530977bcf0f5d441b7f534bf2cdbac2435 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 17:01:42 +0000
Subject: [PATCH 05/18] fix: add pointer-events:none to desk foreground overlay

The desk gradient div (z-index:3) was overlapping the UI layer
(z-index:2), blocking clicks on the validate button and action row.

https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
---
 ui/app/pages/Mission.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/app/pages/Mission.tsx b/ui/app/pages/Mission.tsx
index ac89e21..e8fdef3 100644
--- a/ui/app/pages/Mission.tsx
+++ b/ui/app/pages/Mission.tsx
@@ -295,6 +295,7 @@ export const Mission = () => {
           background:
             "linear-gradient(to top, rgba(10,5,2,0.96) 0%, rgba(10,5,2,0.55) 60%, transparent 100%)",
           zIndex: 3,
+          pointerEvents: "none",
         }}
       />
       {/* UI layer */}

From b9153d1f46dbcd2b2b15f21441cfadb8ef98ca42 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 21:02:03 +0000
Subject: [PATCH 06/18] fix: remove room-bg photo for better UI readability

Remove the background photo div and unused roomBg constant.
The outermost wrapper's solid #060810 background now serves
as the sole backdrop, improving text contrast and readability.

https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
---
 ui/app/pages/Mission.tsx | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/ui/app/pages/Mission.tsx b/ui/app/pages/Mission.tsx
index e8fdef3..83aa540 100644
--- a/ui/app/pages/Mission.tsx
+++ b/ui/app/pages/Mission.tsx
@@ -2,8 +2,6 @@ import React, { useState, useEffect, useCallback, useMemo, useRef } from "react"
 import { useNavigate, useParams } from "react-router-dom";
 import { getMissionById } from "../data/missions";
 import { MatrixBackground } from "../components/MatrixBackground";
-const roomBg = "/ui/assets/room-bg.jpg";
-
 type CheckpointStatus = "locked" | "active" | "completed";
 
 const TIME_BONUS_PER_SECOND = 0.5;
@@ -261,18 +259,6 @@ export const Mission = () => {
   // ── Room wrapper (shared by all states) ──
   const roomWrapper = (children: React.ReactNode) => (
     <div style={{ position: "relative", minHeight: "100vh", overflow: "hidden", background: "#060810" }}>
-      {/* Room photo */}
-      <div
-        style={{
-          position: "absolute",
-          inset: 0,
-          backgroundImage: `url(${roomBg})`,
-          backgroundSize: "cover",
-          backgroundPosition: "center 15%",
-          filter: "brightness(0.28) saturate(0.75)",
-          zIndex: 0,
-        }}
-      />
       {/* Vignette overlay */}
       <div
         style={{

From b21de0907b045b6b105af8eabf6264a41134edde Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 21:08:45 +0000
Subject: [PATCH 07/18] fix: restore room-bg photo at brightness(0.15) with
 opaque panels

Re-add the room background photo div with lower brightness (0.15)
and saturation (0.7). Change panel backgrounds to rgba(2,4,10,0.97)
so text is readable against the nearly-opaque panels, not the photo.

https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
---
 ui/app/pages/Mission.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/ui/app/pages/Mission.tsx b/ui/app/pages/Mission.tsx
index 83aa540..7121068 100644
--- a/ui/app/pages/Mission.tsx
+++ b/ui/app/pages/Mission.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback, useMemo, useRef } from "react"
 import { useNavigate, useParams } from "react-router-dom";
 import { getMissionById } from "../data/missions";
 import { MatrixBackground } from "../components/MatrixBackground";
+const roomBg = "/ui/assets/room-bg.jpg";
 type CheckpointStatus = "locked" | "active" | "completed";
 
 const TIME_BONUS_PER_SECOND = 0.5;
@@ -68,7 +69,7 @@ const screenBase: React.CSSProperties = {
   border: "1px solid rgba(255,255,255,0.07)",
   overflow: "hidden",
   position: "relative",
-  background: "rgba(4,6,14,0.92)",
+  background: "rgba(2,4,10,0.97)",
 };
 
 export const Mission = () => {
@@ -259,6 +260,18 @@ export const Mission = () => {
   // ── Room wrapper (shared by all states) ──
   const roomWrapper = (children: React.ReactNode) => (
     <div style={{ position: "relative", minHeight: "100vh", overflow: "hidden", background: "#060810" }}>
+      {/* Room photo */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          backgroundImage: `url(${roomBg})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center 15%",
+          filter: "brightness(0.15) saturate(0.7)",
+          zIndex: 0,
+        }}
+      />
       {/* Vignette overlay */}
       <div
         style={{

From 3360ff50369172a3f42cf65d3885442815776f17 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 21:57:16 +0000
Subject: [PATCH 08/18] style: increase room-bg brightness from 0.15 to 0.25

https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
---
 ui/app/pages/Mission.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/app/pages/Mission.tsx b/ui/app/pages/Mission.tsx
index 7121068..c7a50dc 100644
--- a/ui/app/pages/Mission.tsx
+++ b/ui/app/pages/Mission.tsx
@@ -268,7 +268,7 @@ export const Mission = () => {
           backgroundImage: `url(${roomBg})`,
           backgroundSize: "cover",
           backgroundPosition: "center 15%",
-          filter: "brightness(0.15) saturate(0.7)",
+          filter: "brightness(0.25) saturate(0.7)",
           zIndex: 0,
         }}
       />

From 2f4b28a4d420a8f6bad90dbdc7435d08bb556525 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 21:58:51 +0000
Subject: [PATCH 09/18] style: frosted glass panels with room-bg showing
 through

- Increase room-bg brightness to 0.35
- Lower panel opacity to rgba(2,4,12,0.82) so photo bleeds through
- Add backdropFilter blur(2px) for frosted glass effect
- Set center panel border to rgba(20,150,255,0.25)

https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
---
 ui/app/pages/Mission.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/app/pages/Mission.tsx b/ui/app/pages/Mission.tsx
index c7a50dc..4b1b741 100644
--- a/ui/app/pages/Mission.tsx
+++ b/ui/app/pages/Mission.tsx
@@ -69,7 +69,8 @@ const screenBase: React.CSSProperties = {
   border: "1px solid rgba(255,255,255,0.07)",
   overflow: "hidden",
   position: "relative",
-  background: "rgba(2,4,10,0.97)",
+  background: "rgba(2,4,12,0.82)",
+  backdropFilter: "blur(2px)",
 };
 
 export const Mission = () => {
@@ -268,7 +269,7 @@ export const Mission = () => {
           backgroundImage: `url(${roomBg})`,
           backgroundSize: "cover",
           backgroundPosition: "center 15%",
-          filter: "brightness(0.25) saturate(0.7)",
+          filter: "brightness(0.35) saturate(0.7)",
           zIndex: 0,
         }}
       />
@@ -434,7 +435,7 @@ export const Mission = () => {
         </div>
 
         {/* ═══ CENTER screen — Checkpoint ═══ */}
-        <div style={{ ...screenBase, display: "flex", flexDirection: "column" }}>
+        <div style={{ ...screenBase, border: "1px solid rgba(20,150,255,0.25)", display: "flex", flexDirection: "column" }}>
           <div style={scanLineStyle} />
           {/* Top bar */}
           <div

From 8acac6bcbfba12e7a99288e03496d9022b0127e1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 22:10:07 +0000
Subject: [PATCH 10/18] feat: absolute-position panels over room-bg photo

Replace CSS grid layout with absolutely positioned panels aligned
to the screen positions in room-bg.jpg. Remove vignette overlay,
desk foreground, and status bar. Add bottom HUD strip. Panels use
frosted glass effect over the photo at brightness(0.55).

https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
---
 ui/app/pages/Mission.tsx | 836 +++++++++++++++++++--------------------
 1 file changed, 399 insertions(+), 437 deletions(-)

diff --git a/ui/app/pages/Mission.tsx b/ui/app/pages/Mission.tsx
index 4b1b741..4b8884b 100644
--- a/ui/app/pages/Mission.tsx
+++ b/ui/app/pages/Mission.tsx
@@ -65,12 +65,14 @@ const scanLineStyle: React.CSSProperties = {
 };
 
 const screenBase: React.CSSProperties = {
-  borderRadius: 5,
+  borderRadius: 4,
   border: "1px solid rgba(255,255,255,0.07)",
   overflow: "hidden",
-  position: "relative",
+  position: "absolute",
   background: "rgba(2,4,12,0.82)",
   backdropFilter: "blur(2px)",
+  display: "flex",
+  flexDirection: "column",
 };
 
 export const Mission = () => {
@@ -258,9 +260,9 @@ export const Mission = () => {
     });
   }, [mission, timerSeconds, baseScore, hintsUsed, navigate]);
 
-  // ── Room wrapper (shared by all states) ──
-  const roomWrapper = (children: React.ReactNode) => (
-    <div style={{ position: "relative", minHeight: "100vh", overflow: "hidden", background: "#060810" }}>
+  // ── Room shell (shared by all states) ──
+  const roomShell = (children: React.ReactNode) => (
+    <div style={{ position: "relative", width: "100%", height: "100vh", overflow: "hidden", background: "#060810" }}>
       {/* Room photo */}
       <div
         style={{
@@ -268,47 +270,13 @@ export const Mission = () => {
           inset: 0,
           backgroundImage: `url(${roomBg})`,
           backgroundSize: "cover",
-          backgroundPosition: "center 15%",
-          filter: "brightness(0.35) saturate(0.7)",
+          backgroundPosition: "center top",
+          filter: "brightness(0.55) saturate(0.8)",
           zIndex: 0,
         }}
       />
-      {/* Vignette overlay */}
-      <div
-        style={{
-          position: "absolute",
-          inset: 0,
-          background:
-            "radial-gradient(ellipse at 50% 120%, rgba(8,4,2,0.9) 0%, transparent 55%), linear-gradient(to bottom, rgba(4,6,14,0.25) 0%, transparent 30%, transparent 55%, rgba(4,6,14,0.7) 100%)",
-          zIndex: 1,
-          pointerEvents: "none",
-        }}
-      />
-      {/* Desk foreground */}
-      <div
-        style={{
-          position: "absolute",
-          bottom: 0,
-          left: 0,
-          right: 0,
-          height: 50,
-          background:
-            "linear-gradient(to top, rgba(10,5,2,0.96) 0%, rgba(10,5,2,0.55) 60%, transparent 100%)",
-          zIndex: 3,
-          pointerEvents: "none",
-        }}
-      />
       {/* UI layer */}
-      <div
-        style={{
-          position: "absolute",
-          inset: 0,
-          zIndex: 2,
-          display: "flex",
-          flexDirection: "column",
-          padding: "16px 18px 12px",
-        }}
-      >
+      <div style={{ position: "absolute", inset: 0, zIndex: 2 }}>
         {children}
       </div>
     </div>
@@ -316,14 +284,16 @@ export const Mission = () => {
 
   // ── Mission not found ──
   if (!mission) {
-    return roomWrapper(
+    return roomShell(
       <div
         style={{
-          flex: 1,
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
-          justifyContent: "center",
           gap: 16,
         }}
       >
@@ -359,476 +329,468 @@ export const Mission = () => {
   const hintAvailable = checkpoint ? checkpoint.hint.length > 0 : false;
   const hintRevealed = checkpoint ? hintsRevealed.includes(checkpoint.id) : false;
 
-  return roomWrapper(
+  return roomShell(
     <>
-      {/* ── Status bar ── */}
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 10,
-          marginBottom: 10,
-          fontSize: 10,
-          letterSpacing: "0.12em",
-          textTransform: "uppercase",
-          color: "rgba(180,200,220,0.75)",
-        }}
-      >
-        {/* Pulsing red dot */}
+      {/* ═══ LEFT screen — Tenant Signal / MatrixBackground ═══ */}
+      <div style={{ ...screenBase, top: "7%", left: "5%", width: "25%", height: "44%" }}>
+        <div style={scanLineStyle} />
+        {/* Header strip */}
         <div
           style={{
-            width: 6,
-            height: 6,
-            borderRadius: "50%",
-            background: "#e74c3c",
-            animation: "missionLiveDot 2s infinite",
+            padding: "6px 10px",
+            borderBottom: "1px solid rgba(0,200,50,0.1)",
+            background: "rgba(0,200,50,0.04)",
+            fontSize: 9,
+            letterSpacing: "0.12em",
+            textTransform: "uppercase",
+            color: "rgba(0,200,50,0.4)",
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            flexShrink: 0,
           }}
-        />
-        <span>Mission Control</span>
-        {/* Separator */}
-        <div style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.06)" }} />
-        <span style={{ color: "rgba(20,150,255,0.65)" }}>
-          {mission.codename} / {mission.title}
-        </span>
-        <div style={{ flex: 0, width: 1, height: 8, background: "rgba(255,255,255,0.06)" }} />
-        <span style={{ color: "rgba(29,187,126,0.6)" }}>Operator Active</span>
-        <div style={{ flex: 0, width: 1, height: 8, background: "rgba(255,255,255,0.06)" }} />
-        <span>Playground Env</span>
+        >
+          <div style={{ width: 5, height: 5, borderRadius: "50%", background: "rgba(0,200,50,0.6)" }} />
+          Tenant Signal
+        </div>
+        {/* Matrix canvas wrapper */}
+        <div style={{ flex: 1, position: "relative" }}>
+          <MatrixBackground colorTier={colorTier} />
+        </div>
       </div>
 
-      {/* ── Screen wall ── */}
-      <div
-        style={{
-          display: "grid",
-          gridTemplateColumns: "1fr 1.75fr 1fr",
-          gap: 8,
-          flex: 1,
-          minHeight: 0,
-        }}
-      >
-        {/* ═══ LEFT screen — Tenant Signal / MatrixBackground ═══ */}
-        <div style={{ ...screenBase, display: "flex", flexDirection: "column" }}>
-          <div style={scanLineStyle} />
-          {/* Header strip */}
-          <div
+      {/* ═══ CENTER screen — Checkpoint ═══ */}
+      <div style={{ ...screenBase, top: "7%", left: "30.5%", width: "37%", height: "44%", background: "rgba(2,4,12,0.85)", border: "1px solid rgba(20,150,255,0.25)" }}>
+        <div style={scanLineStyle} />
+        {/* Top bar */}
+        <div
+          style={{
+            padding: "7px 14px",
+            borderBottom: "1px solid rgba(20,150,255,0.1)",
+            background: "rgba(20,150,255,0.05)",
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+            flexShrink: 0,
+          }}
+        >
+          <span
             style={{
-              padding: "6px 10px",
-              borderBottom: "1px solid rgba(0,200,50,0.1)",
-              background: "rgba(0,200,50,0.04)",
+              color: "rgba(20,150,255,0.6)",
               fontSize: 9,
-              letterSpacing: "0.12em",
               textTransform: "uppercase",
-              color: "rgba(0,200,50,0.4)",
-              display: "flex",
-              alignItems: "center",
-              gap: 6,
-              flexShrink: 0,
+              letterSpacing: "0.13em",
             }}
           >
-            <div style={{ width: 5, height: 5, borderRadius: "50%", background: "rgba(0,200,50,0.6)" }} />
-            Tenant Signal
-          </div>
-          {/* Matrix canvas wrapper */}
-          <div style={{ flex: 1, position: "relative" }}>
-            <MatrixBackground colorTier={colorTier} />
-          </div>
-        </div>
-
-        {/* ═══ CENTER screen — Checkpoint ═══ */}
-        <div style={{ ...screenBase, border: "1px solid rgba(20,150,255,0.25)", display: "flex", flexDirection: "column" }}>
-          <div style={scanLineStyle} />
-          {/* Top bar */}
-          <div
+            {mission.title} — CP {currentCheckpoint + 1} of {mission.checkpoints.length}
+          </span>
+          <div style={{ flex: 1 }} />
+          <span
             style={{
-              padding: "7px 14px",
-              borderBottom: "1px solid rgba(20,150,255,0.1)",
-              background: "rgba(20,150,255,0.05)",
-              display: "flex",
-              alignItems: "center",
-              gap: 10,
-              flexShrink: 0,
+              color: timerIsLow ? "#e74c3c" : "#1496ff",
+              fontSize: 13,
+              fontWeight: 700,
+              fontFamily: "monospace",
             }}
           >
+            {formatTime(displaySeconds)}
+          </span>
+        </div>
+
+        {/* Checkpoint body */}
+        <div
+          style={{
+            flex: 1,
+            padding: "14px 16px",
+            display: "flex",
+            flexDirection: "column",
+            gap: 10,
+            overflow: "hidden",
+          }}
+        >
+          {/* Progress pips */}
+          <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
+            {mission.checkpoints.map((_, i) => {
+              const st = getCheckpointStatus(i);
+              let bg = "rgba(255,255,255,0.08)";
+              if (st === "completed") bg = "#1dbb7e";
+              if (st === "active") bg = "#1496ff";
+              return (
+                <div
+                  key={i}
+                  style={{ height: 3, width: 22, borderRadius: 2, background: bg }}
+                />
+              );
+            })}
             <span
               style={{
-                color: "rgba(20,150,255,0.6)",
                 fontSize: 9,
+                color: "rgba(150,170,200,0.35)",
+                letterSpacing: "0.08em",
                 textTransform: "uppercase",
-                letterSpacing: "0.13em",
+                marginLeft: 6,
               }}
             >
-              {mission.title} — CP {currentCheckpoint + 1} of {mission.checkpoints.length}
+              Checkpoint {currentCheckpoint + 1}
             </span>
-            <div style={{ flex: 1 }} />
-            <span
+          </div>
+
+          {cpStatus === "completed" || completedCheckpoints.includes(currentCheckpoint) ? (
+            /* ── Completed state ── */
+            <div
               style={{
-                color: timerIsLow ? "#e74c3c" : "#1496ff",
-                fontSize: 13,
-                fontWeight: 700,
-                fontFamily: "monospace",
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 8,
               }}
             >
-              {formatTime(displaySeconds)}
-            </span>
-          </div>
-
-          {/* Checkpoint body */}
-          <div
-            style={{
-              flex: 1,
-              padding: "14px 16px",
-              display: "flex",
-              flexDirection: "column",
-              gap: 10,
-              overflow: "hidden",
-            }}
-          >
-            {/* Progress pips */}
-            <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
-              {mission.checkpoints.map((_, i) => {
-                const st = getCheckpointStatus(i);
-                let bg = "rgba(255,255,255,0.08)";
-                if (st === "completed") bg = "#1dbb7e";
-                if (st === "active") bg = "#1496ff";
-                return (
-                  <div
-                    key={i}
-                    style={{ height: 3, width: 22, borderRadius: 2, background: bg }}
-                  />
-                );
-              })}
-              <span
-                style={{
-                  fontSize: 9,
-                  color: "rgba(150,170,200,0.35)",
-                  letterSpacing: "0.08em",
-                  textTransform: "uppercase",
-                  marginLeft: 6,
-                }}
-              >
-                Checkpoint {currentCheckpoint + 1}
+              <span style={{ fontSize: 24, color: "#1dbb7e" }}>✓</span>
+              <span style={{ fontSize: 12, color: "#1dbb7e", fontWeight: 600 }}>
+                Checkpoint Complete
+              </span>
+              <span style={{ fontSize: 10, color: "rgba(150,170,200,0.4)", fontFamily: "monospace" }}>
+                +{checkpoint?.points ?? 0} pts
               </span>
             </div>
-
-            {cpStatus === "completed" || completedCheckpoints.includes(currentCheckpoint) ? (
-              /* ── Completed state ── */
+          ) : checkpoint ? (
+            <>
+              {/* Section label */}
               <div
                 style={{
-                  flex: 1,
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  gap: 8,
+                  fontSize: 9,
+                  textTransform: "uppercase",
+                  color: "rgba(150,170,200,0.4)",
+                  letterSpacing: "0.08em",
                 }}
               >
-                <span style={{ fontSize: 24, color: "#1dbb7e" }}>✓</span>
-                <span style={{ fontSize: 12, color: "#1dbb7e", fontWeight: 600 }}>
-                  Checkpoint Complete
-                </span>
-                <span style={{ fontSize: 10, color: "rgba(150,170,200,0.4)", fontFamily: "monospace" }}>
-                  +{checkpoint?.points ?? 0} pts
-                </span>
+                {checkpoint.title}
+              </div>
+
+              {/* Question text */}
+              <div style={{ fontSize: 12, color: "#e0eaf8", lineHeight: 1.55 }}>
+                {renderInstruction(checkpoint.instruction)}
               </div>
-            ) : checkpoint ? (
-              <>
-                {/* Section label */}
+
+              {/* Hint revealed */}
+              {hintRevealed && (
                 <div
                   style={{
-                    fontSize: 9,
-                    textTransform: "uppercase",
-                    color: "rgba(150,170,200,0.4)",
-                    letterSpacing: "0.08em",
+                    padding: "6px 10px",
+                    borderRadius: 4,
+                    border: "1px solid rgba(255,191,0,0.15)",
+                    background: "rgba(255,191,0,0.05)",
+                    fontSize: 11,
+                    color: "rgba(255,191,0,0.7)",
                   }}
                 >
-                  {checkpoint.title}
-                </div>
-
-                {/* Question text */}
-                <div style={{ fontSize: 12, color: "#e0eaf8", lineHeight: 1.55 }}>
-                  {renderInstruction(checkpoint.instruction)}
+                  {checkpoint.hint}
                 </div>
+              )}
 
-                {/* Hint revealed */}
-                {hintRevealed && (
-                  <div
-                    style={{
-                      padding: "6px 10px",
-                      borderRadius: 4,
-                      border: "1px solid rgba(255,191,0,0.15)",
-                      background: "rgba(255,191,0,0.05)",
-                      fontSize: 11,
-                      color: "rgba(255,191,0,0.7)",
-                    }}
-                  >
-                    {checkpoint.hint}
-                  </div>
-                )}
-
-                {/* Multiple choice options */}
-                {isMultipleChoice && checkpoint.choices && (
-                  <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
-                    {checkpoint.choices.map((option, i) => {
-                      const isSelected = selectedAnswer === option;
-                      return (
-                        <div
-                          key={option}
-                          onClick={() => {
-                            console.log("choice clicked:", option);
-                            setSelectedAnswer(option);
-                          }}
+              {/* Multiple choice options */}
+              {isMultipleChoice && checkpoint.choices && (
+                <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
+                  {checkpoint.choices.map((option, i) => {
+                    const isSelected = selectedAnswer === option;
+                    return (
+                      <div
+                        key={option}
+                        onClick={() => {
+                          console.log("choice clicked:", option);
+                          setSelectedAnswer(option);
+                        }}
+                        style={{
+                          padding: "6px 10px",
+                          borderRadius: 4,
+                          border: isSelected
+                            ? "1px solid rgba(20,150,255,0.45)"
+                            : "1px solid rgba(255,255,255,0.07)",
+                          fontSize: 11,
+                          color: isSelected ? "#c8d4e8" : "rgba(210,225,240,0.85)",
+                          background: isSelected
+                            ? "rgba(20,150,255,0.1)"
+                            : "rgba(255,255,255,0.025)",
+                          cursor: "pointer",
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 8,
+                        }}
+                      >
+                        <span
                           style={{
-                            padding: "6px 10px",
-                            borderRadius: 4,
-                            border: isSelected
-                              ? "1px solid rgba(20,150,255,0.45)"
-                              : "1px solid rgba(255,255,255,0.07)",
-                            fontSize: 11,
-                            color: isSelected ? "#c8d4e8" : "rgba(210,225,240,0.85)",
-                            background: isSelected
-                              ? "rgba(20,150,255,0.1)"
-                              : "rgba(255,255,255,0.025)",
-                            cursor: "pointer",
-                            display: "flex",
-                            alignItems: "center",
-                            gap: 8,
+                            fontSize: 9,
+                            fontFamily: "monospace",
+                            color: "rgba(150,170,200,0.3)",
                           }}
                         >
-                          <span
-                            style={{
-                              fontSize: 9,
-                              fontFamily: "monospace",
-                              color: "rgba(150,170,200,0.3)",
-                            }}
-                          >
-                            {CHOICE_KEYS[i] ?? String(i + 1)}
-                          </span>
-                          {option}
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
-
-                {/* Answer error */}
-                {answerError && (
-                  <div style={{ fontSize: 11, color: "rgba(231,76,60,0.8)" }}>{answerError}</div>
-                )}
-
-                {/* Action row */}
-                <div
+                          {CHOICE_KEYS[i] ?? String(i + 1)}
+                        </span>
+                        {option}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+
+              {/* Answer error */}
+              {answerError && (
+                <div style={{ fontSize: 11, color: "rgba(231,76,60,0.8)" }}>{answerError}</div>
+              )}
+
+              {/* Action row */}
+              <div
+                style={{
+                  marginTop: "auto",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  borderTop: "1px solid rgba(255,255,255,0.05)",
+                  paddingTop: 8,
+                }}
+              >
+                {/* Hint button */}
+                <div>
+                  {hintAvailable && !hintRevealed && (
+                    <span
+                      onClick={() => handleRequestHint(mission.checkpoints[currentCheckpoint].id)}
+                      style={{
+                        fontSize: 10,
+                        textTransform: "uppercase",
+                        color: "rgba(150,170,200,0.32)",
+                        cursor: "pointer",
+                        letterSpacing: "0.08em",
+                      }}
+                    >
+                      ⊹ Request intel (−{HINT_PENALTY} pts)
+                    </span>
+                  )}
+                </div>
+                {/* Validate button */}
+                <button
+                  onClick={() => handleValidate(currentCheckpoint)}
+                  disabled={isValidating || (isMultipleChoice && !selectedAnswer)}
                   style={{
-                    marginTop: "auto",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    borderTop: "1px solid rgba(255,255,255,0.05)",
-                    paddingTop: 8,
+                    fontSize: 10,
+                    padding: "5px 14px",
+                    borderRadius: 3,
+                    background: "rgba(20,150,255,0.1)",
+                    border: "1px solid rgba(20,150,255,0.28)",
+                    color: "#1496ff",
+                    letterSpacing: "0.1em",
+                    textTransform: "uppercase",
+                    cursor:
+                      isValidating || (isMultipleChoice && !selectedAnswer)
+                        ? "default"
+                        : "pointer",
+                    opacity:
+                      isValidating || (isMultipleChoice && !selectedAnswer) ? 0.4 : 1,
                   }}
                 >
-                  {/* Hint button */}
-                  <div>
-                    {hintAvailable && !hintRevealed && (
-                      <span
-                        onClick={() => handleRequestHint(mission.checkpoints[currentCheckpoint].id)}
-                        style={{
-                          fontSize: 10,
-                          textTransform: "uppercase",
-                          color: "rgba(150,170,200,0.32)",
-                          cursor: "pointer",
-                          letterSpacing: "0.08em",
-                        }}
-                      >
-                        ⊹ Request intel (−{HINT_PENALTY} pts)
-                      </span>
-                    )}
-                  </div>
-                  {/* Validate button */}
-                  <button
-                    onClick={() => handleValidate(currentCheckpoint)}
-                    disabled={isValidating || (isMultipleChoice && !selectedAnswer)}
-                    style={{
-                      fontSize: 10,
-                      padding: "5px 14px",
-                      borderRadius: 3,
-                      background: "rgba(20,150,255,0.1)",
-                      border: "1px solid rgba(20,150,255,0.28)",
-                      color: "#1496ff",
-                      letterSpacing: "0.1em",
-                      textTransform: "uppercase",
-                      cursor:
-                        isValidating || (isMultipleChoice && !selectedAnswer)
-                          ? "default"
-                          : "pointer",
-                      opacity:
-                        isValidating || (isMultipleChoice && !selectedAnswer) ? 0.4 : 1,
-                    }}
-                  >
-                    {isValidating ? "Confirming..." : "Validate →"}
-                  </button>
-                </div>
-              </>
-            ) : null}
-          </div>
+                  {isValidating ? "Confirming..." : "Validate →"}
+                </button>
+              </div>
+            </>
+          ) : null}
         </div>
+      </div>
 
-        {/* ═══ RIGHT screen — Mission Briefing ═══ */}
-        <div style={{ ...screenBase, display: "flex", flexDirection: "column" }}>
-          <div style={scanLineStyle} />
+      {/* ═══ RIGHT screen — Mission Briefing ═══ */}
+      <div style={{ ...screenBase, top: "7%", left: "68%", width: "24%", height: "44%" }}>
+        <div style={scanLineStyle} />
+        <div
+          style={{
+            padding: 12,
+            display: "flex",
+            flexDirection: "column",
+            gap: 9,
+            flex: 1,
+            overflow: "hidden",
+          }}
+        >
+          {/* Eyebrow */}
           <div
             style={{
-              padding: 12,
-              display: "flex",
-              flexDirection: "column",
-              gap: 9,
-              flex: 1,
-              overflow: "hidden",
+              fontSize: 9,
+              textTransform: "uppercase",
+              color: "rgba(150,170,200,0.28)",
+              letterSpacing: "0.14em",
             }}
           >
-            {/* Eyebrow */}
-            <div
+            Mission Briefing
+          </div>
+
+          {/* Mission title */}
+          <div style={{ fontSize: 14, fontWeight: 600, color: "#eef4fc" }}>{mission.title}</div>
+
+          {/* Tags */}
+          <div style={{ display: "flex", gap: 6 }}>
+            <span
               style={{
                 fontSize: 9,
                 textTransform: "uppercase",
-                color: "rgba(150,170,200,0.28)",
-                letterSpacing: "0.14em",
+                padding: "2px 7px",
+                borderRadius: 3,
+                color: "rgba(200,215,230,0.5)",
+                background: "rgba(255,255,255,0.05)",
               }}
             >
-              Mission Briefing
-            </div>
-
-            {/* Mission title */}
-            <div style={{ fontSize: 14, fontWeight: 600, color: "#eef4fc" }}>{mission.title}</div>
+              {mission.role}
+            </span>
+            <span
+              style={{
+                fontSize: 9,
+                textTransform: "uppercase",
+                padding: "2px 7px",
+                borderRadius: 3,
+                color: DIFFICULTY_COLORS[mission.difficulty] ?? "rgba(200,215,230,0.5)",
+                background: DIFFICULTY_BG[mission.difficulty] ?? "rgba(255,255,255,0.05)",
+              }}
+            >
+              {mission.difficulty}
+            </span>
+          </div>
 
-            {/* Tags */}
-            <div style={{ display: "flex", gap: 6 }}>
-              <span
-                style={{
-                  fontSize: 9,
-                  textTransform: "uppercase",
-                  padding: "2px 7px",
-                  borderRadius: 3,
-                  color: "rgba(200,215,230,0.5)",
-                  background: "rgba(255,255,255,0.05)",
-                }}
-              >
-                {mission.role}
-              </span>
-              <span
-                style={{
-                  fontSize: 9,
-                  textTransform: "uppercase",
-                  padding: "2px 7px",
-                  borderRadius: 3,
-                  color: DIFFICULTY_COLORS[mission.difficulty] ?? "rgba(200,215,230,0.5)",
-                  background: DIFFICULTY_BG[mission.difficulty] ?? "rgba(255,255,255,0.05)",
-                }}
-              >
-                {mission.difficulty}
-              </span>
-            </div>
+          {/* Divider */}
+          <div style={{ height: 1, background: "rgba(255,255,255,0.06)" }} />
 
-            {/* Divider */}
-            <div style={{ height: 1, background: "rgba(255,255,255,0.06)" }} />
+          {/* Briefing text */}
+          <div
+            style={{
+              fontSize: 10,
+              color: "rgba(170,190,210,0.75)",
+              lineHeight: 1.65,
+              flex: 1,
+              overflow: "hidden",
+            }}
+          >
+            {mission.briefing}
+          </div>
 
-            {/* Briefing text */}
+          {/* Timer widget */}
+          <div
+            style={{
+              border: "1px solid rgba(20,150,255,0.12)",
+              borderRadius: 4,
+              background: "rgba(20,150,255,0.035)",
+              padding: 9,
+              textAlign: "center",
+            }}
+          >
             <div
               style={{
-                fontSize: 10,
-                color: "rgba(170,190,210,0.75)",
-                lineHeight: 1.65,
-                flex: 1,
-                overflow: "hidden",
+                fontSize: 9,
+                color: "rgba(150,170,200,0.28)",
+                textTransform: "uppercase",
+                letterSpacing: "0.08em",
+                marginBottom: 4,
               }}
             >
-              {mission.briefing}
+              Time Remaining
             </div>
-
-            {/* Timer widget */}
             <div
               style={{
-                border: "1px solid rgba(20,150,255,0.12)",
-                borderRadius: 4,
-                background: "rgba(20,150,255,0.035)",
-                padding: 9,
-                textAlign: "center",
+                fontSize: 24,
+                fontWeight: 700,
+                color: timerIsLow ? "#e74c3c" : "#1496ff",
+                fontFamily: "monospace",
               }}
             >
-              <div
+              {formatTime(displaySeconds)}
+            </div>
+          </div>
+
+          {/* Abandon section */}
+          <div style={{ textAlign: "center" }}>
+            {!abandonConfirm ? (
+              <span
+                onClick={() => setAbandonConfirm(true)}
                 style={{
                   fontSize: 9,
-                  color: "rgba(150,170,200,0.28)",
                   textTransform: "uppercase",
+                  color: "rgba(200,80,80,0.35)",
+                  cursor: "pointer",
                   letterSpacing: "0.08em",
-                  marginBottom: 4,
                 }}
               >
-                Time Remaining
-              </div>
-              <div
-                style={{
-                  fontSize: 24,
-                  fontWeight: 700,
-                  color: timerIsLow ? "#e74c3c" : "#1496ff",
-                  fontFamily: "monospace",
-                }}
-              >
-                {formatTime(displaySeconds)}
-              </div>
-            </div>
-
-            {/* Abandon section */}
-            <div style={{ textAlign: "center" }}>
-              {!abandonConfirm ? (
-                <span
-                  onClick={() => setAbandonConfirm(true)}
-                  style={{
-                    fontSize: 9,
-                    textTransform: "uppercase",
-                    color: "rgba(200,80,80,0.35)",
-                    cursor: "pointer",
-                    letterSpacing: "0.08em",
-                  }}
-                >
-                  Abandon Mission
+                Abandon Mission
+              </span>
+            ) : (
+              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
+                <span style={{ fontSize: 9, color: "rgba(150,170,200,0.4)" }}>
+                  This will end your mission.
                 </span>
-              ) : (
-                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
-                  <span style={{ fontSize: 9, color: "rgba(150,170,200,0.4)" }}>
-                    This will end your mission.
+                <div style={{ display: "flex", gap: 12 }}>
+                  <span
+                    onClick={() => navigate("/missions")}
+                    style={{
+                      fontSize: 9,
+                      textTransform: "uppercase",
+                      color: "rgba(231,76,60,0.7)",
+                      cursor: "pointer",
+                      letterSpacing: "0.08em",
+                    }}
+                  >
+                    Confirm
+                  </span>
+                  <span
+                    onClick={() => setAbandonConfirm(false)}
+                    style={{
+                      fontSize: 9,
+                      textTransform: "uppercase",
+                      color: "rgba(150,170,200,0.4)",
+                      cursor: "pointer",
+                      letterSpacing: "0.08em",
+                    }}
+                  >
+                    Cancel
                   </span>
-                  <div style={{ display: "flex", gap: 12 }}>
-                    <span
-                      onClick={() => navigate("/missions")}
-                      style={{
-                        fontSize: 9,
-                        textTransform: "uppercase",
-                        color: "rgba(231,76,60,0.7)",
-                        cursor: "pointer",
-                        letterSpacing: "0.08em",
-                      }}
-                    >
-                      Confirm
-                    </span>
-                    <span
-                      onClick={() => setAbandonConfirm(false)}
-                      style={{
-                        fontSize: 9,
-                        textTransform: "uppercase",
-                        color: "rgba(150,170,200,0.4)",
-                        cursor: "pointer",
-                        letterSpacing: "0.08em",
-                      }}
-                    >
-                      Cancel
-                    </span>
-                  </div>
                 </div>
-              )}
-            </div>
+              </div>
+            )}
           </div>
         </div>
       </div>
+
+      {/* ── Bottom HUD strip ── */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "2%",
+          left: "5%",
+          right: "5%",
+          display: "flex",
+          alignItems: "center",
+          gap: 16,
+          fontSize: 10,
+          letterSpacing: "0.12em",
+          textTransform: "uppercase" as const,
+          color: "rgba(180,200,220,0.6)",
+          zIndex: 3,
+        }}
+      >
+        {/* Pulsing red dot */}
+        <div
+          style={{
+            width: 6,
+            height: 6,
+            borderRadius: "50%",
+            background: "#e74c3c",
+            animation: "missionLiveDot 2s infinite",
+          }}
+        />
+        <span>Mission Control</span>
+        <div style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.06)" }} />
+        <span style={{ color: "rgba(20,150,255,0.65)" }}>
+          {mission.codename} / {mission.title}
+        </span>
+        <div style={{ width: 1, height: 8, background: "rgba(255,255,255,0.06)" }} />
+        <span style={{ color: "rgba(29,187,126,0.6)" }}>Operator Active</span>
+        <div style={{ width: 1, height: 8, background: "rgba(255,255,255,0.06)" }} />
+        <span>Playground Env</span>
+      </div>
     </>
   );
 };

From 0da20b9a7d9b2a688b43e606ed71c53e7ee12d5d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 22:19:23 +0000
Subject: [PATCH 11/18] style: taller panels, brighter photo, more visible
 action buttons

- Extend all three panel heights from 44% to 52%
- Increase room-bg brightness to 0.85 and saturation to 0.95
- Restyle VALIDATE button with bolder colors and larger padding
- Restyle REQUEST INTEL as a bordered button with white text
- Restyle ABANDON MISSION as a bordered red button

https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
---
 ui/app/pages/Mission.tsx | 37 ++++++++++++++++++++++++-------------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/ui/app/pages/Mission.tsx b/ui/app/pages/Mission.tsx
index 4b8884b..afc37b4 100644
--- a/ui/app/pages/Mission.tsx
+++ b/ui/app/pages/Mission.tsx
@@ -271,7 +271,7 @@ export const Mission = () => {
           backgroundImage: `url(${roomBg})`,
           backgroundSize: "cover",
           backgroundPosition: "center top",
-          filter: "brightness(0.55) saturate(0.8)",
+          filter: "brightness(0.85) saturate(0.95)",
           zIndex: 0,
         }}
       />
@@ -332,7 +332,7 @@ export const Mission = () => {
   return roomShell(
     <>
       {/* ═══ LEFT screen — Tenant Signal / MatrixBackground ═══ */}
-      <div style={{ ...screenBase, top: "7%", left: "5%", width: "25%", height: "44%" }}>
+      <div style={{ ...screenBase, top: "7%", left: "5%", width: "25%", height: "52%" }}>
         <div style={scanLineStyle} />
         {/* Header strip */}
         <div
@@ -360,7 +360,7 @@ export const Mission = () => {
       </div>
 
       {/* ═══ CENTER screen — Checkpoint ═══ */}
-      <div style={{ ...screenBase, top: "7%", left: "30.5%", width: "37%", height: "44%", background: "rgba(2,4,12,0.85)", border: "1px solid rgba(20,150,255,0.25)" }}>
+      <div style={{ ...screenBase, top: "7%", left: "30.5%", width: "37%", height: "52%", background: "rgba(2,4,12,0.85)", border: "1px solid rgba(20,150,255,0.25)" }}>
         <div style={scanLineStyle} />
         {/* Top bar */}
         <div
@@ -557,11 +557,16 @@ export const Mission = () => {
                     <span
                       onClick={() => handleRequestHint(mission.checkpoints[currentCheckpoint].id)}
                       style={{
-                        fontSize: 10,
+                        fontSize: 11,
+                        fontWeight: 600,
                         textTransform: "uppercase",
-                        color: "rgba(150,170,200,0.32)",
+                        color: "rgba(255,255,255,0.8)",
                         cursor: "pointer",
                         letterSpacing: "0.08em",
+                        border: "1px solid rgba(255,255,255,0.3)",
+                        padding: "6px 12px",
+                        borderRadius: 3,
+                        background: "rgba(255,255,255,0.08)",
                       }}
                     >
                       ⊹ Request intel (−{HINT_PENALTY} pts)
@@ -573,12 +578,13 @@ export const Mission = () => {
                   onClick={() => handleValidate(currentCheckpoint)}
                   disabled={isValidating || (isMultipleChoice && !selectedAnswer)}
                   style={{
-                    fontSize: 10,
-                    padding: "5px 14px",
+                    fontSize: 11,
+                    fontWeight: 600,
+                    padding: "8px 20px",
                     borderRadius: 3,
-                    background: "rgba(20,150,255,0.1)",
-                    border: "1px solid rgba(20,150,255,0.28)",
-                    color: "#1496ff",
+                    background: "rgba(20,150,255,0.35)",
+                    border: "1px solid rgba(20,150,255,0.8)",
+                    color: "#ffffff",
                     letterSpacing: "0.1em",
                     textTransform: "uppercase",
                     cursor:
@@ -598,7 +604,7 @@ export const Mission = () => {
       </div>
 
       {/* ═══ RIGHT screen — Mission Briefing ═══ */}
-      <div style={{ ...screenBase, top: "7%", left: "68%", width: "24%", height: "44%" }}>
+      <div style={{ ...screenBase, top: "7%", left: "68%", width: "24%", height: "52%" }}>
         <div style={scanLineStyle} />
         <div
           style={{
@@ -708,11 +714,16 @@ export const Mission = () => {
               <span
                 onClick={() => setAbandonConfirm(true)}
                 style={{
-                  fontSize: 9,
+                  fontSize: 11,
+                  fontWeight: 600,
                   textTransform: "uppercase",
-                  color: "rgba(200,80,80,0.35)",
+                  color: "rgba(220,80,80,0.9)",
                   cursor: "pointer",
                   letterSpacing: "0.08em",
+                  border: "1px solid rgba(220,80,80,0.4)",
+                  padding: "6px 12px",
+                  borderRadius: 3,
+                  background: "rgba(220,80,80,0.1)",
                 }}
               >
                 Abandon Mission

From 23794f083d717ad241e165fe09719117c1dfa955 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 22:27:39 +0000
Subject: [PATCH 12/18] feat: redistribute panel content and fix positions

- Resize panels: LEFT 24%x56%, CENTER 38%x56%, RIGHT 23%x56%
- LEFT: remove Tenant Signal header, add timer + abandon at bottom
  over MatrixBackground with opaque dock
- RIGHT: remove timer + abandon, briefing-only with scrollable text
- CENTER: unchanged (checkpoint content)

https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
---
 ui/app/pages/Mission.tsx | 201 ++++++++++++++++++---------------------
 1 file changed, 92 insertions(+), 109 deletions(-)

diff --git a/ui/app/pages/Mission.tsx b/ui/app/pages/Mission.tsx
index afc37b4..a62d715 100644
--- a/ui/app/pages/Mission.tsx
+++ b/ui/app/pages/Mission.tsx
@@ -331,36 +331,107 @@ export const Mission = () => {
 
   return roomShell(
     <>
-      {/* ═══ LEFT screen — Tenant Signal / MatrixBackground ═══ */}
-      <div style={{ ...screenBase, top: "7%", left: "5%", width: "25%", height: "52%" }}>
+      {/* ═══ LEFT screen — MatrixBackground + Timer + Abandon ═══ */}
+      <div style={{ ...screenBase, top: "7%", left: "5%", width: "24%", height: "56%" }}>
         <div style={scanLineStyle} />
-        {/* Header strip */}
+        {/* Matrix canvas wrapper */}
+        <div style={{ flex: 1, position: "relative" }}>
+          <MatrixBackground colorTier={colorTier} />
+        </div>
+        {/* Bottom dock: timer + abandon */}
         <div
           style={{
-            padding: "6px 10px",
-            borderBottom: "1px solid rgba(0,200,50,0.1)",
-            background: "rgba(0,200,50,0.04)",
-            fontSize: 9,
-            letterSpacing: "0.12em",
-            textTransform: "uppercase",
-            color: "rgba(0,200,50,0.4)",
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            padding: 12,
+            background: "rgba(2,4,12,0.85)",
+            borderTop: "1px solid rgba(255,255,255,0.08)",
             display: "flex",
+            flexDirection: "column",
             alignItems: "center",
-            gap: 6,
-            flexShrink: 0,
+            gap: 8,
           }}
         >
-          <div style={{ width: 5, height: 5, borderRadius: "50%", background: "rgba(0,200,50,0.6)" }} />
-          Tenant Signal
-        </div>
-        {/* Matrix canvas wrapper */}
-        <div style={{ flex: 1, position: "relative" }}>
-          <MatrixBackground colorTier={colorTier} />
+          <div
+            style={{
+              fontSize: 9,
+              color: "rgba(150,170,200,0.28)",
+              textTransform: "uppercase",
+              letterSpacing: "0.08em",
+            }}
+          >
+            Time Remaining
+          </div>
+          <div
+            style={{
+              fontSize: 24,
+              fontWeight: 700,
+              color: timerIsLow ? "#e74c3c" : "#1496ff",
+              fontFamily: "monospace",
+            }}
+          >
+            {formatTime(displaySeconds)}
+          </div>
+          <div style={{ textAlign: "center", marginTop: 4 }}>
+            {!abandonConfirm ? (
+              <span
+                onClick={() => setAbandonConfirm(true)}
+                style={{
+                  fontSize: 11,
+                  fontWeight: 600,
+                  textTransform: "uppercase",
+                  color: "rgba(220,80,80,0.9)",
+                  cursor: "pointer",
+                  letterSpacing: "0.08em",
+                  border: "1px solid rgba(220,80,80,0.4)",
+                  padding: "6px 12px",
+                  borderRadius: 3,
+                  background: "rgba(220,80,80,0.1)",
+                }}
+              >
+                Abandon Mission
+              </span>
+            ) : (
+              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
+                <span style={{ fontSize: 9, color: "rgba(150,170,200,0.4)" }}>
+                  This will end your mission.
+                </span>
+                <div style={{ display: "flex", gap: 12 }}>
+                  <span
+                    onClick={() => navigate("/missions")}
+                    style={{
+                      fontSize: 9,
+                      textTransform: "uppercase",
+                      color: "rgba(231,76,60,0.7)",
+                      cursor: "pointer",
+                      letterSpacing: "0.08em",
+                    }}
+                  >
+                    Confirm
+                  </span>
+                  <span
+                    onClick={() => setAbandonConfirm(false)}
+                    style={{
+                      fontSize: 9,
+                      textTransform: "uppercase",
+                      color: "rgba(150,170,200,0.4)",
+                      cursor: "pointer",
+                      letterSpacing: "0.08em",
+                    }}
+                  >
+                    Cancel
+                  </span>
+                </div>
+              </div>
+            )}
+          </div>
         </div>
       </div>
 
       {/* ═══ CENTER screen — Checkpoint ═══ */}
-      <div style={{ ...screenBase, top: "7%", left: "30.5%", width: "37%", height: "52%", background: "rgba(2,4,12,0.85)", border: "1px solid rgba(20,150,255,0.25)" }}>
+      <div style={{ ...screenBase, top: "7%", left: "30%", width: "38%", height: "56%", background: "rgba(2,4,12,0.85)", border: "1px solid rgba(20,150,255,0.25)" }}>
         <div style={scanLineStyle} />
         {/* Top bar */}
         <div
@@ -604,7 +675,7 @@ export const Mission = () => {
       </div>
 
       {/* ═══ RIGHT screen — Mission Briefing ═══ */}
-      <div style={{ ...screenBase, top: "7%", left: "68%", width: "24%", height: "52%" }}>
+      <div style={{ ...screenBase, top: "7%", left: "69%", width: "23%", height: "56%" }}>
         <div style={scanLineStyle} />
         <div
           style={{
@@ -669,99 +740,11 @@ export const Mission = () => {
               color: "rgba(170,190,210,0.75)",
               lineHeight: 1.65,
               flex: 1,
-              overflow: "hidden",
+              overflow: "auto",
             }}
           >
             {mission.briefing}
           </div>
-
-          {/* Timer widget */}
-          <div
-            style={{
-              border: "1px solid rgba(20,150,255,0.12)",
-              borderRadius: 4,
-              background: "rgba(20,150,255,0.035)",
-              padding: 9,
-              textAlign: "center",
-            }}
-          >
-            <div
-              style={{
-                fontSize: 9,
-                color: "rgba(150,170,200,0.28)",
-                textTransform: "uppercase",
-                letterSpacing: "0.08em",
-                marginBottom: 4,
-              }}
-            >
-              Time Remaining
-            </div>
-            <div
-              style={{
-                fontSize: 24,
-                fontWeight: 700,
-                color: timerIsLow ? "#e74c3c" : "#1496ff",
-                fontFamily: "monospace",
-              }}
-            >
-              {formatTime(displaySeconds)}
-            </div>
-          </div>
-
-          {/* Abandon section */}
-          <div style={{ textAlign: "center" }}>
-            {!abandonConfirm ? (
-              <span
-                onClick={() => setAbandonConfirm(true)}
-                style={{
-                  fontSize: 11,
-                  fontWeight: 600,
-                  textTransform: "uppercase",
-                  color: "rgba(220,80,80,0.9)",
-                  cursor: "pointer",
-                  letterSpacing: "0.08em",
-                  border: "1px solid rgba(220,80,80,0.4)",
-                  padding: "6px 12px",
-                  borderRadius: 3,
-                  background: "rgba(220,80,80,0.1)",
-                }}
-              >
-                Abandon Mission
-              </span>
-            ) : (
-              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
-                <span style={{ fontSize: 9, color: "rgba(150,170,200,0.4)" }}>
-                  This will end your mission.
-                </span>
-                <div style={{ display: "flex", gap: 12 }}>
-                  <span
-                    onClick={() => navigate("/missions")}
-                    style={{
-                      fontSize: 9,
-                      textTransform: "uppercase",
-                      color: "rgba(231,76,60,0.7)",
-                      cursor: "pointer",
-                      letterSpacing: "0.08em",
-                    }}
-                  >
-                    Confirm
-                  </span>
-                  <span
-                    onClick={() => setAbandonConfirm(false)}
-                    style={{
-                      fontSize: 9,
-                      textTransform: "uppercase",
-                      color: "rgba(150,170,200,0.4)",
-                      cursor: "pointer",
-                      letterSpacing: "0.08em",
-                    }}
-                  >
-                    Cancel
-                  </span>
-                </div>
-              </div>
-            )}
-          </div>
         </div>
       </div>
 

From 0c0b294c061e1c634d1d49c33fe46f4ae2116a45 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 22:33:42 +0000
Subject: [PATCH 13/18] style: taller panels (64%), narrower right panel,
 larger title
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Extend all panel heights from 56% to 64%
- Right panel width 23% → 21% to stay within photo boundary
- Mission title in briefing panel 14px → 20px

https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
---
 ui/app/pages/Mission.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/app/pages/Mission.tsx b/ui/app/pages/Mission.tsx
index a62d715..3c3e96a 100644
--- a/ui/app/pages/Mission.tsx
+++ b/ui/app/pages/Mission.tsx
@@ -332,7 +332,7 @@ export const Mission = () => {
   return roomShell(
     <>
       {/* ═══ LEFT screen — MatrixBackground + Timer + Abandon ═══ */}
-      <div style={{ ...screenBase, top: "7%", left: "5%", width: "24%", height: "56%" }}>
+      <div style={{ ...screenBase, top: "7%", left: "5%", width: "24%", height: "64%" }}>
         <div style={scanLineStyle} />
         {/* Matrix canvas wrapper */}
         <div style={{ flex: 1, position: "relative" }}>
@@ -431,7 +431,7 @@ export const Mission = () => {
       </div>
 
       {/* ═══ CENTER screen — Checkpoint ═══ */}
-      <div style={{ ...screenBase, top: "7%", left: "30%", width: "38%", height: "56%", background: "rgba(2,4,12,0.85)", border: "1px solid rgba(20,150,255,0.25)" }}>
+      <div style={{ ...screenBase, top: "7%", left: "30%", width: "38%", height: "64%", background: "rgba(2,4,12,0.85)", border: "1px solid rgba(20,150,255,0.25)" }}>
         <div style={scanLineStyle} />
         {/* Top bar */}
         <div
@@ -675,7 +675,7 @@ export const Mission = () => {
       </div>
 
       {/* ═══ RIGHT screen — Mission Briefing ═══ */}
-      <div style={{ ...screenBase, top: "7%", left: "69%", width: "23%", height: "56%" }}>
+      <div style={{ ...screenBase, top: "7%", left: "69%", width: "21%", height: "64%" }}>
         <div style={scanLineStyle} />
         <div
           style={{
@@ -700,7 +700,7 @@ export const Mission = () => {
           </div>
 
           {/* Mission title */}
-          <div style={{ fontSize: 14, fontWeight: 600, color: "#eef4fc" }}>{mission.title}</div>
+          <div style={{ fontSize: 20, fontWeight: 600, color: "#eef4fc" }}>{mission.title}</div>
 
           {/* Tags */}
           <div style={{ display: "flex", gap: 6 }}>

From 6470fdae93f81699d91e0bee887600d208f25dc6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 22:36:41 +0000
Subject: [PATCH 14/18] style: adjust panel positions, larger title and
 question text

- LEFT: left 6.5%, width 22%
- CENTER: left 29.5%, width 38%
- RIGHT: left 68.5%, width 22%
- Mission title: 22px / fontWeight 700
- Checkpoint question text: 14px (was 12px)

https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
---
 ui/app/pages/Mission.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/app/pages/Mission.tsx b/ui/app/pages/Mission.tsx
index 3c3e96a..19c706e 100644
--- a/ui/app/pages/Mission.tsx
+++ b/ui/app/pages/Mission.tsx
@@ -332,7 +332,7 @@ export const Mission = () => {
   return roomShell(
     <>
       {/* ═══ LEFT screen — MatrixBackground + Timer + Abandon ═══ */}
-      <div style={{ ...screenBase, top: "7%", left: "5%", width: "24%", height: "64%" }}>
+      <div style={{ ...screenBase, top: "7%", left: "6.5%", width: "22%", height: "64%" }}>
         <div style={scanLineStyle} />
         {/* Matrix canvas wrapper */}
         <div style={{ flex: 1, position: "relative" }}>
@@ -431,7 +431,7 @@ export const Mission = () => {
       </div>
 
       {/* ═══ CENTER screen — Checkpoint ═══ */}
-      <div style={{ ...screenBase, top: "7%", left: "30%", width: "38%", height: "64%", background: "rgba(2,4,12,0.85)", border: "1px solid rgba(20,150,255,0.25)" }}>
+      <div style={{ ...screenBase, top: "7%", left: "29.5%", width: "38%", height: "64%", background: "rgba(2,4,12,0.85)", border: "1px solid rgba(20,150,255,0.25)" }}>
         <div style={scanLineStyle} />
         {/* Top bar */}
         <div
@@ -541,7 +541,7 @@ export const Mission = () => {
               </div>
 
               {/* Question text */}
-              <div style={{ fontSize: 12, color: "#e0eaf8", lineHeight: 1.55 }}>
+              <div style={{ fontSize: 14, color: "#e0eaf8", lineHeight: 1.55 }}>
                 {renderInstruction(checkpoint.instruction)}
               </div>
 
@@ -675,7 +675,7 @@ export const Mission = () => {
       </div>
 
       {/* ═══ RIGHT screen — Mission Briefing ═══ */}
-      <div style={{ ...screenBase, top: "7%", left: "69%", width: "21%", height: "64%" }}>
+      <div style={{ ...screenBase, top: "7%", left: "68.5%", width: "22%", height: "64%" }}>
         <div style={scanLineStyle} />
         <div
           style={{
@@ -700,7 +700,7 @@ export const Mission = () => {
           </div>
 
           {/* Mission title */}
-          <div style={{ fontSize: 20, fontWeight: 600, color: "#eef4fc" }}>{mission.title}</div>
+          <div style={{ fontSize: 22, fontWeight: 700, color: "#eef4fc" }}>{mission.title}</div>
 
           {/* Tags */}
           <div style={{ display: "flex", gap: 6 }}>

From 783b845a5ad650952e4bfc959e5b9f8b159b2233 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 22:39:26 +0000
Subject: [PATCH 15/18] =?UTF-8?q?fix:=20panel=20overflow=20=E2=80=94=20sho?=
 =?UTF-8?q?rter=20height,=20narrower=20right,=20dock=20overflow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- All panels height 64% → 58%
- RIGHT panel width 22% → 19%
- Left panel bottom dock: padding 12→8, overflow hidden
- Mission title: explicit fontSize "22px", lineHeight 1.2
- Checkpoint question text confirmed at 14px

https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
---
 ui/app/pages/Mission.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/ui/app/pages/Mission.tsx b/ui/app/pages/Mission.tsx
index 19c706e..2b4b7c4 100644
--- a/ui/app/pages/Mission.tsx
+++ b/ui/app/pages/Mission.tsx
@@ -332,7 +332,7 @@ export const Mission = () => {
   return roomShell(
     <>
       {/* ═══ LEFT screen — MatrixBackground + Timer + Abandon ═══ */}
-      <div style={{ ...screenBase, top: "7%", left: "6.5%", width: "22%", height: "64%" }}>
+      <div style={{ ...screenBase, top: "7%", left: "6.5%", width: "22%", height: "58%" }}>
         <div style={scanLineStyle} />
         {/* Matrix canvas wrapper */}
         <div style={{ flex: 1, position: "relative" }}>
@@ -345,13 +345,14 @@ export const Mission = () => {
             bottom: 0,
             left: 0,
             right: 0,
-            padding: 12,
+            padding: 8,
             background: "rgba(2,4,12,0.85)",
             borderTop: "1px solid rgba(255,255,255,0.08)",
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
             gap: 8,
+            overflow: "hidden",
           }}
         >
           <div
@@ -431,7 +432,7 @@ export const Mission = () => {
       </div>
 
       {/* ═══ CENTER screen — Checkpoint ═══ */}
-      <div style={{ ...screenBase, top: "7%", left: "29.5%", width: "38%", height: "64%", background: "rgba(2,4,12,0.85)", border: "1px solid rgba(20,150,255,0.25)" }}>
+      <div style={{ ...screenBase, top: "7%", left: "29.5%", width: "38%", height: "58%", background: "rgba(2,4,12,0.85)", border: "1px solid rgba(20,150,255,0.25)" }}>
         <div style={scanLineStyle} />
         {/* Top bar */}
         <div
@@ -675,7 +676,7 @@ export const Mission = () => {
       </div>
 
       {/* ═══ RIGHT screen — Mission Briefing ═══ */}
-      <div style={{ ...screenBase, top: "7%", left: "68.5%", width: "22%", height: "64%" }}>
+      <div style={{ ...screenBase, top: "7%", left: "68.5%", width: "19%", height: "58%" }}>
         <div style={scanLineStyle} />
         <div
           style={{
@@ -700,7 +701,7 @@ export const Mission = () => {
           </div>
 
           {/* Mission title */}
-          <div style={{ fontSize: 22, fontWeight: 700, color: "#eef4fc" }}>{mission.title}</div>
+          <div style={{ fontSize: "22px", fontWeight: 700, color: "#eef4fc", lineHeight: 1.2 }}>{mission.title}</div>
 
           {/* Tags */}
           <div style={{ display: "flex", gap: 6 }}>

From c9b3119ec7ee3ad2614f37b9746507c923306fa7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 22:43:44 +0000
Subject: [PATCH 16/18] fix: panel positions to cover photo screen boundaries

- LEFT: left 1%, width 27%, height 65%
- CENTER: left 29%, width 38%, height 65%
- RIGHT: left 68%, width 20%, height 65%

https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
---
 ui/app/pages/Mission.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/app/pages/Mission.tsx b/ui/app/pages/Mission.tsx
index 2b4b7c4..bf27db4 100644
--- a/ui/app/pages/Mission.tsx
+++ b/ui/app/pages/Mission.tsx
@@ -332,7 +332,7 @@ export const Mission = () => {
   return roomShell(
     <>
       {/* ═══ LEFT screen — MatrixBackground + Timer + Abandon ═══ */}
-      <div style={{ ...screenBase, top: "7%", left: "6.5%", width: "22%", height: "58%" }}>
+      <div style={{ ...screenBase, top: "7%", left: "1%", width: "27%", height: "65%" }}>
         <div style={scanLineStyle} />
         {/* Matrix canvas wrapper */}
         <div style={{ flex: 1, position: "relative" }}>
@@ -432,7 +432,7 @@ export const Mission = () => {
       </div>
 
       {/* ═══ CENTER screen — Checkpoint ═══ */}
-      <div style={{ ...screenBase, top: "7%", left: "29.5%", width: "38%", height: "58%", background: "rgba(2,4,12,0.85)", border: "1px solid rgba(20,150,255,0.25)" }}>
+      <div style={{ ...screenBase, top: "7%", left: "29%", width: "38%", height: "65%", background: "rgba(2,4,12,0.85)", border: "1px solid rgba(20,150,255,0.25)" }}>
         <div style={scanLineStyle} />
         {/* Top bar */}
         <div
@@ -676,7 +676,7 @@ export const Mission = () => {
       </div>
 
       {/* ═══ RIGHT screen — Mission Briefing ═══ */}
-      <div style={{ ...screenBase, top: "7%", left: "68.5%", width: "19%", height: "58%" }}>
+      <div style={{ ...screenBase, top: "7%", left: "68%", width: "20%", height: "65%" }}>
         <div style={scanLineStyle} />
         <div
           style={{

From b6d7541c656ef077a9f923854bc12d2c4f50b1b6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 22:47:22 +0000
Subject: [PATCH 17/18] style: larger, bolder briefing text in right panel

fontSize 15px, fontWeight 600, color #e0eaf8, lineHeight 1.6

https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
---
 ui/app/pages/Mission.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/app/pages/Mission.tsx b/ui/app/pages/Mission.tsx
index bf27db4..1fb890f 100644
--- a/ui/app/pages/Mission.tsx
+++ b/ui/app/pages/Mission.tsx
@@ -737,9 +737,10 @@ export const Mission = () => {
           {/* Briefing text */}
           <div
             style={{
-              fontSize: 10,
-              color: "rgba(170,190,210,0.75)",
-              lineHeight: 1.65,
+              fontSize: 15,
+              fontWeight: 600,
+              color: "#e0eaf8",
+              lineHeight: 1.6,
               flex: 1,
               overflow: "auto",
             }}

From 9f6b72ea2892cd9c8c652b08b1e84e73ffb12c53 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 25 Mar 2026 22:49:40 +0000
Subject: [PATCH 18/18] style: add fontWeight 700 to panel labels and section
 headers

- Center panel top bar mission ID label: fontWeight 700
- Mission Briefing eyebrow label: fontWeight 700
- Checkpoint section label: fontWeight 700

https://claude.ai/code/session_012xbUB1XfH4Xh6d1JsM2s3a
---
 ui/app/pages/Mission.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/ui/app/pages/Mission.tsx b/ui/app/pages/Mission.tsx
index 1fb890f..1719273 100644
--- a/ui/app/pages/Mission.tsx
+++ b/ui/app/pages/Mission.tsx
@@ -450,6 +450,7 @@ export const Mission = () => {
             style={{
               color: "rgba(20,150,255,0.6)",
               fontSize: 9,
+              fontWeight: 700,
               textTransform: "uppercase",
               letterSpacing: "0.13em",
             }}
@@ -533,6 +534,7 @@ export const Mission = () => {
               <div
                 style={{
                   fontSize: 9,
+                  fontWeight: 700,
                   textTransform: "uppercase",
                   color: "rgba(150,170,200,0.4)",
                   letterSpacing: "0.08em",
@@ -692,6 +694,7 @@ export const Mission = () => {
           <div
             style={{
               fontSize: 9,
+              fontWeight: 700,
               textTransform: "uppercase",
               color: "rgba(150,170,200,0.28)",
               letterSpacing: "0.14em",