From 1756e6e14af267c650f89e642a9ce5f5d2c96efc Mon Sep 17 00:00:00 2001
From: thibaud-lclr <thibaud.leclere2@protonmail.com>
Date: Thu, 16 Apr 2026 08:21:16 +0200
Subject: [PATCH] fix: make agent cards clickable

---
 src/components/agents/AgentList.tsx | 78 +++++++++++++++--------------
 1 file changed, 40 insertions(+), 38 deletions(-)

diff --git a/src/components/agents/AgentList.tsx b/src/components/agents/AgentList.tsx
index ba0388f..7fd3522 100644
--- a/src/components/agents/AgentList.tsx
+++ b/src/components/agents/AgentList.tsx
@@ -79,47 +79,49 @@ export default function AgentList() {
         {agents.map((agent) => (
           <div
             key={agent.id}
-            className="flex items-start justify-between gap-4 rounded-lg border border-gray-200 bg-white p-4"
+            className="group relative rounded-lg border border-gray-200 bg-white p-4 transition hover:border-blue-300 hover:shadow-sm focus-within:border-blue-400 focus-within:ring-2 focus-within:ring-blue-100"
           >
-            <div className="min-w-0 flex-1">
-              <div className="flex items-center gap-2">
-                <span className="text-sm font-medium">{agent.name}</span>
-                {agent.is_default && (
-                  <span className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs text-emerald-700">
-                    Default
-                  </span>
-                )}
-                <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
-                  {roleLabel(agent.role)}
-                </span>
-                <span className="rounded-full bg-blue-50 px-2 py-0.5 text-xs text-blue-700">
-                  {toolLabel(agent.tool)}
-                </span>
-              </div>
-              {agent.custom_prompt.trim() ? (
-                <p className="mt-2 line-clamp-3 text-xs text-gray-500">
-                  {agent.custom_prompt}
-                </p>
-              ) : (
-                <p className="mt-2 text-xs text-gray-400">No custom prompt.</p>
-              )}
-            </div>
+            <Link
+              to={`/agents/${agent.id}/edit`}
+              aria-label={`Edit ${agent.name}`}
+              className="absolute inset-0 rounded-lg focus-visible:outline-none"
+            />
+
+            <div className="pointer-events-none relative z-10 flex items-start justify-between gap-4">
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium">{agent.name}</span>
+                  {agent.is_default && (
+                    <span className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs text-emerald-700">
+                      Default
+                    </span>
+                  )}
+                  <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
+                    {roleLabel(agent.role)}
+                  </span>
+                  <span className="rounded-full bg-blue-50 px-2 py-0.5 text-xs text-blue-700">
+                    {toolLabel(agent.tool)}
+                  </span>
+                </div>
+                {agent.custom_prompt.trim() ? (
+                  <p className="mt-2 line-clamp-3 text-xs text-gray-500">
+                    {agent.custom_prompt}
+                  </p>
+                ) : (
+                  <p className="mt-2 text-xs text-gray-400">No custom prompt.</p>
+                )}
+              </div>
 
-            <div className="flex shrink-0 items-center gap-2">
-              <Link
-                to={`/agents/${agent.id}/edit`}
-                className="rounded bg-gray-200 px-3 py-1 text-xs text-gray-700 hover:bg-gray-300"
-              >
-                Edit
-              </Link>
               {!agent.is_default && (
-                <button
-                  type="button"
-                  onClick={() => setAgentToDelete(agent)}
-                  className="rounded bg-red-100 px-3 py-1 text-xs text-red-700 hover:bg-red-200"
-                >
-                  Delete
-                </button>
+                <div className="pointer-events-auto shrink-0">
+                  <button
+                    type="button"
+                    onClick={() => setAgentToDelete(agent)}
+                    className="rounded bg-red-100 px-3 py-1 text-xs text-red-700 hover:bg-red-200"
+                  >
+                    Delete
+                  </button>
+                </div>
               )}
             </div>
           </div>