feat: update routing and improve link handling across components

- Refactored links in ApiReferenceContent, CareersContent, DocsLayout, DocsNav, and ToolsList to use pathname and query for better routing.
- Changed external links in ExamplesList and Footer to use standard anchor tags instead of next/link to avoid type errors.
- Updated link handling in Navbar and NetworksList to ensure proper routing with query parameters.
- Modified styles in various components to use linear gradients instead of traditional gradients for consistency.
- Adjusted tool implementations in calendar-tool, data-validator.tool, execa-tool, and pnpm-tool to improve error handling and tracing context.
- Updated changelog workflow to use default imports for execa for consistency.

Author: ssdeanx

app/components/api-reference-content.tsx

@@ -78,23 +78,23 @@ export function ApiReferenceContent() {
         {/* Quick Links — Agents / Tools / Workflows */}
         <div className="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-4">
           <Link
-            href="/api-reference/agents"
+            href={{ pathname: "/api-reference/agents" }}
             className="group block rounded-2xl border border-border bg-card p-4 transition-all hover:border-primary/50 hover:shadow-lg"
           >
             <h3 className="mb-1 text-sm font-semibold text-foreground">Agents</h3>
             <p className="text-sm text-muted-foreground">See agent endpoints, streaming, and agent tool call docs</p>
           </Link>
 
           <Link
-            href="/api-reference/tools"
+            href={{ pathname: "/api-reference/tools" }}
             className="group block rounded-2xl border border-border bg-card p-4 transition-all hover:border-primary/50 hover:shadow-lg"
           >
             <h3 className="mb-1 text-sm font-semibold text-foreground">Tools</h3>
             <p className="text-sm text-muted-foreground">Tool execution endpoints and sample integrations</p>
           </Link>
 
           <Link
-            href="/api-reference/workflows"
+            href={{ pathname: "/api-reference/workflows" }}
             className="group block rounded-2xl border border-border bg-card p-4 transition-all hover:border-primary/50 hover:shadow-lg"
           >
             <h3 className="mb-1 text-sm font-semibold text-foreground">Workflows</h3>

app/components/careers-content.tsx

@@ -81,18 +81,19 @@ export function CareersContent() {
         <div>
           <h2 className="mb-8 text-2xl font-bold text-foreground">Open Positions</h2>
           <div className="space-y-4">
-            {POSITIONS.map((position, index) => (
+            {POSITIONS.map((position, index) => {
+              const slug = position.title.toLowerCase().replace(/\s+/g, "-")
+              const href = `/careers/${slug}`
+
+              return (
               <motion.div
                 key={position.title}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.4, delay: index * 0.1 }}
                 viewport={{ once: true }}
               >
-                <Link
-                  href={`/careers/${position.title.toLowerCase().replace(/\s+/g, "-")}`}
-                  className="group flex flex-col gap-4 rounded-2xl border border-border bg-card p-6 transition-all hover:border-primary/50 hover:shadow-lg sm:flex-row sm:items-center sm:justify-between"
-                >
+                <Link href={href as any} className="group flex flex-col gap-4 rounded-2xl border border-border bg-card p-6 transition-all hover:border-primary/50 hover:shadow-lg sm:flex-row sm:items-center sm:justify-between">
                   <div>
                     <div className="mb-2 flex flex-wrap items-center gap-2">
                       <Badge variant="secondary">{position.department}</Badge>

app/components/docs-layout.tsx

@@ -58,14 +58,14 @@ export function DocsLayout({
           <nav className="mt-16 flex items-center justify-between border-t border-border pt-8">
             {prevPage ? (
               <Button variant="outline" asChild>
-                <Link href={prevPage.href}>
+                <Link href={prevPage.href as any}>
                   <ArrowLeftIcon className="mr-2 size-4" /> {prevPage.title}
                 </Link>
               </Button>
             ) : <div />}
             {nextPage && (
               <Button variant="outline" asChild>
-                <Link href={nextPage.href}>
+                <Link href={nextPage.href as any}>
                   {nextPage.title} <ChevronRightIcon className="ml-2 size-4" />
                 </Link>
               </Button>

app/components/docs-nav.tsx

@@ -115,7 +115,7 @@ export function DocsNav() {
             viewport={{ once: true }}
           >
             <Link
-              href={section.href}
+              href={section.href as any}
               className="group flex h-full flex-col rounded-2xl border border-border bg-card p-6 transition-all hover:border-primary/50 hover:shadow-lg"
             >
               <div className="mb-4 flex size-12 items-center justify-center rounded-lg bg-primary/10 text-primary">

app/components/examples-list.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useState } from "react"
-import Link from "next/link"
+// use standard anchor for external links to avoid next/link type errors
 import { motion } from "framer-motion"
 import { Input } from "@/ui/input"
 import { Badge } from "@/ui/badge"
@@ -104,14 +104,14 @@ export function ExamplesList() {
             </p>
             <div className="flex gap-3">
               <Button variant="outline" size="sm" asChild className="flex-1">
-                <Link href={example.github} target="_blank" rel="noopener noreferrer">
+                <a href={example.github} target="_blank" rel="noopener noreferrer">
                   <GithubIcon className="mr-2 size-4" /> View Code
-                </Link>
+                </a>
               </Button>
               <Button size="sm" asChild className="flex-1">
-                <Link href={example.github} target="_blank" rel="noopener noreferrer">
+                <a href={example.github} target="_blank" rel="noopener noreferrer">
                   <ExternalLinkIcon className="mr-2 size-4" /> Live Demo
-                </Link>
+                </a>
               </Button>
             </div>
           </motion.div>

app/components/footer.tsx

@@ -117,7 +117,7 @@ export function Footer() {
           {/* Brand column */}
           <div className="col-span-2 md:col-span-3 lg:col-span-2">
             <Link href="/" className="flex items-center gap-2">
-              <div className="flex size-10 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-primary/80 shadow-lg">
+              <div className="flex size-10 items-center justify-center rounded-lg bg-linear-to-br from-primary to-primary/80 shadow-lg">
                 <span className="font-bold text-primary-foreground text-lg">A</span>
               </div>
               <span className="text-xl font-bold text-foreground">AgentStack</span>
@@ -128,7 +128,7 @@ export function Footer() {
             </p>
             <div className="mt-6 flex items-center gap-3">
               {SOCIAL_LINKS.map((social) => (
-                <Link
+                <a
                   key={social.name}
                   href={social.href}
                   target="_blank"
@@ -137,7 +137,7 @@ export function Footer() {
                   aria-label={social.name}
                 >
                   <social.icon className="size-5" />
-                </Link>
+                </a>
               ))}
             </div>
           </div>
@@ -149,7 +149,7 @@ export function Footer() {
               {FOOTER_LINKS.product.map((link) => (
                 <li key={link.label}>
                   <Link
-                    href={link.href}
+                    href={link.href as any}
                     className="text-sm text-muted-foreground transition-colors hover:text-foreground"
                   >
                     {link.label}
@@ -166,7 +166,7 @@ export function Footer() {
               {FOOTER_LINKS.resources.map((link) => (
                 <li key={link.label}>
                   <Link
-                    href={link.href}
+                    href={link.href as any}
                     className="text-sm text-muted-foreground transition-colors hover:text-foreground"
                   >
                     {link.label}
@@ -183,7 +183,7 @@ export function Footer() {
               {FOOTER_LINKS.company.map((link) => (
                 <li key={link.label}>
                   <Link
-                    href={link.href}
+                    href={link.href as any}
                     className="text-sm text-muted-foreground transition-colors hover:text-foreground"
                   >
                     {link.label}
@@ -200,7 +200,7 @@ export function Footer() {
               {FOOTER_LINKS.legal.map((link) => (
                 <li key={link.label}>
                   <Link
-                    href={link.href}
+                    href={link.href as any}
                     className="text-sm text-muted-foreground transition-colors hover:text-foreground"
                   >
                     {link.label}

app/components/landing-cta.tsx

@@ -45,7 +45,7 @@ export function LandingCTA() {
     <section className="relative overflow-hidden border-t border-border">
       {/* Background gradients */}
       <div className="absolute inset-0 -z-10">
-        <div className="absolute inset-0 bg-gradient-to-t from-primary/5 via-transparent to-transparent" />
+        <div className="absolute inset-0 bg-linear-to-t from-primary/5 via-transparent to-transparent" />
         <div className="absolute left-1/2 top-0 h-[600px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/10 blur-[120px]" />
         <div className="absolute bottom-0 left-0 h-[400px] w-[400px] -translate-x-1/2 translate-y-1/2 rounded-full bg-blue-500/10 blur-[100px]" />
         <div className="absolute bottom-0 right-0 h-[400px] w-[400px] translate-x-1/2 translate-y-1/2 rounded-full bg-purple-500/10 blur-[100px]" />
@@ -84,7 +84,7 @@ export function LandingCTA() {
           >
             Ready to Build{" "}
             <span className="relative">
-              <span className="relative z-10 bg-gradient-to-r from-primary via-blue-500 to-purple-500 bg-clip-text text-transparent">
+              <span className="relative z-10 bg-linear-to-r from-primary via-blue-500 to-purple-500 bg-clip-text text-transparent">
                 Something Amazing?
               </span>
             </span>
@@ -113,7 +113,7 @@ export function LandingCTA() {
             <Button
               size="lg"
               asChild
-              className="group h-14 min-w-[200px] bg-gradient-to-r from-primary to-primary/90 px-8 text-base shadow-lg shadow-primary/25 transition-all hover:shadow-xl hover:shadow-primary/30"
+              className="group h-14 min-w-[200px] bg-linear-to-r from-primary to-primary/90 px-8 text-base shadow-lg shadow-primary/25 transition-all hover:shadow-xl hover:shadow-primary/30"
             >
               <Link href="/chat">
                 <RocketIcon className="mr-2 size-5" />
@@ -180,7 +180,7 @@ export function LandingCTA() {
                 viewport={{ once: true }}
               >
                 <Link
-                  href={link.href}
+                  href={link.href as any}
                   className="group flex h-full flex-col rounded-2xl border border-border bg-card/50 p-6 backdrop-blur-sm transition-all hover:border-primary/50 hover:bg-card hover:shadow-lg"
                 >
                   <div className="mb-4 flex size-12 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">

app/components/navbar.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import Link from "next/link"
+import type { Route } from "next"
 import { useState, useEffect, useCallback } from "react"
 import { usePathname } from "next/navigation"
 import { Button } from "@/ui/button"
@@ -156,7 +157,7 @@ export function Navbar() {
             className="group flex items-center gap-2.5 transition-opacity hover:opacity-80"
             aria-label="AgentStack Home"
           >
-            <div className="flex size-9 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-primary/80 shadow-sm transition-transform group-hover:scale-105">
+            <div className="flex size-9 items-center justify-center rounded-lg bg-linear-to-br from-primary to-primary/80 shadow-sm transition-transform group-hover:scale-105">
               <span className="font-bold text-primary-foreground text-sm">A</span>
             </div>
             <span className="font-semibold text-foreground text-lg">AgentStack</span>
@@ -189,7 +190,7 @@ export function Navbar() {
                     {link.items.map((item) => (
                       <DropdownMenuItem key={item.label} asChild>
                         <Link
-                          href={item.href}
+                          href={item.href as Route}
                           className={`flex items-start gap-3 rounded-md p-2 transition-colors ${isActiveLink(item.href)
                               ? "bg-primary/10 text-primary"
                               : ""
@@ -220,7 +221,7 @@ export function Navbar() {
                       : "text-muted-foreground hover:text-foreground"
                     }`}
                 >
-                  <Link href={link.href}>{link.label}</Link>
+                  <Link href={link.href as Route}>{link.label}</Link>
                 </Button>
               )
             )}
@@ -236,7 +237,7 @@ export function Navbar() {
           <Button
             size="sm"
             asChild
-            className="bg-gradient-to-r from-primary to-primary/90 shadow-sm transition-all hover:shadow-md"
+            className="bg-linear-to-r from-primary to-primary/90 shadow-sm transition-all hover:shadow-md"
           >
             <Link href="/chat">Get Started</Link>
           </Button>
@@ -288,7 +289,7 @@ export function Navbar() {
                     {link.items.map((item) => (
                       <Link
                         key={item.label}
-                        href={item.href}
+                        href={item.href as Route}
                         className={`flex items-center gap-3 rounded-lg p-3 transition-colors ${isActiveLink(item.href)
                             ? "bg-primary/10 text-primary"
                             : "hover:bg-accent"
@@ -312,7 +313,7 @@ export function Navbar() {
               ) : (
                 <Link
                   key={link.label}
-                  href={link.href}
+                  href={link.href as Route}
                   className={`rounded-lg px-3 py-2.5 text-base font-medium transition-colors ${isActiveLink(link.href)
                       ? "bg-primary/10 text-primary"
                       : "hover:bg-accent"
@@ -341,7 +342,7 @@ export function Navbar() {
               <Button
                 size="lg"
                 asChild
-                className="w-full bg-gradient-to-r from-primary to-primary/90"
+                className="w-full bg-linear-to-r from-primary to-primary/90"
                 tabIndex={mobileOpen ? 0 : -1}
               >
                 <Link href="/chat" onClick={() => setMobileOpen(false)}>

app/components/networks-list.tsx

@@ -84,7 +84,7 @@ export function NetworksList() {
             viewport={{ once: true }}
           >
             <Link
-              href={`/networks/${network.id}`}
+              href={{ pathname: '/networks/[id]', query: { id: network.id } }}
               className="group flex h-full flex-col rounded-2xl border border-border bg-card p-8 transition-all hover:border-primary/50 hover:shadow-lg"
             >
               <div className="mb-6 flex items-start justify-between">

app/components/tools-list.tsx

@@ -403,8 +403,8 @@ export function ToolsList() {
               transition={{ duration: 0.3, delay: index * 0.05 }}
             >
               <Link
-                href={`/docs/tools/${tool.id}`}
-                className="group flex h-full flex-col rounded-xl border border-primary/20 bg-gradient-to-br from-primary/5 to-transparent p-5 transition-all hover:border-primary/40 hover:shadow-lg hover:shadow-primary/5"
+                href={{ pathname: '/docs/tools/[id]', query: { id: tool.id } }}
+                className="group flex h-full flex-col rounded-xl border border-primary/20 bg-linear-to-br from-primary/5 to-transparent p-5 transition-all hover:border-primary/40 hover:shadow-lg hover:shadow-primary/5"
               >
                 <div className="mb-3 flex items-center justify-between">
                   <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
@@ -476,7 +476,7 @@ export function ToolsList() {
               transition={{ duration: 0.3, delay: index * 0.02 }}
             >
               <Link
-                href={`/docs/tools/${tool.id}`}
+                href={{ pathname: '/docs/tools/[id]', query: { id: tool.id } }}
                 className="group flex h-full flex-col rounded-xl border border-border bg-card p-5 transition-all hover:border-primary/50 hover:shadow-lg"
               >
                 <div className="mb-4 flex items-start justify-between">
@@ -565,7 +565,7 @@ export function ToolsList() {
         whileInView={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5 }}
         viewport={{ once: true }}
-        className="mt-20 rounded-2xl border border-border bg-gradient-to-br from-primary/5 via-transparent to-transparent p-8 text-center lg:p-12"
+        className="mt-20 rounded-2xl border border-border bg-linear-to-br from-primary/5 via-transparent to-transparent p-8 text-center lg:p-12"
       >
         <div className="mx-auto max-w-2xl">
           <div className="mb-4 inline-flex size-14 items-center justify-center rounded-full bg-primary/10">
@@ -580,13 +580,13 @@ export function ToolsList() {
           </p>
           <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
             <Button size="lg" asChild>
-              <Link href="/docs/tools/custom">
+              <Link href={{ pathname: "/docs/tools/custom" }}>
                 Build Custom Tool
                 <ArrowRightIcon className="ml-2 size-4" />
               </Link>
             </Button>
             <Button variant="outline" size="lg" asChild>
-              <Link href="/contact">Request a Tool</Link>
+              <Link href={{ pathname: "/contact" }}>Request a Tool</Link>
             </Button>
           </div>
         </div>