From f4ad121259c19135023063c3a1d6b905ad6c6d1e Mon Sep 17 00:00:00 2001
From: CatLover <152669316+catloversg@users.noreply.github.com>
Date: Sat, 12 Sep 2026 01:59:33 +0700
Subject: [PATCH] BUGFIX: Augmentations page crashes after grafting an aug if
 player has not installed any augs

---
 .../ui/InstalledAugmentations.tsx             | 43 +++++++++----------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/Augmentation/ui/InstalledAugmentations.tsx b/src/Augmentation/ui/InstalledAugmentations.tsx
index 3ad571754..60d302226 100644
--- a/src/Augmentation/ui/InstalledAugmentations.tsx
+++ b/src/Augmentation/ui/InstalledAugmentations.tsx
@@ -18,12 +18,13 @@ import { Player } from "@player";
 import { Augmentations } from "../Augmentations";
 import { AugmentationName } from "@enums";
 import { useRerender } from "../../ui/React/hooks";
+import type { PlayerOwnedAugmentation } from "../PlayerOwnedAugmentation";
 
 export function InstalledAugmentations(): React.ReactElement {
   const rerender = useRerender();
   const sourceAugs = Player.augmentations.slice().filter((aug) => aug.name !== AugmentationName.NeuroFluxGovernor);
 
-  const [selectedAug, setSelectedAug] = useState(sourceAugs[0]);
+  const [selectedAug, setSelectedAug] = useState<PlayerOwnedAugmentation | undefined>(sourceAugs[0]);
 
   const [filterText, setFilterText] = useState("");
   const matches = (s1: string, s2: string) => s1.toLowerCase().includes(s2.toLowerCase());
@@ -54,6 +55,24 @@ export function InstalledAugmentations(): React.ReactElement {
     rerender();
   }
 
+  let selectedAugDetail;
+  if (selectedAug) {
+    const aug = Augmentations[selectedAug.name];
+    selectedAugDetail = (
+      <Box sx={{ m: 1 }}>
+        <Typography variant="h6" sx={{ display: "flex", alignItems: "center", flexWrap: "wrap" }}>
+          {selectedAug.name}
+        </Typography>
+        <Typography sx={{ maxHeight: 350, overflowY: "scroll", whiteSpace: "pre-wrap" }}>
+          {typeof aug.info === "string" ? <span>{aug.info}</span> : aug.info}
+          <br />
+          <br />
+          {aug.stats}
+        </Typography>
+      </Box>
+    );
+  }
+
   return (
     <Box sx={{ width: "100%" }}>
       <Paper sx={{ p: 1 }}>
@@ -90,27 +109,7 @@ export function InstalledAugmentations(): React.ReactElement {
               ))}
             </List>
           </Box>
-          <Box sx={{ m: 1 }}>
-            <Typography variant="h6" sx={{ display: "flex", alignItems: "center", flexWrap: "wrap" }}>
-              {selectedAug.name}
-            </Typography>
-            <Typography sx={{ maxHeight: 350, overflowY: "scroll", whiteSpace: "pre-wrap" }}>
-              {(() => {
-                const aug = Augmentations[selectedAug.name];
-
-                const info = typeof aug.info === "string" ? <span>{aug.info}</span> : aug.info;
-                const tooltip = (
-                  <>
-                    {info}
-                    <br />
-                    <br />
-                    {aug.stats}
-                  </>
-                );
-                return tooltip;
-              })()}
-            </Typography>
-          </Box>
+          {selectedAugDetail}
         </Paper>
       ) : (
         <Paper sx={{ p: 1 }}>