From 5f833dc5fad456dac78e434083a925e40bd79ecf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Flor=C3=AAncio?= <carlosmflorencio@gmail.com>
Date: Sun, 29 Mar 2026 16:18:05 +0100
Subject: [PATCH] feat(settings): add dedicated Utility Agents settings page
 (#484)

---
 apps/web/app/settings/agents/page.tsx                 |  3 ---
 apps/web/app/settings/utility-agents/page.tsx         |  5 +++++
 apps/web/components/settings/settings-app-sidebar.tsx | 11 +++++++++++
 .../components/settings/utility-agents-section.tsx    |  4 +---
 4 files changed, 17 insertions(+), 6 deletions(-)
 create mode 100644 apps/web/app/settings/utility-agents/page.tsx

diff --git a/apps/web/app/settings/agents/page.tsx b/apps/web/app/settings/agents/page.tsx
index 1c5cd08b5f..0adeda507e 100644
--- a/apps/web/app/settings/agents/page.tsx
+++ b/apps/web/app/settings/agents/page.tsx
@@ -29,7 +29,6 @@ import { useAgentDiscovery } from "@/hooks/domains/settings/use-agent-discovery"
 import { useAvailableAgents } from "@/hooks/domains/settings/use-available-agents";
 import { AgentLogo } from "@/components/agent-logo";
 import { AddTUIAgentDialog } from "@/components/settings/add-tui-agent-dialog";
-import { UtilityAgentsSection } from "@/components/settings/utility-agents-section";
 import { toAgentProfileOption } from "@/lib/state/slices/settings/types";
 import type {
   AgentDiscovery,
@@ -566,8 +565,6 @@ export default function AgentsSettingsPage() {
 
       <ConfigChatAgentSection />
 
-      <UtilityAgentsSection />
-
       <AddTUIAgentDialog
         open={tuiDialogOpen}
         onOpenChange={setTuiDialogOpen}
diff --git a/apps/web/app/settings/utility-agents/page.tsx b/apps/web/app/settings/utility-agents/page.tsx
new file mode 100644
index 0000000000..fa78d393dc
--- /dev/null
+++ b/apps/web/app/settings/utility-agents/page.tsx
@@ -0,0 +1,5 @@
+import { UtilityAgentsSection } from "@/components/settings/utility-agents-section";
+
+export default function UtilityAgentsSettingsPage() {
+  return <UtilityAgentsSection />;
+}
diff --git a/apps/web/components/settings/settings-app-sidebar.tsx b/apps/web/components/settings/settings-app-sidebar.tsx
index 88ac6527a9..15a69ec71e 100644
--- a/apps/web/components/settings/settings-app-sidebar.tsx
+++ b/apps/web/components/settings/settings-app-sidebar.tsx
@@ -14,6 +14,7 @@ import {
   IconMessageCircle,
   IconBrandGithub,
   IconSparkles,
+  IconWand,
 } from "@tabler/icons-react";
 import {
   Sidebar,
@@ -298,6 +299,16 @@ export function SettingsAppSidebar() {
                   </SidebarMenuButton>
                 </SidebarMenuItem>
 
+                {/* Utility Agents */}
+                <SidebarMenuItem>
+                  <SidebarMenuButton asChild isActive={pathname === "/settings/utility-agents"}>
+                    <Link href="/settings/utility-agents">
+                      <IconWand className="h-4 w-4" />
+                      <span>Utility Agents</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+
                 <ExecutorsSidebarSection pathname={pathname} executors={executors} />
                 <SecretsSidebarSection pathname={pathname} />
 
diff --git a/apps/web/components/settings/utility-agents-section.tsx b/apps/web/components/settings/utility-agents-section.tsx
index 28eadf0e4c..1545dda454 100644
--- a/apps/web/components/settings/utility-agents-section.tsx
+++ b/apps/web/components/settings/utility-agents-section.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Separator } from "@kandev/ui/separator";
 import {
   listUtilityAgents,
   listInferenceAgents,
@@ -108,9 +107,8 @@ export function UtilityAgentsSection() {
   return (
     <>
       <div className="space-y-4">
-        <Separator />
         <div>
-          <h3 className="text-lg font-semibold">Utility Agents</h3>
+          <h2 className="text-2xl font-bold">Utility Agents</h2>
           <p className="text-sm text-muted-foreground">
             One-shot AI helpers for commits, PRs, and prompts.
           </p>