@desplega.ai/agent-swarm 1.20.0 → 1.49.0

package/landing/src/app/blog/openfort-hackathon/page.tsx

@@ -0,0 +1,863 @@
+import type { Metadata } from "next";
+import {
+  ArrowLeft,
+  Calendar,
+  Clock,
+  Zap,
+  Wallet,
+  ShoppingCart,
+  Ghost,
+  ArrowRight,
+  ExternalLink,
+  Users,
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { Navbar } from "@/components/navbar";
+import { Footer } from "@/components/footer";
+
+export const metadata: Metadata = {
+  title:
+    "Openfort Hackathon: Teaching Agents to Pay — Agent Swarm Blog",
+  description:
+    "We shipped x402 payment capability into Agent Swarm — AI agents can now autonomously pay for API services using crypto. Built with Openfort managed wallets on Base mainnet.",
+  authors: [{ name: "Agent Swarm", url: "https://agent-swarm.dev" }],
+  openGraph: {
+    title: "Openfort Hackathon: Teaching Agents to Pay",
+    description:
+      "We shipped x402 payment capability into Agent Swarm — AI agents can now autonomously pay for API services using crypto.",
+    url: "https://agent-swarm.dev/blog/openfort-hackathon",
+    siteName: "Agent Swarm",
+    type: "article",
+    publishedTime: "2026-02-28T00:00:00Z",
+    images: [
+      {
+        url: "https://agent-swarm.dev/og-image.png",
+        width: 1200,
+        height: 630,
+        alt: "Openfort Hackathon: Teaching Agents to Pay — Agent Swarm",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Openfort Hackathon: Teaching Agents to Pay",
+    description:
+      "We shipped x402 payment capability into Agent Swarm — AI agents can now autonomously pay for API services using crypto.",
+    images: ["https://agent-swarm.dev/og-image.png"],
+  },
+  alternates: {
+    canonical: "/blog/openfort-hackathon",
+  },
+};
+
+function SectionIcon({
+  icon: Icon,
+  color,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  color: string;
+}) {
+  return (
+    <div
+      className={`w-9 h-9 rounded-xl flex items-center justify-center shrink-0 ${color}`}
+    >
+      <Icon className="w-4.5 h-4.5" />
+    </div>
+  );
+}
+
+function CodeBlock({
+  filename,
+  children,
+}: {
+  filename?: string;
+  children: string;
+}) {
+  return (
+    <div className="rounded-xl overflow-hidden my-6 border border-zinc-200">
+      {filename && (
+        <div className="bg-zinc-900 px-4 py-2 flex items-center gap-2 border-b border-zinc-800">
+          <div className="flex gap-1.5">
+            <div className="w-2.5 h-2.5 rounded-full bg-zinc-700" />
+            <div className="w-2.5 h-2.5 rounded-full bg-zinc-700" />
+            <div className="w-2.5 h-2.5 rounded-full bg-zinc-700" />
+          </div>
+          <span className="text-[11px] text-zinc-500 font-mono ml-2">
+            {filename}
+          </span>
+        </div>
+      )}
+      <pre className="bg-zinc-950 text-zinc-300 p-4 text-[13px] font-mono overflow-x-auto leading-relaxed">
+        {children}
+      </pre>
+    </div>
+  );
+}
+
+function Callout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="my-6 rounded-xl bg-amber-50/80 border border-amber-200/60 px-5 py-4">
+      <div className="text-[14px] text-amber-900 leading-relaxed">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function FlowStep({
+  step,
+  label,
+  isLast,
+}: {
+  step: number;
+  label: string;
+  isLast?: boolean;
+}) {
+  return (
+    <div>
+      <div className="flex items-center gap-3 py-2">
+        <div className="w-7 h-7 rounded-full bg-amber-100 text-amber-800 flex items-center justify-center text-[12px] font-bold shrink-0">
+          {step}
+        </div>
+        <p className="text-[14px] text-zinc-700">{label}</p>
+      </div>
+      {!isLast && (
+        <div className="ml-3.5 h-3 border-l border-dashed border-zinc-200" />
+      )}
+    </div>
+  );
+}
+
+export default function OpenfortHackathonPost() {
+  return (
+    <main className="min-h-screen bg-white">
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "BlogPosting",
+            headline: "Openfort Hackathon: Teaching Agents to Pay",
+            description:
+              "We shipped x402 payment capability into Agent Swarm — AI agents can now autonomously pay for API services using crypto. Built with Openfort managed wallets on Base mainnet.",
+            datePublished: "2026-02-28T00:00:00Z",
+            dateModified: "2026-02-28T00:00:00Z",
+            author: {
+              "@type": "Organization",
+              name: "Agent Swarm",
+              url: "https://agent-swarm.dev",
+            },
+            publisher: {
+              "@type": "Organization",
+              name: "Agent Swarm",
+              url: "https://agent-swarm.dev",
+              logo: {
+                "@type": "ImageObject",
+                url: "https://agent-swarm.dev/logo.png",
+              },
+            },
+            mainEntityOfPage: {
+              "@type": "WebPage",
+              "@id": "https://agent-swarm.dev/blog/openfort-hackathon",
+            },
+            image: "https://agent-swarm.dev/og-image.png",
+          }),
+        }}
+      />
+      <Navbar />
+
+      <article className="mx-auto max-w-3xl px-6 pt-32 pb-20">
+        {/* Back link */}
+        <Link
+          href="/blog"
+          className="inline-flex items-center gap-1.5 text-[13px] text-zinc-400 hover:text-zinc-700 transition-colors mb-8"
+        >
+          <ArrowLeft className="w-3.5 h-3.5" />
+          Back to Blog
+        </Link>
+
+        {/* Header */}
+        <header className="mb-12">
+          <div className="flex items-center gap-3 mb-4">
+            <span className="flex items-center gap-1.5 text-[13px] text-zinc-400">
+              <Calendar className="w-3.5 h-3.5" />
+              February 28, 2026
+            </span>
+            <span className="text-zinc-300">&middot;</span>
+            <span className="flex items-center gap-1.5 text-[13px] text-zinc-400">
+              <Clock className="w-3.5 h-3.5" />
+              8 min read
+            </span>
+          </div>
+
+          <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-zinc-900 leading-tight mb-4">
+            Openfort Hackathon:{" "}
+            <span className="gradient-text">Teaching Agents to Pay</span>
+          </h1>
+
+          <p className="text-lg text-zinc-500 leading-relaxed max-w-2xl">
+            We shipped x402 payment capability into Agent Swarm. Our AI agents
+            can now autonomously pay for API services using crypto — no human
+            approval needed for each transaction. Here&apos;s the full story of
+            how we built it in a day.
+          </p>
+
+          <div className="flex gap-2 flex-wrap mt-6">
+            {["x402", "Openfort", "Base", "USDC", "hackathon"].map((tag) => (
+              <span
+                key={tag}
+                className="text-[11px] font-medium px-2.5 py-1 rounded-full bg-zinc-100 text-zinc-500"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        </header>
+
+        {/* ---- Content ---- */}
+        <div className="prose-custom">
+          {/* Intro */}
+          <p className="text-[15px] text-zinc-600 leading-relaxed mb-6">
+            Imagine an AI agent that can browse an API catalog, find a service it
+            needs, pay for it, and use the result — all without a human touching
+            a wallet. That&apos;s what we built today.
+          </p>
+          <p className="text-[15px] text-zinc-600 leading-relaxed mb-10">
+            During the Openfort hackathon, we integrated the{" "}
+            <a
+              href="https://www.x402.org/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-amber-700 hover:text-amber-900 font-medium underline underline-offset-2 decoration-amber-300 transition-colors"
+            >
+              x402 protocol
+            </a>{" "}
+            with{" "}
+            <a
+              href="https://www.openfort.xyz/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-amber-700 hover:text-amber-900 font-medium underline underline-offset-2 decoration-amber-300 transition-colors"
+            >
+              Openfort
+            </a>{" "}
+            managed wallets, giving our agent swarm the ability to make
+            autonomous crypto payments. The result: PR #108, shipped as
+            v1.31.0.
+          </p>
+
+          {/* Section 1: x402 */}
+          <section className="mb-14">
+            <div className="flex items-center gap-3 mb-6">
+              <SectionIcon
+                icon={Zap}
+                color="bg-amber-100 text-amber-700"
+              />
+              <h2 className="text-2xl font-bold text-zinc-900">
+                x402: HTTP-Native Payments
+              </h2>
+            </div>
+
+            <p className="text-[15px] text-zinc-600 leading-relaxed mb-4">
+              x402 is beautifully simple. It extends HTTP with a payment layer
+              using status code 402 — the one the web reserved for &ldquo;Payment
+              Required&rdquo; but never used. Until now.
+            </p>
+
+            <div className="rounded-xl bg-zinc-50 border border-zinc-200 p-5 my-6">
+              <div className="flex items-center gap-2 mb-4">
+                <Wallet className="w-4 h-4 text-amber-700" />
+                <h3 className="text-[15px] font-semibold text-zinc-900">
+                  The x402 Flow
+                </h3>
+              </div>
+              <div className="space-y-0">
+                <FlowStep step={1} label="Agent sends a request to an API" />
+                <FlowStep
+                  step={2}
+                  label="Server responds with HTTP 402 — includes price, token, and chain"
+                />
+                <FlowStep
+                  step={3}
+                  label="Agent signs an EIP-712 payment authorization (USDC on Base)"
+                />
+                <FlowStep
+                  step={4}
+                  label="Agent retries with X-PAYMENT header attached"
+                />
+                <FlowStep
+                  step={5}
+                  label="Server validates the payment, settles on-chain, returns 200"
+                  isLast
+                />
+              </div>
+            </div>
+
+            <p className="text-[15px] text-zinc-600 leading-relaxed mb-4">
+              We integrated this with{" "}
+              <strong className="text-zinc-800">Openfort managed wallets</strong>{" "}
+              — EOA wallets running inside Google Cloud&apos;s Trusted Execution
+              Environment (TEE). The private keys never leave the secure enclave.
+            </p>
+
+            <Callout>
+              <strong>Key stat:</strong> ~130ms signing latency per transaction.
+              The wallet address on Base mainnet:{" "}
+              <a
+                href="https://basescan.org/address/0x69436bfe16c82a9a5ef74fd3de634c9c822c271b"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[12px] font-mono bg-amber-100/60 px-1.5 py-0.5 rounded text-amber-800 hover:text-amber-950 underline underline-offset-2 decoration-amber-300"
+              >
+                0x6943...271b
+              </a>
+              . Payments in USDC.
+            </Callout>
+
+            <p className="text-[15px] text-zinc-600 leading-relaxed">
+              The x402 SDK&apos;s{" "}
+              <code className="text-[13px] font-mono bg-zinc-100 px-1.5 py-0.5 rounded">
+                ClientEvmSigner
+              </code>{" "}
+              interface is minimal — just{" "}
+              <code className="text-[13px] font-mono bg-zinc-100 px-1.5 py-0.5 rounded">
+                address
+              </code>{" "}
+              +{" "}
+              <code className="text-[13px] font-mono bg-zinc-100 px-1.5 py-0.5 rounded">
+                signTypedData
+              </code>
+              . We wrote a thin adapter for the Openfort signer and it worked on
+              first try.
+            </p>
+
+            <CodeBlock filename="x402-openfort-signer.ts">
+{`// The adapter is surprisingly simple
+const signer: ClientEvmSigner = {
+  address: wallet.address,
+  signTypedData: async (domain, types, value) => {
+    // Openfort signs using P-256 ECDSA keys
+    // with per-request JWTs for security
+    return openfort.signTypedData({
+      domain, types, value,
+      chain: "base",  // Dynamic chain resolution
+    });
+  },
+};
+
+const client = createX402Client({ signer });`}
+            </CodeBlock>
+          </section>
+
+          {/* Section 2: Technical Learnings */}
+          <section className="mb-14">
+            <div className="flex items-center gap-3 mb-6">
+              <SectionIcon
+                icon={Wallet}
+                color="bg-blue-100 text-blue-700"
+              />
+              <h2 className="text-2xl font-bold text-zinc-900">
+                Technical Deep Dive
+              </h2>
+            </div>
+
+            <p className="text-[15px] text-zinc-600 leading-relaxed mb-6">
+              We hit some interesting edge cases along the way. Here&apos;s what
+              we learned:
+            </p>
+
+            <div className="space-y-4 mb-6">
+              {[
+                {
+                  title: "EOAs, not smart accounts",
+                  body: "Openfort's backend wallets are EOAs (externally owned accounts), not smart contract wallets. This is critical for EIP-3009 transferWithAuthorization compatibility — the x402 facilitator needs a standard signature from an EOA to settle payments.",
+                },
+                {
+                  title: "Chain resolution bug",
+                  body: "We found and fixed a bug where the signer was hardcoded to Base Sepolia testnet instead of dynamically resolving the chain from the 402 response. In production on mainnet, this would silently fail — the signature would be valid but for the wrong chain.",
+                },
+                {
+                  title: "P-256 ECDSA + per-request JWTs",
+                  body: "Openfort uses P-256 ECDSA keys with per-request JWTs for security. Each signing request is authenticated individually, so even if a JWT is compromised, it can only be used for a single operation.",
+                },
+              ].map((item) => (
+                <div
+                  key={item.title}
+                  className="rounded-xl bg-zinc-50 border border-zinc-200 p-5"
+                >
+                  <h3 className="text-[15px] font-semibold text-zinc-900 mb-2">
+                    {item.title}
+                  </h3>
+                  <p className="text-[14px] text-zinc-600 leading-relaxed">
+                    {item.body}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          {/* Section 3: omghost.xyz */}
+          <section className="mb-14">
+            <div className="flex items-center gap-3 mb-6">
+              <SectionIcon
+                icon={Ghost}
+                color="bg-purple-100 text-purple-700"
+              />
+              <h2 className="text-2xl font-bold text-zinc-900">
+                omghost.xyz: Agents as Customers
+              </h2>
+            </div>
+
+            <p className="text-[15px] text-zinc-600 leading-relaxed mb-4">
+              To test the full loop, we built{" "}
+              <a
+                href="https://omghost.xyz"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-amber-700 hover:text-amber-900 font-medium underline underline-offset-2 decoration-amber-300 transition-colors"
+              >
+                omghost.xyz
+              </a>{" "}
+              — an AI-powered SVG ghost logo generator. The idea: a product where
+              AI agents are the primary customers.
+            </p>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 my-6">
+              <div className="rounded-xl bg-zinc-50 border border-zinc-200 p-4">
+                <h3 className="text-[13px] font-semibold text-zinc-500 uppercase tracking-wider mb-3">
+                  Stack
+                </h3>
+                <ul className="space-y-1.5">
+                  {[
+                    "Next.js 16",
+                    "Prisma",
+                    "Tailwind CSS 4",
+                    "Vercel Workflows",
+                  ].map((item) => (
+                    <li
+                      key={item}
+                      className="text-[14px] text-zinc-700 flex items-center gap-2"
+                    >
+                      <span className="w-1 h-1 rounded-full bg-amber-500 shrink-0" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div className="rounded-xl bg-zinc-50 border border-zinc-200 p-4">
+                <h3 className="text-[13px] font-semibold text-zinc-500 uppercase tracking-wider mb-3">
+                  Ghost Styles
+                </h3>
+                <div className="flex flex-wrap gap-1.5">
+                  {[
+                    "Classic",
+                    "Chubby",
+                    "Outline",
+                    "Dot",
+                    "Pixel",
+                    "Sharp",
+                    "Drip",
+                    "Minimal",
+                  ].map((style) => (
+                    <span
+                      key={style}
+                      className="text-[12px] font-medium px-2.5 py-1 rounded-full bg-white border border-zinc-200 text-zinc-600"
+                    >
+                      {style}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <p className="text-[15px] text-zinc-600 leading-relaxed mb-4">
+              Each logo generation costs $0.30 via x402. The landing page
+              features a color theme chooser, API documentation, and an
+              interactive style preview. Ez.- designed the visual identity and
+              style definitions for each ghost variant.
+            </p>
+
+            <Callout>
+              <strong>API-first design:</strong> omghost.xyz exposes a simple
+              POST endpoint. Call it, pay via x402, get back an SVG. No accounts,
+              no API keys, no billing dashboard. Just HTTP + money.
+            </Callout>
+          </section>
+
+          {/* Section 4: The Purchase — Success */}
+          <section className="mb-14">
+            <div className="flex items-center gap-3 mb-6">
+              <SectionIcon
+                icon={ShoppingCart}
+                color="bg-emerald-100 text-emerald-700"
+              />
+              <h2 className="text-2xl font-bold text-zinc-900">
+                The Purchase: Loop Closed
+              </h2>
+            </div>
+
+            <p className="text-[15px] text-zinc-600 leading-relaxed mb-4">
+              The goal was poetic: use our x402-enabled agent to buy an SVG from
+              omghost.xyz — our own product buying from itself. Agent-to-agent
+              commerce, closing the loop.
+            </p>
+
+            <p className="text-[15px] text-zinc-600 leading-relaxed mb-4">
+              And it worked. After switching the server-side facilitator to{" "}
+              <a
+                href="https://facilitator.payai.network"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-amber-700 hover:text-amber-900 font-medium underline underline-offset-2 decoration-amber-300 transition-colors"
+              >
+                facilitator.payai.network
+              </a>{" "}
+              (which supports Base mainnet without CDP credentials), the agent
+              autonomously purchased a &ldquo;Pixel Icons&rdquo; ghost logo for
+              the Desplega brand — paying $0.10 USDC on Base mainnet.
+            </p>
+
+            {/* Generated SVG Display */}
+            <div className="my-8 rounded-xl border border-zinc-200 overflow-hidden">
+              <div className="bg-zinc-900 px-4 py-2.5 flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Ghost className="w-4 h-4 text-purple-400" />
+                  <span className="text-[12px] text-zinc-400 font-mono">
+                    Pixel Icons &mdash; Desplega
+                  </span>
+                </div>
+                <span className="text-[11px] text-zinc-600 font-mono">
+                  $0.10 USDC
+                </span>
+              </div>
+              <div className="bg-zinc-950 p-8 flex items-center justify-center">
+                <Image
+                  src="/omghost-openfort.svg"
+                  alt="Openfort ghost logo in Pixel Icons style, purchased via x402"
+                  width={320}
+                  height={320}
+                  className="max-w-full h-auto max-h-80"
+                  unoptimized
+                />
+              </div>
+              <div className="bg-zinc-50 px-4 py-2.5 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-1.5 text-[11px] text-zinc-500 font-mono">
+                <a
+                  href="https://basescan.org/tx/0xcc1803cc29ca20f7c74a286b9e6721173027d81ce64269c0d19f8afeec128b2e"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-zinc-800 underline underline-offset-2 decoration-zinc-300 transition-colors"
+                >
+                  tx: 0xcc18...8b2e
+                </a>
+                <a
+                  href="https://basescan.org/address/0x69436bfe16c82a9a5ef74fd3de634c9c822c271b"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-zinc-800 underline underline-offset-2 decoration-zinc-300 transition-colors"
+                >
+                  wallet: 0x6943...271b
+                </a>
+                <span>Base mainnet</span>
+              </div>
+            </div>
+
+            <div className="rounded-xl bg-zinc-50 border border-zinc-200 p-5 my-6">
+              <div className="flex items-start gap-3">
+                <div className="w-7 h-7 rounded-full bg-emerald-100 text-emerald-800 flex items-center justify-center shrink-0 mt-0.5">
+                  <ArrowRight className="w-3.5 h-3.5" />
+                </div>
+                <div>
+                  <h3 className="text-[15px] font-semibold text-zinc-900 mb-1">
+                    The journey
+                  </h3>
+                  <p className="text-[14px] text-zinc-600 leading-relaxed">
+                    We initially hit a facilitator mismatch — x402.org only
+                    supports Base Sepolia testnet, and we needed mainnet. The
+                    Coinbase CDP facilitator required API credentials. The
+                    solution:{" "}
+                    <code className="text-[12px] font-mono bg-zinc-100 px-1.5 py-0.5 rounded">
+                      facilitator.payai.network
+                    </code>
+                    , a community facilitator that supports Base mainnet without
+                    any API credentials. One env var change and the full loop
+                    worked.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <CodeBlock filename="x402-omghost-buy.ts (output)">
+{`=== x402 omghost.xyz — Buy SVG Icon ===
+
+Step 1: Creating x402 payment client...
+  Signer: openfort
+  Wallet: 0x69436bfe16c82a9a5ef74fd3de634c9c822c271b
+  Network: eip155:8453
+
+Step 2: Generating "Pixel Icons" icon for "Desplega"
+  Response status: 200
+  Job ID: cmm6mosqq000004l2groe1ldo
+
+Step 3: Payment summary
+  Total spent: $0.1000
+
+Step 4: Polling for job status...
+  Poll 10: status=completed
+  Token: 44d2b0e5-858d-4808-b96e-b01e6f3afedb
+
+=== PURCHASE COMPLETE ===
+SVG saved (5910 characters)`}
+            </CodeBlock>
+          </section>
+
+          {/* Section 5: What This Means */}
+          <section className="mb-14">
+            <h2 className="text-2xl font-bold text-zinc-900 mb-6">
+              What This Means
+            </h2>
+
+            <p className="text-[15px] text-zinc-600 leading-relaxed mb-6">
+              Today&apos;s work unlocked a fundamental new capability: AI agents
+              can now pay for services autonomously. Not through
+              pre-provisioned credits or API keys — through real, on-chain
+              payments that settle in USDC.
+            </p>
+
+            <div className="space-y-4 mb-6">
+              {[
+                {
+                  title: "Agent-to-agent commerce",
+                  body: "When agents can pay, they can become each other's customers. One agent's output becomes another agent's input, with payments settling automatically.",
+                },
+                {
+                  title: "No billing infrastructure needed",
+                  body: "x402 eliminates the need for API keys, usage tracking, invoicing, and payment processing. The payment is the request. HTTP status codes handle the entire flow.",
+                },
+                {
+                  title: "Proven end-to-end: omghost.xyz",
+                  body: "Our agent autonomously purchased a ghost logo from omghost.xyz — $0.10 USDC on Base mainnet. No dashboard, no account creation, no human approval. The agent detected the 402, signed the payment, and received the SVG. Full loop closed.",
+                },
+              ].map((item) => (
+                <div
+                  key={item.title}
+                  className="flex gap-4 items-start"
+                >
+                  <div className="w-1.5 h-1.5 rounded-full bg-amber-500 mt-2 shrink-0" />
+                  <div>
+                    <h3 className="text-[15px] font-semibold text-zinc-900 mb-1">
+                      {item.title}
+                    </h3>
+                    <p className="text-[14px] text-zinc-500 leading-relaxed">
+                      {item.body}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <p className="text-[15px] text-zinc-600 leading-relaxed">
+              This is a building block. x402 + Openfort gives agents a wallet and
+              the protocol to use it. What gets built on top of that — marketplaces,
+              service networks, autonomous procurement — is the interesting part.
+            </p>
+          </section>
+
+          {/* Section 6: Built by the Swarm */}
+          <section className="mb-14">
+            <div className="flex items-center gap-3 mb-6">
+              <SectionIcon
+                icon={Users}
+                color="bg-zinc-800 text-zinc-100"
+              />
+              <h2 className="text-2xl font-bold text-zinc-900">
+                Built by the Swarm
+              </h2>
+            </div>
+
+            <p className="text-[15px] text-zinc-600 leading-relaxed mb-4">
+              Here&apos;s the part we didn&apos;t plan: the swarm that built
+              x402 also documented the entire hack in real time. Research,
+              implementation, code review, debugging, purchasing, and this blog
+              post — all executed by a coordinated team of AI agents, from first
+              commit to final paragraph.
+            </p>
+
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 my-6">
+              {[
+                { value: "25", label: "PRs" },
+                { value: "44", label: "Commits" },
+                { value: "5", label: "Agents" },
+                { value: "100+", label: "Tasks" },
+              ].map(({ value, label }) => (
+                <div
+                  key={label}
+                  className="rounded-xl bg-zinc-50 border border-zinc-200 p-4 text-center"
+                >
+                  <div className="text-2xl font-bold text-zinc-900">
+                    {value}
+                  </div>
+                  <div className="text-[12px] text-zinc-500 mt-0.5">
+                    {label}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <div className="rounded-xl bg-zinc-50 border border-zinc-200 p-5 my-6">
+              <h3 className="text-[15px] font-semibold text-zinc-900 mb-3">
+                The timeline
+              </h3>
+              <div className="space-y-2.5 text-[14px] text-zinc-600">
+                <div className="flex gap-3">
+                  <span className="text-zinc-400 font-mono shrink-0 w-14">
+                    09:00
+                  </span>
+                  <span>
+                    <strong className="text-zinc-800">Researcher</strong> dives
+                    into x402 protocol specs and Openfort SDK docs
+                  </span>
+                </div>
+                <div className="flex gap-3">
+                  <span className="text-zinc-400 font-mono shrink-0 w-14">
+                    10:30
+                  </span>
+                  <span>
+                    <strong className="text-zinc-800">Picateclas</strong>{" "}
+                    implements the x402 payment module, Openfort signer, and 34
+                    unit tests (PR #108)
+                  </span>
+                </div>
+                <div className="flex gap-3">
+                  <span className="text-zinc-400 font-mono shrink-0 w-14">
+                    12:00
+                  </span>
+                  <span>
+                    <strong className="text-zinc-800">Reviewer</strong> reviews
+                    PR #108 — catches dead config, exposed keys, TOCTOU race
+                  </span>
+                </div>
+                <div className="flex gap-3">
+                  <span className="text-zinc-400 font-mono shrink-0 w-14">
+                    14:00
+                  </span>
+                  <span>
+                    x402 merged as v1.31.0. Facilitator debugging begins —
+                    x402.org, Coinbase CDP, finally{" "}
+                    <code className="text-[12px] font-mono bg-zinc-100 px-1 rounded">
+                      facilitator.payai.network
+                    </code>
+                  </span>
+                </div>
+                <div className="flex gap-3">
+                  <span className="text-zinc-400 font-mono shrink-0 w-14">
+                    17:30
+                  </span>
+                  <span>
+                    <strong className="text-zinc-800">Picateclas</strong> buys a
+                    ghost logo from omghost.xyz — $0.10 USDC, loop closed
+                  </span>
+                </div>
+                <div className="flex gap-3">
+                  <span className="text-zinc-400 font-mono shrink-0 w-14">
+                    18:00
+                  </span>
+                  <span>
+                    Blog post written, updated with SVG and on-chain proof, swarm
+                    metrics published — all by the agents
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <p className="text-[15px] text-zinc-600 leading-relaxed mb-4">
+              Five agents collaborated:{" "}
+              <strong className="text-zinc-800">Lead</strong> orchestrated tasks
+              and triaged Slack messages.{" "}
+              <strong className="text-zinc-800">Researcher</strong> produced the
+              protocol analysis.{" "}
+              <strong className="text-zinc-800">Picateclas</strong> wrote the
+              code, ran the tests, created the PRs.{" "}
+              <strong className="text-zinc-800">Reviewer</strong> caught bugs
+              before they shipped.{" "}
+              <strong className="text-zinc-800">Jackknife</strong> handled the
+              E2E testing infrastructure.
+            </p>
+
+            <p className="text-[15px] text-zinc-600 leading-relaxed">
+              The swarm didn&apos;t just build the feature — it wrote the blog
+              post you&apos;re reading. Every section was authored by agents who
+              were there when it happened. That&apos;s the real demo: not just
+              agents that can pay, but agents that can ship an entire project
+              from research to production to documentation, coordinated through
+              a shared task queue and a Slack thread.
+            </p>
+          </section>
+
+          {/* Links */}
+          <footer className="border-t border-zinc-200 pt-8 mt-14">
+            <h3 className="text-[13px] font-semibold text-zinc-500 uppercase tracking-wider mb-4">
+              Links
+            </h3>
+            <div className="flex gap-2.5 flex-wrap">
+              {[
+                { href: "https://www.x402.org/", label: "x402 Protocol" },
+                { href: "https://www.openfort.xyz/", label: "Openfort" },
+                { href: "https://omghost.xyz", label: "omghost.xyz" },
+                {
+                  href: "https://facilitator.payai.network",
+                  label: "PayAI Facilitator",
+                },
+                {
+                  href: "https://basescan.org/address/0x69436bfe16c82a9a5ef74fd3de634c9c822c271b",
+                  label: "Wallet on Basescan",
+                },
+                {
+                  href: "https://basescan.org/tx/0xcc1803cc29ca20f7c74a286b9e6721173027d81ce64269c0d19f8afeec128b2e",
+                  label: "Purchase Tx",
+                },
+                {
+                  href: "https://github.com/desplega-ai/agent-swarm",
+                  label: "Agent Swarm",
+                },
+              ].map(({ href, label }) => (
+                <a
+                  key={href}
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1.5 text-[12px] font-medium text-zinc-500 hover:text-zinc-800 bg-zinc-50 border border-zinc-200 hover:border-zinc-300 rounded-full px-3.5 py-1.5 transition-all"
+                >
+                  <ExternalLink className="w-3 h-3" />
+                  {label}
+                </a>
+              ))}
+            </div>
+
+            <div className="mt-8 pt-6 border-t border-zinc-100">
+              <h3 className="text-[13px] font-semibold text-zinc-500 uppercase tracking-wider mb-3">
+                Related Posts
+              </h3>
+              <Link
+                href="/blog/swarm-metrics"
+                className="group flex items-center gap-3 p-3 -mx-3 rounded-lg hover:bg-zinc-50 transition-colors"
+              >
+                <div className="flex-1 min-w-0">
+                  <p className="text-[14px] font-medium text-zinc-800 group-hover:text-amber-800 transition-colors">
+                    How 6 AI Agents Shipped 44 Tasks in One Weekend
+                  </p>
+                  <p className="text-[12px] text-zinc-500 mt-0.5">
+                    Real metrics from a 48-hour production run of the Agent Swarm.
+                  </p>
+                </div>
+                <ArrowRight className="w-4 h-4 text-zinc-400 group-hover:text-amber-600 shrink-0" />
+              </Link>
+            </div>
+          </footer>
+        </div>
+      </article>
+
+      <Footer />
+    </main>
+  );
+}