feat(sidebar): add group-by-kind toggle to Agent section

Add a toggle (left of the "+" button) that groups the Agent section by
kind, showing "Agent" and "Pipeline" sub-headers. State persists in
localStorage, mirroring the extensions group-by-type pattern.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/src/app/home/components/home-sidebar/HomeSidebar.tsx

@@ -34,6 +34,7 @@ import {
   RefreshCcw,
   Bot,
   Workflow,
+  Group,
 } from 'lucide-react';
 import { useTheme } from '@/components/providers/theme-provider';
 
@@ -509,6 +510,7 @@ function NavItems({
         const isSkill = categoryId === 'skills';
         const isBot = categoryId === 'bots';
         const isMCP = categoryId === 'mcp';
+        const isAgents = categoryId === 'pipelines';
 
         const resolveItemRoute = (item: SidebarEntityItem): string => {
           if (item.extensionType === 'mcp') {
@@ -591,6 +593,18 @@ function NavItems({
             !inPopover &&
             sidebarData.extensionsGroupByType;
 
+          const showAgentGroupHeaders =
+            isAgents && !inPopover && sidebarData.agentsGroupByKind;
+
+          const agentGroupOrder: Array<'agent' | 'pipeline'> = [
+            'agent',
+            'pipeline',
+          ];
+          const agentGroupLabelKey: Record<'agent' | 'pipeline', string> = {
+            agent: 'agents.kindBadgeAgent',
+            pipeline: 'agents.kindBadgePipeline',
+          };
+
           const groupOrder: Array<'plugin' | 'mcp' | 'skill'> = [
             'plugin',
             'mcp',
@@ -792,7 +806,25 @@ function NavItems({
                       </div>
                     );
                   })
-                : visibleItems.map((item) => renderItem(item))}
+                : showAgentGroupHeaders
+                  ? agentGroupOrder.map((kind) => {
+                      const groupItems = visibleItems.filter(
+                        (it) => (it.kind ?? 'agent') === kind,
+                      );
+                      if (groupItems.length === 0) return null;
+                      return (
+                        <div
+                          key={kind}
+                          className="flex flex-col gap-0.5 mt-0.5"
+                        >
+                          <div className="px-2 pt-1 pb-0.5 text-[0.65rem] font-semibold uppercase tracking-wide text-muted-foreground">
+                            {t(agentGroupLabelKey[kind])}
+                          </div>
+                          {groupItems.map((item) => renderItem(item))}
+                        </div>
+                      );
+                    })
+                  : visibleItems.map((item) => renderItem(item))}
               {/* Show more / less toggle when items exceed limit */}
               {sortedItems.length > maxItems && !inPopover && (
                 <SidebarMenuSubItem>
@@ -1030,6 +1062,26 @@ function NavItems({
                     {config.name}
                   </span>
                   <div className="ml-auto flex items-center gap-0.5 -mr-1">
+                    {isAgents && (
+                      <button
+                        type="button"
+                        title={t('agents.groupByKind')}
+                        className={cn(
+                          'p-1 rounded-sm transition-all',
+                          sidebarData.agentsGroupByKind
+                            ? 'text-sidebar-accent-foreground bg-sidebar-accent'
+                            : 'text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [@media(hover:hover)]:opacity-0 group-hover/category-header:opacity-100',
+                        )}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          sidebarData.setAgentsGroupByKind(
+                            !sidebarData.agentsGroupByKind,
+                          );
+                        }}
+                      >
+                        <Group className="size-3.5" />
+                      </button>
+                    )}
                     {isExtensionsCategory && (
                       <button
                         type="button"

web/src/app/home/components/home-sidebar/SidebarDataContext.tsx

@@ -66,6 +66,9 @@ export interface SidebarDataContextValue {
   // Whether the extensions list is grouped by type (shared between page and sidebar)
   extensionsGroupByType: boolean;
   setExtensionsGroupByType: (enabled: boolean) => void;
+  // Whether the Agent list is grouped by kind (Agent vs Pipeline)
+  agentsGroupByKind: boolean;
+  setAgentsGroupByKind: (enabled: boolean) => void;
 }
 
 const SidebarDataContext = createContext<SidebarDataContextValue | null>(null);
@@ -97,6 +100,21 @@ export function SidebarDataProvider({
     }
   }, []);
 
+  const [agentsGroupByKind, setAgentsGroupByKindState] = useState<boolean>(
+    () => {
+      if (typeof window === 'undefined') return false;
+      return localStorage.getItem('agents_group_by_kind') === 'true';
+    },
+  );
+  const setAgentsGroupByKind = useCallback((enabled: boolean) => {
+    setAgentsGroupByKindState(enabled);
+    try {
+      localStorage.setItem('agents_group_by_kind', String(enabled));
+    } catch {
+      // ignore
+    }
+  }, []);
+
   const refreshBots = useCallback(async () => {
     try {
       const resp = await httpClient.getBots();
@@ -311,6 +329,8 @@ export function SidebarDataProvider({
         setDetailEntityName,
         extensionsGroupByType,
         setExtensionsGroupByType,
+        agentsGroupByKind,
+        setAgentsGroupByKind,
       }}
     >
       {children}

web/src/i18n/locales/en-US.ts

@@ -519,6 +519,7 @@ const enUS = {
     pipelineType: 'Pipeline',
     kindBadgeAgent: 'Agent',
     kindBadgePipeline: 'Pipeline',
+    groupByKind: 'Group by type',
     pipelineTypeDescription:
       'Keep the existing no-code message pipeline for backward compatibility. It only handles message events.',
     allEvents: 'Supports all EBA events',

web/src/i18n/locales/ja-JP.ts

@@ -503,6 +503,7 @@ const jaJP = {
     pipelineType: 'Pipeline',
     kindBadgeAgent: 'Agent',
     kindBadgePipeline: 'パイプライン',
+    groupByKind: 'タイプ別にグループ化',
     pipelineTypeDescription:
       '既存のノーコードメッセージ Pipeline を互換性のため保持します。メッセージイベントのみ処理できます。',
     allEvents: 'すべての EBA イベントに対応',

web/src/i18n/locales/zh-Hans.ts

@@ -499,6 +499,7 @@ const zhHans = {
     pipelineType: 'Pipeline',
     kindBadgeAgent: 'Agent',
     kindBadgePipeline: '流水线',
+    groupByKind: '按类型分组',
     pipelineTypeDescription:
       '保留现有无代码消息流水线，兼容旧配置，只能处理消息事件。',
     allEvents: '支持全部 EBA 事件',