Add GitHub star count to site header (#673)

* Add GitHub star count to site header

Fetches star count from GitHub API via /api/github-stars with 5-minute
server-side caching (ISR + stale-while-revalidate). Shows formatted
count (e.g. "2.2k") next to the GitHub link in both desktop nav and
mobile drawer.

* Move star count to separate badge left of download button

GitHub icon + formatted count as its own clickable element in the
right header section, separate from the nav links. Desktop only.

* Center GitHub stars badge vertically in header

* Add right padding to GitHub stars badge

web/app/api/github-stars/route.ts

@@ -0,0 +1,33 @@
+import { NextResponse } from "next/server";
+
+export const revalidate = 300; // ISR: regenerate every 5 minutes
+
+export async function GET() {
+  try {
+    const res = await fetch(
+      "https://api.github.com/repos/manaflow-ai/cmux",
+      {
+        headers: { Accept: "application/vnd.github.v3+json" },
+        next: { revalidate: 300 },
+      }
+    );
+
+    if (!res.ok) {
+      return NextResponse.json({ stars: null }, { status: 502 });
+    }
+
+    const data = await res.json();
+    const stars: number = data.stargazers_count;
+
+    return NextResponse.json(
+      { stars },
+      {
+        headers: {
+          "Cache-Control": "public, s-maxage=300, stale-while-revalidate=600",
+        },
+      }
+    );
+  } catch {
+    return NextResponse.json({ stars: null }, { status: 502 });
+  }
+}

web/app/components/github-stars.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import posthog from "posthog-js";
+
+function formatStars(count: number): string {
+  if (count >= 1000) {
+    const k = count / 1000;
+    return k % 1 === 0 ? `${k}k` : `${k.toFixed(1)}k`;
+  }
+  return String(count);
+}
+
+export function GitHubStarsBadge() {
+  const [stars, setStars] = useState<number | null>(null);
+
+  useEffect(() => {
+    fetch("/api/github-stars")
+      .then((r) => r.json())
+      .then((d) => {
+        if (d.stars != null) setStars(d.stars);
+      })
+      .catch(() => {});
+  }, []);
+
+  if (stars === null) return null;
+
+  return (
+    <a
+      href="https://github.com/manaflow-ai/cmux"
+      target="_blank"
+      rel="noopener noreferrer"
+      onClick={() =>
+        posthog.capture("cmuxterm_github_clicked", { location: "stars_badge" })
+      }
+      className="inline-flex items-center gap-1.5 pr-2 text-sm text-muted hover:text-foreground transition-colors"
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
+      </svg>
+      <span className="text-xs tabular-nums">{formatStars(stars)}</span>
+    </a>
+  );
+}

web/app/components/site-header.tsx

@@ -5,6 +5,7 @@ import posthog from "posthog-js";
 import { NavLinks } from "./nav-links";
 import { DownloadButton } from "./download-button";
 import { ThemeToggle } from "../theme";
+import { GitHubStarsBadge } from "./github-stars";
 import {
   useMobileDrawer,
   MobileDrawerOverlay,
@@ -55,8 +56,11 @@ export function SiteHeader({
             <NavLinks />
           </nav>
 
-          {/* Right: Download + theme + mobile */}
-          <div className="flex flex-1 items-center justify-end gap-1 min-w-0">
+          {/* Right: GitHub stars + Download + theme + mobile */}
+          <div className="flex flex-1 items-center justify-end gap-3 min-w-0">
+            <div className="hidden md:flex items-center">
+              <GitHubStarsBadge />
+            </div>
             <div className="hidden md:block">
               <DownloadButton size="sm" location="navbar" />
             </div>