Cleanup Phase 8: Fix property access errors (TS2339) - TypeScript error reduction

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/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/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/RecipeEditor.tsx

@@ -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/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/models/AddModelInline.tsx

@@ -19,7 +19,7 @@ export function AddModelInline() {
 
   const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
   const [modelName, setModelName] = useState<string>('');
-  const [filteredModels, setFilteredModels] = useState([]);
+  const [filteredModels, setFilteredModels] = useState<{ id: string; name: string; provider: string }[]>([]);
   const [showSuggestions, setShowSuggestions] = useState(false);
   const handleModelSelection = useHandleModelSelection();
 

ui/desktop/src/components/settings/providers/ConfigureProvidersGrid.tsx

@@ -43,7 +43,7 @@ export function ConfigureProvidersGrid() {
   const [selectedForSetup, setSelectedForSetup] = useState<string | null>(null);
   const [modalMode, setModalMode] = useState<'edit' | 'setup' | 'battle'>('setup');
   const [isConfirmationOpen, setIsConfirmationOpen] = useState(false);
-  const [providerToDelete, setProviderToDelete] = useState(null);
+  const [providerToDelete, setProviderToDelete] = useState<{ name: string; id: string; isConfigured: boolean; description: string } | null>(null);
   const { currentModel } = useModel();
 
   const providers = useMemo(() => {
@@ -169,8 +169,8 @@ export function ConfigureProvidersGrid() {
 
   const confirmDelete = async () => {
     if (!providerToDelete) return;
-
-    const requiredKeys = required_keys[providerToDelete.name];
+    
+    const requiredKeys = required_keys[providerToDelete.name as keyof typeof required_keys];
     if (!requiredKeys || requiredKeys.length === 0) {
       console.error(`No keys found for provider ${providerToDelete.name}`);
       return;

ui/desktop/src/components/settings_v2/extensions/agent-api.ts

@@ -29,11 +29,11 @@ export async function extensionApiCall(
   };
 
   // for adding the payload is an extensionConfig, for removing payload is just the name
-  const extensionName = isActivating ? payload.name : payload;
+  const extensionName = isActivating ? (payload as ExtensionConfig).name : payload as string;
   let toastId;
 
   // Step 1: Show loading toast (only for activation of stdio)
-  if (isActivating && (payload as ExtensionConfig) && payload.type == 'stdio') {
+  if (isActivating && typeof payload === 'object' && payload.type === 'stdio') {
     toastId = toastService.loading({
       title: extensionName,
       msg: `${action.verb} ${extensionName} extension...`,

ui/desktop/src/components/settings_v2/extensions/utils.ts

@@ -83,7 +83,7 @@ export function extensionToFormData(extension: FixedExtensionEntry): ExtensionFo
     cmd: extension.type === 'stdio' ? combineCmdAndArgs(extension.cmd, extension.args) : undefined,
     endpoint: extension.type === 'sse' ? extension.uri : undefined,
     enabled: extension.enabled,
-    timeout: extension.timeout,
+    timeout: 'timeout' in extension ? extension.timeout : undefined,
     envVars,
   };
 }

ui/desktop/src/components/settings_v2/models/subcomponents/AddModelModal.tsx

@@ -40,8 +40,8 @@ type AddModelModalProps = {
 export const AddModelModal = ({ onClose, setView }: AddModelModalProps) => {
   const { getProviders, upsert } = useConfig();
   const { switchModel } = useModel();
-  const [providerOptions, setProviderOptions] = useState([]);
-  const [modelOptions, setModelOptions] = useState([]);
+  const [providerOptions, setProviderOptions] = useState<{ value: string; label: string }[]>([]);
+  const [modelOptions, setModelOptions] = useState<{ options: { value: string; label: string; provider: string }[] }[]>([]);
   const [provider, setProvider] = useState<string | null>(null);
   const [model, setModel] = useState<string>('');
   const [isCustomModel, setIsCustomModel] = useState(false);
@@ -169,7 +169,7 @@ export const AddModelModal = ({ onClose, setView }: AddModelModalProps) => {
   };
 
   // Store the original model options in state, initialized from modelOptions
-  const [originalModelOptions, setOriginalModelOptions] = useState(modelOptions);
+  const [originalModelOptions, setOriginalModelOptions] = useState<{ options: { value: string; label: string; provider: string }[] }[]>(modelOptions);
 
   const handleInputChange = (inputValue: string) => {
     if (!provider) return;

ui/desktop/src/recipe/index.ts

@@ -15,6 +15,8 @@ export interface Recipe {
   extensions?: FullExtensionConfig[];
   goosehints?: string;
   context?: string[];
+  profile?: string;
+  mcps?: number;
 }
 
 export interface CreateRecipeRequest {