vibepulse 0.1.0 → 0.1.2

package/src/components/opencode-config/FullscreenConfigPanel.tsx

@@ -0,0 +1,360 @@
+'use client';
+
+import * as React from 'react';
+import { X, Search, Bot, Settings, ChevronRight, AlertTriangle } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import { CategoriesManager } from './categories/CategoriesManager';
+import { ProfileManager } from './profiles/ProfileManager';
+import { AgentConfigForm } from './AgentConfigForm';
+
+interface AgentConfig {
+  model?: string;
+}
+
+interface ConfigResponse {
+  agents: Record<string, AgentConfig>;
+}
+
+interface ModelsResponse {
+  models: string[];
+  source: string;
+}
+
+type AgentStatus = 'ok' | 'invalid' | 'unconfigured';
+
+interface FullscreenConfigPanelProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+interface AgentItem {
+  key: string;
+  name: string;
+  description: string;
+  icon?: React.ReactNode;
+}
+
+const AGENTS: AgentItem[] = [
+  { key: 'default', name: 'Default', description: 'Fallback configuration' },
+  { key: 'sisyphus', name: 'Sisyphus', description: 'Task execution agent' },
+  { key: 'hephaestus', name: 'Hephaestus', description: 'Build & automation' },
+  { key: 'prometheus', name: 'Prometheus', description: 'Planning agent' },
+  { key: 'oracle', name: 'Oracle', description: 'Knowledge & research' },
+  { key: 'metis', name: 'Metis', description: 'Strategy & consultation' },
+  { key: 'momus', name: 'Momus', description: 'Review & critique' },
+  { key: 'atlas', name: 'Atlas', description: 'Execution-focused' },
+  { key: 'librarian', name: 'Librarian', description: 'Documentation & exploration' },
+  { key: 'explore', name: 'Explore', description: 'Code navigation' },
+];
+
+export function FullscreenConfigPanel({ open, onClose }: FullscreenConfigPanelProps) {
+  const [activeTab, setActiveTab] = React.useState<'agents' | 'categories' | 'profiles'>('agents');
+  const [selectedAgent, setSelectedAgent] = React.useState('default');
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  // Fetch config and models for status indicators
+  const { data: configData } = useQuery<ConfigResponse>({
+    queryKey: ['opencode-config'],
+    queryFn: async () => {
+      const res = await fetch('/api/opencode-config');
+      if (!res.ok) throw new Error('Failed to fetch config');
+      return res.json();
+    },
+    enabled: open,
+  });
+
+  const { data: modelsData } = useQuery<ModelsResponse>({
+    queryKey: ['opencode-models'],
+    queryFn: async () => {
+      const res = await fetch('/api/opencode-models');
+      if (!res.ok) throw new Error('Failed to fetch models');
+      return res.json();
+    },
+    enabled: open,
+  });
+
+  const availableModels = React.useMemo(
+    () => new Set(modelsData?.models ?? []),
+    [modelsData]
+  );
+
+  const getAgentStatus = React.useCallback(
+    (agentKey: string): AgentStatus => {
+      const agentConfig = configData?.agents?.[agentKey];
+      if (!agentConfig?.model) return 'unconfigured';
+      if (availableModels.size > 0 && !availableModels.has(agentConfig.model)) return 'invalid';
+      return 'ok';
+    },
+    [configData, availableModels]
+  );
+
+  const attentionCount = React.useMemo(() => {
+    return AGENTS.filter((a) => {
+      const s = getAgentStatus(a.key);
+      return s === 'invalid';
+    }).length;
+  }, [getAgentStatus]);
+
+  React.useEffect(() => {
+    if (!open) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [open, onClose]);
+
+  React.useEffect(() => {
+    if (open) {
+      const originalStyle = window.getComputedStyle(document.body).overflow;
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.overflow = originalStyle;
+      };
+    }
+  }, [open]);
+
+  React.useEffect(() => {
+    if (open) {
+      setTimeout(() => inputRef.current?.focus(), 100);
+    }
+  }, [open]);
+
+  const filteredAgents = React.useMemo(() => {
+    if (!searchQuery.trim()) return AGENTS;
+    const query = searchQuery.toLowerCase();
+    return AGENTS.filter(
+      (agent) =>
+        agent.name.toLowerCase().includes(query) ||
+        agent.description.toLowerCase().includes(query)
+    );
+  }, [searchQuery]);
+
+  const selectedAgentData = AGENTS.find((a) => a.key === selectedAgent);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col bg-white dark:bg-zinc-950">
+      <header className="flex h-16 items-center justify-between border-b border-zinc-200 px-6 dark:border-zinc-800">
+        <div className="flex items-center gap-3">
+          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-600 text-white">
+            <Settings className="h-5 w-5" />
+          </div>
+          <div>
+            <h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+              Agent Configuration
+            </h1>
+            <p className="text-xs text-zinc-500 dark:text-zinc-400">
+              Manage AI agent settings and preferences
+            </p>
+           </div>
+         </div>
+
+         <div className="flex items-center gap-1 rounded-lg bg-zinc-100 p-1 dark:bg-zinc-800">
+           <button
+             type="button"
+             onClick={() => setActiveTab('agents')}
+             className={`rounded-md px-4 py-1.5 text-sm font-medium transition-colors ${
+               activeTab === 'agents'
+                 ? 'bg-blue-600 text-white shadow-sm'
+                 : 'text-zinc-600 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-700'
+             }`}
+           >
+             Agents
+           </button>
+           <button
+             type="button"
+             onClick={() => setActiveTab('categories')}
+             className={`rounded-md px-4 py-1.5 text-sm font-medium transition-colors ${
+               activeTab === 'categories'
+                 ? 'bg-blue-600 text-white shadow-sm'
+                 : 'text-zinc-600 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-700'
+             }`}
+           >
+             Categories
+           </button>
+           <button
+             type="button"
+             onClick={() => setActiveTab('profiles')}
+             className={`rounded-md px-4 py-1.5 text-sm font-medium transition-colors ${
+               activeTab === 'profiles'
+                 ? 'bg-blue-600 text-white shadow-sm'
+                 : 'text-zinc-600 hover:bg-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-700'
+             }`}
+           >
+             Profiles
+           </button>
+         </div>
+
+         <button
+          type="button"
+          onClick={onClose}
+          className="flex h-9 w-9 items-center justify-center rounded-lg text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
+          aria-label="Close panel"
+        >
+          <X className="h-5 w-5" />
+        </button>
+       </header>
+
+       {activeTab === 'agents' ? (
+         <div className="flex flex-1 overflow-hidden">
+           <aside className="flex w-[280px] flex-col border-r border-zinc-200 bg-zinc-50/50 dark:border-zinc-800 dark:bg-zinc-900/20">
+             <div className="border-b border-zinc-200 p-4 dark:border-zinc-800">
+               <div className="relative">
+                 <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+                 <input
+                   ref={inputRef}
+                   type="text"
+                   value={searchQuery}
+                   onChange={(e) => setSearchQuery(e.target.value)}
+                   placeholder="Search agents..."
+                   className="h-10 w-full rounded-lg border border-zinc-200 bg-white pl-9 pr-4 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100 dark:placeholder:text-zinc-600"
+                 />
+               </div>
+             </div>
+
+             <nav className="flex-1 overflow-y-auto p-2">
+               <div className="space-y-1">
+                 {filteredAgents.map((agent) => (
+                   <button
+                     key={agent.key}
+                     type="button"
+                     onClick={() => setSelectedAgent(agent.key)}
+                     className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors ${
+                       selectedAgent === agent.key
+                         ? 'bg-blue-600 text-white'
+                         : 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800'
+                     }`}
+                   >
+                     <div
+                       className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-md ${
+                         selectedAgent === agent.key
+                           ? 'bg-white/20'
+                           : 'bg-zinc-200 dark:bg-zinc-800'
+                       }`}
+                     >
+                       <Bot
+                         className={`h-4 w-4 ${
+                           selectedAgent === agent.key
+                             ? 'text-white'
+                             : 'text-zinc-600 dark:text-zinc-400'
+                         }`}
+                       />
+                     </div>
+                     <div className="min-w-0 flex-1">
+                       <div className="flex items-center gap-2 truncate text-sm font-medium">
+                         {agent.name}
+                          {(() => {
+                            const status = getAgentStatus(agent.key);
+                            if (status === 'unconfigured') return <span className={`inline-block h-2 w-2 shrink-0 rounded-full ${selectedAgent === agent.key ? 'bg-zinc-300' : 'bg-zinc-400 dark:bg-zinc-500'}`} title="Inherits category configuration" />;
+                            if (status === 'invalid') return <span className={`inline-block h-2 w-2 shrink-0 rounded-full ${selectedAgent === agent.key ? 'bg-amber-300' : 'bg-amber-500'}`} title="Model not available" />;
+                            return <span className={`inline-block h-2 w-2 shrink-0 rounded-full ${selectedAgent === agent.key ? 'bg-emerald-300' : 'bg-emerald-500'}`} title="Configured" />;
+                          })()}
+                       </div>
+                       <div
+                         className={`truncate text-xs ${
+                           selectedAgent === agent.key
+                             ? 'text-blue-100'
+                             : 'text-zinc-500 dark:text-zinc-500'
+                         }`}
+                       >
+                         {agent.description}
+                       </div>
+                     </div>
+                     {selectedAgent === agent.key && (
+                       <ChevronRight className="h-4 w-4 shrink-0 text-blue-200" />
+                     )}
+                   </button>
+                 ))}
+               </div>
+
+               {filteredAgents.length === 0 && (
+                 <div className="py-8 text-center">
+                   <p className="text-sm text-zinc-500 dark:text-zinc-400">
+                     No agents found
+                   </p>
+                 </div>
+               )}
+             </nav>
+
+             <div className="border-t border-zinc-200 p-4 dark:border-zinc-800">
+               <div className="flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-400">
+                 <span className="flex items-center gap-1.5">
+                    {AGENTS.length} agents
+                    {attentionCount > 0 && (
+                      <span className="inline-flex items-center gap-1 rounded-full bg-amber-100 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
+                        <AlertTriangle className="h-2.5 w-2.5" />
+                        {attentionCount} need attention
+                      </span>
+                    )}
+                  </span>
+                 <kbd className="rounded bg-zinc-200 px-1.5 py-0.5 font-mono dark:bg-zinc-800">
+                   ESC
+                 </kbd>
+               </div>
+             </div>
+           </aside>
+
+           <main className="flex-1 overflow-y-auto bg-white dark:bg-zinc-950">
+             <div className="mx-auto max-w-3xl p-8">
+               <div className="mb-8 flex items-center gap-4">
+                 <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-lg">
+                   <Bot className="h-8 w-8" />
+                 </div>
+                 <div>
+                   <h2 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
+                     {selectedAgentData?.name}
+                   </h2>
+                   <p className="text-zinc-500 dark:text-zinc-400">
+                     {selectedAgentData?.description}
+                   </p>
+                 </div>
+               </div>
+
+                <AgentConfigForm
+                    agentName={selectedAgent}
+                    onSaveSuccess={onClose}
+                  />
+             </div>
+           </main>
+         </div>
+       ) : activeTab === 'categories' ? (
+         <main className="flex-1 overflow-y-auto bg-white dark:bg-zinc-950">
+           <div className="mx-auto max-w-4xl p-8">
+             <div className="mb-8">
+               <h2 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
+                 Categories
+               </h2>
+               <p className="text-zinc-500 dark:text-zinc-400">
+                 Manage agent categories and their configurations
+               </p>
+             </div>
+             <CategoriesManager />
+           </div>
+         </main>
+       ) : (
+         <main className="flex-1 overflow-y-auto bg-white dark:bg-zinc-950">
+           <div className="mx-auto max-w-4xl p-8">
+             <div className="mb-8">
+               <h2 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
+                 Profiles
+               </h2>
+               <p className="text-zinc-500 dark:text-zinc-400">
+                 Manage configuration profiles for different agent setups
+               </p>
+             </div>
+             <ProfileManager />
+           </div>
+         </main>
+       )}
+    </div>
+  );
+}
+
+export default FullscreenConfigPanel;

package/src/components/opencode-config/categories/CategoriesList.tsx

@@ -0,0 +1,328 @@
+'use client';
+
+import * as React from 'react';
+import { Pencil, Trash2, Layers, AlertTriangle, AlertCircle } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import { CategoryConfig } from '../../../types/opencodeConfig';
+
+
+interface ModelsResponse {
+  models: string[];
+  source: string;
+}
+
+interface CategoriesListProps {
+  /** Record of category key to category configuration */
+  categories: Record<string, CategoryConfig>;
+  /** Callback when edit button is clicked */
+  onEdit: (categoryKey: string, config: CategoryConfig) => void;
+  /** Callback when delete button is clicked (only for custom categories) */
+  onDelete: (categoryKey: string) => void;
+}
+
+interface CategoryDefinition {
+  key: string;
+  name: string;
+  description: string;
+}
+
+/** Built-in categories as defined by oh-my-opencode */
+const BUILT_IN_CATEGORIES: CategoryDefinition[] = [
+  {
+    key: 'visual-engineering',
+    name: 'Visual Engineering',
+    description: 'Visual and UI component engineering tasks',
+  },
+  {
+    key: 'ultrabrain',
+    name: 'Ultrabrain',
+    description: 'Complex reasoning and deep analysis tasks',
+  },
+  {
+    key: 'deep',
+    name: 'Deep',
+    description: 'Deep research and comprehensive tasks',
+  },
+  {
+    key: 'artistry',
+    name: 'Artistry',
+    description: 'Creative and design-focused tasks',
+  },
+  {
+    key: 'quick',
+    name: 'Quick',
+    description: 'Fast, simple tasks requiring minimal processing',
+  },
+  {
+    key: 'unspecified-low',
+    name: 'Unspecified Low',
+    description: 'Default low-complexity tasks',
+  },
+  {
+    key: 'unspecified-high',
+    name: 'Unspecified High',
+    description: 'Default high-complexity tasks',
+  },
+  {
+    key: 'writing',
+    name: 'Writing',
+    description: 'Content creation and writing tasks',
+  },
+];
+
+/** Check if a category key is a built-in category */
+function isBuiltInCategory(key: string): boolean {
+  return BUILT_IN_CATEGORIES.some((cat) => cat.key === key);
+}
+
+/** Get display info for a category */
+function getCategoryInfo(key: string): CategoryDefinition {
+  const builtIn = BUILT_IN_CATEGORIES.find((cat) => cat.key === key);
+  if (builtIn) {
+    return builtIn;
+  }
+  // For custom categories, use the key as the name
+  return {
+    key,
+    name: key,
+    description: 'Custom category',
+  };
+}
+
+/** Format variant display */
+function formatVariant(variant?: string): string {
+  if (!variant) return '—';
+  return variant;
+}
+
+/** Format model display */
+function formatModel(model?: string): string {
+  if (!model) return 'Default model';
+  // Extract just the model name from a full path like "google/gemini-3.1-pro"
+  const parts = model.split('/');
+  return parts[parts.length - 1];
+}
+
+interface CategoryCardProps {
+  categoryKey: string;
+  config: CategoryConfig;
+  isBuiltIn: boolean;
+  availableModels: Set<string> | null;
+  onEdit: (key: string, config: CategoryConfig) => void;
+  onDelete: (key: string) => void;
+}
+
+function CategoryCard({
+  categoryKey,
+  config,
+  isBuiltIn,
+  availableModels,
+  onEdit,
+  onDelete,
+}: CategoryCardProps) {
+  const info = getCategoryInfo(categoryKey);
+  const hasConfig = !!(config.model || config.variant);
+  const isModelInvalid = config.model && availableModels && availableModels.size > 0 && !availableModels.has(config.model);
+  
+  // Dynamic border/bg classes based on status
+  let cardStateClasses = hasConfig
+    ? 'bg-white border-zinc-200 dark:bg-zinc-900 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600'
+    : 'bg-zinc-50/50 border-zinc-200/50 dark:bg-zinc-900/50 dark:border-zinc-800/50 hover:border-zinc-300 dark:hover:border-zinc-600';
+    
+  if (isModelInvalid) {
+    cardStateClasses = 'bg-amber-50/50 border-amber-200 dark:bg-amber-900/10 dark:border-amber-800/50 hover:border-amber-300 dark:hover:border-amber-700';
+  }
+
+  return (
+    <div
+      className={`
+        group relative flex items-center justify-between p-4 rounded-lg border flex-col sm:flex-row items-start sm:items-center gap-4
+        transition-all duration-200
+        ${cardStateClasses}
+      `}
+    >
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <h4 className="text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate">
+            {info.name}
+          </h4>
+          {!isBuiltIn && (
+            <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
+              Custom
+            </span>
+          )}
+          {isModelInvalid && (
+            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
+              <AlertTriangle className="h-3 w-3" />
+              Model Unavailable
+            </span>
+          )}
+          {!isModelInvalid && hasConfig && (
+            <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300">
+              Configured
+            </span>
+          )}
+          {!hasConfig && (
+            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
+              <AlertCircle className="h-3 w-3" />
+              Default fallback
+            </span>
+          )}
+        </div>
+        <p className="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400 truncate">
+          {info.description}
+        </p>
+        <div className="mt-2 flex items-center gap-3 text-xs">
+          <span className="text-zinc-600 dark:text-zinc-400">
+            <span className="text-zinc-400 dark:text-zinc-500">Model:</span>{' '}
+            {formatModel(config.model)}
+          </span>
+          {config.variant && (
+            <span className="text-zinc-600 dark:text-zinc-400">
+              <span className="text-zinc-400 dark:text-zinc-500">Variant:</span>{' '}
+              {formatVariant(config.variant)}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-1 ml-4 opacity-0 group-hover:opacity-100 transition-opacity">
+        <button
+          type="button"
+          onClick={() => onEdit(categoryKey, config)}
+          className="p-1.5 rounded-md text-zinc-500 hover:text-zinc-900 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:text-zinc-100 dark:hover:bg-zinc-800 transition-colors"
+          aria-label={`Edit ${info.name} category`}
+          title={`Edit ${info.name}`}
+        >
+          <Pencil className="h-4 w-4" />
+        </button>
+        {!isBuiltIn && (
+          <button
+            type="button"
+            onClick={() => onDelete(categoryKey)}
+            className="p-1.5 rounded-md text-zinc-500 hover:text-red-600 hover:bg-red-50 dark:text-zinc-400 dark:hover:text-red-400 dark:hover:bg-red-900/20 transition-colors"
+            aria-label={`Delete ${info.name} category`}
+            title={`Delete ${info.name}`}
+          >
+            <Trash2 className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function CategoriesList({
+  categories,
+  onEdit,
+  onDelete,
+}: CategoriesListProps) {
+  const { data: modelsData } = useQuery<ModelsResponse>({
+    queryKey: ['opencode-models'],
+    queryFn: async () => {
+      const res = await fetch('/api/opencode-models');
+      if (!res.ok) throw new Error('Failed to fetch models');
+      return res.json();
+    },
+  });
+
+  const availableModels = React.useMemo(
+    () => (modelsData ? new Set(modelsData.models) : null),
+    [modelsData]
+  );
+
+  // Separate built-in and custom categories
+  const { builtIn, custom } = React.useMemo(() => {
+    const builtIn: { key: string; config: CategoryConfig }[] = [];
+    const custom: { key: string; config: CategoryConfig }[] = [];
+
+    // First, add all built-in categories (even if not in config)
+    BUILT_IN_CATEGORIES.forEach((cat) => {
+      builtIn.push({
+        key: cat.key,
+        config: categories[cat.key] || {},
+      });
+    });
+
+    // Then add custom categories
+    Object.entries(categories).forEach(([key, config]) => {
+      if (!isBuiltInCategory(key)) {
+        custom.push({ key, config });
+      }
+    });
+
+    return { builtIn, custom };
+  }, [categories]);
+
+  const hasCustomCategories = custom.length > 0;
+
+  return (
+    <div className="space-y-6">
+      {/* Built-in Categories */}
+      <section>
+        <div className="flex items-center gap-2 mb-3">
+          <Layers className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
+          <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+            Built-in Categories
+          </h3>
+          <span className="text-xs text-zinc-500 dark:text-zinc-400">
+            ({builtIn.length})
+          </span>
+        </div>
+        <div className="space-y-2">
+          {builtIn.map(({ key, config }) => (
+            <CategoryCard
+              key={key}
+              categoryKey={key}
+              config={config}
+              isBuiltIn={true}
+              availableModels={availableModels}
+              onEdit={onEdit}
+              onDelete={onDelete}
+            />
+          ))}
+        </div>
+      </section>
+
+      {/* Custom Categories */}
+      {hasCustomCategories && (
+        <section>
+          <div className="flex items-center gap-2 mb-3">
+            <Layers className="h-4 w-4 text-blue-500" />
+            <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+              Custom Categories
+            </h3>
+            <span className="text-xs text-zinc-500 dark:text-zinc-400">
+              ({custom.length})
+            </span>
+          </div>
+          <div className="space-y-2">
+            {custom.map(({ key, config }) => (
+              <CategoryCard
+                key={key}
+                categoryKey={key}
+                config={config}
+                isBuiltIn={false}
+                availableModels={availableModels}
+                onEdit={onEdit}
+                onDelete={onDelete}
+              />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Empty state when no categories at all */}
+      {builtIn.length === 0 && !hasCustomCategories && (
+        <div className="text-center py-8">
+          <Layers className="h-8 w-8 mx-auto text-zinc-300 dark:text-zinc-600 mb-2" />
+          <p className="text-sm text-zinc-500 dark:text-zinc-400">
+            No categories configured
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CategoriesList;