feat(badges): implement daily, weekly, monthly badge support

app/api/badges/[metric]/[period]/route.ts

@@ -0,0 +1,129 @@
+import {
+  BADGE_METRICS,
+  BADGE_PERIODS,
+  getModelBadgeStatus,
+  isBadgeMetric,
+  isBadgePeriod,
+  normalizePeriod,
+} from "@/lib/badges";
+
+function escapeXml(value: string): string {
+  return value
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/\"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+function renderBadgeSvg({
+  title,
+  model,
+  detail,
+  footer,
+  accent,
+}: {
+  title: string;
+  model: string;
+  detail: string;
+  footer: string;
+  accent: string;
+}): string {
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="720" height="200" viewBox="0 0 720 200" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="${escapeXml(title)}">
+  <rect width="720" height="200" rx="24" fill="#09090b"/>
+  <rect x="1" y="1" width="718" height="198" rx="23" stroke="#27272a"/>
+  <rect x="28" y="28" width="122" height="28" rx="14" fill="#18181b" stroke="#27272a"/>
+  <text x="89" y="46" text-anchor="middle" fill="#fafafa" font-family="Inter, Arial, sans-serif" font-size="14" font-weight="700">PinchBench</text>
+  <rect x="562" y="28" width="130" height="34" rx="17" fill="${accent}" fill-opacity="0.16" stroke="${accent}"/>
+  <text x="627" y="50" text-anchor="middle" fill="${accent}" font-family="Inter, Arial, sans-serif" font-size="16" font-weight="700">${escapeXml(detail)}</text>
+  <text x="28" y="92" fill="#fafafa" font-family="Inter, Arial, sans-serif" font-size="30" font-weight="800">${escapeXml(title)}</text>
+  <text x="28" y="132" fill="#e4e4e7" font-family="JetBrains Mono, Menlo, monospace" font-size="24" font-weight="700">${escapeXml(model)}</text>
+  <text x="28" y="168" fill="#a1a1aa" font-family="Inter, Arial, sans-serif" font-size="16">${escapeXml(footer)}</text>
+</svg>`;
+}
+
+function badgeResponse(svg: string, status = 200): Response {
+  return new Response(svg, {
+    status,
+    headers: {
+      "Content-Type": "image/svg+xml; charset=utf-8",
+      "Cache-Control": "public, max-age=300, stale-while-revalidate=3600",
+    },
+  });
+}
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ metric: string; period: string }> },
+) {
+  const { metric, period: rawPeriod } = await params;
+  const { searchParams } = new URL(request.url);
+  const model = searchParams.get("model")?.trim();
+
+  if (!isBadgeMetric(metric) || !isBadgePeriod(rawPeriod)) {
+    return badgeResponse(
+      renderBadgeSvg({
+        title: "Invalid PinchBench badge",
+        model: "Unsupported metric or period",
+        detail: "Invalid",
+        footer: "Supported periods: 1d, 7d, 30d (or daily, weekly, monthly) • metrics: success, speed, cost, value",
+        accent: "#ef4444",
+      }),
+      400,
+    );
+  }
+
+  const period = normalizePeriod(rawPeriod);
+
+  if (!model) {
+    return badgeResponse(
+      renderBadgeSvg({
+        title: `${BADGE_PERIODS[period].label} ${BADGE_METRICS[metric].label} Badge`,
+        model: "Missing model query parameter",
+        detail: "Missing model",
+        footer: 'Use ?model=<provider/model> to request a badge',
+        accent: "#ef4444",
+      }),
+      400,
+    );
+  }
+
+  try {
+    const status = await getModelBadgeStatus(model, metric, period, {
+      officialOnly: searchParams.get("official") !== "false",
+      version: searchParams.get("version") || undefined,
+    });
+
+    const title = status.awarded
+      ? `${BADGE_PERIODS[period].label} ${BADGE_METRICS[metric].label} Winner`
+      : `${BADGE_PERIODS[period].label} ${BADGE_METRICS[metric].label} Badge`;
+    const footer = status.rank
+      ? status.awarded
+        ? `#1 in the last ${period} • ${status.officialOnly ? "official only" : "official + unofficial"}`
+        : `Current rank: #${status.rank} • winner: ${status.winnerModel ?? "N/A"}`
+      : `No eligible runs found in the last ${period}`;
+
+    return badgeResponse(
+      renderBadgeSvg({
+        title,
+        model,
+        detail: status.awarded ? status.displayValue : status.rank ? `#${status.rank}` : "No badge",
+        footer,
+        accent: BADGE_METRICS[metric].accent,
+      }),
+      200,
+    );
+  } catch {
+    return badgeResponse(
+      renderBadgeSvg({
+        title: `${BADGE_PERIODS[period].label} ${BADGE_METRICS[metric].label} Badge`,
+        model,
+        detail: "Unavailable",
+        footer: "PinchBench could not compute this badge right now",
+        accent: "#f59e0b",
+      }),
+      200,
+    );
+  }
+}

app/submission/[id]/page.tsx

@@ -10,6 +10,8 @@ import { ScoreGauge } from '@/components/score-gauge'
 import { TaskBreakdown } from '@/components/task-breakdown'
 import { HardwareInfo } from '@/components/hardware-info'
 import { TryKiloClawButton } from '@/components/try-kiloclaw-button'
+import { BadgeEmbedCard } from '@/components/badge-embed-card'
+import { getModelBadgeStatuses } from '@/lib/badges'
 import { PROVIDER_COLORS } from '@/lib/types'
 import { formatDistanceToNow } from 'date-fns'
 import { fetchSubmission } from '@/lib/api'
@@ -87,6 +89,12 @@ export default async function SubmissionPage({ params, searchParams }: Submissio
     {} as Record<string, { total: number; max: number; count: number }>
   )
 
+  const badgeStatuses = await getModelBadgeStatuses(submission.model, {
+    officialOnly,
+    version: submission.benchmark_version !== 'unknown' ? submission.benchmark_version : undefined,
+  })
+  const earnedBadges = badgeStatuses.filter((badge) => badge.awarded)
+
   return (
     <div className="min-h-screen bg-background">
       {/* Header */}
@@ -181,6 +189,22 @@ export default async function SubmissionPage({ params, searchParams }: Submissio
                   officialOnly={officialOnly}
                 />
               </div>
+              {earnedBadges.length > 0 && (
+                <div className="flex flex-wrap gap-2 mt-3">
+                  {earnedBadges.map((badge) => (
+                    <a
+                      key={`${badge.metric}-${badge.period}`}
+                      href={badge.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <Badge variant="outline" className="text-xs border-primary/40 text-primary">
+                        🏅 {badge.shortLabel}
+                      </Badge>
+                    </a>
+                  ))}
+                </div>
+              )}
             </div>
             <div className="flex items-center gap-2">
               <TryKiloClawButton model={submission.model} />
@@ -215,6 +239,10 @@ export default async function SubmissionPage({ params, searchParams }: Submissio
             </div>
           </div>
 
+          <div className="mt-6">
+            <BadgeEmbedCard model={submission.model} badges={badgeStatuses} />
+          </div>
+
 
         </div>
 

components/badge-embed-card.tsx

@@ -0,0 +1,111 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { Check, Copy, ExternalLink } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
+import type { ModelBadgeStatus } from '@/lib/badges'
+
+interface BadgeEmbedCardProps {
+  model: string
+  badges: ModelBadgeStatus[]
+}
+
+export function BadgeEmbedCard({ model, badges }: BadgeEmbedCardProps) {
+  const [copiedKey, setCopiedKey] = useState<string | null>(null)
+  const earnedBadges = useMemo(() => badges.filter((badge) => badge.awarded), [badges])
+
+  const origin = typeof window !== 'undefined' ? window.location.origin : ''
+
+  const copyText = async (key: string, value: string) => {
+    try {
+      await navigator.clipboard.writeText(value)
+      setCopiedKey(key)
+      setTimeout(() => setCopiedKey(null), 1800)
+    } catch {
+      // noop
+    }
+  }
+
+  if (earnedBadges.length === 0) {
+    return (
+      <Card className="p-6 bg-card border-border">
+        <h3 className="text-lg font-semibold text-foreground mb-2">Rolling-window badges</h3>
+        <p className="text-sm text-muted-foreground">
+          <code className="font-mono text-foreground">{model}</code> does not currently hold a daily,
+          weekly, or monthly winner badge for success, speed, cost, or value.
+        </p>
+      </Card>
+    )
+  }
+
+  return (
+    <Card className="p-6 bg-card border-border space-y-5">
+      <div>
+        <h3 className="text-lg font-semibold text-foreground">Embed winner badges</h3>
+        <p className="text-sm text-muted-foreground mt-1">
+          Copy a public SVG badge URL, Markdown snippet, or HTML image tag for the badges this model
+          currently holds.
+        </p>
+      </div>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        {earnedBadges.map((badge) => {
+          const absoluteUrl = `${origin}${badge.url}`
+          const markdown = `![${badge.title}](${absoluteUrl})`
+          const html = `<img src="${absoluteUrl}" alt="${badge.title}" />`
+
+          return (
+            <div key={`${badge.metric}-${badge.period}`} className="rounded-lg border border-border bg-background/60 p-4 space-y-3">
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <p className="text-sm font-semibold text-foreground">{badge.title}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {badge.displayValue} • {badge.officialOnly ? 'official only' : 'official + unofficial'}
+                  </p>
+                </div>
+                <a
+                  href={badge.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-muted-foreground hover:text-foreground transition-colors"
+                  aria-label={`Open ${badge.title}`}
+                >
+                  <ExternalLink className="h-4 w-4" />
+                </a>
+              </div>
+
+              <img
+                src={badge.url}
+                alt={badge.title}
+                className="w-full rounded-md border border-border bg-[#09090b]"
+              />
+
+              <div className="grid gap-2 sm:grid-cols-3">
+                {[
+                  ['url', absoluteUrl, 'Copy URL'],
+                  ['md', markdown, 'Markdown'],
+                  ['html', html, 'HTML'],
+                ].map(([kind, value, label]) => {
+                  const key = `${badge.metric}-${badge.period}-${kind}`
+                  const copied = copiedKey === key
+                  return (
+                    <Button
+                      key={key}
+                      variant="outline"
+                      size="sm"
+                      onClick={() => copyText(key, value)}
+                    >
+                      {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+                      {copied ? 'Copied!' : label}
+                    </Button>
+                  )
+                })}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </Card>
+  )
+}