refactor useCredentials and ProvidersSettings: remove unused restart logic and improve scroll handling

Eliminate the restart logic from the useCredentials hook, as it is no longer necessary. Update ProvidersSettings to enhance scroll handling by replacing a fragile container reference with a more reliable approach. Additionally, clean up the code in AgentProviderCard and SettingsModal for better readability.

Author: morgmart

src/features/providers/hooks/useCredentials.ts

@@ -5,27 +5,23 @@ import {
   deleteProviderConfig,
   type ProviderStatus,
   checkAllProviderStatus,
-  restartApp,
 } from "@/features/providers/api/credentials";
 import type { ProviderFieldValue } from "@/shared/types/providers";
 
 interface UseCredentialsReturn {
   configuredIds: Set<string>;
   loading: boolean;
   saving: boolean;
-  needsRestart: boolean;
   getConfig: (providerId: string) => Promise<ProviderFieldValue[]>;
   save: (key: string, value: string) => Promise<void>;
   remove: (providerId: string) => Promise<void>;
-  restart: () => Promise<void>;
   completeNativeSetup: () => Promise<void>;
 }
 
 export function useCredentials(): UseCredentialsReturn {
   const [statuses, setStatuses] = useState<ProviderStatus[]>([]);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
-  const [needsRestart, setNeedsRestart] = useState(false);
 
   const refreshStatuses = useCallback(async () => {
     const nextStatuses = await checkAllProviderStatus();
@@ -55,7 +51,6 @@ export function useCredentials(): UseCredentialsReturn {
       try {
         await saveProviderField(key, value);
         await refreshStatuses();
-        setNeedsRestart(true);
       } finally {
         setSaving(false);
       }
@@ -69,32 +64,24 @@ export function useCredentials(): UseCredentialsReturn {
       try {
         await deleteProviderConfig(providerId);
         await refreshStatuses();
-        setNeedsRestart(true);
       } finally {
         setSaving(false);
       }
     },
     [refreshStatuses],
   );
 
-  const restart = useCallback(async () => {
-    await restartApp();
-  }, []);
-
   const completeNativeSetup = useCallback(async () => {
     await refreshStatuses();
-    setNeedsRestart(true);
   }, [refreshStatuses]);
 
   return {
     configuredIds,
     loading,
     saving,
-    needsRestart,
     getConfig,
     save,
     remove,
-    restart,
     completeNativeSetup,
   };
 }

src/features/settings/ui/AgentProviderCard.tsx

@@ -5,11 +5,7 @@ import { Button } from "@/shared/ui/button";
 import { Spinner } from "@/shared/ui/spinner";
 import { getProviderIcon } from "@/shared/ui/icons/ProviderIcons";
 import { IconCheck, IconAlertTriangle, IconPlus } from "@tabler/icons-react";
-import {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-} from "@/shared/ui/tooltip";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/shared/ui/tooltip";
 import {
   checkAgentInstalled,
   checkAgentAuth,

src/features/settings/ui/ProvidersSettings.tsx

@@ -91,18 +91,18 @@ export function ProvidersSettings({
       scrollRafRef.current = null;
     }
 
-    const container = scrollContainerRef?.current;
-    if (!container) {
+    const scrollEl = scrollContainerRef?.current;
+    if (!scrollEl) {
       target.scrollIntoView({ behavior: "smooth" });
       return;
     }
 
     const targetTop =
       target.getBoundingClientRect().top -
-      container.getBoundingClientRect().top +
-      container.scrollTop -
+      scrollEl.getBoundingClientRect().top +
+      scrollEl.scrollTop -
       16;
-    const start = container.scrollTop;
+    const start = scrollEl.scrollTop;
     const distance = targetTop - start;
     const duration = 500;
     let startTime: number | null = null;
@@ -111,17 +111,17 @@ export function ProvidersSettings({
       return p < 0.5 ? 4 * p * p * p : 1 - (-2 * p + 2) ** 3 / 2;
     }
 
-    function step(timestamp: number) {
+    const step = (timestamp: number) => {
       if (!startTime) startTime = timestamp;
       const elapsed = timestamp - startTime;
       const progress = Math.min(elapsed / duration, 1);
-      container.scrollTop = start + distance * easeInOut(progress);
+      scrollEl.scrollTop = start + distance * easeInOut(progress);
       if (progress < 1) {
         scrollRafRef.current = requestAnimationFrame(step);
       } else {
         scrollRafRef.current = null;
       }
-    }
+    };
 
     scrollRafRef.current = requestAnimationFrame(step);
   }, [scrollContainerRef]);

src/features/settings/ui/SettingsModal.tsx

@@ -239,9 +239,7 @@ export function SettingsModal({
             >
               {activeSection === "appearance" && <AppearanceSettings />}
               {activeSection === "providers" && (
-                <ProvidersSettings
-                  scrollContainerRef={contentScrollRef}
-                />
+                <ProvidersSettings scrollContainerRef={contentScrollRef} />
               )}
               {activeSection === "doctor" && <DoctorSettings />}
               {activeSection === "general" && (

src/shared/i18n/locales/es/settings.json

@@ -95,16 +95,18 @@
   },
   "providers": {
     "agents": {
-      "description": "Los agentes manejan tus solicitudes usando sus propias herramientas y modelos",
+      "connectModelLabel": "Conectar un proveedor de modelos para Goose",
+      "connectModelTooltip": "Conectar un proveedor de modelos",
+      "description": "Cada agente maneja tus solicitudes de manera diferente. Los agentes externos traen sus propios modelos. Goose usa los proveedores de modelos de abajo.",
       "installLabel": "Instalar {{name}}",
       "signIn": "Iniciar sesión",
       "signInLabel": "Iniciar sesión en {{name}}",
-      "title": "Agentes"
+      "title": "Proveedores de agentes"
     },
-    "description": "Conecta agentes y modelos de IA para usar con Goose",
+    "description": "Conecta un agente para comenzar. Goose usa los proveedores de modelos de abajo; otros agentes traen los suyos.",
     "disconnect": "Desconectar",
     "models": {
-      "description": "Modelos de IA que alimentan a Goose. Expande un proveedor para revisar lo que necesita. Conectar inicia sesión con una cuenta existente, mientras que Configurar guarda claves API u otros ajustes del proveedor.",
+      "description": "Conecta un proveedor de modelos para alimentar al agente Goose. Necesitas al menos uno conectado para usar Goose.",
       "notSet": "No configurado",
       "setup": {
         "connected": {
@@ -128,7 +130,7 @@
           "oauthTerminal": "Ejecuta `goose configure` en tu terminal para terminar de iniciar sesión."
         }
       },
-      "title": "Modelos"
+      "title": "Proveedores de modelos"
     },
     "saved": "Guardado",
     "showFewer": "Mostrar menos",