vibepulse 0.1.0 → 0.1.2

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

@@ -0,0 +1,284 @@
+'use client';
+
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { useQuery } from '@tanstack/react-query';
+import { Check, ChevronDown, Search, AlertCircle, RefreshCw } from 'lucide-react';
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+interface OpencodeModelsResponse {
+  models: string[];
+  source: string;
+  error?: string;
+}
+
+interface AgentModelSelectorProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+const SelectTrigger = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-10 w-full items-center justify-between rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm',
+      'ring-offset-white placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2',
+      'disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-950 dark:ring-offset-zinc-950',
+      'dark:placeholder:text-zinc-400 dark:focus:ring-zinc-300',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-zinc-200 bg-white text-zinc-950 shadow-md',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2',
+        'data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none',
+      'focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'dark:focus:bg-zinc-800 dark:focus:text-zinc-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectValue = SelectPrimitive.Value;
+
+function parseModelName(model: string): { provider: string; model: string } {
+  if (!model) return { provider: 'unknown', model: '' };
+  
+  const slashIndex = model.indexOf('/');
+  if (slashIndex !== -1) {
+    return { 
+      provider: model.substring(0, slashIndex), 
+      model: model.substring(slashIndex + 1) 
+    };
+  }
+  return { provider: 'unknown', model };
+}
+
+export function AgentModelSelector({
+  value,
+  onValueChange,
+  placeholder = 'Select a model...',
+  disabled = false,
+}: AgentModelSelectorProps) {
+  const [searchQuery, setSearchQuery] = React.useState('');
+
+  const { data, isLoading, isError, error, refetch } = useQuery<OpencodeModelsResponse>({
+    queryKey: ['opencode-models'],
+    queryFn: async () => {
+      const res = await fetch('/api/opencode-models');
+      const data = await res.json();
+      if (!res.ok || data.error) {
+        throw new Error(data.error || 'Failed to fetch models');
+      }
+      return data;
+    },
+    retry: false,
+  });
+
+  // Ensure the currently selected model is in the list (for echo display)
+  const allModels = React.useMemo(() => {
+    const models = data?.models ?? [];
+    const modelSet = new Set(models);
+    if (value && !modelSet.has(value)) {
+      modelSet.add(value);
+    }
+    return Array.from(modelSet).sort();
+  }, [data?.models, value]);
+
+  const filteredModels = React.useMemo(() => {
+    if (!searchQuery.trim()) return allModels;
+    const query = searchQuery.toLowerCase();
+    return allModels.filter((model) => model.toLowerCase().includes(query));
+  }, [allModels, searchQuery]);
+
+  const groupedModels = React.useMemo(() => {
+    const groups: Record<string, string[]> = {};
+    filteredModels.forEach((model) => {
+      const { provider } = parseModelName(model);
+      if (!groups[provider]) {
+        groups[provider] = [];
+      }
+      groups[provider].push(model);
+    });
+    return groups;
+  }, [filteredModels]);
+
+  const providers = Object.keys(groupedModels).sort();
+
+   const handleOpenChange = React.useCallback((open: boolean) => {
+     if (!open) {
+       setSearchQuery('');
+     }
+   }, []);
+
+  const selectedModel = value ? parseModelName(value) : null;
+
+  return (
+    <SelectPrimitive.Root
+      value={value}
+      onValueChange={onValueChange}
+      disabled={disabled || isLoading}
+      onOpenChange={handleOpenChange}
+    >
+      <SelectTrigger>
+        <SelectValue placeholder={placeholder}>
+          {selectedModel && (
+            <span className="flex items-center gap-2">
+              <span className="text-xs font-medium text-zinc-500 dark:text-zinc-400">
+                {selectedModel.provider}
+              </span>
+              <span className="text-zinc-500 dark:text-zinc-400">/</span>
+              <span className="text-zinc-900 dark:text-zinc-100">
+                {selectedModel.model}
+              </span>
+            </span>
+          )}
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        <div className="sticky top-0 z-10 border-b border-zinc-200 bg-white px-2 pb-2 pt-1 dark:border-zinc-800 dark:bg-zinc-950">
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search models..."
+              className={cn(
+                'h-9 w-full rounded-md border border-zinc-200 bg-transparent pl-8 pr-3 text-sm',
+                'outline-none placeholder:text-zinc-500 focus:border-zinc-400 focus:ring-0',
+                'dark:border-zinc-800 dark:placeholder:text-zinc-400'
+              )}
+              onKeyDown={(e) => e.stopPropagation()}
+            />
+          </div>
+        </div>
+
+        <div className="max-h-64 overflow-auto">
+          {isLoading ? (
+            <div className="px-2 py-4 text-center text-sm text-zinc-500">
+              Loading models...
+            </div>
+          ) : isError ? (
+            <div className="px-4 py-6 text-center">
+              <div className="flex flex-col items-center gap-3">
+                <div className="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
+                  <AlertCircle className="h-5 w-5 text-red-600 dark:text-red-400" />
+                </div>
+                <div className="space-y-1">
+                  <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                    Failed to load models
+                  </p>
+                  <p className="text-xs text-zinc-500 dark:text-zinc-400 max-w-[200px]">
+                    {error instanceof Error ? error.message : 'Please check your OpenCode installation'}
+                  </p>
+                </div>
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    refetch();
+                  }}
+                  className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium bg-zinc-100 text-zinc-700 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700 transition-colors"
+                >
+                  <RefreshCw className="h-3.5 w-3.5" />
+                  Retry
+                </button>
+              </div>
+            </div>
+          ) : filteredModels.length === 0 ? (
+            <div className="px-2 py-4 text-center text-sm text-zinc-500">
+              No models found
+            </div>
+          ) : (
+            providers.map((provider) => (
+              <div key={provider}>
+                <div className="px-2 py-1.5 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
+                  {provider}
+                </div>
+                {groupedModels[provider].map((model) => {
+                  const { model: modelName } = parseModelName(model);
+                  return (
+                    <SelectItem key={model} value={model}>
+                      <span className="flex items-center gap-2">
+                        <span className="text-zinc-900 dark:text-zinc-100">
+                          {modelName}
+                        </span>
+                      </span>
+                    </SelectItem>
+                  );
+                })}
+              </div>
+            ))
+          )}
+        </div>
+      </SelectContent>
+    </SelectPrimitive.Root>
+  );
+}

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

@@ -0,0 +1,162 @@
+'use client';
+
+import * as React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/Tabs';
+import { AgentConfigForm } from './AgentConfigForm';
+import { Loader2 } from 'lucide-react';
+
+interface AgentConfig {
+  model?: string;
+  temperature?: number;
+  top_p?: number;
+}
+
+interface OpencodeConfigResponse {
+  agents: Record<string, AgentConfig>;
+}
+
+interface AgentDefinition {
+  key: string;
+  name: string;
+  description: string;
+}
+
+const PREDEFINED_AGENTS: AgentDefinition[] = [
+  {
+    key: 'default',
+    name: 'Default',
+    description: 'Default agent configuration used as fallback for all agents',
+  },
+  {
+    key: 'sisyphus',
+    name: 'Sisyphus',
+    description: 'Task execution agent - focused on completing specific tasks',
+  },
+  {
+    key: 'hephaestus',
+    name: 'Hephaestus',
+    description: 'Build and automation agent - handles CI/CD and deployment',
+  },
+  {
+    key: 'prometheus',
+    name: 'Prometheus',
+    description: 'Planning agent - creates and manages project plans',
+  },
+  {
+    key: 'oracle',
+    name: 'Oracle',
+    description: 'Knowledge and research agent - provides insights and answers',
+  },
+  {
+    key: 'metis',
+    name: 'Metis',
+    description: 'Strategy and consultation agent - advises on best practices',
+  },
+  {
+    key: 'momus',
+    name: 'Momus',
+    description: 'Review and critique agent - evaluates code and decisions',
+  },
+  {
+    key: 'atlas',
+    name: 'Atlas',
+    description: 'Execution-focused agent for task completion',
+  },
+  {
+    key: 'librarian',
+    name: 'Librarian',
+    description: 'Documentation and code exploration agent',
+  },
+  {
+    key: 'explore',
+    name: 'Explore',
+    description: 'Code navigation and discovery agent',
+  },
+];
+
+interface AgentsConfigPanelProps {
+  onSaveSuccess?: () => void;
+}
+
+export function AgentsConfigPanel({ onSaveSuccess }: AgentsConfigPanelProps) {
+  const [activeTab, setActiveTab] = React.useState('default');
+
+  const { data: config, isLoading } = useQuery<OpencodeConfigResponse>({
+    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();
+    },
+  });
+
+  const configuredAgents = React.useMemo(() => {
+    const agents = config?.agents || {};
+    return PREDEFINED_AGENTS.map((agent) => ({
+      ...agent,
+      isConfigured: agent.key in agents,
+    }));
+  }, [config]);
+
+  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 agent configurations...
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+        <TabsList className="flex flex-wrap h-auto gap-1 p-1.5">
+          {configuredAgents.map((agent) => (
+            <TabsTrigger
+              key={agent.key}
+              value={agent.key}
+              className="text-xs px-3 py-1.5 data-[state=active]:bg-white data-[state=active]:text-zinc-900 dark:data-[state=active]:bg-zinc-900 dark:data-[state=active]:text-zinc-50"
+            >
+              <span className="flex items-center gap-1.5">
+                {agent.name}
+                {agent.isConfigured && (
+                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
+                )}
+              </span>
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {PREDEFINED_AGENTS.map((agent) => (
+          <TabsContent
+            key={agent.key}
+            value={agent.key}
+            className="mt-4 focus-visible:outline-none"
+          >
+            <div className="space-y-4">
+              <div className="pb-4 border-b border-zinc-200 dark:border-zinc-700">
+                <h3 className="text-base font-semibold text-zinc-900 dark:text-zinc-100">
+                  {agent.name}
+                </h3>
+                <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
+                  {agent.description}
+                </p>
+              </div>
+              <AgentConfigForm
+                agentName={agent.key}
+                onSaveSuccess={onSaveSuccess}
+              />
+            </div>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  );
+}
+
+export default AgentsConfigPanel;

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

@@ -0,0 +1,43 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { Settings } from 'lucide-react';
+
+interface OpencodeConfigStatus {
+  hasConfig: boolean;
+  hasPlugin: boolean;
+  path?: string;
+}
+
+interface ConfigButtonProps {
+  onClick: () => void;
+}
+
+export function ConfigButton({ onClick }: ConfigButtonProps) {
+  const { data: status } = useQuery<OpencodeConfigStatus>({
+    queryKey: ['opencode-config', 'status'],
+    queryFn: async () => {
+      const res = await fetch('/api/opencode-config/status');
+      if (!res.ok) {
+        throw new Error('Failed to fetch config status');
+      }
+      return res.json();
+    },
+  });
+
+  if (!status?.hasPlugin) {
+    return null;
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="inline-flex items-center justify-center w-9 h-9 rounded-lg text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-zinc-800 transition-colors duration-200"
+      aria-label="OpenCode Settings"
+      title="OpenCode Settings"
+    >
+      <Settings className="w-5 h-5" />
+    </button>
+  );
+}

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

@@ -0,0 +1,91 @@
+'use client';
+
+import * as Dialog from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { AgentsConfigPanel } from './AgentsConfigPanel';
+
+interface ConfigPanelProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: string;
+    description?: string;
+}
+
+export function ConfigPanel({
+    open,
+    onOpenChange,
+    title = 'Configuration',
+    description,
+}: ConfigPanelProps) {
+    return (
+        <Dialog.Root open={open} onOpenChange={onOpenChange}>
+            <Dialog.Portal>
+                <Dialog.Overlay
+                    className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+                />
+
+                <Dialog.Content
+                    className="fixed z-50 gap-4 bg-white dark:bg-zinc-800 p-0 shadow-2xl outline-none 
+                        inset-x-0 bottom-0 rounded-t-xl border-t border-gray-200 dark:border-zinc-700
+                        h-[85vh] flex flex-col
+                        sm:inset-auto sm:left-1/2 sm:top-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 
+                        sm:w-full sm:max-w-lg sm:h-auto sm:max-h-[85vh] sm:rounded-xl sm:border"
+                >
+                    <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100 dark:border-zinc-700/50 flex-shrink-0">
+                        <div className="flex flex-col gap-0.5">
+                            <Dialog.Title className="text-base font-semibold text-gray-900 dark:text-gray-100">
+                                {title}
+                            </Dialog.Title>
+                            {description && (
+                                <Dialog.Description className="text-sm text-gray-500 dark:text-gray-400">
+                                    {description}
+                                </Dialog.Description>
+                            )}
+                        </div>
+                        <Dialog.Close asChild>
+                            <button
+                                type="button"
+                                className="w-7 h-7 flex items-center justify-center rounded-md text-gray-400 
+                                    hover:text-gray-600 hover:bg-gray-100 
+                                    dark:text-gray-500 dark:hover:text-gray-300 dark:hover:bg-zinc-700
+                                    transition-colors"
+                                aria-label="Close panel"
+                            >
+                                <X className="w-4 h-4" />
+                            </button>
+                        </Dialog.Close>
+                    </div>
+
+                    <div className="flex-1 overflow-y-auto p-5 scrollbar-thin">
+                        <AgentsConfigPanel />
+                    </div>
+
+                    <div className="flex items-center justify-end gap-2 px-5 py-4 border-t border-gray-100 dark:border-zinc-700/50 bg-gray-50/50 dark:bg-zinc-800/50 flex-shrink-0">
+                        <Dialog.Close asChild>
+                            <button
+                                type="button"
+                                className="px-3 py-1.5 text-xs font-medium rounded-md text-gray-600 
+                                    hover:bg-gray-200 hover:text-gray-800
+                                    dark:text-gray-400 dark:hover:bg-zinc-700 dark:hover:text-gray-200
+                                    transition-colors"
+                            >
+                                Cancel
+                            </button>
+                        </Dialog.Close>
+                        <button
+                            type="button"
+                            className="px-3 py-1.5 text-xs font-medium rounded-md bg-blue-600 text-white 
+                                hover:bg-blue-700 shadow-sm
+                                dark:bg-blue-600 dark:hover:bg-blue-500
+                                transition-colors"
+                        >
+                            Save Changes
+                        </button>
+                    </div>
+                </Dialog.Content>
+            </Dialog.Portal>
+        </Dialog.Root>
+    );
+}
+
+export default ConfigPanel;