diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index c4f90f4..b5dcacf 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -11,7 +11,7 @@ import { SendButton } from './SendButton.client';
 import styles from './BaseChat.module.scss';
 
 interface BaseChatProps {
-  textareaRef?: React.RefObject<HTMLTextAreaElement> | undefined;
+  textareaRef?: React.RefObject<HTMLTextAreaElement | null> | undefined;
   messageRef?: RefCallback<HTMLDivElement> | undefined;
   scrollRef?: RefCallback<HTMLDivElement> | undefined;
   showChat?: boolean;
diff --git a/app/components/editor/codemirror/CodeMirrorEditor.tsx b/app/components/editor/codemirror/CodeMirrorEditor.tsx
index 8e9f3a3..66a9156 100644
--- a/app/components/editor/codemirror/CodeMirrorEditor.tsx
+++ b/app/components/editor/codemirror/CodeMirrorEditor.tsx
@@ -135,10 +135,10 @@ export const CodeMirrorEditor = memo(
     const [languageCompartment] = useState(new Compartment());
 
     const containerRef = useRef<HTMLDivElement | null>(null);
-    const viewRef = useRef<EditorView>();
-    const themeRef = useRef<Theme>();
-    const docRef = useRef<EditorDocument>();
-    const editorStatesRef = useRef<EditorStates>();
+    const viewRef = useRef<EditorView | null>(null);
+    const themeRef = useRef<Theme | null>(null);
+    const docRef = useRef<EditorDocument | null>(null);
+    const editorStatesRef = useRef<EditorStates | null>(null);
     const onScrollRef = useRef(onScroll);
     const onChangeRef = useRef(onChange);
     const onSaveRef = useRef(onSave);
@@ -151,7 +151,7 @@ export const CodeMirrorEditor = memo(
       onScrollRef.current = onScroll;
       onChangeRef.current = onChange;
       onSaveRef.current = onSave;
-      docRef.current = doc;
+      docRef.current = doc ?? null;
       themeRef.current = theme;
     });
 
@@ -188,7 +188,7 @@ export const CodeMirrorEditor = memo(
 
       return () => {
         viewRef.current?.destroy();
-        viewRef.current = undefined;
+        viewRef.current = null;
       };
     }, []);
 
diff --git a/app/components/ui/IconButton.tsx b/app/components/ui/IconButton.tsx
index 4eef7fb..806da6c 100644
--- a/app/components/ui/IconButton.tsx
+++ b/app/components/ui/IconButton.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { memo } from 'react';
 import { classNames } from '~/utils/classNames';
 
@@ -20,7 +21,7 @@ type IconButtonWithoutChildrenProps = {
 
 type IconButtonWithChildrenProps = {
   icon?: undefined;
-  children: string | JSX.Element | JSX.Element[];
+  children: string | React.ReactElement | React.ReactElement[];
 } & BaseIconButtonProps;
 
 type IconButtonProps = IconButtonWithoutChildrenProps | IconButtonWithChildrenProps;
diff --git a/app/components/ui/PanelHeaderButton.tsx b/app/components/ui/PanelHeaderButton.tsx
index 9faea1c..2f9b9e8 100644
--- a/app/components/ui/PanelHeaderButton.tsx
+++ b/app/components/ui/PanelHeaderButton.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { memo } from 'react';
 import { classNames } from '~/utils/classNames';
 
@@ -5,7 +6,7 @@ interface PanelHeaderButtonProps {
   className?: string;
   disabledClassName?: string;
   disabled?: boolean;
-  children: string | JSX.Element | Array<JSX.Element | string>;
+  children: string | React.ReactElement | Array<React.ReactElement | string>;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
diff --git a/app/components/ui/Slider.tsx b/app/components/ui/Slider.tsx
index f332a6a..7f84a16 100644
--- a/app/components/ui/Slider.tsx
+++ b/app/components/ui/Slider.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { motion } from 'framer-motion';
 import { memo } from 'react';
 import { classNames } from '~/utils/classNames';
@@ -37,7 +38,7 @@ export const Slider = genericMemo(<T,>({ selected, options, setSelected }: Slide
 
 interface SliderButtonProps {
   selected: boolean;
-  children: string | JSX.Element | Array<JSX.Element | string>;
+  children: string | React.ReactElement | Array<React.ReactElement | string>;
   setSelected: () => void;
 }
 
diff --git a/app/components/workbench/FileBreadcrumb.tsx b/app/components/workbench/FileBreadcrumb.tsx
index 0ffbb2f..c643e53 100644
--- a/app/components/workbench/FileBreadcrumb.tsx
+++ b/app/components/workbench/FileBreadcrumb.tsx
@@ -87,7 +87,7 @@ export const FileBreadcrumb = memo<FileBreadcrumbProps>(({ files, pathSegments =
             <DropdownMenu.Root open={isActive} modal={false}>
               <DropdownMenu.Trigger asChild>
                 <span
-                  ref={(ref) => (segmentRefs.current[index] = ref)}
+                  ref={(ref) => { segmentRefs.current[index] = ref; }}
                   className={classNames('flex items-center gap-1.5 cursor-pointer shrink-0', {
                     'text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary': !isActive,
                     'text-bolt-elements-textPrimary underline': isActive,
diff --git a/app/components/workbench/Workbench.client.tsx b/app/components/workbench/Workbench.client.tsx
index b8142a6..9bed6c4 100644
--- a/app/components/workbench/Workbench.client.tsx
+++ b/app/components/workbench/Workbench.client.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useStore } from '@nanostores/react';
 import { motion, type HTMLMotionProps, type Variants } from 'framer-motion';
 import { computed } from 'nanostores';
@@ -175,7 +176,7 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
 });
 
 interface ViewProps extends HTMLMotionProps<'div'> {
-  children: JSX.Element;
+  children: React.ReactElement;
 }
 
 const View = memo(({ children, ...props }: ViewProps) => {
diff --git a/app/components/workbench/terminal/Terminal.tsx b/app/components/workbench/terminal/Terminal.tsx
index b9b84dc..7f474b7 100644
--- a/app/components/workbench/terminal/Terminal.tsx
+++ b/app/components/workbench/terminal/Terminal.tsx
@@ -23,7 +23,7 @@ export interface TerminalProps {
 export const Terminal = memo(
   forwardRef<TerminalRef, TerminalProps>(({ className, theme, readonly, onTerminalReady, onTerminalResize }, ref) => {
     const terminalElementRef = useRef<HTMLDivElement>(null);
-    const terminalRef = useRef<XTerm>();
+    const terminalRef = useRef<XTerm | null>(null);
 
     useEffect(() => {
       const element = terminalElementRef.current!;
diff --git a/app/lib/hooks/useSnapScroll.ts b/app/lib/hooks/useSnapScroll.ts
index 5c1565a..77efbf3 100644
--- a/app/lib/hooks/useSnapScroll.ts
+++ b/app/lib/hooks/useSnapScroll.ts
@@ -2,9 +2,9 @@ import { useRef, useCallback } from 'react';
 
 export function useSnapScroll() {
   const autoScrollRef = useRef(true);
-  const scrollNodeRef = useRef<HTMLDivElement>();
-  const onScrollRef = useRef<() => void>();
-  const observerRef = useRef<ResizeObserver>();
+  const scrollNodeRef = useRef<HTMLDivElement | null>(null);
+  const onScrollRef = useRef<(() => void) | null>(null);
+  const observerRef = useRef<ResizeObserver | null>(null);
 
   const messageRef = useCallback((node: HTMLDivElement | null) => {
     if (node) {
@@ -22,7 +22,7 @@ export function useSnapScroll() {
       observer.observe(node);
     } else {
       observerRef.current?.disconnect();
-      observerRef.current = undefined;
+      observerRef.current = null;
     }
   }, []);
 
@@ -43,8 +43,8 @@ export function useSnapScroll() {
         scrollNodeRef.current?.removeEventListener('scroll', onScrollRef.current);
       }
 
-      scrollNodeRef.current = undefined;
-      onScrollRef.current = undefined;
+      scrollNodeRef.current = null;
+      onScrollRef.current = null;
     }
   }, []);
 
diff --git a/app/utils/react.ts b/app/utils/react.ts
index f5d2b02..45319b6 100644
--- a/app/utils/react.ts
+++ b/app/utils/react.ts
@@ -1,6 +1,7 @@
+import * as React from 'react';
 import { memo } from 'react';
 
-export const genericMemo: <T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>>(
+export const genericMemo: <T extends keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<any>>(
   component: T,
   propsAreEqual?: (prevProps: React.ComponentProps<T>, nextProps: React.ComponentProps<T>) => boolean,
 ) => T & { displayName?: string } = memo;