feat(settings): group agents and skills sidebar by subfolder (#464)

* feat(settings): group agents and skills by subfolder in sidebar

- Server: fix getUserAgentPath() to walk subfolders so grouped agent
  layouts (e.g. agents/business/ceo.md) are correctly resolved
- Store: add 'group' field to AgentWithExtras and DiscoveredSkill,
  parsed from file path at load time
- UI: add collapsible SidebarGroup component with localStorage-persisted
  expand/collapse state
- AgentsSidebar: render custom agents grouped by subfolder name
- SkillsSidebar: render project/user skills grouped by domain folder
- Ungrouped items (flat root) fall through and render normally

* fix(settings): normalize group paths and add agent lookup caching parity

---------

Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>

packages/ui/src/components/sections/agents/AgentsSidebar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Button } from '@/components/ui/button';
 import { ButtonLarge } from '@/components/ui/button-large';
 import { Input } from '@/components/ui/input';
@@ -25,6 +25,7 @@ import { isVSCodeRuntime } from '@/lib/desktop';
 import { cn } from '@/lib/utils';
 import type { Agent } from '@opencode-ai/sdk/v2';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { SidebarGroup } from '@/components/sections/shared/SidebarGroup';
 
 interface AgentsSidebarProps {
   onItemSelect?: () => void;
@@ -307,6 +308,25 @@ export const AgentsSidebar: React.FC<AgentsSidebarProps> = ({ onItemSelect }) =>
   const builtInAgents = visibleAgents.filter(isAgentBuiltIn);
   const customAgents = visibleAgents.filter((agent) => !isAgentBuiltIn(agent));
 
+  // Group custom agents by subfolder
+  const { groupedCustomAgents, ungroupedCustomAgents } = useMemo(() => {
+    const groups: Record<string, typeof customAgents> = {};
+    const ungrouped: typeof customAgents = [];
+    for (const agent of customAgents) {
+      const ext = agent as { group?: string };
+      if (ext.group) {
+        if (!groups[ext.group]) groups[ext.group] = [];
+        groups[ext.group].push(agent);
+      } else {
+        ungrouped.push(agent);
+      }
+    }
+    const sortedGroups = Object.keys(groups)
+      .sort((a, b) => a.localeCompare(b))
+      .map((name) => ({ name, agents: groups[name] }));
+    return { groupedCustomAgents: sortedGroups, ungroupedCustomAgents: ungrouped };
+  }, [customAgents]);
+
   return (
     <div className={cn('flex h-full flex-col', bgClass)}>
       <div className={cn('border-b px-3', isMobile ? 'mt-2 py-3' : 'py-3')}>
@@ -363,7 +383,38 @@ export const AgentsSidebar: React.FC<AgentsSidebarProps> = ({ onItemSelect }) =>
                 <div className="px-2 pb-1.5 pt-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                   Custom Agents
                 </div>
-                {customAgents.map((agent) => (
+
+                {/* Grouped agents by subfolder */}
+                {groupedCustomAgents.map(({ name: groupName, agents: groupAgents }) => (
+                  <SidebarGroup
+                    key={groupName}
+                    label={groupName}
+                    count={groupAgents.length}
+                    storageKey="agents"
+                  >
+                    {groupAgents.map((agent) => (
+                      <AgentListItem
+                        key={agent.name}
+                        agent={agent}
+                        isSelected={selectedAgentName === agent.name}
+                        onSelect={() => {
+                          setSelectedAgent(agent.name);
+                          onItemSelect?.();
+                          if (isMobile) {
+                            setSidebarOpen(false);
+                          }
+                        }}
+                        onRename={() => handleOpenRenameDialog(agent)}
+                        onDelete={() => handleDeleteAgent(agent)}
+                        onDuplicate={() => handleDuplicateAgent(agent)}
+                        getAgentModeIcon={getAgentModeIcon}
+                      />
+                    ))}
+                  </SidebarGroup>
+                ))}
+
+                {/* Ungrouped agents (flat in root agents dir) */}
+                {ungroupedCustomAgents.map((agent) => (
                   <AgentListItem
                     key={agent.name}
                     agent={agent}

packages/ui/src/components/sections/shared/SidebarGroup.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from 'react';
+import { RiArrowDownSLine } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+
+interface SidebarGroupProps {
+  /** Group display label (e.g. "business", "automation-ai") */
+  label: string;
+  /** Number of items in this group */
+  count: number;
+  /** Unique storage key prefix for persisting collapse state */
+  storageKey: string;
+  /** Whether to start expanded. Defaults to true. */
+  defaultExpanded?: boolean;
+  children: React.ReactNode;
+}
+
+function getStorageKey(storageKey: string, label: string): string {
+  return `opencode:sidebar-group:${storageKey}:${label}`;
+}
+
+/**
+ * Collapsible sidebar group with persisted expand/collapse state.
+ * Used in Agents and Skills sidebars to group items by subfolder.
+ */
+export const SidebarGroup: React.FC<SidebarGroupProps> = ({
+  label,
+  count,
+  storageKey,
+  defaultExpanded = true,
+  children,
+}) => {
+  const key = getStorageKey(storageKey, label);
+
+  const [expanded, setExpanded] = useState<boolean>(() => {
+    try {
+      const stored = localStorage.getItem(key);
+      if (stored !== null) return stored === 'true';
+    } catch {
+      // ignore storage errors
+    }
+    return defaultExpanded;
+  });
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(key, String(expanded));
+    } catch {
+      // ignore storage errors
+    }
+  }, [key, expanded]);
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => setExpanded((v) => !v)}
+        className={cn(
+          'flex w-full items-center gap-1 rounded-md px-2 py-1 text-left',
+          'text-xs font-semibold uppercase tracking-wide text-muted-foreground',
+          'hover:bg-[var(--interactive-hover)] transition-colors duration-150',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+        )}
+      >
+        <RiArrowDownSLine
+          className={cn(
+            'h-3.5 w-3.5 flex-shrink-0 transition-transform duration-200',
+            !expanded && '-rotate-90',
+          )}
+        />
+        <span className="flex-1 truncate">{label}</span>
+        <span className="ml-1 tabular-nums opacity-60">{count}</span>
+      </button>
+
+      {expanded && (
+        <div className="mt-0.5 space-y-0.5 ml-2 pl-3 border-l-2 border-[var(--interactive-border)]">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};

packages/ui/src/components/sections/shared/index.ts

@@ -54,3 +54,4 @@ export { SettingsSidebarHeader } from './SettingsSidebarHeader';
 export { SettingsSidebarItem, type SettingsSidebarItemAction } from './SettingsSidebarItem';
 export { SettingsPageLayout } from './SettingsPageLayout';
 export { SettingsSection } from './SettingsSection';
+export { SidebarGroup } from './SidebarGroup';

packages/ui/src/components/sections/skills/SkillsSidebar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Button } from '@/components/ui/button';
 import { ButtonLarge } from '@/components/ui/button-large';
 import { Input } from '@/components/ui/input';
@@ -24,6 +24,7 @@ import { useDeviceInfo } from '@/lib/device';
 import { isVSCodeRuntime } from '@/lib/desktop';
 import { cn } from '@/lib/utils';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { SidebarGroup } from '@/components/sections/shared/SidebarGroup';
 
 interface SkillsSidebarProps {
   onItemSelect?: () => void;
@@ -190,6 +191,27 @@ export const SkillsSidebar: React.FC<SkillsSidebarProps> = ({ onItemSelect }) =>
   const projectSkills = skills.filter((s) => s.scope === 'project');
   const userSkills = skills.filter((s) => s.scope === 'user');
 
+  // Helper: group a list of skills by their domain folder
+  function groupSkillsByFolder(list: DiscoveredSkill[]) {
+    const groups: Record<string, DiscoveredSkill[]> = {};
+    const ungrouped: DiscoveredSkill[] = [];
+    for (const skill of list) {
+      if (skill.group) {
+        if (!groups[skill.group]) groups[skill.group] = [];
+        groups[skill.group].push(skill);
+      } else {
+        ungrouped.push(skill);
+      }
+    }
+    const sortedGroups = Object.keys(groups)
+      .sort((a, b) => a.localeCompare(b))
+      .map((name) => ({ name, skills: groups[name] }));
+    return { sortedGroups, ungrouped };
+  }
+
+  const groupedProjectSkills = useMemo(() => groupSkillsByFolder(projectSkills), [projectSkills]);
+  const groupedUserSkills = useMemo(() => groupSkillsByFolder(userSkills), [userSkills]);
+
   return (
     <div className={cn('flex h-full flex-col', bgClass)}>
       <div className={cn('border-b px-3', isMobile ? 'mt-2 py-3' : 'py-3')}>
@@ -221,7 +243,33 @@ export const SkillsSidebar: React.FC<SkillsSidebarProps> = ({ onItemSelect }) =>
                 <div className="px-2 pb-1.5 pt-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                   Project Skills
                 </div>
-                {projectSkills.map((skill) => (
+                {groupedProjectSkills.sortedGroups.map(({ name: groupName, skills: groupSkills }) => (
+                  <SidebarGroup
+                    key={groupName}
+                    label={groupName}
+                    count={groupSkills.length}
+                    storageKey="project-skills"
+                  >
+                    {groupSkills.map((skill) => (
+                      <SkillListItem
+                        key={skill.name}
+                        skill={skill}
+                        isSelected={selectedSkillName === skill.name}
+                        onSelect={() => {
+                          setSelectedSkill(skill.name);
+                          onItemSelect?.();
+                          if (isMobile) {
+                            setSidebarOpen(false);
+                          }
+                        }}
+                        onRename={() => handleOpenRenameDialog(skill)}
+                        onDelete={() => handleDeleteSkill(skill)}
+                        onDuplicate={() => handleDuplicateSkill(skill)}
+                      />
+                    ))}
+                  </SidebarGroup>
+                ))}
+                {groupedProjectSkills.ungrouped.map((skill) => (
                   <SkillListItem
                     key={skill.name}
                     skill={skill}
@@ -246,7 +294,33 @@ export const SkillsSidebar: React.FC<SkillsSidebarProps> = ({ onItemSelect }) =>
                 <div className="px-2 pb-1.5 pt-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                   User Skills
                 </div>
-                {userSkills.map((skill) => (
+                {groupedUserSkills.sortedGroups.map(({ name: groupName, skills: groupSkills }) => (
+                  <SidebarGroup
+                    key={groupName}
+                    label={groupName}
+                    count={groupSkills.length}
+                    storageKey="user-skills"
+                  >
+                    {groupSkills.map((skill) => (
+                      <SkillListItem
+                        key={skill.name}
+                        skill={skill}
+                        isSelected={selectedSkillName === skill.name}
+                        onSelect={() => {
+                          setSelectedSkill(skill.name);
+                          onItemSelect?.();
+                          if (isMobile) {
+                            setSidebarOpen(false);
+                          }
+                        }}
+                        onRename={() => handleOpenRenameDialog(skill)}
+                        onDelete={() => handleDeleteSkill(skill)}
+                        onDuplicate={() => handleDuplicateSkill(skill)}
+                      />
+                    ))}
+                  </SidebarGroup>
+                ))}
+                {groupedUserSkills.ungrouped.map((skill) => (
                   <SkillListItem
                     key={skill.name}
                     skill={skill}