@johpaz/hive 1.7.2 → 1.7.3

package/packages/hive-ui/src/modules/providers/ProviderConfigForm.tsx

@@ -1,146 +0,0 @@
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Eye, EyeOff, CheckCircle2 } from "lucide-react";
-import { useState } from "react";
-import { swal } from "@/lib/swal";
-
-import type { Provider } from "@/types";
-
-interface ProviderConfigFormProps {
-  provider?: Provider;
-  onSave?: (data: { apiKey: string; baseUrl?: string; headers?: Record<string, string>; numCtx?: number | null }) => void;
-  onCancel?: () => void;
-}
-
-export function ProviderConfigForm({ provider, onSave, onCancel }: ProviderConfigFormProps) {
-  const [showKey, setShowKey] = useState(false);
-  const [apiKey, setApiKey] = useState("");
-  const [baseUrl, setBaseUrl] = useState(provider?.baseUrl || provider?.base_url || "");
-  const [headers, setHeaders] = useState(provider?.config?.headers ? JSON.stringify(provider.config.headers, null, 2) : "");
-  const [numCtx, setNumCtx] = useState<string>(provider?.num_ctx ? String(provider.num_ctx) : "");
-
-  const baseUrlValue = baseUrl || provider?.baseUrl || provider?.base_url || "";
-  const isLocal = provider?.id === "ollama"
-    || baseUrlValue.includes("localhost")
-    || baseUrlValue.includes("127.0.0.1");
-
-  const hasExistingKey = !!provider?.has_api_key;
-  const hasExistingHeaders = !!provider?.has_headers;
-
-  const handleSave = () => {
-    let parsedHeaders = undefined;
-    if (headers.trim()) {
-      try {
-        parsedHeaders = JSON.parse(headers.trim());
-      } catch (e) {
-        swal.fire("Error", "JSON de Headers inválido", "error");
-        return;
-      }
-    }
-    if (onSave) {
-      onSave({
-        apiKey,
-        baseUrl: baseUrl || undefined,
-        headers: parsedHeaders,
-        numCtx: numCtx.trim() ? Number(numCtx.trim()) : null,
-      });
-    }
-  };
-
-  return (
-    <div className="space-y-3">
-      <div className="space-y-1">
-        <div className="flex items-center justify-between">
-          <Label className="hive-label">API Key</Label>
-          {hasExistingKey && (
-            <span className="flex items-center gap-1 text-[10px] font-bold text-emerald-400">
-              <CheckCircle2 className="h-3 w-3" />
-              Configurada
-            </span>
-          )}
-        </div>
-        <div className="relative">
-          <Input
-            type={showKey ? "text" : "password"}
-            value={apiKey}
-            onChange={(e) => setApiKey(e.target.value)}
-            placeholder={hasExistingKey ? "••••••••••••••••  (dejar vacío para conservar)" : "sk-..."}
-            className="hive-input !h-8 text-xs pr-8"
-          />
-          <Button
-            variant="ghost"
-            size="icon"
-            className="absolute right-0 top-0 h-8 w-8 text-white/40 hover:text-white"
-            onClick={() => setShowKey(!showKey)}
-          >
-            {showKey ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
-          </Button>
-        </div>
-      </div>
-
-      <div className="space-y-1">
-        <Label className="hive-label">Base URL (opcional)</Label>
-        <Input
-          value={baseUrl}
-          onChange={(e) => setBaseUrl(e.target.value)}
-          placeholder="https://api.example.com"
-          className="hive-input !h-8 text-xs"
-        />
-      </div>
-
-      {isLocal && (
-        <div className="space-y-1">
-          <div className="flex items-center justify-between">
-            <Label className="hive-label">Context Window (num_ctx)</Label>
-            <span className="text-[10px] text-white/30">tokens — por defecto 32 768</span>
-          </div>
-          <Input
-            type="number"
-            value={numCtx}
-            onChange={(e) => setNumCtx(e.target.value)}
-            placeholder="8192"
-            min={512}
-            step={512}
-            className="hive-input !h-8 text-xs font-mono"
-          />
-          <p className="text-[10px] text-amber-400/60">
-            Aumenta si ves errores de contexto. Tu modelo soporta hasta 262 144 tokens.
-          </p>
-        </div>
-      )}
-
-      <div className="space-y-1">
-        <div className="flex items-center justify-between">
-          <Label className="hive-label">Custom Headers (JSON)</Label>
-          {hasExistingHeaders && (
-            <span className="flex items-center gap-1 text-[10px] font-bold text-emerald-400">
-              <CheckCircle2 className="h-3 w-3" />
-              Configurados
-            </span>
-          )}
-        </div>
-        <textarea
-          value={headers}
-          onChange={(e) => setHeaders(e.target.value)}
-          placeholder={hasExistingHeaders ? '{ ... }  (dejar vacío para conservar)' : '{ "x-custom-header": "value" }'}
-          rows={3}
-          className="w-full bg-white/5 border border-white/10 rounded-md p-2 text-xs text-white/70 focus:outline-none focus:border-blue-500/50 transition-all font-mono"
-        />
-      </div>
-
-      <div className="flex gap-2 pt-2">
-        <button className="hive-btn hive-btn--form-cancel flex-1" onClick={onCancel}>
-          Cancelar
-        </button>
-        <button className="hive-btn hive-btn--form-submit flex-1" onClick={handleSave}>
-          Guardar
-        </button>
-      </div>
-
-      <p className="text-[10px] text-white/20 pt-2">
-        La API key se guarda cifrada en la base de datos.
-      </p>
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/providers/ProviderFailoverConfig.tsx

@@ -1,110 +0,0 @@
-import { Label } from "@/components/ui/label";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import { Input } from "@/components/ui/input";
-import { useProviders } from "@/hooks/useProviders";
-import type { ProviderType } from "@/types";
-import { useState } from "react";
-
-// Default failover config
-const DEFAULT_FAILOVER: FailoverConfig = {
-  primary: "openai",
-  fallbacks: [],
-  triggerConditions: {
-    onError: true,
-    onRateLimit: true,
-    onTimeout: true,
-    maxLatencyMs: 5000,
-  },
-  recoveryStrategy: {
-    retryPrimaryAfter: 60,
-    circuitBreaker: true,
-  },
-};
-
-interface FailoverConfig {
-  primary: ProviderType;
-  fallbacks: ProviderType[];
-  triggerConditions: {
-    onError: boolean;
-    onRateLimit: boolean;
-    onTimeout: boolean;
-    maxLatencyMs?: number;
-  };
-  recoveryStrategy: {
-    retryPrimaryAfter: number;
-    circuitBreaker: boolean;
-  };
-}
-
-export function ProviderFailoverConfig() {
-  const { activeProviders } = useProviders();
-  const [failoverConfig, setFailoverConfig] = useState<FailoverConfig>(DEFAULT_FAILOVER);
-
-  const updateConfig = (key: keyof FailoverConfig, value: any) => {
-    setFailoverConfig({ ...failoverConfig, [key]: value });
-  };
-
-  const updateTrigger = (key: keyof FailoverConfig["triggerConditions"], value: any) => {
-    updateConfig("triggerConditions", { ...failoverConfig.triggerConditions, [key]: value });
-  };
-
-  const updateRecovery = (key: keyof FailoverConfig["recoveryStrategy"], value: any) => {
-    updateConfig("recoveryStrategy", { ...failoverConfig.recoveryStrategy, [key]: value });
-  };
-
-  return (
-    <div className="hive-card">
-      <div className="p-4 border-b border-white/5">
-        <h3 className="hive-title-section">Configuración de Failover</h3>
-      </div>
-      <div className="hive-card-body space-y-4">
-        <div className="space-y-1">
-          <Label className="hive-label">Provider Primario</Label>
-          <Select
-            value={failoverConfig.primary}
-            onValueChange={(val) => updateConfig("primary", val as ProviderType)}
-          >
-            <SelectTrigger className="hive-select-trigger !h-8 text-sm"><SelectValue placeholder="Selecciona un provider primario" /></SelectTrigger>
-            <SelectContent className="hive-select-content">
-              {activeProviders.length === 0 && <SelectItem value="none" disabled className="hive-select-item">No hay providers activos</SelectItem>}
-              {activeProviders.map((p) => (
-                <SelectItem key={p.id} value={p.type} className="hive-select-item">{p.name}</SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="space-y-2">
-          <Label className="hive-label">Condiciones de activación</Label>
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <span className="text-xs text-white/40">Al error de conexión</span>
-              <Switch checked={failoverConfig.triggerConditions.onError} onCheckedChange={(val) => updateTrigger("onError", val)} className="data-[state=checked]:bg-blue-500" />
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-xs text-white/40">Al rate limit</span>
-              <Switch checked={failoverConfig.triggerConditions.onRateLimit} onCheckedChange={(val) => updateTrigger("onRateLimit", val)} className="data-[state=checked]:bg-blue-500" />
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-xs text-white/40">Al timeout</span>
-              <Switch checked={failoverConfig.triggerConditions.onTimeout} onCheckedChange={(val) => updateTrigger("onTimeout", val)} className="data-[state=checked]:bg-blue-500" />
-            </div>
-          </div>
-        </div>
-        <div className="space-y-1">
-          <Label className="hive-label">Latencia máxima (ms)</Label>
-          <Input
-            type="number"
-            value={failoverConfig.triggerConditions.maxLatencyMs}
-            onChange={(e) => updateTrigger("maxLatencyMs", Number(e.target.value))}
-            className="hive-input !h-8 text-sm"
-          />
-        </div>
-        <div className="flex items-center justify-between">
-          <span className="text-xs text-white/40">Circuit Breaker</span>
-          <Switch checked={failoverConfig.recoveryStrategy.circuitBreaker} onCheckedChange={(val) => updateRecovery("circuitBreaker", val)} className="data-[state=checked]:bg-blue-500" />
-        </div>
-      </div>
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/providers/ProviderList.tsx

@@ -1,33 +0,0 @@
-import { useProviders } from "@/hooks/useProviders";
-import { ProviderCard } from "./ProviderCard";
-
-export function ProviderList() {
-  const { providers, updateProvider } = useProviders();
-
-  const activeCount = providers.filter(p => p.active).length;
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h3 className="hive-title-section">Providers de IA</h3>
-        <span className="hive-tag hive-tag--provider">{activeCount} activos / {providers.length} total</span>
-      </div>
-
-      {/* Mobile-first: 1 col → 2 col (sm) → 3 col (xl) */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-5">
-        {providers.map((provider) => (
-          <ProviderCard
-            key={provider.id}
-            provider={provider}
-            updateProvider={updateProvider}
-          />
-        ))}
-        {providers.length === 0 && (
-          <div className="hive-empty-state col-span-full">
-            No hay providers disponibles.
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/providers/ProviderStatusIndicator.tsx

@@ -1,23 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-import type { ProviderStatus } from "@/types";
-
-const statusConfig: Record<ProviderStatus, { label: string; className: string }> = {
-  active: { label: "Activo", className: "bg-hive-connected/15 text-hive-connected border-hive-connected/30" },
-  fallback: { label: "Fallback", className: "bg-hive-thinking/15 text-hive-thinking border-hive-thinking/30" },
-  error: { label: "Error", className: "bg-destructive/15 text-destructive border-destructive/30" },
-  disabled: { label: "Desactivado", className: "bg-muted text-muted-foreground border-border" },
-};
-
-interface ProviderStatusIndicatorProps {
-  status: ProviderStatus;
-}
-
-export function ProviderStatusIndicator({ status }: ProviderStatusIndicatorProps) {
-  const config = statusConfig[status];
-  return (
-    <Badge variant="outline" className={config.className}>
-      <span className="mr-1.5 inline-block h-1.5 w-1.5 rounded-full bg-current" />
-      {config.label}
-    </Badge>
-  );
-}

package/packages/hive-ui/src/modules/providers/configs/ProviderAPIKeyManager.tsx

@@ -1,39 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Eye, EyeOff, RotateCcw } from "lucide-react";
-import { useState } from "react";
-
-interface ProviderAPIKeyManagerProps {
-  providerName: string;
-  maskedKey?: string;
-  onRotate?: (newKey: string) => void;
-}
-
-export function ProviderAPIKeyManager({ providerName, maskedKey, onRotate }: ProviderAPIKeyManagerProps) {
-  const [showKey, setShowKey] = useState(false);
-
-  return (
-    <Card>
-      <CardHeader><CardTitle className="text-sm">API Key — {providerName}</CardTitle></CardHeader>
-      <CardContent className="space-y-3">
-        <div className="space-y-1">
-          <Label className="text-xs">API Key actual</Label>
-          <div className="relative">
-            <Input type={showKey ? "text" : "password"} defaultValue={maskedKey} readOnly className="h-8 pr-16 text-sm" />
-            <div className="absolute right-0 top-0 flex">
-              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setShowKey(!showKey)}>
-                {showKey ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
-              </Button>
-            </div>
-          </div>
-        </div>
-        <Button variant="outline" size="sm" className="w-full">
-          <RotateCcw className="mr-1 h-3.5 w-3.5" />
-          Rotar API Key
-        </Button>
-      </CardContent>
-    </Card>
-  );
-}

package/packages/hive-ui/src/modules/providers/configs/ProviderEndpointConfig.tsx

@@ -1,27 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-
-interface ProviderEndpointConfigProps {
-  baseUrl?: string;
-  organization?: string;
-  onSave?: (config: { baseUrl: string; organization?: string }) => void;
-}
-
-export function ProviderEndpointConfig({ baseUrl, organization, onSave }: ProviderEndpointConfigProps) {
-  return (
-    <Card>
-      <CardHeader><CardTitle className="text-sm">Configuración de Endpoint</CardTitle></CardHeader>
-      <CardContent className="space-y-3">
-        <div className="space-y-1">
-          <Label className="text-xs">Base URL</Label>
-          <Input defaultValue={baseUrl} placeholder="https://api.openai.com/v1" className="h-8 text-sm" />
-        </div>
-        <div className="space-y-1">
-          <Label className="text-xs">Organización (opcional)</Label>
-          <Input defaultValue={organization} placeholder="org-..." className="h-8 text-sm" />
-        </div>
-      </CardContent>
-    </Card>
-  );
-}

package/packages/hive-ui/src/modules/providers/configs/ProviderRateLimits.tsx

@@ -1,37 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Progress } from "@/components/ui/progress";
-
-interface ProviderRateLimitsProps {
-  rpm?: number;
-  tpm?: number;
-  currentRpm?: number;
-  currentTpm?: number;
-}
-
-export function ProviderRateLimits({ rpm = 500, tpm = 100000, currentRpm = 120, currentTpm = 35000 }: ProviderRateLimitsProps) {
-  return (
-    <Card>
-      <CardHeader><CardTitle className="text-sm">Límites de Rate</CardTitle></CardHeader>
-      <CardContent className="space-y-4">
-        <div className="space-y-2">
-          <div className="flex items-center justify-between text-xs">
-            <Label>Requests/min</Label>
-            <span className="text-muted-foreground">{currentRpm}/{rpm}</span>
-          </div>
-          <Progress value={(currentRpm / rpm) * 100} className="h-1.5" />
-          <Input type="number" defaultValue={rpm} className="h-8 text-sm" />
-        </div>
-        <div className="space-y-2">
-          <div className="flex items-center justify-between text-xs">
-            <Label>Tokens/min</Label>
-            <span className="text-muted-foreground">{(currentTpm / 1000).toFixed(0)}K/{(tpm / 1000).toFixed(0)}K</span>
-          </div>
-          <Progress value={(currentTpm / tpm) * 100} className="h-1.5" />
-          <Input type="number" defaultValue={tpm} className="h-8 text-sm" />
-        </div>
-      </CardContent>
-    </Card>
-  );
-}

package/packages/hive-ui/src/modules/providers/configs/ProviderRetryPolicy.tsx

@@ -1,46 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Switch } from "@/components/ui/switch";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-
-interface ProviderRetryPolicyProps {
-  maxRetries?: number;
-  retryDelayMs?: number;
-  exponentialBackoff?: boolean;
-  retryOn?: string[];
-}
-
-export function ProviderRetryPolicy({ maxRetries = 3, retryDelayMs = 1000, exponentialBackoff = true }: ProviderRetryPolicyProps) {
-  return (
-    <Card>
-      <CardHeader><CardTitle className="text-sm">Política de Reintentos</CardTitle></CardHeader>
-      <CardContent className="space-y-3">
-        <div className="space-y-1">
-          <Label className="text-xs">Máximo de reintentos</Label>
-          <Input type="number" defaultValue={maxRetries} className="h-8 text-sm" />
-        </div>
-        <div className="space-y-1">
-          <Label className="text-xs">Delay inicial (ms)</Label>
-          <Input type="number" defaultValue={retryDelayMs} className="h-8 text-sm" />
-        </div>
-        <div className="flex items-center justify-between">
-          <span className="text-xs text-muted-foreground">Backoff exponencial</span>
-          <Switch defaultChecked={exponentialBackoff} />
-        </div>
-        <div className="space-y-1">
-          <Label className="text-xs">Reintentar en</Label>
-          <Select defaultValue="all">
-            <SelectTrigger className="h-8 text-sm"><SelectValue /></SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">Todos los errores</SelectItem>
-              <SelectItem value="rate_limit">Solo rate limit</SelectItem>
-              <SelectItem value="timeout">Solo timeout</SelectItem>
-              <SelectItem value="5xx">Solo errores 5xx</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}

package/packages/hive-ui/src/modules/providers/configs/index.ts

@@ -1,4 +0,0 @@
-export { ProviderAPIKeyManager } from "./ProviderAPIKeyManager";
-export { ProviderEndpointConfig } from "./ProviderEndpointConfig";
-export { ProviderRateLimits } from "./ProviderRateLimits";
-export { ProviderRetryPolicy } from "./ProviderRetryPolicy";

package/packages/hive-ui/src/modules/providers/index.ts

@@ -1,5 +0,0 @@
-export { ProviderList } from "./ProviderList";
-export { ProviderCard } from "./ProviderCard";
-export { ProviderConfigForm } from "./ProviderConfigForm";
-export { ProviderStatusIndicator } from "./ProviderStatusIndicator";
-export { ProviderFailoverConfig } from "./ProviderFailoverConfig";

package/packages/hive-ui/src/modules/providers/models/ModelBenchmarkBadge.tsx

@@ -1,21 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-import type { ModelPerformance } from "@/types";
-
-interface ModelBenchmarkBadgeProps {
-  performance: ModelPerformance;
-}
-
-export function ModelBenchmarkBadge({ performance }: ModelBenchmarkBadgeProps) {
-  const qualityColor = {
-    low: "bg-muted text-muted-foreground",
-    medium: "bg-hive-thinking/15 text-hive-thinking",
-    high: "bg-hive-connected/15 text-hive-connected",
-    highest: "bg-primary/15 text-primary",
-  };
-
-  return (
-    <Badge variant="outline" className={`${qualityColor[performance.quality]} text-[10px] py-0 h-4`}>
-      {performance.quality === "highest" ? "⭐ Top" : performance.quality}
-    </Badge>
-  );
-}

package/packages/hive-ui/src/modules/providers/models/ModelCapabilities.tsx

@@ -1,44 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-import type { ModelCapability } from "@/types";
-
-const capLabels: Record<ModelCapability, string> = {
-  chat: "Chat",
-  vision: "Visión",
-  json_mode: "JSON",
-  function_calling: "Functions",
-  streaming: "Stream",
-  embeddings: "Embed",
-  image_generation: "Imagen",
-  code: "Código",
-  reasoning: "Razonamiento",
-};
-
-interface ModelCapabilitiesProps {
-  capabilities?: string | ModelCapability[] | null;
-}
-
-export function ModelCapabilities({ capabilities }: ModelCapabilitiesProps) {
-  // Parse capabilities if it's a string
-  let caps: ModelCapability[] = [];
-  if (typeof capabilities === 'string') {
-    try {
-      caps = JSON.parse(capabilities);
-    } catch {
-      caps = [];
-    }
-  } else if (Array.isArray(capabilities)) {
-    caps = capabilities;
-  }
-
-  if (caps.length === 0) return null;
-
-  return (
-    <>
-      {caps.map((cap) => (
-        <Badge key={cap} variant="outline" className="text-[10px] py-0 h-4">
-          {capLabels[cap] ?? cap}
-        </Badge>
-      ))}
-    </>
-  );
-}

package/packages/hive-ui/src/modules/providers/models/ModelCard.tsx

@@ -1,36 +0,0 @@
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import type { Model } from "@/types";
-import { ModelCapabilities } from "./ModelCapabilities";
-
-interface ModelCardProps {
-  model: Model;
-}
-
-export function ModelCard({ model }: ModelCardProps) {
-  return (
-    <Card>
-      <CardContent className="flex items-center gap-4 p-3">
-        <div className="flex-1 space-y-1">
-          <div className="flex items-center gap-2">
-            <p className="text-sm font-semibold">{model.name}</p>
-            <Badge variant="secondary" className="text-[10px]">{model.providerId || model.provider_id}</Badge>
-          </div>
-          {model.contextWindow && (
-            <p className="text-xs text-muted-foreground">
-              {(model.contextWindow / 1000).toFixed(0)}K tokens contexto
-            </p>
-          )}
-          <div className="flex flex-wrap items-center gap-1 pt-1">
-            <ModelCapabilities capabilities={model.capabilities} />
-          </div>
-        </div>
-        <div className="flex flex-col items-end gap-2">
-          <Badge variant={model.enabled ? "default" : "secondary"} className="text-[10px]">
-            {model.enabled ? "Activo" : "Inactivo"}
-          </Badge>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}

package/packages/hive-ui/src/modules/providers/models/ModelComparisonTable.tsx

@@ -1,47 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Badge } from "@/components/ui/badge";
-import type { ModelDefinition } from "@/types";
-import { ModelCapabilities } from "./ModelCapabilities";
-
-interface ModelComparisonTableProps {
-  models: ModelDefinition[];
-}
-
-export function ModelComparisonTable({ models }: ModelComparisonTableProps) {
-  return (
-    <Card>
-      <CardHeader><CardTitle className="text-sm">Comparación de Modelos</CardTitle></CardHeader>
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="text-xs">Modelo</TableHead>
-              <TableHead className="text-xs">Provider</TableHead>
-              <TableHead className="text-xs">Contexto</TableHead>
-              <TableHead className="text-xs">In $/1M</TableHead>
-              <TableHead className="text-xs">Out $/1M</TableHead>
-              <TableHead className="text-xs">Calidad</TableHead>
-              <TableHead className="text-xs">Latencia</TableHead>
-              <TableHead className="text-xs">Capacidades</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {models.map((m) => (
-              <TableRow key={m.id}>
-                <TableCell className="text-xs font-medium">{m.name}</TableCell>
-                <TableCell className="text-xs">{m.provider}</TableCell>
-                <TableCell className="text-xs">{(m.contextWindow / 1000).toFixed(0)}K</TableCell>
-                <TableCell className="text-xs">${m.pricing.inputPer1M}</TableCell>
-                <TableCell className="text-xs">${m.pricing.outputPer1M}</TableCell>
-                <TableCell className="text-xs capitalize">{m.performance.quality}</TableCell>
-                <TableCell className="text-xs capitalize">{m.performance.latency}</TableCell>
-                <TableCell><ModelCapabilities capabilities={m.capabilities.slice(0, 3)} /></TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </CardContent>
-    </Card>
-  );
-}