feat(settings): add dedicated Utility Agents settings page (#484)

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}

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 />;
+}

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} />
 

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>