From 8a498e902de33980ac6b7fdb9ed8af148a240f4b Mon Sep 17 00:00:00 2001
From: Raj Nandan Sharma <rajnandan1@gmail.com>
Date: Mon, 9 Feb 2026 22:30:11 +0530
Subject: [PATCH] refactor: update tooltip styles and improve component
 structure across multiple files

---
 src/lib/components/KenerNav.svelte             |  6 +++++-
 src/lib/components/MinuteGrid.svelte           |  7 ++++---
 src/lib/components/MonitorOverview.svelte      |  2 ++
 src/lib/components/StatusBarCalendar.svelte    |  6 +++---
 src/lib/server/queues/alertingQueue.ts         |  7 +++++++
 src/lib/server/queues/emailQueue.ts            |  7 +++++++
 src/lib/server/queues/monitorExecuteQueue.ts   |  7 +++++++
 src/lib/server/queues/monitorResponseQueue.ts  |  7 +++++++
 src/lib/server/queues/subscriberQueue.ts       | 11 ++++++++++-
 src/lib/server/schedulers/appScheduler.ts      |  7 +++++++
 .../server/schedulers/maintenanceScheduler.ts  |  8 +++++++-
 src/lib/server/schedulers/monitorSchedulers.ts | 10 ++++++++++
 src/routes/(docs)/docs/DocsSidebar.svelte      |  4 ++--
 src/routes/(kener)/+layout.svelte              |  5 +++--
 .../monitors/[monitor_tag]/+page.server.ts     | 15 ++++++++++++++-
 .../monitors/[monitor_tag]/+page.svelte        | 18 ++++++++++++++++++
 16 files changed, 113 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/KenerNav.svelte b/src/lib/components/KenerNav.svelte
index 22362c87..b5e44764 100644
--- a/src/lib/components/KenerNav.svelte
+++ b/src/lib/components/KenerNav.svelte
@@ -43,7 +43,11 @@
                     style="border-radius: var(--radius-3xl)"
                   >
                     {#if item.iconURL}
-                      <img src={clientResolver(resolve, item.iconURL)} alt={item.name} class="mr-2 h-4 w-4" />
+                      <img
+                        src={clientResolver(resolve, item.iconURL)}
+                        alt={item.name}
+                        class="mr-2 h-4 w-4 object-cover"
+                      />
                     {/if}
                     {item.name}
                   </a>
diff --git a/src/lib/components/MinuteGrid.svelte b/src/lib/components/MinuteGrid.svelte
index d2d8e405..f2fa7505 100644
--- a/src/lib/components/MinuteGrid.svelte
+++ b/src/lib/components/MinuteGrid.svelte
@@ -307,11 +307,12 @@
     {#if hoveredMinute}
       <div
         bind:this={tooltipEl}
-        class="bg-foreground text-secondary pointer-events-none absolute z-20 w-max -translate-x-1/2 rounded-md px-2 py-1 text-xs font-medium whitespace-nowrap"
+        class="bg-popover text-popover-foreground border-border pointer-events-none absolute z-20 w-max -translate-x-1/2 rounded-md border px-2 py-1 text-xs font-medium whitespace-nowrap"
         style={tooltipStyle}
       >
-        {$formatDate(hoveredMinute.data.timestamp, "HH:mm")} -
-        <span class="text-{hoveredMinute.data.status.toLowerCase()}">{$t(hoveredMinute.data.status)}</span>
+        <span class="text-{hoveredMinute.data.status.toLowerCase()}">
+          {$t(hoveredMinute.data.status)} @ {$formatDate(hoveredMinute.data.timestamp, "HH:mm")}
+        </span>
       </div>
     {/if}
   </div>
diff --git a/src/lib/components/MonitorOverview.svelte b/src/lib/components/MonitorOverview.svelte
index 58c85a25..b5e3c27d 100644
--- a/src/lib/components/MonitorOverview.svelte
+++ b/src/lib/components/MonitorOverview.svelte
@@ -15,6 +15,8 @@
   import { getEndOfDayAtTz } from "$lib/client/datetime";
   import { formatDate } from "$lib/stores/datetime";
   import clientResolver from "$lib/client/resolver.js";
+  import { ArrowDown } from "@lucide/svelte";
+  import MonitorBar from "./MonitorBar.svelte";
   interface Props {
     monitorTag: string;
     class?: string;
diff --git a/src/lib/components/StatusBarCalendar.svelte b/src/lib/components/StatusBarCalendar.svelte
index acc62d56..943ac10a 100644
--- a/src/lib/components/StatusBarCalendar.svelte
+++ b/src/lib/components/StatusBarCalendar.svelte
@@ -365,14 +365,14 @@
   {#if hoveredBar}
     <div
       bind:this={tooltipEl}
-      class="bg-foreground text-secondary pointer-events-none absolute z-20 w-max -translate-x-1/2 rounded-md px-2 py-1 text-xs font-medium whitespace-nowrap"
+      class="bg-popover text-popver-foreground pointer-events-none absolute z-20 w-max -translate-x-1/2 rounded-md border px-2 py-1 text-xs font-medium whitespace-nowrap"
       style={tooltipStyle}
     >
       <span class={getStatusColor(hoveredBar.data)}>{$t(GetStatusSummary(hoveredBar.data))}</span>
-      <span class="text-muted">@</span>
+      <span class="text-muted-foreground">@</span>
       {$formatDate(hoveredBar.data.ts, "d MMM yyyy")}
       {#if hoveredBar.data.avgLatency > 0}
-        <span class="text-muted ml-1">|</span>
+        <span class="text-muted-foreground ml-1">|</span>
         <span class="ml-1">{ParseLatency(hoveredBar.data.avgLatency)}</span>
       {/if}
     </div>
diff --git a/src/lib/server/queues/alertingQueue.ts b/src/lib/server/queues/alertingQueue.ts
index a619c8d6..31465d8d 100644
--- a/src/lib/server/queues/alertingQueue.ts
+++ b/src/lib/server/queues/alertingQueue.ts
@@ -315,6 +315,13 @@ export const push = async (monitor_tag: string, ts: number, status: string, opti
   if (!options) {
     options = {};
   }
+  options.removeOnComplete = {
+    age: 300, // keep up to 5 minutes
+    count: 100, // keep up to 100 jobs
+  };
+  options.removeOnFail = {
+    age: 24 * 3600, // keep up to 24 hours
+  };
   const queue = getQueue();
   addWorker();
 
diff --git a/src/lib/server/queues/emailQueue.ts b/src/lib/server/queues/emailQueue.ts
index fc845cb0..1cbdf81a 100644
--- a/src/lib/server/queues/emailQueue.ts
+++ b/src/lib/server/queues/emailQueue.ts
@@ -71,6 +71,13 @@ export const push = async (jobData: EmailJobData, options?: JobsOptions) => {
   if (!options) {
     options = {};
   }
+  options.removeOnComplete = {
+    age: 300, // keep up to 5 minutes
+    count: 100, // keep up to 100 jobs
+  };
+  options.removeOnFail = {
+    age: 24 * 3600, // keep up to 24 hours
+  };
 
   const queue = getQueue();
   addWorker();
diff --git a/src/lib/server/queues/monitorExecuteQueue.ts b/src/lib/server/queues/monitorExecuteQueue.ts
index 376c9350..f107ff60 100644
--- a/src/lib/server/queues/monitorExecuteQueue.ts
+++ b/src/lib/server/queues/monitorExecuteQueue.ts
@@ -195,6 +195,13 @@ export const push = async (monitor: MonitorRecordTyped, ts: number, options?: Jo
       id: deDupId,
     };
   }
+  options.removeOnComplete = {
+    age: 3600, // keep up to 1 hour
+    count: 1000, // keep up to 1000 jobs
+  };
+  options.removeOnFail = {
+    age: 24 * 3600, // keep up to 24 hours
+  };
   const queue = getQueue();
   addWorker();
   await queue.add(
diff --git a/src/lib/server/queues/monitorResponseQueue.ts b/src/lib/server/queues/monitorResponseQueue.ts
index a007c225..7df399bd 100644
--- a/src/lib/server/queues/monitorResponseQueue.ts
+++ b/src/lib/server/queues/monitorResponseQueue.ts
@@ -76,6 +76,13 @@ export const push = async (monitorTag: string, ts: number, result: MonitoringRes
       id: deDupId,
     };
   }
+  options.removeOnComplete = {
+    age: 300, // keep up to 5 minutes
+    count: 100, // keep up to 100 jobs
+  };
+  options.removeOnFail = {
+    age: 24 * 3600, // keep up to 24 hours
+  };
   const queue = getQueue();
   addWorker();
   await queue.add(
diff --git a/src/lib/server/queues/subscriberQueue.ts b/src/lib/server/queues/subscriberQueue.ts
index 5cbc21cc..323ec12e 100644
--- a/src/lib/server/queues/subscriberQueue.ts
+++ b/src/lib/server/queues/subscriberQueue.ts
@@ -93,7 +93,16 @@ export const push = async (variables: SubscriptionVariableMap, options?: JobsOpt
   if (!options) {
     options = {};
   }
-
+  if (!options) {
+    options = {};
+  }
+  options.removeOnComplete = {
+    age: 300, // keep up to 5 minutes
+    count: 100, // keep up to 100 jobs
+  };
+  options.removeOnFail = {
+    age: 24 * 3600, // keep up to 24 hours
+  };
   const queue = getQueue();
   addWorker();
 
diff --git a/src/lib/server/schedulers/appScheduler.ts b/src/lib/server/schedulers/appScheduler.ts
index bf4fb3ae..a4fba3c4 100644
--- a/src/lib/server/schedulers/appScheduler.ts
+++ b/src/lib/server/schedulers/appScheduler.ts
@@ -87,6 +87,13 @@ export const start = async (options?: JobSchedulerTemplateOptions) => {
   if (!options) {
     options = {};
   }
+  options.removeOnComplete = {
+    age: 300, // keep up to 5 minutes
+    count: 100, // keep up to 100 jobs
+  };
+  options.removeOnFail = {
+    age: 24 * 3600, // keep up to 24 hours
+  };
 
   const queue = getQueue();
   addWorker();
diff --git a/src/lib/server/schedulers/maintenanceScheduler.ts b/src/lib/server/schedulers/maintenanceScheduler.ts
index 862112fb..346e2b63 100644
--- a/src/lib/server/schedulers/maintenanceScheduler.ts
+++ b/src/lib/server/schedulers/maintenanceScheduler.ts
@@ -137,7 +137,13 @@ export const start = async (options?: JobSchedulerTemplateOptions) => {
   if (!options) {
     options = {};
   }
-
+  options.removeOnComplete = {
+    age: 300, // keep up to 5 minutes
+    count: 100, // keep up to 100 jobs
+  };
+  options.removeOnFail = {
+    age: 24 * 3600, // keep up to 24 hours
+  };
   const queue = getQueue();
   addWorker();
 
diff --git a/src/lib/server/schedulers/monitorSchedulers.ts b/src/lib/server/schedulers/monitorSchedulers.ts
index 7fc45607..90756c3b 100644
--- a/src/lib/server/schedulers/monitorSchedulers.ts
+++ b/src/lib/server/schedulers/monitorSchedulers.ts
@@ -46,6 +46,16 @@ export const addJobToSchedulerQueue = async (
   if (!monitor.cron) {
     throw new Error("Monitor cron expression is undefined");
   }
+  if (!options) {
+    options = {};
+  }
+  options.removeOnComplete = {
+    age: 300, // keep up to 5 minutes
+    count: 100, // keep up to 100 jobs
+  };
+  options.removeOnFail = {
+    age: 24 * 3600, // keep up to 24 hours
+  };
   const queue = getQueue(minNumOfWorkers);
   await queue.upsertJobScheduler(
     id,
diff --git a/src/routes/(docs)/docs/DocsSidebar.svelte b/src/routes/(docs)/docs/DocsSidebar.svelte
index b519b777..7179b917 100644
--- a/src/routes/(docs)/docs/DocsSidebar.svelte
+++ b/src/routes/(docs)/docs/DocsSidebar.svelte
@@ -44,7 +44,7 @@
 
   let expandedGroups = $state<string[]>([]);
   let expandedPages = $state<string[]>([]);
-  let prevSlug = $state(currentSlug);
+  let prevSlug = $state("");
 
   // Auto-expand when navigating to a different page (not when manually toggling)
   $effect(() => {
@@ -102,7 +102,7 @@
 </script>
 
 <nav class="p-6 pr-4 pl-10">
-  <div class="flex flex-col gap-6">
+  <div class="scrollbar-hidden flex flex-col gap-6">
     {#each config.sidebar as group (group.group)}
       <div class="mb-2">
         {#if group.collapsible}
diff --git a/src/routes/(kener)/+layout.svelte b/src/routes/(kener)/+layout.svelte
index 0897cae0..25d0beb0 100644
--- a/src/routes/(kener)/+layout.svelte
+++ b/src/routes/(kener)/+layout.svelte
@@ -22,7 +22,7 @@
   {/if}
   {@html `
 	<style id="dynamic-styles">
-		.kener-public {
+		body {
 			--up: ${data.siteStatusColors.UP};
 			--degraded: ${data.siteStatusColors.DEGRADED};
 			--down: ${data.siteStatusColors.DOWN};
@@ -31,7 +31,7 @@
 			--accent-foreground: ${data.siteStatusColors.ACCENT_FOREGROUND || data.siteStatusColors.ACCENT || "#e96e2d"};
 			${data.font?.family ? `--font-family:'${data.font.family}', sans-serif;` : ""}
 		}
-		:is(.dark) .kener-public {
+		:is(.dark) body {
 			--up: ${data.siteStatusColorsDark.UP};
 			--degraded: ${data.siteStatusColorsDark.DEGRADED};
 			--down: ${data.siteStatusColorsDark.DOWN};
@@ -58,6 +58,7 @@
   * {
     font-family: var(--font-family);
   }
+
   /*
 	:global(.text-3xl) {
 		font-family: var(--font-family);
diff --git a/src/routes/(kener)/monitors/[monitor_tag]/+page.server.ts b/src/routes/(kener)/monitors/[monitor_tag]/+page.server.ts
index 825a2684..6f957d60 100644
--- a/src/routes/(kener)/monitors/[monitor_tag]/+page.server.ts
+++ b/src/routes/(kener)/monitors/[monitor_tag]/+page.server.ts
@@ -12,12 +12,18 @@ import type { TimestampStatusCount } from "$lib/server/types/db";
 import { GetNowTimestampUTC, UptimeCalculator } from "$lib/server/tool";
 import GC from "$lib/global-constants.js";
 import { GetStatusColor, GetStatusSummary, ParseLatency } from "$lib/clientTools";
+import { GetMonitorsParsed } from "$lib/server/controllers/monitorsController";
+import type { GroupMonitorTypeData } from "$lib/server/types/monitor";
 
 export const load: PageServerLoad = async ({ params }) => {
   const { monitor_tag } = params;
 
   // Validate monitor exists
-  const monitor = await db.getMonitorByTag(monitor_tag);
+  const monitors = await GetMonitorsParsed({ tag: monitor_tag });
+  if (!monitors || monitors.length === 0) {
+    throw error(404, { message: "Monitor not found" });
+  }
+  const monitor = monitors[0];
   if (!monitor) {
     throw error(404, { message: "Monitor not found" });
   }
@@ -51,6 +57,12 @@ export const load: PageServerLoad = async ({ params }) => {
   };
 
   //get status summary
+  let extendedTags: string[] = [];
+  if (monitor.monitor_type === "GROUP") {
+    const groupData = monitor.type_data as GroupMonitorTypeData;
+    const memberTags = groupData.monitors.map((m) => m.tag);
+    extendedTags = extendedTags.concat(memberTags);
+  }
 
   return {
     monitorTag: monitor_tag,
@@ -68,5 +80,6 @@ export const load: PageServerLoad = async ({ params }) => {
     pastMaintenances,
     upcomingMaintenances,
     externalUrl: monitor.external_url,
+    extendedTags,
   };
 };
diff --git a/src/routes/(kener)/monitors/[monitor_tag]/+page.svelte b/src/routes/(kener)/monitors/[monitor_tag]/+page.svelte
index 9ca9481b..f4272648 100644
--- a/src/routes/(kener)/monitors/[monitor_tag]/+page.svelte
+++ b/src/routes/(kener)/monitors/[monitor_tag]/+page.svelte
@@ -12,6 +12,8 @@
   import ArrowUpRight from "@lucide/svelte/icons/arrow-up-right";
   import clientResolver from "$lib/client/resolver.js";
   import { resolve } from "$app/paths";
+  import { ArrowDown } from "@lucide/svelte";
+  import MonitorBar from "$lib/components/MonitorBar.svelte";
   let { data } = $props();
 
   // State
@@ -117,6 +119,22 @@
   <!-- Calendar View (self-contained component with its own API call) -->
   <MonitorOverview monitorTag={data.monitorTag} class="mb-4" />
 
+  {#if data.extendedTags.length > 0}
+    <!-- Included monitors -->
+    <div class="flex flex-col">
+      <div class="flex flex-col rounded-3xl border">
+        <div class="flex items-center justify-between px-4 pt-4 pb-0">
+          <Badge variant="secondary" class="gap-1">{$t("Available Components")}</Badge>
+        </div>
+        {#each data.extendedTags as tag, i}
+          <div class="{i < data.extendedTags.length - 1 ? 'border-b' : ''} py-2 pb-4">
+            <MonitorBar {tag} />
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
   <!-- recent incidents -->
   <IncidentMonitorList incidents={data.resolvedIncidents} title="Recent Incidents" class="mt-4 mb-4" />
 </div>