fix(agents): empêcher le déplacement des cartes lors du toggle

Le tri par `updatedAt` provoquait un saut de position quand on toggait
un agent car Prisma mettait à jour `updatedAt` automatiquement.

- Tri stable par `createdAt` au lieu de `updatedAt`
- Mise à jour optimiste locale via `onToggle` au lieu d'un re-fetch complet
- Rollback automatique en cas d'erreur serveur
- Désactivation du bouton toggle pendant l'opération (anti double-clic)
- Suppression du `revalidatePath` superflu dans `toggleAgent`

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

keep-notes/app/(main)/agents/agents-page-client.tsx

@@ -0,0 +1,197 @@
+'use client'
+
+/**
+ * Agents Page Client
+ * Main client component for the agents page.
+ */
+
+import { useState, useCallback } from 'react'
+import { Plus, Bot } from 'lucide-react'
+import { toast } from 'sonner'
+import { useLanguage } from '@/lib/i18n'
+
+import { AgentCard } from '@/components/agents/agent-card'
+import { AgentForm } from '@/components/agents/agent-form'
+import { AgentTemplates } from '@/components/agents/agent-templates'
+import { AgentRunLog } from '@/components/agents/agent-run-log'
+import {
+  createAgent,
+  updateAgent,
+  getAgents,
+} from '@/app/actions/agent-actions'
+
+// --- Types ---
+
+interface Notebook {
+  id: string
+  name: string
+  icon?: string | null
+}
+
+interface AgentItem {
+  id: string
+  name: string
+  description?: string | null
+  type?: string | null
+  role: string
+  sourceUrls?: string | null
+  sourceNotebookId?: string | null
+  targetNotebookId?: string | null
+  frequency: string
+  isEnabled: boolean
+  lastRun: string | Date | null
+  updatedAt: string | Date
+  _count: { actions: number }
+  actions: { id: string; status: string; createdAt: string | Date }[]
+  notebook?: { id: string; name: string; icon?: string | null } | null
+}
+
+interface AgentsPageClientProps {
+  agents: AgentItem[]
+  notebooks: Notebook[]
+}
+
+// --- Component ---
+
+export function AgentsPageClient({
+  agents: initialAgents,
+  notebooks,
+}: AgentsPageClientProps) {
+  const { t } = useLanguage()
+  const [agents, setAgents] = useState(initialAgents)
+  const [showForm, setShowForm] = useState(false)
+  const [editingAgent, setEditingAgent] = useState<AgentItem | null>(null)
+  const [logAgent, setLogAgent] = useState<{ id: string; name: string } | null>(null)
+
+  const refreshAgents = useCallback(async () => {
+    try {
+      const updated = await getAgents()
+      setAgents(updated)
+    } catch {
+      // Silent
+    }
+  }, [])
+
+  const handleToggle = useCallback((id: string, isEnabled: boolean) => {
+    setAgents(prev => prev.map(a => a.id === id ? { ...a, isEnabled } : a))
+  }, [])
+
+  const handleCreate = useCallback(() => {
+    setEditingAgent(null)
+    setShowForm(true)
+  }, [])
+
+  const handleEdit = useCallback((id: string) => {
+    const agent = agents.find(a => a.id === id)
+    if (agent) {
+      setEditingAgent(agent)
+      setShowForm(true)
+    }
+  }, [agents])
+
+  const handleSave = useCallback(async (formData: FormData) => {
+    const data = {
+      name: formData.get('name') as string,
+      description: (formData.get('description') as string) || undefined,
+      type: formData.get('type') as string,
+      role: formData.get('role') as string,
+      sourceUrls: formData.get('sourceUrls') ? JSON.parse(formData.get('sourceUrls') as string) : undefined,
+      sourceNotebookId: (formData.get('sourceNotebookId') as string) || undefined,
+      targetNotebookId: (formData.get('targetNotebookId') as string) || undefined,
+      frequency: formData.get('frequency') as string,
+    }
+
+    if (editingAgent) {
+      await updateAgent(editingAgent.id, data)
+      toast.success(t('agents.toasts.updated'))
+    } else {
+      await createAgent(data)
+      toast.success(t('agents.toasts.created'))
+    }
+
+    setShowForm(false)
+    setEditingAgent(null)
+    refreshAgents()
+  }, [editingAgent, refreshAgents, t])
+
+  return (
+    <>
+      {/* Header */}
+      <div className="flex items-center justify-between gap-4 mb-8">
+        <div className="flex items-center gap-4">
+          <div className="p-3 bg-primary/10 rounded-2xl shadow-sm border border-primary/20">
+            <Bot className="h-8 w-8 text-primary" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">{t('agents.title')}</h1>
+            <p className="text-muted-foreground text-sm">{t('agents.subtitle')}</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Create button */}
+      <div className="flex justify-end mb-6">
+        <button
+          onClick={handleCreate}
+          className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary/90 transition-colors"
+        >
+          <Plus className="w-4 h-4" />
+          {t('agents.newAgent')}
+        </button>
+      </div>
+
+      {/* Agents grid */}
+      {agents.length > 0 && (
+        <div className="mb-10">
+          <h3 className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-3">
+            {t('agents.myAgents')}
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {agents.map(agent => (
+              <AgentCard
+                key={agent.id}
+                agent={agent}
+                onEdit={handleEdit}
+                onRefresh={refreshAgents}
+                onToggle={handleToggle}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Empty state */}
+      {agents.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-16 text-center mb-10">
+          <Bot className="w-16 h-16 text-slate-300 mb-4" />
+          <h3 className="text-lg font-medium text-slate-500 mb-2">{t('agents.noAgents')}</h3>
+          <p className="text-sm text-slate-400 max-w-sm">
+            {t('agents.noAgentsDescription')}
+          </p>
+        </div>
+      )}
+
+      {/* Templates */}
+      <AgentTemplates onInstalled={refreshAgents} />
+
+      {/* Form modal */}
+      {showForm && (
+        <AgentForm
+          agent={editingAgent}
+          notebooks={notebooks}
+          onSave={handleSave}
+          onCancel={() => { setShowForm(false); setEditingAgent(null) }}
+        />
+      )}
+
+      {/* Run log modal */}
+      {logAgent && (
+        <AgentRunLog
+          agentId={logAgent.id}
+          agentName={logAgent.name}
+          onClose={() => setLogAgent(null)}
+        />
+      )}
+    </>
+  )
+}

keep-notes/app/actions/agent-actions.ts

@@ -0,0 +1,209 @@
+'use server'
+
+/**
+ * Agent Server Actions
+ * CRUD operations for agents and execution triggers.
+ */
+
+import { auth } from '@/auth'
+import { prisma } from '@/lib/prisma'
+import { revalidatePath } from 'next/cache'
+import { executeAgent } from '@/lib/ai/services/agent-executor.service'
+
+// --- CRUD ---
+
+export async function createAgent(data: {
+  name: string
+  description?: string
+  type: string
+  role: string
+  sourceUrls?: string[]
+  sourceNotebookId?: string
+  targetNotebookId?: string
+  frequency?: string
+}) {
+  const session = await auth()
+  if (!session?.user?.id) {
+    throw new Error('Non autorise')
+  }
+
+  try {
+    const agent = await prisma.agent.create({
+      data: {
+        name: data.name,
+        description: data.description,
+        type: data.type,
+        role: data.role,
+        sourceUrls: data.sourceUrls ? JSON.stringify(data.sourceUrls) : null,
+        sourceNotebookId: data.sourceNotebookId || null,
+        targetNotebookId: data.targetNotebookId || null,
+        frequency: data.frequency || 'manual',
+        userId: session.user.id,
+      }
+    })
+
+    revalidatePath('/agents')
+    return { success: true, agent }
+  } catch (error) {
+    console.error('Error creating agent:', error)
+    throw new Error('Impossible de creer l\'agent')
+  }
+}
+
+export async function updateAgent(id: string, data: {
+  name?: string
+  description?: string
+  type?: string
+  role?: string
+  sourceUrls?: string[]
+  sourceNotebookId?: string | null
+  targetNotebookId?: string | null
+  frequency?: string
+  isEnabled?: boolean
+}) {
+  const session = await auth()
+  if (!session?.user?.id) {
+    throw new Error('Non autorise')
+  }
+
+  try {
+    const existing = await prisma.agent.findUnique({ where: { id } })
+    if (!existing || existing.userId !== session.user.id) {
+      throw new Error('Agent non trouve')
+    }
+
+    const updateData: Record<string, unknown> = {}
+    if (data.name !== undefined) updateData.name = data.name
+    if (data.description !== undefined) updateData.description = data.description
+    if (data.type !== undefined) updateData.type = data.type
+    if (data.role !== undefined) updateData.role = data.role
+    if (data.sourceUrls !== undefined) updateData.sourceUrls = JSON.stringify(data.sourceUrls)
+    if (data.sourceNotebookId !== undefined) updateData.sourceNotebookId = data.sourceNotebookId
+    if (data.targetNotebookId !== undefined) updateData.targetNotebookId = data.targetNotebookId
+    if (data.frequency !== undefined) updateData.frequency = data.frequency
+    if (data.isEnabled !== undefined) updateData.isEnabled = data.isEnabled
+
+    const agent = await prisma.agent.update({
+      where: { id },
+      data: updateData
+    })
+
+    revalidatePath('/agents')
+    return { success: true, agent }
+  } catch (error) {
+    console.error('Error updating agent:', error)
+    throw new Error('Impossible de mettre a jour l\'agent')
+  }
+}
+
+export async function deleteAgent(id: string) {
+  const session = await auth()
+  if (!session?.user?.id) {
+    throw new Error('Non autorise')
+  }
+
+  try {
+    const existing = await prisma.agent.findUnique({ where: { id } })
+    if (!existing || existing.userId !== session.user.id) {
+      throw new Error('Agent non trouve')
+    }
+
+    await prisma.agent.delete({ where: { id } })
+    revalidatePath('/agents')
+    return { success: true }
+  } catch (error) {
+    console.error('Error deleting agent:', error)
+    throw new Error('Impossible de supprimer l\'agent')
+  }
+}
+
+export async function getAgents() {
+  const session = await auth()
+  if (!session?.user?.id) {
+    throw new Error('Non autorise')
+  }
+
+  try {
+    const agents = await prisma.agent.findMany({
+      where: { userId: session.user.id },
+      include: {
+        _count: { select: { actions: true } },
+        actions: {
+          orderBy: { createdAt: 'desc' },
+          take: 1,
+        },
+        notebook: {
+          select: { id: true, name: true, icon: true }
+        }
+      },
+      orderBy: { createdAt: 'desc' }
+    })
+
+    return agents
+  } catch (error) {
+    console.error('Error fetching agents:', error)
+    throw new Error('Impossible de charger les agents')
+  }
+}
+
+// --- Execution ---
+
+export async function runAgent(id: string) {
+  const session = await auth()
+  if (!session?.user?.id) {
+    throw new Error('Non autorise')
+  }
+
+  try {
+    const result = await executeAgent(id, session.user.id)
+    revalidatePath('/agents')
+    revalidatePath('/')
+    return result
+  } catch (error) {
+    console.error('Error running agent:', error)
+    return {
+      success: false,
+      actionId: '',
+      error: error instanceof Error ? error.message : 'Erreur inconnue'
+    }
+  }
+}
+
+// --- History ---
+
+export async function getAgentActions(agentId: string) {
+  const session = await auth()
+  if (!session?.user?.id) {
+    throw new Error('Non autorise')
+  }
+
+  try {
+    const actions = await prisma.agentAction.findMany({
+      where: { agentId },
+      orderBy: { createdAt: 'desc' },
+      take: 20,
+    })
+    return actions
+  } catch (error) {
+    console.error('Error fetching agent actions:', error)
+    throw new Error('Impossible de charger l\'historique')
+  }
+}
+
+export async function toggleAgent(id: string, isEnabled: boolean) {
+  const session = await auth()
+  if (!session?.user?.id) {
+    throw new Error('Non autorise')
+  }
+
+  try {
+    const agent = await prisma.agent.update({
+      where: { id },
+      data: { isEnabled }
+    })
+    return { success: true, agent }
+  } catch (error) {
+    console.error('Error toggling agent:', error)
+    throw new Error('Impossible de modifier l\'agent')
+  }
+}

keep-notes/components/agents/agent-card.tsx

@@ -0,0 +1,225 @@
+'use client'
+
+/**
+ * Agent Card Component
+ * Displays a single agent with status, actions, and metadata.
+ */
+
+import { useState } from 'react'
+import { formatDistanceToNow } from 'date-fns'
+import { fr } from 'date-fns/locale/fr'
+import { enUS } from 'date-fns/locale/en-US'
+import {
+  Play,
+  Trash2,
+  Loader2,
+  ToggleLeft,
+  ToggleRight,
+  Globe,
+  Search,
+  Eye,
+  Settings,
+  CheckCircle2,
+  XCircle,
+  Clock,
+} from 'lucide-react'
+import { toast } from 'sonner'
+import { useLanguage } from '@/lib/i18n'
+
+// --- Types ---
+
+interface AgentCardProps {
+  agent: {
+    id: string
+    name: string
+    description?: string | null
+    type?: string | null
+    isEnabled: boolean
+    frequency: string
+    lastRun: string | Date | null
+    updatedAt: string | Date
+    _count: { actions: number }
+    actions: { id: string; status: string; createdAt: string | Date }[]
+    notebook?: { id: string; name: string; icon?: string | null } | null
+  }
+  onEdit: (id: string) => void
+  onRefresh: () => void
+  onToggle: (id: string, isEnabled: boolean) => void
+}
+
+// --- Config ---
+
+const typeConfig: Record<string, { icon: typeof Globe; color: string; bgColor: string }> = {
+  scraper: { icon: Globe, color: 'text-blue-600', bgColor: 'bg-blue-50 border-blue-200' },
+  researcher: { icon: Search, color: 'text-purple-600', bgColor: 'bg-purple-50 border-purple-200' },
+  monitor: { icon: Eye, color: 'text-amber-600', bgColor: 'bg-amber-50 border-amber-200' },
+  custom: { icon: Settings, color: 'text-green-600', bgColor: 'bg-green-50 border-green-200' },
+}
+
+const frequencyKeys: Record<string, string> = {
+  manual: 'agents.frequencies.manual',
+  hourly: 'agents.frequencies.hourly',
+  daily: 'agents.frequencies.daily',
+  weekly: 'agents.frequencies.weekly',
+  monthly: 'agents.frequencies.monthly',
+}
+
+const statusKeys: Record<string, string> = {
+  success: 'agents.status.success',
+  failure: 'agents.status.failure',
+  running: 'agents.status.running',
+  pending: 'agents.status.pending',
+}
+
+// --- Component ---
+
+export function AgentCard({ agent, onEdit, onRefresh, onToggle }: AgentCardProps) {
+  const { t, language } = useLanguage()
+  const [isRunning, setIsRunning] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [isToggling, setIsToggling] = useState(false)
+
+  const config = typeConfig[agent.type || 'scraper'] || typeConfig.custom
+  const Icon = config.icon
+  const lastAction = agent.actions[0]
+  const dateLocale = language === 'fr' ? fr : enUS
+
+  const handleRun = async () => {
+    setIsRunning(true)
+    try {
+      const { runAgent } = await import('@/app/actions/agent-actions')
+      const result = await runAgent(agent.id)
+      if (result.success) {
+        toast.success(t('agents.toasts.runSuccess', { name: agent.name }))
+      } else {
+        toast.error(t('agents.toasts.runError', { error: result.error || t('agents.toasts.runFailed') }))
+      }
+    } catch {
+      toast.error(t('agents.toasts.runGenericError'))
+    } finally {
+      setIsRunning(false)
+      onRefresh()
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!confirm(t('agents.actions.deleteConfirm', { name: agent.name }))) return
+    setIsDeleting(true)
+    try {
+      const { deleteAgent } = await import('@/app/actions/agent-actions')
+      await deleteAgent(agent.id)
+      toast.success(t('agents.toasts.deleted', { name: agent.name }))
+    } catch {
+      toast.error(t('agents.toasts.deleteError'))
+    } finally {
+      setIsDeleting(false)
+      onRefresh()
+    }
+  }
+
+  const handleToggle = async () => {
+    const newEnabled = !agent.isEnabled
+    setIsToggling(true)
+    onToggle(agent.id, newEnabled)
+    try {
+      const { toggleAgent } = await import('@/app/actions/agent-actions')
+      await toggleAgent(agent.id, newEnabled)
+      toast.success(newEnabled ? t('agents.actions.toggleOn') : t('agents.actions.toggleOff'))
+    } catch {
+      onToggle(agent.id, !newEnabled)
+      toast.error(t('agents.toasts.toggleError'))
+    } finally {
+      setIsToggling(false)
+    }
+  }
+
+  return (
+    <div className={`
+      bg-white rounded-xl border-2 transition-all overflow-hidden
+      ${agent.isEnabled ? 'border-slate-200 hover:border-primary/30 hover:shadow-md' : 'border-slate-100 opacity-60'}
+    `}>
+      <div className={`h-1 ${agent.isEnabled ? 'bg-primary' : 'bg-slate-200'}`} />
+
+      <div className="p-4">
+        <div className="flex items-start justify-between mb-3">
+          <div className="flex items-center gap-3 min-w-0 flex-1">
+            <div className={`p-2 rounded-lg border ${config.bgColor}`}>
+              <Icon className={`w-4 h-4 ${config.color}`} />
+            </div>
+            <div className="min-w-0">
+              <h3 className="font-semibold text-slate-800 truncate">{agent.name}</h3>
+              <span className={`text-xs font-medium ${config.color}`}>
+                {t(`agents.types.${agent.type || 'custom'}`)}
+              </span>
+            </div>
+          </div>
+          <button onClick={handleToggle} disabled={isToggling} className="flex-shrink-0 ml-2 disabled:opacity-50 disabled:cursor-not-allowed">
+            {agent.isEnabled ? (
+              <ToggleRight className="w-6 h-6 text-primary" />
+            ) : (
+              <ToggleLeft className="w-6 h-6 text-slate-300" />
+            )}
+          </button>
+        </div>
+
+        {agent.description && (
+          <p className="text-xs text-slate-500 mb-3 line-clamp-2">{agent.description}</p>
+        )}
+
+        <div className="flex items-center gap-3 text-xs text-slate-400 mb-3">
+          <span className="flex items-center gap-1">
+            <Clock className="w-3 h-3" />
+            {t(frequencyKeys[agent.frequency] || 'agents.frequencies.manual')}
+          </span>
+          {agent.notebook && (
+            <span className="flex items-center gap-1">
+              {agent.notebook.icon || '📁'} {agent.notebook.name}
+            </span>
+          )}
+          <span>{t('agents.metadata.executions', { count: agent._count.actions })}</span>
+        </div>
+
+        {lastAction && (
+          <div className={`
+            flex items-center gap-1.5 text-xs px-2 py-1 rounded-md mb-3
+            ${lastAction.status === 'success' ? 'bg-green-50 text-green-600' : ''}
+            ${lastAction.status === 'failure' ? 'bg-red-50 text-red-600' : ''}
+            ${lastAction.status === 'running' ? 'bg-blue-50 text-blue-600' : ''}
+          `}>
+            {lastAction.status === 'success' && <CheckCircle2 className="w-3 h-3" />}
+            {lastAction.status === 'failure' && <XCircle className="w-3 h-3" />}
+            {lastAction.status === 'running' && <Loader2 className="w-3 h-3 animate-spin" />}
+            {t(statusKeys[lastAction.status] || lastAction.status)}
+            {' - '}
+            {formatDistanceToNow(new Date(lastAction.createdAt), { addSuffix: true, locale: dateLocale })}
+          </div>
+        )}
+
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => onEdit(agent.id)}
+            className="flex-1 px-3 py-1.5 text-xs font-medium text-primary bg-primary/5 rounded-lg hover:bg-primary/10 transition-colors"
+          >
+            {t('agents.actions.edit')}
+          </button>
+          <button
+            onClick={handleRun}
+            disabled={isRunning || !agent.isEnabled}
+            className="p-1.5 text-green-600 bg-green-50 rounded-lg hover:bg-green-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            title={t('agents.actions.run')}
+          >
+            {isRunning ? <Loader2 className="w-4 h-4 animate-spin" /> : <Play className="w-4 h-4" />}
+          </button>
+          <button
+            onClick={handleDelete}
+            disabled={isDeleting}
+            className="p-1.5 text-red-500 bg-red-50 rounded-lg hover:bg-red-100 transition-colors disabled:opacity-50"
+            title={t('agents.actions.delete')}
+          >
+            {isDeleting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Trash2 className="w-4 h-4" />}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}