guide users to connect a model provider when Goose needs one (#169)

* add needs_model status for Goose agent when no model provider is connected

Goose agent now shows a "needs_model" state with a scroll-to-models
button when no model provider is configured. Updates provider copy
to better explain the relationship between agents and model providers.

* polish providers settings: floating restart card, tooltip arrow prop, save-state fix

Move the restart banner out of ProvidersSettings into a floating card
below the settings modal (Figma-style stacked layout). The card fades
in on credential changes, dismisses when navigating away, and won't
reappear on return.

Add showArrow prop to TooltipContent for arrow-free tooltips. Fix
model provider save flow showing empty fields by removing the
preserveSetupLayout flag that blocked transition to ConnectedFieldsPanel.

* harden providers settings: remove restart banner, fix scroll cleanup and container ref

Remove the restart banner since users can restart the app themselves.
Fix RAF leak on unmount, replace fragile CSS class selector with an
explicit scroll container ref, and guard the needs_model tooltip button
on having a handler.

* 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.

* restore floating restart card, treat local providers as available

Bring back the floating restart notification card below the settings
modal (message only, no restart button). The card fades in on credential
changes and auto-dismisses when leaving the providers section.

Treat setupMethod: "local" providers (e.g. Ollama) as always available
when computing hasModelProvider, matching the Goose backend's
check_provider_configured behavior. This prevents local-only users from
seeing a perpetual needs_model indicator on the Goose agent card.

* revert local provider override for hasModelProvider

Only check configuredIds for model provider presence. Local providers
(Ollama, local_inference) will be picked up after the Goose backend
merge brings check_provider_configured which marks them as configured.

Author: morgmart

src/features/providers/hooks/useCredentials.ts

@@ -5,7 +5,6 @@ import {
   deleteProviderConfig,
   type ProviderStatus,
   checkAllProviderStatus,
-  restartApp,
 } from "@/features/providers/api/credentials";
 import type { ProviderFieldValue } from "@/shared/types/providers";
 
@@ -17,7 +16,6 @@ interface UseCredentialsReturn {
   getConfig: (providerId: string) => Promise<ProviderFieldValue[]>;
   save: (key: string, value: string) => Promise<void>;
   remove: (providerId: string) => Promise<void>;
-  restart: () => Promise<void>;
   completeNativeSetup: () => Promise<void>;
 }
 
@@ -77,10 +75,6 @@ export function useCredentials(): UseCredentialsReturn {
     [refreshStatuses],
   );
 
-  const restart = useCallback(async () => {
-    await restartApp();
-  }, []);
-
   const completeNativeSetup = useCallback(async () => {
     await refreshStatuses();
     setNeedsRestart(true);
@@ -94,7 +88,6 @@ export function useCredentials(): UseCredentialsReturn {
     getConfig,
     save,
     remove,
-    restart,
     completeNativeSetup,
   };
 }

src/features/settings/ui/AgentProviderCard.tsx

@@ -5,6 +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 {
   checkAgentInstalled,
   checkAgentAuth,
@@ -25,9 +26,13 @@ const MAX_OUTPUT_LINES = 50;
 
 interface AgentProviderCardProps {
   provider: ProviderDisplayInfo;
+  onScrollToModels?: () => void;
 }
 
-export function AgentProviderCard({ provider }: AgentProviderCardProps) {
+export function AgentProviderCard({
+  provider,
+  onScrollToModels,
+}: AgentProviderCardProps) {
   const { t } = useTranslation(["settings", "common"]);
   const [setupPhase, setSetupPhase] = useState<SetupPhase>("idle");
   const [setupOutput, setSetupOutput] = useState<OutputLine[]>([]);
@@ -41,7 +46,9 @@ export function AgentProviderCard({ provider }: AgentProviderCardProps) {
   const unlistenRef = useRef<(() => void) | null>(null);
 
   const icon = getProviderIcon(provider.id, "size-6");
-  const isBuiltIn = provider.status === "built_in";
+  const isBuiltIn =
+    provider.status === "built_in" || provider.status === "needs_model";
+  const needsModelProvider = provider.status === "needs_model";
   const isActive = setupPhase !== "idle";
   const hasInstallCommand = !!provider.installCommand;
   const hasAuthCommand = !!provider.authCommand;
@@ -224,14 +231,36 @@ export function AgentProviderCard({ provider }: AgentProviderCardProps) {
   if (provider.showOnlyWhenInstalled && isInstalled !== true) return null;
 
   const isReady =
-    isBuiltIn ||
+    (isBuiltIn && !needsModelProvider) ||
     (isInstalled === true && !hasAuthCommand) ||
     (isInstalled === true && isAuthenticated === true);
   const needsAuth =
     isInstalled === true && hasAuthCommand && isAuthenticated !== true;
   const needsInstall = isInstalled === false && hasInstallCommand;
 
   function renderStatusIndicator() {
+    if (needsModelProvider && onScrollToModels) {
+      return (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-xs"
+              onClick={onScrollToModels}
+              className="flex-shrink-0 text-muted-foreground"
+              aria-label={t("providers.agents.connectModelLabel")}
+            >
+              <IconPlus className="size-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="left" showArrow={false}>
+            {t("providers.agents.connectModelTooltip")}
+          </TooltipContent>
+        </Tooltip>
+      );
+    }
+
     if (isBuiltIn || isReady) {
       return (
         <div className="flex h-6 flex-shrink-0 items-center">

src/features/settings/ui/ModelProviderRow.tsx

@@ -64,7 +64,6 @@ export function ModelProviderRow({
   const [setupOutput, setSetupOutput] = useState<SetupOutputLine[]>([]);
   const [setupError, setSetupError] = useState("");
   const [showSavedState, setShowSavedState] = useState(false);
-  const [preserveSetupLayout, setPreserveSetupLayout] = useState(false);
   const setupLineCounter = useRef(0);
   const hasLoadedConfig = useRef(false);
   const shouldRestorePanelFocus = useRef(false);
@@ -156,7 +155,6 @@ export function ModelProviderRow({
     setEditingKey(null);
     setError("");
     setShowSavedState(false);
-    setPreserveSetupLayout(false);
 
     const unlisten = await onModelSetupOutput(provider.id, appendSetupOutput);
 
@@ -179,7 +177,6 @@ export function ModelProviderRow({
     setExpanded((current) => {
       if (current) {
         setShowSavedState(false);
-        setPreserveSetupLayout(false);
       }
       return !current;
     });
@@ -275,7 +272,6 @@ export function ModelProviderRow({
       }
       await loadConfig();
       setShowSavedState(true);
-      setPreserveSetupLayout(true);
     } catch (nextError) {
       setError(
         nextError instanceof Error ? nextError.message : "Failed to save",
@@ -291,7 +287,6 @@ export function ModelProviderRow({
       setEditingKey(null);
       setError("");
       setShowSavedState(false);
-      setPreserveSetupLayout(false);
     } catch (nextError) {
       setError(
         nextError instanceof Error ? nextError.message : "Failed to remove",
@@ -378,7 +373,7 @@ export function ModelProviderRow({
       );
     }
 
-    if (hasFields && isConnected && !preserveSetupLayout) {
+    if (hasFields && isConnected) {
       return (
         <ConnectedFieldsPanel
           panelRef={panelRef}

src/features/settings/ui/ProvidersSettings.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/shared/ui/button";
 import { Separator } from "@/shared/ui/separator";
 import { Skeleton } from "@/shared/ui/skeleton";
-import { IconChevronDown, IconRefresh } from "@tabler/icons-react";
+import { IconChevronDown } from "@tabler/icons-react";
 import {
   getAgentProviders,
   getModelProviders,
@@ -20,8 +20,10 @@ import type {
 function resolveStatus(
   entry: ProviderCatalogEntry,
   configuredIds: Set<string>,
+  hasModelProvider: boolean,
 ): ProviderSetupStatus {
-  if (entry.id === "goose") return "built_in";
+  if (entry.id === "goose")
+    return hasModelProvider ? "built_in" : "needs_model";
   if (entry.category === "agent") return "not_installed";
   if (configuredIds.has(entry.id)) return "connected";
   return "not_configured";
@@ -30,18 +32,38 @@ function resolveStatus(
 function toDisplayInfo(
   entries: ProviderCatalogEntry[],
   configuredIds: Set<string>,
+  hasModelProvider: boolean,
 ): ProviderDisplayInfo[] {
   return entries.map((entry) => ({
     ...entry,
-    status: resolveStatus(entry, configuredIds),
+    status: resolveStatus(entry, configuredIds, hasModelProvider),
   }));
 }
 
-export function ProvidersSettings() {
+interface ProvidersSettingsProps {
+  scrollContainerRef?: React.RefObject<HTMLElement | null>;
+  onNeedsRestart?: () => void;
+}
+
+export function ProvidersSettings({
+  scrollContainerRef,
+  onNeedsRestart,
+}: ProvidersSettingsProps) {
   const { t } = useTranslation(["settings", "common"]);
   const [showAllModels, setShowAllModels] = useState(false);
   const [modelOrder, setModelOrder] = useState<string[] | null>(null);
 
+  const modelsSectionRef = useRef<HTMLElement>(null);
+  const scrollRafRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (scrollRafRef.current !== null) {
+        cancelAnimationFrame(scrollRafRef.current);
+      }
+    };
+  }, []);
+
   const {
     configuredIds,
     loading,
@@ -50,18 +72,75 @@ export function ProvidersSettings() {
     getConfig,
     save,
     remove,
-    restart,
     completeNativeSetup,
   } = useCredentials();
 
+  useEffect(() => {
+    if (needsRestart) onNeedsRestart?.();
+  }, [needsRestart, onNeedsRestart]);
+
+  const modelProviderIds = useMemo(
+    () => new Set(getModelProviders().map((m) => m.id)),
+    [],
+  );
+
+  const hasModelProvider = useMemo(
+    () => [...configuredIds].some((id) => modelProviderIds.has(id)),
+    [configuredIds, modelProviderIds],
+  );
+
+  const scrollToModels = useCallback(() => {
+    const target = modelsSectionRef.current;
+    if (!target) return;
+
+    if (scrollRafRef.current !== null) {
+      cancelAnimationFrame(scrollRafRef.current);
+      scrollRafRef.current = null;
+    }
+
+    const scrollEl = scrollContainerRef?.current;
+    if (!scrollEl) {
+      target.scrollIntoView({ behavior: "smooth" });
+      return;
+    }
+
+    const targetTop =
+      target.getBoundingClientRect().top -
+      scrollEl.getBoundingClientRect().top +
+      scrollEl.scrollTop -
+      16;
+    const start = scrollEl.scrollTop;
+    const distance = targetTop - start;
+    const duration = 500;
+    let startTime: number | null = null;
+
+    function easeInOut(p: number) {
+      return p < 0.5 ? 4 * p * p * p : 1 - (-2 * p + 2) ** 3 / 2;
+    }
+
+    const step = (timestamp: number) => {
+      if (!startTime) startTime = timestamp;
+      const elapsed = timestamp - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      scrollEl.scrollTop = start + distance * easeInOut(progress);
+      if (progress < 1) {
+        scrollRafRef.current = requestAnimationFrame(step);
+      } else {
+        scrollRafRef.current = null;
+      }
+    };
+
+    scrollRafRef.current = requestAnimationFrame(step);
+  }, [scrollContainerRef]);
+
   const agents = useMemo(
-    () => toDisplayInfo(getAgentProviders(), configuredIds),
-    [configuredIds],
+    () => toDisplayInfo(getAgentProviders(), configuredIds, hasModelProvider),
+    [configuredIds, hasModelProvider],
   );
 
   const allModels = useMemo(
-    () => toDisplayInfo(getModelProviders(), configuredIds),
-    [configuredIds],
+    () => toDisplayInfo(getModelProviders(), configuredIds, hasModelProvider),
+    [configuredIds, hasModelProvider],
   );
 
   const sortedModels = useMemo(() => {
@@ -138,16 +217,6 @@ export function ProvidersSettings() {
         {t("providers.description")}
       </p>
 
-      {needsRestart && (
-        <div className="mt-3 flex items-center gap-3 rounded-lg border border-accent bg-background-accent/30 px-3 py-2.5">
-          <p className="flex-1 text-sm">{t("providers.restartMessage")}</p>
-          <Button type="button" size="sm" onClick={() => void restart()}>
-            <IconRefresh className="size-3.5" />
-            {t("providers.restartButton")}
-          </Button>
-        </div>
-      )}
-
       <Separator className="my-4" />
 
       <section>
@@ -162,14 +231,20 @@ export function ProvidersSettings() {
 
         <div className="grid grid-cols-2 gap-3">
           {agents.map((agent) => (
-            <AgentProviderCard key={agent.id} provider={agent} />
+            <AgentProviderCard
+              key={agent.id}
+              provider={agent}
+              onScrollToModels={
+                agent.id === "goose" ? scrollToModels : undefined
+              }
+            />
           ))}
         </div>
       </section>
 
       <Separator className="my-6" />
 
-      <section>
+      <section ref={modelsSectionRef} className="scroll-mt-4">
         <div className="mb-3">
           <h4 className="text-sm font-semibold">
             {t("providers.models.title")}