@nextsparkjs/core 0.1.0-beta.187 → 0.1.0-beta.189

package/dist/nextspark-registries.d.ts

@@ -187,6 +187,39 @@ declare module '@nextsparkjs/registries/block-registry' {
   export function getAllBlocks(): BlockConfig[]
 }
 
+// ============================================================================
+// Block Registry (client-safe) — the configs, with no component imports.
+//
+// A block component is a server component and may import server-only code, so
+// a client component reading the registry has to take this half: importing the
+// other one pulls every block component into the browser build, which fails as
+// soon as one of them is server-only.
+// ============================================================================
+declare module '@nextsparkjs/registries/block-registry.client' {
+  export type {
+    FieldType,
+    FieldTab,
+    BlockCategory,
+    FieldDefinition,
+    BlockExample,
+    BlockConfig,
+  } from '@nextsparkjs/registries/block-registry'
+
+  export const BLOCK_REGISTRY: Record<string, import('@nextsparkjs/registries/block-registry').BlockConfig>
+  export const BLOCK_CATEGORIES: import('@nextsparkjs/registries/block-registry').BlockCategory[]
+  export const BLOCK_METADATA: {
+    totalBlocks: number
+    categories: string[]
+    blocksByCategory: Record<string, number>
+    generatedAt: string
+    blocks: string[]
+  }
+}
+
+declare module '@nextsparkjs/registries/block-registry.lazy' {
+  export const BLOCK_COMPONENTS: Record<string, React.LazyExoticComponent<React.ComponentType<any>> | React.ComponentType<any>>
+}
+
 // ============================================================================
 // Entity Registry (Server) — declared for completeness; no direct import
 // found in packages/core/src today, but kept in case a consumer-facing
@@ -871,3 +904,24 @@ declare module '@nextsparkjs/registries/scheduled-actions-registry' {
 
   export const SCHEDULED_ACTIONS_REGISTRY: Record<string, ScheduledActionsModule | undefined>
 }
+
+// ============================================================================
+// Icon Registry
+//
+// Generated from every config that names an icon by string (entity configs,
+// a theme's sidebar sections, block configs) so the app can resolve those
+// names without a namespace import of lucide-react, which would keep the
+// whole icon set in the bundle (#182). Inline `import(...)` type query for
+// the same reason as middleware-registry below: this file must stay free of
+// file-level imports.
+// ============================================================================
+declare module '@nextsparkjs/registries/icon-registry' {
+  export const ICON_REGISTRY: Record<string, import('lucide-react').LucideIcon>
+
+  export type IconName = string
+
+  export const ICON_METADATA: {
+    totalIcons: number
+    generatedAt: string
+  }
+}

package/dist/providers/DashboardProviders.d.ts

@@ -1,17 +1,20 @@
 /**
  * DashboardProviders — Client providers needed by authenticated routes.
  *
- * Since #115 the generated root layout mounts QueryProvider, TeamProvider,
- * SubscriptionProvider and Toaster itself (matching layout.ppr.tsx) so the
- * activeTeamId cookie is synced from any route, not only from the dashboard.
- * When a TeamProvider is already mounted above, this component renders its
- * children as-is: nesting a second TeamProvider would duplicate the teams
- * fetch, the cookie sync and the TeamSwitchModal, and a second Toaster would
- * show every toast twice.
+ * TeamProvider and SubscriptionProvider live here rather than in the root
+ * layout, so public pages never fetch a signed-in visitor's teams or
+ * subscription, nor re-sync the activeTeamId cookie. The areas that need a
+ * team (dashboard, superadmin, devtools) mount them through this component,
+ * which also keeps that cookie in sync.
  *
- * The full provider stack is kept as a fallback for apps whose generated root
- * layout predates that change (it originally lived here to keep ~500KB of
- * client JS off public landing pages).
+ * What gets mounted depends on the root layout above:
+ * - A root layout that provides QueryProvider and Toaster: only the team and
+ *   subscription providers, so the app keeps one query cache and toasts are
+ *   not shown twice.
+ * - An older root layout that already mounts TeamProvider: nothing, since a
+ *   second TeamProvider would duplicate the teams fetch, the cookie sync and
+ *   the TeamSwitchModal.
+ * - A root layout with no providers at all: the full stack, Toaster included.
  *
  * Used by: dashboard/layout.tsx, superadmin/layout.tsx, devtools/layout.tsx
  */

package/dist/providers/DashboardProviders.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardProviders.d.ts","sourceRoot":"","sources":["../../src/providers/DashboardProviders.tsx"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAiB7E"}
+{"version":3,"file":"DashboardProviders.d.ts","sourceRoot":"","sources":["../../src/providers/DashboardProviders.tsx"],"names":[],"mappings":"AASA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CA4B7E"}

package/dist/providers/DashboardProviders.js

@@ -1,15 +1,21 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Suspense } from "react";
+import { Suspense, useContext } from "react";
+import { QueryClientContext } from "@tanstack/react-query";
 import { QueryProvider } from "./query-provider.js";
 import { TeamProvider, useOptionalTeamContext } from "../contexts/TeamContext.js";
 import { SubscriptionProvider } from "../contexts/SubscriptionContext.js";
 import { Toaster } from "../components/ui/sonner.js";
 function DashboardProviders({ children }) {
   const rootTeamContext = useOptionalTeamContext();
+  const rootQueryClient = useContext(QueryClientContext);
   if (rootTeamContext) {
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
+  const teamProviders = /* @__PURE__ */ jsx(TeamProvider, { children: /* @__PURE__ */ jsx(SubscriptionProvider, { children }) });
+  if (rootQueryClient) {
+    return teamProviders;
+  }
   return /* @__PURE__ */ jsx(QueryProvider, { children: /* @__PURE__ */ jsx(TeamProvider, { children: /* @__PURE__ */ jsxs(SubscriptionProvider, { children: [
     children,
     /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Toaster, { position: "bottom-left" }) })

package/dist/templates/app/(auth)/forgot-password/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { resetPasswordSchema, type ResetPasswordFormData } from '@nextsparkjs/core/lib/validation';
-import { useAuth } from '@nextsparkjs/core/hooks/useAuth';
+import { useAuthActions } from '@nextsparkjs/core/hooks/useAuth';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { AlertCircle, ArrowLeft, CheckCircle, Loader2, Mail } from 'lucide-react';
 import Link from 'next/link';
@@ -18,7 +18,7 @@ import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-reg
 
 
 function ForgotPasswordPage() {
-  const { resetPassword } = useAuth();
+  const { resetPassword } = useAuthActions();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);

package/dist/templates/app/(auth)/reset-password/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { newPasswordSchema, type NewPasswordFormData } from "@nextsparkjs/core/lib/validation";
-import { useAuth } from "@nextsparkjs/core/hooks/useAuth";
+import { useAuthActions } from "@nextsparkjs/core/hooks/useAuth";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
   AlertCircle,
@@ -24,7 +24,7 @@ import { sel } from '@nextsparkjs/core/selectors'
 function ResetPasswordContent() {
   const searchParams = useSearchParams()!;
   const token = searchParams.get("token") || "";
-  const { updatePassword } = useAuth();
+  const { updatePassword } = useAuthActions();
 
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -57,13 +57,13 @@ function ResetPasswordContent() {
 
   const onSubmit = useCallback(async (data: NewPasswordFormData) => {
     if (!token) {
-      setError("Token de recuperación inválido");
+      setError("Invalid recovery token");
       return;
     }
 
     setLoading(true);
     setError(null);
-    console.log('Actualizando contraseña...');
+    console.log('Updating password...');
 
     try {
       const result = await updatePassword(data.password, token);
@@ -73,10 +73,10 @@ function ResetPasswordContent() {
         setError(errorMsg);
       } else {
         setSuccess(true);
-        console.log('Contraseña actualizada exitosamente');
+        console.log('Password updated successfully');
       }
     } catch {
-      setError('Error inesperado al actualizar contraseña');
+      setError('Unexpected error updating password');
     } finally {
       setLoading(false);
     }

package/dist/templates/app/403/page.tsx

@@ -10,7 +10,7 @@ import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-reg
 
 function ForbiddenContent() {
   const searchParams = useSearchParams()!
-  const reason = searchParams.get('reason') || 'No tienes permisos para acceder a este recurso'
+  const reason = searchParams.get('reason') || 'You do not have permission to access this resource'
   const upgrade = searchParams.get('upgrade') === 'true'
 
   return (
@@ -21,7 +21,7 @@ function ForbiddenContent() {
             <AlertTriangle className="h-8 w-8 text-yellow-600" />
           </div>
           <CardTitle className="text-2xl">
-            ⚠️ Ups, no tienes permisos para hacer esto
+            ⚠️ Oops, you do not have permission to do this
           </CardTitle>
           <CardDescription className="text-gray-600">
             {reason}
@@ -32,11 +32,11 @@ function ForbiddenContent() {
           {upgrade && (
             <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
               <p className="text-sm text-blue-800">
-                Esta funcionalidad requiere una mejora de tu plan actual.
+                This feature requires an upgrade to your current plan.
               </p>
               <Link href="/dashboard/settings/billing" className="block mt-2">
                 <Button variant="outline" size="sm" className="w-full">
-                  Ver planes
+                  View plans
                 </Button>
               </Link>
             </div>
@@ -49,7 +49,7 @@ function ForbiddenContent() {
               onClick={() => window.history.back()}
             >
               <ArrowLeft className="h-4 w-4 mr-2" />
-              Volver
+              Back
             </Button>
 
             <Link href="/dashboard" className="flex-1">
@@ -75,7 +75,7 @@ function ForbiddenPage() {
               <AlertTriangle className="h-8 w-8 text-yellow-600" />
             </div>
             <CardTitle className="text-2xl">
-              ⚠️ Ups, no tienes permisos para hacer esto
+              ⚠️ Oops, you do not have permission to do this
             </CardTitle>
           </CardHeader>
         </Card>

package/dist/templates/app/api/v1/teams/switch/route.ts

@@ -9,6 +9,11 @@ import {
 import { authenticateRequest, createAuthFailureResponse } from '@nextsparkjs/core/lib/api/auth/dual-auth'
 import { withRateLimitTier } from '@nextsparkjs/core/lib/api/rate-limit'
 import { TeamService } from '@nextsparkjs/core/lib/services'
+import {
+  ACTIVE_TEAM_COOKIE,
+  ACTIVE_TEAM_COOKIE_MAX_AGE,
+  activeTeamCookieValue,
+} from '@nextsparkjs/core/lib/teams/active-team-cookie'
 import { z } from 'zod'
 
 const switchTeamSchema = z.object({
@@ -35,6 +40,19 @@ export const POST = withRateLimitTier(withApiLogging(async (req: NextRequest): P
       return authResult.rateLimitResponse as NextResponse
     }
 
+    // The active team is remembered per browser session, in the activeTeamId
+    // cookie. An API key chooses the team on each request with x-team-id, so for
+    // it there is nothing to switch.
+    if (authResult.type !== 'session' || !authResult.sessionId) {
+      const response = createApiError(
+        'API keys choose the team on each request with the x-team-id header',
+        400,
+        null,
+        'SESSION_REQUIRED'
+      )
+      return addCorsHeaders(response, req)
+    }
+
     const body = await req.json()
     const validatedData = switchTeamSchema.parse(body)
 
@@ -48,15 +66,16 @@ export const POST = withRateLimitTier(withApiLogging(async (req: NextRequest): P
         message: 'Active team switched successfully',
       })
 
-      // Set cookie for server-side access (layouts, server components)
-      // This enables permission validation in [entity]/layout.tsx
+      // Remember the team for server-side reads (the dashboard layouts through
+      // the proxy, server actions, resolveTeamContext), bound to this session so
+      // a later session on the same browser does not inherit it.
       // SECURITY: httpOnly prevents client-side JS manipulation
-      response.cookies.set('activeTeamId', validatedData.teamId, {
+      response.cookies.set(ACTIVE_TEAM_COOKIE, activeTeamCookieValue(authResult.sessionId, validatedData.teamId), {
         path: '/',
-        httpOnly: true,  // Security: prevent client-side manipulation
+        httpOnly: true,
         secure: process.env.NODE_ENV === 'production',
         sameSite: 'lax',
-        maxAge: 60 * 60 * 24 * 365  // 1 year
+        maxAge: ACTIVE_TEAM_COOKIE_MAX_AGE,
       })
 
       return addCorsHeaders(response, req)

package/dist/templates/app/dashboard/(main)/[entity]/layout.tsx

@@ -8,14 +8,17 @@
  *
  * Flow:
  * 1. User navigates to /dashboard/companies/create
- * 2. Browser sends activeTeamId cookie automatically
- * 3. This layout reads cookie and checks permission via checkPermission()
+ * 2. The proxy forwards the session's active team, taken from the
+ *    activeTeamId cookie only when this session wrote it; without one, the
+ *    user's default team is checked
+ * 3. This layout takes that team (getDashboardTeamId) and checks permission via checkPermission()
  * 4. If denied, redirects to /dashboard/permission-denied
  * 5. If allowed, renders the page (children)
  */
-import { headers, cookies } from 'next/headers'
+import { headers } from 'next/headers'
 import { redirect } from 'next/navigation'
 import { checkPermission } from '@nextsparkjs/core/lib/permissions/check'
+import { getDashboardTeamId } from '@nextsparkjs/core/lib/teams/dashboard-team'
 import { isValidPermission } from '@nextsparkjs/core/lib/permissions/init'
 import type { Permission } from '@nextsparkjs/core/lib/permissions/types'
 
@@ -59,7 +62,6 @@ export default async function EntityPermissionLayout({
 }: EntityLayoutProps) {
   const { entity } = await params
   const headersList = await headers()
-  const cookieStore = await cookies()
 
   // Get pathname from middleware header
   const pathname = headersList.get('x-pathname') || ''
@@ -67,12 +69,12 @@ export default async function EntityPermissionLayout({
   // Get userId from middleware header (set for all authenticated routes)
   const userId = headersList.get('x-user-id')
 
-  // Get teamId from cookie (set by TeamContext and /api/v1/teams/switch)
-  const teamId = cookieStore.get('activeTeamId')?.value
+  // The team this session chose, or the user's default team until it has one
+  const teamId = userId ? await getDashboardTeamId(headersList, userId) : null
 
   // Skip validation if missing required data
   // - No userId: middleware will redirect to login (shouldn't happen for dashboard routes)
-  // - No teamId: user hasn't selected a team yet, let page handle it
+  // - No teamId: the user belongs to no team, let page handle it
   if (!userId || !teamId) {
     console.log('[EntityPermissionLayout] Skipping validation - missing data:', {
       entity,

package/dist/templates/app/dashboard/(main)/layout.tsx

@@ -9,7 +9,7 @@
  * IMPORTANT: Permission checking MUST be in this layout (not in [entity]/layout.tsx)
  * because (templates) routes with specific paths take precedence over dynamic [entity] routes.
  */
-import { headers, cookies } from 'next/headers'
+import { headers } from 'next/headers'
 import { redirect } from 'next/navigation'
 import { DashboardShell } from '@nextsparkjs/core/components/dashboard/layouts/DashboardShell'
 import { serializeEntityConfig, type SerializableEntityConfig } from '@nextsparkjs/core/lib/entities/serialization'
@@ -17,6 +17,7 @@ import { setEntityRegistry } from '@nextsparkjs/core/lib/entities/queries'
 import { getTemplateOrDefault } from '@nextsparkjs/core/lib/template-resolver'
 import type { EntityConfig, ChildEntityDefinition } from '@nextsparkjs/core/lib/entities/types'
 import { checkPermission } from '@nextsparkjs/core/lib/permissions/check'
+import { getDashboardTeamId } from '@nextsparkjs/core/lib/teams/dashboard-team'
 import { isValidPermission } from '@nextsparkjs/core/lib/permissions/init'
 import type { Permission } from '@nextsparkjs/core/lib/permissions/types'
 // Import registry directly - webpack resolves @nextsparkjs/registries alias at compile time
@@ -64,11 +65,11 @@ async function DefaultMainDashboardLayout({
 
   // === PERMISSION CHECK ===
   const headersList = await headers()
-  const cookieStore = await cookies()
 
   const pathname = headersList.get('x-pathname') || ''
   const userId = headersList.get('x-user-id')
-  const teamId = cookieStore.get('activeTeamId')?.value
+  // The team this session chose, or the user's default team until it has one
+  const teamId = userId ? await getDashboardTeamId(headersList, userId) : null
 
   if (userId && teamId && pathname) {
     const parsed = parseEntityFromPathname(pathname)

package/dist/templates/app/dashboard/settings/api-keys/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from 'react';
+import { useLocale } from 'next-intl';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Button } from '@nextsparkjs/core/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card';
@@ -66,6 +67,7 @@ function ApiKeysPage() {
   const [newApiKey, setNewApiKey] = useState<NewApiKeyResponse | null>(null);
   const [selectedKey, setSelectedKey] = useState<string | null>(null);
   const queryClient = useQueryClient();
+  const locale = useLocale();
 
   // Fetch API keys
   const { data: apiKeys, isLoading, error } = useQuery<ApiKey[]>({
@@ -138,7 +140,7 @@ function ApiKeysPage() {
   };
 
   const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleDateString('es-ES', {
+    return new Date(dateString).toLocaleDateString(locale, {
       year: 'numeric',
       month: 'short',
       day: 'numeric',
@@ -162,7 +164,7 @@ function ApiKeysPage() {
         <div>
           <h1 className="text-2xl font-bold">API Keys</h1>
           <p className="text-muted-foreground">
-            Gestiona las API keys para integración externa
+            Manage API keys for external integration
           </p>
         </div>
         <Alert variant={isPermissionError ? "default" : "destructive"}>
@@ -170,10 +172,10 @@ function ApiKeysPage() {
           <AlertDescription>
             {isPermissionError ? (
               <div>
-                <strong>Acceso restringido</strong>
+                <strong>Restricted access</strong>
                 <p className="mt-1">
-                  Solo los administradores pueden gestionar API keys.
-                  Contacta a un administrador si necesitas acceso a esta funcionalidad.
+                  Only administrators can manage API keys.
+                  Contact an administrator if you need access to this feature.
                 </p>
               </div>
             ) : (
@@ -191,12 +193,12 @@ function ApiKeysPage() {
         <div>
           <h1 className="text-2xl font-bold" data-cy={sel('settings.apiKeys.header')}>API Keys</h1>
           <p className="text-muted-foreground">
-            Gestiona las API keys para integración externa
+            Manage API keys for external integration
           </p>
         </div>
         <Button onClick={() => setShowCreateDialog(true)} data-cy={sel('settings.apiKeys.createButton')}>
           <Plus className="h-4 w-4 mr-2" />
-          Crear API Key
+          Create API Key
         </Button>
       </div>
 
@@ -239,11 +241,11 @@ function ApiKeysPage() {
               <Key className="h-12 w-12 text-muted-foreground mb-4" />
               <h3 className="text-lg font-semibold mb-2">No API Keys</h3>
               <p className="text-muted-foreground text-center mb-4">
-                No tienes API keys creadas. Crea una para empezar a usar la API externa.
+                You don&apos;t have any API keys yet. Create one to start using the external API.
               </p>
               <Button onClick={() => setShowCreateDialog(true)} data-cy={sel('settings.apiKeys.createButton')}>
                 <Plus className="h-4 w-4 mr-2" />
-                Crear primera API Key
+                Create first API Key
               </Button>
             </CardContent>
           </Card>
@@ -257,7 +259,7 @@ function ApiKeysPage() {
                       {apiKey.name}
                       {apiKey.status !== 'active' && (
                         <Badge variant="secondary" data-cy={sel('settings.apiKeys.row.status', { id: apiKey.id })}>
-                          {apiKey.status === 'inactive' ? 'Inactiva' : 'Expirada'}
+                          {apiKey.status === 'inactive' ? 'Inactive' : 'Expired'}
                         </Badge>
                       )}
                     </CardTitle>
@@ -276,7 +278,7 @@ function ApiKeysPage() {
                   </div>
                   <div className="flex items-center gap-2">
                     <Badge variant={apiKey.status === 'active' ? "default" : "secondary"} data-cy={sel('settings.apiKeys.row.status', { id: apiKey.id })}>
-                      {apiKey.status === 'active' ? 'Activa' : apiKey.status === 'inactive' ? 'Inactiva' : 'Expirada'}
+                      {apiKey.status === 'active' ? 'Active' : apiKey.status === 'inactive' ? 'Inactive' : 'Expired'}
                     </Badge>
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
@@ -290,7 +292,7 @@ function ApiKeysPage() {
                           data-cy={sel('settings.apiKeys.row.menu.viewDetails', { id: apiKey.id })}
                         >
                           <Eye className="h-4 w-4 mr-2" />
-                          Ver detalles
+                          View details
                         </DropdownMenuItem>
                         <DropdownMenuItem
                           onClick={() => toggleApiKey.mutate({
@@ -303,12 +305,12 @@ function ApiKeysPage() {
                           {apiKey.status === 'active' ? (
                             <>
                               <EyeOff className="h-4 w-4 mr-2" />
-                              Desactivar
+                              Deactivate
                             </>
                           ) : (
                             <>
                               <Eye className="h-4 w-4 mr-2" />
-                              Activar
+                              Activate
                             </>
                           )}
                         </DropdownMenuItem>
@@ -319,7 +321,7 @@ function ApiKeysPage() {
                           data-cy={sel('settings.apiKeys.row.menu.revoke', { id: apiKey.id })}
                         >
                           <Trash2 className="h-4 w-4 mr-2" />
-                          Revocar
+                          Revoke
                         </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>
@@ -330,7 +332,7 @@ function ApiKeysPage() {
                 <div className="space-y-4">
                   {/* Scopes */}
                   <div data-cy={sel('settings.apiKeys.row.scopes', { id: apiKey.id })}>
-                    <strong className="text-sm">Permisos:</strong>
+                    <strong className="text-sm">Permissions:</strong>
                     <div className="flex flex-wrap gap-1 mt-1">
                       {apiKey.scopes.map((scope) => (
                         <Badge
@@ -352,11 +354,11 @@ function ApiKeysPage() {
                       <div className="font-semibold">{apiKey.usage_stats.total_requests.toLocaleString()}</div>
                     </div>
                     <div data-cy={sel('settings.apiKeys.row.stats.last24h', { id: apiKey.id })}>
-                      <div className="text-muted-foreground">Últimas 24h</div>
+                      <div className="text-muted-foreground">Last 24h</div>
                       <div className="font-semibold">{apiKey.usage_stats.last_24h.toLocaleString()}</div>
                     </div>
                     <div data-cy={sel('settings.apiKeys.row.stats.avgTime', { id: apiKey.id })}>
-                      <div className="text-muted-foreground">Tiempo promedio</div>
+                      <div className="text-muted-foreground">Avg time</div>
                       <div className="font-semibold">
                         {apiKey.usage_stats.avg_response_time
                           ? `${Math.round(apiKey.usage_stats.avg_response_time)}ms`
@@ -368,12 +370,12 @@ function ApiKeysPage() {
 
                   {/* Metadata */}
                   <div className="text-sm text-muted-foreground space-y-1" data-cy={sel('settings.apiKeys.row.metadata.container', { id: apiKey.id })}>
-                    <div data-cy={sel('settings.apiKeys.row.metadata.createdAt', { id: apiKey.id })}>Creada: {formatDate(apiKey.createdAt)}</div>
+                    <div data-cy={sel('settings.apiKeys.row.metadata.createdAt', { id: apiKey.id })}>Created: {formatDate(apiKey.createdAt)}</div>
                     {apiKey.lastUsedAt && (
-                      <div data-cy={sel('settings.apiKeys.row.metadata.lastUsed', { id: apiKey.id })}>Ultimo uso: {formatDate(apiKey.lastUsedAt)}</div>
+                      <div data-cy={sel('settings.apiKeys.row.metadata.lastUsed', { id: apiKey.id })}>Last used: {formatDate(apiKey.lastUsedAt)}</div>
                     )}
                     {apiKey.expiresAt && (
-                      <div data-cy={sel('settings.apiKeys.row.metadata.expiresAt', { id: apiKey.id })}>Expira: {formatDate(apiKey.expiresAt)}</div>
+                      <div data-cy={sel('settings.apiKeys.row.metadata.expiresAt', { id: apiKey.id })}>Expires: {formatDate(apiKey.expiresAt)}</div>
                     )}
                   </div>
                 </div>
@@ -427,9 +429,9 @@ function ApiKeyDetailsDialog({
     <Dialog open={open} onOpenChange={onClose}>
       <DialogContent className="max-w-2xl" data-cy={sel('settings.apiKeys.detailsDialog.container')}>
         <DialogHeader>
-          <DialogTitle data-cy={sel('settings.apiKeys.detailsDialog.title')}>Detalles de API Key</DialogTitle>
+          <DialogTitle data-cy={sel('settings.apiKeys.detailsDialog.title')}>API Key Details</DialogTitle>
           <DialogDescription>
-            Estadísticas de uso y configuración
+            Usage statistics and configuration
           </DialogDescription>
         </DialogHeader>
 
@@ -443,17 +445,17 @@ function ApiKeyDetailsDialog({
           <div className="space-y-6" data-cy={sel('settings.apiKeys.detailsDialog.content')}>
             {/* Basic Info */}
             <div data-cy={sel('settings.apiKeys.detailsDialog.basicInfo.container')}>
-              <h4 className="font-semibold mb-2">Información básica</h4>
+              <h4 className="font-semibold mb-2">Basic information</h4>
               <div className="grid grid-cols-2 gap-4 text-sm">
                 <div>
-                  <span className="text-muted-foreground">Nombre:</span>
+                  <span className="text-muted-foreground">Name:</span>
                   <div className="font-medium" data-cy={sel('settings.apiKeys.detailsDialog.basicInfo.name')}>{keyDetails.name}</div>
                 </div>
                 <div>
-                  <span className="text-muted-foreground">Estado:</span>
+                  <span className="text-muted-foreground">Status:</span>
                   <div>
                     <Badge variant={keyDetails.status === 'active' ? "default" : "secondary"} data-cy={sel('settings.apiKeys.detailsDialog.basicInfo.status')}>
-                      {keyDetails.status === 'active' ? 'Activa' : keyDetails.status === 'inactive' ? 'Inactiva' : 'Expirada'}
+                      {keyDetails.status === 'active' ? 'Active' : keyDetails.status === 'inactive' ? 'Inactive' : 'Expired'}
                     </Badge>
                   </div>
                 </div>
@@ -464,27 +466,27 @@ function ApiKeyDetailsDialog({
             <div data-cy={sel('settings.apiKeys.detailsDialog.stats.container')}>
               <h4 className="font-semibold mb-2 flex items-center gap-2">
                 <Activity className="h-4 w-4" />
-                Estadísticas de uso
+                Usage statistics
               </h4>
               <div className="grid grid-cols-2 gap-4 text-sm">
                 <div>
-                  <span className="text-muted-foreground">Total de requests:</span>
+                  <span className="text-muted-foreground">Total requests:</span>
                   <div className="font-medium" data-cy={sel('settings.apiKeys.detailsDialog.stats.totalRequests')}>{keyDetails.usage_stats.total_requests.toLocaleString()}</div>
                 </div>
                 <div>
-                  <span className="text-muted-foreground">Ultimas 24 horas:</span>
+                  <span className="text-muted-foreground">Last 24 hours:</span>
                   <div className="font-medium" data-cy={sel('settings.apiKeys.detailsDialog.stats.last24h')}>{keyDetails.usage_stats.last_24h.toLocaleString()}</div>
                 </div>
                 <div>
-                  <span className="text-muted-foreground">Ultimos 7 dias:</span>
+                  <span className="text-muted-foreground">Last 7 days:</span>
                   <div className="font-medium" data-cy={sel('settings.apiKeys.detailsDialog.stats.last7d')}>{keyDetails.usage_stats.last_7d.toLocaleString()}</div>
                 </div>
                 <div>
-                  <span className="text-muted-foreground">Ultimos 30 dias:</span>
+                  <span className="text-muted-foreground">Last 30 days:</span>
                   <div className="font-medium" data-cy={sel('settings.apiKeys.detailsDialog.stats.last30d')}>{keyDetails.usage_stats.last_30d.toLocaleString()}</div>
                 </div>
                 <div>
-                  <span className="text-muted-foreground">Tiempo promedio:</span>
+                  <span className="text-muted-foreground">Avg response time:</span>
                   <div className="font-medium" data-cy={sel('settings.apiKeys.detailsDialog.stats.avgTime')}>
                     {keyDetails.usage_stats.avg_response_time
                       ? `${Math.round(keyDetails.usage_stats.avg_response_time)}ms`
@@ -493,7 +495,7 @@ function ApiKeyDetailsDialog({
                   </div>
                 </div>
                 <div>
-                  <span className="text-muted-foreground">Tasa de exito:</span>
+                  <span className="text-muted-foreground">Success rate:</span>
                   <div className="font-medium" data-cy={sel('settings.apiKeys.detailsDialog.stats.successRate')}>
                     {keyDetails.usage_stats.success_rate
                       ? `${Math.round(keyDetails.usage_stats.success_rate)}%`