fix: show config errors for selected assistant, remove duplicate fatal error

Author: RomneyDa

gui/src/components/Layout.tsx

@@ -16,6 +16,7 @@ import { saveCurrentSession } from "../redux/thunks/session";
 import { fontSize, isMetaEquivalentKeyPressed } from "../util";
 import { incrementFreeTrialCount } from "../util/freeTrial";
 import { ROUTES } from "../util/navigation";
+import { FatalErrorIndicator } from "./config/FatalErrorNotice";
 import TextDialog from "./dialogs";
 import { GenerateRuleDialog } from "./GenerateRuleDialog";
 import { useMainEditor } from "./mainInput/TipTapEditor";
@@ -26,7 +27,6 @@ import {
 } from "./OnboardingCard";
 import OSRContextMenu from "./OSRContextMenu";
 import PostHogPageView from "./PosthogPageView";
-import { FatalErrorIndicator } from "./config/FatalErrorNotice";
 
 const LayoutTopDiv = styled(CustomScrollbarDiv)`
   height: 100%;
@@ -280,7 +280,8 @@ const Layout = () => {
               <GridDiv>
                 <PostHogPageView />
                 <Outlet />
-                <FatalErrorIndicator />
+                {/* The fatal error for chat is shown below input */}
+                {location.pathname !== "/" && <FatalErrorIndicator />}
               </GridDiv>
             </div>
             <div style={{ fontSize: fontSize(-4) }} id="tooltip-portal-div" />

gui/src/pages/config/sections/AgentsSection.tsx

@@ -5,11 +5,13 @@ import { ToolTip } from "../../../components/gui/Tooltip";
 import { Button, Card, Divider, EmptyState } from "../../../components/ui";
 import { useAuth } from "../../../context/Auth";
 import { IdeMessengerContext } from "../../../context/IdeMessenger";
+import { useAppSelector } from "../../../redux/hooks";
 import { ConfigHeader } from "../components/ConfigHeader";
 
 export function AgentsSection() {
-  const { profiles } = useAuth();
+  const { profiles, selectedProfile } = useAuth();
   const ideMessenger = useContext(IdeMessengerContext);
+  const configError = useAppSelector((state) => state.config.configError);
 
   function handleAddAgent() {
     void ideMessenger.request("config/newAssistantFile", undefined);
@@ -29,47 +31,51 @@ export function AgentsSection() {
 
       <Card>
         {profiles && profiles.length > 0 ? (
-          profiles.map((profile, index) => (
-            <div key={profile.id}>
-              <div className="flex items-center justify-between">
-                <div className="flex items-baseline gap-3">
-                  <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center">
-                    <AssistantIcon assistant={profile} />
+          profiles.map((profile, index) => {
+            const isSelected = profile.id === selectedProfile?.id;
+            const errors = isSelected ? configError : profile.errors;
+            return (
+              <div key={profile.id}>
+                <div className="flex items-center justify-between">
+                  <div className="flex items-baseline gap-3">
+                    <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center">
+                      <AssistantIcon assistant={profile} />
+                    </div>
+                    <div className="flex-1">
+                      <h3
+                        className={`my-2 text-sm font-medium ${errors && errors.length > 0 ? "text-error" : ""}`}
+                      >
+                        {profile.title}
+                      </h3>
+                      {errors && errors.length > 0 && (
+                        <div className="mt-2 space-y-1">
+                          {errors.map((error, errorIndex) => (
+                            <div
+                              key={errorIndex}
+                              className="text-error bg-error/10 rounded py-1 pr-2 text-xs"
+                            >
+                              {error.message}
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
                   </div>
-                  <div className="flex-1">
-                    <h3
-                      className={`my-2 text-sm font-medium ${profile.errors && profile.errors.length > 0 ? "text-error" : ""}`}
+                  <ToolTip content="Configure agent">
+                    <Button
+                      onClick={() => handleConfigureAgent(profile.id)}
+                      variant="ghost"
+                      size="sm"
+                      className="text-description-muted hover:enabled:text-foreground my-0 h-6 w-6 p-0"
                     >
-                      {profile.title}
-                    </h3>
-                    {profile.errors && profile.errors.length > 0 && (
-                      <div className="mt-2 space-y-1">
-                        {profile.errors.map((error, errorIndex) => (
-                          <div
-                            key={errorIndex}
-                            className="text-error bg-error/10 rounded py-1 pr-2 text-xs"
-                          >
-                            {error.message}
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                  </div>
+                      <Cog6ToothIcon className="h-4 w-4 flex-shrink-0" />
+                    </Button>
+                  </ToolTip>
                 </div>
-                <ToolTip content="Configure agent">
-                  <Button
-                    onClick={() => handleConfigureAgent(profile.id)}
-                    variant="ghost"
-                    size="sm"
-                    className="text-description-muted hover:enabled:text-foreground my-0 h-6 w-6 p-0"
-                  >
-                    <Cog6ToothIcon className="h-4 w-4 flex-shrink-0" />
-                  </Button>
-                </ToolTip>
+                {index < profiles.length - 1 && <Divider />}
               </div>
-              {index < profiles.length - 1 && <Divider />}
-            </div>
-          ))
+            );
+          })
         ) : (
           <EmptyState message="No agents configured. Click the + button to add your first agent." />
         )}