From dbd0314d306c19a2c4dd179103f930db691b1618 Mon Sep 17 00:00:00 2001
From: baudbot-agent <baudbot-agent@users.noreply.github.com>
Date: Wed, 11 Mar 2026 18:44:46 +0000
Subject: [PATCH 1/2] feat: update dropdown icons, move last-updated to header
 with commit link
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Icon changes
- Tools dropdown: replaced ListFilter (lucide) with Geist terminal-window icon
- Fixtures dropdown: replaced Package icon with Geist briefcase icon
- New icon components: TerminalWindow, Briefcase (16×16 SVG from Geist icons)

## Last updated + commit hash
- Moved 'last updated' date from footer to header, displayed as small text
  to the right of the 'Benchmarks' title (hidden on mobile to save space)
- Added commit SHA link (short 7-char hash) that links to the GitHub commit
  associated with the benchmark run
- generate-chart.js now accepts an optional commit SHA as second argument
  and includes it as `commitSha` in chart-data.json
- process-results.sh passes GITHUB_SHA (or git rev-parse HEAD as fallback)
  to generate-chart.js
- BenchmarkChartData type updated with optional `commitSha` field
- Footer simplified: removed date display, kept methodology + theme switcher
---
 app/src/app.tsx                               |  2 +-
 app/src/components/fixture-filter.tsx         |  4 +-
 app/src/components/footer.tsx                 | 19 +------
 app/src/components/header.tsx                 | 57 ++++++++++++++-----
 app/src/components/icons/briefcase.tsx        | 18 ++++++
 app/src/components/icons/index.ts             |  2 +
 app/src/components/icons/terminal-window.tsx  | 18 ++++++
 app/src/components/package-manager-filter.tsx |  5 +-
 app/src/types/chart-data.ts                   |  1 +
 scripts/generate-chart.js                     |  4 ++
 scripts/process-results.sh                    |  5 +-
 11 files changed, 97 insertions(+), 38 deletions(-)
 create mode 100644 app/src/components/icons/briefcase.tsx
 create mode 100644 app/src/components/icons/terminal-window.tsx

diff --git a/app/src/app.tsx b/app/src/app.tsx
index 985c7d7ab..1fe585557 100644
--- a/app/src/app.tsx
+++ b/app/src/app.tsx
@@ -51,7 +51,7 @@ const App = () => {
                     {error && <ErrorDisplay message={error} />}
                     <Outlet context={{ chartData, historyData }} />
                   </main>
-                  <Footer lastUpdated={chartData.date} />
+                  <Footer />
                 </div>
               </YAxisProvider>
             </FixtureFilterProvider>
diff --git a/app/src/components/fixture-filter.tsx b/app/src/components/fixture-filter.tsx
index 1a3468c2c..fc0ee9297 100644
--- a/app/src/components/fixture-filter.tsx
+++ b/app/src/components/fixture-filter.tsx
@@ -11,7 +11,7 @@ import { Check, ChevronRight } from "lucide-react";
 import { useFixtureFilter } from "@/contexts/fixture-filter-context";
 import { getFixtureDisplayName } from "@/lib/utils";
 import { getFrameworkIcon } from "@/lib/get-icons";
-import { Package } from "@/components/icons";
+import { Briefcase } from "@/components/icons";
 
 import type { Fixture } from "@/types/chart-data";
 
@@ -38,7 +38,7 @@ export const FixtureFilter = ({ fixtures }: FixtureFilterProps) => {
         className="rounded-lg dark:border-neutral-700 dark:hover:border-neutral-600 border hover:border-neutral-300 border-neutral-200 shadow-none bg-neutral-100 hover:bg-neutral-200 [&[data-state=open]>svg[data-id=chevron]]:rotate-90 dark:hover:bg-neutral-700 dark:bg-neutral-800 text-black dark:text-white min-w-0 w-auto"
       >
         <Button size="sm" className="text-xs md:text-sm">
-          <Package className="flex-shrink-0" />
+          <Briefcase className="flex-shrink-0" />
           Fixtures
           <span className="text-xs text-muted-foreground whitespace-nowrap">
             ({enabledCount}/{totalCount})
diff --git a/app/src/components/footer.tsx b/app/src/components/footer.tsx
index c0f17a06c..ef29139f3 100644
--- a/app/src/components/footer.tsx
+++ b/app/src/components/footer.tsx
@@ -1,10 +1,8 @@
 import { Vlt } from "@/components/icons";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 import { useTheme } from "@/components/theme-provider";
-import { format } from "date-fns";
-import { cn } from "@/lib/utils";
 
-export const Footer = ({ lastUpdated }: { lastUpdated?: string }) => {
+export const Footer = () => {
   const { theme } = useTheme();
 
   return (
@@ -135,20 +133,7 @@ export const Footer = ({ lastUpdated }: { lastUpdated?: string }) => {
           </div>
         </div>
 
-        <div
-          className={cn(
-            "max-w-7xl ml-0 justify-between w-full flex flex-col md:flex-row items-start md:items-center gap-3 px-0 md:pl-12 md:pr-0 pt-4 md:py-8",
-            lastUpdated ? "md:justify-between" : "md:justify-end",
-          )}
-        >
-          {lastUpdated && (
-            <p className="font-medium inline-flex items-baseline text-sm text-muted-foreground">
-              Last updated:
-              <span className="ml-2">
-                {format(lastUpdated, "MMMM dd, yyyy")}
-              </span>
-            </p>
-          )}
+        <div className="max-w-7xl ml-0 justify-end w-full flex flex-col md:flex-row items-start md:items-center gap-3 px-0 md:pl-12 md:pr-0 pt-4 md:py-8">
           <ThemeSwitcher />
         </div>
       </div>
diff --git a/app/src/components/header.tsx b/app/src/components/header.tsx
index ac14b9c79..b6418effe 100644
--- a/app/src/components/header.tsx
+++ b/app/src/components/header.tsx
@@ -5,6 +5,7 @@ import { FixtureFilter } from "@/components/fixture-filter";
 import { VariationDropdown } from "@/components/variation-dropdown";
 import { Benchmarks, Package, StopWatch, Database } from "@/components/icons";
 import { Button } from "@/components/ui/button";
+import { format } from "date-fns";
 import {
   cn,
   calculateLeaderboard,
@@ -207,21 +208,47 @@ const HeaderNavigation = forwardRef<HTMLDivElement, ComponentProps<"div">>(
 HeaderNavigation.displayName = "HeaderNavigation";
 
 const HeaderLogo = forwardRef<HTMLDivElement, ComponentProps<"div">>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        "flex flex-row items-center gap-2 flex-shrink-0",
-        className,
-      )}
-      {...props}
-    >
-      <Benchmarks className="size-6" />
-      <h1 className="text-lg md:text-2xl font-semibold tracking-tight">
-        Benchmarks
-      </h1>
-    </div>
-  ),
+  ({ className, ...props }, ref) => {
+    const { chartData } = useHeaderContext();
+    const lastUpdated = chartData?.date;
+    const commitSha = chartData?.commitSha;
+    const shortSha = commitSha ? commitSha.slice(0, 7) : undefined;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex flex-row items-center gap-2 flex-shrink-0",
+          className,
+        )}
+        {...props}
+      >
+        <Benchmarks className="size-6" />
+        <h1 className="text-lg md:text-2xl font-semibold tracking-tight">
+          Benchmarks
+        </h1>
+        {lastUpdated && (
+          <span className="text-xs text-muted-foreground font-medium ml-1 hidden md:inline-flex items-center gap-1.5">
+            <span className="text-border">·</span>
+            {format(lastUpdated, "MMM d, yyyy")}
+            {shortSha && (
+              <>
+                <span className="text-border">·</span>
+                <a
+                  href={`https://github.com/vltpkg/benchmarks/commit/${commitSha}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="font-mono hover:underline text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {shortSha}
+                </a>
+              </>
+            )}
+          </span>
+        )}
+      </div>
+    );
+  },
 );
 HeaderLogo.displayName = "HeaderTitle";
 
diff --git a/app/src/components/icons/briefcase.tsx b/app/src/components/icons/briefcase.tsx
new file mode 100644
index 000000000..9ce9a15e6
--- /dev/null
+++ b/app/src/components/icons/briefcase.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const Briefcase = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 16 16"
+    width="16"
+    height="16"
+    fill="currentColor"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6 2.5H10C10.2761 2.5 10.5 2.72386 10.5 3V4H5.5V3C5.5 2.72386 5.72386 2.5 6 2.5ZM4 4V3C4 1.89543 4.89543 1 6 1H10C11.1046 1 12 1.89543 12 3V4H14.5H16V5.5V13.5C16 14.8807 14.8807 16 13.5 16H2.5C1.11929 16 0 14.8807 0 13.5V5.5V4H1.5H4ZM12 5.5H10.5H5.5H4H1.5V9.25H7.25V8.5H8.75V9.25L14.5 9.25V5.5H12ZM8.75 10.75L14.5 10.75V13.5C14.5 14.0523 14.0523 14.5 13.5 14.5H2.5C1.94772 14.5 1.5 14.0523 1.5 13.5V10.75H7.25V11.5H8.75V10.75Z"
+    />
+  </svg>
+);
diff --git a/app/src/components/icons/index.ts b/app/src/components/icons/index.ts
index fcfbfd242..ccda86cc7 100644
--- a/app/src/components/icons/index.ts
+++ b/app/src/components/icons/index.ts
@@ -3,12 +3,14 @@ export * from "./vlt.tsx";
 export * from "./benchmarks.tsx";
 
 // general icons
+export * from "./briefcase.tsx";
 export * from "./clock.tsx";
 export * from "./database.tsx";
 export * from "./stop-watch.tsx";
 export * from "./share.tsx";
 export * from "./package.tsx";
 export * from "./bar-chart.tsx";
+export * from "./terminal-window.tsx";
 
 // ecosystem icons
 export * from "./astro.tsx";
diff --git a/app/src/components/icons/terminal-window.tsx b/app/src/components/icons/terminal-window.tsx
new file mode 100644
index 000000000..6458a3689
--- /dev/null
+++ b/app/src/components/icons/terminal-window.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const TerminalWindow = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 16 16"
+    width="16"
+    height="16"
+    fill="currentColor"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M1.5 2.5H14.5V12.5C14.5 13.0523 14.0523 13.5 13.5 13.5H2.5C1.94772 13.5 1.5 13.0523 1.5 12.5V2.5ZM0 1H1.5H14.5H16V2.5V12.5C16 13.8807 14.8807 15 13.5 15H2.5C1.11929 15 0 13.8807 0 12.5V2.5V1ZM4 11.1339L4.44194 10.6919L6.51516 8.61872C6.85687 8.27701 6.85687 7.72299 6.51517 7.38128L4.44194 5.30806L4 4.86612L3.11612 5.75L3.55806 6.19194L5.36612 8L3.55806 9.80806L3.11612 10.25L4 11.1339ZM8 9.75494H8.6225H11.75H12.3725V10.9999H11.75H8.6225H8V9.75494Z"
+    />
+  </svg>
+);
diff --git a/app/src/components/package-manager-filter.tsx b/app/src/components/package-manager-filter.tsx
index 78cca00cf..bf362dd5c 100644
--- a/app/src/components/package-manager-filter.tsx
+++ b/app/src/components/package-manager-filter.tsx
@@ -7,7 +7,8 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
-import { ListFilter, Check, ChevronRight } from "lucide-react";
+import { Check, ChevronRight } from "lucide-react";
+import { TerminalWindow } from "@/components/icons";
 import { usePackageManagerFilter } from "@/contexts/package-manager-filter-context";
 import { getPackageManagerDisplayName } from "@/lib/utils";
 import { resolveTheme, useTheme } from "@/components/theme-provider";
@@ -52,7 +53,7 @@ export const PackageManagerFilter = ({
         className="rounded-lg dark:border-neutral-700 dark:hover:border-neutral-600 border hover:border-neutral-300 border-neutral-200 shadow-none bg-neutral-100 hover:bg-neutral-200 [&[data-state=open]>svg[data-id=chevron]]:rotate-90 dark:hover:bg-neutral-700 dark:bg-neutral-800 text-black dark:text-white min-w-0 w-auto"
       >
         <Button size="sm" className="text-xs md:text-sm">
-          <ListFilter className="flex-shrink-0" />
+          <TerminalWindow className="flex-shrink-0" />
           Tools
           <span className="text-xs text-muted-foreground whitespace-nowrap">
             ({enabledCount}/{totalCount})
diff --git a/app/src/types/chart-data.ts b/app/src/types/chart-data.ts
index 99718c5c8..833ffe5c0 100644
--- a/app/src/types/chart-data.ts
+++ b/app/src/types/chart-data.ts
@@ -141,6 +141,7 @@ export interface ChartDataSet {
 
 export interface BenchmarkChartData {
   date: string;
+  commitSha?: string;
   chartData: ChartDataSet;
   perPackageCountChartData: ChartDataSet;
   registryChartData?: ChartDataSet;
diff --git a/scripts/generate-chart.js b/scripts/generate-chart.js
index 22d171729..3473edf9e 100644
--- a/scripts/generate-chart.js
+++ b/scripts/generate-chart.js
@@ -13,6 +13,9 @@ if (!DATE) {
   process.exit(1);
 }
 
+// Optional commit SHA passed as second argument
+const COMMIT_SHA = process.argv[3] || "";
+
 const RESULTS_DIR = path.resolve("results", DATE);
 if (!fs.existsSync(RESULTS_DIR)) {
   console.error(`Error: Results directory ${RESULTS_DIR} does not exist`);
@@ -375,6 +378,7 @@ const dumpChartData = () => {
 
   const results = {
     date: DATE,
+    ...(COMMIT_SHA ? { commitSha: COMMIT_SHA } : {}),
     chartData: {
       variations: chartData.variations,
       data: chartData.data,
diff --git a/scripts/process-results.sh b/scripts/process-results.sh
index 701240f96..6fc4a40bc 100644
--- a/scripts/process-results.sh
+++ b/scripts/process-results.sh
@@ -124,9 +124,12 @@ else
     echo "Warning: No results found for run"
 fi
 
+# Get the commit SHA associated with this run (available in GitHub Actions)
+COMMIT_SHA="${GITHUB_SHA:-$(git rev-parse HEAD 2>/dev/null || echo "")}"
+
 # Generate visualization
 echo "Generating visualization..."
-if ! node scripts/generate-chart.js "$DATE"; then
+if ! node scripts/generate-chart.js "$DATE" "$COMMIT_SHA"; then
     echo "Error: Failed to generate chart"
     exit 1
 fi

From 767e197815f99c32865d960fdfc6acc9422a24ae Mon Sep 17 00:00:00 2001
From: baudbot-agent <baudbot-agent@users.noreply.github.com>
Date: Wed, 11 Mar 2026 19:38:26 +0000
Subject: [PATCH 2/2] refactor: switch to lucide Hammer and BriefcaseBusiness
 icons

Replace custom Geist SVG icons with lucide-react equivalents:
- Tools dropdown: Hammer (lucide) instead of custom TerminalWindow
- Fixtures dropdown: BriefcaseBusiness (lucide) instead of custom Briefcase
- Removed unused briefcase.tsx and terminal-window.tsx icon files
---
 app/src/components/fixture-filter.tsx         |  5 ++---
 app/src/components/icons/briefcase.tsx        | 18 ------------------
 app/src/components/icons/index.ts             |  2 --
 app/src/components/icons/terminal-window.tsx  | 18 ------------------
 app/src/components/package-manager-filter.tsx |  5 ++---
 5 files changed, 4 insertions(+), 44 deletions(-)
 delete mode 100644 app/src/components/icons/briefcase.tsx
 delete mode 100644 app/src/components/icons/terminal-window.tsx

diff --git a/app/src/components/fixture-filter.tsx b/app/src/components/fixture-filter.tsx
index fc0ee9297..9a8bf8fa4 100644
--- a/app/src/components/fixture-filter.tsx
+++ b/app/src/components/fixture-filter.tsx
@@ -7,11 +7,10 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
-import { Check, ChevronRight } from "lucide-react";
+import { Check, ChevronRight, BriefcaseBusiness } from "lucide-react";
 import { useFixtureFilter } from "@/contexts/fixture-filter-context";
 import { getFixtureDisplayName } from "@/lib/utils";
 import { getFrameworkIcon } from "@/lib/get-icons";
-import { Briefcase } from "@/components/icons";
 
 import type { Fixture } from "@/types/chart-data";
 
@@ -38,7 +37,7 @@ export const FixtureFilter = ({ fixtures }: FixtureFilterProps) => {
         className="rounded-lg dark:border-neutral-700 dark:hover:border-neutral-600 border hover:border-neutral-300 border-neutral-200 shadow-none bg-neutral-100 hover:bg-neutral-200 [&[data-state=open]>svg[data-id=chevron]]:rotate-90 dark:hover:bg-neutral-700 dark:bg-neutral-800 text-black dark:text-white min-w-0 w-auto"
       >
         <Button size="sm" className="text-xs md:text-sm">
-          <Briefcase className="flex-shrink-0" />
+          <BriefcaseBusiness className="flex-shrink-0" />
           Fixtures
           <span className="text-xs text-muted-foreground whitespace-nowrap">
             ({enabledCount}/{totalCount})
diff --git a/app/src/components/icons/briefcase.tsx b/app/src/components/icons/briefcase.tsx
deleted file mode 100644
index 9ce9a15e6..000000000
--- a/app/src/components/icons/briefcase.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { SVGProps } from "react";
-
-export const Briefcase = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 16 16"
-    width="16"
-    height="16"
-    fill="currentColor"
-    strokeLinejoin="round"
-    {...props}
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M6 2.5H10C10.2761 2.5 10.5 2.72386 10.5 3V4H5.5V3C5.5 2.72386 5.72386 2.5 6 2.5ZM4 4V3C4 1.89543 4.89543 1 6 1H10C11.1046 1 12 1.89543 12 3V4H14.5H16V5.5V13.5C16 14.8807 14.8807 16 13.5 16H2.5C1.11929 16 0 14.8807 0 13.5V5.5V4H1.5H4ZM12 5.5H10.5H5.5H4H1.5V9.25H7.25V8.5H8.75V9.25L14.5 9.25V5.5H12ZM8.75 10.75L14.5 10.75V13.5C14.5 14.0523 14.0523 14.5 13.5 14.5H2.5C1.94772 14.5 1.5 14.0523 1.5 13.5V10.75H7.25V11.5H8.75V10.75Z"
-    />
-  </svg>
-);
diff --git a/app/src/components/icons/index.ts b/app/src/components/icons/index.ts
index ccda86cc7..fcfbfd242 100644
--- a/app/src/components/icons/index.ts
+++ b/app/src/components/icons/index.ts
@@ -3,14 +3,12 @@ export * from "./vlt.tsx";
 export * from "./benchmarks.tsx";
 
 // general icons
-export * from "./briefcase.tsx";
 export * from "./clock.tsx";
 export * from "./database.tsx";
 export * from "./stop-watch.tsx";
 export * from "./share.tsx";
 export * from "./package.tsx";
 export * from "./bar-chart.tsx";
-export * from "./terminal-window.tsx";
 
 // ecosystem icons
 export * from "./astro.tsx";
diff --git a/app/src/components/icons/terminal-window.tsx b/app/src/components/icons/terminal-window.tsx
deleted file mode 100644
index 6458a3689..000000000
--- a/app/src/components/icons/terminal-window.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { SVGProps } from "react";
-
-export const TerminalWindow = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 16 16"
-    width="16"
-    height="16"
-    fill="currentColor"
-    strokeLinejoin="round"
-    {...props}
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M1.5 2.5H14.5V12.5C14.5 13.0523 14.0523 13.5 13.5 13.5H2.5C1.94772 13.5 1.5 13.0523 1.5 12.5V2.5ZM0 1H1.5H14.5H16V2.5V12.5C16 13.8807 14.8807 15 13.5 15H2.5C1.11929 15 0 13.8807 0 12.5V2.5V1ZM4 11.1339L4.44194 10.6919L6.51516 8.61872C6.85687 8.27701 6.85687 7.72299 6.51517 7.38128L4.44194 5.30806L4 4.86612L3.11612 5.75L3.55806 6.19194L5.36612 8L3.55806 9.80806L3.11612 10.25L4 11.1339ZM8 9.75494H8.6225H11.75H12.3725V10.9999H11.75H8.6225H8V9.75494Z"
-    />
-  </svg>
-);
diff --git a/app/src/components/package-manager-filter.tsx b/app/src/components/package-manager-filter.tsx
index bf362dd5c..aff2e0083 100644
--- a/app/src/components/package-manager-filter.tsx
+++ b/app/src/components/package-manager-filter.tsx
@@ -7,8 +7,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
-import { Check, ChevronRight } from "lucide-react";
-import { TerminalWindow } from "@/components/icons";
+import { Check, ChevronRight, Hammer } from "lucide-react";
 import { usePackageManagerFilter } from "@/contexts/package-manager-filter-context";
 import { getPackageManagerDisplayName } from "@/lib/utils";
 import { resolveTheme, useTheme } from "@/components/theme-provider";
@@ -53,7 +52,7 @@ export const PackageManagerFilter = ({
         className="rounded-lg dark:border-neutral-700 dark:hover:border-neutral-600 border hover:border-neutral-300 border-neutral-200 shadow-none bg-neutral-100 hover:bg-neutral-200 [&[data-state=open]>svg[data-id=chevron]]:rotate-90 dark:hover:bg-neutral-700 dark:bg-neutral-800 text-black dark:text-white min-w-0 w-auto"
       >
         <Button size="sm" className="text-xs md:text-sm">
-          <TerminalWindow className="flex-shrink-0" />
+          <Hammer className="flex-shrink-0" />
           Tools
           <span className="text-xs text-muted-foreground whitespace-nowrap">
             ({enabledCount}/{totalCount})