Phase 6: Implement proper error handling without unknown/any types

ui/desktop/src/App.tsx

@@ -8,6 +8,7 @@ import { ToastContainer } from 'react-toastify';
 import { toastService } from './toasts';
 import { extractExtensionName } from './components/settings/extensions/utils';
 import { GoosehintsModal } from './components/GoosehintsModal';
+import { type ExtensionConfig } from './extensions';
 
 import ChatView from './components/ChatView';
 import SuspenseLoader from './suspense-loader';
@@ -46,10 +47,28 @@ export type View =
   | 'recipeEditor'
   | 'permission';
 
-export type ViewOptions =
-  | SettingsViewOptions
-  | { resumedSession?: SessionDetails }
-  | Record<string, unknown>;
+export type ViewOptions = {
+  // Settings view options
+  extensionId?: string;
+  showEnvVars?: boolean;
+  deepLinkConfig?: ExtensionConfig;
+
+  // Session view options  
+  resumedSession?: SessionDetails;
+  sessionDetails?: SessionDetails;
+  error?: string;
+  shareToken?: string;
+  baseUrl?: string;
+
+  // Recipe editor options
+  config?: unknown;
+
+  // Permission view options
+  parentView?: View;
+
+  // Generic options
+  [key: string]: unknown;
+};
 
 export type ViewConfig = {
   view: View;
@@ -231,9 +250,9 @@ export default function App() {
         setIsLoadingSharedSession(false);
       }
     };
-    window.electron.on('open-shared-session', handleOpenSharedSession as any);
+    window.electron.on('open-shared-session', handleOpenSharedSession);
     return () => {
-      window.electron.off('open-shared-session', handleOpenSharedSession as any);
+      window.electron.off('open-shared-session', handleOpenSharedSession);
     };
   }, []);
 
@@ -266,9 +285,9 @@ export default function App() {
       console.error('Is loading session:', isLoadingSession);
       setFatalError(errorMessage);
     };
-    window.electron.on('fatal-error', handleFatalError as any);
+    window.electron.on('fatal-error', handleFatalError);
     return () => {
-      window.electron.off('fatal-error', handleFatalError as any);
+      window.electron.off('fatal-error', handleFatalError);
     };
   }, [view, isLoadingSession]);
 
@@ -292,8 +311,8 @@ export default function App() {
         setView(viewFromUrl as View);
       }
     }
-    window.electron.on('set-view', handleSetView as any);
-    return () => window.electron.off('set-view', handleSetView as any);
+    window.electron.on('set-view', handleSetView);
+    return () => window.electron.off('set-view', handleSetView);
   }, []);
 
   useEffect(() => {
@@ -375,9 +394,9 @@ export default function App() {
         console.error('Error handling add-extension event:', error);
       }
     };
-    window.electron.on('add-extension', handleAddExtension as any);
+    window.electron.on('add-extension', handleAddExtension);
     return () => {
-      window.electron.off('add-extension', handleAddExtension as any);
+      window.electron.off('add-extension', handleAddExtension);
     };
   }, [STRICT_ALLOWLIST]);
 
@@ -388,9 +407,9 @@ export default function App() {
         inputField.focus();
       }
     };
-    window.electron.on('focus-input', handleFocusInput as any);
+    window.electron.on('focus-input', handleFocusInput);
     return () => {
-      window.electron.off('focus-input', handleFocusInput as any);
+      window.electron.off('focus-input', handleFocusInput);
     };
   }, []);
 

ui/desktop/src/components/ChatInput.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect, useCallback } from 'react';
+import React, { useRef, useState, useEffect, useMemo } from 'react';
 import { Button } from './ui/button';
 import type { View } from '../App';
 import Stop from './ui/Stop';
@@ -148,21 +148,20 @@ export default function ChatInput({
   }, [droppedFiles, processedFilePaths, displayValue]);
 
   // Debounced function to update actual value
-  const debouncedSetValue = useCallback((val: string) => {
-    debounce((value: string) => {
+  const debouncedSetValue = useMemo(
+    () => debounce((value: string) => {
       setValue(value);
-    }, 150)(val);
-  }, []);
+    }, 150),
+    [setValue]
+  );
 
   // Debounced autosize function
-  const debouncedAutosize = useCallback(
-    (textArea: HTMLTextAreaElement) => {
-      debounce((element: HTMLTextAreaElement) => {
-        element.style.height = '0px'; // Reset height
-        const scrollHeight = element.scrollHeight;
-        element.style.height = Math.min(scrollHeight, maxHeight) + 'px';
-      }, 150)(textArea);
-    },
+  const debouncedAutosize = useMemo(
+    () => debounce((element: HTMLTextAreaElement) => {
+      element.style.height = '0px'; // Reset height
+      const scrollHeight = element.scrollHeight;
+      element.style.height = Math.min(scrollHeight, maxHeight) + 'px';
+    }, 150),
     [maxHeight]
   );
 

ui/desktop/src/components/ErrorBoundary.tsx

@@ -14,7 +14,7 @@ window.addEventListener('error', (event) => {
   );
 });
 
-export function ErrorUI({ error }) {
+export function ErrorUI({ error }: { error: Error }) {
   return (
     <div className="fixed inset-0 w-full h-full flex flex-col items-center justify-center gap-6 bg-background">
       <div className="flex flex-col items-center gap-4 max-w-[600px] text-center px-6">

ui/desktop/src/components/FlappyGoose.tsx

@@ -216,7 +216,7 @@ const FlappyGoose: React.FC<FlappyGooseProps> = ({ onClose }) => {
   useEffect(() => {
     const frames = [svg1, svg7];
     frames.forEach((src, index) => {
-      const img = new Image();
+      const img = new Image() as HTMLImageElement;
       img.src = src;
       img.onload = () => {
         framesLoaded.current += 1;

ui/desktop/src/components/GooseLogo.tsx

@@ -1,6 +1,12 @@
 import { Goose, Rain } from './icons/Goose';
 
-export default function GooseLogo({ className = '', size = 'default', hover = true }) {
+interface GooseLogoProps {
+  className?: string;
+  size?: 'default' | 'small';
+  hover?: boolean;
+}
+
+export default function GooseLogo({ className = '', size = 'default', hover = true }: GooseLogoProps) {
   const sizes = {
     default: {
       frame: 'w-16 h-16',
@@ -12,15 +18,18 @@ export default function GooseLogo({ className = '', size = 'default', hover = tr
       rain: 'w-[150px] h-[150px]',
       goose: 'w-8 h-8',
     },
-  };
+  } as const;
+
+  const currentSize = sizes[size];
+
   return (
     <div
-      className={`${className} ${sizes[size].frame} ${hover ? 'group/with-hover' : ''} relative overflow-hidden`}
+      className={`${className} ${currentSize.frame} ${hover ? 'group/with-hover' : ''} relative overflow-hidden`}
     >
       <Rain
-        className={`${sizes[size].rain} absolute left-0 bottom-0 ${hover ? 'opacity-0 group-hover/with-hover:opacity-100' : ''} transition-all duration-300 z-1`}
+        className={`${currentSize.rain} absolute left-0 bottom-0 ${hover ? 'opacity-0 group-hover/with-hover:opacity-100' : ''} transition-all duration-300 z-1`}
       />
-      <Goose className={`${sizes[size].goose} absolute left-0 bottom-0 z-2`} />
+      <Goose className={`${currentSize.goose} absolute left-0 bottom-0 z-2`} />
     </div>
   );
 }

ui/desktop/src/components/GoosehintsModal.tsx

@@ -48,7 +48,7 @@ const ModalHelpText = () => (
   </div>
 );
 
-const ModalError = ({ error }: { error: any }) => (
+const ModalError = ({ error }: { error: Error }) => (
   <div className="text-sm text-textSubtle">
     <div className="text-red-600">Error reading .goosehints file: {JSON.stringify(error)}</div>
   </div>

ui/desktop/src/components/LinkPreview.tsx

@@ -85,10 +85,11 @@ export default function LinkPreview({ url }: LinkPreviewProps) {
         if (mounted) {
           setMetadata(data);
         }
-      } catch (error) {
+      } catch (err) {
         if (mounted) {
-          console.error('❌ Failed to fetch metadata:', error);
-          setError(error.message || 'Failed to fetch metadata');
+          console.error('❌ Failed to fetch metadata:', err);
+          const errorMessage = err instanceof Error ? err.message : 'Failed to fetch metadata';
+          setError(errorMessage);
         }
       } finally {
         if (mounted) {

ui/desktop/src/components/ProviderGrid.tsx

@@ -43,7 +43,7 @@ export function ProviderGrid({ onSubmit }: ProviderGridProps) {
     });
   }, [activeKeys]);
 
-  const handleConfigure = async (provider) => {
+  const handleConfigure = async (provider: { id: string; name: string; isConfigured: boolean; description: string }) => {
     const providerId = provider.id.toLowerCase();
 
     const modelName = getDefaultModel(providerId);
@@ -63,7 +63,7 @@ export function ProviderGrid({ onSubmit }: ProviderGridProps) {
     onSubmit?.();
   };
 
-  const handleAddKeys = (provider) => {
+  const handleAddKeys = (provider: { id: string; name: string; isConfigured: boolean; description: string }) => {
     setSelectedId(provider.id);
     setShowSetupModal(true);
   };
@@ -74,7 +74,7 @@ export function ProviderGrid({ onSubmit }: ProviderGridProps) {
     const provider = providers.find((p) => p.id === selectedId)?.name;
     if (!provider) return;
 
-    const requiredKeys = required_keys[provider];
+    const requiredKeys = required_keys[provider as keyof typeof required_keys];
     if (!requiredKeys || requiredKeys.length === 0) {
       console.error(`No keys found for provider ${provider}`);
       return;
@@ -145,12 +145,13 @@ export function ProviderGrid({ onSubmit }: ProviderGridProps) {
 
       setShowSetupModal(false);
       setSelectedId(null);
-    } catch (error) {
-      console.error('Error handling modal submit:', error);
+    } catch (err) {
+      console.error('Error handling modal submit:', err);
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
       toastError({
         title: provider,
         msg: `Failed to ${providers.find((p) => p.id === selectedId)?.isConfigured ? 'update' : 'add'} configuration`,
-        traceback: error.message,
+        traceback: errorMessage,
       });
     }
   };

ui/desktop/src/components/RecipeEditor.tsx

@@ -54,7 +54,7 @@ export default function RecipeEditor({ config }: RecipeEditorProps) {
       }
     }
     // Fall back to config if available, using extension names
-    const exts = [];
+    const exts: string[] = [];
     return exts;
   });
   // Section visibility state
@@ -125,7 +125,10 @@ export default function RecipeEditor({ config }: RecipeEditorProps) {
           delete cleanExtension.enabled;
           // Remove legacy envs which could potentially include secrets
           // env_keys will work but rely on the end user having setup those keys themselves
-          delete cleanExtension.envs;
+          if ('envs' in cleanExtension) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            delete (cleanExtension as any).envs;
+          }
           return cleanExtension;
         })
         .filter(Boolean) as FullExtensionConfig[],

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

@@ -231,23 +231,19 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
       highlighterRef.current = null;
     }
 
-    // Cancel any pending highlight operations
-    debouncedHighlight.cancel?.();
-
     // Clear search when closing
     onSearch?.('', false);
-  }, [debouncedHighlight, onSearch]);
+  }, [onSearch]);
 
-  // Clean up highlighter and debounced functions on unmount
+  // Clean up highlighter on unmount
   useEffect(() => {
     return () => {
       if (highlighterRef.current) {
         highlighterRef.current.destroy();
         highlighterRef.current = null;
       }
-      debouncedHighlight.cancel?.();
     };
-  }, [debouncedHighlight]);
+  }, []);
 
   // Listen for keyboard events
   useEffect(() => {

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

@@ -1,5 +1,5 @@
 
-export default function ChevronDown({ className }) {
+export default function ChevronDown({ className }: { className?: string }) {
   return (
     <svg
       width="1.5rem"

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

@@ -1,5 +1,5 @@
 
-export default function Close({ className }) {
+export default function Close({ className }: { className?: string }) {
   return (
     <svg
       fill="none"

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

@@ -30,10 +30,11 @@ const SessionsView: React.FC<SessionsViewProps> = ({ setView }) => {
       // Keep the selected session null if there's an error
       setSelectedSession(null);
 
+      const errorMessage = err instanceof Error ? err.message : String(err);
       toastError({
         title: 'Failed to load session. The file may be corrupted.',
         msg: 'Please try again later.',
-        traceback: err,
+        traceback: errorMessage,
       });
     } finally {
       setIsLoadingSession(false);

ui/desktop/src/components/settings/OllamaBattleGame.tsx

@@ -24,6 +24,7 @@ interface OllamaBattleGameProps {
 
 export function OllamaBattleGame({ onComplete, requiredKeys: _ }: OllamaBattleGameProps) {
   // Use Audio element type for audioRef
+  // eslint-disable-next-line no-undef
   const audioRef = useRef<HTMLAudioElement | null>(null);
   const [isMuted, setIsMuted] = useState(false);
 

ui/desktop/src/components/settings/api_keys/utils.tsx

@@ -56,16 +56,16 @@ export async function getActiveProviders(): Promise<string[]> {
         // For providers with multiple keys or keys without defaults:
         // Check if all required keys without defaults are set
         const requiredNonDefaultKeys = providerRequiredKeys.filter(
-          (key) => !(key in default_key_value)
+          (key: string) => !(key in default_key_value)
         );
 
         // If there are no non-default keys, this provider needs at least one key explicitly set
         if (requiredNonDefaultKeys.length === 0) {
-          return providerRequiredKeys.some((key) => configStatus[key]?.is_set === true);
+          return providerRequiredKeys.some((key: string) => configStatus[key]?.is_set === true);
         }
 
         // Otherwise, all non-default keys must be set
-        return requiredNonDefaultKeys.every((key) => configStatus[key]?.is_set === true);
+        return requiredNonDefaultKeys.every((key: string) => configStatus[key]?.is_set === true);
       })
       .map((provider) => provider.name || 'Unknown Provider');
 
@@ -96,14 +96,14 @@ export async function getConfigSettings(): Promise<Record<string, ProviderRespon
   // Convert the response to the expected format
   const data: Record<string, ProviderResponse> = {};
   providers.forEach((provider) => {
-    const providerRequiredKeys = required_keys[provider.name] || [];
+    const providerRequiredKeys = required_keys[provider.name as keyof typeof required_keys] || [];
 
     data[provider.name] = {
       name: provider.name,
       supported: true,
       description: provider.metadata.description,
       models: provider.metadata.models,
-      config_status: providerRequiredKeys.reduce<Record<string, ConfigDetails>>((acc, key) => {
+      config_status: providerRequiredKeys.reduce<Record<string, ConfigDetails>>((acc: Record<string, ConfigDetails>, key: string) => {
         acc[key] = {
           key,
           is_set: provider.is_configured,

ui/desktop/src/components/settings/extensions/ConfigureBuiltInExtensionModal.tsx

@@ -74,12 +74,13 @@ export function ConfigureBuiltInExtensionModal({
       });
       onSubmit();
       onClose();
-    } catch (error) {
-      console.error('Error configuring extension:', error);
+    } catch (err) {
+      console.error('Error configuring extension:', err);
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
       toastError({
         title: extension.name,
         msg: `Failed to configure the extension`,
-        traceback: error.message,
+        traceback: errorMessage,
       });
     } finally {
       setIsSubmitting(false);