upgraded all npm packages and fixed related issues (#4072)

ui/desktop/src/components/ChatInput.tsx

@@ -107,7 +107,7 @@ export default function ChatInput({
   // Derived state - chatState != Idle means we're in some form of loading state
   const isLoading = chatState !== ChatState.Idle;
   const { alerts, addAlert, clearAlerts } = useAlerts();
-  const dropdownRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
   const toolCount = useToolCount();
   const { isLoadingCompaction, handleManualCompaction } = useChatContextManager();
   const { getProviders, read } = useConfig();

ui/desktop/src/components/FlappyGoose.tsx

@@ -14,7 +14,6 @@ interface FlappyGooseProps {
 }
 
 const FlappyGoose: React.FC<FlappyGooseProps> = ({ onClose }) => {
-  // eslint-disable-next-line no-undef
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const [gameOver, setGameOver] = useState(false);
   const [displayScore, setDisplayScore] = useState(0);

ui/desktop/src/components/GooseMessage.tsx

@@ -42,7 +42,7 @@ export default function GooseMessage({
   appendMessage,
   isStreaming = false,
 }: GooseMessageProps) {
-  const contentRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement | null>(null);
   // Track which tool confirmations we've already handled to prevent infinite loops
   const handledToolConfirmations = useRef<Set<string>>(new Set());
 
@@ -228,6 +228,7 @@ export default function GooseMessage({
       </div>
 
       {/* TODO(alexhancock): Re-enable link previews once styled well again */}
+      {/* eslint-disable-next-line no-constant-binary-expression */}
       {false && urls.length > 0 && (
         <div className="flex flex-wrap mt-[16px]">
           {urls.map((url, index) => (
@@ -238,6 +239,7 @@ export default function GooseMessage({
 
       {/* enable or disable prompts here */}
       {/* NOTE from alexhancock on 1/14/2025 - disabling again temporarily due to non-determinism in when the forms show up */}
+      {/* eslint-disable-next-line no-constant-binary-expression */}
       {false && metadata && (
         <div className="flex mt-[16px]">
           <GooseResponseForm message={displayText} metadata={metadata || null} append={append} />

ui/desktop/src/components/GooseSidebar/AppSidebar.tsx

@@ -102,7 +102,7 @@ const AppSidebar: React.FC<SidebarProps> = ({ currentPath }) => {
     const timer = setTimeout(() => {
       // setIsVisible(true);
     }, 100);
-    // eslint-disable-next-line no-undef
+
     return () => clearTimeout(timer);
   }, []);
 

ui/desktop/src/components/MarkdownContent.tsx

@@ -108,25 +108,25 @@ export default function MarkdownContent({ content, className = '' }: MarkdownCon
   }, [content]);
 
   return (
-    <div className="w-full overflow-x-hidden">
+    <div
+      className={`w-full overflow-x-hidden prose prose-sm text-text-default dark:prose-invert max-w-full word-breakfont-sans
+      prose-pre:p-0 prose-pre:m-0 !p-0
+      prose-code:break-all prose-code:whitespace-pre-wrapprose-code:font-sans
+      prose-table:table prose-table:w-full
+      prose-blockquote:text-inherit
+      prose-td:border prose-td:border-border-default prose-td:p-2
+      prose-th:border prose-th:border-border-default prose-th:p-2
+      prose-thead:bg-background-default
+      prose-h1:text-2xl prose-h1:font-normal prose-h1:mb-5 prose-h1:mt-0prose-h1:font-sans
+      prose-h2:text-xl prose-h2:font-normal prose-h2:mb-4 prose-h2:mt-4prose-h2:font-sans
+      prose-h3:text-lg prose-h3:font-normal prose-h3:mb-3 prose-h3:mt-3prose-h3:font-sans
+      prose-p:mt-0 prose-p:mb-2prose-p:font-sans
+      prose-ol:my-2prose-ol:font-sans
+      prose-ul:mt-0 prose-ul:mb-3prose-ul:font-sans
+      prose-li:m-0prose-li:font-sans ${className}`}
+    >
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
-        className={`prose prose-sm text-text-default dark:prose-invert w-full max-w-full word-break font-sans
-          prose-pre:p-0 prose-pre:m-0 !p-0
-          prose-code:break-all prose-code:whitespace-pre-wrap prose-code:font-sans
-          prose-table:table prose-table:w-full
-          prose-blockquote:text-inherit
-          prose-td:border prose-td:border-border-default prose-td:p-2
-          prose-th:border prose-th:border-border-default prose-th:p-2
-          prose-thead:bg-background-default
-          prose-h1:text-2xl prose-h1:font-normal prose-h1:mb-5 prose-h1:mt-0 prose-h1:font-sans
-          prose-h2:text-xl prose-h2:font-normal prose-h2:mb-4 prose-h2:mt-4 prose-h2:font-sans
-          prose-h3:text-lg prose-h3:font-normal prose-h3:mb-3 prose-h3:mt-3 prose-h3:font-sans
-          prose-p:mt-0 prose-p:mb-2 prose-p:font-sans
-          prose-ol:my-2 prose-ol:font-sans
-          prose-ul:mt-0 prose-ul:mb-3 prose-ul:font-sans
-          prose-li:m-0 prose-li:font-sans
-          ${className}`}
         components={{
           a: ({ ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" />,
           code: MarkdownCode,

ui/desktop/src/components/MessageCopyLink.tsx

@@ -5,7 +5,7 @@ import { Copy } from './icons';
 
 interface MessageCopyLinkProps {
   text: string;
-  contentRef: React.RefObject<HTMLElement>;
+  contentRef: React.RefObject<HTMLDivElement | null>;
 }
 
 export default function MessageCopyLink({ text, contentRef }: MessageCopyLinkProps) {

ui/desktop/src/components/ModelAndProviderContext.tsx

@@ -115,9 +115,9 @@ export const ModelAndProviderProvider: React.FC<ModelAndProviderProviderProps> =
     try {
       model = (await read('GOOSE_MODEL', false)) as string;
       provider = (await read('GOOSE_PROVIDER', false)) as string;
-    } catch (error) {
+    } catch {
       console.error(`Failed to read GOOSE_MODEL or GOOSE_PROVIDER from config`);
-      throw error;
+      throw new Error('Failed to read GOOSE_MODEL or GOOSE_PROVIDER from config');
     }
     if (!model || !provider) {
       console.log('[getCurrentModelAndProvider] Checking app environment as fallback');
@@ -136,7 +136,7 @@ export const ModelAndProviderProvider: React.FC<ModelAndProviderProviderProps> =
 
     try {
       metadata = await getProviderMetadata(String(gooseProvider), getProviders);
-    } catch (error) {
+    } catch {
       return { model: gooseModel, provider: gooseProvider };
     }
     const providerDisplayName = metadata.display_name;
@@ -148,7 +148,7 @@ export const ModelAndProviderProvider: React.FC<ModelAndProviderProviderProps> =
     try {
       const currentModelName = (await read('GOOSE_MODEL', false)) as string;
       return getModelDisplayName(currentModelName);
-    } catch (error) {
+    } catch {
       return 'Select Model';
     }
   }, [read]);
@@ -163,7 +163,7 @@ export const ModelAndProviderProvider: React.FC<ModelAndProviderProviderProps> =
       // Fall back to regular provider display name lookup
       const { provider } = await getCurrentModelAndProviderForDisplay();
       return provider;
-    } catch (error) {
+    } catch {
       return '';
     }
   }, [read, getCurrentModelAndProviderForDisplay]);
@@ -173,8 +173,8 @@ export const ModelAndProviderProvider: React.FC<ModelAndProviderProviderProps> =
       const { model, provider } = await getCurrentModelAndProvider();
       setCurrentModel(model);
       setCurrentProvider(provider);
-    } catch (error) {
-      console.error('Failed to refresh current model and provider:', error);
+    } catch (_error) {
+      console.error('Failed to refresh current model and provider:', _error);
     }
   }, [getCurrentModelAndProvider]);
 

ui/desktop/src/components/ProgressiveMessageList.tsx

@@ -75,7 +75,7 @@ export default function ProgressiveMessageList({
     const contextManager = useChatContextManager();
     hasContextHandlerContent = contextManager.hasContextHandlerContent;
     getContextHandlerType = contextManager.getContextHandlerType;
-  } catch (error) {
+  } catch {
     // Context manager not available (e.g., in session history view)
     // This is fine, we'll just skip context handler functionality
     hasContextHandlerContent = undefined;

ui/desktop/src/components/RecipesView.tsx

@@ -88,7 +88,6 @@ export default function RecipesView({ _onLoadRecipe }: RecipesViewProps = {}) {
         }, 50);
       }, 300); // Show skeleton for at least 300ms
 
-      // eslint-disable-next-line no-undef
       return () => clearTimeout(timer);
     }
     return () => void 0;

ui/desktop/src/components/UserMessage.tsx

@@ -13,7 +13,7 @@ interface UserMessageProps {
 }
 
 export default function UserMessage({ message }: UserMessageProps) {
-  const contentRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement | null>(null);
 
   // Extract text content from the message
   const textContent = getTextContent(message);
@@ -63,6 +63,7 @@ export default function UserMessage({ message }: UserMessageProps) {
         </div>
 
         {/* TODO(alexhancock): Re-enable link previews once styled well again */}
+        {/* eslint-disable-next-line no-constant-binary-expression */}
         {false && urls.length > 0 && (
           <div className="flex flex-wrap mt-2">
             {urls.map((url, index) => (

ui/desktop/src/components/WaveformVisualizer.tsx

@@ -11,7 +11,7 @@ export const WaveformVisualizer: React.FC<WaveformVisualizerProps> = ({
   isRecording,
 }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const animationRef = useRef<number>();
+  const animationRef = useRef<number | null>(null);
 
   useEffect(() => {
     if (!canvasRef.current || !analyser || !isRecording) return;

ui/desktop/src/components/bottom_menu/BottomMenuAlertPopover.tsx

@@ -4,8 +4,6 @@ import { cn } from '../../utils';
 import { Alert, AlertType } from '../alerts';
 import { AlertBox } from '../alerts';
 
-const { clearTimeout } = window;
-
 interface AlertPopoverProps {
   alerts: Alert[];
 }
@@ -17,7 +15,7 @@ export default function BottomMenuAlertPopover({ alerts }: AlertPopoverProps) {
   const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0 });
   const [shouldShowIndicator, setShouldShowIndicator] = useState(false); // Stable indicator state
   const previousAlertsRef = useRef<Alert[]>([]);
-  const hideTimerRef = useRef<ReturnType<typeof setTimeout>>();
+  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
 

ui/desktop/src/components/bottom_menu/CostTracker.tsx

@@ -113,7 +113,7 @@ export function CostTracker({ inputTokens = 0, outputTokens = 0, sessionCosts }:
           }
           setIsLoading(false);
         }
-      } catch (error) {
+      } catch {
         setHasAttemptedFetch(true);
         // Only set pricing failed if we're not dealing with a known free provider
         const freeProviders = ['ollama', 'local', 'localhost'];

ui/desktop/src/components/conversation/SearchBar.tsx

@@ -20,7 +20,7 @@ interface SearchBarProps {
     currentIndex: number;
   };
   /** Optional ref for the search input element */
-  inputRef?: React.RefObject<HTMLInputElement>;
+  inputRef?: React.RefObject<HTMLInputElement | null>;
   /** Initial search term */
   initialSearchTerm?: string;
 }
@@ -41,7 +41,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
   const [isExiting, setIsExiting] = useState(false);
   const internalInputRef = React.useRef<HTMLInputElement>(null);
   const inputRef = externalInputRef || internalInputRef;
-  const debouncedSearchRef = useRef<ReturnType<typeof debounce>>();
+  const debouncedSearchRef = useRef<ReturnType<typeof debounce> | null>(null);
 
   // Create debounced search function
   useEffect(() => {

ui/desktop/src/components/conversation/SearchView.tsx

@@ -44,7 +44,7 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
     count: number;
   } | null>(null);
 
-  const searchInputRef = React.useRef<HTMLInputElement>(null);
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
   const highlighterRef = React.useRef<SearchHighlighter | null>(null);
   const containerRef = React.useRef<SearchContainerElement | null>(null);
   const lastSearchRef = React.useRef<{ term: string; caseSensitive: boolean }>({

ui/desktop/src/components/icons/TrashIcon.tsx

@@ -1,6 +1,8 @@
 // /Users/mnovich/Development/goose-1.0/ui/desktop/src/components/icons/TrashIcon.tsx
 
-interface IconProps extends React.SVGProps<globalThis.SVGSVGElement> {}
+interface IconProps {
+  className?: string;
+}
 
 export const TrashIcon: React.FC<IconProps> = (props) => (
   <svg

ui/desktop/src/components/pair.tsx

@@ -76,7 +76,8 @@ export default function Pair({
       // Clear the location state to prevent re-processing
       window.history.replaceState({}, '', '/pair');
     }
-  }, [location.state, chat.id, setChat]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.state, chat.id]);
 
   // Handle initial message from hub page
   useEffect(() => {
@@ -117,7 +118,8 @@ export default function Pair({
         window.history.replaceState({}, '', '/pair');
       }
     }
-  }, [location.state, hasProcessedInitialInput, initialMessage, chat, setChat]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.state, hasProcessedInitialInput, initialMessage]);
 
   // Auto-submit the initial message after it's been set and component is ready
   useEffect(() => {
@@ -153,7 +155,6 @@ export default function Pair({
         }
       }, 500); // Give more time for the component to fully mount
 
-      // eslint-disable-next-line no-undef
       return () => clearTimeout(timer);
     }
 

ui/desktop/src/components/schedule/CreateScheduleModal.tsx

@@ -317,7 +317,7 @@ export const CreateScheduleModal: React.FC<CreateScheduleModalProps> = ({
               'Invalid deep link format. Please use a goose://bot or goose://recipe link.'
             );
           }
-        } catch (error) {
+        } catch {
           setParsedRecipe(null);
           setInternalValidationError(
             'Failed to parse deep link. Please ensure using a goose://bot or goose://recipe link and try again.'
@@ -395,7 +395,7 @@ export const CreateScheduleModal: React.FC<CreateScheduleModalProps> = ({
               return `${dateObj.getMinutes()} ${dateObj.getHours()} ${dateObj.getDate()} ${
                 dateObj.getMonth() + 1
               } *`;
-            } catch (e) {
+            } catch {
               return "Error parsing date/time for 'once'.";
             }
           }
@@ -450,7 +450,7 @@ export const CreateScheduleModal: React.FC<CreateScheduleModalProps> = ({
       } else {
         setReadableCronExpression(cronstrue.toString(cron));
       }
-    } catch (e) {
+    } catch {
       setReadableCronExpression('Could not parse cron string.');
     }
   }, [

ui/desktop/src/components/schedule/EditScheduleModal.tsx

@@ -238,7 +238,7 @@ export const EditScheduleModal: React.FC<EditScheduleModalProps> = ({
               return `${dateObj.getMinutes()} ${dateObj.getHours()} ${dateObj.getDate()} ${
                 dateObj.getMonth() + 1
               } *`;
-            } catch (e) {
+            } catch {
               return "Error parsing date/time for 'once'.";
             }
           }
@@ -293,7 +293,7 @@ export const EditScheduleModal: React.FC<EditScheduleModalProps> = ({
       } else {
         setReadableCronExpression(cronstrue.toString(cron));
       }
-    } catch (e) {
+    } catch {
       setReadableCronExpression('Could not parse cron string.');
     }
   }, [

ui/desktop/src/components/sessions/SessionHistoryView.tsx

@@ -251,7 +251,7 @@ const SessionHistoryView: React.FC<SessionHistoryViewProps> = ({
   const actionButtons = showActionButtons ? (
     <>
       <Tooltip>
-        <TooltipTrigger>
+        <TooltipTrigger asChild>
           <Button
             onClick={handleShare}
             disabled={!canShare || isSharing}

ui/desktop/src/components/settings/app/AppSettingsSection.tsx

@@ -91,7 +91,7 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
       } else {
         setPricingStatus('error');
       }
-    } catch (error) {
+    } catch {
       setPricingStatus('error');
     }
   };
@@ -121,7 +121,7 @@ export default function AppSettingsSection({ scrollToSection }: AppSettingsSecti
       } else {
         setPricingStatus('error');
       }
-    } catch (error) {
+    } catch {
       setPricingStatus('error');
     } finally {
       setIsRefreshing(false);

ui/desktop/src/components/settings/extensions/subcomponents/ExtensionItem.tsx

@@ -37,7 +37,7 @@ export default function ExtensionItem({
       // Call the actual toggle function that performs the async operation
       await onToggle(ext);
       // Success case is handled by the useEffect below when extension.enabled changes
-    } catch (error) {
+    } catch {
       // If there was an error, revert the visual state
       console.log('Toggle failed, reverting visual state');
       setVisuallyEnabled(!newState);

ui/desktop/src/components/settings/models/bottom_bar/ModelsBottomBar.tsx

@@ -22,7 +22,7 @@ import { toastSuccess, toastError } from '../../../../toasts';
 import ViewRecipeModal from '../../../ViewRecipeModal';
 
 interface ModelsBottomBarProps {
-  dropdownRef: React.RefObject<HTMLDivElement>;
+  dropdownRef: React.RefObject<HTMLDivElement | null>;
   setView: (view: View) => void;
   alerts: Alert[];
   recipeConfig?: Recipe | null;