feat: update dropdown icons, move last-updated to header with commit link

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>

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 { Package } 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">
-          <Package className="flex-shrink-0" />
+          <BriefcaseBusiness className="flex-shrink-0" />
           Fixtures
           <span className="text-xs text-muted-foreground whitespace-nowrap">
             ({enabledCount}/{totalCount})

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>

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";
 

app/src/components/package-manager-filter.tsx

@@ -7,7 +7,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
-import { ListFilter, Check, ChevronRight } from "lucide-react";
+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";
@@ -52,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">
-          <ListFilter className="flex-shrink-0" />
+          <Hammer className="flex-shrink-0" />
           Tools
           <span className="text-xs text-muted-foreground whitespace-nowrap">
             ({enabledCount}/{totalCount})

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;

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,

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