diff --git a/src/Panel.tsx b/src/Panel.tsx
index f0a01ab9..e239fc66 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -74,6 +74,11 @@ export const Panel = ({ active, api }: PanelProps) => {
     );
 
   if (projectUpdatingFailed) {
+    // These should always be set when we get this error
+    if (!projectToken || !configFile) {
+      throw new Error(`Missing projectToken/config file after configuration failure`);
+    }
+
     return (
       <Sections hidden={!active}>
         <LinkingProjectFailed
@@ -86,6 +91,9 @@ export const Panel = ({ active, api }: PanelProps) => {
   }
 
   if (projectIdUpdated) {
+    // This should always be set when we succeed
+    if (!configFile) throw new Error(`Missing config file after configuration success`);
+
     return (
       <Provider key={PANEL_ID} value={client}>
         <Sections hidden={!active}>
diff --git a/src/SidebarTop.tsx b/src/SidebarTop.tsx
index 3c465163..821d5923 100644
--- a/src/SidebarTop.tsx
+++ b/src/SidebarTop.tsx
@@ -41,6 +41,7 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           name: "passed",
           color: color.positive,
         },
+        // @ts-expect-error SB needs a proper API for no link
         link: undefined,
       });
       setTimeout(() => clearNotification(`${ADDON_ID}/build-initialize`), 10_000);
@@ -62,6 +63,7 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           name: "passed",
           color: color.positive,
         },
+        // @ts-expect-error SB needs a proper API for no link
         link: undefined,
       });
       setTimeout(() => clearNotification(`${ADDON_ID}/build-complete`), 10_000);
@@ -78,6 +80,7 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           name: "failed",
           color: color.negative,
         },
+        // @ts-expect-error SB needs a proper API for no link
         link: undefined,
       });
     }
diff --git a/src/buildSteps.ts b/src/buildSteps.ts
index cb0eb659..b69d1764 100644
--- a/src/buildSteps.ts
+++ b/src/buildSteps.ts
@@ -52,7 +52,7 @@ export const BUILD_STEP_CONFIG: Record<
     renderName: () => `Publish your Storybook`,
     renderProgress: ({ stepProgress }) => {
       const { numerator, denominator } = stepProgress.upload;
-      if (!denominator) return `Uploading files`;
+      if (!denominator || !numerator) return `Uploading files`;
       const { value: total, exponent } = filesize(denominator, {
         output: "object",
         round: 1,
diff --git a/src/components/BrowserSelector.tsx b/src/components/BrowserSelector.tsx
index 9a0aebd3..2185ba70 100644
--- a/src/components/BrowserSelector.tsx
+++ b/src/components/BrowserSelector.tsx
@@ -32,7 +32,7 @@ type BrowserData = Pick<BrowserInfo, "id" | "key" | "name">;
 interface BrowserSelectorProps {
   isAccepted: boolean;
   selectedBrowser: BrowserData;
-  browserResults: { browser: BrowserData; result: ComparisonResult }[];
+  browserResults: { browser: BrowserData; result?: ComparisonResult }[];
   onSelectBrowser: (browser: BrowserData) => void;
 }
 
@@ -52,7 +52,7 @@ export const BrowserSelector = ({
 
   type Link = ComponentProps<typeof TooltipMenu>["links"][0];
 
-  const links: Link[] =
+  const links =
     browserResults.length > 1 &&
     browserResults.map(
       ({ browser, result }): Link => ({
@@ -64,7 +64,6 @@ export const BrowserSelector = ({
         title: browser.name,
       })
     );
-
   return (
     <WithTooltip
       hasChrome={false}
diff --git a/src/components/ModeSelector.tsx b/src/components/ModeSelector.tsx
index d7f92372..cf676052 100644
--- a/src/components/ModeSelector.tsx
+++ b/src/components/ModeSelector.tsx
@@ -24,7 +24,7 @@ interface ModeSelectorProps {
   isAccepted: boolean;
   selectedMode: ModeData;
   onSelectMode: (viewport: ModeData) => void;
-  modeResults: { viewport: ModeData; result: ComparisonResult }[];
+  modeResults: { viewport: ModeData; result?: ComparisonResult }[];
 }
 
 export const ModeSelector = ({
diff --git a/src/components/SnapshotImage.stories.tsx b/src/components/SnapshotImage.stories.tsx
index 54b64dae..ac7a0919 100644
--- a/src/components/SnapshotImage.stories.tsx
+++ b/src/components/SnapshotImage.stories.tsx
@@ -66,7 +66,7 @@ export const TallerConstrained: Story = {
 
 export const CaptureError: Story = {
   args: {
-    captureImage: null,
+    captureImage: undefined,
     comparisonResult: ComparisonResult.CaptureError,
   },
 };
diff --git a/src/components/SnapshotImage.tsx b/src/components/SnapshotImage.tsx
index fb55635e..5307ed84 100644
--- a/src/components/SnapshotImage.tsx
+++ b/src/components/SnapshotImage.tsx
@@ -65,10 +65,10 @@ export const Container = styled.div<{ href?: string; target?: string }>(
 );
 
 interface SnapshotImageProps {
-  componentName: Test["story"]["component"]["name"];
-  storyName: Test["story"]["name"];
+  componentName?: NonNullable<NonNullable<Test["story"]>["component"]>["name"];
+  storyName?: NonNullable<Test["story"]>["name"];
   testUrl: Test["webUrl"];
-  comparisonResult: ComparisonResult;
+  comparisonResult?: ComparisonResult;
   captureImage?: Pick<CaptureImage, "imageUrl" | "imageWidth">;
   diffImage?: Pick<CaptureOverlayImage, "imageUrl" | "imageWidth">;
   focusImage?: Pick<CaptureOverlayImage, "imageUrl" | "imageWidth">;
diff --git a/src/components/StatusDot.tsx b/src/components/StatusDot.tsx
index 95e963a6..5f575e8d 100644
--- a/src/components/StatusDot.tsx
+++ b/src/components/StatusDot.tsx
@@ -13,23 +13,25 @@ const Dot = styled.div<StatusDotProps & { overlay?: boolean }>(
     width: 6,
     height: 6,
     borderRadius: "50%",
-    background: {
-      [TestStatus.InProgress]: "transparent",
-      [TestStatus.Passed]: theme.color.positive,
-      [TestStatus.Pending]: theme.color.gold,
-      [TestStatus.Accepted]: theme.color.positive,
-      [TestStatus.Denied]: theme.color.positive,
-      [TestStatus.Broken]: theme.color.negative,
-      [TestStatus.Failed]: theme.color.negative,
-      [ComparisonResult.Equal]: theme.color.positive,
-      [ComparisonResult.Fixed]: theme.color.positive,
-      [ComparisonResult.Added]: theme.color.gold,
-      [ComparisonResult.Changed]: theme.color.gold,
-      [ComparisonResult.Removed]: theme.color.gold,
-      [ComparisonResult.CaptureError]: theme.color.negative,
-      [ComparisonResult.SystemError]: theme.color.negative,
-      notification: theme.color.secondary,
-    }[status],
+    background:
+      status &&
+      {
+        [TestStatus.InProgress]: "transparent",
+        [TestStatus.Passed]: theme.color.positive,
+        [TestStatus.Pending]: theme.color.gold,
+        [TestStatus.Accepted]: theme.color.positive,
+        [TestStatus.Denied]: theme.color.positive,
+        [TestStatus.Broken]: theme.color.negative,
+        [TestStatus.Failed]: theme.color.negative,
+        [ComparisonResult.Equal]: theme.color.positive,
+        [ComparisonResult.Fixed]: theme.color.positive,
+        [ComparisonResult.Added]: theme.color.gold,
+        [ComparisonResult.Changed]: theme.color.gold,
+        [ComparisonResult.Removed]: theme.color.gold,
+        [ComparisonResult.CaptureError]: theme.color.negative,
+        [ComparisonResult.SystemError]: theme.color.negative,
+        notification: theme.color.secondary,
+      }[status],
   }),
   ({ overlay, theme }) =>
     overlay &&
diff --git a/src/components/SuffixInput.tsx b/src/components/SuffixInput.tsx
index bfa47460..42bc9e2c 100644
--- a/src/components/SuffixInput.tsx
+++ b/src/components/SuffixInput.tsx
@@ -39,8 +39,8 @@ const SuffixOverlay = ({
   placeholder,
   suffix,
 }: {
-  value: string;
-  placeholder: string;
+  value?: string;
+  placeholder?: string;
   suffix: ReactNode;
 }) => (
   <SuffixWrapper>
diff --git a/src/components/TooltipMenu.tsx b/src/components/TooltipMenu.tsx
index d1a84d07..ed81d5ec 100644
--- a/src/components/TooltipMenu.tsx
+++ b/src/components/TooltipMenu.tsx
@@ -32,7 +32,7 @@ export const TooltipMenu = ({ children, links, note, ...props }: TooltipMenuProp
               ...link,
               onClick: (...args) => {
                 onHide();
-                return link.onClick(...args);
+                return link.onClick?.(...args);
               },
             }))}
           />
diff --git a/src/index.ts b/src/index.ts
index 741f658e..ba6dafed 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -29,7 +29,7 @@ const observeGitInfo = async (
   callback: (info: GitInfo, prevInfo: GitInfo) => void
 ) => {
   let prev: GitInfo;
-  let timer: NodeJS.Timeout | null = null;
+  let timer: NodeJS.Timeout | undefined;
   const act = async () => {
     const gitInfo = await getGitInfo();
     if (Object.entries(gitInfo).some(([key, value]) => prev?.[key as keyof GitInfo] !== value)) {
@@ -93,7 +93,7 @@ async function serverChannel(
   const localBuildProgress = useAddonState<LocalBuildProgress>(channel, LOCAL_BUILD_PROGRESS);
 
   channel.on(START_BUILD, async () => {
-    const { projectToken } = projectInfoState.value;
+    const { projectToken } = projectInfoState.value || {};
     await runChromaticBuild(localBuildProgress, { projectToken });
   });
 
diff --git a/src/manager.tsx b/src/manager.tsx
index 433ff37e..d5f4c3d1 100644
--- a/src/manager.tsx
+++ b/src/manager.tsx
@@ -11,7 +11,7 @@ addons.register(ADDON_ID, (api) => {
     type: types.PANEL,
     title: "Visual Tests",
     match: ({ viewMode }) => viewMode === "story",
-    render: ({ active }) => <Panel active={active} api={api} />,
+    render: ({ active }) => <Panel active={!!active} api={api} />,
   });
 
   addons.add(SIDEBAR_TOP_ID, {
diff --git a/src/runChromaticBuild.test.ts b/src/runChromaticBuild.test.ts
index 23496576..789db59d 100644
--- a/src/runChromaticBuild.test.ts
+++ b/src/runChromaticBuild.test.ts
@@ -1,13 +1,17 @@
 import { INITIAL_BUILD_PAYLOAD } from "./buildSteps";
 import { onCompleteOrError, onStartOrProgress, runChromaticBuild } from "./runChromaticBuild";
+import { LocalBuildProgress } from "./types";
 
 jest.mock("chromatic/node", () => ({ run: jest.fn() }));
 
 const store = {
+  state: undefined as LocalBuildProgress | undefined,
   get value() {
+    if (!this.state) throw new Error("need to call set first");
+
     return this.state;
   },
-  set value(newValue) {
+  set value(newValue: LocalBuildProgress) {
     this.state = newValue;
   },
   on() {},
@@ -39,28 +43,28 @@ describe("onStartOrProgress", () => {
       currentStep: "initialize",
     });
 
-    onStartOrProgress(store, null)({ task: "build" } as any);
+    onStartOrProgress(store)({ task: "build" } as any);
     expect(store.value).toMatchObject({
       buildProgressPercentage: expect.closeTo(3, 0),
       currentStep: "build",
       stepProgress: { build: { startedAt: expect.any(Number) } },
     });
 
-    onStartOrProgress(store, null)({ task: "upload" } as any);
+    onStartOrProgress(store)({ task: "upload" } as any);
     expect(store.value).toMatchObject({
       buildProgressPercentage: expect.closeTo(24, 0),
       currentStep: "upload",
       stepProgress: { upload: { startedAt: expect.any(Number) } },
     });
 
-    onStartOrProgress(store, null)({ task: "verify" } as any);
+    onStartOrProgress(store)({ task: "verify" } as any);
     expect(store.value).toMatchObject({
       buildProgressPercentage: expect.closeTo(48, 0),
       currentStep: "verify",
       stepProgress: { verify: { startedAt: expect.any(Number) } },
     });
 
-    onStartOrProgress(store, null)({ task: "snapshot" } as any);
+    onStartOrProgress(store)({ task: "snapshot" } as any);
     expect(store.value).toMatchObject({
       buildProgressPercentage: expect.closeTo(55, 0),
       currentStep: "snapshot",
@@ -69,36 +73,36 @@ describe("onStartOrProgress", () => {
   });
 
   it("updates progress with each invocation", () => {
-    onStartOrProgress(store, null)({ task: "verify" } as any);
+    onStartOrProgress(store)({ task: "verify" } as any);
     expect(store.value.buildProgressPercentage).toBeCloseTo(48, 0);
 
-    onStartOrProgress(store, null)({ task: "verify" } as any);
+    onStartOrProgress(store)({ task: "verify" } as any);
     expect(store.value.buildProgressPercentage).toBeCloseTo(50, 0);
 
-    onStartOrProgress(store, null)({ task: "verify" } as any);
+    onStartOrProgress(store)({ task: "verify" } as any);
     expect(store.value.buildProgressPercentage).toBeCloseTo(52, 0);
   });
 
   it("can never exceed progress for a step beyond the next step", () => {
-    for (let n = 10; n; n -= 1) onStartOrProgress(store, null)({ task: "verify" } as any);
+    for (let n = 10; n; n -= 1) onStartOrProgress(store)({ task: "verify" } as any);
     expect(store.value.buildProgressPercentage).toBeCloseTo(55, 0);
 
-    for (let n = 10; n; n -= 1) onStartOrProgress(store, null)({ task: "verify" } as any);
+    for (let n = 10; n; n -= 1) onStartOrProgress(store)({ task: "verify" } as any);
     expect(store.value.buildProgressPercentage).toBeCloseTo(55, 0);
 
-    onStartOrProgress(store, null)({ task: "snapshot" } as any);
+    onStartOrProgress(store)({ task: "snapshot" } as any);
     expect(store.value.buildProgressPercentage).toBeCloseTo(55, 0);
   });
 
   it('updates build progress based on "progress" and "total" values', () => {
-    onStartOrProgress(store, null)({ task: "snapshot" } as any);
+    onStartOrProgress(store)({ task: "snapshot" } as any);
     expect(store.value.buildProgressPercentage).toBeCloseTo(55, 0);
 
-    onStartOrProgress(store, null)({ task: "snapshot" } as any, { progress: 1, total: 2 });
+    onStartOrProgress(store)({ task: "snapshot" } as any, { progress: 1, total: 2 });
     expect(store.value.stepProgress.snapshot).toMatchObject({ numerator: 1, denominator: 2 });
     expect(store.value.buildProgressPercentage).toBeCloseTo(77, 0);
 
-    onStartOrProgress(store, null)({ task: "snapshot" } as any, { progress: 2, total: 2 });
+    onStartOrProgress(store)({ task: "snapshot" } as any, { progress: 2, total: 2 });
     expect(store.value.stepProgress.snapshot).toMatchObject({ numerator: 2, denominator: 2 });
     expect(store.value.buildProgressPercentage).toBeCloseTo(100, 0);
   });
@@ -111,7 +115,7 @@ describe("onCompleteOrError", () => {
 
   it("sets build progress to 100% on completion of final step", () => {
     const build = { changeCount: 1, errorCount: 2 };
-    onCompleteOrError(store, null)({ task: "snapshot", build } as any);
+    onCompleteOrError(store)({ task: "snapshot", build } as any);
     expect(store.value).toMatchObject({
       buildProgressPercentage: 100,
       currentStep: "complete",
@@ -122,11 +126,11 @@ describe("onCompleteOrError", () => {
   });
 
   it("does not set build progress to 100% on error", () => {
-    onStartOrProgress(store, null)({ task: "snapshot" } as any);
+    onStartOrProgress(store)({ task: "snapshot" } as any);
     expect(store.value.buildProgressPercentage).toBeCloseTo(55, 0);
 
     const error = { formattedError: "Oops!", originalError: new Error("Oops!") };
-    onCompleteOrError(store, null)({ task: "snapshot" } as any, error);
+    onCompleteOrError(store)({ task: "snapshot" } as any, error);
     expect(store.value).toMatchObject({
       buildProgressPercentage: expect.closeTo(55, 0),
       currentStep: "error",
diff --git a/src/runChromaticBuild.ts b/src/runChromaticBuild.ts
index 634b3568..2c2e0c8e 100644
--- a/src/runChromaticBuild.ts
+++ b/src/runChromaticBuild.ts
@@ -45,13 +45,18 @@ const getBuildStepData = (
 export const onStartOrProgress =
   (
     localBuildProgress: ReturnType<typeof useAddonState<LocalBuildProgress>>,
-    timeout: ReturnType<typeof setTimeout>
+    timeout?: ReturnType<typeof setTimeout>
   ) =>
   ({ ...ctx }: Context, { progress, total }: { progress?: number; total?: number } = {}) => {
     clearTimeout(timeout);
 
     if (!isKnownStep(ctx.task)) return;
 
+    // We should set this right before starting so it should never be unset during a build.
+    if (!localBuildProgress.value) {
+      throw new Error("Unexpected missing value for localBuildProgress");
+    }
+
     const { buildProgressPercentage, stepProgress, previousBuildProgress } =
       localBuildProgress.value;
 
@@ -74,6 +79,11 @@ export const onStartOrProgress =
         (ESTIMATED_PROGRESS_INTERVAL / estimateDuration) * stepPercentage;
 
       timeout = setTimeout(() => {
+        // We should set this right before starting so it should never be unset during a build.
+        if (!localBuildProgress.value) {
+          throw new Error("Unexpected missing value for localBuildProgress");
+        }
+
         // Intentionally reference the present value here (after timeout)
         const { currentStep } = localBuildProgress.value;
         // Only update if we haven't moved on to a later step
@@ -100,11 +110,16 @@ export const onStartOrProgress =
 export const onCompleteOrError =
   (
     localBuildProgress: ReturnType<typeof useAddonState<LocalBuildProgress>>,
-    timeout: ReturnType<typeof setTimeout>
+    timeout?: ReturnType<typeof setTimeout>
   ) =>
   (ctx: Context, error?: { formattedError: string; originalError: Error | Error[] }) => {
     clearTimeout(timeout);
 
+    // We should set this right before starting so it should never be unset during a build.
+    if (!localBuildProgress.value) {
+      throw new Error("Unexpected missing value for localBuildProgress");
+    }
+
     const { buildProgressPercentage, stepProgress } = localBuildProgress.value;
 
     if (isKnownStep(ctx.task)) {
@@ -149,7 +164,7 @@ export const runChromaticBuild = async (
   localBuildProgress.value = INITIAL_BUILD_PAYLOAD;
 
   // Timeout is defined here so it's shared between all handlers
-  let timeout: ReturnType<typeof setTimeout>;
+  let timeout: ReturnType<typeof setTimeout> | undefined;
 
   await run({
     // Currently we have to have these flags.
diff --git a/src/screens/Authentication/Authentication.stories.tsx b/src/screens/Authentication/Authentication.stories.tsx
index 45d27ebc..e09c8123 100644
--- a/src/screens/Authentication/Authentication.stories.tsx
+++ b/src/screens/Authentication/Authentication.stories.tsx
@@ -52,38 +52,38 @@ export const Welcome = {
   ),
 };
 
-export const SignIn: Story = {
+export const SignIn = {
   parameters: withFigmaDesign(
     "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=304-317993&t=3EAIRe8423CpOQWY-4"
   ),
-  play: playAll<Story>(async ({ canvasElement }) => {
+  play: playAll(async ({ canvasElement }) => {
     const button = await findByRole(canvasElement, "button", {
       name: "Enable",
     });
     await userEvent.click(button);
   }),
-};
+} satisfies Story;
 
-export const SSO: Story = {
+export const SSO = {
   parameters: withFigmaDesign(
     "https://www.figma.com/file/p4ZIW7diUWC2l2DAf5xpYI/Storybook-Connect-plugin-(EXTERNAL-USE)?type=design&node-id=1-1734&t=ysgtc5qR40kqRKtI-4"
   ),
-  play: playAll<Story>(SignIn, async (context) => {
+  play: playAll(SignIn, async (context) => {
     const button = await findByRole(context.canvasElement, "button", {
       name: "Sign into Chromatic with SSO",
     });
     await userEvent.click(button);
   }),
-};
+} satisfies Story;
 
 export const Verify: Story = {
   parameters: withFigmaDesign(
     "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=304-318063&t=3EAIRe8423CpOQWY-4"
   ),
-  play: playAll<Story>(SignIn, async (context) => {
+  play: playAll(SignIn, async (context) => {
     const button = await findByRole(context.canvasElement, "button", {
       name: "Sign in with Chromatic",
     });
     await userEvent.click(button);
   }),
-};
+} satisfies Story;
diff --git a/src/screens/Authentication/Authentication.tsx b/src/screens/Authentication/Authentication.tsx
index ea1c1174..2a946bcd 100644
--- a/src/screens/Authentication/Authentication.tsx
+++ b/src/screens/Authentication/Authentication.tsx
@@ -46,6 +46,9 @@ export const Authentication = ({ setAccessToken }: AuthenticationProps) => {
       );
 
     case "verify":
+      if (!userCode || !verificationUrl) {
+        throw new Error("Expected to have a `userCode` and `verificationUrl` if at `verify` step");
+      }
       return (
         <Verify
           onBack={() => setScreen("signin")}
diff --git a/src/screens/Authentication/SetSubdomain.tsx b/src/screens/Authentication/SetSubdomain.tsx
index fbd28046..c20157b0 100644
--- a/src/screens/Authentication/SetSubdomain.tsx
+++ b/src/screens/Authentication/SetSubdomain.tsx
@@ -36,7 +36,7 @@ interface SetSubdomainProps {
 
 export const SetSubdomain = ({ onBack, onSignIn }: SetSubdomainProps) => {
   const [subdomain, setSubdomain] = useState("");
-  const [inputError, setInputError] = useState(null);
+  const [inputError, setInputError] = useState<string | null>(null);
 
   const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value.replace(/[^a-z0-9-]/g, "");
diff --git a/src/screens/Authentication/Verify.tsx b/src/screens/Authentication/Verify.tsx
index 394d148b..ababf62d 100644
--- a/src/screens/Authentication/Verify.tsx
+++ b/src/screens/Authentication/Verify.tsx
@@ -34,7 +34,7 @@ interface VerifyProps {
 }
 
 export const Verify = ({ onBack, userCode, verificationUrl }: VerifyProps) => {
-  const dialog = React.useRef<Window>();
+  const dialog = React.useRef<Window | null>();
 
   // Close the dialog window when the screen gets unmounted.
   React.useEffect(() => () => dialog.current?.close(), []);
@@ -49,7 +49,7 @@ export const Verify = ({ onBack, userCode, verificationUrl }: VerifyProps) => {
       const top = (window.innerHeight - height) / 2 + window.screenTop;
       const options = `scrollbars=yes,width=${width},height=${height},top=${top},left=${left}`;
       dialog.current = window.open(verificationUrl, "oauth-dialog", options);
-      if (window.focus) dialog.current.focus();
+      dialog.current?.focus();
     } else {
       dialog.current = window.open(verificationUrl, "_blank");
     }
diff --git a/src/screens/LinkProject/LinkProject.tsx b/src/screens/LinkProject/LinkProject.tsx
index 21c53949..acb552a3 100644
--- a/src/screens/LinkProject/LinkProject.tsx
+++ b/src/screens/LinkProject/LinkProject.tsx
@@ -103,12 +103,12 @@ function SelectProject({
   setAccessToken: (accessToken: string | null) => void;
 }) {
   const [selectedAccount, setSelectedAccount] =
-    useState<SelectProjectsQueryQuery["viewer"]["accounts"][number]>(null);
+    useState<NonNullable<SelectProjectsQueryQuery["viewer"]>["accounts"][number]>();
   const [{ data, fetching, error }] = useQuery<SelectProjectsQueryQuery>({
     query: SelectProjectsQuery,
   });
   const onSelectAccount = React.useCallback(
-    (account: SelectProjectsQueryQuery["viewer"]["accounts"][number]) => {
+    (account: NonNullable<SelectProjectsQueryQuery["viewer"]>["accounts"][number]) => {
       setSelectedAccount(account);
     },
     [setSelectedAccount]
@@ -123,7 +123,13 @@ function SelectProject({
   const [isSelectingProject, setSelectingProject] = useState(false);
 
   const handleSelectProject = React.useCallback(
-    (project: SelectProjectsQueryQuery["viewer"]["accounts"][number]["projects"][number]) => {
+    (
+      project: NonNullable<
+        NonNullable<
+          NonNullable<SelectProjectsQueryQuery["viewer"]>["accounts"][number]["projects"]
+        >[number]
+      >
+    ) => {
       setSelectingProject(true);
       const { id: projectId, projectToken } = project;
       onSelectProjectId(projectId, projectToken);
@@ -142,7 +148,7 @@ function SelectProject({
           <Stack>
             {fetching && <p>Loading...</p>}
             {error && <p>{error.message}</p>}
-            {!fetching && data.viewer?.accounts && (
+            {!fetching && data?.viewer?.accounts && (
               <>
                 <Heading>Select a Project</Heading>
                 <Text>Baselines will be used with this project.</Text>
@@ -154,7 +160,12 @@ function SelectProject({
                         <ListItem
                           key={account.id}
                           title={account.name}
-                          left={<RepositoryOwnerAvatar src={account.avatarUrl} size="tiny" />}
+                          left={
+                            <RepositoryOwnerAvatar
+                              src={account.avatarUrl ?? undefined}
+                              size="tiny"
+                            />
+                          }
                           onClick={() => onSelectAccount(account)}
                           active={selectedAccount?.id === account.id}
                         />
@@ -164,16 +175,19 @@ function SelectProject({
                   <Right>
                     <ListHeading>Projects</ListHeading>
                     <List data-testid="right-list">
-                      {selectedAccount?.projects?.map((project) => (
-                        <ListItem
-                          appearance="secondary"
-                          key={project.id}
-                          title={project.name}
-                          right={<Icons icon="add" aria-label={project.name} />}
-                          onClick={() => handleSelectProject(project)}
-                          disabled={isSelectingProject}
-                        />
-                      ))}
+                      {selectedAccount?.projects?.map(
+                        (project) =>
+                          project && (
+                            <ListItem
+                              appearance="secondary"
+                              key={project.id}
+                              title={project.name}
+                              right={<Icons icon="add" aria-label={project.name} />}
+                              onClick={() => handleSelectProject(project)}
+                              disabled={isSelectingProject}
+                            />
+                          )
+                      )}
                     </List>
                   </Right>
                 </ProjectPicker>
diff --git a/src/screens/VisualTests/BuildEyebrow.tsx b/src/screens/VisualTests/BuildEyebrow.tsx
index 978ed6d3..80fc206b 100644
--- a/src/screens/VisualTests/BuildEyebrow.tsx
+++ b/src/screens/VisualTests/BuildEyebrow.tsx
@@ -93,11 +93,11 @@ const StepIcon = styled(Icons)(
 );
 
 type BuildProgressProps = {
-  localBuildProgress?: LocalBuildProgress;
+  localBuildProgress: LocalBuildProgress;
   expanded?: boolean;
 };
 
-const BuildProgress = ({ localBuildProgress, expanded }: BuildProgressProps) => {
+const BuildProgress = ({ localBuildProgress, expanded = false }: BuildProgressProps) => {
   const stepHistory = useRef<
     Partial<Record<LocalBuildProgress["currentStep"], LocalBuildProgress>>
   >({});
diff --git a/src/screens/VisualTests/BuildResults.tsx b/src/screens/VisualTests/BuildResults.tsx
index 7dbed941..1eaa9f05 100644
--- a/src/screens/VisualTests/BuildResults.tsx
+++ b/src/screens/VisualTests/BuildResults.tsx
@@ -15,6 +15,7 @@ import {
   LastBuildOnBranchBuildFieldsFragment,
   ReviewTestBatch,
   SelectedBuildFieldsFragment,
+  StoryTestFieldsFragment,
   TestResult,
 } from "../../gql/graphql";
 import { LocalBuildProgress } from "../../types";
@@ -27,15 +28,15 @@ import { Warnings } from "./Warnings";
 
 interface BuildResultsProps {
   branch: string;
-  localBuildProgress: LocalBuildProgress;
-  selectedBuild?: SelectedBuildFieldsFragment;
-  lastBuildOnBranch: LastBuildOnBranchBuildFieldsFragment;
+  localBuildProgress?: LocalBuildProgress;
+  selectedBuild: SelectedBuildFieldsFragment;
+  lastBuildOnBranch?: LastBuildOnBranchBuildFieldsFragment;
   lastBuildOnBranchCompletedStory: boolean;
   switchToLastBuildOnBranch?: () => void;
   startDevBuild: () => void;
   userCanReview: boolean;
   isReviewing: boolean;
-  onAccept: (testId: string, batch: ReviewTestBatch) => Promise<void>;
+  onAccept: (testId: StoryTestFieldsFragment["id"], batch?: ReviewTestBatch) => void;
   onUnaccept: (testId: string) => Promise<void>;
   setAccessToken: (accessToken: string | null) => void;
 }
@@ -65,29 +66,33 @@ export const BuildResults = ({
   const storyTests = [
     ...getFragment(
       FragmentStoryTestFields,
-      selectedBuild && "testsForStory" in selectedBuild ? selectedBuild.testsForStory.nodes : []
+      selectedBuild && "testsForStory" in selectedBuild && selectedBuild.testsForStory
+        ? selectedBuild.testsForStory.nodes
+        : []
     ),
   ];
 
-  const isReviewable = lastBuildOnBranch.id === selectedBuild?.id;
+  const isReviewable = lastBuildOnBranch?.id === selectedBuild?.id;
   const isStorySuperseded = !isReviewable && lastBuildOnBranchCompletedStory;
   // Do we want to encourage them to switch to the next build?
   const shouldSwitchToLastBuildOnBranch = isStorySuperseded && !!switchToLastBuildOnBranch;
 
-  const lastBuildOnBranchInProgress = lastBuildOnBranch.status === BuildStatus.InProgress;
+  const lastBuildOnBranchInProgress = lastBuildOnBranch?.status === BuildStatus.InProgress;
   const showBuildStatus =
     // We always want to show the status of the running build (until it is done)
     isLocalBuildInProgress ||
     // Even if there's no build running, we need to tell them why they can't review, unless
     // the story is superseded and the UI is already telling them
     (!isReviewable && !shouldSwitchToLastBuildOnBranch);
-  const localBuildProgressIsNextBuild =
-    localBuildProgress && localBuildProgress?.buildId === lastBuildOnBranch.id;
+  const localBuildProgressIsLastBuildOnBranch =
+    localBuildProgress && localBuildProgress?.buildId === lastBuildOnBranch?.id;
   const buildStatus = showBuildStatus && (
     <BuildEyebrow
       branch={branch}
       localBuildProgress={
-        (localBuildProgressIsNextBuild || isLocalBuildInProgress) && localBuildProgress
+        localBuildProgressIsLastBuildOnBranch || isLocalBuildInProgress
+          ? localBuildProgress
+          : undefined
       }
       lastBuildOnBranchInProgress={lastBuildOnBranchInProgress}
       switchToLastBuildOnBranch={switchToLastBuildOnBranch}
diff --git a/src/screens/VisualTests/NoBuild.tsx b/src/screens/VisualTests/NoBuild.tsx
index 54aad19a..33c26a58 100644
--- a/src/screens/VisualTests/NoBuild.tsx
+++ b/src/screens/VisualTests/NoBuild.tsx
@@ -13,11 +13,11 @@ import { Text as CenterText } from "../../components/Text";
 import { LocalBuildProgress } from "../../types";
 
 interface NoBuildProps {
-  error: CombinedError;
+  error?: CombinedError;
   hasData: boolean;
   hasStoryBuild: boolean;
   startDevBuild: () => void;
-  localBuildProgress: LocalBuildProgress;
+  localBuildProgress?: LocalBuildProgress;
   branch: string;
   setAccessToken: (accessToken: string | null) => void;
 }
diff --git a/src/screens/VisualTests/SnapshotComparison.stories.tsx b/src/screens/VisualTests/SnapshotComparison.stories.tsx
index 586149da..d182e2a0 100644
--- a/src/screens/VisualTests/SnapshotComparison.stories.tsx
+++ b/src/screens/VisualTests/SnapshotComparison.stories.tsx
@@ -4,7 +4,13 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { screen, userEvent, within } from "@storybook/testing-library";
 import React, { ComponentProps } from "react";
 
-import { Browser, CaptureErrorKind, ComparisonResult, TestStatus } from "../../gql/graphql";
+import {
+  Browser,
+  CaptureErrorKind,
+  ComparisonResult,
+  StoryTestFieldsFragment,
+  TestStatus,
+} from "../../gql/graphql";
 import { playAll } from "../../utils/playAll";
 import { makeTest, makeTests } from "../../utils/storyData";
 import { SnapshotComparison } from "./SnapshotComparison";
@@ -36,7 +42,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const InProgress: Story = {
+export const InProgress = {
   args: {
     tests: makeTests({
       browsers: [Browser.Chrome, Browser.Safari],
@@ -47,15 +53,15 @@ export const InProgress: Story = {
       ],
     }),
   },
-};
+} satisfies Story;
 
-export const WithMultipleTests: Story = {};
+export const WithMultipleTests = {} satisfies Story;
 
 /**
  * Sort of confusing situation where the only comparison with changes (1200px/Saf) is on the
  * "opposite" side of the current comparison (800px/Chrome)
  */
-export const WithMultipleTestsFirstPassed: Story = {
+export const WithMultipleTestsFirstPassed = {
   args: {
     tests: makeTests({
       browsers: [Browser.Chrome, Browser.Safari],
@@ -69,42 +75,42 @@ export const WithMultipleTestsFirstPassed: Story = {
       ],
     }),
   },
-};
+} satisfies Story;
 
-export const WithSingleTest: Story = {
+export const WithSingleTest = {
   args: {
     tests: [makeTest({ status: TestStatus.Pending })],
   },
-};
+} satisfies Story;
 
-export const WithSingleTestAccepting: Story = {
+export const WithSingleTestAccepting = {
   args: {
     ...WithSingleTest.args,
     isReviewing: true,
   },
-};
+} satisfies Story;
 
-export const WithSingleTestAccepted: Story = {
+export const WithSingleTestAccepted = {
   args: {
     tests: [makeTest({ status: TestStatus.Accepted })],
   },
-};
+} satisfies Story;
 
-export const WithSingleTestOutdated: Story = {
+export const WithSingleTestOutdated = {
   args: {
     ...WithSingleTest.args,
     isReviewable: false,
   },
-};
+} satisfies Story;
 
-export const WithSingleTestShowingBaseline: Story = {
+export const WithSingleTestShowingBaseline = {
   args: {
     tests: [makeTest({ status: TestStatus.Pending })],
     baselineImageVisible: true,
   },
-};
+} satisfies Story;
 
-export const SwitchingViewport: Story = {
+export const SwitchingViewport = {
   args: {
     tests: makeTests({
       browsers: [Browser.Chrome, Browser.Safari],
@@ -134,9 +140,9 @@ export const SwitchingViewport: Story = {
     const items = await screen.findAllByText("1200px");
     await userEvent.click(items[canvasIndex]);
   }),
-};
+} satisfies Story;
 
-export const SwitchingBrowser: Story = {
+export const SwitchingBrowser = {
   args: SwitchingViewport.args,
   play: playAll(async ({ canvasElement, canvasIndex }) => {
     const canvas = within(canvasElement);
@@ -145,18 +151,18 @@ export const SwitchingBrowser: Story = {
     const items = await screen.findAllByText("Safari");
     await userEvent.click(items[canvasIndex]);
   }),
-};
+} satisfies Story;
 
-export const SwitchingTests: Story = {
+export const SwitchingTests = {
   args: SwitchingViewport.args,
   render: function RenderSwitchingTests({ ...props }: ComponentProps<typeof SnapshotComparison>) {
-    const [tests, setTests] = React.useState(null);
+    const [tests, setTests] = React.useState<StoryTestFieldsFragment[]>();
     if (!tests) setTimeout(() => setTests([makeTest({})]), 0);
     return <SnapshotComparison {...props} tests={tests || props.tests} />;
   },
-};
+} satisfies Story;
 
-export const InteractionFailure: Story = {
+export const InteractionFailure = {
   args: {
     tests: [
       makeTest({
@@ -203,22 +209,22 @@ Ignored nodes: comments, script, style
       }),
     ],
   },
-};
+} satisfies Story;
 
-export const BatchAcceptOptions: Story = {
+export const BatchAcceptOptions = {
   args: WithSingleTest.args,
   play: playAll(async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const menu = await canvas.findByRole("button", { name: "Batch accept" });
     await userEvent.click(menu);
   }),
-};
+} satisfies Story;
 
-export const BatchAcceptedBuild: Story = {
+export const BatchAcceptedBuild = {
   args: WithSingleTest.args,
   play: playAll(BatchAcceptOptions, async ({ args, canvasIndex }) => {
     const items = await screen.findAllByText("Accept entire build");
     await userEvent.click(items[canvasIndex]);
     await expect(args.onAccept).toHaveBeenCalledWith(args.tests[0].id, "BUILD");
   }),
-};
+} satisfies Story;
diff --git a/src/screens/VisualTests/SnapshotComparison.tsx b/src/screens/VisualTests/SnapshotComparison.tsx
index caba8639..f2b6ed4f 100644
--- a/src/screens/VisualTests/SnapshotComparison.tsx
+++ b/src/screens/VisualTests/SnapshotComparison.tsx
@@ -218,16 +218,16 @@ export const SnapshotComparison = ({
       {isInProgress && <Loader />}
       {!isInProgress && selectedComparison && (
         <SnapshotImage
-          componentName={selectedTest.story.component.name}
-          storyName={selectedTest.story.name}
+          componentName={selectedTest.story?.component?.name}
+          storyName={selectedTest.story?.name}
           testUrl={selectedTest.webUrl}
-          comparisonResult={selectedComparison.result}
+          comparisonResult={selectedComparison.result ?? undefined}
           captureImage={
             baselineImageVisible
-              ? selectedComparison.baseCapture?.captureImage
-              : selectedComparison.headCapture?.captureImage
+              ? selectedComparison.baseCapture?.captureImage ?? undefined
+              : selectedComparison.headCapture?.captureImage ?? undefined
           }
-          diffImage={selectedComparison.captureDiff?.diffImage}
+          diffImage={selectedComparison.captureDiff?.diffImage ?? undefined}
           diffVisible={diffVisible}
           focusVisible={focusVisible}
         />
diff --git a/src/screens/VisualTests/StoryInfo.stories.ts b/src/screens/VisualTests/StoryInfo.stories.ts
index 0e150bce..ce1b2be4 100644
--- a/src/screens/VisualTests/StoryInfo.stories.ts
+++ b/src/screens/VisualTests/StoryInfo.stories.ts
@@ -20,12 +20,12 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Starting: Story = {
-  args: { isStarting: true, startedAt: null },
+  args: { isStarting: true, startedAt: undefined },
 };
 
 // Announced -> Prepared are indistiguishable from Starting currently
 export const Announced: Story = {
-  args: { isStarting: true, startedAt: null },
+  args: { isStarting: true, startedAt: undefined },
 };
 
 // The build hasn't start properly yet but is already superseded by another build
diff --git a/src/screens/VisualTests/StoryInfo.tsx b/src/screens/VisualTests/StoryInfo.tsx
index cd26a58f..5e3edda5 100644
--- a/src/screens/VisualTests/StoryInfo.tsx
+++ b/src/screens/VisualTests/StoryInfo.tsx
@@ -42,7 +42,9 @@ export const StoryInfo = ({
     summarizeTests(tests ?? []);
 
   const startedAgo =
-    !isStarting && formatDistance(new Date(startedAt), new Date(), { addSuffix: true });
+    !isStarting &&
+    startedAt &&
+    formatDistance(new Date(startedAt), new Date(), { addSuffix: true });
   // isRunning means either we have no tests or they are unfinished
   const isRunning = isStarting || isInProgress;
   // isFailed means either the whole build failed or the story did
@@ -115,7 +117,9 @@ export const StoryInfo = ({
           )}
           {modeResults.length > 0 && " • "}
           {isInProgress && <span>Test in progress...</span>}
-          {!isInProgress && <span title={new Date(startedAt).toUTCString()}>{startedAgo}</span>}
+          {!isInProgress && startedAt && (
+            <span title={new Date(startedAt).toUTCString()}>{startedAgo}</span>
+          )}
         </small>
       </Text>
     );
diff --git a/src/screens/VisualTests/VisualTests.stories.tsx b/src/screens/VisualTests/VisualTests.stories.tsx
index cd2a4b94..1e9206d5 100644
--- a/src/screens/VisualTests/VisualTests.stories.tsx
+++ b/src/screens/VisualTests/VisualTests.stories.tsx
@@ -127,12 +127,13 @@ const withGraphQLQuery = (...args: Parameters<typeof graphql.query>) => ({
   },
 });
 
-function withGraphQLQueryResult<TQuery extends TypedDocumentNode>(
+function withGraphQLQueryResult<TQuery extends TypedDocumentNode<any, any>>(
   query: TQuery,
   result: ResultOf<TQuery>
 ) {
-  const queryName = getOperationAST(query).name.value;
-  return withGraphQLQuery(queryName, (req, res, ctx) => res(ctx.data(result)));
+  const queryName = getOperationAST(query)?.name?.value;
+  if (queryName) return withGraphQLQuery(queryName, (req, res, ctx) => res(ctx.data(result)));
+  throw new Error(`Couldn't determine query name from query`);
 }
 
 const withGraphQLMutation = (...args: Parameters<typeof graphql.mutation>) => ({
@@ -193,7 +194,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Loading: Story = {
+export const Loading = {
   parameters: {
     ...withGraphQLQuery("AddonVisualTestsBuild", (req, res, ctx) =>
       res(ctx.status(200), ctx.data({}), ctx.delay("infinite"))
@@ -202,19 +203,19 @@ export const Loading: Story = {
       "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=508-304933&t=0rxMQnkxsVpVj1qy-4"
     ),
   },
-};
+} satisfies Story;
 
-export const GraphQLError: Story = {
+export const GraphQLError = {
   parameters: {
     ...withGraphQLQuery("AddonVisualTestsBuild", (req, res, ctx) =>
       res(ctx.status(200), ctx.errors([{ message: "Something went wrong on the server" }]))
     ),
   },
-};
+} satisfies Story;
 
-export const EmptyBranch: Story = {
+export const EmptyBranch = {
   parameters: {
-    ...withBuilds({ selectedBuild: null }),
+    ...withBuilds({ selectedBuild: undefined }),
   },
   render: ({ ...args }) => {
     // custom render for mapping `updateBuildStatus` to a function which is mocked, but returns data instead of a function
@@ -230,9 +231,9 @@ export const EmptyBranch: Story = {
       expect(args.updateBuildStatus).toHaveBeenCalledWith({});
     });
   },
-};
+} satisfies Story;
 
-export const EmptyBranchStartedLocalBuild: Story = {
+export const EmptyBranchStartedLocalBuild = {
   ...EmptyBranch,
   args: {
     localBuildProgress: {
@@ -244,9 +245,9 @@ export const EmptyBranchStartedLocalBuild: Story = {
       },
     },
   },
-};
+} satisfies Story;
 
-export const EmptyBranchLocalBuildUploading: Story = {
+export const EmptyBranchLocalBuildUploading = {
   ...EmptyBranch,
   args: {
     localBuildProgress: {
@@ -263,12 +264,12 @@ export const EmptyBranchLocalBuildUploading: Story = {
       },
     },
   },
-};
+} satisfies Story;
 
 /** This story should maintain the "no build" UI with a progress bar */
-export const EmptyBranchLocalBuildCapturing: Story = {
+export const EmptyBranchLocalBuildCapturing = {
   parameters: {
-    ...withBuilds({ selectedBuild: null, lastBuildOnBranch: inProgressBuild }),
+    ...withBuilds({ selectedBuild: undefined, lastBuildOnBranch: inProgressBuild }),
   },
   args: {
     localBuildProgress: {
@@ -285,13 +286,13 @@ export const EmptyBranchLocalBuildCapturing: Story = {
       },
     },
   },
-};
+} satisfies Story;
 
 /** At this point, we should switch to the next build */
-export const EmptyBranchLocalBuildCapturedCurrentStory: Story = {
+export const EmptyBranchLocalBuildCapturedCurrentStory = {
   parameters: {
     ...withBuilds({
-      selectedBuild: null,
+      selectedBuild: undefined,
       lastBuildOnBranch: withTests(
         inProgressBuild,
         SnapshotComparisonStories.WithSingleTest.args.tests
@@ -311,44 +312,44 @@ export const EmptyBranchLocalBuildCapturedCurrentStory: Story = {
       },
     },
   },
-};
+} satisfies Story;
 
 /** Complete builds should always be switched to */
-export const EmptyBranchCIBuildPending: Story = {
+export const EmptyBranchCIBuildPending = {
   parameters: {
     ...withBuilds({
-      selectedBuild: null,
+      selectedBuild: undefined,
       lastBuildOnBranch: pendingBuild,
     }),
   },
   // In theory we might have a complete running build here, it should behave the same either way
-};
+} satisfies Story;
 
-export const NoChanges: Story = {
+export const NoChanges = {
   parameters: {
     ...withBuilds({ selectedBuild: passedBuild }),
     ...withFigmaDesign(
       "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=508-304933&t=0rxMQnkxsVpVj1qy-4"
     ),
   },
-};
+} satisfies Story;
 
 /**
  * We've started a new build but it's not done yet
  */
-export const PendingLocalBuildStarting: Story = {
+export const PendingLocalBuildStarting = {
   args: {
     ...EmptyBranchStartedLocalBuild.args,
   },
   parameters: {
     ...withBuilds({ selectedBuild: pendingBuild }),
   },
-};
+} satisfies Story;
 
 /**
  * As above but we started the next build
  */
-export const PendingLocalBuildCapturing: Story = {
+export const PendingLocalBuildCapturing = {
   parameters: {
     ...withBuilds({
       selectedBuild: pendingBuild,
@@ -358,12 +359,12 @@ export const PendingLocalBuildCapturing: Story = {
   args: {
     ...EmptyBranchLocalBuildCapturing.args,
   },
-};
+} satisfies Story;
 
 /**
  * The next build is snapshotting and has captured this story
  */
-export const PendingLocalBuildCapturedStory: Story = {
+export const PendingLocalBuildCapturedStory = {
   ...PendingLocalBuildCapturing,
   parameters: {
     ...withBuilds({
@@ -377,28 +378,28 @@ export const PendingLocalBuildCapturedStory: Story = {
       "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=2303-374529&t=qjmuGHxoALrVuhvX-0"
     ),
   },
-};
+} satisfies Story;
 
 /**
  * The next build is snapshotting but hasn't yet reached this story (we didn't start it)
  */
-export const PendingCIBuildInProgress: Story = {
+export const PendingCIBuildInProgress = {
   parameters: PendingLocalBuildCapturing.parameters,
-};
+} satisfies Story;
 
 /**
  * The next build is snapshotting and has captured this story
  */
-export const PendingCIBuildCapturedStory: Story = {
+export const PendingCIBuildCapturedStory = {
   parameters: {
     ...PendingLocalBuildCapturedStory.parameters,
     ...withFigmaDesign(
       "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=2303-374529&t=qjmuGHxoALrVuhvX-0"
     ),
   },
-};
+} satisfies Story;
 
-export const Pending: Story = {
+export const Pending = {
   parameters: {
     ...withBuilds({ selectedBuild: pendingBuild }),
     ...withFigmaDesign(
@@ -425,36 +426,36 @@ export const Pending: Story = {
       });
     });
   },
-};
+} satisfies Story;
 
-export const NoPermission: Story = {
+export const NoPermission = {
   parameters: {
     ...withBuilds({ selectedBuild: pendingBuild, userCanReview: false }),
     ...withFigmaDesign(
       "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=2127-449276&mode=design&t=gIM40WT0324ynPQD-4"
     ),
   },
-};
+} satisfies Story;
 
-export const NoPermissionRunning: Story = {
+export const NoPermissionRunning = {
   parameters: {
     ...withBuilds({ selectedBuild: inProgressBuild, userCanReview: false }),
     ...withFigmaDesign(
       "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=2127-449276&mode=design&t=gIM40WT0324ynPQD-4"
     ),
   },
-};
+} satisfies Story;
 
-export const NoPermissionNoChanges: Story = {
+export const NoPermissionNoChanges = {
   parameters: {
     ...withBuilds({ selectedBuild: passedBuild, userCanReview: false }),
     ...withFigmaDesign(
       "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=2127-449276&mode=design&t=gIM40WT0324ynPQD-4"
     ),
   },
-};
+} satisfies Story;
 
-export const ToggleSnapshot: Story = {
+export const ToggleSnapshot = {
   parameters: {
     ...withBuilds({ selectedBuild: pendingBuild }),
     ...withFigmaDesign(
@@ -465,9 +466,9 @@ export const ToggleSnapshot: Story = {
     const button = await findByTestId(canvasElement, "button-toggle-snapshot");
     await fireEvent.click(button);
   }),
-};
+} satisfies Story;
 
-export const Accepting: Story = {
+export const Accepting = {
   parameters: {
     msw: {
       handlers: [
@@ -485,9 +486,9 @@ export const Accepting: Story = {
     const button = await findByRole(canvasElement, "button", { name: "Accept" });
     await fireEvent.click(button);
   }),
-};
+} satisfies Story;
 
-export const AcceptingFailed: Story = {
+export const AcceptingFailed = {
   parameters: {
     msw: {
       handlers: [
@@ -505,18 +506,18 @@ export const AcceptingFailed: Story = {
       expect(argsByTarget["manager-api"].addNotification).toHaveBeenCalled()
     );
   }),
-};
+} satisfies Story;
 
-export const Accepted: Story = {
+export const Accepted = {
   parameters: {
     ...withBuilds({ selectedBuild: acceptedBuild }),
     ...withFigmaDesign(
       "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=508-305053&t=0rxMQnkxsVpVj1qy-4"
     ),
   },
-};
+} satisfies Story;
 
-export const Skipped: Story = {
+export const Skipped = {
   args: {
     storyId: "button--tertiary",
   },
@@ -537,18 +538,18 @@ export const Skipped: Story = {
       "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=2255-42087&t=a8NRPgQk3kXMyxqZ-0"
     ),
   },
-};
+} satisfies Story;
 
-export const CaptureError: Story = {
+export const CaptureError = {
   parameters: {
     ...withBuilds({ selectedBuild: brokenBuild }),
     ...withFigmaDesign(
       "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=508-305053&t=0rxMQnkxsVpVj1qy-4"
     ),
   },
-};
+} satisfies Story;
 
-export const InteractionFailure: Story = {
+export const InteractionFailure = {
   parameters: {
     ...withBuilds({
       selectedBuild: withTests(
@@ -560,26 +561,26 @@ export const InteractionFailure: Story = {
       "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=508-305053&t=0rxMQnkxsVpVj1qy-4"
     ),
   },
-};
+} satisfies Story;
 
-export const InfrastructureError: Story = {
+export const InfrastructureError = {
   parameters: {
     ...withBuilds({ selectedBuild: failedBuild }),
   },
-};
+} satisfies Story;
 
 /** The new build is newer than the story build (but we didn't run it) */
-export const CIBuildNewer: Story = {
+export const CIBuildNewer = {
   parameters: {
     ...withBuilds({
       selectedBuild: pendingBuild,
       lastBuildOnBranch: { ...pendingBuild, id: "2", committedAt: meta.args.gitInfo.committedAt },
     }),
   },
-};
+} satisfies Story;
 
 /** The new build is newer than the story build and the git info */
-export const CIBuildNewerThanCommit: Story = {
+export const CIBuildNewerThanCommit = {
   parameters: {
     ...withBuilds({
       selectedBuild: pendingBuild,
@@ -590,9 +591,9 @@ export const CIBuildNewerThanCommit: Story = {
       },
     }),
   },
-};
+} satisfies Story;
 
-// export const RenderSettings: Story = {
+// export const RenderSettings = {
 //   parameters: {
 //     ...withFigmaDesign(
 //       "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=508-525764&t=18c1zI1SMe76dWYk-4"
@@ -602,9 +603,9 @@ export const CIBuildNewerThanCommit: Story = {
 //     const button = await findByRole(canvasElement, "button", { name: "Show render settings" });
 //     await fireEvent.click(button);
 //   }),
-// };
+// } satisfies Story;
 
-// export const Warnings: Story = {
+// export const Warnings = {
 //   parameters: {
 //     ...withFigmaDesign(
 //       "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=516-672810&t=18c1zI1SMe76dWYk-4"
@@ -614,4 +615,4 @@ export const CIBuildNewerThanCommit: Story = {
 //     const button = await findByRole(canvasElement, "button", { name: "Show warnings" });
 //     await fireEvent.click(button);
 //   }),
-// };
+// } satisfies Story;
diff --git a/src/screens/VisualTests/VisualTests.tsx b/src/screens/VisualTests/VisualTests.tsx
index 73de2fd9..810af0ab 100644
--- a/src/screens/VisualTests/VisualTests.tsx
+++ b/src/screens/VisualTests/VisualTests.tsx
@@ -4,7 +4,12 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useMutation, useQuery } from "urql";
 
 import { getFragment } from "../../gql";
-import { ReviewTestBatch, ReviewTestInputStatus, TestStatus } from "../../gql/graphql";
+import {
+  ReviewTestBatch,
+  ReviewTestInputStatus,
+  StoryTestFieldsFragment,
+  TestStatus,
+} from "../../gql/graphql";
 import { GitInfoPayload, LocalBuildProgress, UpdateStatusFunction } from "../../types";
 import { statusMap, testsToStatusUpdate } from "../../utils/testsToStatusUpdate";
 import { SelectedBuildInfo, updateSelectedBuildInfo } from "../../utils/updateSelectedBuildInfo";
@@ -73,7 +78,7 @@ export const VisualTests = ({
     return () => clearInterval(interval);
   }, [rerun]);
 
-  const { userCanReview } = data?.viewer?.projectMembership || {};
+  const { userCanReview = false } = data?.viewer?.projectMembership || {};
 
   const [{ fetching: isReviewing }, reviewTest] = useMutation(MutationReviewTest);
 
@@ -93,27 +98,30 @@ export const VisualTests = ({
         }
         rerun();
       } catch (err) {
-        addNotification({
-          id: "chromatic/errorAccepting",
-          link: undefined,
-          content: {
-            headline: `Failed to ${
-              status === ReviewTestInputStatus.Accepted ? "accept" : "unaccept"
-            } changes`,
-            subHeadline: err.message,
-          },
-          icon: {
-            name: "cross",
-            color: "red",
-          },
-        });
+        if (err instanceof Error) {
+          addNotification({
+            id: "chromatic/errorAccepting",
+            // @ts-expect-error we need a better API for not passing a link
+            link: undefined,
+            content: {
+              headline: `Failed to ${
+                status === ReviewTestInputStatus.Accepted ? "accept" : "unaccept"
+              } changes`,
+              subHeadline: err.message,
+            },
+            icon: {
+              name: "cross",
+              color: "red",
+            },
+          });
+        }
       }
     },
     [addNotification, rerun, reviewTest]
   );
 
   const onAccept = useCallback(
-    async (testId: string, batch: ReviewTestBatch) =>
+    async (testId: StoryTestFieldsFragment["id"], batch?: ReviewTestBatch) =>
       onReview(ReviewTestInputStatus.Accepted, testId, batch),
     [onReview]
   );
@@ -131,19 +139,20 @@ export const VisualTests = ({
   const lastBuildOnBranchStoryTests = [
     ...getFragment(
       FragmentLastBuildOnBranchTestFields,
-      lastBuildOnBranch && "testsForStory" in lastBuildOnBranch
+      lastBuildOnBranch && "testsForStory" in lastBuildOnBranch && lastBuildOnBranch.testsForStory
         ? lastBuildOnBranch.testsForStory.nodes
         : []
     ),
   ];
   const lastBuildOnBranchCompletedStory =
-    lastBuildOnBranch &&
+    !!lastBuildOnBranch &&
     lastBuildOnBranchStoryTests.every(({ status }) => status !== TestStatus.InProgress);
 
   // Before we set the storyInfo, we use the lastBuildOnBranch for story data if it's ready
   const selectedBuild = getFragment(
     FragmentSelectedBuildFields,
-    data?.selectedBuild ?? (lastBuildOnBranchCompletedStory && data?.project?.lastBuildOnBranch)
+    data?.selectedBuild ??
+      (lastBuildOnBranchCompletedStory ? data?.project?.lastBuildOnBranch : undefined)
   );
 
   // Currently only used by the sidebar button to show a blue dot ("build outdated")
@@ -153,19 +162,21 @@ export const VisualTests = ({
   // If the next build is *newer* than the current commit, we don't want to switch to the build
   const lastBuildOnBranchNewer =
     lastBuildOnBranch && lastBuildOnBranch.committedAt > gitInfo.committedAt;
-  const canSwitchToLastBuildOnBranch = lastBuildOnBranch && !lastBuildOnBranchNewer;
+  const canSwitchToLastBuildOnBranch = !!lastBuildOnBranch && !lastBuildOnBranchNewer;
 
   // We always set status to the next build's status, as when we change to a new story we'll see
   // the next builds
   const testsForStatus =
     lastBuildOnBranch &&
     "testsForStatus" in lastBuildOnBranch &&
+    lastBuildOnBranch.testsForStatus &&
     getFragment(FragmentStatusTestFields, lastBuildOnBranch.testsForStatus.nodes);
 
   const buildStatusUpdate =
-    canSwitchToLastBuildOnBranch && testsForStatus && testsToStatusUpdate(testsForStatus);
+    canSwitchToLastBuildOnBranch && testsForStatus ? testsToStatusUpdate(testsForStatus) : {};
 
   useEffect(() => {
+    // @ts-expect-error The return type of this function is wrong in the API, it should allow `null` values
     updateBuildStatus((state) => ({
       ...createEmptyStoryStatusUpdate(state),
       ...buildStatusUpdate,
@@ -211,9 +222,9 @@ export const VisualTests = ({
       {...{
         branch: gitInfo.branch,
         localBuildProgress,
-        lastBuildOnBranch,
+        ...(lastBuildOnBranch && { lastBuildOnBranch }),
         lastBuildOnBranchCompletedStory,
-        switchToLastBuildOnBranch: canSwitchToLastBuildOnBranch && switchToLastBuildOnBranch,
+        ...(canSwitchToLastBuildOnBranch && { switchToLastBuildOnBranch }),
         startDevBuild,
         userCanReview,
         isReviewing,
diff --git a/src/useAddonState/server.ts b/src/useAddonState/server.ts
index 95562730..5adf0b6b 100644
--- a/src/useAddonState/server.ts
+++ b/src/useAddonState/server.ts
@@ -71,11 +71,11 @@ export function useAddonState<T>(channel: Pick<Channel, "emit" | "on">, key: str
   ensureListening(channel);
 
   return {
-    get value() {
+    get value(): T | undefined {
       return apiGetAddonState(channel, key);
     },
 
-    set value(newValue: T) {
+    set value(newValue: T | undefined) {
       apiSetAddonState(channel, key, newValue);
     },
 
diff --git a/src/utils/aggregateResult.ts b/src/utils/aggregateResult.ts
index 2acd887d..70f00a40 100644
--- a/src/utils/aggregateResult.ts
+++ b/src/utils/aggregateResult.ts
@@ -1,6 +1,7 @@
 import { ComparisonResult } from "../gql/graphql";
 
 export const resultOrder = [
+  undefined,
   ComparisonResult.Equal,
   ComparisonResult.Fixed,
   ComparisonResult.Added,
diff --git a/src/utils/graphQLClient.tsx b/src/utils/graphQLClient.tsx
index 63a93332..9a2642d6 100644
--- a/src/utils/graphQLClient.tsx
+++ b/src/utils/graphQLClient.tsx
@@ -7,7 +7,7 @@ import { ACCESS_TOKEN_KEY, ADDON_ID, CHROMATIC_API_URL } from "../constants";
 
 export { Provider };
 
-let currentToken: string = localStorage.getItem(ACCESS_TOKEN_KEY);
+let currentToken: string | null = localStorage.getItem(ACCESS_TOKEN_KEY);
 const accessTokenSharedStateKey = `${ADDON_ID}/accessToken`;
 
 export const useAccessToken = () => {
@@ -16,7 +16,7 @@ export const useAccessToken = () => {
     token: currentToken,
   });
 
-  const updateToken = (newToken: string) => {
+  const updateToken = (newToken: string | null) => {
     currentToken = newToken;
     if (currentToken) {
       localStorage.setItem(ACCESS_TOKEN_KEY, currentToken);
diff --git a/src/utils/playAll.ts b/src/utils/playAll.ts
index 8210ddf0..d315aa2e 100644
--- a/src/utils/playAll.ts
+++ b/src/utils/playAll.ts
@@ -1,6 +1,7 @@
-import type { StoryObj } from "@storybook/react";
+import type { ReactRenderer } from "@storybook/react";
+import type { StoryAnnotations } from "@storybook/types";
 
-export function playAll<Story extends StoryObj>(
+export function playAll<Story extends StoryAnnotations<ReactRenderer>>(
   ...sequence: (Story | Story["play"])[]
 ): Story["play"] {
   return async (context) => {
diff --git a/src/utils/storyData.ts b/src/utils/storyData.ts
index 4215c130..4a7600f5 100644
--- a/src/utils/storyData.ts
+++ b/src/utils/storyData.ts
@@ -48,7 +48,9 @@ export function makeComparison(options: {
   browser?: Browser;
   viewport?: number;
   result?: ComparisonResult;
-  captureError?: StoryTestFieldsFragment["comparisons"][number]["headCapture"]["captureError"];
+  captureError?: NonNullable<
+    StoryTestFieldsFragment["comparisons"][number]["headCapture"]
+  >["captureError"];
 }): StoryTestFieldsFragment["comparisons"][number] {
   const { captureError, result = ComparisonResult.Equal } = options;
   return {
@@ -64,25 +66,25 @@ export function makeComparison(options: {
   };
 }
 
-const testResultToComparisonResult: Record<TestResult, ComparisonResult> = {
+const testResultToComparisonResult: Record<TestResult, ComparisonResult | undefined> = {
   [TestResult.Added]: ComparisonResult.Added,
   [TestResult.Changed]: ComparisonResult.Changed,
   [TestResult.Equal]: ComparisonResult.Equal,
   [TestResult.Removed]: ComparisonResult.Removed,
   [TestResult.CaptureError]: ComparisonResult.CaptureError,
   [TestResult.Fixed]: ComparisonResult.Fixed,
-  [TestResult.Skipped]: null, // Shouldn't have any comparisons
+  [TestResult.Skipped]: undefined, // Shouldn't have any comparisons
   [TestResult.SystemError]: ComparisonResult.SystemError,
 };
 
-const testStatusToTestResult: Record<TestStatus, TestResult> = {
+const testStatusToTestResult: Record<TestStatus, TestResult | undefined> = {
   [TestStatus.Failed]: TestResult.SystemError,
   [TestStatus.Broken]: TestResult.CaptureError,
   [TestStatus.Accepted]: TestResult.Changed,
   [TestStatus.Denied]: TestResult.Changed,
   [TestStatus.Pending]: TestResult.Changed,
   [TestStatus.Passed]: TestResult.Equal,
-  [TestStatus.InProgress]: null,
+  [TestStatus.InProgress]: undefined,
 };
 
 /**
@@ -97,7 +99,9 @@ export function makeTest(options: {
   browsers?: Browser[];
   viewport?: number;
   storyId?: string;
-  captureError?: StoryTestFieldsFragment["comparisons"][number]["headCapture"]["captureError"];
+  captureError?: NonNullable<
+    StoryTestFieldsFragment["comparisons"][number]["headCapture"]
+  >["captureError"];
 }): StoryTestFieldsFragment {
   const id = options.id || "11";
   const status = options.status || TestStatus.Passed;
@@ -120,7 +124,8 @@ export function makeTest(options: {
         id: `id${index}`,
         browser: browserKey,
         viewport: viewportWidth,
-        result: options.comparisonResults?.[index] ?? testResultToComparisonResult[result],
+        result:
+          options.comparisonResults?.[index] ?? (result && testResultToComparisonResult[result]),
         captureError: options.captureError,
       })
     );
diff --git a/src/utils/summarizeTests.test.ts b/src/utils/summarizeTests.test.ts
index ea1adbae..49bbd60b 100644
--- a/src/utils/summarizeTests.test.ts
+++ b/src/utils/summarizeTests.test.ts
@@ -31,14 +31,14 @@ const tests = [
   makeTest({
     id: "14",
     status: TestStatus.InProgress,
-    result: null,
+    result: undefined,
     viewport: 1600,
     comparisons: [
       makeComparison({
         id: "141",
         browser: Browser.Chrome,
         viewport: 1600,
-        result: null,
+        result: undefined,
       }),
       makeComparison({
         id: "142",
diff --git a/src/utils/summarizeTests.ts b/src/utils/summarizeTests.ts
index 0ecdd1a5..b6077708 100644
--- a/src/utils/summarizeTests.ts
+++ b/src/utils/summarizeTests.ts
@@ -2,12 +2,12 @@ import { ComparisonResult, StoryTestFieldsFragment, TestResult, TestStatus } fro
 import { aggregateResult } from "./aggregateResult";
 
 function pickStatus(statusCounts: { [K in TestStatus]?: number }) {
-  if (statusCounts[TestStatus.Failed] > 0) return TestStatus.Failed;
-  if (statusCounts[TestStatus.InProgress] > 0) return TestStatus.InProgress;
-  if (statusCounts[TestStatus.Broken] > 0) return TestStatus.Broken;
-  if (statusCounts[TestStatus.Denied] > 0) return TestStatus.Denied;
-  if (statusCounts[TestStatus.Pending] > 0) return TestStatus.Pending;
-  if (statusCounts[TestStatus.Accepted] > 0) return TestStatus.Accepted;
+  if ((statusCounts[TestStatus.Failed] ?? 0) > 0) return TestStatus.Failed;
+  if ((statusCounts[TestStatus.InProgress] ?? 0) > 0) return TestStatus.InProgress;
+  if ((statusCounts[TestStatus.Broken] ?? 0) > 0) return TestStatus.Broken;
+  if ((statusCounts[TestStatus.Denied] ?? 0) > 0) return TestStatus.Denied;
+  if ((statusCounts[TestStatus.Pending] ?? 0) > 0) return TestStatus.Pending;
+  if ((statusCounts[TestStatus.Accepted] ?? 0) > 0) return TestStatus.Accepted;
   return TestStatus.Passed;
 }
 
@@ -29,8 +29,8 @@ export function summarizeTests(tests: StoryTestFieldsFragment[]) {
     isInProgress: boolean;
     changeCount: number;
     brokenCount: number;
-    resultsByBrowser: Record<string, ComparisonResult>;
-    resultsByViewport: Record<string, ComparisonResult>;
+    resultsByBrowser: Record<string, ComparisonResult | undefined>;
+    resultsByViewport: Record<string, ComparisonResult | undefined>;
     viewportInfoById: Record<string, StoryTestFieldsFragment["parameters"]["viewport"]>;
   }>(
     (acc, test) => {
@@ -39,21 +39,21 @@ export function summarizeTests(tests: StoryTestFieldsFragment[]) {
       if (test.status === TestStatus.InProgress) {
         acc.isInProgress = true;
       }
-      if ([TestResult.Changed, TestResult.Added].includes(test.result)) {
+      if (test.result && [TestResult.Changed, TestResult.Added].includes(test.result)) {
         acc.changeCount += 1;
       }
-      if ([TestResult.CaptureError, TestResult.SystemError].includes(test.result)) {
+      if (test.result && [TestResult.CaptureError, TestResult.SystemError].includes(test.result)) {
         acc.brokenCount += 1;
       }
       test.comparisons?.forEach(({ browser, result }) => {
         acc.resultsByBrowser[browser.id] = aggregateResult([
-          result,
+          result ?? undefined,
           acc.resultsByBrowser[browser.id],
         ]);
       });
       test.comparisons?.forEach(({ viewport, result }) => {
         acc.resultsByViewport[viewport.id] = aggregateResult([
-          result,
+          result ?? undefined,
           acc.resultsByViewport[viewport.id],
         ]);
       });
diff --git a/src/utils/testsToStatusUpdate.test.ts b/src/utils/testsToStatusUpdate.test.ts
index 360e092d..896754b6 100644
--- a/src/utils/testsToStatusUpdate.test.ts
+++ b/src/utils/testsToStatusUpdate.test.ts
@@ -1,7 +1,7 @@
 import { TestStatus } from "../gql/graphql";
 import { testsToStatusUpdate } from "./testsToStatusUpdate";
 
-it("handles single test", () => {
+it("handles single test with no changes", () => {
   expect(
     testsToStatusUpdate([
       {
@@ -12,11 +12,29 @@ it("handles single test", () => {
         },
       },
     ])
+  ).toMatchInlineSnapshot(`
+    {
+      "story--id": null,
+    }
+  `);
+});
+
+it("handles single test with changes", () => {
+  expect(
+    testsToStatusUpdate([
+      {
+        id: "1",
+        status: TestStatus.Pending,
+        story: {
+          storyId: "story--id",
+        },
+      },
+    ])
   ).toMatchInlineSnapshot(`
     {
       "story--id": {
         "description": "Chromatic Visual Tests",
-        "status": undefined,
+        "status": "warn",
         "title": "Visual Tests",
       },
     }
diff --git a/src/utils/testsToStatusUpdate.ts b/src/utils/testsToStatusUpdate.ts
index 212fe0c4..b60d8582 100644
--- a/src/utils/testsToStatusUpdate.ts
+++ b/src/utils/testsToStatusUpdate.ts
@@ -9,27 +9,35 @@ export const statusMap: Partial<Record<TestStatus, API_StatusValue>> = {
   [TestStatus.Broken]: "error",
 };
 
-const statusOrder: API_StatusValue[] = ["unknown", "pending", "success", "warn", "error"];
-function chooseWorseStatus(status: API_StatusValue, oldStatus: API_StatusValue | null) {
-  if (!oldStatus) return status;
-
+const statusOrder: (API_StatusValue | null)[] = [
+  null,
+  "unknown",
+  "pending",
+  "success",
+  "warn",
+  "error",
+];
+function chooseWorseStatus(status: API_StatusValue | null, oldStatus: API_StatusValue | null) {
   return statusOrder[Math.max(statusOrder.indexOf(status), statusOrder.indexOf(oldStatus))];
 }
 
 export function testsToStatusUpdate<T extends StatusTestFieldsFragment>(
   tests: readonly T[]
 ): API_StatusUpdate {
-  const storyIdToStatus: Record<StoryId, API_StatusValue> = {};
+  const storyIdToStatus: Record<StoryId, API_StatusValue | null> = {};
   tests.forEach((test) => {
+    if (!test.story || !test.status) {
+      return;
+    }
     storyIdToStatus[test.story.storyId] = chooseWorseStatus(
-      statusMap[test.status],
+      statusMap[test.status] || null,
       storyIdToStatus[test.story.storyId]
     );
   });
   const update = Object.fromEntries(
     Object.entries(storyIdToStatus).map(([storyId, status]) => [
       storyId,
-      {
+      status && {
         status,
         title: "Visual Tests",
         description: "Chromatic Visual Tests",
@@ -37,5 +45,6 @@ export function testsToStatusUpdate<T extends StatusTestFieldsFragment>(
     ])
   );
 
+  // @ts-expect-error SB's API type is incorrect here you are allowed to pass null
   return update;
 }
diff --git a/src/utils/updateSelectedBuildInfo.ts b/src/utils/updateSelectedBuildInfo.ts
index 7fe1304c..a67b2bfa 100644
--- a/src/utils/updateSelectedBuildInfo.ts
+++ b/src/utils/updateSelectedBuildInfo.ts
@@ -11,7 +11,7 @@ export function updateSelectedBuildInfo(
     storyId,
   }: {
     shouldSwitchToLastBuildOnBranch: boolean;
-    lastBuildOnBranchId: string;
+    lastBuildOnBranchId?: string;
     storyId: string;
   }
 ) {
diff --git a/src/utils/useSignIn.ts b/src/utils/useSignIn.ts
index 25cc20ce..3083ecd6 100644
--- a/src/utils/useSignIn.ts
+++ b/src/utils/useSignIn.ts
@@ -13,7 +13,7 @@ const base64URLEncode = (val: any) =>
   base64(val).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
 
 const hexStringToBytes = (str: string) =>
-  Array.from(str.match(/.{1,2}/g), (byte) => parseInt(byte, 16));
+  Array.from(str.match(/.{1,2}/g) ?? [], (byte) => parseInt(byte, 16));
 
 const seed = () =>
   Math.random().toString(36).slice(2, 10) +
@@ -134,8 +134,8 @@ export const useSignIn = (options: {
   onSuccess: (token: string) => void;
   onFailure: () => void;
 }) => {
-  const [userCode, setUserCode] = useState(null);
-  const [verificationUrl, setVerificationUrl] = useState(null);
+  const [userCode, setUserCode] = useState<string>();
+  const [verificationUrl, setVerificationUrl] = useState<string>();
 
   const onSignIn = (subdomain?: string) =>
     signInWithRetry({ ...options, setUserCode, setVerificationUrl, subdomain });
diff --git a/tsconfig.json b/tsconfig.json
index df24f53f..1d8db671 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,6 +11,7 @@
     "lib": ["es2020", "dom"],
     "module": "commonjs",
     "noImplicitAny": true,
+    "strict": true,
     "rootDir": "./src",
     "skipLibCheck": true,
     "target": "ES2020"