AI/orchai
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: make agent cards clickable

Browse source
This commit is contained in:
thibaud-lclr 2026-04-16 08:21:16 +02:00
parent c614796e5f
commit 1756e6e14a
1 changed files with 40 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
src/components/agents/AgentList.tsx
View file

@ -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>