[taskboard] add agent detail pages

components/agents-client.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { useDeferredValue, useState } from "react";
 
 import { Badge } from "@/components/ui/badge";
@@ -148,6 +149,25 @@ export function AgentsClient({
                 )}
               </div>
 
+              <div>
+                <p className="mb-2 text-xs uppercase tracking-[0.2em] text-slate-500">Assigned Tasks</p>
+                {agent.activeTasks.length ? (
+                  <div className="space-y-2">
+                    {agent.activeTasks.slice(0, 3).map((task) => (
+                      <div className="rounded-xl border border-white/10 bg-slate-950/40 p-3" key={task.id}>
+                        <div className="flex flex-wrap items-center justify-between gap-2">
+                          <p className="font-medium text-white">{task.title}</p>
+                          <Badge variant="secondary">{task.status}</Badge>
+                        </div>
+                        <p className="mt-1 text-sm text-slate-300">{task.result_summary || task.description}</p>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <p className="text-sm text-slate-400">No assigned tasks.</p>
+                )}
+              </div>
+
               <div>
                 <p className="mb-2 text-xs uppercase tracking-[0.2em] text-slate-500">Tools</p>
                 <div className="flex flex-wrap gap-2">
@@ -162,6 +182,13 @@ export function AgentsClient({
                   )}
                 </div>
               </div>
+
+              <Link
+                className="inline-flex items-center justify-center rounded-lg border border-cyan-300/20 bg-cyan-300/10 px-4 py-2 text-sm font-medium text-cyan-100 transition hover:border-cyan-300/40 hover:bg-cyan-300/15"
+                href={`/agents/${agent.slug}`}
+              >
+                View Agent Details
+              </Link>
             </CardContent>
           </Card>
         ))}