vibepulse 0.1.12 → 0.2.1

package/.next/standalone/src/components/opencode-config/categories/CategoriesManager.test.tsx

@@ -0,0 +1,111 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CategoriesManager } from './CategoriesManager';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const mockFetch = vi.fn<typeof fetch>();
+global.fetch = mockFetch;
+
+function jsonResponse(data: unknown): Response {
+  return {
+    ok: true,
+    status: 200,
+    json: async () => data,
+  } as Response;
+}
+
+describe('CategoriesManager', () => {
+  let queryClient: QueryClient;
+
+  beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { staleTime: 0 },
+      },
+    });
+    vi.clearAllMocks();
+  });
+
+  it('should load and display category configurations correctly', async () => {
+    mockFetch
+      .mockResolvedValueOnce(
+        jsonResponse({
+          agents: {},
+          categories: {
+            'visual-engineering': { model: 'google/gemini-3.1-pro', variant: 'high' },
+            writing: { model: 'openai/gpt-5.4', variant: 'medium' },
+          },
+        })
+      )
+      .mockResolvedValueOnce(
+        jsonResponse({
+          models: ['google/gemini-3.1-pro', 'openai/gpt-5.4'],
+          source: 'test',
+        })
+      );
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <CategoriesManager />
+      </QueryClientProvider>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Ultrabrain')).toBeInTheDocument();
+      expect(screen.getByText('Visual Engineering')).toBeInTheDocument();
+    });
+
+    expect(screen.getAllByText('Provider:').length).toBeGreaterThan(0);
+    expect(screen.getByText('google')).toBeInTheDocument();
+  });
+
+  it('should save category correctly after editing', async () => {
+    const user = userEvent.setup();
+
+    mockFetch
+      .mockResolvedValueOnce(
+        jsonResponse({
+          agents: {},
+          categories: { ultrabrain: { model: 'claude' } },
+        })
+      )
+      .mockResolvedValueOnce(
+        jsonResponse({
+          models: ['anthropic/claude-3-5-sonnet', 'openai/gpt-4'],
+          source: 'test',
+        })
+      )
+      .mockResolvedValueOnce(jsonResponse({ success: true }))
+      .mockResolvedValueOnce(
+        jsonResponse({
+          agents: {},
+          categories: { ultrabrain: { model: 'anthropic/claude-3-5-sonnet' } },
+        })
+      );
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <CategoriesManager />
+      </QueryClientProvider>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Ultrabrain')).toBeInTheDocument();
+    });
+
+    const editButtons = screen.getAllByRole('button', { name: /edit/i });
+    await user.click(editButtons[0]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Category')).toBeInTheDocument();
+    });
+
+    const saveButton = screen.getByRole('button', { name: /save changes/i });
+    await user.click(saveButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/saved successfully/i)).toBeInTheDocument();
+    });
+  });
+});

package/.next/standalone/src/components/opencode-config/categories/CategoriesManager.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import * as React from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Loader2, AlertCircle, Check } from 'lucide-react';
+import type { CategoryConfig } from '../../../types/opencodeConfig';
+import { CategoriesList } from './CategoriesList';
+import { CategoryConfigForm } from './CategoryConfigForm';
+
+interface OpencodeConfigResponse {
+  agents: Record<string, unknown>;
+  categories: Record<string, CategoryConfig>;
+}
+
+interface CategoriesManagerProps {
+  onSaveSuccess?: () => void;
+}
+
+export function CategoriesManager({ onSaveSuccess }: CategoriesManagerProps) {
+  const queryClient = useQueryClient();
+  const [editingCategory, setEditingCategory] = React.useState<string | null>(null);
+  const [editingConfig, setEditingConfig] = React.useState<CategoryConfig | undefined>(undefined);
+  const [toast, setToast] = React.useState<{
+    type: 'success' | 'error';
+    message: string;
+  } | null>(null);
+
+  const {
+    data: config,
+    isLoading,
+    isError,
+    error,
+  } = useQuery<OpencodeConfigResponse>({
+    queryKey: ['opencode-config'],
+    queryFn: async () => {
+      const res = await fetch('/api/opencode-config');
+      if (!res.ok) {
+        throw new Error('Failed to fetch configuration');
+      }
+      return res.json();
+    },
+  });
+
+  React.useEffect(() => {
+    if (toast) {
+      const timer = setTimeout(() => setToast(null), 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [toast]);
+
+  const saveMutation = useMutation({
+    mutationFn: async (categories: Record<string, CategoryConfig>) => {
+      const res = await fetch('/api/opencode-config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ categories }),
+      });
+
+      if (!res.ok) {
+        const errorData = await res.json().catch(() => ({}));
+        throw new Error(errorData.error || 'Failed to save categories');
+      }
+
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['opencode-config'] });
+      setToast({ type: 'success', message: 'Categories saved successfully' });
+      setEditingCategory(null);
+      setEditingConfig(undefined);
+      onSaveSuccess?.();
+    },
+    onError: (err: Error) => {
+      setToast({ type: 'error', message: err.message });
+    },
+  });
+
+  const handleEditCategory = (categoryKey: string, categoryConfig: CategoryConfig) => {
+    setEditingCategory(categoryKey);
+    setEditingConfig(categoryConfig);
+  };
+
+  const handleCancelEdit = () => {
+    setEditingCategory(null);
+    setEditingConfig(undefined);
+  };
+
+  const handleSaveCategory = (categoryConfig: CategoryConfig) => {
+    if (!editingCategory) return;
+
+    const currentCategories = config?.categories || {};
+    const updatedCategories = {
+      ...currentCategories,
+      [editingCategory]: categoryConfig,
+    };
+    saveMutation.mutate(updatedCategories);
+  };
+
+  const handleDeleteCategory = (categoryKey: string) => {
+    const currentCategories = config?.categories || {};
+    const { [categoryKey]: _removed, ...updatedCategories } = currentCategories;
+    saveMutation.mutate(updatedCategories);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="h-6 w-6 animate-spin text-zinc-400" />
+        <span className="ml-2 text-sm text-zinc-500 dark:text-zinc-400">
+          Loading categories...
+        </span>
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20">
+        <div className="flex items-center gap-2">
+          <AlertCircle className="h-5 w-5 text-red-600 dark:text-red-400" />
+          <div>
+            <p className="text-sm font-medium text-red-800 dark:text-red-300">
+              Failed to load categories
+            </p>
+            <p className="text-xs text-red-600 dark:text-red-400">
+              {error instanceof Error ? error.message : 'An unknown error occurred'}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const categories = config?.categories || {};
+
+  return (
+    <div className="space-y-4">
+      {toast && (
+        <div
+          role="alert"
+          className={`flex items-center gap-2 rounded-lg px-4 py-3 text-sm ${
+            toast.type === 'success'
+              ? 'bg-emerald-50 text-emerald-800 dark:bg-emerald-900/20 dark:text-emerald-300'
+              : 'bg-red-50 text-red-800 dark:bg-red-900/20 dark:text-red-300'
+          }`}
+        >
+          {toast.type === 'success' ? (
+            <Check className="h-4 w-4 shrink-0" aria-hidden="true" />
+          ) : (
+            <AlertCircle className="h-4 w-4 shrink-0" aria-hidden="true" />
+          )}
+          <span>{toast.message}</span>
+        </div>
+      )}
+
+      {editingCategory ? (
+        <CategoryConfigForm
+          categoryName={editingCategory}
+          initialConfig={editingConfig}
+          onSave={handleSaveCategory}
+          onCancel={handleCancelEdit}
+        />
+      ) : (
+        <CategoriesList
+          categories={categories}
+          onEdit={handleEditCategory}
+          onDelete={handleDeleteCategory}
+        />
+      )}
+    </div>
+  );
+}
+
+export default CategoriesManager;