fix(panel): agent cards — intrinsic auto-fill grid, roomier cards

repeat(auto-fill, minmax(17rem, 1fr)) replaces the breakpoint ladder:
one column on a phone through eight on a 27", consistent card width
across every team section at any viewport. Cards gain padding and a
base-size title.

panel/src/components/agents/agent-card.tsx

@@ -72,10 +72,10 @@ export function AgentCard({ agent, agentStatus, usageRow }: AgentCardProps) {
         : null;
 
   return (
-    <Card className={cn("gap-2 py-3", isActive && "border-green-500/50")}>
+    <Card className={cn("gap-2.5 py-4", isActive && "border-green-500/50")}>
-      <CardHeader className="gap-0.5 px-3">
+      <CardHeader className="gap-1 px-4">
         <div className="flex items-center justify-between gap-1">
-          <CardTitle className="truncate text-sm">
+          <CardTitle className="truncate text-base">
             {agent.name || "Unknown Agent"}
           </CardTitle>
           <DropdownMenu>
@@ -126,7 +126,7 @@ export function AgentCard({ agent, agentStatus, usageRow }: AgentCardProps) {
           {agent.team && " • " + agent.team.replace(/_/g, " ")}
         </CardDescription>
       </CardHeader>
-      <CardContent className="px-3">
+      <CardContent className="px-4">
         <HelpTip label={agentStateDescription(state)}>
           <span className="inline-flex items-center gap-1.5 text-xs font-medium">
             <span

panel/src/components/agents/agent-grid.tsx

@@ -13,10 +13,10 @@ interface AgentGridProps {
   isLoading: boolean;
 }
 
-// Compact cards need far less width per card than the old large ones, so
+// Intrinsic sizing: every card gets at least 17rem and rows fill whatever
-// wide screens fit up to 8 across instead of wrapping a tall, ragged grid.
+// the viewport offers — one column on a phone, eight on a 27" — with a
-const GRID_COLS =
+// consistent card width across all team sections at any width.
-  "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8";
+const GRID_COLS = "grid-cols-[repeat(auto-fill,minmax(17rem,1fr))]";
 
 export function AgentGrid({
   title,
@@ -38,8 +38,8 @@ export function AgentGrid({
       <div className={"grid gap-3 " + GRID_COLS}>
         {isLoading
           ? Array.from({ length: agents.length || 3 }).map((_, i) => (
-              <Card key={i} className="gap-2 py-3">
+              <Card key={i} className="gap-2.5 py-4">
-                <CardHeader className="gap-1 px-3">
+                <CardHeader className="gap-1 px-4">
                   <Skeleton className="h-4 w-24" />
                   <Skeleton className="h-3 w-16" />
                 </CardHeader>