fix: local agents

Author: tomasz-stefaniak

gui/src/components/ModeSelect/ModeSelect.tsx

@@ -8,6 +8,7 @@ import { MessageModes } from "core";
 import { isRecommendedAgentModel } from "core/llm/toolSupport";
 import { capitalize } from "lodash";
 import { useCallback, useEffect, useMemo } from "react";
+import { useAuth } from "../../context/Auth";
 import { useAppDispatch, useAppSelector } from "../../redux/hooks";
 import { selectSelectedChatModel } from "../../redux/slices/configSlice";
 import { setMode } from "../../redux/slices/sessionSlice";
@@ -21,6 +22,7 @@ export function ModeSelect() {
   const dispatch = useAppDispatch();
   const mode = useAppSelector((store) => store.session.mode);
   const selectedModel = useAppSelector(selectSelectedChatModel);
+  const { selectedProfile } = useAuth();
 
   const isGoodAtAgentMode = useMemo(() => {
     if (!selectedModel) {
@@ -29,6 +31,10 @@ export function ModeSelect() {
     return isRecommendedAgentModel(selectedModel.model);
   }, [selectedModel]);
 
+  const isLocalAgent = useMemo(() => {
+    return selectedProfile?.profileType === "local";
+  }, [selectedProfile]);
+
   const { mainEditor } = useMainEditor();
   const metaKeyLabel = useMemo(() => {
     return getMetaKeyLabel();
@@ -40,15 +46,16 @@ export function ModeSelect() {
     } else if (mode === "plan") {
       dispatch(setMode("agent"));
     } else if (mode === "agent") {
-      dispatch(setMode("background"));
+      // Skip background mode if local agent is selected
+      dispatch(setMode(isLocalAgent ? "chat" : "background"));
     } else {
       dispatch(setMode("chat"));
     }
     // Only focus main editor if another one doesn't already have focus
     if (!document.activeElement?.classList?.contains("ProseMirror")) {
       mainEditor?.commands.focus();
     }
-  }, [mode, mainEditor]);
+  }, [mode, mainEditor, isLocalAgent]);
 
   const selectMode = useCallback(
     (newMode: MessageModes) => {
@@ -75,6 +82,13 @@ export function ModeSelect() {
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [cycleMode]);
 
+  // Auto-switch from background mode when local agent is selected
+  useEffect(() => {
+    if (mode === "background" && isLocalAgent) {
+      dispatch(setMode("agent"));
+    }
+  }, [mode, isLocalAgent, dispatch]);
+
   const notGreatAtAgent = (
     <>
       <ToolTip
@@ -173,19 +187,26 @@ export function ModeSelect() {
             />
           </ListboxOption>
 
-          <ListboxOption value="background" className={"gap-1"}>
+          <ListboxOption
+            value="background"
+            className={"gap-1"}
+            disabled={isLocalAgent}
+          >
             <div className="flex flex-row items-center gap-1.5">
               <ModeIcon mode="background" />
               <span className="">Background</span>
               <ToolTip
                 style={{
                   zIndex: 200001,
                 }}
-                content="Trigger background agents"
+                content={"Background mode cannot be used with local agents."}
               >
                 <InformationCircleIcon className="h-2.5 w-2.5 flex-shrink-0" />
               </ToolTip>
             </div>
+            {isLocalAgent && (
+              <ExclamationTriangleIcon className="text-warning h-2.5 w-2.5" />
+            )}
             <CheckIcon
               className={`ml-auto h-3 w-3 ${mode === "background" ? "" : "opacity-0"}`}
             />