feat: small improvements

components/agents.tsx

@@ -1,16 +1,16 @@
 import { CheckCircle2 } from 'lucide-react'
 
 const agents = [
-  { name: 'Claude Code', org: 'anthropics' },
-  { name: 'Codex', org: 'openai' },
-  { name: 'Cursor', org: 'getcursor' },
-  { name: 'Aider', org: 'Aider-AI' },
-  { name: 'Goose', org: 'block' },
-  { name: 'Amp', org: 'sourcegraph' },
-  { name: 'Gemini CLI', org: 'google-gemini' },
-  { name: 'Cline', org: 'cline' },
-  { name: 'OpenCode', org: 'nicepkg' },
-  { name: 'Copilot', org: 'github' },
+  { name: 'Claude Code', org: 'anthropics', url: 'https://docs.anthropic.com/en/docs/claude-code' },
+  { name: 'Codex', org: 'openai', url: 'https://github.com/openai/codex' },
+  { name: 'Cursor', org: 'getcursor', url: 'https://cursor.com' },
+  { name: 'Aider', org: 'Aider-AI', url: 'https://aider.chat' },
+  { name: 'Goose', org: 'block', url: 'https://github.com/block/goose' },
+  { name: 'Amp', org: 'sourcegraph', url: 'https://ampcode.com' },
+  { name: 'Gemini CLI', org: 'google-gemini', url: 'https://github.com/google-gemini/gemini-cli' },
+  { name: 'Cline', org: 'cline', url: 'https://cline.bot' },
+  { name: 'OpenCode', org: 'nicepkg', url: 'https://opencode.ai/' },
+  { name: 'Copilot', org: 'github', url: 'https://github.com/features/copilot' },
 ]
 
 export function Agents() {
@@ -35,9 +35,12 @@ export function Agents() {
 
         <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
           {agents.map((agent) => (
-            <div
+            <a
               key={agent.name}
-              className="group flex items-center gap-3 p-4 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20 transition-all"
+              href={agent.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="group flex items-center gap-3 p-4 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20 hover:bg-card/50 transition-all cursor-pointer"
             >
               <img
                 src={`https://github.com/${agent.org}.png?size=64`}
@@ -46,10 +49,10 @@ export function Agents() {
                 height={28}
                 className="rounded-md shrink-0 bg-muted"
               />
-              <span className="text-sm font-sans font-medium text-foreground truncate">
+              <span className="text-sm font-sans font-medium text-foreground group-hover:text-primary truncate transition-colors">
                 {agent.name}
               </span>
-            </div>
+            </a>
           ))}
         </div>
       </div>