changes

check-output.txt

@@ -2,36 +2,43 @@
 > kener@4.0.0 check
 > svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
 
-[dotenv@17.2.3] injecting env (18) from .env -- tip: ⚙️  enable debug logging with { debug: true }
+[dotenv@17.2.4] injecting env (6) from .env -- tip: 🛠️  run anywhere with `dotenvx run -- yourcommand`
 Loading svelte-check in workspace: /Users/rajnandan1/Code/kener
 Getting Svelte diagnostics...
 
-[dotenv@17.2.3] injecting env (18) from .env -- tip: 🔐 prevent committing .env to code: https://dotenvx.com/precommit
-[dotenv@17.2.3] injecting env (0) from .env -- tip: 🔐 prevent building .env in docker: https://dotenvx.com/prebuild
-[dotenv@17.2.3] injecting env (0) from .env -- tip: 🔑 add access controls to secrets: https://dotenvx.com/ops
+[dotenv@17.2.4] injecting env (6) from .env -- tip: 🔄 add secrets lifecycle management: https://dotenvx.com/ops
+[dotenv@17.2.4] injecting env (0) from .env -- tip: 🔐 prevent committing .env to code: https://dotenvx.com/precommit
+[dotenv@17.2.4] injecting env (0) from .env -- tip: ⚙️  write to custom object with { processEnv: myObject }
+/Users/rajnandan1/Code/kener/src/lib/server/controllers/dashboardController.ts:285:9
+Error: Type '{ ts: number; countOfUp: number; countOfDown: number; countOfDegraded: number; countOfMaintenance: number; avgLatency: number; }' is missing the following properties from type 'TimestampStatusCount': maxLatency, minLatency 
+    latestData.reduce((sum, data) => sum + (data.latency || 0), 0) / (latestData.length || 1);
+  const item: TimestampStatusCount = {
+    ts: nowTs,
+
 /Users/rajnandan1/Code/kener/src/lib/components/ui/chart/chart-container.svelte:20:28
 Warn: This reference only captures the initial value of `id`. Did you mean to reference it inside a closure instead?
 https://svelte.dev/e/state_referenced_locally (svelte)
 
   const chartId = `chart-${id || uid.replace(/:/g, "")}`;
 
-/Users/rajnandan1/Code/kener/src/routes/(manage)/+layout.server.ts:1:18
-Error: Cannot find module '$lib/i18n/server' or its corresponding type declarations. 
-import i18n from "$lib/i18n/server";
-import { redirect } from "@sveltejs/kit";
+/Users/rajnandan1/Code/kener/src/routes/(kener)/monitors/[monitor_tag]/+page.server.ts:50:7
+Error: Type '{ ts: number; countOfUp: number; countOfDown: number; countOfDegraded: number; countOfMaintenance: number; avgLatency: number; }' is missing the following properties from type 'TimestampStatusCount': maxLatency, minLatency 
+  //use uptime calculator tool to parse
+  let item: TimestampStatusCount = {
+    ts: lastStatus ? lastStatus.timestamp : GetNowTimestampUTC(),
 
-/Users/rajnandan1/Code/kener/src/routes/(docs)/docs/DocsNavbar.svelte:126:3
+/Users/rajnandan1/Code/kener/src/routes/(docs)/docs/DocsNavbar.svelte:131:3
 Warn: Unused CSS selector ".active"
 https://svelte.dev/e/css_unused_selector (svelte)
 <style>
   .active {
     color: var(--foreground);
 
-/Users/rajnandan1/Code/kener/src/routes/(docs)/docs/DocsSidebar.svelte:45:25
-Warn: This reference only captures the initial value of `currentSlug`. Did you mean to reference it inside a closure instead?
-https://svelte.dev/e/state_referenced_locally (svelte)
-  let expandedPages = $state<string[]>([]);
-  let prevSlug = $state(currentSlug);
+/Users/rajnandan1/Code/kener/src/routes/(kener)/[page_path]/+page.svelte:58:5
+Error: Object literal may only specify known properties, and '"pageSettings"' does not exist in type 'Props'. (ts)
+  <EventsCard
+    pageSettings={data.pageDetails.page_settings}
+    ongoingMaintenancesCount={data.ongoingMaintenances.length}
 
 /Users/rajnandan1/Code/kener/src/routes/(kener)/events/[MMMM]-[YYYY]/+page.svelte:34:28
 Warn: This reference only captures the initial value of `data`. Did you mean to reference it inside a closure instead?
@@ -41,4 +48,4 @@ https://svelte.dev/e/state_referenced_locally (svelte)
   const currentMonth = format(parsedDate, "MMMM yyyy");
 
 ====================================
-svelte-check found 1 error and 4 warnings in 5 files
+svelte-check found 3 errors and 3 warnings in 6 files

src/lib/components/BadgesMenu.svelte

@@ -9,6 +9,7 @@
 
   import TrendingUp from "@lucide/svelte/icons/trending-up";
   import Percent from "@lucide/svelte/icons/percent";
+  import Timer from "@lucide/svelte/icons/timer";
   import Copy from "@lucide/svelte/icons/copy";
 
   interface Props {
@@ -20,7 +21,9 @@
 
   let { open = $bindable(false), monitorTag, protocol, domain }: Props = $props();
 
-  function handleBadgeCopy(type: "status" | "uptime" | "dot" | "dot_ping") {
+  function handleBadgeCopy(
+    type: "status" | "uptime" | "latency_avg" | "latency_max" | "latency_min" | "dot" | "dot_ping"
+  ) {
     trackEvent("badge_copied", { type, monitorTag });
   }
 
@@ -31,6 +34,19 @@
   const badgeUptimeUrl = $derived(
     protocol && domain ? `${protocol}//${domain}` + clientResolver(resolve, `/badge/${monitorTag}/uptime`) : ""
   );
+  const badgeLatencyAvgUrl = $derived(
+    protocol && domain ? `${protocol}//${domain}` + clientResolver(resolve, `/badge/${monitorTag}/latency`) : ""
+  );
+  const badgeLatencyMaxUrl = $derived(
+    protocol && domain
+      ? `${protocol}//${domain}` + clientResolver(resolve, `/badge/${monitorTag}/latency?metric=maximum`)
+      : ""
+  );
+  const badgeLatencyMinUrl = $derived(
+    protocol && domain
+      ? `${protocol}//${domain}` + clientResolver(resolve, `/badge/${monitorTag}/latency?metric=minimum`)
+      : ""
+  );
   const badgeDotUrl = $derived(
     protocol && domain ? `${protocol}//${domain}` + clientResolver(resolve, `/badge/${monitorTag}/dot`) : ""
   );
@@ -94,6 +110,63 @@
               </CopyButton>
             </div>
           {/if}
+
+          {#if badgeLatencyAvgUrl}
+            <div class="flex items-center justify-between gap-2 rounded-3xl border px-2 py-1">
+              <div class="flex items-center gap-2">
+                <Timer class="h-3 w-3" />
+                <span class="text-xs font-medium">{$t("Avg Latency")}</span>
+              </div>
+              <img src={badgeLatencyAvgUrl} alt="Avg Latency Badge" class="h-5" />
+              <CopyButton
+                variant="ghost"
+                size="icon-sm"
+                text={badgeLatencyAvgUrl}
+                class="rounded-btn"
+                onclick={() => handleBadgeCopy("latency_avg")}
+              >
+                <Copy />
+              </CopyButton>
+            </div>
+          {/if}
+
+          {#if badgeLatencyMaxUrl}
+            <div class="flex items-center justify-between gap-2 rounded-3xl border px-2 py-1">
+              <div class="flex items-center gap-2">
+                <Timer class="h-3 w-3" />
+                <span class="text-xs font-medium">{$t("Max Latency")}</span>
+              </div>
+              <img src={badgeLatencyMaxUrl} alt="Max Latency Badge" class="h-5" />
+              <CopyButton
+                variant="ghost"
+                size="icon-sm"
+                text={badgeLatencyMaxUrl}
+                class="rounded-btn"
+                onclick={() => handleBadgeCopy("latency_max")}
+              >
+                <Copy />
+              </CopyButton>
+            </div>
+          {/if}
+
+          {#if badgeLatencyMinUrl}
+            <div class="flex items-center justify-between gap-2 rounded-3xl border px-2 py-1">
+              <div class="flex items-center gap-2">
+                <Timer class="h-3 w-3" />
+                <span class="text-xs font-medium">{$t("Min Latency")}</span>
+              </div>
+              <img src={badgeLatencyMinUrl} alt="Min Latency Badge" class="h-5" />
+              <CopyButton
+                variant="ghost"
+                size="icon-sm"
+                text={badgeLatencyMinUrl}
+                class="rounded-btn"
+                onclick={() => handleBadgeCopy("latency_min")}
+              >
+                <Copy />
+              </CopyButton>
+            </div>
+          {/if}
         </div>
       </div>
 

src/lib/components/LatencyTrendChart.svelte

@@ -3,38 +3,34 @@
   import { curveCatmullRom } from "d3-shape";
   import { scaleTime } from "d3-scale";
   import * as Chart from "$lib/components/ui/chart/index.js";
-  import type { TimestampStatusCount } from "$lib/server/types/db";
   import { t } from "$lib/stores/i18n";
-  import { ta } from "date-fns/locale";
   import { ParseLatency } from "$lib/clientTools";
   import { formatDate } from "$lib/stores/datetime";
 
+  interface ChartPoint {
+    date: Date;
+    value: number;
+  }
+
   interface Props {
-    data: TimestampStatusCount[];
+    data: ChartPoint[];
+    label?: string;
     height?: number;
     class?: string;
   }
 
-  let { data, height = 128, class: className = "" }: Props = $props();
+  let { data, label = $t("Avg Latency"), height = 128, class: className = "" }: Props = $props();
 
   // Chart config
-  const chartConfig = {
-    avgLatency: {
-      label: $t("Avg Latency"),
+  let chartConfig = $derived({
+    value: {
+      label: label,
       color: "var(--chart-1)"
     }
-  } satisfies Chart.ChartConfig;
+  } satisfies Chart.ChartConfig);
 
-  // Transform data for chart
-  let chartData = $derived.by(() => {
-    if (!data) return [];
-    return data
-      .filter((d) => d.avgLatency > 0)
-      .map((d) => ({
-        date: new Date(d.ts * 1000),
-        avgLatency: d.avgLatency
-      }));
-  });
+  // Filter out zero values
+  let chartData = $derived(data.filter((d) => d.value > 0));
 </script>
 
 <div class="{className}  ">
@@ -44,16 +40,16 @@
         data={chartData}
         x="date"
         xScale={scaleTime()}
-        y="avgLatency"
+        y="value"
         yDomain={[0, null]}
         yNice
         axis="x"
         grid={false}
         series={[
           {
-            key: "avgLatency",
-            label: $t("Avg Latency"),
-            color: "var(--color-avgLatency)"
+            key: "value",
+            label: label,
+            color: "var(--color-value)"
           }
         ]}
         props={{

src/lib/components/MonitorOverview.svelte

@@ -16,7 +16,9 @@
   import { formatDate } from "$lib/stores/datetime";
   import clientResolver from "$lib/client/resolver.js";
   import { ArrowDown } from "@lucide/svelte";
-  import MonitorBar from "./MonitorBar.svelte";
+  import * as Popover from "$lib/components/ui/popover/index.js";
+  import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
+
   interface Props {
     monitorTag: string;
     class?: string;
@@ -50,14 +52,37 @@
   // Default to maxDays (first item since sorted descending)
   let selectedDayIndex = $state(0);
 
+  // Latency metric toggle: "average" | "maximum" | "minimum"
+  let latencyMetric = $state("average");
+
   // Display values from API response (already formatted as strings)
   let displayUptime = $derived(overviewData?.uptime ?? "--");
 
   let displayAvgLatency = $derived(overviewData?.avgLatency ?? "--");
+  let displayMaxLatency = $derived(overviewData?.maxLatency ?? "--");
+  let displayMinLatency = $derived(overviewData?.minLatency ?? "--");
 
   // Data for calendar/chart comes directly from API
   let displayData = $derived(overviewData?.uptimeData ?? []);
 
+  // Latency metric label map
+  const metricLabels: Record<string, string> = {
+    average: $t("Avg Latency"),
+    maximum: $t("Max Latency"),
+    minimum: $t("Min Latency")
+  };
+
+  // Transform uptimeData into chart-ready points based on selected metric
+  let latencyChartData = $derived.by(() => {
+    if (!displayData) return [];
+    return displayData.map((d) => ({
+      date: new Date(d.ts * 1000),
+      value: latencyMetric === "maximum" ? d.maxLatency : latencyMetric === "minimum" ? d.minLatency : d.avgLatency
+    }));
+  });
+
+  let latencyChartLabel = $derived(metricLabels[latencyMetric] ?? metricLabels.average);
+
   // Fetch data with days parameter
   async function fetchData(days: number) {
     loading = true;
@@ -132,7 +157,7 @@
           <DropdownMenu.Content align="end">
             <DropdownMenu.Label>{$t("Select Range")}</DropdownMenu.Label>
             <DropdownMenu.Group>
-              {#each dayOptions as option, i}
+              {#each dayOptions as option, i (option.days)}
                 <DropdownMenu.Item
                   class="cursor-pointer text-xs {selectedDayIndex === i ? 'bg-secondary' : ''}"
                   onclick={() => handleDayChange(i)}
@@ -171,11 +196,7 @@
       <div class="flex gap-4">
         <div class="flex flex-1 flex-col items-start gap-1">
           <p class="text-2xl font-semibold">{displayUptime}%</p>
-          <p class="text-muted-foreground text-sm">{$t("Uptime")}</p>
-        </div>
-        <div class="flex flex-1 flex-col items-end gap-1">
-          <p class="text-2xl font-semibold">{displayAvgLatency}</p>
-          <p class="text-muted-foreground text-sm">{$t("Avg Latency")}</p>
+          <p class="text-muted-foreground text-sm font-medium">{$t("Uptime")}</p>
         </div>
       </div>
 
@@ -198,10 +219,49 @@
 
       <!-- Latency Chart -->
       <div class="pt-2">
-        <p class="text-muted-foreground mb-2 text-xs font-medium">
+        <p class="text-muted-foreground mb-2 text-sm font-medium">
           {$t("Latency Trend")}
+          <Popover.Root>
+            <Popover.Trigger class="text-foreground cursor-pointer underline">{latencyChartLabel}</Popover.Trigger>
+            <Popover.Content class="flex w-fit flex-col gap-2">
+              <p class="text-muted-foreground text-xs font-medium">
+                {$t("Select latency metric to display")}
+              </p>
+              <ToggleGroup.Root
+                type="single"
+                spacing={2}
+                size="sm"
+                value={latencyMetric}
+                onValueChange={(v) => {
+                  if (v) latencyMetric = v;
+                }}
+                class="flex justify-between"
+              >
+                <ToggleGroup.Item value="average" aria-label="Average latency">{$t("Avg Latency")}</ToggleGroup.Item>
+                <ToggleGroup.Item value="maximum" aria-label="Maximum latency">{$t("Max Latency")}</ToggleGroup.Item>
+                <ToggleGroup.Item value="minimum" aria-label="Minimum latency">{$t("Min Latency")}</ToggleGroup.Item>
+              </ToggleGroup.Root>
+            </Popover.Content>
+          </Popover.Root>
         </p>
-        <LatencyTrendChart data={displayData} height={128} />
+
+        <!-- Latency Stats -->
+        <div class="mb-3 flex justify-between gap-4">
+          <div class="flex flex-col items-start gap-1">
+            <p class="text-lg font-semibold">{displayAvgLatency}</p>
+            <p class="text-muted-foreground text-xs">{$t("Avg Latency")}</p>
+          </div>
+          <div class="flex flex-col items-center gap-1">
+            <p class="text-lg font-semibold">{displayMinLatency}</p>
+            <p class="text-muted-foreground text-xs">{$t("Min Latency")}</p>
+          </div>
+          <div class="flex flex-col items-end gap-1">
+            <p class="text-lg font-semibold">{displayMaxLatency}</p>
+            <p class="text-muted-foreground text-xs">{$t("Max Latency")}</p>
+          </div>
+        </div>
+
+        <LatencyTrendChart data={latencyChartData} label={latencyChartLabel} height={128} />
       </div>
     {/if}
   </Card.Content>

src/lib/components/ThemePlus.svelte

@@ -121,8 +121,8 @@
       <Button
         href={clientResolver(resolve, "/")}
         variant="outline"
-        size="sm"
-        class="bg-background/80 dark:bg-background/70 border-foreground/10 rounded-full border text-xs shadow-none backdrop-blur-md"
+        size={page.data.isMobile ? "icon-sm" : "sm"}
+        class="bg-background/80 dark:bg-background/70 border-foreground/10 rounded-full border p-0 text-xs shadow-none backdrop-blur-md"
       >
         <ChevronLeft class="h-4 w-4" />
         <span class="hidden sm:inline">{$t("Home")}</span>