From 1c578b9536513e68218591553fe903909418a31f Mon Sep 17 00:00:00 2001
From: Dastine <christine52jesus@gmail.com>
Date: Mon, 18 May 2026 12:13:34 -0600
Subject: [PATCH 01/15] Add Grafana links to AnalysisTab and update environment
 variables

---
 packages/client/.env.example                  |  5 ++
 .../client/public/assets/grafana_icon.svg     | 57 +++++++++++++++++++
 .../src/components/tabs/AnalysisTab.tsx       | 43 +++++++++++++-
 3 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 packages/client/public/assets/grafana_icon.svg

diff --git a/packages/client/.env.example b/packages/client/.env.example
index 4991ae47..28e55986 100644
--- a/packages/client/.env.example
+++ b/packages/client/.env.example
@@ -1,2 +1,7 @@
 NEXT_PUBLIC_MAPSAPIKEY=''
 SOCKET_URL=localhost:3001
+
+# Grafana dashboard links (opens in new tab from the Analysis page)
+# Use the browser address bar URL of each dashboard
+NEXT_PUBLIC_GRAFANA_LIVE_OPEN_URL=''
+NEXT_PUBLIC_GRAFANA_HISTORY_OPEN_URL=''
diff --git a/packages/client/public/assets/grafana_icon.svg b/packages/client/public/assets/grafana_icon.svg
new file mode 100644
index 00000000..e91f3abd
--- /dev/null
+++ b/packages/client/public/assets/grafana_icon.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="351px" height="365px" viewBox="0 0 351 365" style="enable-background:new 0 0 351 365;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+</style>
+<g id="Layer_1_1_">
+</g>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="175.5" y1="30%" x2="175.5" y2="99%">
+	<stop  offset="0" style="stop-color:#F05A28"/>
+	<stop  offset="1" style="stop-color:#FBCA0A"/>
+</linearGradient>
+<path class="st0" d="M342,161.2c-0.6-6.1-1.6-13.1-3.6-20.9c-2-7.7-5-16.2-9.4-25c-4.4-8.8-10.1-17.9-17.5-26.8
+	c-2.9-3.5-6.1-6.9-9.5-10.2c5.1-20.3-6.2-37.9-6.2-37.9c-19.5-1.2-31.9,6.1-36.5,9.4c-0.8-0.3-1.5-0.7-2.3-1
+	c-3.3-1.3-6.7-2.6-10.3-3.7c-3.5-1.1-7.1-2.1-10.8-3c-3.7-0.9-7.4-1.6-11.2-2.2c-0.7-0.1-1.3-0.2-2-0.3
+	c-8.5-27.2-32.9-38.6-32.9-38.6c-27.3,17.3-32.4,41.5-32.4,41.5s-0.1,0.5-0.3,1.4c-1.5,0.4-3,0.9-4.5,1.3c-2.1,0.6-4.2,1.4-6.2,2.2
+	c-2.1,0.8-4.1,1.6-6.2,2.5c-4.1,1.8-8.2,3.8-12.2,6c-3.9,2.2-7.7,4.6-11.4,7.1c-0.5-0.2-1-0.4-1-0.4c-37.8-14.4-71.3,2.9-71.3,2.9
+	c-3.1,40.2,15.1,65.5,18.7,70.1c-0.9,2.5-1.7,5-2.5,7.5c-2.8,9.1-4.9,18.4-6.2,28.1c-0.2,1.4-0.4,2.8-0.5,4.2
+	C18.8,192.7,8.5,228,8.5,228c29.1,33.5,63.1,35.6,63.1,35.6c0,0,0.1-0.1,0.1-0.1c4.3,7.7,9.3,15,14.9,21.9c2.4,2.9,4.8,5.6,7.4,8.3
+	c-10.6,30.4,1.5,55.6,1.5,55.6c32.4,1.2,53.7-14.2,58.2-17.7c3.2,1.1,6.5,2.1,9.8,2.9c10,2.6,20.2,4.1,30.4,4.5
+	c2.5,0.1,5.1,0.2,7.6,0.1l1.2,0l0.8,0l1.6,0l1.6-0.1l0,0.1c15.3,21.8,42.1,24.9,42.1,24.9c19.1-20.1,20.2-40.1,20.2-44.4l0,0
+	c0,0,0-0.1,0-0.3c0-0.4,0-0.6,0-0.6l0,0c0-0.3,0-0.6,0-0.9c4-2.8,7.8-5.8,11.4-9.1c7.6-6.9,14.3-14.8,19.9-23.3
+	c0.5-0.8,1-1.6,1.5-2.4c21.6,1.2,36.9-13.4,36.9-13.4c-3.6-22.5-16.4-33.5-19.1-35.6l0,0c0,0-0.1-0.1-0.3-0.2
+	c-0.2-0.1-0.2-0.2-0.2-0.2c0,0,0,0,0,0c-0.1-0.1-0.3-0.2-0.5-0.3c0.1-1.4,0.2-2.7,0.3-4.1c0.2-2.4,0.2-4.9,0.2-7.3l0-1.8l0-0.9
+	l0-0.5c0-0.6,0-0.4,0-0.6l-0.1-1.5l-0.1-2c0-0.7-0.1-1.3-0.2-1.9c-0.1-0.6-0.1-1.3-0.2-1.9l-0.2-1.9l-0.3-1.9
+	c-0.4-2.5-0.8-4.9-1.4-7.4c-2.3-9.7-6.1-18.9-11-27.2c-5-8.3-11.2-15.6-18.3-21.8c-7-6.2-14.9-11.2-23.1-14.9
+	c-8.3-3.7-16.9-6.1-25.5-7.2c-4.3-0.6-8.6-0.8-12.9-0.7l-1.6,0l-0.4,0c-0.1,0-0.6,0-0.5,0l-0.7,0l-1.6,0.1c-0.6,0-1.2,0.1-1.7,0.1
+	c-2.2,0.2-4.4,0.5-6.5,0.9c-8.6,1.6-16.7,4.7-23.8,9c-7.1,4.3-13.3,9.6-18.3,15.6c-5,6-8.9,12.7-11.6,19.6c-2.7,6.9-4.2,14.1-4.6,21
+	c-0.1,1.7-0.1,3.5-0.1,5.2c0,0.4,0,0.9,0,1.3l0.1,1.4c0.1,0.8,0.1,1.7,0.2,2.5c0.3,3.5,1,6.9,1.9,10.1c1.9,6.5,4.9,12.4,8.6,17.4
+	c3.7,5,8.2,9.1,12.9,12.4c4.7,3.2,9.8,5.5,14.8,7c5,1.5,10,2.1,14.7,2.1c0.6,0,1.2,0,1.7,0c0.3,0,0.6,0,0.9,0c0.3,0,0.6,0,0.9-0.1
+	c0.5,0,1-0.1,1.5-0.1c0.1,0,0.3,0,0.4-0.1l0.5-0.1c0.3,0,0.6-0.1,0.9-0.1c0.6-0.1,1.1-0.2,1.7-0.3c0.6-0.1,1.1-0.2,1.6-0.4
+	c1.1-0.2,2.1-0.6,3.1-0.9c2-0.7,4-1.5,5.7-2.4c1.8-0.9,3.4-2,5-3c0.4-0.3,0.9-0.6,1.3-1c1.6-1.3,1.9-3.7,0.6-5.3
+	c-1.1-1.4-3.1-1.8-4.7-0.9c-0.4,0.2-0.8,0.4-1.2,0.6c-1.4,0.7-2.8,1.3-4.3,1.8c-1.5,0.5-3.1,0.9-4.7,1.2c-0.8,0.1-1.6,0.2-2.5,0.3
+	c-0.4,0-0.8,0.1-1.3,0.1c-0.4,0-0.9,0-1.2,0c-0.4,0-0.8,0-1.2,0c-0.5,0-1,0-1.5-0.1c0,0-0.3,0-0.1,0l-0.2,0l-0.3,0
+	c-0.2,0-0.5,0-0.7-0.1c-0.5-0.1-0.9-0.1-1.4-0.2c-3.7-0.5-7.4-1.6-10.9-3.2c-3.6-1.6-7-3.8-10.1-6.6c-3.1-2.8-5.8-6.1-7.9-9.9
+	c-2.1-3.8-3.6-8-4.3-12.4c-0.3-2.2-0.5-4.5-0.4-6.7c0-0.6,0.1-1.2,0.1-1.8c0,0.2,0-0.1,0-0.1l0-0.2l0-0.5c0-0.3,0.1-0.6,0.1-0.9
+	c0.1-1.2,0.3-2.4,0.5-3.6c1.7-9.6,6.5-19,13.9-26.1c1.9-1.8,3.9-3.4,6-4.9c2.1-1.5,4.4-2.8,6.8-3.9c2.4-1.1,4.8-2,7.4-2.7
+	c2.5-0.7,5.1-1.1,7.8-1.4c1.3-0.1,2.6-0.2,4-0.2c0.4,0,0.6,0,0.9,0l1.1,0l0.7,0c0.3,0,0,0,0.1,0l0.3,0l1.1,0.1
+	c2.9,0.2,5.7,0.6,8.5,1.3c5.6,1.2,11.1,3.3,16.2,6.1c10.2,5.7,18.9,14.5,24.2,25.1c2.7,5.3,4.6,11,5.5,16.9c0.2,1.5,0.4,3,0.5,4.5
+	l0.1,1.1l0.1,1.1c0,0.4,0,0.8,0,1.1c0,0.4,0,0.8,0,1.1l0,1l0,1.1c0,0.7-0.1,1.9-0.1,2.6c-0.1,1.6-0.3,3.3-0.5,4.9
+	c-0.2,1.6-0.5,3.2-0.8,4.8c-0.3,1.6-0.7,3.2-1.1,4.7c-0.8,3.1-1.8,6.2-3,9.3c-2.4,6-5.6,11.8-9.4,17.1
+	c-7.7,10.6-18.2,19.2-30.2,24.7c-6,2.7-12.3,4.7-18.8,5.7c-3.2,0.6-6.5,0.9-9.8,1l-0.6,0l-0.5,0l-1.1,0l-1.6,0l-0.8,0
+	c0.4,0-0.1,0-0.1,0l-0.3,0c-1.8,0-3.5-0.1-5.3-0.3c-7-0.5-13.9-1.8-20.7-3.7c-6.7-1.9-13.2-4.6-19.4-7.8
+	c-12.3-6.6-23.4-15.6-32-26.5c-4.3-5.4-8.1-11.3-11.2-17.4c-3.1-6.1-5.6-12.6-7.4-19.1c-1.8-6.6-2.9-13.3-3.4-20.1l-0.1-1.3l0-0.3
+	l0-0.3l0-0.6l0-1.1l0-0.3l0-0.4l0-0.8l0-1.6l0-0.3c0,0,0,0.1,0-0.1l0-0.6c0-0.8,0-1.7,0-2.5c0.1-3.3,0.4-6.8,0.8-10.2
+	c0.4-3.4,1-6.9,1.7-10.3c0.7-3.4,1.5-6.8,2.5-10.2c1.9-6.7,4.3-13.2,7.1-19.3c5.7-12.2,13.1-23.1,22-31.8c2.2-2.2,4.5-4.2,6.9-6.2
+	c2.4-1.9,4.9-3.7,7.5-5.4c2.5-1.7,5.2-3.2,7.9-4.6c1.3-0.7,2.7-1.4,4.1-2c0.7-0.3,1.4-0.6,2.1-0.9c0.7-0.3,1.4-0.6,2.1-0.9
+	c2.8-1.2,5.7-2.2,8.7-3.1c0.7-0.2,1.5-0.4,2.2-0.7c0.7-0.2,1.5-0.4,2.2-0.6c1.5-0.4,3-0.8,4.5-1.1c0.7-0.2,1.5-0.3,2.3-0.5
+	c0.8-0.2,1.5-0.3,2.3-0.5c0.8-0.1,1.5-0.3,2.3-0.4l1.1-0.2l1.2-0.2c0.8-0.1,1.5-0.2,2.3-0.3c0.9-0.1,1.7-0.2,2.6-0.3
+	c0.7-0.1,1.9-0.2,2.6-0.3c0.5-0.1,1.1-0.1,1.6-0.2l1.1-0.1l0.5-0.1l0.6,0c0.9-0.1,1.7-0.1,2.6-0.2l1.3-0.1c0,0,0.5,0,0.1,0l0.3,0
+	l0.6,0c0.7,0,1.5-0.1,2.2-0.1c2.9-0.1,5.9-0.1,8.8,0c5.8,0.2,11.5,0.9,17,1.9c11.1,2.1,21.5,5.6,31,10.3
+	c9.5,4.6,17.9,10.3,25.3,16.5c0.5,0.4,0.9,0.8,1.4,1.2c0.4,0.4,0.9,0.8,1.3,1.2c0.9,0.8,1.7,1.6,2.6,2.4c0.9,0.8,1.7,1.6,2.5,2.4
+	c0.8,0.8,1.6,1.6,2.4,2.5c3.1,3.3,6,6.6,8.6,10c5.2,6.7,9.4,13.5,12.7,19.9c0.2,0.4,0.4,0.8,0.6,1.2c0.2,0.4,0.4,0.8,0.6,1.2
+	c0.4,0.8,0.8,1.6,1.1,2.4c0.4,0.8,0.7,1.5,1.1,2.3c0.3,0.8,0.7,1.5,1,2.3c1.2,3,2.4,5.9,3.3,8.6c1.5,4.4,2.6,8.3,3.5,11.7
+	c0.3,1.4,1.6,2.3,3,2.1c1.5-0.1,2.6-1.3,2.6-2.8C342.6,170.4,342.5,166.1,342,161.2z"/>
+</svg>
diff --git a/packages/client/src/components/tabs/AnalysisTab.tsx b/packages/client/src/components/tabs/AnalysisTab.tsx
index 9017ba55..b9ffe881 100644
--- a/packages/client/src/components/tabs/AnalysisTab.tsx
+++ b/packages/client/src/components/tabs/AnalysisTab.tsx
@@ -1,3 +1,4 @@
+import { OpenInNew } from "@mui/icons-material";
 import { useTheme } from "next-themes";
 import Image from "next/image";
 import React, { useState } from "react";
@@ -52,6 +53,38 @@ export function TabContent({
   );
 }
 
+const grafanaLinks = [
+  {
+    label: "Grafana Live",
+    url: process.env.NEXT_PUBLIC_GRAFANA_LIVE_OPEN_URL,
+  },
+  {
+    label: "Grafana History",
+    url: process.env.NEXT_PUBLIC_GRAFANA_HISTORY_OPEN_URL,
+  },
+].filter((link): link is { url: string; label: string } => Boolean(link.url));
+
+function GrafanaLink({ href, label }: { href: string; label: string }) {
+  return (
+    <a
+      className="flex items-center gap-1 text-xs font-medium text-[#F05A28] hover:underline"
+      href={href}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <Image
+        alt="Grafana"
+        height={14}
+        src="/assets/grafana_icon.svg"
+        unoptimized
+        width={14}
+      />
+      {label}
+      <OpenInNew sx={{ fontSize: 12 }} />
+    </a>
+  );
+}
+
 function AnalysisTab() {
   const [value, setValue] = useState<number>(0);
   const { resolvedTheme } = useTheme();
@@ -60,7 +93,7 @@ function AnalysisTab() {
     <div className="flex flex-col gap-y-4 px-4">
       {/* NAVBAR */}
       <div
-        className="flex w-full items-center justify-between gap-y-2 border-b-[1px] border-black"
+        className="flex w-full flex-col border-b-[1px] border-black sm:flex-row sm:items-center sm:justify-between"
         id="navbar"
       >
         {/* <div className="flex items-center justify-center gap-x-2">
@@ -95,6 +128,14 @@ function AnalysisTab() {
             ))}
           </Tabs>
         </ThemeProvider>
+
+        {grafanaLinks.length > 0 && (
+          <div className="flex flex-shrink-0 items-center gap-3 pb-2 sm:pb-1">
+            {grafanaLinks.map(({ label, url }) => (
+              <GrafanaLink href={url} key={label} label={label} />
+            ))}
+          </div>
+        )}
       </div>
 
       {/* MAIN */}

From af12359a9d301303384595413c779263e4b2c843 Mon Sep 17 00:00:00 2001
From: Dastine <christine52jesus@gmail.com>
Date: Sat, 23 May 2026 14:01:03 -0600
Subject: [PATCH 02/15] Fix grafanaLinks filter to trim URLs before validation

---
 packages/client/src/components/tabs/AnalysisTab.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/tabs/AnalysisTab.tsx b/packages/client/src/components/tabs/AnalysisTab.tsx
index b9ffe881..e80707b1 100644
--- a/packages/client/src/components/tabs/AnalysisTab.tsx
+++ b/packages/client/src/components/tabs/AnalysisTab.tsx
@@ -62,7 +62,9 @@ const grafanaLinks = [
     label: "Grafana History",
     url: process.env.NEXT_PUBLIC_GRAFANA_HISTORY_OPEN_URL,
   },
-].filter((link): link is { url: string; label: string } => Boolean(link.url));
+].filter((link): link is { url: string; label: string } =>
+  Boolean(link.url?.trim()),
+);
 
 function GrafanaLink({ href, label }: { href: string; label: string }) {
   return (

From 7d93d3be13f76fb37a1fbaf9d03dc40cc308be18 Mon Sep 17 00:00:00 2001
From: Dastine <christine52jesus@gmail.com>
Date: Sat, 30 May 2026 17:20:52 -0600
Subject: [PATCH 03/15] feat: Add Grafana snapshot management functionality

- Implemented snapshot creation and retrieval in the backend.
- Added new API routes for managing Grafana snapshots.
- Created a new database table for storing snapshot details.
- Developed frontend components for adding and displaying snapshots.
- Integrated snapshot functionality into the AnalysisTab component.
- Updated environment variables and validation for snapshot management.
- Enhanced error handling and logging for snapshot operations.
---
 .../src/components/tabs/AnalysisTab.tsx       | 204 ++++++++--
 packages/client/src/constants/apiRoutes.ts    |   8 +
 packages/client/src/hooks/useSnapshots.ts     |  89 +++++
 packages/client/src/objects/TabRoutes.tsx     |   5 +-
 packages/db/README.md                         |  22 ++
 .../db/prisma/migrations/0_init/migration.sql | 363 ++++++++++++++++++
 .../migration.sql                             |  12 +
 .../db/prisma/migrations/migration_lock.toml  |   3 +
 packages/db/prisma/schema.prisma              |   7 +
 packages/db/src/services/DatabaseService.ts   |  16 +
 packages/server/.env.example                  |   1 +
 .../routeControllers/snapshot.controller.ts   | 123 ++++++
 packages/server/src/index.ts                  |   2 +
 packages/server/src/routes/snapshot.route.ts  |  12 +
 packages/server/src/utils/validatePassword.ts |  11 +
 packages/shared/src/dto/index.ts              |   1 +
 packages/shared/src/dto/snapshot.ts           |  24 ++
 17 files changed, 860 insertions(+), 43 deletions(-)
 create mode 100644 packages/client/src/hooks/useSnapshots.ts
 create mode 100644 packages/db/prisma/migrations/0_init/migration.sql
 create mode 100644 packages/db/prisma/migrations/20260526021109_add_grafana_snapshot/migration.sql
 create mode 100644 packages/db/prisma/migrations/migration_lock.toml
 create mode 100644 packages/server/src/controllers/routeControllers/snapshot.controller.ts
 create mode 100644 packages/server/src/routes/snapshot.route.ts
 create mode 100644 packages/shared/src/dto/snapshot.ts

diff --git a/packages/client/src/components/tabs/AnalysisTab.tsx b/packages/client/src/components/tabs/AnalysisTab.tsx
index e80707b1..17d540a0 100644
--- a/packages/client/src/components/tabs/AnalysisTab.tsx
+++ b/packages/client/src/components/tabs/AnalysisTab.tsx
@@ -1,13 +1,16 @@
-import { OpenInNew } from "@mui/icons-material";
 import { useTheme } from "next-themes";
 import Image from "next/image";
-import React, { useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
+import { useCreateSnapshot, useSnapshots } from "@/hooks/useSnapshots";
 import { tabs } from "@/objects/TabRoutes";
+import { useAppState } from "@/stores/useAppState";
+import { usePacketStore } from "@/stores/usePacket";
 import { helios, lightGray, mediumGray } from "@/styles/colors";
 import { ThemeProvider } from "@emotion/react";
-import { Tab, Tabs, createTheme } from "@mui/material";
+import { OpenInNew } from "@mui/icons-material";
+import { CircularProgress, Tab, Tabs, createTheme } from "@mui/material";
 
 import MLContainer from "../containers/MLContainer";
 import StatsContainer from "../molecules/AnalysisMolecules/StatsContainer";
@@ -18,16 +21,6 @@ type TabContentProps = React.PropsWithChildren<{
   className?: string;
 }>;
 
-const filters: string[] = [
-  "Motor Temperature",
-  "Battery Consumption",
-  "Average Speed",
-  "Brake Time",
-  "Power Out",
-  "Battery Voltage",
-  "Battery Current",
-] as const;
-
 const color = createTheme({
   palette: {
     primary: {
@@ -87,6 +80,159 @@ function GrafanaLink({ href, label }: { href: string; label: string }) {
   );
 }
 
+function AddSnapshotForm() {
+  const formRef = useRef<HTMLFormElement>(null);
+  const { isPending, mutate } = useCreateSnapshot({
+    onSuccess: () => formRef.current?.reset(),
+  });
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const fd = new FormData(e.currentTarget);
+    mutate({
+      label: fd.get("label") as string,
+      password: fd.get("password") as string,
+      url: fd.get("url") as string,
+    });
+  }
+
+  return (
+    <form
+      className="mt-2 flex flex-col gap-2 rounded border border-black/10 bg-black/5 p-3 dark:border-white/10 dark:bg-white/5"
+      onSubmit={handleSubmit}
+      ref={formRef}
+    >
+      <p className="text-gray-600 dark:text-gray-400 text-xs font-semibold">
+        Add Snapshot
+      </p>
+      <input
+        className="rounded border border-black/20 bg-white px-2 py-1 text-xs dark:border-white/20 dark:bg-gray-800"
+        name="url"
+        placeholder="Grafana snapshot URL"
+        required
+        type="url"
+      />
+      <div className="flex gap-1.5">
+        <input
+          className="min-w-0 flex-1 rounded border border-black/20 bg-white px-2 py-1 text-xs dark:border-white/20 dark:bg-gray-800"
+          name="label"
+          placeholder="Label (e.g. Race Day 2025)"
+          required
+          type="text"
+        />
+        <input
+          className="w-32 rounded border border-black/20 bg-white px-2 py-1 text-xs dark:border-white/20 dark:bg-gray-800"
+          name="password"
+          placeholder="Password"
+          required
+          type="password"
+        />
+        <button
+          className="rounded bg-[#F05A28] px-3 py-1 text-xs font-medium text-white disabled:opacity-50"
+          disabled={isPending}
+          type="submit"
+        >
+          {isPending ? "Saving…" : "Save"}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+function GrafanaHistoryTabContent() {
+  const playbackSwitch = useAppState((s) => s.currentAppState.playbackSwitch);
+  const timestamp = usePacketStore((s) => s.currentPacket.TimeStamp);
+  const { resolvedTheme } = useTheme();
+  const { data: snapshots = [], isLoading: snapshotsLoading } = useSnapshots();
+
+  // Most recent snapshot is first (ordered by created_at desc from server).
+  const latestSnapshot = snapshots[0] ?? null;
+  const baseUrl = latestSnapshot?.url ?? null;
+
+  // The server only stores embeddable snapshots.raintank.io URLs, so we can
+  // build the iframe src directly and just append the theme query param.
+  const iframeUrl = useMemo(() => {
+    if (!baseUrl) return null;
+    try {
+      const url = new URL(baseUrl);
+      url.searchParams.set(
+        "theme",
+        resolvedTheme === "dark" ? "dark" : "light",
+      );
+      return url.toString();
+    } catch {
+      return null;
+    }
+  }, [baseUrl, resolvedTheme]);
+
+  if (snapshotsLoading) {
+    return (
+      <div className="flex h-[60vh] items-center justify-center">
+        <CircularProgress size={24} sx={{ color: helios }} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {iframeUrl ? (
+        <>
+          <div className="flex items-center justify-between">
+            <p className="text-gray-500 text-xs">
+              Showing snapshot:{" "}
+              <span className="font-medium text-[#F05A28]">
+                {latestSnapshot?.label}
+              </span>{" "}
+              ·{" "}
+              {latestSnapshot &&
+                new Date(latestSnapshot.created_at).toLocaleDateString()}
+            </p>
+          </div>
+          {playbackSwitch && (
+            <div className="flex items-center gap-2 rounded bg-black/5 px-3 py-1.5 text-xs dark:bg-white/5">
+              <span className="font-semibold text-[#F05A28]">
+                Playback position:
+              </span>
+              <span className="text-gray-700 dark:text-gray-300 font-mono">
+                {new Date(timestamp * 1000).toLocaleString()}
+              </span>
+              <span className="text-gray-400">
+                ← locate this timestamp on the chart
+              </span>
+            </div>
+          )}
+          {/*
+            allow-same-origin keeps the framed snapshots.raintank.io document
+            in its real origin so Grafana's SPA can read localStorage during
+            bootstrap. Verified: without it the iframe gets a unique opaque
+            origin, localStorage access throws ("Error bootstrapping Grafana
+            SecurityError ... lacks 'allow-same-origin'"), and Grafana renders
+            its "failed to load application files" error instead of the
+            dashboard. Safe to pair with allow-scripts here because the snapshot
+            is cross-origin to this app and cannot reach out to alter the parent.
+          */}
+          <iframe
+            allow="fullscreen"
+            className="h-[60vh] w-full rounded border border-black/10 dark:border-white/10"
+            sandbox="allow-scripts allow-same-origin allow-popups"
+            src={iframeUrl}
+            title="Grafana History"
+          />
+        </>
+      ) : (
+        <div className="text-gray-400 flex h-[40vh] flex-col items-center justify-center gap-2 text-sm">
+          <p>No snapshot available yet.</p>
+          <p>
+            In Grafana: <strong>Share → Snapshot → Publish</strong>, then add
+            the URL below.
+          </p>
+        </div>
+      )}
+      <AddSnapshotForm />
+    </div>
+  );
+}
+
 function AnalysisTab() {
   const [value, setValue] = useState<number>(0);
   const { resolvedTheme } = useTheme();
@@ -98,17 +244,6 @@ function AnalysisTab() {
         className="flex w-full flex-col border-b-[1px] border-black sm:flex-row sm:items-center sm:justify-between"
         id="navbar"
       >
-        {/* <div className="flex items-center justify-center gap-x-2">
-          <Image
-            alt="pfp"
-            className="rounded-full border-2 border-helios object-cover p-2"
-            height={50}
-            src="/assets/HeliosSideview.png"
-            width={50}
-          />
-          <span className="text-sm">Insert Name</span>
-        </div> */}
-
         <ThemeProvider theme={color}>
           <Tabs
             TabIndicatorProps={{
@@ -142,24 +277,6 @@ function AnalysisTab() {
 
       {/* MAIN */}
       <div className="flex flex-col justify-between gap-4 md:flex-row">
-        {/* <div className="flex max-w-44 flex-col gap-1 md:w-auto">
-          {filters.map((filter) => (
-            <div className="flex items-center" key={filter}>
-              <label className="flex cursor-pointer items-center gap-x-2">
-                <input
-                  className="peer size-4 cursor-pointer accent-helios"
-                  id={filter}
-                  name={filter}
-                  type="checkbox"
-                />
-                <span className="select-none text-sm peer-hover:font-bold">
-                  {filter}
-                </span>
-              </label>
-            </div>
-          ))}
-        </div> */}
-
         <div className="w-full flex-1 justify-center gap-4" id="main-content">
           <TabContent
             className="grid max-h-72 w-full flex-1 gap-4 overflow-y-auto overflow-x-hidden xl:grid-cols-2"
@@ -172,6 +289,9 @@ function AnalysisTab() {
           <TabContent index={1} value={value}>
             <StatsContainer />
           </TabContent>
+          <TabContent index={2} value={value}>
+            <GrafanaHistoryTabContent />
+          </TabContent>
         </div>
       </div>
     </div>
diff --git a/packages/client/src/constants/apiRoutes.ts b/packages/client/src/constants/apiRoutes.ts
index 94d22f37..b07b344e 100644
--- a/packages/client/src/constants/apiRoutes.ts
+++ b/packages/client/src/constants/apiRoutes.ts
@@ -82,6 +82,14 @@ export const BACKEND_ROUTES = {
     /** Get packets between time range */
     packetsBetween: "/packetsBetween",
   },
+
+  /**
+   * Grafana snapshot endpoints
+   */
+  snapshots: {
+    /** Get all snapshots / create new snapshot */
+    base: "/snapshots",
+  },
 } as const;
 
 /**
diff --git a/packages/client/src/hooks/useSnapshots.ts b/packages/client/src/hooks/useSnapshots.ts
new file mode 100644
index 00000000..7b68f532
--- /dev/null
+++ b/packages/client/src/hooks/useSnapshots.ts
@@ -0,0 +1,89 @@
+import { useEffect } from "react";
+
+import { BACKEND_ROUTES } from "@/constants/apiRoutes";
+import { backendApi } from "@/lib/api";
+import { notifications } from "@mantine/notifications";
+import type {
+  CreateSnapshotRequestDTO,
+  CreateSnapshotResponseDTO,
+  IGrafanaSnapshot,
+  SnapshotListResponseDTO,
+} from "@shared/helios-types";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+
+export const SNAPSHOTS_QUERY_KEY = "grafana-snapshots";
+
+async function fetchSnapshots(): Promise<IGrafanaSnapshot[]> {
+  const response = await backendApi.get<SnapshotListResponseDTO>(
+    BACKEND_ROUTES.snapshots.base,
+  );
+  return response.data.data;
+}
+
+async function postSnapshot(
+  data: CreateSnapshotRequestDTO,
+): Promise<CreateSnapshotResponseDTO> {
+  const response = await backendApi.post<CreateSnapshotResponseDTO>(
+    BACKEND_ROUTES.snapshots.base,
+    data,
+  );
+  return response.data;
+}
+
+export function useSnapshots() {
+  const query = useQuery({
+    gcTime: 1000 * 60 * 5,
+    placeholderData: [],
+    queryFn: fetchSnapshots,
+    queryKey: [SNAPSHOTS_QUERY_KEY] as const,
+    refetchOnWindowFocus: false,
+    staleTime: 1000 * 60 * 2,
+    throwOnError: false,
+  });
+
+  useEffect(() => {
+    if (query.error) {
+      notifications.show({
+        color: "red",
+        message: "Failed to load Grafana snapshots.",
+        title: "Error",
+      });
+    }
+  }, [query.error]);
+
+  return query;
+}
+
+interface UseCreateSnapshotOptions {
+  onSuccess?: () => void;
+}
+
+export function useCreateSnapshot(options?: UseCreateSnapshotOptions) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: postSnapshot,
+    onError: (error) => {
+      const serverMessage =
+        axios.isAxiosError(error) &&
+        (error.response?.data as { error?: string } | undefined)?.error;
+      notifications.show({
+        color: "red",
+        message:
+          serverMessage ||
+          "Failed to save snapshot. Check the URL and try again.",
+        title: "Error",
+      });
+    },
+    onSuccess: (data) => {
+      notifications.show({
+        color: "green",
+        message: data.message,
+        title: "Snapshot saved",
+      });
+      void queryClient.invalidateQueries({ queryKey: [SNAPSHOTS_QUERY_KEY] });
+      options?.onSuccess?.();
+    },
+  });
+}
diff --git a/packages/client/src/objects/TabRoutes.tsx b/packages/client/src/objects/TabRoutes.tsx
index 467865f4..b82b177e 100644
--- a/packages/client/src/objects/TabRoutes.tsx
+++ b/packages/client/src/objects/TabRoutes.tsx
@@ -23,11 +23,14 @@ export const tabs: TabProps[] = [
     id: 0,
     name: "Graphs",
   },
-
   {
     id: 1,
     name: "Stats",
   },
+  {
+    id: 2,
+    name: "Grafana",
+  },
 ];
 
 export const routes: SolarCarRoutes[] = [
diff --git a/packages/db/README.md b/packages/db/README.md
index 88d9fa93..eece4388 100644
--- a/packages/db/README.md
+++ b/packages/db/README.md
@@ -114,6 +114,28 @@ Then deploy migrations in target environments:
 yarn workspace db migrate:run
 ```
 
+## Migrations (production)
+
+Schema changes go through Prisma **migrations**, not `db push`. Prod was
+baselined on 2026-05-30 (see `prisma/migrations/0_init`), so its history is
+tracked in `_prisma_migrations`.
+
+- Author a change locally: `npx prisma migrate dev --name <change>`
+- Apply to an environment: `yarn migrate:run` (= `prisma migrate deploy`)
+- Check state / drift: `npx prisma migrate status`
+
+Notes:
+
+- `migrate:run` / `deploy` and `migrate dev` use `DIRECT_URL` (Supabase: the
+  direct `:5432` connection, not the `:6543` pooler).
+- **Do not run `db push`, `migrate reset`, or `db:reset:force` against a remote
+  `.env`** — those mutate/drop whatever `DATABASE_URL`/`DIRECT_URL` point at. For
+  local experiments, point `.env` at the local container or pass an explicit
+  localhost URL inline.
+- Adopting migrations on an already-`db push`-ed DB: create a baseline migration
+  and mark it applied without running SQL via
+  `npx prisma migrate resolve --applied <migration_name>`.
+
 ## Seeding
 
 `yarn db:seed` inserts sample drivers, laps, and telemetry packets.
diff --git a/packages/db/prisma/migrations/0_init/migration.sql b/packages/db/prisma/migrations/0_init/migration.sql
new file mode 100644
index 00000000..4e799cd3
--- /dev/null
+++ b/packages/db/prisma/migrations/0_init/migration.sql
@@ -0,0 +1,363 @@
+-- CreateSchema
+CREATE SCHEMA IF NOT EXISTS "public";
+
+-- CreateTable
+CREATE TABLE "driver" (
+    "rfid" TEXT NOT NULL,
+    "Name" TEXT NOT NULL,
+    "CreatedAt" TIMESTAMPTZ(6) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "UpdatedAt" TIMESTAMPTZ(6) NOT NULL,
+
+    CONSTRAINT "PK_5ec5aa7279436b862c308d63f5b" PRIMARY KEY ("rfid")
+);
+
+-- CreateTable
+CREATE TABLE "lap" (
+    "Id" UUID NOT NULL DEFAULT gen_random_uuid(),
+    "timestamp" TIMESTAMPTZ(6) NOT NULL,
+    "rfid" TEXT NOT NULL,
+    "LapTime" DOUBLE PRECISION NOT NULL,
+    "TotalPowerIn" DOUBLE PRECISION NOT NULL,
+    "TotalPowerOut" DOUBLE PRECISION NOT NULL,
+    "NetPowerOut" DOUBLE PRECISION NOT NULL,
+    "Distance" DOUBLE PRECISION NOT NULL,
+    "EnergyConsumed" DOUBLE PRECISION NOT NULL,
+    "AmpHours" DOUBLE PRECISION NOT NULL,
+    "AveragePackCurrent" DOUBLE PRECISION NOT NULL,
+    "BatterySecondsRemaining" DOUBLE PRECISION NOT NULL,
+    "AverageSpeed" DOUBLE PRECISION NOT NULL,
+    "AverageMotorWattage" DOUBLE PRECISION NOT NULL,
+
+    CONSTRAINT "PK_bde83ce36fb9632ffd544022604" PRIMARY KEY ("Id")
+);
+
+-- CreateTable
+CREATE TABLE "telemetry_packet" (
+    "timestamp" TIMESTAMPTZ(6) NOT NULL,
+    "rfid" TEXT NOT NULL,
+    "RaceName" TEXT,
+    "Title" TEXT,
+    "Acceleration" DOUBLE PRECISION,
+    "B3Heartbeat" BOOLEAN,
+    "BrakeLightSignalStatus" BOOLEAN,
+    "BrakeSwitchDigital" BOOLEAN,
+    "DaytimeRunningLightSignalStatus" BOOLEAN,
+    "ForwardDigital" BOOLEAN,
+    "HandbrakeSwitchDigital" BOOLEAN,
+    "HazardLightsInput" BOOLEAN,
+    "HeadlightsSwitchInput" BOOLEAN,
+    "HeadlightSignalStatus" BOOLEAN,
+    "HornSignalStatus" BOOLEAN,
+    "HornSwitchDigital" BOOLEAN,
+    "LapDigital" BOOLEAN,
+    "LeftSignalInput" BOOLEAN,
+    "LeftSignalStatus" BOOLEAN,
+    "MotorResetDigital" BOOLEAN,
+    "NeutralDigital" BOOLEAN,
+    "RaceModeDigital" BOOLEAN,
+    "RegenBraking" DOUBLE PRECISION,
+    "ReverseDigital" BOOLEAN,
+    "RightSignalInput" BOOLEAN,
+    "RightSignalStatus" BOOLEAN,
+    "AlwaysOnSignalStatus" BOOLEAN,
+    "AverageCellVoltage" DOUBLE PRECISION,
+    "AverageTemperature" DOUBLE PRECISION,
+    "BmuAlive" INTEGER,
+    "ChargeRelayEnabled" BOOLEAN,
+    "ChargerSafetyEnabled" BOOLEAN,
+    "DischargeRelayEnabled" BOOLEAN,
+    "FanSpeed" DOUBLE PRECISION,
+    "FanVoltage" DOUBLE PRECISION,
+    "HighCellVoltage" DOUBLE PRECISION,
+    "HighCellVoltageId" INTEGER,
+    "HighTemperature" DOUBLE PRECISION,
+    "HighThermistorId" INTEGER,
+    "InternalTemperature" DOUBLE PRECISION,
+    "IsChargingSignalStatus" BOOLEAN,
+    "IsReadySignalStatus" BOOLEAN,
+    "LowCellVoltage" DOUBLE PRECISION,
+    "LowCellVoltageId" INTEGER,
+    "LowTemperature" DOUBLE PRECISION,
+    "LowThermistorId" INTEGER,
+    "MalfunctionIndicatorActive" BOOLEAN,
+    "MaximumCellVoltage" DOUBLE PRECISION,
+    "MaximumPackVoltage" DOUBLE PRECISION,
+    "MinimumCellVoltage" DOUBLE PRECISION,
+    "MinimumPackVoltage" DOUBLE PRECISION,
+    "MultiPurposeInputSignalStatus" BOOLEAN,
+    "PackAmphours" DOUBLE PRECISION,
+    "PackCurrent" DOUBLE PRECISION,
+    "PackDepthOfDischarge" DOUBLE PRECISION,
+    "PackStateOfCharge" DOUBLE PRECISION,
+    "PackVoltage" DOUBLE PRECISION,
+    "PopulatedCells" INTEGER,
+    "RequestedFanSpeed" DOUBLE PRECISION,
+    "ArrayChargeCurrent" DOUBLE PRECISION,
+    "ArrayContactorClosed" BOOLEAN,
+    "ArrayContactorClosing" BOOLEAN,
+    "ArrayContactorError" BOOLEAN,
+    "ArrayHeartbeat" BOOLEAN,
+    "ArrayLineCurrent" DOUBLE PRECISION,
+    "ArrayPrechargerClosed" BOOLEAN,
+    "ArrayPrechargerClosing" BOOLEAN,
+    "ArrayPrechargerError" BOOLEAN,
+    "ChargeChargeCurrent" DOUBLE PRECISION,
+    "ChargeContactorClosed" BOOLEAN,
+    "ChargeContactorClosing" BOOLEAN,
+    "ChargeContactorError" BOOLEAN,
+    "ChargeHeartbeat" BOOLEAN,
+    "ChargeLineCurrent" DOUBLE PRECISION,
+    "ChargePrechargerClosed" BOOLEAN,
+    "ChargePrechargerClosing" BOOLEAN,
+    "ChargePrechargerError" BOOLEAN,
+    "CommonChargeCurrent" DOUBLE PRECISION,
+    "CommonContactorClosed" BOOLEAN,
+    "CommonContactorClosing" BOOLEAN,
+    "CommonContactorError" BOOLEAN,
+    "CommonContactorOpeningError" BOOLEAN,
+    "CommonHeartbeat" BOOLEAN,
+    "CommonLineCurrent" DOUBLE PRECISION,
+    "CommonPrechargerClosed" BOOLEAN,
+    "CommonPrechargerClosing" BOOLEAN,
+    "CommonPrechargerError" BOOLEAN,
+    "LvBpsError" BOOLEAN,
+    "LvChargeCurrent" DOUBLE PRECISION,
+    "LvContactorClosed" BOOLEAN,
+    "LvContactorClosing" BOOLEAN,
+    "LvContactorError" BOOLEAN,
+    "LvHeartbeat" BOOLEAN,
+    "LvLineCurrent" DOUBLE PRECISION,
+    "LvPrechargerClosed" BOOLEAN,
+    "LvPrechargerClosing" BOOLEAN,
+    "LvPrechargerError" BOOLEAN,
+    "MotorChargeCurrent" DOUBLE PRECISION,
+    "MotorContactorClosed" BOOLEAN,
+    "MotorContactorClosing" BOOLEAN,
+    "MotorContactorError" BOOLEAN,
+    "MotorHeartbeat" BOOLEAN,
+    "MotorLineCurrent" DOUBLE PRECISION,
+    "MotorPrechargerClosed" BOOLEAN,
+    "MotorPrechargerClosing" BOOLEAN,
+    "MotorPrechargerError" BOOLEAN,
+    "BusCurrentOut" DOUBLE PRECISION,
+    "KeyMotorVelocity" DOUBLE PRECISION,
+    "MotorCurrent" DOUBLE PRECISION,
+    "AbattDisable" BOOLEAN,
+    "ArrayContactorCommand" BOOLEAN,
+    "ArrayHeartbeatDeadTrip" BOOLEAN,
+    "ArrayHighCurrentTrip" BOOLEAN,
+    "ArrayHighCurrentWarning" BOOLEAN,
+    "AuxiliaryBatteryVoltage" DOUBLE PRECISION,
+    "ChargeContactorCommand" BOOLEAN,
+    "ChargeEnable" BOOLEAN,
+    "ChargeHeartbeatDeadTrip" BOOLEAN,
+    "ChargeHighCurrentTrip" BOOLEAN,
+    "ChargeHighCurrentWarning" BOOLEAN,
+    "ChargeSafety" BOOLEAN,
+    "ChargeShouldTrip" BOOLEAN,
+    "ChgFault" BOOLEAN,
+    "ChgLvEn" BOOLEAN,
+    "ChgOn" BOOLEAN,
+    "CommonContactorCommand" BOOLEAN,
+    "CommonHeartbeatDeadTrip" BOOLEAN,
+    "CommonHighCurrentTrip" BOOLEAN,
+    "CommonHighCurrentWarning" BOOLEAN,
+    "ContactorConnectedUnexpectedlyTrip" BOOLEAN,
+    "ContactorDisconnectedUnexpectedlyTrip" BOOLEAN,
+    "DcdcFault" BOOLEAN,
+    "DcdcOn" BOOLEAN,
+    "DischargeEnable" BOOLEAN,
+    "DischargeShouldTrip" BOOLEAN,
+    "En1" BOOLEAN,
+    "EsdEnabledTrip" BOOLEAN,
+    "ExternalShutdown" BOOLEAN,
+    "Heartbeat" BOOLEAN,
+    "HighCellVoltageTrip" BOOLEAN,
+    "HighCellVoltageWarning" BOOLEAN,
+    "HighTemperatureTrip" BOOLEAN,
+    "HighTemperatureWarning" BOOLEAN,
+    "Key" BOOLEAN,
+    "LowCellVoltageTrip" BOOLEAN,
+    "LowCellVoltageWarning" BOOLEAN,
+    "LowTemperatureTrip" BOOLEAN,
+    "LowTemperatureWarning" BOOLEAN,
+    "LvContactorCommand" BOOLEAN,
+    "LvHeartbeatDeadTrip" BOOLEAN,
+    "LvHighCurrentTrip" BOOLEAN,
+    "LvHighCurrentWarning" BOOLEAN,
+    "MainPowerSwitch" BOOLEAN,
+    "MotorContactorCommand" BOOLEAN,
+    "MotorHeartbeatDeadTrip" BOOLEAN,
+    "MotorHighCurrentTrip" BOOLEAN,
+    "MotorHighCurrentWarning" BOOLEAN,
+    "MpsDisabledTrip" BOOLEAN,
+    "OrionCanReceivedRecently" BOOLEAN,
+    "OrionMessageTimeoutTrip" BOOLEAN,
+    "ProtectionTrip" BOOLEAN,
+    "StartupState" DOUBLE PRECISION,
+    "StrobeBmsLight" BOOLEAN,
+    "SystemState" DOUBLE PRECISION,
+    "ThreeAOc" BOOLEAN,
+    "Motor0ActiveMotor" DOUBLE PRECISION,
+    "Motor0BemfD" DOUBLE PRECISION,
+    "Motor0BemfQ" DOUBLE PRECISION,
+    "Motor0BusCurrent" DOUBLE PRECISION,
+    "Motor0BusVoltage" DOUBLE PRECISION,
+    "Motor0DcBusAh" DOUBLE PRECISION,
+    "Motor0DspBoardTemperature" DOUBLE PRECISION,
+    "Motor0ErrorFlags" DOUBLE PRECISION,
+    "Motor0HeatsinkTemperature" DOUBLE PRECISION,
+    "Motor0Id" DOUBLE PRECISION,
+    "Motor0Iq" DOUBLE PRECISION,
+    "Motor0LimitFlags" DOUBLE PRECISION,
+    "Motor0MotorTemperature" DOUBLE PRECISION,
+    "Motor0MotorVelocity" DOUBLE PRECISION,
+    "Motor0Odometer" DOUBLE PRECISION,
+    "Motor0PhaseCurrentB" DOUBLE PRECISION,
+    "Motor0PhaseCurrentC" DOUBLE PRECISION,
+    "Motor0RxErrorCount" DOUBLE PRECISION,
+    "Motor0SerialNumber" DOUBLE PRECISION,
+    "Motor0SlipSpeed" DOUBLE PRECISION,
+    "Motor0Supply15v" DOUBLE PRECISION,
+    "Motor0Supply1v9" DOUBLE PRECISION,
+    "Motor0Supply3v3" DOUBLE PRECISION,
+    "Motor0TritiumId" DOUBLE PRECISION,
+    "Motor0TxErrorCount" DOUBLE PRECISION,
+    "Motor0Vd" DOUBLE PRECISION,
+    "Motor0VehicleVelocity" DOUBLE PRECISION,
+    "Motor0Vq" DOUBLE PRECISION,
+    "Motor1ActiveMotor" DOUBLE PRECISION,
+    "Motor1BemfD" DOUBLE PRECISION,
+    "Motor1BemfQ" DOUBLE PRECISION,
+    "Motor1BusCurrent" DOUBLE PRECISION,
+    "Motor1BusVoltage" DOUBLE PRECISION,
+    "Motor1DcBusAh" DOUBLE PRECISION,
+    "Motor1DspBoardTemperature" DOUBLE PRECISION,
+    "Motor1ErrorFlags" DOUBLE PRECISION,
+    "Motor1HeatsinkTemperature" DOUBLE PRECISION,
+    "Motor1Id" DOUBLE PRECISION,
+    "Motor1Iq" DOUBLE PRECISION,
+    "Motor1LimitFlags" DOUBLE PRECISION,
+    "Motor1MotorTemperature" DOUBLE PRECISION,
+    "Motor1MotorVelocity" DOUBLE PRECISION,
+    "Motor1Odometer" DOUBLE PRECISION,
+    "Motor1PhaseCurrentB" DOUBLE PRECISION,
+    "Motor1PhaseCurrentC" DOUBLE PRECISION,
+    "Motor1RxErrorCount" DOUBLE PRECISION,
+    "Motor1SerialNumber" DOUBLE PRECISION,
+    "Motor1SlipSpeed" DOUBLE PRECISION,
+    "Motor1Supply15v" DOUBLE PRECISION,
+    "Motor1Supply1v9" DOUBLE PRECISION,
+    "Motor1Supply3v3" DOUBLE PRECISION,
+    "Motor1TritiumId" DOUBLE PRECISION,
+    "Motor1TxErrorCount" DOUBLE PRECISION,
+    "Motor1Vd" DOUBLE PRECISION,
+    "Motor1VehicleVelocity" DOUBLE PRECISION,
+    "Motor1Vq" DOUBLE PRECISION,
+    "Mppt0Ch0ArrayCurrent" DOUBLE PRECISION,
+    "Mppt0Ch0ArrayVoltage" DOUBLE PRECISION,
+    "Mppt0Ch0BatteryVoltage" DOUBLE PRECISION,
+    "Mppt0Ch0UnitTemperature" DOUBLE PRECISION,
+    "Mppt0Ch1ArrayCurrent" DOUBLE PRECISION,
+    "Mppt0Ch1ArrayVoltage" DOUBLE PRECISION,
+    "Mppt0Ch1BatteryVoltage" DOUBLE PRECISION,
+    "Mppt0Ch1UnitTemperature" DOUBLE PRECISION,
+    "Mppt1Ch0ArrayCurrent" DOUBLE PRECISION,
+    "Mppt1Ch0ArrayVoltage" DOUBLE PRECISION,
+    "Mppt1Ch0BatteryVoltage" DOUBLE PRECISION,
+    "Mppt1Ch0UnitTemperature" DOUBLE PRECISION,
+    "Mppt1Ch1ArrayCurrent" DOUBLE PRECISION,
+    "Mppt1Ch1ArrayVoltage" DOUBLE PRECISION,
+    "Mppt1Ch1BatteryVoltage" DOUBLE PRECISION,
+    "Mppt1Ch1UnitTemperature" DOUBLE PRECISION,
+    "Mppt2Ch0ArrayCurrent" DOUBLE PRECISION,
+    "Mppt2Ch0ArrayVoltage" DOUBLE PRECISION,
+    "Mppt2Ch0BatteryVoltage" DOUBLE PRECISION,
+    "Mppt2Ch0UnitTemperature" DOUBLE PRECISION,
+    "Mppt2Ch1ArrayCurrent" DOUBLE PRECISION,
+    "Mppt2Ch1ArrayVoltage" DOUBLE PRECISION,
+    "Mppt2Ch1BatteryVoltage" DOUBLE PRECISION,
+    "Mppt2Ch1UnitTemperature" DOUBLE PRECISION,
+    "Mppt3Ch0ArrayCurrent" DOUBLE PRECISION,
+    "Mppt3Ch0ArrayVoltage" DOUBLE PRECISION,
+    "Mppt3Ch0BatteryVoltage" DOUBLE PRECISION,
+    "Mppt3Ch0UnitTemperature" DOUBLE PRECISION,
+    "Mppt3Ch1ArrayCurrent" DOUBLE PRECISION,
+    "Mppt3Ch1ArrayVoltage" DOUBLE PRECISION,
+    "Mppt3Ch1BatteryVoltage" DOUBLE PRECISION,
+    "Mppt3Ch1UnitTemperature" DOUBLE PRECISION,
+    "ProximitySensor1" DOUBLE PRECISION,
+    "ProximitySensor2" DOUBLE PRECISION,
+    "ProximitySensor3" DOUBLE PRECISION,
+    "ProximitySensor4" DOUBLE PRECISION,
+    "GpsAdditionalFlags" DOUBLE PRECISION,
+    "GpsDay" DOUBLE PRECISION,
+    "GpsFixStatusFlags" DOUBLE PRECISION,
+    "GpsHour" DOUBLE PRECISION,
+    "GpsLatitude" DOUBLE PRECISION,
+    "GpsLongitude" DOUBLE PRECISION,
+    "GpsMinute" DOUBLE PRECISION,
+    "GpsMonth" DOUBLE PRECISION,
+    "GpsSecond" DOUBLE PRECISION,
+    "GpsValidityFlags" DOUBLE PRECISION,
+    "GpsYear" DOUBLE PRECISION,
+    "MpuAccelerationX" DOUBLE PRECISION,
+    "MpuAccelerationY" DOUBLE PRECISION,
+    "MpuAccelerationZ" DOUBLE PRECISION,
+    "MpuRotationX" DOUBLE PRECISION,
+    "MpuRotationY" DOUBLE PRECISION,
+    "MpuRotationZ" DOUBLE PRECISION,
+    "MpuTemperature" DOUBLE PRECISION,
+    "Input12V" DOUBLE PRECISION,
+    "AlwaysOnSupplyFault" BOOLEAN,
+    "ArrayBPSError" BOOLEAN,
+    "CanOc12VWarning" BOOLEAN,
+    "CanbusCommunicationFault" BOOLEAN,
+    "CclReducedDueToAlternateCurrentLimit" BOOLEAN,
+    "CclReducedDueToChargerLatch" BOOLEAN,
+    "CclReducedDueToHighCellResistance" BOOLEAN,
+    "CclReducedDueToHighCellVoltage" BOOLEAN,
+    "CclReducedDueToHighPackVoltage" BOOLEAN,
+    "CclReducedDueToHighSoc" BOOLEAN,
+    "CclReducedDueToTemperature" BOOLEAN,
+    "ChargeBPSError" BOOLEAN,
+    "ChargeLimitEnforcementFault" BOOLEAN,
+    "ChargerSafetyRelayFault" BOOLEAN,
+    "CurrentSensorFault" BOOLEAN,
+    "DclAndCclReducedDueToCommunicationFailsafe" BOOLEAN,
+    "DclAndCclReducedDueToVoltageFailsafe" BOOLEAN,
+    "DclReducedDueToHighCellResistance" BOOLEAN,
+    "DclReducedDueToLowCellVoltage" BOOLEAN,
+    "DclReducedDueToLowPackVoltage" BOOLEAN,
+    "DclReducedDueToLowSoc" BOOLEAN,
+    "DclReducedDueToTemperature" BOOLEAN,
+    "DischargeLimitEnforcementFault" BOOLEAN,
+    "FanMonitorFault" BOOLEAN,
+    "HighVoltageIsolationFault" BOOLEAN,
+    "InternalCommunicationFault" BOOLEAN,
+    "InternalConversionFault" BOOLEAN,
+    "InternalLogicFault" BOOLEAN,
+    "InternalMemoryFault" BOOLEAN,
+    "InternalThermistorFault" BOOLEAN,
+    "LowCellVoltageFault" BOOLEAN,
+    "MotorBPSError" BOOLEAN,
+    "OpenWiringFault" BOOLEAN,
+    "PackVoltageSensorFault" BOOLEAN,
+    "PowerSupply12VFault" BOOLEAN,
+    "ThermistorFault" BOOLEAN,
+    "VoltageRedundancyFault" BOOLEAN,
+    "WeakCellFault" BOOLEAN,
+    "WeakPackFault" BOOLEAN,
+
+    CONSTRAINT "PK_9a0efd28da0c9c4ddb0a002345c" PRIMARY KEY ("timestamp","rfid")
+);
+
+-- CreateIndex
+CREATE INDEX "IDX_847b73ee1f3faf017fe4e9a6cb" ON "lap"("rfid", "timestamp");
+
+-- CreateIndex
+CREATE INDEX "IDX_667eee2eb4f507ee0f5f9552a6" ON "telemetry_packet"("RaceName", "timestamp");
+
+-- CreateIndex
+CREATE INDEX "IDX_9a0efd28da0c9c4ddb0a002345" ON "telemetry_packet"("rfid", "timestamp");
+
diff --git a/packages/db/prisma/migrations/20260526021109_add_grafana_snapshot/migration.sql b/packages/db/prisma/migrations/20260526021109_add_grafana_snapshot/migration.sql
new file mode 100644
index 00000000..470171be
--- /dev/null
+++ b/packages/db/prisma/migrations/20260526021109_add_grafana_snapshot/migration.sql
@@ -0,0 +1,12 @@
+-- CreateTable
+CREATE TABLE "grafana_snapshot" (
+    "id" UUID NOT NULL DEFAULT gen_random_uuid(),
+    "url" TEXT NOT NULL,
+    "label" TEXT NOT NULL,
+    "created_at" TIMESTAMPTZ(6) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "grafana_snapshot_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "grafana_snapshot_url_key" ON "grafana_snapshot"("url");
diff --git a/packages/db/prisma/migrations/migration_lock.toml b/packages/db/prisma/migrations/migration_lock.toml
new file mode 100644
index 00000000..044d57cd
--- /dev/null
+++ b/packages/db/prisma/migrations/migration_lock.toml
@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (e.g., Git)
+provider = "postgresql"
diff --git a/packages/db/prisma/schema.prisma b/packages/db/prisma/schema.prisma
index 1fb1e1a0..f6cba0cd 100644
--- a/packages/db/prisma/schema.prisma
+++ b/packages/db/prisma/schema.prisma
@@ -37,6 +37,13 @@ model lap {
   @@index([rfid, timestamp], map: "IDX_847b73ee1f3faf017fe4e9a6cb")
 }
 
+model grafana_snapshot {
+  id         String   @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
+  url        String   @unique
+  label      String
+  created_at DateTime @default(now()) @db.Timestamptz(6)
+}
+
 model telemetry_packet {
   timestamp                                  DateTime @db.Timestamptz(6)
   rfid                                       String
diff --git a/packages/db/src/services/DatabaseService.ts b/packages/db/src/services/DatabaseService.ts
index ce81b266..54db0bcf 100644
--- a/packages/db/src/services/DatabaseService.ts
+++ b/packages/db/src/services/DatabaseService.ts
@@ -221,6 +221,22 @@ export class DatabaseService {
     });
   }
 
+  public async getSnapshots() {
+    this.assertConnected();
+
+    return prisma.grafana_snapshot.findMany({
+      orderBy: { created_at: "desc" },
+    });
+  }
+
+  public async createSnapshot(url: string, label: string) {
+    this.assertConnected();
+
+    return prisma.grafana_snapshot.create({
+      data: { url, label },
+    });
+  }
+
   private assertConnected() {
     if (!this.isConnected) {
       throw new Error("Database not connected");
diff --git a/packages/server/.env.example b/packages/server/.env.example
index 66854096..58d0247b 100644
--- a/packages/server/.env.example
+++ b/packages/server/.env.example
@@ -24,6 +24,7 @@ MQTT_PASSWORD=changeme
 ########################
 DRIVER_NAME_UPDATE_PASSWORD=changeme
 FINISH_LINE_UPDATE_PASSWORD=changeme
+SNAPSHOT_PASSWORD=changeme
 
 ########################
 # Machine Learning
diff --git a/packages/server/src/controllers/routeControllers/snapshot.controller.ts b/packages/server/src/controllers/routeControllers/snapshot.controller.ts
new file mode 100644
index 00000000..ee37b9ce
--- /dev/null
+++ b/packages/server/src/controllers/routeControllers/snapshot.controller.ts
@@ -0,0 +1,123 @@
+import type { BackendController } from "../BackendController/BackendController";
+
+import { type Request, type Response } from "express";
+
+import { createApplicationLogger } from "@/utils/logger";
+import { validateSnapshotPassword } from "@/utils/validatePassword";
+
+import type {
+  CreateSnapshotRequestDTO,
+  CreateSnapshotResponseDTO,
+  IGrafanaSnapshot,
+  SnapshotListResponseDTO,
+} from "@shared/helios-types";
+
+/**
+ * Maps a Prisma grafana_snapshot row to its serializable DTO shape,
+ * converting the Date `created_at` to an ISO string.
+ */
+function serializeSnapshot(
+  snapshot: Omit<IGrafanaSnapshot, "created_at"> & { created_at: Date },
+): IGrafanaSnapshot {
+  return { ...snapshot, created_at: snapshot.created_at.toISOString() };
+}
+
+export const getSnapshots = async (
+  request: Request,
+  response: Response<SnapshotListResponseDTO>,
+) => {
+  const backendController = request.app.locals
+    .backendController as BackendController;
+
+  const logger = createApplicationLogger(
+    "snapshot.controller.ts",
+    request,
+    response,
+  );
+
+  logger.info(`ENTRY - ${request.method} ${request.url}`);
+  const snapshots = await backendController.databaseService.getSnapshots();
+
+  const data: SnapshotListResponseDTO = {
+    data: snapshots.map(serializeSnapshot),
+    message: "OK",
+    uptime: process.uptime() + " seconds",
+  };
+  logger.info(`EXIT - ${request.method} ${request.url} - 200`);
+
+  return response.status(200).json(data);
+};
+
+export const createSnapshot = async (
+  request: Request<Record<string, string>, unknown, CreateSnapshotRequestDTO>,
+  response: Response<CreateSnapshotResponseDTO | { error: string }>,
+) => {
+  const { url, label, password } = request.body;
+
+  const logger = createApplicationLogger(
+    "snapshot.controller.ts",
+    request,
+    response,
+  );
+
+  logger.info(`ENTRY - ${request.method} ${request.url}`);
+
+  if (!url || !label || !password) {
+    logger.warn("Missing required fields - url, label, or password");
+    return response
+      .status(400)
+      .json({ error: "url, label, and password are required" });
+  }
+
+  if (!validateSnapshotPassword(password)) {
+    logger.warn("Invalid password attempt for snapshot creation");
+    return response.status(401).json({ error: "Invalid password" });
+  }
+
+  let parsed: URL;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return response.status(400).json({ error: "Invalid URL format" });
+  }
+  if (parsed.protocol !== "https:") {
+    return response.status(400).json({ error: "URL must use HTTPS" });
+  }
+
+  if (parsed.hostname !== "snapshots.raintank.io") {
+    return response
+      .status(400)
+      .json({ error: "URL must be a Grafana public snapshot (snapshots.raintank.io)" });
+  }
+
+  const backendController = request.app.locals
+    .backendController as BackendController;
+
+  let snapshot: Awaited<
+    ReturnType<typeof backendController.databaseService.createSnapshot>
+  >;
+  try {
+    snapshot = await backendController.databaseService.createSnapshot(
+      url,
+      label,
+    );
+  } catch (error) {
+    // Prisma P2002 = unique constraint violation (url is @unique).
+    if ((error as { code?: string }).code === "P2002") {
+      logger.warn(`Snapshot URL already exists: ${url}`);
+      return response
+        .status(409)
+        .json({ error: "A snapshot with this URL already exists" });
+    }
+    throw error;
+  }
+
+  const data: CreateSnapshotResponseDTO = {
+    data: serializeSnapshot(snapshot),
+    message: "Snapshot created successfully",
+    uptime: process.uptime() + " seconds",
+  };
+  logger.info(`EXIT - ${request.method} ${request.url} - 201`);
+
+  return response.status(201).json(data);
+};
diff --git a/packages/server/src/index.ts b/packages/server/src/index.ts
index 5e230790..3a81319e 100644
--- a/packages/server/src/index.ts
+++ b/packages/server/src/index.ts
@@ -1,5 +1,6 @@
 import { BackendController } from "./controllers/BackendController/BackendController";
 import lapRouter from "./routes/lap.route";
+import snapshotRouter from "./routes/snapshot.route";
 
 import axios from "axios";
 import axiosRetry from "axios-retry";
@@ -48,6 +49,7 @@ app.use("/", playbackRouter);
 app.use("/", lapRouter);
 app.use("/", driverRouter);
 app.use("/", machineLearningRouter);
+app.use("/", snapshotRouter);
 
 app.use(errorHandler);
 
diff --git a/packages/server/src/routes/snapshot.route.ts b/packages/server/src/routes/snapshot.route.ts
new file mode 100644
index 00000000..f60be8f9
--- /dev/null
+++ b/packages/server/src/routes/snapshot.route.ts
@@ -0,0 +1,12 @@
+import express from "express";
+
+import * as controllers from "@/controllers/routeControllers/snapshot.controller";
+
+import { asyncHandler } from "@/middleware/errorHandler";
+
+const snapshotRouter = express.Router();
+
+snapshotRouter.get("/snapshots", asyncHandler(controllers.getSnapshots));
+snapshotRouter.post("/snapshots", asyncHandler(controllers.createSnapshot));
+
+export default snapshotRouter;
diff --git a/packages/server/src/utils/validatePassword.ts b/packages/server/src/utils/validatePassword.ts
index 0c63c39f..556d4ab0 100644
--- a/packages/server/src/utils/validatePassword.ts
+++ b/packages/server/src/utils/validatePassword.ts
@@ -30,3 +30,14 @@ if (!validPassword) {
 export function validateDriverUpdatePassword(password: string): boolean {
   return password === validPassword;
 }
+
+/**
+ * Validates the snapshot management password against SNAPSHOT_PASSWORD env var.
+ */
+export function validateSnapshotPassword(password: string): boolean {
+  const snapshotPassword = process.env.SNAPSHOT_PASSWORD;
+  if (!snapshotPassword) {
+    throw new Error("SNAPSHOT_PASSWORD environment variable is not configured");
+  }
+  return password === snapshotPassword;
+}
diff --git a/packages/shared/src/dto/index.ts b/packages/shared/src/dto/index.ts
index bde43871..8a8f9491 100644
--- a/packages/shared/src/dto/index.ts
+++ b/packages/shared/src/dto/index.ts
@@ -1,3 +1,4 @@
 export * from "./driver";
 export * from "./lap";
 export * from "./playback";
+export * from "./snapshot";
diff --git a/packages/shared/src/dto/snapshot.ts b/packages/shared/src/dto/snapshot.ts
new file mode 100644
index 00000000..05b8e9b9
--- /dev/null
+++ b/packages/shared/src/dto/snapshot.ts
@@ -0,0 +1,24 @@
+export interface IGrafanaSnapshot {
+  id: string;
+  url: string;
+  label: string;
+  created_at: string;
+}
+
+export interface SnapshotListResponseDTO {
+  data: IGrafanaSnapshot[];
+  message: string;
+  uptime: string;
+}
+
+export interface CreateSnapshotRequestDTO {
+  url: string;
+  label: string;
+  password: string;
+}
+
+export interface CreateSnapshotResponseDTO {
+  data: IGrafanaSnapshot;
+  message: string;
+  uptime: string;
+}

From 19d14b63e92c75ec94afd055dfb61712bdb8f16b Mon Sep 17 00:00:00 2001
From: Dastine <christine52jesus@gmail.com>
Date: Sat, 30 May 2026 18:26:50 -0600
Subject: [PATCH 04/15] feat: Add button to expand snapshot form and integrate
 Grafana links

---
 .../src/components/tabs/AnalysisTab.tsx       | 154 +++++++++++++-----
 1 file changed, 111 insertions(+), 43 deletions(-)

diff --git a/packages/client/src/components/tabs/AnalysisTab.tsx b/packages/client/src/components/tabs/AnalysisTab.tsx
index 17d540a0..5cdd33d6 100644
--- a/packages/client/src/components/tabs/AnalysisTab.tsx
+++ b/packages/client/src/components/tabs/AnalysisTab.tsx
@@ -7,10 +7,23 @@ import { useCreateSnapshot, useSnapshots } from "@/hooks/useSnapshots";
 import { tabs } from "@/objects/TabRoutes";
 import { useAppState } from "@/stores/useAppState";
 import { usePacketStore } from "@/stores/usePacket";
-import { helios, lightGray, mediumGray } from "@/styles/colors";
+import {
+  helios,
+  heliosCompliment,
+  lightGray,
+  mediumGray,
+} from "@/styles/colors";
 import { ThemeProvider } from "@emotion/react";
-import { OpenInNew } from "@mui/icons-material";
-import { CircularProgress, Tab, Tabs, createTheme } from "@mui/material";
+import { ExpandMore, OpenInNew } from "@mui/icons-material";
+import {
+  Button,
+  CircularProgress,
+  Collapse,
+  Tab,
+  Tabs,
+  TextField,
+  createTheme,
+} from "@mui/material";
 
 import MLContainer from "../containers/MLContainer";
 import StatsContainer from "../molecules/AnalysisMolecules/StatsContainer";
@@ -55,9 +68,10 @@ const grafanaLinks = [
     label: "Grafana History",
     url: process.env.NEXT_PUBLIC_GRAFANA_HISTORY_OPEN_URL,
   },
-].filter((link): link is { url: string; label: string } =>
-  Boolean(link.url?.trim()),
-);
+]
+  // Normalize once: trim here so the stored url (used as href) is clean.
+  .map((link) => ({ ...link, url: link.url?.trim() }))
+  .filter((link): link is { url: string; label: string } => Boolean(link.url));
 
 function GrafanaLink({ href, label }: { href: string; label: string }) {
   return (
@@ -82,6 +96,8 @@ function GrafanaLink({ href, label }: { href: string; label: string }) {
 
 function AddSnapshotForm() {
   const formRef = useRef<HTMLFormElement>(null);
+  const [expanded, setExpanded] = useState(false);
+  const { resolvedTheme } = useTheme();
   const { isPending, mutate } = useCreateSnapshot({
     onSuccess: () => formRef.current?.reset(),
   });
@@ -96,46 +112,95 @@ function AddSnapshotForm() {
     });
   }
 
+  // Outlined-field styling matched to the Lap Data filters (ColumnFilters /
+  // DriverFilter): helios borders, heliosCompliment floating label.
+  const fieldSx = {
+    "& .MuiInputLabel-root": {
+      "&.Mui-focused": { color: heliosCompliment },
+      "&.MuiInputLabel-shrink": { color: heliosCompliment },
+      color: heliosCompliment,
+    },
+    "& .MuiOutlinedInput-input": {
+      color: resolvedTheme === "dark" ? lightGray : "black",
+    },
+    "& .MuiOutlinedInput-notchedOutline": { borderColor: helios },
+    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+      borderColor: heliosCompliment,
+    },
+    "&:hover .MuiOutlinedInput-notchedOutline": {
+      borderColor: resolvedTheme === "dark" ? "white" : helios,
+    },
+  };
+
   return (
-    <form
-      className="mt-2 flex flex-col gap-2 rounded border border-black/10 bg-black/5 p-3 dark:border-white/10 dark:bg-white/5"
-      onSubmit={handleSubmit}
-      ref={formRef}
-    >
-      <p className="text-gray-600 dark:text-gray-400 text-xs font-semibold">
+    <div className="mt-2 flex flex-col">
+      <button
+        aria-controls="add-snapshot-form"
+        aria-expanded={expanded}
+        className="flex items-center justify-between border-b border-black pb-1 text-sm font-medium uppercase tracking-[0.02857em] text-[#00000099] dark:text-dark"
+        onClick={() => setExpanded((prev) => !prev)}
+        type="button"
+      >
         Add Snapshot
-      </p>
-      <input
-        className="rounded border border-black/20 bg-white px-2 py-1 text-xs dark:border-white/20 dark:bg-gray-800"
-        name="url"
-        placeholder="Grafana snapshot URL"
-        required
-        type="url"
-      />
-      <div className="flex gap-1.5">
-        <input
-          className="min-w-0 flex-1 rounded border border-black/20 bg-white px-2 py-1 text-xs dark:border-white/20 dark:bg-gray-800"
-          name="label"
-          placeholder="Label (e.g. Race Day 2025)"
-          required
-          type="text"
+        <ExpandMore
+          sx={{
+            fontSize: 20,
+            transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+            transition: "transform 0.2s",
+          }}
         />
-        <input
-          className="w-32 rounded border border-black/20 bg-white px-2 py-1 text-xs dark:border-white/20 dark:bg-gray-800"
-          name="password"
-          placeholder="Password"
-          required
-          type="password"
-        />
-        <button
-          className="rounded bg-[#F05A28] px-3 py-1 text-xs font-medium text-white disabled:opacity-50"
-          disabled={isPending}
-          type="submit"
+      </button>
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <form
+          className="flex flex-col gap-3 pt-3"
+          id="add-snapshot-form"
+          onSubmit={handleSubmit}
+          ref={formRef}
         >
-          {isPending ? "Saving…" : "Save"}
-        </button>
-      </div>
-    </form>
+          <TextField
+            label="Grafana snapshot URL"
+            name="url"
+            required
+            size="small"
+            sx={fieldSx}
+            type="url"
+          />
+          <div className="flex flex-wrap items-start gap-2">
+            <TextField
+              className="min-w-0 flex-1"
+              label="Label"
+              name="label"
+              required
+              size="small"
+              sx={fieldSx}
+              type="text"
+            />
+            <TextField
+              label="Password"
+              name="password"
+              required
+              size="small"
+              sx={{ ...fieldSx, width: 140 }}
+              type="password"
+            />
+            <Button
+              disabled={isPending}
+              sx={{
+                "&:hover": { backgroundColor: heliosCompliment },
+                backgroundColor: helios,
+                color: "white",
+                height: 40,
+                textTransform: "none",
+              }}
+              type="submit"
+              variant="contained"
+            >
+              {isPending ? "Saving…" : "Save"}
+            </Button>
+          </div>
+        </form>
+      </Collapse>
+    </div>
   );
 }
 
@@ -165,7 +230,10 @@ function GrafanaHistoryTabContent() {
     }
   }, [baseUrl, resolvedTheme]);
 
-  if (snapshotsLoading) {
+  // next-themes returns resolvedTheme === undefined on the server and the first
+  // client render; gating on it avoids loading the iframe with the wrong theme
+  // and flickering once the real theme resolves.
+  if (snapshotsLoading || !resolvedTheme) {
     return (
       <div className="flex h-[60vh] items-center justify-center">
         <CircularProgress size={24} sx={{ color: helios }} />

From e22fd1bd39c97bcd35410ef571f6f85f1323b2b7 Mon Sep 17 00:00:00 2001
From: Dastine <christine52jesus@gmail.com>
Date: Fri, 5 Jun 2026 19:24:32 -0600
Subject: [PATCH 05/15] feat: Add SNAPSHOT_PASSWORD secret to ECS task
 definition

---
 packages/amplify/amplify/backend.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/amplify/amplify/backend.ts b/packages/amplify/amplify/backend.ts
index 8e1c93ca..0eeee7cf 100644
--- a/packages/amplify/amplify/backend.ts
+++ b/packages/amplify/amplify/backend.ts
@@ -225,6 +225,10 @@ TelemetryECSTaskDefinition.addContainer("TheContainer", {
       HeliosPasswords,
       "FINISH_LINE_UPDATE_PASSWORD",
     ),
+    SNAPSHOT_PASSWORD: ecs.Secret.fromSecretsManager(
+      HeliosPasswords,
+      "SNAPSHOT_PASSWORD",
+    ),
   },
 });
 

From f16823f878e28a445646f48398db58d51590bbf4 Mon Sep 17 00:00:00 2001
From: Dastine <christine52jesus@gmail.com>
Date: Sat, 13 Jun 2026 14:15:24 -0600
Subject: [PATCH 06/15] feat: Add snapshot time range to Grafana snapshot
 functionality

---
 .../components/containers/TabsContainer.tsx   | 40 +++++----
 .../src/components/tabs/AnalysisTab.tsx       | 90 ++++++++++++++++---
 .../migration.sql                             |  4 +
 packages/db/prisma/schema.prisma              | 10 ++-
 packages/db/src/services/DatabaseService.ts   |  9 +-
 .../routeControllers/snapshot.controller.ts   | 31 +++++--
 packages/shared/src/dto/snapshot.ts           |  4 +
 7 files changed, 145 insertions(+), 43 deletions(-)
 create mode 100644 packages/db/prisma/migrations/20260613000000_add_snapshot_time_range/migration.sql

diff --git a/packages/client/src/components/containers/TabsContainer.tsx b/packages/client/src/components/containers/TabsContainer.tsx
index 02a2a03d..bdeab46e 100644
--- a/packages/client/src/components/containers/TabsContainer.tsx
+++ b/packages/client/src/components/containers/TabsContainer.tsx
@@ -10,27 +10,29 @@ function TabsContainer() {
   const { slug } = router.query;
 
   return (
-    <div className="flex h-full flex-col">
+    <div className="flex h-full min-h-0 flex-col">
       <NavBar />
-      {routes.map((route: SolarCarRoutes) => {
-        if (route.path === "/" + slug?.toString()) {
-          const isRaceOrAnalysisTab =
-            route.path === "/race" || route.path === "/analysis";
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        {routes.map((route: SolarCarRoutes) => {
+          if (route.path === "/" + slug?.toString()) {
+            const isRaceOrAnalysisTab =
+              route.path === "/race" || route.path === "/analysis";
 
-          return (
-            <Fragment key={route.id}>
-              {isRaceOrAnalysisTab ? (
-                route.element
-              ) : (
-                <FullscreenWrapper componentName={`${route.id} Tab`}>
-                  {route.element}
-                </FullscreenWrapper>
-              )}
-            </Fragment>
-          );
-        }
-        return null;
-      })}
+            return (
+              <Fragment key={route.id}>
+                {isRaceOrAnalysisTab ? (
+                  route.element
+                ) : (
+                  <FullscreenWrapper componentName={`${route.id} Tab`}>
+                    {route.element}
+                  </FullscreenWrapper>
+                )}
+              </Fragment>
+            );
+          }
+          return null;
+        })}
+      </div>
     </div>
   );
 }
diff --git a/packages/client/src/components/tabs/AnalysisTab.tsx b/packages/client/src/components/tabs/AnalysisTab.tsx
index 5cdd33d6..8ce3e0ef 100644
--- a/packages/client/src/components/tabs/AnalysisTab.tsx
+++ b/packages/client/src/components/tabs/AnalysisTab.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from "next-themes";
 import Image from "next/image";
-import React, { useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
 import { useCreateSnapshot, useSnapshots } from "@/hooks/useSnapshots";
@@ -14,6 +14,7 @@ import {
   mediumGray,
 } from "@/styles/colors";
 import { ThemeProvider } from "@emotion/react";
+import { notifications } from "@mantine/notifications";
 import { ExpandMore, OpenInNew } from "@mui/icons-material";
 import {
   Button,
@@ -94,21 +95,83 @@ function GrafanaLink({ href, label }: { href: string; label: string }) {
   );
 }
 
+function parseSnapshotTimeRange(
+  rawUrl: string,
+): { from: string; to: string } | null {
+  try {
+    const parsed = new URL(rawUrl.trim());
+    const from = parsed.searchParams.get("from");
+    const to = parsed.searchParams.get("to");
+    if (!from || !to) return null;
+    if (isNaN(new Date(from).getTime()) || isNaN(new Date(to).getTime()))
+      return null;
+    return { from, to };
+  } catch {
+    return null;
+  }
+}
+
 function AddSnapshotForm() {
   const formRef = useRef<HTMLFormElement>(null);
   const [expanded, setExpanded] = useState(false);
+  const [urlValue, setUrlValue] = useState("");
   const { resolvedTheme } = useTheme();
   const { isPending, mutate } = useCreateSnapshot({
-    onSuccess: () => formRef.current?.reset(),
+    onSuccess: () => {
+      formRef.current?.reset();
+      setUrlValue("");
+    },
   });
 
+  const timeRange = parseSnapshotTimeRange(urlValue);
+  const urlHasValue = urlValue.trim().length > 0;
+  const urlError = urlHasValue && timeRange === null;
+
+  const prevTimeRange = useRef<typeof timeRange>(null);
+  useEffect(() => {
+    if (timeRange && !prevTimeRange.current) {
+      notifications.show({
+        color: "green",
+        message: `${new Date(timeRange.from).toLocaleDateString()} – ${new Date(timeRange.to).toLocaleDateString()}`,
+        title: "Time range detected",
+      });
+    }
+    prevTimeRange.current = timeRange;
+  }, [timeRange]);
+
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     const fd = new FormData(e.currentTarget);
+    const url = (fd.get("url") as string).trim();
+    const label = (fd.get("label") as string).trim();
+    const password = (fd.get("password") as string).trim();
+
+    if (!url || !label || !password) {
+      notifications.show({
+        color: "red",
+        message: "Please fill in all fields before saving.",
+        title: "Missing fields",
+      });
+      return;
+    }
+
+    const range = parseSnapshotTimeRange(url);
+    if (!range) {
+      notifications.show({
+        color: "red",
+        message:
+          "The URL must contain valid `from` and `to` query parameters (e.g. ?from=2026-01-01T00:00:00Z&to=2026-12-31T23:59:59Z).",
+        title: "Cannot parse time range",
+      });
+      return;
+    }
+
     mutate({
-      label: fd.get("label") as string,
-      password: fd.get("password") as string,
-      url: fd.get("url") as string,
+      label,
+      password,
+      snapshot_from: range.from,
+      snapshot_to: range.to,
+      url,
     });
   }
 
@@ -152,39 +215,42 @@ function AddSnapshotForm() {
       </button>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <form
-          className="flex flex-col gap-3 pt-3"
+          className="flex flex-col gap-3 pb-3 pt-3"
           id="add-snapshot-form"
           onSubmit={handleSubmit}
           ref={formRef}
         >
           <TextField
+            error={urlError}
+            helperText={
+              urlError
+                ? "URL must include ?from=…&to=… query params with valid dates."
+                : undefined
+            }
             label="Grafana snapshot URL"
             name="url"
-            required
+            onChange={(e) => setUrlValue(e.target.value)}
             size="small"
             sx={fieldSx}
-            type="url"
+            value={urlValue}
           />
           <div className="flex flex-wrap items-start gap-2">
             <TextField
               className="min-w-0 flex-1"
               label="Label"
               name="label"
-              required
               size="small"
               sx={fieldSx}
-              type="text"
             />
             <TextField
               label="Password"
               name="password"
-              required
               size="small"
               sx={{ ...fieldSx, width: 140 }}
               type="password"
             />
             <Button
-              disabled={isPending}
+              disabled={isPending || !urlHasValue || urlError}
               sx={{
                 "&:hover": { backgroundColor: heliosCompliment },
                 backgroundColor: helios,
diff --git a/packages/db/prisma/migrations/20260613000000_add_snapshot_time_range/migration.sql b/packages/db/prisma/migrations/20260613000000_add_snapshot_time_range/migration.sql
new file mode 100644
index 00000000..7836f184
--- /dev/null
+++ b/packages/db/prisma/migrations/20260613000000_add_snapshot_time_range/migration.sql
@@ -0,0 +1,4 @@
+-- AlterTable
+ALTER TABLE "grafana_snapshot"
+  ADD COLUMN "snapshot_from" TIMESTAMPTZ(6) NOT NULL DEFAULT '-infinity',
+  ADD COLUMN "snapshot_to"   TIMESTAMPTZ(6) NOT NULL DEFAULT 'infinity';
diff --git a/packages/db/prisma/schema.prisma b/packages/db/prisma/schema.prisma
index f6cba0cd..890849ba 100644
--- a/packages/db/prisma/schema.prisma
+++ b/packages/db/prisma/schema.prisma
@@ -38,10 +38,12 @@ model lap {
 }
 
 model grafana_snapshot {
-  id         String   @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
-  url        String   @unique
-  label      String
-  created_at DateTime @default(now()) @db.Timestamptz(6)
+  id            String   @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
+  url           String   @unique
+  label         String
+  snapshot_from DateTime @db.Timestamptz(6)
+  snapshot_to   DateTime @db.Timestamptz(6)
+  created_at    DateTime @default(now()) @db.Timestamptz(6)
 }
 
 model telemetry_packet {
diff --git a/packages/db/src/services/DatabaseService.ts b/packages/db/src/services/DatabaseService.ts
index 54db0bcf..6f04c424 100644
--- a/packages/db/src/services/DatabaseService.ts
+++ b/packages/db/src/services/DatabaseService.ts
@@ -229,11 +229,16 @@ export class DatabaseService {
     });
   }
 
-  public async createSnapshot(url: string, label: string) {
+  public async createSnapshot(
+    url: string,
+    label: string,
+    snapshot_from: Date,
+    snapshot_to: Date,
+  ) {
     this.assertConnected();
 
     return prisma.grafana_snapshot.create({
-      data: { url, label },
+      data: { url, label, snapshot_from, snapshot_to },
     });
   }
 
diff --git a/packages/server/src/controllers/routeControllers/snapshot.controller.ts b/packages/server/src/controllers/routeControllers/snapshot.controller.ts
index ee37b9ce..c5fae75b 100644
--- a/packages/server/src/controllers/routeControllers/snapshot.controller.ts
+++ b/packages/server/src/controllers/routeControllers/snapshot.controller.ts
@@ -17,9 +17,18 @@ import type {
  * converting the Date `created_at` to an ISO string.
  */
 function serializeSnapshot(
-  snapshot: Omit<IGrafanaSnapshot, "created_at"> & { created_at: Date },
+  snapshot: Omit<IGrafanaSnapshot, "created_at" | "snapshot_from" | "snapshot_to"> & {
+    created_at: Date;
+    snapshot_from: Date;
+    snapshot_to: Date;
+  },
 ): IGrafanaSnapshot {
-  return { ...snapshot, created_at: snapshot.created_at.toISOString() };
+  return {
+    ...snapshot,
+    snapshot_from: snapshot.snapshot_from.toISOString(),
+    snapshot_to: snapshot.snapshot_to.toISOString(),
+    created_at: snapshot.created_at.toISOString(),
+  };
 }
 
 export const getSnapshots = async (
@@ -52,7 +61,7 @@ export const createSnapshot = async (
   request: Request<Record<string, string>, unknown, CreateSnapshotRequestDTO>,
   response: Response<CreateSnapshotResponseDTO | { error: string }>,
 ) => {
-  const { url, label, password } = request.body;
+  const { url, label, password, snapshot_from, snapshot_to } = request.body;
 
   const logger = createApplicationLogger(
     "snapshot.controller.ts",
@@ -62,11 +71,19 @@ export const createSnapshot = async (
 
   logger.info(`ENTRY - ${request.method} ${request.url}`);
 
-  if (!url || !label || !password) {
-    logger.warn("Missing required fields - url, label, or password");
+  if (!url || !label || !password || !snapshot_from || !snapshot_to) {
+    logger.warn("Missing required fields");
+    return response
+      .status(400)
+      .json({ error: "url, label, snapshot_from, snapshot_to, and password are required" });
+  }
+
+  const fromDate = new Date(snapshot_from);
+  const toDate = new Date(snapshot_to);
+  if (isNaN(fromDate.getTime()) || isNaN(toDate.getTime())) {
     return response
       .status(400)
-      .json({ error: "url, label, and password are required" });
+      .json({ error: "snapshot_from and snapshot_to must be valid ISO date strings" });
   }
 
   if (!validateSnapshotPassword(password)) {
@@ -100,6 +117,8 @@ export const createSnapshot = async (
     snapshot = await backendController.databaseService.createSnapshot(
       url,
       label,
+      fromDate,
+      toDate,
     );
   } catch (error) {
     // Prisma P2002 = unique constraint violation (url is @unique).
diff --git a/packages/shared/src/dto/snapshot.ts b/packages/shared/src/dto/snapshot.ts
index 05b8e9b9..a2f53d50 100644
--- a/packages/shared/src/dto/snapshot.ts
+++ b/packages/shared/src/dto/snapshot.ts
@@ -2,6 +2,8 @@ export interface IGrafanaSnapshot {
   id: string;
   url: string;
   label: string;
+  snapshot_from: string;
+  snapshot_to: string;
   created_at: string;
 }
 
@@ -14,6 +16,8 @@ export interface SnapshotListResponseDTO {
 export interface CreateSnapshotRequestDTO {
   url: string;
   label: string;
+  snapshot_from: string;
+  snapshot_to: string;
   password: string;
 }
 

From 8e07a8b5b0123b2c5c6d1c51e284bb331d3ba871 Mon Sep 17 00:00:00 2001
From: Dastine <christine52jesus@gmail.com>
Date: Sat, 13 Jun 2026 14:33:50 -0600
Subject: [PATCH 07/15] fix vertical overflow in AnalysisTab

---
 .../src/components/tabs/AnalysisTab.tsx       | 31 ++++++++-----------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/packages/client/src/components/tabs/AnalysisTab.tsx b/packages/client/src/components/tabs/AnalysisTab.tsx
index 8ce3e0ef..22ea7f99 100644
--- a/packages/client/src/components/tabs/AnalysisTab.tsx
+++ b/packages/client/src/components/tabs/AnalysisTab.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from "next-themes";
 import Image from "next/image";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
 import { useCreateSnapshot, useSnapshots } from "@/hooks/useSnapshots";
@@ -127,18 +127,6 @@ function AddSnapshotForm() {
   const urlHasValue = urlValue.trim().length > 0;
   const urlError = urlHasValue && timeRange === null;
 
-  const prevTimeRange = useRef<typeof timeRange>(null);
-  useEffect(() => {
-    if (timeRange && !prevTimeRange.current) {
-      notifications.show({
-        color: "green",
-        message: `${new Date(timeRange.from).toLocaleDateString()} – ${new Date(timeRange.to).toLocaleDateString()}`,
-        title: "Time range detected",
-      });
-    }
-    prevTimeRange.current = timeRange;
-  }, [timeRange]);
-
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     const fd = new FormData(e.currentTarget);
@@ -221,11 +209,16 @@ function AddSnapshotForm() {
           ref={formRef}
         >
           <TextField
+            FormHelperTextProps={{
+              sx: timeRange ? { color: "success.main" } : undefined,
+            }}
             error={urlError}
             helperText={
               urlError
                 ? "URL must include ?from=…&to=… query params with valid dates."
-                : undefined
+                : timeRange
+                  ? `${new Date(timeRange.from).toLocaleDateString()} – ${new Date(timeRange.to).toLocaleDateString()} time range detected`
+                  : undefined
             }
             label="Grafana snapshot URL"
             name="url"
@@ -234,19 +227,20 @@ function AddSnapshotForm() {
             sx={fieldSx}
             value={urlValue}
           />
-          <div className="flex flex-wrap items-start gap-2">
+          <div className="flex w-full min-w-0 flex-wrap items-start gap-2">
             <TextField
-              className="min-w-0 flex-1"
+              className="min-w-0 flex-1 basis-full sm:basis-0"
               label="Label"
               name="label"
               size="small"
               sx={fieldSx}
             />
             <TextField
+              className="min-w-0 flex-1"
               label="Password"
               name="password"
               size="small"
-              sx={{ ...fieldSx, width: 140 }}
+              sx={{ ...fieldSx, maxWidth: 140 }}
               type="password"
             />
             <Button
@@ -255,6 +249,7 @@ function AddSnapshotForm() {
                 "&:hover": { backgroundColor: heliosCompliment },
                 backgroundColor: helios,
                 color: "white",
+                flexShrink: 0,
                 height: 40,
                 textTransform: "none",
               }}
@@ -347,7 +342,7 @@ function GrafanaHistoryTabContent() {
           */}
           <iframe
             allow="fullscreen"
-            className="h-[60vh] w-full rounded border border-black/10 dark:border-white/10"
+            className="h-[50vh] w-full rounded border border-black/10 dark:border-white/10"
             sandbox="allow-scripts allow-same-origin allow-popups"
             src={iframeUrl}
             title="Grafana History"

From 64d531866c6968ad92e5270662aa5f4922c0d823 Mon Sep 17 00:00:00 2001
From: Dastine <christine52jesus@gmail.com>
Date: Sat, 13 Jun 2026 14:40:09 -0600
Subject: [PATCH 08/15] feat: Refactor AddSnapshotForm to accept toggle handler

---
 .../src/components/tabs/AnalysisTab.tsx       | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/tabs/AnalysisTab.tsx b/packages/client/src/components/tabs/AnalysisTab.tsx
index 22ea7f99..f8ad6a0f 100644
--- a/packages/client/src/components/tabs/AnalysisTab.tsx
+++ b/packages/client/src/components/tabs/AnalysisTab.tsx
@@ -111,9 +111,14 @@ function parseSnapshotTimeRange(
   }
 }
 
-function AddSnapshotForm() {
+function AddSnapshotForm({
+  expanded,
+  onToggle,
+}: {
+  expanded: boolean;
+  onToggle: () => void;
+}) {
   const formRef = useRef<HTMLFormElement>(null);
-  const [expanded, setExpanded] = useState(false);
   const [urlValue, setUrlValue] = useState("");
   const { resolvedTheme } = useTheme();
   const { isPending, mutate } = useCreateSnapshot({
@@ -189,7 +194,7 @@ function AddSnapshotForm() {
         aria-controls="add-snapshot-form"
         aria-expanded={expanded}
         className="flex items-center justify-between border-b border-black pb-1 text-sm font-medium uppercase tracking-[0.02857em] text-[#00000099] dark:text-dark"
-        onClick={() => setExpanded((prev) => !prev)}
+        onClick={onToggle}
         type="button"
       >
         Add Snapshot
@@ -271,6 +276,12 @@ function GrafanaHistoryTabContent() {
   const { resolvedTheme } = useTheme();
   const { data: snapshots = [], isLoading: snapshotsLoading } = useSnapshots();
 
+  // Collapsed: give the iframe the full height. Expanded: shrink it so the
+  // Add Snapshot form has room without spilling past the tab into the rows
+  // below. CSS-only height change — the iframe resizes (Grafana reflows its
+  // panels) and is never re-fetched.
+  const [snapshotFormExpanded, setSnapshotFormExpanded] = useState(false);
+
   // Most recent snapshot is first (ordered by created_at desc from server).
   const latestSnapshot = snapshots[0] ?? null;
   const baseUrl = latestSnapshot?.url ?? null;
@@ -342,7 +353,10 @@ function GrafanaHistoryTabContent() {
           */}
           <iframe
             allow="fullscreen"
-            className="h-[50vh] w-full rounded border border-black/10 dark:border-white/10"
+            className={twMerge(
+              "w-full rounded border border-black/10 transition-[height] duration-300 ease-in-out dark:border-white/10",
+              snapshotFormExpanded ? "h-[50vh]" : "h-[60vh]",
+            )}
             sandbox="allow-scripts allow-same-origin allow-popups"
             src={iframeUrl}
             title="Grafana History"
@@ -357,7 +371,10 @@ function GrafanaHistoryTabContent() {
           </p>
         </div>
       )}
-      <AddSnapshotForm />
+      <AddSnapshotForm
+        expanded={snapshotFormExpanded}
+        onToggle={() => setSnapshotFormExpanded((prev) => !prev)}
+      />
     </div>
   );
 }

From 7b5721354672fbcb1c8cab38b91b47314ddab3f3 Mon Sep 17 00:00:00 2001
From: Dastine <christine52jesus@gmail.com>
Date: Sat, 13 Jun 2026 15:37:12 -0600
Subject: [PATCH 09/15] Remove useMemo as we have reactCompiler enabled.

---
 packages/client/src/components/tabs/AnalysisTab.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/tabs/AnalysisTab.tsx b/packages/client/src/components/tabs/AnalysisTab.tsx
index f8ad6a0f..46befbf6 100644
--- a/packages/client/src/components/tabs/AnalysisTab.tsx
+++ b/packages/client/src/components/tabs/AnalysisTab.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from "next-themes";
 import Image from "next/image";
-import React, { useMemo, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
 import { useCreateSnapshot, useSnapshots } from "@/hooks/useSnapshots";
@@ -288,19 +288,19 @@ function GrafanaHistoryTabContent() {
 
   // The server only stores embeddable snapshots.raintank.io URLs, so we can
   // build the iframe src directly and just append the theme query param.
-  const iframeUrl = useMemo(() => {
-    if (!baseUrl) return null;
+  let iframeUrl: string | null = null;
+  if (baseUrl) {
     try {
       const url = new URL(baseUrl);
       url.searchParams.set(
         "theme",
         resolvedTheme === "dark" ? "dark" : "light",
       );
-      return url.toString();
+      iframeUrl = url.toString();
     } catch {
-      return null;
+      iframeUrl = null;
     }
-  }, [baseUrl, resolvedTheme]);
+  }
 
   // next-themes returns resolvedTheme === undefined on the server and the first
   // client render; gating on it avoids loading the iframe with the wrong theme

From 9884aa6ece2d840a8ce8371e5c6a8d3293357feb Mon Sep 17 00:00:00 2001
From: Dastine <christine52jesus@gmail.com>
Date: Sat, 13 Jun 2026 15:43:21 -0600
Subject: [PATCH 10/15] chore: Remove outdated migrations section from
 README.md

---
 packages/db/README.md | 22 ----------------------
 1 file changed, 22 deletions(-)

diff --git a/packages/db/README.md b/packages/db/README.md
index eece4388..88d9fa93 100644
--- a/packages/db/README.md
+++ b/packages/db/README.md
@@ -114,28 +114,6 @@ Then deploy migrations in target environments:
 yarn workspace db migrate:run
 ```
 
-## Migrations (production)
-
-Schema changes go through Prisma **migrations**, not `db push`. Prod was
-baselined on 2026-05-30 (see `prisma/migrations/0_init`), so its history is
-tracked in `_prisma_migrations`.
-
-- Author a change locally: `npx prisma migrate dev --name <change>`
-- Apply to an environment: `yarn migrate:run` (= `prisma migrate deploy`)
-- Check state / drift: `npx prisma migrate status`
-
-Notes:
-
-- `migrate:run` / `deploy` and `migrate dev` use `DIRECT_URL` (Supabase: the
-  direct `:5432` connection, not the `:6543` pooler).
-- **Do not run `db push`, `migrate reset`, or `db:reset:force` against a remote
-  `.env`** — those mutate/drop whatever `DATABASE_URL`/`DIRECT_URL` point at. For
-  local experiments, point `.env` at the local container or pass an explicit
-  localhost URL inline.
-- Adopting migrations on an already-`db push`-ed DB: create a baseline migration
-  and mark it applied without running SQL via
-  `npx prisma migrate resolve --applied <migration_name>`.
-
 ## Seeding
 
 `yarn db:seed` inserts sample drivers, laps, and telemetry packets.

From 00e89cb2062bed57e803567e9a4fc824f9cf862c Mon Sep 17 00:00:00 2001
From: Dastine <christine52jesus@gmail.com>
Date: Sat, 13 Jun 2026 15:45:51 -0600
Subject: [PATCH 11/15] remove comments from the code.

---
 packages/client/src/components/tabs/AnalysisTab.tsx | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/packages/client/src/components/tabs/AnalysisTab.tsx b/packages/client/src/components/tabs/AnalysisTab.tsx
index 46befbf6..8170ba09 100644
--- a/packages/client/src/components/tabs/AnalysisTab.tsx
+++ b/packages/client/src/components/tabs/AnalysisTab.tsx
@@ -341,16 +341,6 @@ function GrafanaHistoryTabContent() {
               </span>
             </div>
           )}
-          {/*
-            allow-same-origin keeps the framed snapshots.raintank.io document
-            in its real origin so Grafana's SPA can read localStorage during
-            bootstrap. Verified: without it the iframe gets a unique opaque
-            origin, localStorage access throws ("Error bootstrapping Grafana
-            SecurityError ... lacks 'allow-same-origin'"), and Grafana renders
-            its "failed to load application files" error instead of the
-            dashboard. Safe to pair with allow-scripts here because the snapshot
-            is cross-origin to this app and cannot reach out to alter the parent.
-          */}
           <iframe
             allow="fullscreen"
             className={twMerge(

From d86e7aeb5273c4fd0a6226d041930a244b18b422 Mon Sep 17 00:00:00 2001
From: Dastine <christine52jesus@gmail.com>
Date: Sat, 13 Jun 2026 15:48:24 -0600
Subject: [PATCH 12/15] fix: Change getSnapshots to return the most recent
 snapshot

---
 packages/db/src/services/DatabaseService.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/db/src/services/DatabaseService.ts b/packages/db/src/services/DatabaseService.ts
index 6f04c424..1b64cc70 100644
--- a/packages/db/src/services/DatabaseService.ts
+++ b/packages/db/src/services/DatabaseService.ts
@@ -224,7 +224,7 @@ export class DatabaseService {
   public async getSnapshots() {
     this.assertConnected();
 
-    return prisma.grafana_snapshot.findMany({
+    return prisma.grafana_snapshot.findFirst({
       orderBy: { created_at: "desc" },
     });
   }

From a3f631313d5559ebd7543f9923b4a1167a62562c Mon Sep 17 00:00:00 2001
From: Dastine <christine52jesus@gmail.com>
Date: Sat, 13 Jun 2026 15:59:58 -0600
Subject: [PATCH 13/15] feat: Add Grafana color to Tailwind configuration

---
 packages/client/tailwind.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/tailwind.config.ts b/packages/client/tailwind.config.ts
index bc8c6660..6060281e 100644
--- a/packages/client/tailwind.config.ts
+++ b/packages/client/tailwind.config.ts
@@ -35,6 +35,7 @@ const config: Config = {
         helios: "#B94A6C",
         pink: "#9C0534",
         gray: "#807D7D",
+        grafana: "#F05A28",
       },
       backgroundColor: {
         light: "#D2D2D2",

From d4f2a08634e66fd532fb27a0bc4891baed6a2303 Mon Sep 17 00:00:00 2001
From: Dastine <christine52jesus@gmail.com>
Date: Sat, 13 Jun 2026 16:08:24 -0600
Subject: [PATCH 14/15] refactor: address PR review feedback on Grafana
 snapshot feature
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fetch only the most recent snapshot end-to-end instead of all rows
- Extract the inline serialize input type into shared IGrafanaSnapshotRow
- Make AddSnapshotForm fully controlled (drop FormData/formRef)
- Replace hardcoded #F05A28 with a semantic `grafana` Tailwind token
- Use a single {" · "} separator in the snapshot caption
---
 .../src/components/tabs/AnalysisTab.tsx       | 38 ++++++++++---------
 packages/client/src/constants/apiRoutes.ts    |  4 +-
 packages/client/src/hooks/useSnapshots.ts     | 14 +++----
 packages/db/src/services/DatabaseService.ts   |  2 +-
 .../routeControllers/snapshot.controller.ts   | 24 +++++-------
 packages/server/src/routes/snapshot.route.ts  |  5 ++-
 packages/shared/src/dto/snapshot.ts           | 18 ++++++++-
 7 files changed, 61 insertions(+), 44 deletions(-)

diff --git a/packages/client/src/components/tabs/AnalysisTab.tsx b/packages/client/src/components/tabs/AnalysisTab.tsx
index 8170ba09..6d06e2da 100644
--- a/packages/client/src/components/tabs/AnalysisTab.tsx
+++ b/packages/client/src/components/tabs/AnalysisTab.tsx
@@ -1,9 +1,9 @@
 import { useTheme } from "next-themes";
 import Image from "next/image";
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { twMerge } from "tailwind-merge";
 
-import { useCreateSnapshot, useSnapshots } from "@/hooks/useSnapshots";
+import { useCreateSnapshot, useRecentSnapshot } from "@/hooks/useSnapshots";
 import { tabs } from "@/objects/TabRoutes";
 import { useAppState } from "@/stores/useAppState";
 import { usePacketStore } from "@/stores/usePacket";
@@ -77,7 +77,7 @@ const grafanaLinks = [
 function GrafanaLink({ href, label }: { href: string; label: string }) {
   return (
     <a
-      className="flex items-center gap-1 text-xs font-medium text-[#F05A28] hover:underline"
+      className="flex items-center gap-1 text-xs font-medium text-grafana hover:underline"
       href={href}
       rel="noopener noreferrer"
       target="_blank"
@@ -118,13 +118,15 @@ function AddSnapshotForm({
   expanded: boolean;
   onToggle: () => void;
 }) {
-  const formRef = useRef<HTMLFormElement>(null);
   const [urlValue, setUrlValue] = useState("");
+  const [labelValue, setLabelValue] = useState("");
+  const [passwordValue, setPasswordValue] = useState("");
   const { resolvedTheme } = useTheme();
   const { isPending, mutate } = useCreateSnapshot({
     onSuccess: () => {
-      formRef.current?.reset();
       setUrlValue("");
+      setLabelValue("");
+      setPasswordValue("");
     },
   });
 
@@ -134,10 +136,9 @@ function AddSnapshotForm({
 
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
-    const fd = new FormData(e.currentTarget);
-    const url = (fd.get("url") as string).trim();
-    const label = (fd.get("label") as string).trim();
-    const password = (fd.get("password") as string).trim();
+    const url = urlValue.trim();
+    const label = labelValue.trim();
+    const password = passwordValue.trim();
 
     if (!url || !label || !password) {
       notifications.show({
@@ -211,7 +212,6 @@ function AddSnapshotForm({
           className="flex flex-col gap-3 pb-3 pt-3"
           id="add-snapshot-form"
           onSubmit={handleSubmit}
-          ref={formRef}
         >
           <TextField
             FormHelperTextProps={{
@@ -237,16 +237,20 @@ function AddSnapshotForm({
               className="min-w-0 flex-1 basis-full sm:basis-0"
               label="Label"
               name="label"
+              onChange={(e) => setLabelValue(e.target.value)}
               size="small"
               sx={fieldSx}
+              value={labelValue}
             />
             <TextField
               className="min-w-0 flex-1"
               label="Password"
               name="password"
+              onChange={(e) => setPasswordValue(e.target.value)}
               size="small"
               sx={{ ...fieldSx, maxWidth: 140 }}
               type="password"
+              value={passwordValue}
             />
             <Button
               disabled={isPending || !urlHasValue || urlError}
@@ -274,16 +278,14 @@ function GrafanaHistoryTabContent() {
   const playbackSwitch = useAppState((s) => s.currentAppState.playbackSwitch);
   const timestamp = usePacketStore((s) => s.currentPacket.TimeStamp);
   const { resolvedTheme } = useTheme();
-  const { data: snapshots = [], isLoading: snapshotsLoading } = useSnapshots();
+  const { data: latestSnapshot = null, isLoading: snapshotsLoading } =
+    useRecentSnapshot();
 
   // Collapsed: give the iframe the full height. Expanded: shrink it so the
   // Add Snapshot form has room without spilling past the tab into the rows
   // below. CSS-only height change — the iframe resizes (Grafana reflows its
   // panels) and is never re-fetched.
   const [snapshotFormExpanded, setSnapshotFormExpanded] = useState(false);
-
-  // Most recent snapshot is first (ordered by created_at desc from server).
-  const latestSnapshot = snapshots[0] ?? null;
   const baseUrl = latestSnapshot?.url ?? null;
 
   // The server only stores embeddable snapshots.raintank.io URLs, so we can
@@ -320,17 +322,17 @@ function GrafanaHistoryTabContent() {
           <div className="flex items-center justify-between">
             <p className="text-gray-500 text-xs">
               Showing snapshot:{" "}
-              <span className="font-medium text-[#F05A28]">
+              <span className="font-medium text-grafana">
                 {latestSnapshot?.label}
-              </span>{" "}
-              ·{" "}
+              </span>
+              {" · "}
               {latestSnapshot &&
                 new Date(latestSnapshot.created_at).toLocaleDateString()}
             </p>
           </div>
           {playbackSwitch && (
             <div className="flex items-center gap-2 rounded bg-black/5 px-3 py-1.5 text-xs dark:bg-white/5">
-              <span className="font-semibold text-[#F05A28]">
+              <span className="font-semibold text-grafana">
                 Playback position:
               </span>
               <span className="text-gray-700 dark:text-gray-300 font-mono">
diff --git a/packages/client/src/constants/apiRoutes.ts b/packages/client/src/constants/apiRoutes.ts
index b07b344e..a4c0b144 100644
--- a/packages/client/src/constants/apiRoutes.ts
+++ b/packages/client/src/constants/apiRoutes.ts
@@ -87,8 +87,10 @@ export const BACKEND_ROUTES = {
    * Grafana snapshot endpoints
    */
   snapshots: {
-    /** Get all snapshots / create new snapshot */
+    /** Create new snapshot */
     base: "/snapshots",
+    /** Get the most recent snapshot */
+    recent: "/snapshots/recent",
   },
 } as const;
 
diff --git a/packages/client/src/hooks/useSnapshots.ts b/packages/client/src/hooks/useSnapshots.ts
index 7b68f532..10d4a6b9 100644
--- a/packages/client/src/hooks/useSnapshots.ts
+++ b/packages/client/src/hooks/useSnapshots.ts
@@ -7,16 +7,16 @@ import type {
   CreateSnapshotRequestDTO,
   CreateSnapshotResponseDTO,
   IGrafanaSnapshot,
-  SnapshotListResponseDTO,
+  RecentSnapshotResponseDTO,
 } from "@shared/helios-types";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
 
 export const SNAPSHOTS_QUERY_KEY = "grafana-snapshots";
 
-async function fetchSnapshots(): Promise<IGrafanaSnapshot[]> {
-  const response = await backendApi.get<SnapshotListResponseDTO>(
-    BACKEND_ROUTES.snapshots.base,
+async function fetchRecentSnapshot(): Promise<IGrafanaSnapshot | null> {
+  const response = await backendApi.get<RecentSnapshotResponseDTO>(
+    BACKEND_ROUTES.snapshots.recent,
   );
   return response.data.data;
 }
@@ -31,11 +31,11 @@ async function postSnapshot(
   return response.data;
 }
 
-export function useSnapshots() {
+export function useRecentSnapshot() {
   const query = useQuery({
     gcTime: 1000 * 60 * 5,
-    placeholderData: [],
-    queryFn: fetchSnapshots,
+    placeholderData: null,
+    queryFn: fetchRecentSnapshot,
     queryKey: [SNAPSHOTS_QUERY_KEY] as const,
     refetchOnWindowFocus: false,
     staleTime: 1000 * 60 * 2,
diff --git a/packages/db/src/services/DatabaseService.ts b/packages/db/src/services/DatabaseService.ts
index 1b64cc70..dc27f4dd 100644
--- a/packages/db/src/services/DatabaseService.ts
+++ b/packages/db/src/services/DatabaseService.ts
@@ -221,7 +221,7 @@ export class DatabaseService {
     });
   }
 
-  public async getSnapshots() {
+  public async getRecentSnapshot() {
     this.assertConnected();
 
     return prisma.grafana_snapshot.findFirst({
diff --git a/packages/server/src/controllers/routeControllers/snapshot.controller.ts b/packages/server/src/controllers/routeControllers/snapshot.controller.ts
index c5fae75b..6bd71f37 100644
--- a/packages/server/src/controllers/routeControllers/snapshot.controller.ts
+++ b/packages/server/src/controllers/routeControllers/snapshot.controller.ts
@@ -9,20 +9,15 @@ import type {
   CreateSnapshotRequestDTO,
   CreateSnapshotResponseDTO,
   IGrafanaSnapshot,
-  SnapshotListResponseDTO,
+  IGrafanaSnapshotRow,
+  RecentSnapshotResponseDTO,
 } from "@shared/helios-types";
 
 /**
  * Maps a Prisma grafana_snapshot row to its serializable DTO shape,
- * converting the Date `created_at` to an ISO string.
+ * converting the Date columns to ISO strings.
  */
-function serializeSnapshot(
-  snapshot: Omit<IGrafanaSnapshot, "created_at" | "snapshot_from" | "snapshot_to"> & {
-    created_at: Date;
-    snapshot_from: Date;
-    snapshot_to: Date;
-  },
-): IGrafanaSnapshot {
+function serializeSnapshot(snapshot: IGrafanaSnapshotRow): IGrafanaSnapshot {
   return {
     ...snapshot,
     snapshot_from: snapshot.snapshot_from.toISOString(),
@@ -31,9 +26,9 @@ function serializeSnapshot(
   };
 }
 
-export const getSnapshots = async (
+export const getRecentSnapshot = async (
   request: Request,
-  response: Response<SnapshotListResponseDTO>,
+  response: Response<RecentSnapshotResponseDTO>,
 ) => {
   const backendController = request.app.locals
     .backendController as BackendController;
@@ -45,10 +40,11 @@ export const getSnapshots = async (
   );
 
   logger.info(`ENTRY - ${request.method} ${request.url}`);
-  const snapshots = await backendController.databaseService.getSnapshots();
+  const snapshot =
+    await backendController.databaseService.getRecentSnapshot();
 
-  const data: SnapshotListResponseDTO = {
-    data: snapshots.map(serializeSnapshot),
+  const data: RecentSnapshotResponseDTO = {
+    data: snapshot ? serializeSnapshot(snapshot) : null,
     message: "OK",
     uptime: process.uptime() + " seconds",
   };
diff --git a/packages/server/src/routes/snapshot.route.ts b/packages/server/src/routes/snapshot.route.ts
index f60be8f9..b232385a 100644
--- a/packages/server/src/routes/snapshot.route.ts
+++ b/packages/server/src/routes/snapshot.route.ts
@@ -6,7 +6,10 @@ import { asyncHandler } from "@/middleware/errorHandler";
 
 const snapshotRouter = express.Router();
 
-snapshotRouter.get("/snapshots", asyncHandler(controllers.getSnapshots));
+snapshotRouter.get(
+  "/snapshots/recent",
+  asyncHandler(controllers.getRecentSnapshot),
+);
 snapshotRouter.post("/snapshots", asyncHandler(controllers.createSnapshot));
 
 export default snapshotRouter;
diff --git a/packages/shared/src/dto/snapshot.ts b/packages/shared/src/dto/snapshot.ts
index a2f53d50..b315fe92 100644
--- a/packages/shared/src/dto/snapshot.ts
+++ b/packages/shared/src/dto/snapshot.ts
@@ -7,8 +7,22 @@ export interface IGrafanaSnapshot {
   created_at: string;
 }
 
-export interface SnapshotListResponseDTO {
-  data: IGrafanaSnapshot[];
+/**
+ * The raw DB row shape, before serialization: the date columns are still
+ * `Date` objects rather than the ISO strings exposed on `IGrafanaSnapshot`.
+ */
+export interface IGrafanaSnapshotRow
+  extends Omit<
+    IGrafanaSnapshot,
+    "created_at" | "snapshot_from" | "snapshot_to"
+  > {
+  snapshot_from: Date;
+  snapshot_to: Date;
+  created_at: Date;
+}
+
+export interface RecentSnapshotResponseDTO {
+  data: IGrafanaSnapshot | null;
   message: string;
   uptime: string;
 }

From fcaf0c81178d3039bfca5b062662914b6ed3b986 Mon Sep 17 00:00:00 2001
From: Dastine <christine52jesus@gmail.com>
Date: Sat, 13 Jun 2026 16:13:12 -0600
Subject: [PATCH 15/15] style: Adjust Grafana button disabled state for better
 visibility

---
 packages/client/src/components/tabs/AnalysisTab.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/client/src/components/tabs/AnalysisTab.tsx b/packages/client/src/components/tabs/AnalysisTab.tsx
index 6d06e2da..73fe1fbd 100644
--- a/packages/client/src/components/tabs/AnalysisTab.tsx
+++ b/packages/client/src/components/tabs/AnalysisTab.tsx
@@ -255,6 +255,11 @@ function AddSnapshotForm({
             <Button
               disabled={isPending || !urlHasValue || urlError}
               sx={{
+                "&.Mui-disabled": {
+                  backgroundColor: helios,
+                  color: "white",
+                  opacity: 0.5,
+                },
                 "&:hover": { backgroundColor: heliosCompliment },
                 backgroundColor: helios,
                 color: "white",