elevenlabs-webhook-nodejs 1.0.0

package/frontend/src/pages/admin/agents/detail.tsx

@@ -0,0 +1,774 @@
+import { useState, useEffect } from "react"
+import { useParams, useNavigate } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { toast } from "sonner"
+import {
+  ArrowLeft,
+  Bot,
+  Building2,
+  Loader2,
+  Save,
+  Zap,
+  Brain,
+  MessageSquare,
+  Settings,
+  FileText,
+  History,
+  RefreshCw,
+  Radio,
+  Link,
+  Thermometer,
+} from "lucide-react"
+
+import { api } from "@/lib/api"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Separator } from "@/components/ui/separator"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { cn } from "@/lib/utils"
+
+// ─── Types ──────────────────────────────────────────────────
+
+interface ProviderOption {
+  id: string; name: string; description: string; mode: string
+  models: { id: string; name: string; tier: string; contextWindow: number }[]
+  requiresExternalId: boolean
+}
+
+interface PromptVersion {
+  pv_version: number; pv_prompt: string; pv_change_note: string; pv_created_at: string
+  changed_by?: { user_first_name: string; user_last_name: string } | null
+}
+
+// ─── Hooks ──────────────────────────────────────────────────
+
+function useAgent(id: string | undefined) {
+  return useQuery({
+    queryKey: ["agent", id],
+    queryFn: async () => (await api.get(`/agents/${id}`)).data,
+    enabled: !!id,
+  })
+}
+
+function useUpdateAgent() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ id, ...dto }: any) => (await api.put(`/agents/${id}`, dto)).data,
+    onSuccess: (_d, v) => {
+      qc.invalidateQueries({ queryKey: ["agent", v.id] })
+      qc.invalidateQueries({ queryKey: ["agents"] })
+    },
+  })
+}
+
+function useCreateAgent() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (dto: any) => (await api.post("/agents", dto)).data,
+    onSuccess: () => { qc.invalidateQueries({ queryKey: ["agents"] }) },
+  })
+}
+
+function useProviderOptions() {
+  return useQuery({
+    queryKey: ["agent-provider-options"],
+    queryFn: async () => (await api.get("/agents/provider-options")).data as ProviderOption[],
+  })
+}
+
+function usePromptHistory(id: string | undefined) {
+  return useQuery({
+    queryKey: ["agent-prompt-history", id],
+    queryFn: async () => (await api.get(`/agents/${id}/prompt-history`)).data as PromptVersion[],
+    enabled: !!id,
+  })
+}
+
+function useTenants() {
+  return useQuery({
+    queryKey: ["tenants-list"],
+    queryFn: async () => (await api.get("/admin/tenants")).data as { tenant_id: string; tenant_name: string }[],
+  })
+}
+
+function useClinics(tenantId?: string) {
+  return useQuery({
+    queryKey: ["clinics-for-tenant", tenantId],
+    queryFn: async () =>
+      (await api.get(`/admin/tenants/${tenantId}/clinics`)).data as { clinic_id: string; clinic_name: string }[],
+    enabled: !!tenantId,
+  })
+}
+
+function useAgentClinics(agentId: string | undefined) {
+  return useQuery({
+    queryKey: ["agent-clinics", agentId],
+    queryFn: async () => (await api.get(`/agents/${agentId}/clinics`)).data as { aca_id: string; clinic: { clinic_id: string; clinic_name: string } }[],
+    enabled: !!agentId,
+  })
+}
+
+function useAssignClinics() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ agentId, clinicIds }: { agentId: string; clinicIds: string[] }) =>
+      (await api.post(`/agents/${agentId}/clinics`, { clinicIds })).data,
+    onSuccess: (_d, v) => { qc.invalidateQueries({ queryKey: ["agent-clinics", v.agentId] }) },
+  })
+}
+
+function useUnassignClinic() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ agentId, clinicId }: { agentId: string; clinicId: string }) =>
+      (await api.delete(`/agents/${agentId}/clinics/${clinicId}`)).data,
+    onSuccess: (_d, v) => { qc.invalidateQueries({ queryKey: ["agent-clinics", v.agentId] }) },
+  })
+}
+
+interface ToolDef {
+  name: string
+  description: string
+  requiredFeatures?: string[]
+  channels?: string[]
+  parameters: Record<string, any>
+}
+
+function useAllTools() {
+  return useQuery({
+    queryKey: ["all-tools-full"],
+    queryFn: async () => (await api.get("/agents/tools/all")).data as ToolDef[],
+  })
+}
+
+// Derive a category from the tool name for grouping
+function toolCategory(name: string): string {
+  if (name.includes("availability") || name.includes("reservation") || name.includes("slot") || name.includes("reschedule")) return "Calendar"
+  if (name.includes("operator") || name.includes("forward") || name.includes("example_photo")) return "Operator"
+  if (name.includes("patient") || name.includes("call_patient")) return "Patient"
+  if (name.includes("validation")) return "Validation"
+  if (name.includes("payment")) return "Payment"
+  if (name.includes("sms") || name.includes("notification")) return "Notification"
+  return "Other"
+}
+
+const CATEGORY_ORDER = ["Calendar", "Operator", "Patient", "Notification", "Payment", "Validation", "Other"]
+
+// ─── Section Header ─────────────────────────────────────────
+
+function SectionHeader({ icon: Icon, label }: { icon: typeof Settings; label: string }) {
+  return (
+    <div className="flex items-center gap-2 mb-4">
+      <div className="w-6 h-6 rounded-md bg-muted flex items-center justify-center">
+        <Icon className="w-3.5 h-3.5 text-muted-foreground" />
+      </div>
+      <h2 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{label}</h2>
+      <Separator className="flex-1" />
+    </div>
+  )
+}
+
+// ─── Main Page ──────────────────────────────────────────────
+
+export default function AgentDetailPage() {
+  const { id } = useParams<{ id: string }>()
+  const isNew = !id
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const qc = useQueryClient()
+  const { data: agent, isLoading } = useAgent(id)
+  const update = useUpdateAgent()
+  const create = useCreateAgent()
+  const { data: providerOptions } = useProviderOptions()
+  const { data: tenants } = useTenants()
+  const { data: allTools } = useAllTools()
+  const { data: promptHistory } = usePromptHistory(id)
+  const { data: agentClinics } = useAgentClinics(id)
+  const assignClinics = useAssignClinics()
+  const unassignClinic = useUnassignClinic()
+
+  // Form state
+  const [name, setName] = useState("")
+  const [description, setDescription] = useState("")
+  const [tenantId, setTenantId] = useState("")
+  const [language, setLanguage] = useState("tr")
+  const [greeting, setGreeting] = useState("")
+  const [systemPrompt, setSystemPrompt] = useState("")
+  const [aiProvider, setAiProvider] = useState("")
+  const [aiModel, setAiModel] = useState("")
+  const [elevenlabsId, setElevenlabsId] = useState("")
+  const [temperature, setTemperature] = useState(0.3)
+  const [maxTokens, setMaxTokens] = useState(4096)
+  const [channels, setChannels] = useState<string[]>([])
+  const [enabledTools, setEnabledTools] = useState<string[]>([])
+  const [initialized, setInitialized] = useState(false)
+  const [showHistory, setShowHistory] = useState(false)
+  const [syncing, setSyncing] = useState(false)
+
+  useEffect(() => {
+    if (agent && !initialized) {
+      setName(agent.agent_name ?? "")
+      setDescription(agent.agent_description ?? "")
+      setTenantId(agent.agent_tenant_id ?? "")
+      setLanguage(agent.agent_language ?? "tr")
+      setGreeting(agent.agent_greeting ?? "")
+      setSystemPrompt(agent.agent_system_prompt ?? "")
+      setAiProvider(agent.agent_ai_provider ?? "")
+      setAiModel(agent.agent_ai_model ?? "")
+      setElevenlabsId(agent.agent_elevenlabs_id ?? "")
+      setTemperature(agent.agent_temperature ?? 0.3)
+      setMaxTokens(agent.agent_max_tokens ?? 4096)
+      setChannels(agent.agent_channels ?? [])
+      setEnabledTools(agent.agent_enabled_tools ?? [])
+      setInitialized(true)
+    }
+  }, [agent, initialized])
+
+  const { data: clinics } = useClinics(tenantId)
+  const selectedProvider = providerOptions?.find((p) => p.id === aiProvider)
+  const models = selectedProvider?.models ?? []
+
+  const handleSave = async () => {
+    if (!name.trim()) {
+      toast.error(t("validation.required"))
+      return
+    }
+    const dto = {
+      name: name.trim(),
+      tenantId: tenantId || null,
+      description: description || undefined,
+      language,
+      greeting: greeting || undefined,
+      systemPrompt: systemPrompt || undefined,
+      aiProvider: aiProvider || undefined,
+      aiModel: aiModel || undefined,
+      elevenlabsId: elevenlabsId || undefined,
+      temperature,
+      maxTokens,
+      channels: channels.length > 0 ? channels : undefined,
+      enabledTools,
+    }
+
+    try {
+      if (isNew) {
+        const result = await create.mutateAsync(dto)
+        toast.success(t("agents.created"))
+        navigate(`/admin/agents/${result.agent_id}`, { replace: true })
+      } else {
+        await update.mutateAsync({ id, ...dto })
+        toast.success(t("agents.updated"))
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || t("agents.updateError"))
+    }
+  }
+
+  const isSaving = update.isPending || create.isPending
+
+  const handleSyncFromEL = async () => {
+    if (!id) return
+    setSyncing(true)
+    try {
+      const { data } = await api.post(`/agents/${id}/elevenlabs/sync-pull`)
+      const changed = Object.entries(data.synced ?? {}).filter(([, v]) => v).map(([k]) => k)
+      if (changed.length > 0) {
+        toast.success(`Synced: ${changed.join(", ")}`)
+        qc.invalidateQueries({ queryKey: ["agent", id] })
+        qc.invalidateQueries({ queryKey: ["agent-prompt-history", id] })
+        setInitialized(false)
+      } else {
+        toast.info("Already up to date")
+      }
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "Sync failed")
+    }
+    setSyncing(false)
+  }
+
+  // ─── Loading / Not Found ────────────────────────────────
+
+  if (!isNew && isLoading) {
+    return (
+      <div className="max-w-[960px] mx-auto space-y-6 py-2">
+        <Skeleton className="h-16 w-full rounded-2xl" />
+        <div className="grid grid-cols-2 gap-6">
+          <Skeleton className="h-72 rounded-2xl" />
+          <Skeleton className="h-72 rounded-2xl" />
+        </div>
+      </div>
+    )
+  }
+
+  if (!isNew && !agent) {
+    return (
+      <div className="max-w-[960px] mx-auto space-y-4 py-2">
+        <Button variant="ghost" size="sm" onClick={() => navigate("/admin/agents")}>
+          <ArrowLeft className="w-4 h-4 mr-1.5" />{t("common.back")}
+        </Button>
+        <p className="text-sm text-muted-foreground">{t("agents.noAgents")}</p>
+      </div>
+    )
+  }
+
+  // ─── Render ─────────────────────────────────────────────
+
+  return (
+    <div className="max-w-[960px] mx-auto space-y-8 py-2">
+
+      {/* ── Header ────────────────────────────────────────── */}
+      <div className="rounded-2xl border bg-card overflow-hidden">
+        <div className={cn("h-1.5", isNew ? "bg-primary" : agent?.agent_is_active ? "bg-primary" : "bg-muted")} />
+        <div className="px-6 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <button onClick={() => navigate("/admin/agents")} className="text-muted-foreground hover:text-foreground">
+              <ArrowLeft className="w-5 h-5" />
+            </button>
+            <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+              <Bot className="w-5 h-5 text-primary" />
+            </div>
+            <div>
+              <h1 className="text-lg font-bold">{isNew ? t("agents.create") : (name || "Unnamed Agent")}</h1>
+              {!isNew && agent && (
+                <div className="flex items-center gap-2 mt-0.5">
+                  <Badge variant={agent.agent_is_active ? "outline" : "secondary"} className="text-[9px]">
+                    {agent.agent_is_active ? t("common.active") : t("common.inactive")}
+                  </Badge>
+                  {agent.agent_ai_provider && (
+                    <Badge variant="outline" className="text-[9px]">{agent.agent_ai_provider}</Badge>
+                  )}
+                  {agent.agent_elevenlabs_id && (
+                    <Badge variant="outline" className="text-[9px] font-mono">EL: {agent.agent_elevenlabs_id.substring(0, 8)}...</Badge>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            {!isNew && agent?.agent_elevenlabs_id && (
+              <Button variant="outline" size="sm" onClick={handleSyncFromEL} disabled={syncing}>
+                {syncing ? <Loader2 className="w-4 h-4 animate-spin" /> : <><RefreshCw className="w-4 h-4 mr-1.5" />Sync from EL</>}
+              </Button>
+            )}
+            <Button onClick={handleSave} disabled={isSaving}>
+              {isSaving
+                ? <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" />{t("common.loading")}</>
+                : <><Save className="w-4 h-4 mr-1.5" />{isNew ? t("common.create") : t("common.save")}</>}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* ══════════════════════════════════════════════════════
+           SECTION 1: PLATFORM SETTINGS
+           Identity, ownership, routing — where the agent lives
+           ══════════════════════════════════════════════════════ */}
+
+      <div>
+        <SectionHeader icon={Settings} label="Platform Settings" />
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Identity */}
+          <Card className="rounded-2xl">
+            <CardHeader className="pb-3">
+              <CardTitle className="text-xs font-medium text-muted-foreground">Identity</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div className="space-y-1.5">
+                <Label className="text-xs">{t("common.name")}</Label>
+                <Input value={name} onChange={(e) => setName(e.target.value)} className="h-9" placeholder="e.g. Reception Agent" />
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs">{t("agents.description")}</Label>
+                <Input value={description} onChange={(e) => setDescription(e.target.value)} className="h-9" placeholder="Brief description of this agent's role" />
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs">Tenant</Label>
+                <Select value={tenantId || "__none__"} onValueChange={(v) => setTenantId(v === "__none__" ? "" : v)}>
+                  <SelectTrigger className="h-9">
+                    <SelectValue>{tenants?.find((t) => t.tenant_id === tenantId)?.tenant_name || "Unassigned (Draft)"}</SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__none__">Unassigned (Draft)</SelectItem>
+                    {(tenants ?? []).map((t) => (
+                      <SelectItem key={t.tenant_id} value={t.tenant_id}>{t.tenant_name}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Routing & Channels */}
+          <Card className="rounded-2xl">
+            <CardHeader className="pb-3">
+              <CardTitle className="text-xs font-medium text-muted-foreground flex items-center gap-1.5">
+                <Radio className="w-3 h-3" /> Routing & Channels
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div className="space-y-1.5">
+                <Label className="text-xs">Channels</Label>
+                <div className="flex gap-3">
+                  {["whatsapp", "instagram", "voice_call"].map((ch) => (
+                    <label key={ch} className="flex items-center gap-1.5 text-xs cursor-pointer">
+                      <Checkbox
+                        checked={channels.includes(ch)}
+                        onCheckedChange={(v) => setChannels(v ? [...channels, ch] : channels.filter((c) => c !== ch))}
+                      />
+                      {ch === "whatsapp" ? "WhatsApp" : ch === "instagram" ? "Instagram" : "Voice"}
+                    </label>
+                  ))}
+                </div>
+                <p className="text-[10px] text-muted-foreground">Leave empty for all channels</p>
+              </div>
+
+              {/* ElevenLabs link */}
+              <Separator />
+              <div className="space-y-1.5">
+                <Label className="text-xs flex items-center gap-1.5">
+                  <Link className="w-3 h-3" /> ElevenLabs Agent ID
+                </Label>
+                <Input value={elevenlabsId} onChange={(e) => setElevenlabsId(e.target.value)} className="h-9 font-mono text-xs" placeholder="Leave empty if not using ElevenLabs" />
+                <p className="text-[10px] text-muted-foreground">Links this agent to an ElevenLabs conversational AI agent for voice calls</p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Clinic Assignments (only if tenant set) */}
+        {!isNew && tenantId && (
+          <Card className="rounded-2xl mt-6">
+            <CardHeader className="pb-3">
+              <CardTitle className="text-xs font-medium text-muted-foreground flex items-center gap-1.5">
+                <Building2 className="w-3 h-3" /> Clinic Assignments
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              {agentClinics && agentClinics.length > 0 ? (
+                <div className="flex flex-wrap gap-2">
+                  {agentClinics.map((a: any) => (
+                    <Badge key={a.aca_id} variant="secondary" className="text-xs gap-1 pr-1">
+                      {a.clinic.clinic_name}
+                      <button
+                        onClick={() => unassignClinic.mutateAsync({ agentId: id!, clinicId: a.clinic.clinic_id })}
+                        className="ml-0.5 rounded-full hover:bg-destructive/20 p-0.5 text-muted-foreground hover:text-destructive transition-colors"
+                      >
+                        &times;
+                      </button>
+                    </Badge>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-xs text-muted-foreground">No clinics assigned — agent available to all clinics in the tenant.</p>
+              )}
+              {(() => {
+                const available = (clinics ?? []).filter(
+                  (c) => !agentClinics?.some((a: any) => a.clinic.clinic_id === c.clinic_id),
+                )
+                if (available.length === 0) return null
+                return (
+                  <Select key={agentClinics?.length ?? 0} onValueChange={(clinicId) => {
+                    if (clinicId && id) assignClinics.mutateAsync({ agentId: id, clinicIds: [clinicId] })
+                  }}>
+                    <SelectTrigger className="h-8 text-xs w-48">
+                      <SelectValue>Add clinic...</SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                      {available.map((c) => (
+                        <SelectItem key={c.clinic_id} value={c.clinic_id}>{c.clinic_name}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )
+              })()}
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      {/* ══════════════════════════════════════════════════════
+           SECTION 2: AI CONFIGURATION
+           How the agent thinks — provider, model, parameters
+           ══════════════════════════════════════════════════════ */}
+
+      <div>
+        <SectionHeader icon={Brain} label="AI Configuration" />
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Provider & Model */}
+          <Card className="rounded-2xl">
+            <CardHeader className="pb-3">
+              <CardTitle className="text-xs font-medium text-muted-foreground flex items-center gap-1.5">
+                <Zap className="w-3 h-3" /> Provider & Model
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div className="space-y-1.5">
+                <Label className="text-xs">Provider</Label>
+                <Select value={aiProvider} onValueChange={(v) => { setAiProvider(v); setAiModel("") }}>
+                  <SelectTrigger className="h-9">
+                    <SelectValue>{providerOptions?.find((p) => p.id === aiProvider)?.name || t("agents.defaultProvider")}</SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="">{t("agents.defaultProvider")}</SelectItem>
+                    {(providerOptions ?? []).map((p) => (
+                      <SelectItem key={p.id} value={p.id}>
+                        <div className="flex items-center gap-2">
+                          <span>{p.name}</span>
+                          <Badge variant="outline" className="text-[8px] px-1 py-0 h-3.5">{p.mode}</Badge>
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                {selectedProvider && (
+                  <p className="text-[10px] text-muted-foreground">{selectedProvider.description}</p>
+                )}
+              </div>
+
+              {models.length > 0 && (
+                <div className="space-y-1.5">
+                  <Label className="text-xs">Model</Label>
+                  <Select value={aiModel} onValueChange={setAiModel}>
+                    <SelectTrigger className="h-9">
+                      <SelectValue>{models.find((m) => m.id === aiModel)?.name || "Default"}</SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="">Default</SelectItem>
+                      {models.map((m) => (
+                        <SelectItem key={m.id} value={m.id}>
+                          <div className="flex items-center gap-2">
+                            <span>{m.name}</span>
+                            <Badge variant="outline" className="text-[8px] px-1 py-0 h-3.5">{m.tier}</Badge>
+                            <span className="text-[9px] text-muted-foreground">{(m.contextWindow / 1000).toFixed(0)}K ctx</span>
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Parameters */}
+          <Card className="rounded-2xl">
+            <CardHeader className="pb-3">
+              <CardTitle className="text-xs font-medium text-muted-foreground flex items-center gap-1.5">
+                <Thermometer className="w-3 h-3" /> Parameters
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div className="space-y-1.5">
+                <Label className="text-xs">{t("agents.language")}</Label>
+                <Select value={language} onValueChange={setLanguage}>
+                  <SelectTrigger className="h-9"><SelectValue>{language === "tr" ? "Turkce" : "English"}</SelectValue></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="tr">Turkce</SelectItem>
+                    <SelectItem value="en">English</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs">Greeting / First Message</Label>
+                <Input value={greeting} onChange={(e) => setGreeting(e.target.value)} className="h-9" placeholder="Merhaba! Size nasil yardimci olabilirim?" />
+              </div>
+              <Separator />
+              <div className="space-y-1.5">
+                <div className="flex items-center justify-between">
+                  <Label className="text-xs">Temperature</Label>
+                  <span className="text-[10px] font-mono text-muted-foreground bg-muted px-1.5 py-0.5 rounded">{temperature.toFixed(2)}</span>
+                </div>
+                <input
+                  type="range" min="0" max="1" step="0.05"
+                  value={temperature}
+                  onChange={(e) => setTemperature(parseFloat(e.target.value))}
+                  className="w-full h-1.5 bg-muted rounded-lg appearance-none cursor-pointer"
+                />
+                <div className="flex justify-between text-[9px] text-muted-foreground">
+                  <span>Precise</span>
+                  <span>Creative</span>
+                </div>
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs">Max Tokens</Label>
+                <Input type="number" min={256} max={16384} value={maxTokens} onChange={(e) => setMaxTokens(Number(e.target.value))} className="h-9" />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* ══════════════════════════════════════════════════════
+           SECTION 3: SYSTEM PROMPT
+           ══════════════════════════════════════════════════════ */}
+
+      <div>
+        <SectionHeader icon={MessageSquare} label="System Prompt" />
+
+        <Card className="rounded-2xl">
+          <CardHeader className="pb-3">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-xs font-medium text-muted-foreground">
+                Instructions that define the agent's behavior
+              </CardTitle>
+              {!isNew && (
+                <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => setShowHistory(!showHistory)}>
+                  <History className="w-3.5 h-3.5 mr-1" /> {showHistory ? "Hide history" : "History"}
+                </Button>
+              )}
+            </div>
+          </CardHeader>
+          <CardContent>
+            <textarea
+              className="w-full rounded-lg border bg-background px-4 py-3 text-sm min-h-[220px] resize-y focus:outline-none focus:ring-1 focus:ring-ring font-mono leading-relaxed"
+              value={systemPrompt}
+              onChange={(e) => setSystemPrompt(e.target.value)}
+              placeholder={t("agents.systemPromptPlaceholder")}
+            />
+            <p className="text-[10px] text-muted-foreground mt-1.5">
+              {systemPrompt.length} characters
+            </p>
+
+            {showHistory && promptHistory && promptHistory.length > 0 && (
+              <div className="mt-4 space-y-2 border-t pt-4">
+                <p className="text-xs font-medium text-muted-foreground">Version History</p>
+                {promptHistory.map((v) => (
+                  <div key={v.pv_version} className="rounded-lg border p-3 text-xs">
+                    <div className="flex items-center justify-between mb-1">
+                      <div className="flex items-center gap-2">
+                        <Badge variant="outline" className="text-[9px]">v{v.pv_version}</Badge>
+                        {v.pv_change_note && <span className="text-muted-foreground">{v.pv_change_note}</span>}
+                        {v.changed_by && (
+                          <span className="text-muted-foreground/60">{v.changed_by.user_first_name} {v.changed_by.user_last_name}</span>
+                        )}
+                      </div>
+                      <Button size="sm" variant="ghost" className="h-6 text-[10px]" onClick={() => setSystemPrompt(v.pv_prompt)}>
+                        Restore
+                      </Button>
+                    </div>
+                    <p className="text-muted-foreground line-clamp-2 font-mono">{v.pv_prompt}</p>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* ══════════════════════════════════════════════════════
+           SECTION 4: CLIENT TOOLS
+           What the agent can do — toggleable per tool
+           ══════════════════════════════════════════════════════ */}
+
+      {allTools && allTools.length > 0 && (() => {
+        const enabledCount = enabledTools.length
+        const isNoneEnabled = enabledCount === 0
+        const isAllEnabledExplicit = enabledCount === allTools.length
+        const grouped = new Map<string, ToolDef[]>()
+        for (const t of allTools) {
+          const cat = toolCategory(t.name)
+          if (!grouped.has(cat)) grouped.set(cat, [])
+          grouped.get(cat)!.push(t)
+        }
+        const categories = CATEGORY_ORDER.filter((c) => grouped.has(c))
+
+        const toggle = (toolName: string) => {
+          setEnabledTools((prev) =>
+            prev.includes(toolName) ? prev.filter((n) => n !== toolName) : [...prev, toolName],
+          )
+        }
+
+        const isToolEnabled = (name: string) => enabledTools.includes(name)
+
+        return (
+          <div>
+            <SectionHeader icon={FileText} label="Client Tools" />
+
+            <div className="flex items-center justify-between mb-4">
+              <p className="text-xs text-muted-foreground">
+                {isNoneEnabled
+                  ? "No tools enabled"
+                  : `${enabledCount} of ${allTools.length} tools enabled`}
+              </p>
+              <div className="flex gap-1">
+                {!isNoneEnabled && (
+                  <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => setEnabledTools([])}>
+                    Disable all
+                  </Button>
+                )}
+                {!isAllEnabledExplicit && (
+                  <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={() => setEnabledTools(allTools.map((t) => t.name))}>
+                    Enable all
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            <div className="space-y-6">
+              {categories.map((cat) => (
+                <div key={cat}>
+                  <p className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground mb-2">{cat}</p>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                    {grouped.get(cat)!.map((tool) => {
+                      const enabled = isToolEnabled(tool.name)
+                      return (
+                        <button
+                          key={tool.name}
+                          onClick={() => toggle(tool.name)}
+                          className={cn(
+                            "rounded-xl border p-3 text-left transition-all cursor-pointer",
+                            enabled
+                              ? "bg-card border-primary/30 ring-1 ring-primary/10"
+                              : "bg-muted/30 border-border opacity-60",
+                          )}
+                        >
+                          <div className="flex items-start justify-between gap-2">
+                            <div className="min-w-0 flex-1">
+                              <p className="text-xs font-mono font-medium truncate">{tool.name}</p>
+                              <p className="text-[10px] text-muted-foreground mt-0.5 line-clamp-2">{tool.description}</p>
+                            </div>
+                            <div className={cn(
+                              "w-4 h-4 rounded-full border-2 shrink-0 mt-0.5 transition-colors",
+                              enabled ? "bg-primary border-primary" : "border-muted-foreground/30",
+                            )} />
+                          </div>
+                          {/* Metadata row */}
+                          <div className="flex items-center gap-1.5 mt-2 flex-wrap">
+                            {tool.requiredFeatures?.map((f) => (
+                              <Badge key={f} variant="outline" className="text-[8px] px-1 py-0 h-3.5 font-mono">{f}</Badge>
+                            ))}
+                            {tool.channels?.map((ch) => (
+                              <Badge key={ch} variant="secondary" className="text-[8px] px-1 py-0 h-3.5">
+                                {ch === "whatsapp" ? "WA" : ch === "voice_call" ? "Voice" : ch === "instagram" ? "IG" : ch}
+                              </Badge>
+                            ))}
+                            {!tool.channels?.length && (
+                              <Badge variant="secondary" className="text-[8px] px-1 py-0 h-3.5">All channels</Badge>
+                            )}
+                          </div>
+                        </button>
+                      )
+                    })}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )
+      })()}
+    </div>
+  )
+}