From 11d4b86c9399e7bfb4294f48ce2b9baf00b6172b Mon Sep 17 00:00:00 2001
From: devendra-w <devendra.25bai10969@vitbhopal.ac.in>
Date: Wed, 20 May 2026 13:28:04 +0530
Subject: [PATCH 1/6] feat: add heatmap drill-down sheet on cell click

---
 src/components/ContributionHeatmap.tsx |   7 ++
 src/components/DailyBreakdownSheet.tsx | 135 +++++++++++++++++++++++++
 2 files changed, 142 insertions(+)
 create mode 100644 src/components/DailyBreakdownSheet.tsx

diff --git a/src/components/ContributionHeatmap.tsx b/src/components/ContributionHeatmap.tsx
index 8c81db44..0a957eaf 100644
--- a/src/components/ContributionHeatmap.tsx
+++ b/src/components/ContributionHeatmap.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useState } from "react";
 import { useHeatmapTheme } from "@/hooks/useHeatmapTheme";
+import DailyBreakdownSheet from "@/components/DailyBreakdownSheet";
 
 interface ContributionHeatmapProps {
   days?: number;
@@ -77,6 +78,7 @@ export default function ContributionHeatmap({
   const [error, setError] = useState<string | null>(null);
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
   const [minutesAgo, setMinutesAgo] = useState(0);
+  const [selectedDate, setSelectedDate] = useState<string | null>(null);
 
   useEffect(() => {
     let active = true;
@@ -286,6 +288,7 @@ export default function ContributionHeatmap({
                       title={isFuture ? "" : tooltip}
                       aria-label={isFuture ? `${cell.dateKey}: future date` : tooltip}
                       disabled={isFuture}
+                      onClick={() => !isFuture && setSelectedDate(cell.dateKey)}
                       className={`group relative z-0 h-3 w-3 rounded-[3px] border transition-transform hover:z-20 hover:scale-110 focus:z-20 focus:outline-none focus:ring-2 focus:ring-[var(--heatmap-focus-ring)] disabled:cursor-default disabled:opacity-30 ${
                         cell.inRange ? "" : "opacity-35"
                       }`}
@@ -333,6 +336,10 @@ export default function ContributionHeatmap({
           </div>
         </>
       )}
+    <DailyBreakdownSheet
+        date={selectedDate}
+        onClose={() => setSelectedDate(null)}
+    />
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/components/DailyBreakdownSheet.tsx b/src/components/DailyBreakdownSheet.tsx
new file mode 100644
index 00000000..9201c48e
--- /dev/null
+++ b/src/components/DailyBreakdownSheet.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface DailyBreakdownSheetProps {
+  date: string | null;
+  onClose: () => void;
+}
+
+interface RepoCommit {
+  repo: string;
+  count: number;
+  url: string;
+}
+
+export default function DailyBreakdownSheet({
+  date,
+  onClose,
+}: DailyBreakdownSheetProps) {
+  const [commits, setCommits] = useState<RepoCommit[]>([]);
+  const [loading, setLoading] = useState(false);
+  const isOpen = date !== null;
+
+  useEffect(() => {
+    if (!date) return;
+    setLoading(true);
+    fetch(`/api/metrics/contributions?days=365`)
+      .then((res) => res.json())
+      .then((result) => {
+        // Extract per-repo breakdown for the selected date
+        const repoData = result.repos?.[date] ?? [];
+        setCommits(repoData);
+      })
+      .catch(() => setCommits([]))
+      .finally(() => setLoading(false));
+  }, [date]);
+
+  // Close on Escape key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+
+  if (!isOpen) return null;
+
+  const formattedDate = date
+    ? new Date(date + "T00:00:00").toLocaleDateString("en-US", {
+        weekday: "long",
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+      })
+    : "";
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-40 bg-black/40"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Slide-in panel */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={`Daily breakdown for ${formattedDate}`}
+        className="fixed right-0 top-0 z-50 flex h-full w-80 flex-col border-l border-[var(--border)] bg-[var(--card)] shadow-xl transition-transform"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-[var(--border)] p-4">
+          <div>
+            <h2 className="font-semibold text-[var(--card-foreground)]">
+              Daily Breakdown
+            </h2>
+            <p className="text-xs text-[var(--muted-foreground)]">
+              {formattedDate}
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close panel"
+            className="rounded p-1 text-[var(--muted-foreground)] hover:bg-[var(--accent)]/10 hover:text-[var(--card-foreground)]"
+          >
+            ✕
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-4">
+          {loading ? (
+            <div className="space-y-2">
+              {[1, 2, 3].map((i) => (
+                <div
+                  key={i}
+                  className="h-12 animate-pulse rounded-lg bg-[var(--card-muted)]"
+                />
+              ))}
+            </div>
+          ) : commits.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+              <p className="text-sm text-[var(--muted-foreground)]">
+                No commit data available for this day.
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {commits.map((item) => (
+                
+                  key={item.repo}
+                  href={item.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center justify-between rounded-lg border border-[var(--border)] p-3 hover:bg-[var(--accent)]/10 transition-colors"
+                >
+                  <span className="text-sm font-medium text-[var(--card-foreground)] truncate">
+                    {item.repo}
+                  </span>
+                  <span className="ml-2 shrink-0 rounded-full bg-[var(--accent)]/20 px-2 py-0.5 text-xs font-semibold text-[var(--accent-foreground)]">
+                    {item.count} commit{item.count === 1 ? "" : "s"}
+                  </span>
+                </a>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
\ No newline at end of file

From ad0cef595918fdc3cf52b0c893a77fdc56815e6a Mon Sep 17 00:00:00 2001
From: devendra-w <devendra.25bai10969@vitbhopal.ac.in>
Date: Wed, 20 May 2026 13:43:21 +0530
Subject: [PATCH 2/6] fix: resolve lint error in DailyBreakdownSheet

---
 src/components/DailyBreakdownSheet.tsx | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/components/DailyBreakdownSheet.tsx b/src/components/DailyBreakdownSheet.tsx
index 9201c48e..cf3f52bf 100644
--- a/src/components/DailyBreakdownSheet.tsx
+++ b/src/components/DailyBreakdownSheet.tsx
@@ -27,7 +27,6 @@ export default function DailyBreakdownSheet({
     fetch(`/api/metrics/contributions?days=365`)
       .then((res) => res.json())
       .then((result) => {
-        // Extract per-repo breakdown for the selected date
         const repoData = result.repos?.[date] ?? [];
         setCommits(repoData);
       })
@@ -35,7 +34,6 @@ export default function DailyBreakdownSheet({
       .finally(() => setLoading(false));
   }, [date]);
 
-  // Close on Escape key
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape") onClose();
@@ -57,21 +55,17 @@ export default function DailyBreakdownSheet({
 
   return (
     <>
-      {/* Backdrop */}
       <div
         className="fixed inset-0 z-40 bg-black/40"
         onClick={onClose}
         aria-hidden="true"
       />
-
-      {/* Slide-in panel */}
       <div
         role="dialog"
         aria-modal="true"
         aria-label={`Daily breakdown for ${formattedDate}`}
-        className="fixed right-0 top-0 z-50 flex h-full w-80 flex-col border-l border-[var(--border)] bg-[var(--card)] shadow-xl transition-transform"
+        className="fixed right-0 top-0 z-50 flex h-full w-80 flex-col border-l border-[var(--border)] bg-[var(--card)] shadow-xl"
       >
-        {/* Header */}
         <div className="flex items-center justify-between border-b border-[var(--border)] p-4">
           <div>
             <h2 className="font-semibold text-[var(--card-foreground)]">
@@ -85,13 +79,11 @@ export default function DailyBreakdownSheet({
             type="button"
             onClick={onClose}
             aria-label="Close panel"
-            className="rounded p-1 text-[var(--muted-foreground)] hover:bg-[var(--accent)]/10 hover:text-[var(--card-foreground)]"
+            className="rounded p-1 text-[var(--muted-foreground)] hover:text-[var(--card-foreground)]"
           >
             ✕
           </button>
         </div>
-
-        {/* Content */}
         <div className="flex-1 overflow-y-auto p-4">
           {loading ? (
             <div className="space-y-2">
@@ -111,14 +103,14 @@ export default function DailyBreakdownSheet({
           ) : (
             <div className="space-y-2">
               {commits.map((item) => (
-                
+                  <a
                   key={item.repo}
                   href={item.url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex items-center justify-between rounded-lg border border-[var(--border)] p-3 hover:bg-[var(--accent)]/10 transition-colors"
+                  className="flex items-center justify-between rounded-lg border border-[var(--border)] p-3 hover:bg-[var(--accent)]/10"
                 >
-                  <span className="text-sm font-medium text-[var(--card-foreground)] truncate">
+                  <span className="truncate text-sm font-medium text-[var(--card-foreground)]">
                     {item.repo}
                   </span>
                   <span className="ml-2 shrink-0 rounded-full bg-[var(--accent)]/20 px-2 py-0.5 text-xs font-semibold text-[var(--accent-foreground)]">

From 2576263dad00ab64cf23469261502f1602ece329 Mon Sep 17 00:00:00 2001
From: devendra-w <devendra.25bai10969@vitbhopal.ac.in>
Date: Thu, 21 May 2026 00:56:23 +0530
Subject: [PATCH 3/6] fix: resolve API shape mismatch, remove redundant fetch,
 fix useEffect listener, add EOF newlines

---
 .../api/metrics/contributions/daily/route.ts  | 65 +++++++++++++++++++
 src/components/ContributionHeatmap.tsx        | 12 ++--
 src/components/DailyBreakdownSheet.tsx        | 34 ++++++----
 3 files changed, 95 insertions(+), 16 deletions(-)
 create mode 100644 src/app/api/metrics/contributions/daily/route.ts

diff --git a/src/app/api/metrics/contributions/daily/route.ts b/src/app/api/metrics/contributions/daily/route.ts
new file mode 100644
index 00000000..66b36746
--- /dev/null
+++ b/src/app/api/metrics/contributions/daily/route.ts
@@ -0,0 +1,65 @@
+import { getServerSession } from "next-auth";
+import { NextRequest } from "next/server";
+import { authOptions } from "@/lib/auth";
+import { GITHUB_API } from "@/lib/github";
+
+export const dynamic = "force-dynamic";
+
+interface RepoCommit {
+  repo: string;
+  count: number;
+  url: string;
+}
+
+export async function GET(req: NextRequest) {
+  const session = await getServerSession(authOptions);
+  if (!session?.accessToken || !session.githubLogin) {
+    return Response.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const date = req.nextUrl.searchParams.get("date");
+  if (!date || !/^\d{4}-\d{2}-\d{2}$/.test(date)) {
+    return Response.json({ error: "Missing or invalid date" }, { status: 400 });
+  }
+
+  try {
+    const searchRes = await fetch(
+      `${GITHUB_API}/search/commits?q=author:${session.githubLogin}+author-date:${date}&per_page=100`,
+      {
+        headers: {
+          Authorization: `Bearer ${session.accessToken}`,
+          Accept: "application/vnd.github+json",
+        },
+        cache: "no-store",
+      }
+    );
+
+    if (!searchRes.ok) {
+      return Response.json({ error: "GitHub API error" }, { status: 502 });
+    }
+
+    const data = (await searchRes.json()) as {
+      items: Array<{
+        repository: { full_name: string; html_url: string };
+      }>;
+    };
+
+    // Group commits by repo
+    const repoMap: Record<string, { count: number; url: string }> = {};
+    for (const item of data.items) {
+      const { full_name, html_url } = item.repository;
+      if (!repoMap[full_name]) {
+        repoMap[full_name] = { count: 0, url: html_url };
+      }
+      repoMap[full_name].count++;
+    }
+
+    const repos: RepoCommit[] = Object.entries(repoMap).map(
+      ([repo, { count, url }]) => ({ repo, count, url })
+    );
+
+    return Response.json({ date, repos });
+  } catch {
+    return Response.json({ error: "GitHub API error" }, { status: 502 });
+  }
+}
\ No newline at end of file
diff --git a/src/components/ContributionHeatmap.tsx b/src/components/ContributionHeatmap.tsx
index 0a957eaf..6ce0d61d 100644
--- a/src/components/ContributionHeatmap.tsx
+++ b/src/components/ContributionHeatmap.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useHeatmapTheme } from "@/hooks/useHeatmapTheme";
 import DailyBreakdownSheet from "@/components/DailyBreakdownSheet";
 
@@ -79,6 +79,7 @@ export default function ContributionHeatmap({
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
   const [minutesAgo, setMinutesAgo] = useState(0);
   const [selectedDate, setSelectedDate] = useState<string | null>(null);
+  const handleCloseSheet = useCallback(() => setSelectedDate(null), []);
 
   useEffect(() => {
     let active = true;
@@ -336,10 +337,11 @@ export default function ContributionHeatmap({
           </div>
         </>
       )}
-    <DailyBreakdownSheet
+      <DailyBreakdownSheet
         date={selectedDate}
-        onClose={() => setSelectedDate(null)}
-    />
+        onClose={handleCloseSheet}
+        heatmapData={data}
+      />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/DailyBreakdownSheet.tsx b/src/components/DailyBreakdownSheet.tsx
index cf3f52bf..f7b7df8f 100644
--- a/src/components/DailyBreakdownSheet.tsx
+++ b/src/components/DailyBreakdownSheet.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 interface DailyBreakdownSheetProps {
   date: string | null;
   onClose: () => void;
+  heatmapData?: Record<string, number>;
 }
 
 interface RepoCommit {
@@ -16,6 +17,7 @@ interface RepoCommit {
 export default function DailyBreakdownSheet({
   date,
   onClose,
+  heatmapData,
 }: DailyBreakdownSheetProps) {
   const [commits, setCommits] = useState<RepoCommit[]>([]);
   const [loading, setLoading] = useState(false);
@@ -23,24 +25,34 @@ export default function DailyBreakdownSheet({
 
   useEffect(() => {
     if (!date) return;
+    const totalForDay = heatmapData?.[date] ?? 0;
+    if (totalForDay === 0) {
+      setCommits([]);
+      setLoading(false);
+      return;
+    }
     setLoading(true);
-    fetch(`/api/metrics/contributions?days=365`)
-      .then((res) => res.json())
-      .then((result) => {
-        const repoData = result.repos?.[date] ?? [];
-        setCommits(repoData);
-      })
+    fetch(`/api/metrics/contributions/daily?date=${date}`)
+    .then((res) => res.json())
+    .then((result) => {
+        setCommits(result.repos ?? []);
+    })
       .catch(() => setCommits([]))
       .finally(() => setLoading(false));
-  }, [date]);
+  }, [date, heatmapData]);
+
+  const onCloseRef = useRef(onClose);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
+      if (e.key === "Escape") onCloseRef.current();
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [onClose]);
+  }, []);
 
   if (!isOpen) return null;
 
@@ -124,4 +136,4 @@ export default function DailyBreakdownSheet({
       </div>
     </>
   );
-}
\ No newline at end of file
+}

From 9acbc7f5870e838af28d119406cbbb6ac11938a4 Mon Sep 17 00:00:00 2001
From: devendra-w <devendra.25bai10969@vitbhopal.ac.in>
Date: Thu, 21 May 2026 23:39:49 +0530
Subject: [PATCH 4/6] fix: add EOF newlines

---
 .../api/metrics/contributions/daily/route.ts  | Bin 1894 -> 1962 bytes
 src/components/ContributionHeatmap.tsx        | 696 +++++++++---------
 src/components/DailyBreakdownSheet.tsx        | Bin 4221 -> 4364 bytes
 3 files changed, 349 insertions(+), 347 deletions(-)

diff --git a/src/app/api/metrics/contributions/daily/route.ts b/src/app/api/metrics/contributions/daily/route.ts
index 66b36746a892f9042b68e9c2fe7e82ff7911f607..7bf8220b2ac8bb45834353f12d9ad57b1e020ef5 100644
GIT binary patch
delta 487
zcmaFHw~Bv)E+g+mU2Px{p#>zGw3&IicqgvY2nJGInRz9tMQMr2sR}`<1^LeTxw)Ao
z3e~(^3JOI)zLi38Nl|8Ax;023IlnZo#7ZHrG&d==2rN=sl!K(A7HHmNMMgbF-pT%q
z=0LIyOcpY!On%6y!~rq_tb~Kf6ewxSWCA1$nF0l25<vNqqDr9Ulg~3L1LZz3r2`$P
z00uz8L}p>2U<tDokX*-X$P1GKnySM)`4zLY9!vyi3rLeD(2WpQW}1SAVsUC>QF2C5
zYO!8^wkF6HJr*CRJlI){Ec!r`H?W8T$)hZ`CUDd2z<vc<12<1!U%|a7zq9}tB%tsr
zR!FJ@2N&;TLsk!<_DWV&AUTf}6bM&Y6@lb8Rx7w)YI!GHuqh#1oycYjQqN||jpTA*
m*vL%&&Bo6M60226PAo~z067~Jo>uH?JYZp7u3BCOE(QQ*k8rpE

delta 430
zcmYLFO-sW-5G7w*iPfG&p@Lhh(%LpbREnt;1W~Vg6a>?_+Mr3wCOL$Xqj$sL!Jp7x
z{TqH9y?GRG{skv7)`i_+-n@M?^Twsm+51+aHIlRS<gOv8$x{uVkNHiNQqBgRLH&T+
z?sW%q%M0DWpl;~&7*Bza-~QKQ6*NJEbD<3ncwdA=1u2M@#cendw-8x@vDli)P<#R&
z(II?^RVYf=WdzbQ%p;|JW?nMx8^}o{1D>Ug=}9eaf-0Arc^+r6-chq?U(s5{XC}A$
zr_9&9n|dY+uR;|fd99F<aIBH6&*cJkz#MF}&$$`x4&htw>UkyJOZUVza&cX!N8Aes
z=!N6hflqr;W)oZ}$1qY>;Z12nfm9^?1uj{D1F|&rrv(mKp0s}?U3e!uzeSuK?OB9&
Xp;Sb6Of568`nY-O84gWSP>p{8U7m4$

diff --git a/src/components/ContributionHeatmap.tsx b/src/components/ContributionHeatmap.tsx
index 6ce0d61d..fb8dffac 100644
--- a/src/components/ContributionHeatmap.tsx
+++ b/src/components/ContributionHeatmap.tsx
@@ -1,347 +1,349 @@
-"use client";
-
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useHeatmapTheme } from "@/hooks/useHeatmapTheme";
-import DailyBreakdownSheet from "@/components/DailyBreakdownSheet";
-
-interface ContributionHeatmapProps {
-  days?: number;
-}
-
-interface ContributionResponse {
-  data: Record<string, number>;
-}
-
-interface HeatmapCell {
-  date: Date;
-  dateKey: string;
-  count: number;
-  inRange: boolean;
-}
-
-const DEFAULT_DAYS = 365;
-const CELL_SIZE = 12;
-const CELL_GAP = 2;
-const LABEL_WIDTH = 42;
-const HEADER_HEIGHT = 18;
-
-const DAY_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-
-// Memoized formatting engine to avoid recreation garbage collection cycles inside render loops
-const monthFormatter = new Intl.DateTimeFormat("en-US", { month: "short" });
-
-function formatDateKey(date: Date) {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
-}
-
-function buildHeatmap(days: number, contributions: Record<string, number>) {
-  const endDate = new Date();
-  endDate.setHours(23, 59, 59, 999);
-
-  const startDate = new Date(endDate);
-  startDate.setDate(endDate.getDate() - (days - 1));
-  startDate.setHours(0, 0, 0, 0);
-
-  const firstWeekStart = new Date(startDate);
-  firstWeekStart.setDate(startDate.getDate() - startDate.getDay());
-  firstWeekStart.setHours(0, 0, 0, 0);
-
-  const lastWeekEnd = new Date(endDate);
-  lastWeekEnd.setDate(endDate.getDate() + (6 - endDate.getDay()));
-  lastWeekEnd.setHours(23, 59, 59, 999);
-
-  const cells: HeatmapCell[] = [];
-  const cursor = new Date(firstWeekStart);
-
-  while (cursor <= lastWeekEnd) {
-    const dateKey = formatDateKey(cursor);
-    cells.push({
-      date: new Date(cursor),
-      dateKey,
-      count: contributions[dateKey] ?? 0,
-      inRange: cursor >= startDate && cursor <= endDate,
-    });
-    cursor.setDate(cursor.getDate() + 1);
-  }
-
-  return cells;
-}
-
-export default function ContributionHeatmap({
-  days = DEFAULT_DAYS,
-}: ContributionHeatmapProps) {
-  const [data, setData] = useState<Record<string, number>>({});
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
-  const [minutesAgo, setMinutesAgo] = useState(0);
-  const [selectedDate, setSelectedDate] = useState<string | null>(null);
-  const handleCloseSheet = useCallback(() => setSelectedDate(null), []);
-
-  useEffect(() => {
-    let active = true;
-    setLoading(true);
-    setError(null);
-
-    fetch(`/api/metrics/contributions?days=${days}`)
-      .then((response) => {
-        if (!response.ok) throw new Error("API error");
-        return response.json();
-      })
-      .then((result: ContributionResponse) => {
-        if (!active) return;
-        setData(result.data ?? {});
-        setLastUpdated(new Date());
-        setMinutesAgo(0);
-      })
-      .catch(() => {
-        if (!active) return;
-        setError("Failed to load contribution heatmap.");
-      })
-      .finally(() => {
-        if (!active) return;
-        setLoading(false);
-      });
-
-    return () => {
-      active = false;
-    };
-  }, [days]);
-
-  useEffect(() => {
-    if (!lastUpdated) return;
-    const interval = setInterval(() => {
-      setMinutesAgo(Math.floor((Date.now() - lastUpdated.getTime()) / 60000));
-    }, 60000);
-    return () => clearInterval(interval);
-  }, [lastUpdated]);
-
-  const { themeConfig, theme, setTheme } = useHeatmapTheme();
-  const cells = useMemo(() => buildHeatmap(days, data), [days, data]);
-  const weekCount = Math.ceil(cells.length / 7);
-
-  // 100% MATHEMATICALLY PRECISE MONTH TRACKING SYSTEM
-  const monthMarkers = useMemo(() => {
-    const markers: Array<{ label: string; weekIndex: number }> = [];
-    const seenMonths = new Set<string>();
-
-    for (let w = 0; w < weekCount; w++) {
-      const weekCells = cells.slice(w * 7, (w + 1) * 7);
-
-      for (const cell of weekCells) {
-        if (!cell.inRange) continue;
-
-        const currentMonth = cell.date.getMonth();
-        const currentYear = cell.date.getFullYear();
-        const monthKey = `${currentYear}-${currentMonth}`;
-
-        if (!seenMonths.has(monthKey)) {
-          seenMonths.add(monthKey);
-
-          markers.push({
-            label: monthFormatter.format(cell.date),
-            weekIndex: w,
-          });
-          break; // Move immediately to scanning the next column track block
-        }
-      }
-    }
-    return markers;
-  }, [cells, weekCount]);
-
-  // Shared matrix geometries matching baseline canvas dimensions
-  const totalGridWidth = LABEL_WIDTH + (weekCount * CELL_SIZE) + ((weekCount - 1) * CELL_GAP);
-
-  const gridStyle = {
-    gridTemplateColumns: `${LABEL_WIDTH}px repeat(${weekCount}, ${CELL_SIZE}px)`,
-    gridTemplateRows: `repeat(7, ${CELL_SIZE}px)`,
-    columnGap: `${CELL_GAP}px`,
-    rowGap: `${CELL_GAP}px`,
-  } as const;
-
-  const today = new Date();
-
-  return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
-      <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
-        <div>
-          <h2 className="text-lg font-semibold text-[var(--card-foreground)]">Contribution Heatmap</h2>
-          <p className="text-sm text-[var(--muted-foreground)]">Last {days} days of commit activity.</p>
-        </div>
-
-        <div className="flex items-center gap-2">
-          <button
-            type="button"
-            onClick={() => setTheme("default")}
-            style={theme === "default" ? { backgroundColor: themeConfig.accent, color: "#fff" } : undefined}
-            className="rounded px-2 py-1 text-xs"
-          >
-            Default
-          </button>
-          <button
-            type="button"
-            onClick={() => setTheme("colour-blind-friendly")}
-            style={theme === "colour-blind-friendly" ? { backgroundColor: themeConfig.accent, color: "#fff" } : undefined}
-            className="rounded px-2 py-1 text-xs"
-          >
-            Colour-blind
-          </button>
-        </div>
-
-        <div className="flex items-center gap-2 text-xs text-[var(--muted-foreground)]">
-          <span>Less</span>
-          <div className="flex items-center gap-1">
-            {[0, 1, 3, 6, 10].map((count) => {
-              const swatch =
-                count === 0
-                  ? themeConfig.missed
-                  : count < 3
-                  ? themeConfig.levelOne
-                  : count < 6
-                  ? themeConfig.levelTwo
-                  : count < 10
-                  ? themeConfig.levelThree
-                  : themeConfig.levelFour;
-
-              return (
-                <span
-                  key={count}
-                  className="h-3 w-3 rounded-sm border"
-                  style={{ backgroundColor: swatch, borderColor: themeConfig.border }}
-                />
-              );
-            })}
-          </div>
-          <span>More</span>
-        </div>
-      </div>
-
-      {loading ? (
-        <div className="h-[180px] animate-pulse rounded-lg bg-[var(--card-muted)]" />
-      ) : error ? (
-        <div className="flex h-[180px] items-center rounded-lg border border-red-500/30 bg-red-500/10 px-4">
-          <p className="text-sm text-red-400">{error} Please try refreshing.</p>
-        </div>
-      ) : (
-        <>
-          <div className="overflow-x-auto pb-2">
-            <div className="mx-auto flex flex-col gap-1" style={{ width: `${totalGridWidth}px` }}>
-              
-              {/* MATHEMATICAL COORDINATE TIMELINE HEADER BANNER CONTAINER */}
-              <div 
-                className="relative w-full text-[10px] font-medium text-[var(--muted-foreground)]" 
-                style={{ height: `${HEADER_HEIGHT}px` }}
-              >
-                {monthMarkers.map((marker) => {
-                  const absoluteLeftOffset = LABEL_WIDTH + (marker.weekIndex * (CELL_SIZE + CELL_GAP));
-
-                  return (
-                    <div
-                      key={`${marker.label}-${marker.weekIndex}`}
-                      className="absolute top-0 text-left overflow-hidden text-ellipsis whitespace-nowrap"
-                      style={{
-                        left: `${absoluteLeftOffset}px`,
-                        width: "auto",
-                        minWidth: "max-content",
-                        paddingRight: "4px",
-                      }}
-                    >
-                      {marker.label}
-                    </div>
-                  );
-                })}
-              </div>
-
-              {/* Grid System Area mapping identical columns */}
-              <div className="grid items-center" style={gridStyle}>
-                {DAY_LABELS.map((label, rowIndex) => (
-                  <div
-                    key={label}
-                    className="flex items-center justify-end pr-2 text-[10px] text-[var(--muted-foreground)]"
-                    style={{
-                      gridRow: rowIndex + 1,
-                      gridColumn: 1,
-                      opacity: rowIndex % 2 === 0 ? 1 : 0,
-                    }}
-                  >
-                    {rowIndex % 2 === 0 ? label : ""}
-                  </div>
-                ))}
-
-                {cells.map((cell, index) => {
-                  const weekIndex = Math.floor(index / 7);
-                  const dayIndex = index % 7;
-                  const isFuture = cell.date > today;
-                  const showTooltipBelow = dayIndex < 2;
-                  const tooltip = `${cell.date.toLocaleDateString("en-US", {
-                    weekday: "short",
-                    month: "short",
-                    day: "numeric",
-                  })}: ${cell.count} commit${cell.count === 1 ? "" : "s"}`;
-
-                  return (
-                    <button
-                      key={cell.dateKey}
-                      type="button"
-                      title={isFuture ? "" : tooltip}
-                      aria-label={isFuture ? `${cell.dateKey}: future date` : tooltip}
-                      disabled={isFuture}
-                      onClick={() => !isFuture && setSelectedDate(cell.dateKey)}
-                      className={`group relative z-0 h-3 w-3 rounded-[3px] border transition-transform hover:z-20 hover:scale-110 focus:z-20 focus:outline-none focus:ring-2 focus:ring-[var(--heatmap-focus-ring)] disabled:cursor-default disabled:opacity-30 ${
-                        cell.inRange ? "" : "opacity-35"
-                      }`}
-                      style={{
-                        gridRow: dayIndex + 1,
-                        gridColumn: weekIndex + 2,
-                        backgroundColor: isFuture
-                          ? "transparent"
-                          : cell.count === 0
-                          ? themeConfig.missed
-                          : cell.count < 3
-                          ? themeConfig.levelOne
-                          : cell.count < 6
-                          ? themeConfig.levelTwo
-                          : cell.count < 10
-                          ? themeConfig.levelThree
-                          : themeConfig.levelFour,
-                        borderColor: themeConfig.border,
-                        ["--heatmap-focus-ring" as any]: themeConfig.accent,
-                      }}
-                    >
-                      {!isFuture && (
-                        <span
-                          className={`pointer-events-none absolute left-1/2 z-50 hidden -translate-x-1/2 whitespace-nowrap rounded-md bg-[var(--foreground)] px-2 py-1 text-[11px] text-[var(--background)] shadow-lg group-hover:block group-focus:block ${
-                            showTooltipBelow ? "top-full mt-2" : "bottom-full mb-2"
-                          }`}
-                        >
-                          {tooltip}
-                        </span>
-                      )}
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-
-          <div className="mt-4 flex items-center justify-between gap-4 text-xs text-[var(--muted-foreground)]">
-            <p>
-              {cells.filter((cell) => cell.inRange).reduce((total, cell) => total + cell.count, 0)} commits shown across {days} days.
-            </p>
-            {lastUpdated && (
-              <p>{minutesAgo === 0 ? "Updated just now" : `Updated ${minutesAgo} min ago`}</p>
-            )}
-          </div>
-        </>
-      )}
-      <DailyBreakdownSheet
-        date={selectedDate}
-        onClose={handleCloseSheet}
-        heatmapData={data}
-      />
-    </div>
-  );
-}
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useHeatmapTheme } from "@/hooks/useHeatmapTheme";
+import DailyBreakdownSheet from "@/components/DailyBreakdownSheet";
+
+interface ContributionHeatmapProps {
+  days?: number;
+}
+
+interface ContributionResponse {
+  data: Record<string, number>;
+}
+
+interface HeatmapCell {
+  date: Date;
+  dateKey: string;
+  count: number;
+  inRange: boolean;
+}
+
+const DEFAULT_DAYS = 365;
+const CELL_SIZE = 12;
+const CELL_GAP = 2;
+const LABEL_WIDTH = 42;
+const HEADER_HEIGHT = 18;
+
+const DAY_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+// Memoized formatting engine to avoid recreation garbage collection cycles inside render loops
+const monthFormatter = new Intl.DateTimeFormat("en-US", { month: "short" });
+
+function formatDateKey(date: Date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+function buildHeatmap(days: number, contributions: Record<string, number>) {
+  const endDate = new Date();
+  endDate.setHours(23, 59, 59, 999);
+
+  const startDate = new Date(endDate);
+  startDate.setDate(endDate.getDate() - (days - 1));
+  startDate.setHours(0, 0, 0, 0);
+
+  const firstWeekStart = new Date(startDate);
+  firstWeekStart.setDate(startDate.getDate() - startDate.getDay());
+  firstWeekStart.setHours(0, 0, 0, 0);
+
+  const lastWeekEnd = new Date(endDate);
+  lastWeekEnd.setDate(endDate.getDate() + (6 - endDate.getDay()));
+  lastWeekEnd.setHours(23, 59, 59, 999);
+
+  const cells: HeatmapCell[] = [];
+  const cursor = new Date(firstWeekStart);
+
+  while (cursor <= lastWeekEnd) {
+    const dateKey = formatDateKey(cursor);
+    cells.push({
+      date: new Date(cursor),
+      dateKey,
+      count: contributions[dateKey] ?? 0,
+      inRange: cursor >= startDate && cursor <= endDate,
+    });
+    cursor.setDate(cursor.getDate() + 1);
+  }
+
+  return cells;
+}
+
+export default function ContributionHeatmap({
+  days = DEFAULT_DAYS,
+}: ContributionHeatmapProps) {
+  const [data, setData] = useState<Record<string, number>>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
+  const [minutesAgo, setMinutesAgo] = useState(0);
+  const [selectedDate, setSelectedDate] = useState<string | null>(null);
+  const handleCloseSheet = useCallback(() => setSelectedDate(null), []);
+
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+    setError(null);
+
+    fetch(`/api/metrics/contributions?days=${days}`)
+      .then((response) => {
+        if (!response.ok) throw new Error("API error");
+        return response.json();
+      })
+      .then((result: ContributionResponse) => {
+        if (!active) return;
+        setData(result.data ?? {});
+        setLastUpdated(new Date());
+        setMinutesAgo(0);
+      })
+      .catch(() => {
+        if (!active) return;
+        setError("Failed to load contribution heatmap.");
+      })
+      .finally(() => {
+        if (!active) return;
+        setLoading(false);
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [days]);
+
+  useEffect(() => {
+    if (!lastUpdated) return;
+    const interval = setInterval(() => {
+      setMinutesAgo(Math.floor((Date.now() - lastUpdated.getTime()) / 60000));
+    }, 60000);
+    return () => clearInterval(interval);
+  }, [lastUpdated]);
+
+  const { themeConfig, theme, setTheme } = useHeatmapTheme();
+  const cells = useMemo(() => buildHeatmap(days, data), [days, data]);
+  const weekCount = Math.ceil(cells.length / 7);
+
+  // 100% MATHEMATICALLY PRECISE MONTH TRACKING SYSTEM
+  const monthMarkers = useMemo(() => {
+    const markers: Array<{ label: string; weekIndex: number }> = [];
+    const seenMonths = new Set<string>();
+
+    for (let w = 0; w < weekCount; w++) {
+      const weekCells = cells.slice(w * 7, (w + 1) * 7);
+
+      for (const cell of weekCells) {
+        if (!cell.inRange) continue;
+
+        const currentMonth = cell.date.getMonth();
+        const currentYear = cell.date.getFullYear();
+        const monthKey = `${currentYear}-${currentMonth}`;
+
+        if (!seenMonths.has(monthKey)) {
+          seenMonths.add(monthKey);
+
+          markers.push({
+            label: monthFormatter.format(cell.date),
+            weekIndex: w,
+          });
+          break; // Move immediately to scanning the next column track block
+        }
+      }
+    }
+    return markers;
+  }, [cells, weekCount]);
+
+  // Shared matrix geometries matching baseline canvas dimensions
+  const totalGridWidth = LABEL_WIDTH + (weekCount * CELL_SIZE) + ((weekCount - 1) * CELL_GAP);
+
+  const gridStyle = {
+    gridTemplateColumns: `${LABEL_WIDTH}px repeat(${weekCount}, ${CELL_SIZE}px)`,
+    gridTemplateRows: `repeat(7, ${CELL_SIZE}px)`,
+    columnGap: `${CELL_GAP}px`,
+    rowGap: `${CELL_GAP}px`,
+  } as const;
+
+  const today = new Date();
+
+  return (
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
+        <div>
+          <h2 className="text-lg font-semibold text-[var(--card-foreground)]">Contribution Heatmap</h2>
+          <p className="text-sm text-[var(--muted-foreground)]">Last {days} days of commit activity.</p>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => setTheme("default")}
+            style={theme === "default" ? { backgroundColor: themeConfig.accent, color: "#fff" } : undefined}
+            className="rounded px-2 py-1 text-xs"
+          >
+            Default
+          </button>
+          <button
+            type="button"
+            onClick={() => setTheme("colour-blind-friendly")}
+            style={theme === "colour-blind-friendly" ? { backgroundColor: themeConfig.accent, color: "#fff" } : undefined}
+            className="rounded px-2 py-1 text-xs"
+          >
+            Colour-blind
+          </button>
+        </div>
+
+        <div className="flex items-center gap-2 text-xs text-[var(--muted-foreground)]">
+          <span>Less</span>
+          <div className="flex items-center gap-1">
+            {[0, 1, 3, 6, 10].map((count) => {
+              const swatch =
+                count === 0
+                  ? themeConfig.missed
+                  : count < 3
+                  ? themeConfig.levelOne
+                  : count < 6
+                  ? themeConfig.levelTwo
+                  : count < 10
+                  ? themeConfig.levelThree
+                  : themeConfig.levelFour;
+
+              return (
+                <span
+                  key={count}
+                  className="h-3 w-3 rounded-sm border"
+                  style={{ backgroundColor: swatch, borderColor: themeConfig.border }}
+                />
+              );
+            })}
+          </div>
+          <span>More</span>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="h-[180px] animate-pulse rounded-lg bg-[var(--card-muted)]" />
+      ) : error ? (
+        <div className="flex h-[180px] items-center rounded-lg border border-red-500/30 bg-red-500/10 px-4">
+          <p className="text-sm text-red-400">{error} Please try refreshing.</p>
+        </div>
+      ) : (
+        <>
+          <div className="overflow-x-auto pb-2">
+            <div className="mx-auto flex flex-col gap-1" style={{ width: `${totalGridWidth}px` }}>
+              
+              {/* MATHEMATICAL COORDINATE TIMELINE HEADER BANNER CONTAINER */}
+              <div 
+                className="relative w-full text-[10px] font-medium text-[var(--muted-foreground)]" 
+                style={{ height: `${HEADER_HEIGHT}px` }}
+              >
+                {monthMarkers.map((marker) => {
+                  const absoluteLeftOffset = LABEL_WIDTH + (marker.weekIndex * (CELL_SIZE + CELL_GAP));
+
+                  return (
+                    <div
+                      key={`${marker.label}-${marker.weekIndex}`}
+                      className="absolute top-0 text-left overflow-hidden text-ellipsis whitespace-nowrap"
+                      style={{
+                        left: `${absoluteLeftOffset}px`,
+                        width: "auto",
+                        minWidth: "max-content",
+                        paddingRight: "4px",
+                      }}
+                    >
+                      {marker.label}
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* Grid System Area mapping identical columns */}
+              <div className="grid items-center" style={gridStyle}>
+                {DAY_LABELS.map((label, rowIndex) => (
+                  <div
+                    key={label}
+                    className="flex items-center justify-end pr-2 text-[10px] text-[var(--muted-foreground)]"
+                    style={{
+                      gridRow: rowIndex + 1,
+                      gridColumn: 1,
+                      opacity: rowIndex % 2 === 0 ? 1 : 0,
+                    }}
+                  >
+                    {rowIndex % 2 === 0 ? label : ""}
+                  </div>
+                ))}
+
+                {cells.map((cell, index) => {
+                  const weekIndex = Math.floor(index / 7);
+                  const dayIndex = index % 7;
+                  const isFuture = cell.date > today;
+                  const showTooltipBelow = dayIndex < 2;
+                  const tooltip = `${cell.date.toLocaleDateString("en-US", {
+                    weekday: "short",
+                    month: "short",
+                    day: "numeric",
+                  })}: ${cell.count} commit${cell.count === 1 ? "" : "s"}`;
+
+                  return (
+                    <button
+                      key={cell.dateKey}
+                      type="button"
+                      title={isFuture ? "" : tooltip}
+                      aria-label={isFuture ? `${cell.dateKey}: future date` : tooltip}
+                      disabled={isFuture}
+                      onClick={() => !isFuture && setSelectedDate(cell.dateKey)}
+                      className={`group relative z-0 h-3 w-3 rounded-[3px] border transition-transform hover:z-20 hover:scale-110 focus:z-20 focus:outline-none focus:ring-2 focus:ring-[var(--heatmap-focus-ring)] disabled:cursor-default disabled:opacity-30 ${
+                        cell.inRange ? "" : "opacity-35"
+                      }`}
+                      style={{
+                        gridRow: dayIndex + 1,
+                        gridColumn: weekIndex + 2,
+                        backgroundColor: isFuture
+                          ? "transparent"
+                          : cell.count === 0
+                          ? themeConfig.missed
+                          : cell.count < 3
+                          ? themeConfig.levelOne
+                          : cell.count < 6
+                          ? themeConfig.levelTwo
+                          : cell.count < 10
+                          ? themeConfig.levelThree
+                          : themeConfig.levelFour,
+                        borderColor: themeConfig.border,
+                        ["--heatmap-focus-ring" as any]: themeConfig.accent,
+                      }}
+                    >
+                      {!isFuture && (
+                        <span
+                          className={`pointer-events-none absolute left-1/2 z-50 hidden -translate-x-1/2 whitespace-nowrap rounded-md bg-[var(--foreground)] px-2 py-1 text-[11px] text-[var(--background)] shadow-lg group-hover:block group-focus:block ${
+                            showTooltipBelow ? "top-full mt-2" : "bottom-full mb-2"
+                          }`}
+                        >
+                          {tooltip}
+                        </span>
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-4 flex items-center justify-between gap-4 text-xs text-[var(--muted-foreground)]">
+            <p>
+              {cells.filter((cell) => cell.inRange).reduce((total, cell) => total + cell.count, 0)} commits shown across {days} days.
+            </p>
+            {lastUpdated && (
+              <p>{minutesAgo === 0 ? "Updated just now" : `Updated ${minutesAgo} min ago`}</p>
+            )}
+          </div>
+        </>
+      )}
+      <DailyBreakdownSheet
+        date={selectedDate}
+        onClose={handleCloseSheet}
+        heatmapData={data}
+      />
+    </div>
+  );
+}
+

+
\ No newline at end of file
diff --git a/src/components/DailyBreakdownSheet.tsx b/src/components/DailyBreakdownSheet.tsx
index f7b7df8f360946da16f6abf84d8816eab87bbcc5..466ed8f97634ca173a3ab7a91065a1bb26630720 100644
GIT binary patch
delta 1484
zcmZ`(&1(}u6mLG8Y%)pEYTLvn!%FK$LSk!6wM{D0RxA{i9z>`gY?H|cY<9zDB9<EU
zDk#_vDn$=^mR<z$;9pR$>P>nO1dqLX5PY+fZ8k-7csnz{_kQp9-kZ!H{6vn)ttP=m
ztwwYz&mswJMy3#aq?%5NSyqdL-Ej>k@CK4FE~%8v;3hR|dIjIddP~!0(dMH;7utNO
zTt`y7ClIfYhB0r{>oqFEP1xJvkP73X(bDM*@YL6cX`Qr8&EdiMSlE>vvy*4|!qDe6
zqe-lFm8i6?HWpN>W)QpSO1Ti*aOJ^%bd7`k<-$W;6vj~IV!2F;R8i8nFb9g*h#Qo%
zN%zD<?tpQvj1_87Rl8)E3+g&96bkrET4?8ZlTcAkQ(3*0w)A$6mkqT9JyFW4)+AlT
zB(!Df9Y-kUkT*43!kO*4&x4XdPbw~)vb0KcMKMXUrBPe%6^{}Wa664y+j9~^-gwer
zcRdLYZ`DuF*m3Uhk6Ke+`80>x8NAwQpjE<u+$-J*;NA94+8JjN`|9N)k#8wt6A1>U
z`c7EsANWSV;g#<q*zdmKVeTe=bwj7s87ymtUXfu?VgJxd7hNZ+2_RepV%Ca)cjBN-
zYXz7LP2?NVQLG3cKWDq<OSQX*>Hf2j`mH|>_LD!6wb5L!-+?UC&`3cp)l|)>$Y`sd
z$Hn{k?a}>l*66QVIe7_lh^f-ZRwT(1fzcy2FGqN0K(7UsAZ$C39B_gF=c*F`?*`@p
z4hNIx4#SNDZ5CV3qB~Fs1Zyoy4IQ!DK`!rJFbVcWaMX<?HXa&eUxHT`oSZ#$82@<v
z+==FMg3jTU7b&5>DaXVx-q6IQ#uuR7Y)4Wc?>A{|&`HN7ixwaj3vqpWD9J8|raA)>
zxUk(J*r(}q8?o`&Q3(4GIt6w|8ezXf1usv*J_l0lMwnmnjqvob!&&n=XdDmj8Ack<
zbj8LH=iHADxK*xhSfZq!<!=yV)sYO?Gt0h58CdV3$A?D8WkL=hU{52<;PNh-@OR?(
zqr6xF#n^O|TJWNE7PtOrc9G(n&#8`<i!;0Yp7B9T4u;>EOlR-h<wZ03OT*vDKB@07
D`87^L

delta 1527
zcmZuxO=}ZD7$!|((oLI2TWziVm~Lsi3$>}$`jPCWXsTGK6ugSmX?D^q-R#EQNhO3J
zh(`~W7ePTpq(8ueh`&Gt@u+9<D4sld@ndFZ+pKBlke&Bqp7(j5cQTLU-zY8DJ%UP>
zNo*?TrJc-TMB2GNwPOzsN(ec2(Q-VJLyC&@0@`*=Bfs-PxgoVA$+RhP%eX|)O;U4;
zPPJ-M)MSTTX6BGbUDMvoGrQ!}ZJI-Ny}ChM?x?#~JKmCDBr+#6w}B~{W#6DE-&P2w
zRa{%f6wg8}G7gU;8hnbJfxi(nD{&}~TrHPLi7J92uaA&fM#=<-QyCdrckMi^buEnU
z$EZWGb<J^?aRcePj^<U=gqK|>ihc${9-*raHW+`Uj4h9-oHbtons2rI-%u)b>ns!g
zbmbuz9Ut<;bF@NiMRAE&x2UgS6TGOB5C|&lMknDzR2^Y<YZl$|B?xzYo0W!4Y<hqt
z9OxBRWAb!xG7ydDADa3!wg4Yv=Yqm{NX9S0mH0|3IPTYZ79WX7@Gd?IU*ebVvxr#t
z2-z}lBZp+mu{UKt7qP02O)Cf8BA1PuxMnGo-XPdz*`0xw>I1R}yMJseG)Dc3@74-I
zIn6M);mwh=>wzuqiCNmxn?dhlAe<U@O?<jy8V0d-nU95EFTS#2w0$7gv4}1kCbpbS
z8CDa+u$j<cH}N1Dq!eI2c_*`<j}RwQfLF;C_>mkt77DOXwz5!wvF>79KvBC{cHAna
zlo;$flQvl%)v~ocX2Rt7Ay{prPN`#uJP6T7jj<Miz5YZcu7_Dlg_MDx-BWC|>*+z5
zm)4d-IN>S?eS7{S6w|T-y`7_F{l@2$qwrN4;xEMBYFgqCgO-p2M^g&qQqzD_$Kh_K
zKe0s`dedz2J#3{@@H(}4F?3d7?9XNoQdK)e@{3RO%&-EZQ0~#A3<Soz$Kid?Bz*6=
zaJ~byLsqVHhp;MQZ=28eVebs%HxR)-%g?=i{`Xh#J(U)AA$>CFV*CHGbJ7J40Ns77
zeo7&ejPs|Ew>=z0GVr#K2GIrX_c|DJiny(}km7J5LMKB){nug0(0qB>>(G+^0sK3A
AbpQYW


From 322c5fe6b4492e680962e586a4715251d08812b4 Mon Sep 17 00:00:00 2001
From: devendra-w <devendra.25bai10969@vitbhopal.ac.in>
Date: Fri, 22 May 2026 12:35:51 +0530
Subject: [PATCH 5/6] fix: add EOF newlines

---
 .../api/metrics/contributions/daily/route.ts  | Bin 1962 -> 1898 bytes
 src/components/ContributionHeatmap.tsx        | 696 +++++++++---------
 src/components/DailyBreakdownSheet.tsx        | Bin 4364 -> 4224 bytes
 3 files changed, 347 insertions(+), 349 deletions(-)

diff --git a/src/app/api/metrics/contributions/daily/route.ts b/src/app/api/metrics/contributions/daily/route.ts
index 7bf8220b2ac8bb45834353f12d9ad57b1e020ef5..a8ff88c5dd913aa51c33da2a1a0a1054965fe2c9 100644
GIT binary patch
delta 435
zcmYLFO-sW-5G9|LSnWv^D!8>Ot!)!TrI=bl5cR4@K`@PL8#GDTB!^IP^llhD_!HWz
zM-To1KaSo!i<kZdCo$HA-C^FmeKYe$h3{Em{PcX+h}BwrwjSTsI3<3p;PW}ZsSv_w
z-_?odGt23=FgM-6@pa+^c89VA2-wYkJyJmBR5<6FaF6$uJCu-uXp!HB6MhSk6&Uf2
znH0sxXCWED7hi_F&@Cd6oIw@|=~3g7GEYZNEa>neY)nsTQ5_VqSkLk(jn$TtM(c`H
zN**<s**m44>Rwk<QF!CZ5Q=NLl!RjqMQtt<uzYG`qkYDVaCZP>v8`p5XfN3l*T}>*
zjT|vI=%W|5ZTTMQgsDw%Asxd|T7`G12|2kW;4g6G1vrqGrv9|RmX{~(ALKTC$UDD9
coE`01gl4XgM|MO^!#8`ldE!|%bfiSe59}9n_y7O^

delta 494
zcmaFGw~Buvvo0g=L<4Og5v>IzTD6&Zxp*gT)CdMrT$y<#sYPjt$*BrKsRjAY`MJ57
zB?{HNTnY+BK)#hiaY<2TUb;0%AUVG@uf$3ruQWF)wFoRyT9kvNq84c0WEDm|M&8Lm
zjOIYH6HFdpbmIVN2TOA^nF1vom`s4=0Y;U{GnjM*VUj>KB}J7$%O_uAQU=O@WlEO=
z$$<daMG$62YGO)iQLz<BVL7uEP~k>qLtdCdpglUglixB+>%l~T_JTBO0$mJYWu_@;
zC>EzC7A0o{r55YuXKR9tGGy_A%7Y!+!lEw@Ga<7iH5X`~V^L9Jr43N&2^L#1m|U$L
zI3$49g3O;R&MFIZkO`{?kgQ=<1(FL{K|yhYRS`)3WVM3Y0Sb=E)@(}1R;IAog4DBF
rawEAI7)mme|FQA&fy8PRk`qgkGeFJ-1)eRt8V^{Qm#dbSfr|kE_2_aZ

diff --git a/src/components/ContributionHeatmap.tsx b/src/components/ContributionHeatmap.tsx
index fb8dffac..28cb253b 100644
--- a/src/components/ContributionHeatmap.tsx
+++ b/src/components/ContributionHeatmap.tsx
@@ -1,349 +1,347 @@
-"use client";
-
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useHeatmapTheme } from "@/hooks/useHeatmapTheme";
-import DailyBreakdownSheet from "@/components/DailyBreakdownSheet";
-
-interface ContributionHeatmapProps {
-  days?: number;
-}
-
-interface ContributionResponse {
-  data: Record<string, number>;
-}
-
-interface HeatmapCell {
-  date: Date;
-  dateKey: string;
-  count: number;
-  inRange: boolean;
-}
-
-const DEFAULT_DAYS = 365;
-const CELL_SIZE = 12;
-const CELL_GAP = 2;
-const LABEL_WIDTH = 42;
-const HEADER_HEIGHT = 18;
-
-const DAY_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-
-// Memoized formatting engine to avoid recreation garbage collection cycles inside render loops
-const monthFormatter = new Intl.DateTimeFormat("en-US", { month: "short" });
-
-function formatDateKey(date: Date) {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
-}
-
-function buildHeatmap(days: number, contributions: Record<string, number>) {
-  const endDate = new Date();
-  endDate.setHours(23, 59, 59, 999);
-
-  const startDate = new Date(endDate);
-  startDate.setDate(endDate.getDate() - (days - 1));
-  startDate.setHours(0, 0, 0, 0);
-
-  const firstWeekStart = new Date(startDate);
-  firstWeekStart.setDate(startDate.getDate() - startDate.getDay());
-  firstWeekStart.setHours(0, 0, 0, 0);
-
-  const lastWeekEnd = new Date(endDate);
-  lastWeekEnd.setDate(endDate.getDate() + (6 - endDate.getDay()));
-  lastWeekEnd.setHours(23, 59, 59, 999);
-
-  const cells: HeatmapCell[] = [];
-  const cursor = new Date(firstWeekStart);
-
-  while (cursor <= lastWeekEnd) {
-    const dateKey = formatDateKey(cursor);
-    cells.push({
-      date: new Date(cursor),
-      dateKey,
-      count: contributions[dateKey] ?? 0,
-      inRange: cursor >= startDate && cursor <= endDate,
-    });
-    cursor.setDate(cursor.getDate() + 1);
-  }
-
-  return cells;
-}
-
-export default function ContributionHeatmap({
-  days = DEFAULT_DAYS,
-}: ContributionHeatmapProps) {
-  const [data, setData] = useState<Record<string, number>>({});
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
-  const [minutesAgo, setMinutesAgo] = useState(0);
-  const [selectedDate, setSelectedDate] = useState<string | null>(null);
-  const handleCloseSheet = useCallback(() => setSelectedDate(null), []);
-
-  useEffect(() => {
-    let active = true;
-    setLoading(true);
-    setError(null);
-
-    fetch(`/api/metrics/contributions?days=${days}`)
-      .then((response) => {
-        if (!response.ok) throw new Error("API error");
-        return response.json();
-      })
-      .then((result: ContributionResponse) => {
-        if (!active) return;
-        setData(result.data ?? {});
-        setLastUpdated(new Date());
-        setMinutesAgo(0);
-      })
-      .catch(() => {
-        if (!active) return;
-        setError("Failed to load contribution heatmap.");
-      })
-      .finally(() => {
-        if (!active) return;
-        setLoading(false);
-      });
-
-    return () => {
-      active = false;
-    };
-  }, [days]);
-
-  useEffect(() => {
-    if (!lastUpdated) return;
-    const interval = setInterval(() => {
-      setMinutesAgo(Math.floor((Date.now() - lastUpdated.getTime()) / 60000));
-    }, 60000);
-    return () => clearInterval(interval);
-  }, [lastUpdated]);
-
-  const { themeConfig, theme, setTheme } = useHeatmapTheme();
-  const cells = useMemo(() => buildHeatmap(days, data), [days, data]);
-  const weekCount = Math.ceil(cells.length / 7);
-
-  // 100% MATHEMATICALLY PRECISE MONTH TRACKING SYSTEM
-  const monthMarkers = useMemo(() => {
-    const markers: Array<{ label: string; weekIndex: number }> = [];
-    const seenMonths = new Set<string>();
-
-    for (let w = 0; w < weekCount; w++) {
-      const weekCells = cells.slice(w * 7, (w + 1) * 7);
-
-      for (const cell of weekCells) {
-        if (!cell.inRange) continue;
-
-        const currentMonth = cell.date.getMonth();
-        const currentYear = cell.date.getFullYear();
-        const monthKey = `${currentYear}-${currentMonth}`;
-
-        if (!seenMonths.has(monthKey)) {
-          seenMonths.add(monthKey);
-
-          markers.push({
-            label: monthFormatter.format(cell.date),
-            weekIndex: w,
-          });
-          break; // Move immediately to scanning the next column track block
-        }
-      }
-    }
-    return markers;
-  }, [cells, weekCount]);
-
-  // Shared matrix geometries matching baseline canvas dimensions
-  const totalGridWidth = LABEL_WIDTH + (weekCount * CELL_SIZE) + ((weekCount - 1) * CELL_GAP);
-
-  const gridStyle = {
-    gridTemplateColumns: `${LABEL_WIDTH}px repeat(${weekCount}, ${CELL_SIZE}px)`,
-    gridTemplateRows: `repeat(7, ${CELL_SIZE}px)`,
-    columnGap: `${CELL_GAP}px`,
-    rowGap: `${CELL_GAP}px`,
-  } as const;
-
-  const today = new Date();
-
-  return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
-      <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
-        <div>
-          <h2 className="text-lg font-semibold text-[var(--card-foreground)]">Contribution Heatmap</h2>
-          <p className="text-sm text-[var(--muted-foreground)]">Last {days} days of commit activity.</p>
-        </div>
-
-        <div className="flex items-center gap-2">
-          <button
-            type="button"
-            onClick={() => setTheme("default")}
-            style={theme === "default" ? { backgroundColor: themeConfig.accent, color: "#fff" } : undefined}
-            className="rounded px-2 py-1 text-xs"
-          >
-            Default
-          </button>
-          <button
-            type="button"
-            onClick={() => setTheme("colour-blind-friendly")}
-            style={theme === "colour-blind-friendly" ? { backgroundColor: themeConfig.accent, color: "#fff" } : undefined}
-            className="rounded px-2 py-1 text-xs"
-          >
-            Colour-blind
-          </button>
-        </div>
-
-        <div className="flex items-center gap-2 text-xs text-[var(--muted-foreground)]">
-          <span>Less</span>
-          <div className="flex items-center gap-1">
-            {[0, 1, 3, 6, 10].map((count) => {
-              const swatch =
-                count === 0
-                  ? themeConfig.missed
-                  : count < 3
-                  ? themeConfig.levelOne
-                  : count < 6
-                  ? themeConfig.levelTwo
-                  : count < 10
-                  ? themeConfig.levelThree
-                  : themeConfig.levelFour;
-
-              return (
-                <span
-                  key={count}
-                  className="h-3 w-3 rounded-sm border"
-                  style={{ backgroundColor: swatch, borderColor: themeConfig.border }}
-                />
-              );
-            })}
-          </div>
-          <span>More</span>
-        </div>
-      </div>
-
-      {loading ? (
-        <div className="h-[180px] animate-pulse rounded-lg bg-[var(--card-muted)]" />
-      ) : error ? (
-        <div className="flex h-[180px] items-center rounded-lg border border-red-500/30 bg-red-500/10 px-4">
-          <p className="text-sm text-red-400">{error} Please try refreshing.</p>
-        </div>
-      ) : (
-        <>
-          <div className="overflow-x-auto pb-2">
-            <div className="mx-auto flex flex-col gap-1" style={{ width: `${totalGridWidth}px` }}>
-              
-              {/* MATHEMATICAL COORDINATE TIMELINE HEADER BANNER CONTAINER */}
-              <div 
-                className="relative w-full text-[10px] font-medium text-[var(--muted-foreground)]" 
-                style={{ height: `${HEADER_HEIGHT}px` }}
-              >
-                {monthMarkers.map((marker) => {
-                  const absoluteLeftOffset = LABEL_WIDTH + (marker.weekIndex * (CELL_SIZE + CELL_GAP));
-
-                  return (
-                    <div
-                      key={`${marker.label}-${marker.weekIndex}`}
-                      className="absolute top-0 text-left overflow-hidden text-ellipsis whitespace-nowrap"
-                      style={{
-                        left: `${absoluteLeftOffset}px`,
-                        width: "auto",
-                        minWidth: "max-content",
-                        paddingRight: "4px",
-                      }}
-                    >
-                      {marker.label}
-                    </div>
-                  );
-                })}
-              </div>
-
-              {/* Grid System Area mapping identical columns */}
-              <div className="grid items-center" style={gridStyle}>
-                {DAY_LABELS.map((label, rowIndex) => (
-                  <div
-                    key={label}
-                    className="flex items-center justify-end pr-2 text-[10px] text-[var(--muted-foreground)]"
-                    style={{
-                      gridRow: rowIndex + 1,
-                      gridColumn: 1,
-                      opacity: rowIndex % 2 === 0 ? 1 : 0,
-                    }}
-                  >
-                    {rowIndex % 2 === 0 ? label : ""}
-                  </div>
-                ))}
-
-                {cells.map((cell, index) => {
-                  const weekIndex = Math.floor(index / 7);
-                  const dayIndex = index % 7;
-                  const isFuture = cell.date > today;
-                  const showTooltipBelow = dayIndex < 2;
-                  const tooltip = `${cell.date.toLocaleDateString("en-US", {
-                    weekday: "short",
-                    month: "short",
-                    day: "numeric",
-                  })}: ${cell.count} commit${cell.count === 1 ? "" : "s"}`;
-
-                  return (
-                    <button
-                      key={cell.dateKey}
-                      type="button"
-                      title={isFuture ? "" : tooltip}
-                      aria-label={isFuture ? `${cell.dateKey}: future date` : tooltip}
-                      disabled={isFuture}
-                      onClick={() => !isFuture && setSelectedDate(cell.dateKey)}
-                      className={`group relative z-0 h-3 w-3 rounded-[3px] border transition-transform hover:z-20 hover:scale-110 focus:z-20 focus:outline-none focus:ring-2 focus:ring-[var(--heatmap-focus-ring)] disabled:cursor-default disabled:opacity-30 ${
-                        cell.inRange ? "" : "opacity-35"
-                      }`}
-                      style={{
-                        gridRow: dayIndex + 1,
-                        gridColumn: weekIndex + 2,
-                        backgroundColor: isFuture
-                          ? "transparent"
-                          : cell.count === 0
-                          ? themeConfig.missed
-                          : cell.count < 3
-                          ? themeConfig.levelOne
-                          : cell.count < 6
-                          ? themeConfig.levelTwo
-                          : cell.count < 10
-                          ? themeConfig.levelThree
-                          : themeConfig.levelFour,
-                        borderColor: themeConfig.border,
-                        ["--heatmap-focus-ring" as any]: themeConfig.accent,
-                      }}
-                    >
-                      {!isFuture && (
-                        <span
-                          className={`pointer-events-none absolute left-1/2 z-50 hidden -translate-x-1/2 whitespace-nowrap rounded-md bg-[var(--foreground)] px-2 py-1 text-[11px] text-[var(--background)] shadow-lg group-hover:block group-focus:block ${
-                            showTooltipBelow ? "top-full mt-2" : "bottom-full mb-2"
-                          }`}
-                        >
-                          {tooltip}
-                        </span>
-                      )}
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-
-          <div className="mt-4 flex items-center justify-between gap-4 text-xs text-[var(--muted-foreground)]">
-            <p>
-              {cells.filter((cell) => cell.inRange).reduce((total, cell) => total + cell.count, 0)} commits shown across {days} days.
-            </p>
-            {lastUpdated && (
-              <p>{minutesAgo === 0 ? "Updated just now" : `Updated ${minutesAgo} min ago`}</p>
-            )}
-          </div>
-        </>
-      )}
-      <DailyBreakdownSheet
-        date={selectedDate}
-        onClose={handleCloseSheet}
-        heatmapData={data}
-      />
-    </div>
-  );
-}
-

-
\ No newline at end of file
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useHeatmapTheme } from "@/hooks/useHeatmapTheme";
+import DailyBreakdownSheet from "@/components/DailyBreakdownSheet";
+
+interface ContributionHeatmapProps {
+  days?: number;
+}
+
+interface ContributionResponse {
+  data: Record<string, number>;
+}
+
+interface HeatmapCell {
+  date: Date;
+  dateKey: string;
+  count: number;
+  inRange: boolean;
+}
+
+const DEFAULT_DAYS = 365;
+const CELL_SIZE = 12;
+const CELL_GAP = 2;
+const LABEL_WIDTH = 42;
+const HEADER_HEIGHT = 18;
+
+const DAY_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+// Memoized formatting engine to avoid recreation garbage collection cycles inside render loops
+const monthFormatter = new Intl.DateTimeFormat("en-US", { month: "short" });
+
+function formatDateKey(date: Date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+function buildHeatmap(days: number, contributions: Record<string, number>) {
+  const endDate = new Date();
+  endDate.setHours(23, 59, 59, 999);
+
+  const startDate = new Date(endDate);
+  startDate.setDate(endDate.getDate() - (days - 1));
+  startDate.setHours(0, 0, 0, 0);
+
+  const firstWeekStart = new Date(startDate);
+  firstWeekStart.setDate(startDate.getDate() - startDate.getDay());
+  firstWeekStart.setHours(0, 0, 0, 0);
+
+  const lastWeekEnd = new Date(endDate);
+  lastWeekEnd.setDate(endDate.getDate() + (6 - endDate.getDay()));
+  lastWeekEnd.setHours(23, 59, 59, 999);
+
+  const cells: HeatmapCell[] = [];
+  const cursor = new Date(firstWeekStart);
+
+  while (cursor <= lastWeekEnd) {
+    const dateKey = formatDateKey(cursor);
+    cells.push({
+      date: new Date(cursor),
+      dateKey,
+      count: contributions[dateKey] ?? 0,
+      inRange: cursor >= startDate && cursor <= endDate,
+    });
+    cursor.setDate(cursor.getDate() + 1);
+  }
+
+  return cells;
+}
+
+export default function ContributionHeatmap({
+  days = DEFAULT_DAYS,
+}: ContributionHeatmapProps) {
+  const [data, setData] = useState<Record<string, number>>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
+  const [minutesAgo, setMinutesAgo] = useState(0);
+  const [selectedDate, setSelectedDate] = useState<string | null>(null);
+  const handleCloseSheet = useCallback(() => setSelectedDate(null), []);
+
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+    setError(null);
+
+    fetch(`/api/metrics/contributions?days=${days}`)
+      .then((response) => {
+        if (!response.ok) throw new Error("API error");
+        return response.json();
+      })
+      .then((result: ContributionResponse) => {
+        if (!active) return;
+        setData(result.data ?? {});
+        setLastUpdated(new Date());
+        setMinutesAgo(0);
+      })
+      .catch(() => {
+        if (!active) return;
+        setError("Failed to load contribution heatmap.");
+      })
+      .finally(() => {
+        if (!active) return;
+        setLoading(false);
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [days]);
+
+  useEffect(() => {
+    if (!lastUpdated) return;
+    const interval = setInterval(() => {
+      setMinutesAgo(Math.floor((Date.now() - lastUpdated.getTime()) / 60000));
+    }, 60000);
+    return () => clearInterval(interval);
+  }, [lastUpdated]);
+
+  const { themeConfig, theme, setTheme } = useHeatmapTheme();
+  const cells = useMemo(() => buildHeatmap(days, data), [days, data]);
+  const weekCount = Math.ceil(cells.length / 7);
+
+  // 100% MATHEMATICALLY PRECISE MONTH TRACKING SYSTEM
+  const monthMarkers = useMemo(() => {
+    const markers: Array<{ label: string; weekIndex: number }> = [];
+    const seenMonths = new Set<string>();
+
+    for (let w = 0; w < weekCount; w++) {
+      const weekCells = cells.slice(w * 7, (w + 1) * 7);
+
+      for (const cell of weekCells) {
+        if (!cell.inRange) continue;
+
+        const currentMonth = cell.date.getMonth();
+        const currentYear = cell.date.getFullYear();
+        const monthKey = `${currentYear}-${currentMonth}`;
+
+        if (!seenMonths.has(monthKey)) {
+          seenMonths.add(monthKey);
+
+          markers.push({
+            label: monthFormatter.format(cell.date),
+            weekIndex: w,
+          });
+          break; // Move immediately to scanning the next column track block
+        }
+      }
+    }
+    return markers;
+  }, [cells, weekCount]);
+
+  // Shared matrix geometries matching baseline canvas dimensions
+  const totalGridWidth = LABEL_WIDTH + (weekCount * CELL_SIZE) + ((weekCount - 1) * CELL_GAP);
+
+  const gridStyle = {
+    gridTemplateColumns: `${LABEL_WIDTH}px repeat(${weekCount}, ${CELL_SIZE}px)`,
+    gridTemplateRows: `repeat(7, ${CELL_SIZE}px)`,
+    columnGap: `${CELL_GAP}px`,
+    rowGap: `${CELL_GAP}px`,
+  } as const;
+
+  const today = new Date();
+
+  return (
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
+        <div>
+          <h2 className="text-lg font-semibold text-[var(--card-foreground)]">Contribution Heatmap</h2>
+          <p className="text-sm text-[var(--muted-foreground)]">Last {days} days of commit activity.</p>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => setTheme("default")}
+            style={theme === "default" ? { backgroundColor: themeConfig.accent, color: "#fff" } : undefined}
+            className="rounded px-2 py-1 text-xs"
+          >
+            Default
+          </button>
+          <button
+            type="button"
+            onClick={() => setTheme("colour-blind-friendly")}
+            style={theme === "colour-blind-friendly" ? { backgroundColor: themeConfig.accent, color: "#fff" } : undefined}
+            className="rounded px-2 py-1 text-xs"
+          >
+            Colour-blind
+          </button>
+        </div>
+
+        <div className="flex items-center gap-2 text-xs text-[var(--muted-foreground)]">
+          <span>Less</span>
+          <div className="flex items-center gap-1">
+            {[0, 1, 3, 6, 10].map((count) => {
+              const swatch =
+                count === 0
+                  ? themeConfig.missed
+                  : count < 3
+                  ? themeConfig.levelOne
+                  : count < 6
+                  ? themeConfig.levelTwo
+                  : count < 10
+                  ? themeConfig.levelThree
+                  : themeConfig.levelFour;
+
+              return (
+                <span
+                  key={count}
+                  className="h-3 w-3 rounded-sm border"
+                  style={{ backgroundColor: swatch, borderColor: themeConfig.border }}
+                />
+              );
+            })}
+          </div>
+          <span>More</span>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="h-[180px] animate-pulse rounded-lg bg-[var(--card-muted)]" />
+      ) : error ? (
+        <div className="flex h-[180px] items-center rounded-lg border border-red-500/30 bg-red-500/10 px-4">
+          <p className="text-sm text-red-400">{error} Please try refreshing.</p>
+        </div>
+      ) : (
+        <>
+          <div className="overflow-x-auto pb-2">
+            <div className="mx-auto flex flex-col gap-1" style={{ width: `${totalGridWidth}px` }}>
+              
+              {/* MATHEMATICAL COORDINATE TIMELINE HEADER BANNER CONTAINER */}
+              <div 
+                className="relative w-full text-[10px] font-medium text-[var(--muted-foreground)]" 
+                style={{ height: `${HEADER_HEIGHT}px` }}
+              >
+                {monthMarkers.map((marker) => {
+                  const absoluteLeftOffset = LABEL_WIDTH + (marker.weekIndex * (CELL_SIZE + CELL_GAP));
+
+                  return (
+                    <div
+                      key={`${marker.label}-${marker.weekIndex}`}
+                      className="absolute top-0 text-left overflow-hidden text-ellipsis whitespace-nowrap"
+                      style={{
+                        left: `${absoluteLeftOffset}px`,
+                        width: "auto",
+                        minWidth: "max-content",
+                        paddingRight: "4px",
+                      }}
+                    >
+                      {marker.label}
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* Grid System Area mapping identical columns */}
+              <div className="grid items-center" style={gridStyle}>
+                {DAY_LABELS.map((label, rowIndex) => (
+                  <div
+                    key={label}
+                    className="flex items-center justify-end pr-2 text-[10px] text-[var(--muted-foreground)]"
+                    style={{
+                      gridRow: rowIndex + 1,
+                      gridColumn: 1,
+                      opacity: rowIndex % 2 === 0 ? 1 : 0,
+                    }}
+                  >
+                    {rowIndex % 2 === 0 ? label : ""}
+                  </div>
+                ))}
+
+                {cells.map((cell, index) => {
+                  const weekIndex = Math.floor(index / 7);
+                  const dayIndex = index % 7;
+                  const isFuture = cell.date > today;
+                  const showTooltipBelow = dayIndex < 2;
+                  const tooltip = `${cell.date.toLocaleDateString("en-US", {
+                    weekday: "short",
+                    month: "short",
+                    day: "numeric",
+                  })}: ${cell.count} commit${cell.count === 1 ? "" : "s"}`;
+
+                  return (
+                    <button
+                      key={cell.dateKey}
+                      type="button"
+                      title={isFuture ? "" : tooltip}
+                      aria-label={isFuture ? `${cell.dateKey}: future date` : tooltip}
+                      disabled={isFuture}
+                      onClick={() => !isFuture && setSelectedDate(cell.dateKey)}
+                      className={`group relative z-0 h-3 w-3 rounded-[3px] border transition-transform hover:z-20 hover:scale-110 focus:z-20 focus:outline-none focus:ring-2 focus:ring-[var(--heatmap-focus-ring)] disabled:cursor-default disabled:opacity-30 ${
+                        cell.inRange ? "" : "opacity-35"
+                      }`}
+                      style={{
+                        gridRow: dayIndex + 1,
+                        gridColumn: weekIndex + 2,
+                        backgroundColor: isFuture
+                          ? "transparent"
+                          : cell.count === 0
+                          ? themeConfig.missed
+                          : cell.count < 3
+                          ? themeConfig.levelOne
+                          : cell.count < 6
+                          ? themeConfig.levelTwo
+                          : cell.count < 10
+                          ? themeConfig.levelThree
+                          : themeConfig.levelFour,
+                        borderColor: themeConfig.border,
+                        ["--heatmap-focus-ring" as any]: themeConfig.accent,
+                      }}
+                    >
+                      {!isFuture && (
+                        <span
+                          className={`pointer-events-none absolute left-1/2 z-50 hidden -translate-x-1/2 whitespace-nowrap rounded-md bg-[var(--foreground)] px-2 py-1 text-[11px] text-[var(--background)] shadow-lg group-hover:block group-focus:block ${
+                            showTooltipBelow ? "top-full mt-2" : "bottom-full mb-2"
+                          }`}
+                        >
+                          {tooltip}
+                        </span>
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-4 flex items-center justify-between gap-4 text-xs text-[var(--muted-foreground)]">
+            <p>
+              {cells.filter((cell) => cell.inRange).reduce((total, cell) => total + cell.count, 0)} commits shown across {days} days.
+            </p>
+            {lastUpdated && (
+              <p>{minutesAgo === 0 ? "Updated just now" : `Updated ${minutesAgo} min ago`}</p>
+            )}
+          </div>
+        </>
+      )}
+      <DailyBreakdownSheet
+        date={selectedDate}
+        onClose={handleCloseSheet}
+        heatmapData={data}
+      />
+    </div>
+  );
+}
diff --git a/src/components/DailyBreakdownSheet.tsx b/src/components/DailyBreakdownSheet.tsx
index 466ed8f97634ca173a3ab7a91065a1bb26630720..9bd82d0682df79084f6bf00ad434ea460b82adc7 100644
GIT binary patch
delta 1530
zcmZux&1(}u6emq%(oH{7TWzgvGu_g57iv?h^&{C$(N?igDR>pB)9j>Ky4j7plS&9d
z5sw}$4?#ghq<?@15y68u5yYdO#iIy<Cr|3k&bHa6&LKPRV}9@Ves3}l<hx_NKi|HS
zs~$lG%Op0HbJBKdJ|b;jnb@`m1|)<Wd(m<{l0}M&^gP;fOe44bOt~sGB+0ZXaf`S>
z&^1zV7M*h0q^Qmgxy;NWkGiJ4kz;njsoFG)>}q+PxZF{7t!BI-!Ej_oW^MyhGR?k0
zQNAq^Ov|{kgejheN+b;rBN}{)oP@s-G%ax`k6bDiNr5VYA+L{+SwzYhhf^6DT6OIl
zthUXK?8T@<v31#Tmv9Z~x{hX5REOtnM;HAJggio59BeTDN)cNgQ8{bA0yN)h_`ji4
z>Q-4M{AtTUHkuyv!!xu*Y(;U2SGB0GVI91v5*G+6>_o@mLsT7Rc4Hb{_az8-eS?*T
zRQqH<OE}OgthCFM!O1{0p8wy}$L(|QvHf&VI0uQ?dAJx`P6o&QI!|K55eeSJM&L{A
z!W|Y7>oy^q2Cik1Y&rIZ%;zFj*|BNqpj+g!aTC`pgwksSyDYmk&`^Cq7Gd{~ZH30D
zPx0MaJ}9Rd<`%p<bZRZI#XT_#n|eLyT?~X%!>)->luW}Qwl4Fr@ax4_CXBWR<T@77
zWy8dlvmwJud<Zt;8tlaHC4!VZ%qDK8_VN+pWb*JLu?#;FqlZHQ7Rr?7@-W)5*c4FI
zt`{A*j434syUwIZmPfTrWtW*SIerLMTdz{;*dY%>v{qrPMPRo-QHkqe7Lp-l;8({4
z8|_;60L)6O3n83v6@<P$eH4mm8G+u+(K3GHvxyP-Dh=`%Vt3Uo@rOYRNP*s@0@>sw
z;N%gwmFkOclA2yO8+;F&-AQ<voIe*jD=_wEvkR%Jts?ow$2zB2fe|Qn>QM#)>5eqK
z?;MBkooCOqfVRlWb#4(>MeJ?!`QGoEV*L6e*k}2<tH=NT4!*~`g`Mv{7Id+-f9#xe
zo&!Kf&x)UtPbFgfDdcSr1(6iI?x8_+j{Ch9#+)K<>Mf-BzYw95A))ql7&0_pUiLaP
Fq<@KmePsXu

delta 1553
zcmZ`(%}*0S6sI3RyD$`l$d`r38gNVa2q-~Iiy>$TQDel!3o&MChjw+l3)?9PsYN`R
zm=H4YplQ6Ac;;w4aMlFRdLwu;@t}VI2jA=mELHa~J3GJke)IdiH#^${FXdLbRHTs6
zHEJ+<hDc<$Z7L*Q3xg9x0?4Y2CZWhI&B(!1FiN_PQ2?efubV}Llmw(_VZ+q2Gi3LT
z@_<McOqVo+QEOGrP*|dC=Db-bXbj3C)533$(Wc6nC4(iAy0Ahmd!=OQz6im`V}Y?D
zPtS-?fIZJsl@-*r8!A&r2!9ml4-mc;Na6S~FoEOG0CWja0BH8+>MG4J#nD|R9D<z~
zG98@6Q47W~5bUQ&nIpTXEI&-l5MB*-k9nX)S;;bNu>dGgWMIN=Q_W(b6lRsENI4A7
zAZt&kzsCs~V|i*Qibabho!Ny$0rx^m)PXAr!nZ>gG38w-f#X4_SM-Aa2o0SV5&uvx
zhvi`bRYqXh?THZkKeLa+!e%vm#oG}@ehpv4wbuH@QIF_^L0bi7Kr7x|qecQ7Cp>#c
zfbi$_am;&LKZoOCeRsFxK~$n(8Z4g#SvQTGj2($JbS<5tn^d(B#C}st%OLI+9NpV9
z#O#xZAMTcl1EglX&{S62Abh>ya*#-TJKBv3_8WQ^J$U?Vpv#YRrcTpxR#SB|CwsvF
zs->x;1v9JaX<2kmCOqCKPS1Kn4=*<6o4in@<-eP|_;KUHId4t)6>???zaLq|q-vzE
z!w(`no}WbcATp0|EZTRq7G68iYqO2pbSJ8jV5P*EX%MbPdyt|W?ZfePbP&h=Xs+K+
zcZLbzd-WCJb5e&-Zpx*%om8X?zP<sJb>{@bbx;W3lN8+In>5tv-$H0~JY$7Od*lh-
zOqaC^;YXy8-)fpl{T+PT5GNTRk#PSSZ^4ztKQvv!J@=$IKW<8g1r`4i>F3MM;<wmp
zo=(=Xr^e5gPt?1%fC<2h%Jb7s#15!Dlv3??tK)#t!kD<6(8)THoe=(>#N62@B97S+
zc~R3{VF0^}e0-<njvM@|g}Ad=tkIqAw6yVLjGaV8_~+R0Y1Fe?W5S49)6f4G&Uak=
Wr9E2<|5wUsinuJq4O<tK>iz&fG+&nh


From f8de9375e470b9962149fe7fbff03088ee7126f0 Mon Sep 17 00:00:00 2001
From: devendra-w <devendra.25bai10969@vitbhopal.ac.in>
Date: Fri, 22 May 2026 16:33:13 +0530
Subject: [PATCH 6/6] fix: add EOF newline

---
 src/components/ContributionHeatmap.tsx | 4 +++-
 src/components/DailyBreakdownSheet.tsx | 6 ++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/ContributionHeatmap.tsx b/src/components/ContributionHeatmap.tsx
index 28cb253b..f4fa8105 100644
--- a/src/components/ContributionHeatmap.tsx
+++ b/src/components/ContributionHeatmap.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useHeatmapTheme } from "@/hooks/useHeatmapTheme";
@@ -345,3 +345,5 @@ export default function ContributionHeatmap({
     </div>
   );
 }
+
+
diff --git a/src/components/DailyBreakdownSheet.tsx b/src/components/DailyBreakdownSheet.tsx
index 9bd82d06..8c4d4c92 100644
--- a/src/components/DailyBreakdownSheet.tsx
+++ b/src/components/DailyBreakdownSheet.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useEffect, useRef, useState } from "react";
 
@@ -93,7 +93,7 @@ export default function DailyBreakdownSheet({
             aria-label="Close panel"
             className="rounded p-1 text-[var(--muted-foreground)] hover:text-[var(--card-foreground)]"
           >
-            ✕
+            ?
           </button>
         </div>
         <div className="flex-1 overflow-y-auto p-4">
@@ -137,3 +137,5 @@ export default function DailyBreakdownSheet({
     </>
   );
 }
+
+