@oneuptime/common 12.0.32 → 12.0.33

package/Types/Telemetry/ErrorClass.ts

@@ -0,0 +1,274 @@
+/*
+ * The fault domain of a thrown value: whose problem is it?
+ *
+ * This is the canonical vocabulary for the whole platform. It was originally
+ * introduced as `ExceptionAIClassification` — an after-the-fact LLM verdict on
+ * an already-ingested exception group — but the same five values are what the
+ * emitting code needs in order to decide, at the moment an error is thrown,
+ * whether it is worth waking anyone up. That file now re-exports this one so
+ * there is exactly ONE answer to "what kind of failure is this" in the
+ * codebase, with several possible sources (declared > human > AI > default).
+ *
+ * - CodeFault: a defect in the monitored code — the only class the automatic
+ *   fix lane opens pull requests for. This is the BASE DEFAULT on purpose:
+ *   forgetting to classify an exception must leave it noisy, never silent.
+ * - UserError: expected consequence of invalid end-user input (bad
+ *   parameters, malformed values). The right change, if any, is earlier
+ *   validation and clearer error UX — routed to a human, never auto-fixed.
+ * - ExpectedDenial: an intentional check doing its job (auth failure,
+ *   plan/paywall denial, scanner/fuzzer probe tripping validation).
+ *   Never auto-fixed; optionally auto-archived.
+ * - Infrastructure: environmental conditions (timeouts, connection resets,
+ *   resource exhaustion) where a code "fix" is usually tuning — routed to a
+ *   human. NOTE: this stays an Issue. It is a real failure, just not one to
+ *   auto-fix.
+ * - Unknown: triage could not decide — treated conservatively (no automatic
+ *   fix, and still shown).
+ */
+enum ErrorClass {
+  CodeFault = "code-fault",
+  UserError = "user-error",
+  ExpectedDenial = "expected-denial",
+  Infrastructure = "infrastructure",
+  Unknown = "unknown",
+}
+
+/*
+ * The classes that do NOT warrant an Issue. Everything else — including
+ * Infrastructure and Unknown — stays loud.
+ *
+ * Exported as the single list so the emit path, the ingest path, the Issues
+ * list default scope and the AI detectors can never drift apart on which
+ * classes are suppressed.
+ */
+export const NON_ACTIONABLE_ERROR_CLASSES: ReadonlyArray<ErrorClass> = [
+  ErrorClass.UserError,
+  ErrorClass.ExpectedDenial,
+];
+
+export function isNonActionableErrorClass(value: unknown): boolean {
+  return NON_ACTIONABLE_ERROR_CLASSES.includes(value as ErrorClass);
+}
+
+/**
+ * Every value the enum can take, for validating strings that arrive from
+ * outside (an OTLP attribute, a database column written by an older release).
+ */
+export function toErrorClass(value: unknown): ErrorClass | null {
+  if (typeof value !== "string") {
+    return null;
+  }
+
+  const match: ErrorClass | undefined = Object.values(ErrorClass).find(
+    (candidate: ErrorClass) => {
+      return candidate === value;
+    },
+  );
+
+  return match ?? null;
+}
+
+/*
+ * `Symbol.for` rather than `Symbol()`: Common/ ships its own node_modules and
+ * is consumed by App/, Probe/, Runner/ and others, so this module can be
+ * instantiated more than once in a single process. A unique symbol would not
+ * match across those instances and a tag written by one copy would be
+ * invisible to another. The global symbol registry is keyed by string, so all
+ * copies agree.
+ */
+const ERROR_CLASS_SYMBOL: symbol = Symbol.for("oneuptime.error.class");
+const ERROR_CLASS_AUTHORITATIVE_SYMBOL: symbol = Symbol.for(
+  "oneuptime.error.class.authoritative",
+);
+const ERROR_REPORTED_SYMBOL: symbol = Symbol.for("oneuptime.error.reported");
+
+/**
+ * A fault domain plus how much to trust it.
+ *
+ * `authoritative: false` is a CLASS-LEVEL default — "BadDataException usually
+ * means the caller sent something wrong". It is a generalisation, so it is
+ * subject to the unit-of-work promotion: outside an HTTP request there is no
+ * caller, and the generalisation does not hold.
+ *
+ * `authoritative: true` is a SITE-LEVEL declaration — a developer looked at
+ * one specific throw or one specific log line and said what it is. That is a
+ * deliberate, reviewable judgment about a single place in the code, so it is
+ * never second-guessed. This is what lets a probe report "the endpoint we were
+ * asked to check is down" as a non-defect even though a probe check has no
+ * HTTP request around it.
+ */
+export interface DeclaredErrorClass {
+  errorClass: ErrorClass;
+  authoritative: boolean;
+}
+
+type Taggable = { [key: symbol]: unknown };
+
+function canTag(value: unknown): value is Taggable {
+  return (
+    value !== null && (typeof value === "object" || typeof value === "function")
+  );
+}
+
+/**
+ * Attach a fault domain to a thrown value.
+ *
+ * `enumerable: false` keeps it invisible to `JSON.stringify`,
+ * `Logger.redactBody` and `Telemetry.getExceptionAttributes`, so tagging can
+ * never change what a log line or a span attribute bag looks like.
+ *
+ * Never throws: this runs from the `Exception` constructor and from catch
+ * blocks, where a frozen object or a hostile Proxy must not take down the
+ * error path. Returns the value so it can be tagged inline.
+ */
+export function tagErrorClass<T>(
+  value: T,
+  errorClass: ErrorClass,
+  authoritative: boolean = false,
+): T {
+  if (!canTag(value)) {
+    return value;
+  }
+
+  try {
+    Object.defineProperty(value, ERROR_CLASS_SYMBOL, {
+      value: errorClass,
+      enumerable: false,
+      writable: true,
+      configurable: true,
+    });
+
+    if (authoritative) {
+      Object.defineProperty(value, ERROR_CLASS_AUTHORITATIVE_SYMBOL, {
+        value: true,
+        enumerable: false,
+        writable: true,
+        configurable: true,
+      });
+    }
+  } catch {
+    // Frozen / sealed / exotic object — the resolver falls back to CodeFault.
+  }
+
+  return value;
+}
+
+/**
+ * Declare the fault domain for ONE specific throw or log line, overriding the
+ * class-level default and exempting it from the unit-of-work promotion.
+ */
+export function tagErrorClassAuthoritative<T>(
+  value: T,
+  errorClass: ErrorClass,
+): T {
+  return tagErrorClass(value, errorClass, true);
+}
+
+/**
+ * Read the fault domain a thrown value declared for itself, or null when it
+ * declared none.
+ *
+ * A null return is meaningful and must stay distinct from
+ * `ErrorClass.Unknown`: "nobody predicted this" is the strongest possible
+ * signal that it is a bug, whereas Unknown means "we looked and could not
+ * tell". Callers turn null into CodeFault.
+ *
+ * Also duck-types off a plain `errorClass` property so an error crossing a
+ * process or module boundary (where the symbol is lost) can still declare
+ * itself.
+ */
+export function declaredErrorClass(value: unknown): DeclaredErrorClass | null {
+  if (!canTag(value)) {
+    return null;
+  }
+
+  try {
+    const authoritative: boolean =
+      value[ERROR_CLASS_AUTHORITATIVE_SYMBOL] === true;
+
+    const tagged: ErrorClass | null = toErrorClass(value[ERROR_CLASS_SYMBOL]);
+
+    if (tagged !== null) {
+      return { errorClass: tagged, authoritative: authoritative };
+    }
+
+    /*
+     * Duck-type off a plain property too, so an error that crossed a process
+     * or module boundary (where the symbol is lost) can still declare itself.
+     * A property survives serialization, so treat it as a deliberate
+     * declaration.
+     */
+    const ducked: ErrorClass | null = toErrorClass(
+      (value as { errorClass?: unknown }).errorClass,
+    );
+
+    if (ducked !== null) {
+      return { errorClass: ducked, authoritative: true };
+    }
+
+    return null;
+  } catch {
+    // Throwing getter on an exotic thrown value.
+    return null;
+  }
+}
+
+/**
+ * Mark a thrown value as already reported, returning whether it had ALREADY
+ * been marked.
+ *
+ * This is what stops one thrown error from filing N exception events as it
+ * propagates through N `@CaptureSpan` frames. The fingerprint hashes no spanId
+ * and no span name, so without this every frame's event lands in the same
+ * group and `occuranceCount` jumps by the depth of the call stack — measured
+ * at 3 for a create with a missing field and 6 for a permission-denied
+ * get-list.
+ *
+ * Untaggable values (a thrown string, a frozen object) always report `false`,
+ * i.e. they are reported every time. Over-reporting is the safe direction.
+ */
+export function markErrorReported(value: unknown): boolean {
+  if (!canTag(value)) {
+    return false;
+  }
+
+  try {
+    const alreadyReported: boolean = value[ERROR_REPORTED_SYMBOL] === true;
+
+    if (!alreadyReported) {
+      Object.defineProperty(value, ERROR_REPORTED_SYMBOL, {
+        value: true,
+        enumerable: false,
+        writable: true,
+        configurable: true,
+      });
+    }
+
+    return alreadyReported;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Test seam: forget that a value was reported. Only used by tests that reuse
+ * one error object across cases.
+ */
+export function clearErrorReported(value: unknown): void {
+  if (!canTag(value)) {
+    return;
+  }
+
+  try {
+    Object.defineProperty(value, ERROR_REPORTED_SYMBOL, {
+      value: false,
+      enumerable: false,
+      writable: true,
+      configurable: true,
+    });
+  } catch {
+    // Nothing to clear.
+  }
+}
+
+export default ErrorClass;

package/Types/Telemetry/UnitOfWork.ts

@@ -0,0 +1,59 @@
+/*
+ * What kind of work was in flight when something happened.
+ *
+ * This is the axis that makes class-based fault classification safe. The same
+ * exception class means different things depending on who asked for the work:
+ *
+ *   throw new BadDataException("Monitor type required to create monitor.")
+ *      -> inside an HTTP request: the caller sent a bad request. Not our bug.
+ *
+ *   throw new BadDataException("No job found with name: " + name)
+ *      -> inside a cron registration: an internal invariant we violated.
+ *         Very much our bug.
+ *
+ * They are indistinguishable at the throw site and perfectly distinguishable
+ * by unit of work, so ErrorClassResolver promotes user-error and
+ * expected-denial back to code-fault everywhere except an HTTP request.
+ *
+ * Seed this EXPLICITLY at every entry point. TelemetryContext.runWithContext
+ * inherits the enclosing scope's attributes, so an unset value would let a
+ * request's "http-request" marker leak into background work started from
+ * inside that request.
+ */
+export enum UnitOfWork {
+  HttpRequest = "http-request",
+  WorkerJob = "worker-job",
+  CronJob = "cron-job",
+  ProbeCheck = "probe-check",
+  Notification = "notification",
+  Startup = "startup",
+}
+
+/**
+ * Which deployment role produced this telemetry.
+ *
+ * Distinct from UnitOfWork, and distinct from `service.name`: the Helm chart
+ * runs the worker as a separate Deployment but from the same image and the
+ * same entrypoint (it only flips DISABLE_QUEUE_WORKERS), so worker pods report
+ * `service.name = "api"`. Until that changes — which re-keys every worker
+ * exception fingerprint and therefore needs its own release — this attribute
+ * is how "which component" becomes filterable.
+ */
+export enum TelemetryComponent {
+  Api = "api",
+  Worker = "worker",
+  Cron = "cron",
+  Probe = "probe",
+  Notification = "notification",
+}
+
+/**
+ * Ambient TelemetryContext / span attribute keys. String constants rather than
+ * inline literals so the emit path, drop filters, dashboards and tests cannot
+ * drift apart on spelling.
+ */
+export const UNIT_OF_WORK_ATTRIBUTE_KEY: string = "oneuptime.unit_of_work";
+export const COMPONENT_ATTRIBUTE_KEY: string = "oneuptime.component";
+
+/** Span/log attribute carrying the resolved fault domain. */
+export const ERROR_CLASS_ATTRIBUTE_KEY: string = "error.class";

package/UI/Components/CommandPalette/CommandPalette.tsx

@@ -8,7 +8,7 @@ import KeyboardKey, {
 } from "../KeyboardShortcut/KeyboardKey";
 import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
-import { lockPageScroll, unlockPageScroll } from "../../Utils/PageScrollLock";
+import { usePageScrollLock } from "../../Utils/PageScrollLock";
 import {
   PaletteCommand,
   PaletteSearchProvider,
@@ -194,13 +194,7 @@ const CommandPalettePanel: FunctionComponent<PanelProps> = (
   }, []);
 
   // The page behind the palette must not scroll while it is open.
-  useEffect(() => {
-    lockPageScroll();
-
-    return () => {
-      unlockPageScroll();
-    };
-  }, []);
+  usePageScrollLock(true);
 
   useEffect(() => {
     inputRef.current?.focus();

package/UI/Components/EditionLabel/EditionLabel.tsx

@@ -92,6 +92,10 @@ const parseLicenseInstances: ParseLicenseInstancesFunction = (
         typeof instance["userCount"] === "number"
           ? instance["userCount"]
           : null,
+      isCountedTowardsUsage:
+        typeof instance["isCountedTowardsUsage"] === "boolean"
+          ? instance["isCountedTowardsUsage"]
+          : undefined,
       lastReportedAt:
         typeof instance["lastReportedAt"] === "string"
           ? instance["lastReportedAt"]

package/UI/Components/Modal/Modal.tsx

@@ -8,7 +8,7 @@ import { VeryLightGray } from "../../../Types/BrandColors";
 import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
 import { wasPressConsumedByAnAnchoredPopup } from "../../Types/LayeredDismissal";
-import { lockPageScroll, unlockPageScroll } from "../../Utils/PageScrollLock";
+import { usePageScrollLock } from "../../Utils/PageScrollLock";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -125,13 +125,7 @@ const Modal: FunctionComponent<ComponentProps> = (
     };
   }, []);
 
-  useEffect(() => {
-    lockPageScroll();
-
-    return () => {
-      unlockPageScroll();
-    };
-  }, []);
+  usePageScrollLock(true);
 
   useEffect(() => {
     const content: HTMLDivElement | null = contentRef.current;

package/UI/Components/MonitorTemplateVariables/TemplateVariablesCatalog.ts

@@ -538,6 +538,50 @@ export default class TemplateVariablesCatalog {
           ],
         };
 
+      case MonitorType.Database:
+        return {
+          title: "Database Health",
+          variables: [
+            {
+              key: "isOnline",
+              description: "True if the database accepted the connection.",
+            },
+            {
+              key: "responseTimeInMs",
+              description: "Time to connect and run the baseline query.",
+            },
+            { key: "failureCause", description: "Failure reason." },
+            {
+              key: "connectionError",
+              description:
+                "Connection error, when the database was unreachable.",
+            },
+            {
+              key: "engineVersion",
+              description: "Version string the database server reported.",
+            },
+            {
+              key: "collectedGroups",
+              description: "Metric groups that produced values on this check.",
+            },
+            {
+              key: "unavailableGroups",
+              description:
+                "Array of {group, reason, message, remediation} for groups that produced nothing.",
+            },
+            {
+              key: "collectionIssueSummary",
+              description:
+                "One-line summary of the unavailable groups - empty when everything was collected.",
+            },
+            {
+              key: "metrics",
+              description:
+                "Collected values keyed by metric name. A metric that was not collected is absent.",
+            },
+          ],
+        };
+
       case MonitorType.ExternalStatusPage:
         return {
           title: "External Status Page",

package/UI/Components/ProgressBar/ProgressBar.tsx

@@ -28,7 +28,18 @@ const ProgressBar: FunctionComponent<ComponentProps> = (
     let percent: number = 0;
 
     try {
-      percent = (props.count * 100) / props.totalCount;
+      /*
+       * Dividing by zero does not throw in JavaScript — it yields NaN, which
+       * the catch below never sees. `Math.ceil(NaN)` is NaN, and NaN then
+       * reaches the DOM three times over: as `width: NaN%` (which the browser
+       * silently discards, leaving an empty track), as aria-valuenow, and as
+       * the visible "NaN%" readout beside the count. Every caller that had
+       * noticed guarded its own render on a non-zero total; the ones that had
+       * not simply showed it.
+       */
+      if (props.totalCount > 0) {
+        percent = (props.count * 100) / props.totalCount;
+      }
     } catch (err) {
       Logger.error(err as Error);
       // do nothing.

package/UI/Components/RadioButtons/BasicRadioButtons.tsx

@@ -55,23 +55,53 @@ const BasicRadioButton: FunctionComponent<ComponentProps> = (
 
               return (
                 <div key={i}>
-                  <div className="flex items-center">
+                  {/*
+                   * items-start, and the description on its own line.
+                   *
+                   * Both spans used to sit inline inside one label, separated
+                   * by `ml-1 sm:ml-0` — which cancels the only gap between
+                   * them at every breakpoint from `sm` up, i.e. on every
+                   * desktop. The result rendered as "Create an alertNotifies
+                   * the team and runs the on-call policy." Stacking them also
+                   * lets a long description wrap under the title instead of
+                   * under the radio.
+                   */}
+                  <div className="flex items-start">
+                    {/*
+                     * htmlFor, and an id to point it at.
+                     *
+                     * The label was a bare sibling of the input, so nothing
+                     * tied them together: the radio had no accessible name at
+                     * all (a screen reader announced "radio button, not
+                     * checked" and never read "Create an alert"), and the only
+                     * hit target was the 16px dot — clicking the words did
+                     * nothing. GroupRadioButtons next door gets this right by
+                     * wrapping the input; this shape needs the explicit link.
+                     */}
                     <input
+                      id={`${id}-${i}`}
                       type="radio"
                       name={id}
                       checked={checked}
                       onChange={() => {
                         handleChange(radioButton.value);
                       }}
-                      className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                      className="mt-1 h-4 w-4 flex-shrink-0 border-gray-300 text-indigo-600 focus:ring-indigo-600"
                     />
-                    <label className="ml-3 block text-sm font-medium leading-6 text-gray-900">
-                      <span className="font-medium text-gray-900">
+                    <label
+                      htmlFor={`${id}-${i}`}
+                      className="ml-3 block cursor-pointer text-sm leading-6 text-gray-900"
+                    >
+                      <span className="block font-medium text-gray-900">
                         {radioButton.title}
                       </span>
-                      <span className="ml-1 text-gray-500 sm:ml-0">
-                        {radioButton.description}
-                      </span>
+                      {radioButton.description ? (
+                        <span className="mt-0.5 block text-sm leading-5 text-gray-500">
+                          {radioButton.description}
+                        </span>
+                      ) : (
+                        <></>
+                      )}
                     </label>
                   </div>
                   {checked && radioButton.children}

package/UI/Components/SideMenu/SideMenu.tsx

@@ -94,6 +94,94 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     }
   };
 
+  /*
+   * Walks the JSX children of a `<SideMenu>` written in the hand-rolled form
+   * and returns whichever entry points at the current page.
+   *
+   * It matches on the shape of the props rather than on component identity —
+   * an element with a `link` is a menu entry, an element with a `title` and
+   * children is a section — so it keeps working for the components built on
+   * top of SideMenuItem, and simply finds nothing for anything else (a
+   * fragment, a comment, a caller's own wrapper div) rather than throwing.
+   */
+  type ActiveMenuItem = {
+    sectionTitle?: string;
+    itemTitle?: string;
+    icon?: IconProp;
+  };
+
+  type FindActiveInChildrenFunction = (
+    children: ReactElement | Array<ReactElement> | undefined,
+    sectionTitle?: string | undefined,
+  ) => ActiveMenuItem;
+
+  const findActiveInChildren: FindActiveInChildrenFunction = (
+    children: ReactElement | Array<ReactElement> | undefined,
+    sectionTitle?: string | undefined,
+  ): ActiveMenuItem => {
+    if (!children) {
+      return {};
+    }
+
+    for (const child of React.Children.toArray(children)) {
+      if (!React.isValidElement(child)) {
+        continue;
+      }
+
+      const childProps: {
+        link?: Link | undefined;
+        activeRoute?: Link["to"] | undefined;
+        icon?: IconProp | undefined;
+        title?: string | undefined;
+        children?: ReactElement | Array<ReactElement> | undefined;
+      } = child.props as {
+        link?: Link | undefined;
+        activeRoute?: Link["to"] | undefined;
+        icon?: IconProp | undefined;
+        title?: string | undefined;
+        children?: ReactElement | Array<ReactElement> | undefined;
+      };
+
+      /*
+       * `activeRoute` first, matching the two loops above: an entry whose link
+       * carries query state points somewhere the current URL never equals, and
+       * declares the route that decides selection separately.
+       */
+      const matchRoute: Link["to"] | undefined =
+        childProps.activeRoute || childProps.link?.to;
+
+      if (
+        childProps.link &&
+        matchRoute &&
+        Navigation.isOnThisPage(matchRoute)
+      ) {
+        const result: ActiveMenuItem = { itemTitle: childProps.link.title };
+
+        if (sectionTitle) {
+          result.sectionTitle = sectionTitle;
+        }
+        if (childProps.icon) {
+          result.icon = childProps.icon;
+        }
+
+        return result;
+      }
+
+      if (childProps.children) {
+        const nested: ActiveMenuItem = findActiveInChildren(
+          childProps.children,
+          childProps.title || sectionTitle,
+        );
+
+        if (nested.itemTitle) {
+          return nested;
+        }
+      }
+    }
+
+    return {};
+  };
+
   // Function to find the active menu item and section - much simpler now!
   const findActiveMenuItem: () => {
     sectionTitle?: string;
@@ -144,7 +232,23 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
       }
     }
 
-    return {};
+    /*
+     * ...and finally the hand-written JSX form.
+     *
+     * Roughly half the menus in the product are written as
+     * `<SideMenu><SideMenuSection>…<SideMenuItem/>…` rather than as a
+     * `sections` array — including every resource View menu. Neither loop
+     * above can see those, so on a phone all of them labelled their toggle
+     * with the fallback word "Navigation" instead of the page the user is
+     * actually on. The summary is the ONLY thing naming the current page
+     * while the menu is closed, which is most of the time on a phone.
+     *
+     * This reads the same two props off the elements the caller wrote, so it
+     * covers SideMenuItem, CountModelSideMenuItem and the per-feature items
+     * built on top of them (RecommendationsSideMenuItem) without knowing
+     * anything about their types.
+     */
+    return findActiveInChildren(props.children);
   };
 
   const activeItem: {
@@ -421,7 +525,15 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
   // Desktop view
   return (
     <aside
-      className={`hidden md:block w-52 lg:w-60 flex-shrink-0 mb-10 ${props.className || ""}`}
+      /*
+       * w-56 rather than w-52. Page.tsx lays the menu out beside a
+       * `flex-1 min-w-0` content column, so this class is the only thing
+       * setting the sidebar's width — and at 208px the longest shipped titles
+       * ("Scheduled Maintenance", "Recommendations" beside a badge) were
+       * ellipsised on every page that has them. 16px buys those back without
+       * taking a visible bite out of the content column.
+       */
+      className={`hidden md:block w-56 lg:w-64 flex-shrink-0 mb-10 ${props.className || ""}`}
       role="navigation"
       aria-label="Main navigation"
     >
@@ -436,11 +548,17 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
         className="sticky"
         style={{ top: "calc(var(--app-header-height, 0px) + 1.5rem)" }}
       >
+        {/*
+         * rounded-xl and a plain border-gray-200, matching Card and InfoCard.
+         * The menu sits directly beside those, and it was the only page-level
+         * surface in the product with a 1rem radius and a translucent border —
+         * which read as a slightly different shade of white next to them.
+         */}
         <div
           className={`
             flex flex-col
-            bg-white rounded-2xl
-            border border-gray-200/80
+            bg-white rounded-xl
+            border border-gray-200
             shadow-sm
             overflow-hidden
           `}
@@ -463,7 +581,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
 
           {/* Menu Content */}
           <nav className="p-2 min-h-0 overflow-y-auto">
-            <div className="space-y-0.5">{renderMenuContent()}</div>
+            <div className="space-y-1">{renderMenuContent()}</div>
           </nav>
 
           {/* Optional Footer */}