@oneuptime/common 12.0.29 → 12.0.31

package/Types/OnCallDutyPolicy/ScheduleShiftUtil.ts

@@ -1,5 +1,7 @@
 import CalendarEvent from "../Calendar/CalendarEvent";
 import OneUptimeDate from "../Date";
+import { ROTATION_PERIOD_START_KEY } from "./Layer";
+import UserOverrideUtil, { OverrideEventMeta } from "./UserOverrideUtil";
 
 /*
  * Turns the low-level calendar events produced by LayerUtil into the
@@ -36,6 +38,38 @@ export interface OnCallShift {
    * coverage ("40h across the week") instead of the misleading span ("4d 8h").
    */
   coverageSeconds: number;
+  /*
+   * Metadata carried over from the FIRST raw segment folded into this shift:
+   * the override that produced it (UserOverrideUtil stamps it on the event)
+   * and the layer it came from (LayerUtil stamps layerId/layerName when the
+   * caller identified the layer). Only present when the segment carried them.
+   *
+   * With the default grouping (by user id) a shift can span segments from
+   * several layers or override windows, so these describe the first segment
+   * only. Callers that need them to hold for the WHOLE shift pass a groupKey
+   * that includes them (see groupKeyByUserOverrideAndLayer), which is what the
+   * on-call calendar feed does.
+   */
+  override?: OverrideEventMeta;
+  layerId?: string;
+  layerName?: string;
+}
+
+/*
+ * Decides which raw segments may be folded into the same shift. Two adjacent
+ * segments are merged only when their keys are equal (and they touch, or the
+ * caller asked to merge across gaps).
+ */
+export type ShiftGroupKeyFunction = (event: CalendarEvent) => string;
+
+export interface GroupEventsIntoShiftsOptions {
+  mergeAcrossGaps?: boolean | undefined;
+  /*
+   * Defaults to the on-call user id (event.title), which is what every
+   * schedule summary in the dashboard wants: "Alice, Mon 09:00 -> Fri 17:00"
+   * regardless of which layer or override put her there.
+   */
+  groupKey?: ShiftGroupKeyFunction | undefined;
 }
 
 export interface CoverageGap {
@@ -116,13 +150,15 @@ export default class ScheduleShiftUtil {
    */
   public static groupEventsIntoShifts(
     events: Array<CalendarEvent>,
-    options?: { mergeAcrossGaps?: boolean | undefined } | undefined,
+    options?: GroupEventsIntoShiftsOptions | undefined,
   ): Array<OnCallShift> {
     if (!events || events.length === 0) {
       return [];
     }
 
     const mergeAcrossGaps: boolean = Boolean(options?.mergeAcrossGaps);
+    const groupKey: ShiftGroupKeyFunction =
+      options?.groupKey ?? ScheduleShiftUtil.defaultGroupKey;
 
     // Work on a copy sorted by start time; never mutate the caller's array.
     const sorted: Array<CalendarEvent> = [...events]
@@ -142,16 +178,18 @@ export default class ScheduleShiftUtil {
       });
 
     const shifts: Array<OnCallShift> = [];
+    let lastKey: string | null = null;
 
     for (const event of sorted) {
       const userId: string = event.title;
+      const key: string = groupKey(event);
       const eventSeconds: number = OneUptimeDate.getDifferenceInSeconds(
         event.end,
         event.start,
       );
       const last: OnCallShift | undefined = shifts[shifts.length - 1];
 
-      const sameUser: boolean = Boolean(last) && last!.userId === userId;
+      const sameUser: boolean = Boolean(last) && lastKey === key;
 
       const isContiguous: boolean =
         Boolean(last) &&
@@ -175,17 +213,134 @@ export default class ScheduleShiftUtil {
         continue;
       }
 
-      shifts.push({
+      const shift: OnCallShift = {
         userId,
         start: event.start,
         end: event.end,
         coverageSeconds: eventSeconds,
-      });
+      };
+
+      /*
+       * Only add the metadata keys when the segment carries them, so callers
+       * that never stamp them (every dashboard summary) get the exact shift
+       * objects they always did.
+       */
+      const override: OverrideEventMeta | null =
+        UserOverrideUtil.getOverrideMeta(event);
+      if (override) {
+        shift.override = override;
+      }
+
+      const layerId: string | undefined =
+        ScheduleShiftUtil.getEventLayerId(event);
+      if (layerId !== undefined) {
+        shift.layerId = layerId;
+      }
+
+      const layerName: string | undefined =
+        ScheduleShiftUtil.getEventLayerName(event);
+      if (layerName !== undefined) {
+        shift.layerName = layerName;
+      }
+
+      shifts.push(shift);
+      lastKey = key;
     }
 
     return shifts;
   }
 
+  // The default grouping: one shift per run of the same on-call user.
+  public static defaultGroupKey(event: CalendarEvent): string {
+    return event.title;
+  }
+
+  /*
+   * Grouping that keeps a shift inside ONE layer, ONE override window and ONE
+   * rotation period: the user id, plus the override identity (original user +
+   * window) when the segment was produced by an override, plus the layer id
+   * when known, plus the rotation period the engine stamped on the event. This
+   * is the key the on-call calendar feed groups with, so an override split
+   * yields A / B / A as three events and a layer handover is visible as a
+   * boundary instead of being folded into a single shift.
+   *
+   * The rotation period matters because two consecutive turns held by the SAME
+   * user (a single-user layer, or [A, A, B]) are contiguous across the engine's
+   * 1 s seam and would otherwise fold into one block whose start and end are
+   * decided by how far the expansion window reached — the block would slide
+   * forward every time the feed window did, changing the event's UID and
+   * DTSTART for every subscriber. Override segments deliberately ignore the
+   * period: an override that spans a rotation boundary is ONE stretch of cover
+   * and stays one event.
+   */
+  public static groupKeyByUserOverrideAndLayer(event: CalendarEvent): string {
+    const override: OverrideEventMeta | null =
+      UserOverrideUtil.getOverrideMeta(event);
+
+    const overridePart: string = override
+      ? `${override.originalUserId}@${override.overrideStartsAt.getTime()}-${override.overrideEndsAt.getTime()}`
+      : "";
+
+    const periodStart: number | undefined = override
+      ? undefined
+      : ScheduleShiftUtil.getEventRotationPeriodStart(event);
+
+    const periodPart: string =
+      periodStart === undefined ? "" : periodStart.toString();
+
+    return `${event.title}|${overridePart}|${ScheduleShiftUtil.getEventLayerId(event) ?? ""}|${periodPart}`;
+  }
+
+  /*
+   * LayerUtil stamps layerId/layerName onto merged events (see
+   * PriorityCalendarEvents). CalendarEvent is a JSONObject, so the keys are
+   * read through the index signature and type-checked here.
+   */
+  public static getEventLayerId(event: CalendarEvent): string | undefined {
+    const value: unknown = (event as unknown as Record<string, unknown>)[
+      "layerId"
+    ];
+    return typeof value === "string" ? value : undefined;
+  }
+
+  public static getEventLayerName(event: CalendarEvent): string | undefined {
+    const value: unknown = (event as unknown as Record<string, unknown>)[
+      "layerName"
+    ];
+    return typeof value === "string" ? value : undefined;
+  }
+
+  /*
+   * Epoch milliseconds of the rotation period an engine event belongs to (see
+   * ROTATION_PERIOD_START_KEY in Layer.ts). Undefined for hand-built events and
+   * for anything that did not come out of LayerUtil — those simply group as
+   * they always did. Dates and ISO strings are accepted so a JSON round trip
+   * does not silently drop the period.
+   */
+  public static getEventRotationPeriodStart(
+    event: CalendarEvent,
+  ): number | undefined {
+    const value: unknown = (event as unknown as Record<string, unknown>)[
+      ROTATION_PERIOD_START_KEY
+    ];
+
+    if (typeof value === "number") {
+      return Number.isFinite(value) ? value : undefined;
+    }
+
+    if (value instanceof Date) {
+      const time: number = value.getTime();
+      return Number.isNaN(time) ? undefined : time;
+    }
+
+    if (typeof value === "string") {
+      const parsed: number = Date.parse(value);
+      return Number.isNaN(parsed) ? undefined : parsed;
+    }
+
+    return undefined;
+  }
+
   /*
    * The shift that contains `now` (the person on call right now) and the first
    * shift that starts after `now` (up next). Either can be null: `current` is

package/Types/OnCallDutyPolicy/ShiftSeamUtil.ts

@@ -0,0 +1,106 @@
+/*
+ * Seam normalisation for resolved on-call segments.
+ *
+ * The rotation engine and its post-processors leave one-second artefacts at
+ * every boundary: LayerUtil resumes each segment one second after the
+ * previous one ends (Layer.ts advances with addRemoveSeconds(end, 1)), the
+ * multi-layer priority merge trims to `start - 1s` / `end + 1s`, and the
+ * override splitter cuts at the exact instant. Fed straight into a calendar
+ * that renders as 09:00:01 -> 16:59:59, with adjacent shifts that neither
+ * touch nor overlap — which Google's week view draws side by side.
+ *
+ * Handoff and restriction times are minute-granular by construction, so the
+ * artefacts are unambiguous: a start on second 1 means the minute, an end on
+ * second 59 means the next minute, and two segments a second apart are
+ * meant to touch. Everything else is left alone.
+ */
+
+export interface TimeSegment {
+  start: Date;
+  end: Date;
+}
+
+// Segments this close together (in ms) are made to touch exactly.
+export const SEAM_TOLERANCE_MILLISECONDS: number = 1000;
+
+const MILLISECONDS_PER_MINUTE: number = 60 * 1000;
+
+export default class ShiftSeamUtil {
+  /*
+   * Returns a NEW array (sorted by start, then end) of NEW segment objects
+   * with the seams normalised; neither the input array nor its segments are
+   * mutated. Any extra properties on the segments are preserved, so this can
+   * run on OnCallShift / MaterializedShift objects directly.
+   *
+   * Rules, in order:
+   *  1. a start whose seconds == 1 snaps DOWN to the minute;
+   *  2. an end whose seconds == 59 snaps UP to the next minute;
+   *  3. walking in start order, when the next segment starts 0..1 s after
+   *     this one ends, this one's end becomes exactly the next one's start.
+   * Snapping only ever widens a segment, so it cannot create an empty or
+   * inverted one; a segment that is already empty or inverted is left alone.
+   */
+  public static normalizeSeams<T extends TimeSegment>(
+    segments: Array<T>,
+  ): Array<T> {
+    const normalized: Array<T> = segments.map((segment: T) => {
+      const snappedStart: Date = ShiftSeamUtil.snapStart(segment.start);
+      const snappedEnd: Date = ShiftSeamUtil.snapEnd(segment.end);
+
+      const keepSnaps: boolean =
+        segment.end.getTime() > segment.start.getTime() &&
+        snappedEnd.getTime() > snappedStart.getTime();
+
+      return {
+        ...segment,
+        start: keepSnaps ? snappedStart : new Date(segment.start.getTime()),
+        end: keepSnaps ? snappedEnd : new Date(segment.end.getTime()),
+      };
+    });
+
+    normalized.sort((a: T, b: T) => {
+      const byStart: number = a.start.getTime() - b.start.getTime();
+      if (byStart !== 0) {
+        return byStart;
+      }
+      return a.end.getTime() - b.end.getTime();
+    });
+
+    for (let i: number = 0; i < normalized.length - 1; i++) {
+      const segment: T = normalized[i]!;
+      const next: T = normalized[i + 1]!;
+
+      const delta: number = next.start.getTime() - segment.end.getTime();
+
+      if (delta >= 0 && delta <= SEAM_TOLERANCE_MILLISECONDS) {
+        segment.end = new Date(next.start.getTime());
+      }
+    }
+
+    return normalized;
+  }
+
+  // 10:00:01(.xxx) -> 10:00:00.000; anything else is returned as a copy.
+  public static snapStart(date: Date): Date {
+    if (date.getUTCSeconds() === 1) {
+      return new Date(
+        Math.floor(date.getTime() / MILLISECONDS_PER_MINUTE) *
+          MILLISECONDS_PER_MINUTE,
+      );
+    }
+
+    return new Date(date.getTime());
+  }
+
+  // 16:59:59(.xxx) -> 17:00:00.000; anything else is returned as a copy.
+  public static snapEnd(date: Date): Date {
+    if (date.getUTCSeconds() === 59) {
+      return new Date(
+        (Math.floor(date.getTime() / MILLISECONDS_PER_MINUTE) + 1) *
+          MILLISECONDS_PER_MINUTE,
+      );
+    }
+
+    return new Date(date.getTime());
+  }
+}

package/Types/Permission.ts

@@ -101,6 +101,25 @@ enum Permission {
   TelemetryMember = "TelemetryMember",
   TelemetryViewer = "TelemetryViewer",
 
+  /*
+   * SIEM data is its own domain, not a fourth telemetry signal. Security
+   * events, the Sigma detection rules over them, the threat-intel feeds and
+   * their indicators, and the SecOps connector credentials all read through
+   * these three tiers and through nothing else that is handed out broadly -
+   * not ProjectMember, not the project-wide Viewer, not the Telemetry tiers.
+   *
+   * That exclusion is the whole point of the family. A SIEM holds authentication
+   * failures, privilege escalations and the analyst's own investigation trail;
+   * "everyone who can open a dashboard can read it" is not an access policy an
+   * organisation deploying one can accept. Whoever should see it is given a
+   * Security tier deliberately, the same way BillingViewer is given
+   * deliberately, and everybody else - including a Telemetry Admin with the run
+   * of every log, metric and trace in the project - sees nothing.
+   */
+  SecurityAdmin = "SecurityAdmin",
+  SecurityMember = "SecurityMember",
+  SecurityViewer = "SecurityViewer",
+
   SettingsAdmin = "SettingsAdmin",
   SettingsMember = "SettingsMember",
   SettingsViewer = "SettingsViewer",
@@ -617,6 +636,11 @@ enum Permission {
   EditNetworkDeviceAutoImportRule = "EditNetworkDeviceAutoImportRule",
   ReadNetworkDeviceAutoImportRule = "ReadNetworkDeviceAutoImportRule",
 
+  CreateNetworkDeviceOidTemplate = "CreateNetworkDeviceOidTemplate",
+  DeleteNetworkDeviceOidTemplate = "DeleteNetworkDeviceOidTemplate",
+  EditNetworkDeviceOidTemplate = "EditNetworkDeviceOidTemplate",
+  ReadNetworkDeviceOidTemplate = "ReadNetworkDeviceOidTemplate",
+
   // Podman Host Label Rule Permissions
   CreatePodmanHostLabelRule = "CreatePodmanHostLabelRule",
   DeletePodmanHostLabelRule = "DeletePodmanHostLabelRule",
@@ -2371,6 +2395,36 @@ export class PermissionHelper {
         isRolePermission: true,
         group: PermissionGroup.Telemetry,
       },
+      {
+        permission: Permission.SecurityAdmin,
+        title: "Security Admin",
+        description:
+          "Full control over the SIEM: security events, Sigma detection rules, threat intelligence feeds and indicators, and Google SecOps connections. Security data is not readable through any other role.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: true,
+        group: PermissionGroup.Security,
+      },
+      {
+        permission: Permission.SecurityMember,
+        title: "Security Member",
+        description:
+          "Can read security events and threat intelligence, and create, edit, and delete detection rules and threat intel feeds. Cannot configure Google SecOps connections.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: true,
+        group: PermissionGroup.Security,
+      },
+      {
+        permission: Permission.SecurityViewer,
+        title: "Security Viewer",
+        description:
+          "Read-only access to security events, detection rules, threat intelligence feeds, and indicators.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: true,
+        group: PermissionGroup.Security,
+      },
       {
         permission: Permission.SettingsAdmin,
         title: "Settings Admin",
@@ -12341,6 +12395,48 @@ export class PermissionHelper {
         group: PermissionGroup.Telemetry,
       },
 
+      // OID Collection Template Permissions
+      {
+        permission: Permission.CreateNetworkDeviceOidTemplate,
+        title: "Create OID Collection Template",
+        description:
+          "This permission can create OID Collection Templates in this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.DeleteNetworkDeviceOidTemplate,
+        title: "Delete OID Collection Template",
+        description:
+          "This permission can delete OID Collection Templates of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.EditNetworkDeviceOidTemplate,
+        title: "Edit OID Collection Template",
+        description:
+          "This permission can edit OID Collection Templates of this project. Editing a template changes what every linked device collects on its next poll.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.ReadNetworkDeviceOidTemplate,
+        title: "Read OID Collection Template",
+        description:
+          "This permission can read OID Collection Templates of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+
       // Podman Host Label Rule Permissions
       {
         permission: Permission.CreatePodmanHostLabelRule,

package/Types/Rum/SessionReplay.ts

@@ -35,6 +35,27 @@ export const MAX_SESSION_REPLAY_CHUNK_BYTES: number = 2 * 1024 * 1024;
 /* Frames a single catch-up request may concatenate. */
 export const MAX_SESSION_REPLAY_CHUNKS_PER_REQUEST: number = 8;
 
+/*
+ * Largest DECOMPRESSED payload the ingest worker will inflate for one frame,
+ * and therefore the largest single indivisible rrweb event the recorder may
+ * put on the wire.
+ *
+ * The two numbers have to be the same number, which is why this lives in
+ * Common rather than in either side. A FullSnapshot is one rrweb event: it
+ * cannot be cut in half and still parse, so when it is bigger than the flush
+ * threshold the recorder posts it whole in a chunk of its own rather than
+ * cutting it. That is only safe while the recorder's ceiling is exactly the
+ * worker's — a recorder willing to send more than the worker will inflate
+ * produces a chunk that is accepted, queued, and then dropped at decode time,
+ * leaving a hole in the chunk sequence with nothing anywhere reporting it.
+ *
+ * Compression is what makes the number affordable: a snapshot this size gzips
+ * to a small fraction of MAX_SESSION_REPLAY_CHUNK_BYTES, which is the cap on
+ * the bytes actually posted.
+ */
+export const SESSION_REPLAY_MAX_DECOMPRESSED_FRAME_BYTES: number =
+  8 * 1024 * 1024;
+
 /*
  * Hard stop per session. At the 15s flush cadence this is ~2 hours of
  * continuous recording, comfortably past the 4-hour session cap once

package/Types/Telemetry/SourceMap.ts

@@ -53,4 +53,12 @@ export interface ResolveStackTraceResult {
   resolvedCount: number;
   /** Number of source maps found for the (service, release) pair. */
   sourceMapCount: number;
+  /**
+   * Maps that a frame matched but that were not loaded, because loading them
+   * would have exceeded the resolver's per-request byte budget
+   * (SOURCE_MAP_MAX_BYTES_PER_RESOLVE). Non-zero means symbols are missing
+   * for a reason an operator can fix by raising the budget — as opposed to
+   * the maps simply never having been uploaded.
+   */
+  sourceMapsSkippedForSize: number;
 }

package/UI/Components/Charts/ChartLibrary/Annotations/AnnotationHoverCard.tsx

@@ -0,0 +1,176 @@
+import React from "react";
+import FormattedTimeReferenceLine from "../Types/FormattedTimeReferenceLine";
+import { AnnotationHover } from "./ChartAnnotationLayer";
+import { clampHoverCardLeft, getMarkerColor } from "./AnnotationLayout";
+import { cx } from "../Utils/Cx";
+
+/*
+ * Wide enough for an incident title at 12px without wrapping to three
+ * lines, narrow enough that two cards could sit side by side on a
+ * dashboard widget.
+ */
+export const HOVER_CARD_WIDTH: number = 288;
+
+/** Clear of the chip's ring, so the card never covers what opened it. */
+const HOVER_CARD_TOP_GAP: number = 6;
+
+export interface AnnotationHoverCardProps {
+  hover: AnnotationHover;
+  /** Keeps the card open while the pointer travels from chip to card. */
+  onMouseEnter: () => void;
+  onMouseLeave: () => void;
+  /** Closes the card; Escape and an activated row both use it. */
+  onDismiss: () => void;
+}
+
+/**
+ * The card behind a rail chip or a region pill.
+ *
+ * This is where an event's label lives now. The old inline labels had to
+ * fit in the plot, which is why they were rotated, truncated, and hidden
+ * outright past six markers; an HTML card over the chart has none of those
+ * limits, so the full title, its subtitle and its link all fit.
+ */
+const AnnotationHoverCard: React.FunctionComponent<AnnotationHoverCardProps> = (
+  props: AnnotationHoverCardProps,
+): React.ReactElement => {
+  const { hover } = props;
+
+  const left: number = clampHoverCardLeft({
+    anchorX: hover.anchorX,
+    cardWidth: HOVER_CARD_WIDTH,
+    chartWidth: hover.chartWidth,
+  });
+
+  const regionSubtitle: string | undefined = hover.region?.original.subtitle;
+  const rows: Array<FormattedTimeReferenceLine> = hover.markers;
+
+  /*
+   * A card opened from the keyboard takes focus, so a cluster's events are
+   * reachable by Tab; one opened by hover leaves focus where it was, so a
+   * passing pointer never yanks it.
+   */
+  const firstRowRef: React.RefObject<HTMLButtonElement> =
+    React.useRef<HTMLButtonElement>(null);
+  const shouldTakeFocus: boolean = Boolean(hover.takeFocus);
+
+  React.useEffect((): void => {
+    if (shouldTakeFocus) {
+      firstRowRef.current?.focus();
+    }
+  }, [shouldTakeFocus, hover.id]);
+
+  return (
+    <div
+      data-testid="chart-annotation-hover-card"
+      className={cx(
+        "pointer-events-auto absolute z-20 rounded-md border text-sm shadow-md",
+        "border-gray-200",
+        "bg-white",
+      )}
+      style={{
+        left: `${left}px`,
+        top: `${hover.anchorY + HOVER_CARD_TOP_GAP}px`,
+        width: `${HOVER_CARD_WIDTH}px`,
+      }}
+      onMouseEnter={props.onMouseEnter}
+      onMouseLeave={props.onMouseLeave}
+      /*
+       * Focus moving into the card blurs the chip that opened it, and the
+       * chip's blur schedules the close. These cancel and re-arm that on
+       * the card's own terms, which is what makes a clustered event
+       * reachable by keyboard at all: without them the card would shut
+       * 140ms after taking focus, taking the focus with it.
+       */
+      onFocus={props.onMouseEnter}
+      onBlur={props.onMouseLeave}
+      onKeyDown={(event: React.KeyboardEvent): void => {
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          props.onDismiss();
+        }
+      }}
+    >
+      <div className={cx("border-b border-inherit px-3 py-2")}>
+        <p className={cx("truncate font-medium", "text-gray-900")}>
+          {hover.heading}
+        </p>
+        {rows.length > 1 ? (
+          <p className={cx("text-xs", "text-gray-500")}>{rows.length} events</p>
+        ) : null}
+        {regionSubtitle ? (
+          <p className={cx("truncate text-xs", "text-gray-500")}>
+            {regionSubtitle}
+          </p>
+        ) : null}
+      </div>
+
+      {/*
+       * The row list is capped tight: the card sits over the plot while it
+       * is open, and every pixel of it is a pixel the reader cannot
+       * drag-select or hover for a value. A long cluster scrolls.
+       */}
+      {rows.length > 0 ? (
+        <div className={cx("max-h-44 overflow-y-auto py-1")}>
+          {rows.map(
+            (
+              marker: FormattedTimeReferenceLine,
+              index: number,
+            ): React.ReactElement => {
+              const onClick: (() => void) | undefined = marker.original.onClick;
+              const label: string = marker.original.label || "Event";
+
+              return (
+                <button
+                  key={`annotation-row-${index}`}
+                  ref={index === 0 ? firstRowRef : undefined}
+                  type="button"
+                  data-testid="chart-annotation-hover-row"
+                  disabled={!onClick}
+                  className={cx(
+                    "flex w-full items-start gap-2 px-3 py-1.5 text-left",
+                    onClick
+                      ? "cursor-pointer hover:bg-gray-50"
+                      : "cursor-default",
+                  )}
+                  onClick={(event: React.MouseEvent): void => {
+                    event.stopPropagation();
+                    onClick?.();
+                  }}
+                >
+                  <span
+                    aria-hidden="true"
+                    className={cx("mt-1 h-2 w-2 shrink-0 rounded-full")}
+                    style={{ backgroundColor: getMarkerColor(marker) }}
+                  />
+                  <span className={cx("min-w-0 flex-1")}>
+                    <span
+                      className={cx(
+                        "block text-xs font-medium",
+                        "text-gray-900",
+                      )}
+                    >
+                      {label}
+                    </span>
+                    {marker.original.subtitle ? (
+                      <span
+                        className={cx(
+                          "block truncate text-xs",
+                          "text-gray-500",
+                        )}
+                      >
+                        {marker.original.subtitle}
+                      </span>
+                    ) : null}
+                  </span>
+                </button>
+              );
+            },
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default AnnotationHoverCard;