@oneuptime/common 10.0.96 → 10.0.98

package/Server/Utils/Monitor/MonitorIncident.ts

@@ -1,3 +1,4 @@
+import Host from "../../../Models/DatabaseModels/Host";
 import Incident from "../../../Models/DatabaseModels/Incident";
 import IncidentSeverity from "../../../Models/DatabaseModels/IncidentSeverity";
 import IncidentStateTimeline from "../../../Models/DatabaseModels/IncidentStateTimeline";
@@ -15,6 +16,7 @@ import ObjectID from "../../../Types/ObjectID";
 import ProbeMonitorResponse from "../../../Types/Probe/ProbeMonitorResponse";
 import { TelemetryQuery } from "../../../Types/Telemetry/TelemetryQuery";
 import { DisableAutomaticIncidentCreation } from "../../EnvironmentConfig";
+import HostService from "../../Services/HostService";
 import IncidentService from "../../Services/IncidentService";
 import IncidentSeverityService from "../../Services/IncidentSeverityService";
 import IncidentStateTimelineService from "../../Services/IncidentStateTimelineService";
@@ -313,6 +315,41 @@ export default class MonitorIncident {
         }
         if (seriesLabels && Object.keys(seriesLabels).length > 0) {
           incident.seriesLabels = seriesLabels;
+
+          /*
+           * Link the incident to the Host that emitted this series, if
+           * the metric carried a `host.name` resource attribute. The
+           * Host record was auto-discovered during OTel ingestion.
+           * Metric attributes are stored with the `resource.` prefix in
+           * ClickHouse, so the group-by dropdown surfaces
+           * `resource.host.name` — but accept the bare `host.name` too
+           * for any non-OTel ingest paths.
+           */
+          const hostName: string | undefined =
+            typeof seriesLabels["resource.host.name"] === "string"
+              ? (seriesLabels["resource.host.name"] as string)
+              : typeof seriesLabels["host.name"] === "string"
+                ? (seriesLabels["host.name"] as string)
+                : undefined;
+
+          if (hostName) {
+            const host: Host | null = await HostService.findOneBy({
+              query: {
+                projectId: input.monitor.projectId!,
+                hostIdentifier: hostName,
+              },
+              select: {
+                _id: true,
+              },
+              props: {
+                isRoot: true,
+              },
+            });
+
+            if (host) {
+              incident.hosts = [host];
+            }
+          }
         }
 
         incident.onCallDutyPolicies =

package/Tests/Server/Services/LogAggregationService.test.ts

@@ -80,4 +80,29 @@ describe("LogAggregationService", () => {
       });
     }).toThrow("Invalid facetKey");
   });
+
+  test("histogram attribute filter matches attribute keys case-insensitively", () => {
+    /*
+     * Users typing `requestid` should still match data stored with the key
+     * `requestId` (camelCase). The histogram filter shares the same WHERE
+     * clause builder (`appendCommonFilters`) with the list/facet queries, so
+     * verifying it on histogram covers all three.
+     */
+    const statement: Statement = (
+      LogAggregationService as any
+    ).buildHistogramStatement({
+      ...defaultRequest,
+      facetKey: undefined,
+      attributes: { requestid: "uuid-123" },
+    });
+
+    expect(statement.query).toContain(
+      "arrayExists((k, v) -> lowerUTF8(k) = lowerUTF8(",
+    );
+    expect(statement.query).toContain(
+      ", mapKeys(attributes), mapValues(attributes))",
+    );
+    expect(Object.values(statement.query_params)).toContain("requestid");
+    expect(Object.values(statement.query_params)).toContain("uuid-123");
+  });
 });

package/Tests/Server/Utils/AnalyticsDatabase/StatementGenerator.test.ts

@@ -13,6 +13,13 @@ import AnalyticsTableEngine from "../../../../Types/AnalyticsDatabase/AnalyticsT
 import AnalyticsTableColumn from "../../../../Types/AnalyticsDatabase/TableColumn";
 import TableColumnType from "../../../../Types/AnalyticsDatabase/TableColumnType";
 import OneUptimeDate from "../../../../Types/Date";
+import EqualTo from "../../../../Types/BaseDatabase/EqualTo";
+import NotEqual from "../../../../Types/BaseDatabase/NotEqual";
+import IsNull from "../../../../Types/BaseDatabase/IsNull";
+import NotNull from "../../../../Types/BaseDatabase/NotNull";
+import GreaterThan from "../../../../Types/BaseDatabase/GreaterThan";
+import Search from "../../../../Types/BaseDatabase/Search";
+import StartsWith from "../../../../Types/BaseDatabase/StartsWith";
 
 function expectStatement(actual: Statement, expected: Statement): void {
   expect(actual.query).toBe(expected.query);
@@ -179,6 +186,144 @@ describe("StatementGenerator", () => {
         p3: OneUptimeDate.toClickhouseDateTime(date),
       });
     });
+
+    describe("MapStringString columns", () => {
+      class MapModel extends AnalyticsBaseModel {
+        public constructor() {
+          super({
+            tableName: "<map-table>",
+            singularName: "<singular>",
+            pluralName: "<plural>",
+            tableColumns: [
+              new AnalyticsTableColumn({
+                key: "_id",
+                title: "<title>",
+                description: "<description>",
+                required: true,
+                type: TableColumnType.ObjectID,
+              }),
+              new AnalyticsTableColumn({
+                key: "attributes",
+                title: "<title>",
+                description: "<description>",
+                required: true,
+                defaultValue: {},
+                type: TableColumnType.MapStringString,
+              }),
+            ],
+            crudApiPath: new Route("route"),
+            primaryKeys: ["_id"],
+            sortKeys: ["_id"],
+            partitionKey: "_id",
+            tableEngine: AnalyticsTableEngine.MergeTree,
+          });
+        }
+      }
+
+      let mapGenerator: StatementGenerator<MapModel>;
+      beforeEach(() => {
+        mapGenerator = new StatementGenerator<MapModel>({
+          modelType: MapModel,
+          database: ClickhouseAppInstance,
+        });
+      });
+
+      test("uses direct map subscript for bare-value equality", () => {
+        const statement: Statement = mapGenerator.toWhereStatement({
+          attributes: { requestId: "uuid-123" },
+        } as any);
+        /*
+         * Programmatic callers pass canonical keys, so bare-value
+         * equality compiles to `attributes['k'] = v` — an O(1) Map
+         * subscript that the planner can push into PREWHERE. The
+         * slower case-insensitive arrayExists form is reserved for
+         * the user-typed Search/StartsWith/EndsWith/NotContains
+         * operators below.
+         */
+        expect(statement.query).toBe(
+          "AND {p0:Identifier}[{p1:String}] = {p2:String}",
+        );
+        expect(statement.query_params).toStrictEqual({
+          p0: "attributes",
+          p1: "requestId",
+          p2: "uuid-123",
+        });
+      });
+
+      test("uses direct map subscript for EqualTo wrapper", () => {
+        const statement: Statement = mapGenerator.toWhereStatement({
+          attributes: { requestId: new EqualTo("uuid-123") },
+        } as any);
+        expect(statement.query).toBe(
+          "AND {p0:Identifier}[{p1:String}] = {p2:String}",
+        );
+        expect(statement.query_params).toStrictEqual({
+          p0: "attributes",
+          p1: "requestId",
+          p2: "uuid-123",
+        });
+      });
+
+      test("uses direct map subscript for NotEqual wrapper", () => {
+        const statement: Statement = mapGenerator.toWhereStatement({
+          attributes: { requestId: new NotEqual("uuid-123") },
+        } as any);
+        expect(statement.query).toBe(
+          "AND {p0:Identifier}[{p1:String}] != {p2:String}",
+        );
+      });
+
+      test("uses mapContains+subscript for IsNull wrapper", () => {
+        const statement: Statement = mapGenerator.toWhereStatement({
+          attributes: { requestId: new IsNull() },
+        } as any);
+        expect(statement.query).toBe(
+          "AND ((NOT mapContains({p0:Identifier}, {p1:String})) OR {p2:Identifier}[{p3:String}] = '')",
+        );
+      });
+
+      test("uses mapContains+subscript for NotNull wrapper", () => {
+        const statement: Statement = mapGenerator.toWhereStatement({
+          attributes: { requestId: new NotNull() },
+        } as any);
+        expect(statement.query).toBe(
+          "AND mapContains({p0:Identifier}, {p1:String}) AND {p2:Identifier}[{p3:String}] != ''",
+        );
+      });
+
+      test("uses direct map subscript for numeric GreaterThan wrapper", () => {
+        const statement: Statement = mapGenerator.toWhereStatement({
+          attributes: { httpStatus: new GreaterThan(500) },
+        } as any);
+        expect(statement.query).toBe(
+          "AND toFloat64OrNull({p0:Identifier}[{p1:String}]) > {p2:Int32}",
+        );
+      });
+
+      test("keeps case-insensitive arrayExists for Search wrapper", () => {
+        const statement: Statement = mapGenerator.toWhereStatement({
+          attributes: { requestId: new Search("uuid") },
+        } as any);
+        /*
+         * Search comes from the user-typed search bar — keep the
+         * case-insensitive ILIKE form so the user doesn't have to
+         * remember whether the stored key is `requestId` or
+         * `requestid`.
+         */
+        expect(statement.query).toContain("arrayExists");
+        expect(statement.query).toContain("lowerUTF8");
+        expect(statement.query).toContain("ILIKE");
+      });
+
+      test("keeps case-insensitive arrayExists for StartsWith wrapper", () => {
+        const statement: Statement = mapGenerator.toWhereStatement({
+          attributes: { requestId: new StartsWith("uuid") },
+        } as any);
+        expect(statement.query).toContain("arrayExists");
+        expect(statement.query).toContain("lowerUTF8");
+        expect(statement.query).toContain("ILIKE");
+      });
+    });
   });
 
   describe("toSelectStatement", () => {

package/Types/Metrics/MetricQueryConfigData.ts

@@ -20,4 +20,13 @@ export default interface MetricQueryConfigData {
   yAxisValueFormatter?: ((value: number) => string) | undefined;
   warningThreshold?: number | undefined;
   criticalThreshold?: number | undefined;
+  /*
+   * When true, the post-aggregation series points are transformed into
+   * a per-second rate of change: `(value - previousValue) / Δt`. This is
+   * the right view for OTel cumulative counters (e.g. `system.disk.io`,
+   * `system.network.io`) — without it, the chart plots monotonically
+   * growing bytes-since-process-start. Negative deltas (counter resets
+   * on agent restart) are clamped to 0.
+   */
+  transformAsRate?: boolean | undefined;
 }

package/Types/Permission.ts

@@ -812,6 +812,21 @@ enum Permission {
   EditDockerHostOwnerUser = "EditDockerHostOwnerUser",
   ReadDockerHostOwnerUser = "ReadDockerHostOwnerUser",
 
+  CreateHost = "CreateHost",
+  DeleteHost = "DeleteHost",
+  EditHost = "EditHost",
+  ReadHost = "ReadHost",
+
+  CreateHostOwnerTeam = "CreateHostOwnerTeam",
+  DeleteHostOwnerTeam = "DeleteHostOwnerTeam",
+  EditHostOwnerTeam = "EditHostOwnerTeam",
+  ReadHostOwnerTeam = "ReadHostOwnerTeam",
+
+  CreateHostOwnerUser = "CreateHostOwnerUser",
+  DeleteHostOwnerUser = "DeleteHostOwnerUser",
+  EditHostOwnerUser = "EditHostOwnerUser",
+  ReadHostOwnerUser = "ReadHostOwnerUser",
+
   CreateService = "CreateService",
   DeleteService = "DeleteService",
   EditService = "EditService",
@@ -5602,6 +5617,125 @@ export class PermissionHelper {
         group: PermissionGroup.Telemetry,
       },
 
+      {
+        permission: Permission.CreateHost,
+        title: "Create Host",
+        description: "This permission can create Host in this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.DeleteHost,
+        title: "Delete Host",
+        description: "This permission can delete Host of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: true,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.EditHost,
+        title: "Edit Host",
+        description: "This permission can edit Host of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: true,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.ReadHost,
+        title: "Read Host",
+        description: "This permission can read Host of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: true,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+
+      {
+        permission: Permission.CreateHostOwnerTeam,
+        title: "Create Host Team Owner",
+        description:
+          "This permission can create Host Team Owner of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.DeleteHostOwnerTeam,
+        title: "Delete Host Team Owner",
+        description:
+          "This permission can delete Host Team Owner of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.EditHostOwnerTeam,
+        title: "Edit Host Team Owner",
+        description:
+          "This permission can edit Host Team Owner of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.ReadHostOwnerTeam,
+        title: "Read Host Team Owner",
+        description:
+          "This permission can read Host Team Owner of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+
+      {
+        permission: Permission.CreateHostOwnerUser,
+        title: "Create Host User Owner",
+        description:
+          "This permission can create Host User Owner of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.DeleteHostOwnerUser,
+        title: "Delete Host User Owner",
+        description:
+          "This permission can delete Host User Owner of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.EditHostOwnerUser,
+        title: "Edit Host User Owner",
+        description:
+          "This permission can edit Host User Owner of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.ReadHostOwnerUser,
+        title: "Read Host User Owner",
+        description:
+          "This permission can read Host User Owner of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        isRolePermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+
       {
         permission: Permission.CreateService,
         title: "Create Service",

package/UI/Components/Charts/Area/AreaChart.tsx

@@ -115,7 +115,7 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
         connectNulls={true}
         curve={props.curve || ChartCurve.MONOTONE}
         syncid={props.sync ? props.syncid : undefined}
-        yAxisWidth={60}
+        yAxisWidth={64}
         onValueChange={() => {}}
         referenceLines={props.referenceLines}
         formattedExemplarPoints={

package/UI/Components/Charts/Bar/BarChart.tsx

@@ -79,7 +79,7 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
         valueFormatter={props.yAxis.options.formatter || undefined}
         showTooltip={true}
         showLegend={props.showLegend !== false}
-        yAxisWidth={60}
+        yAxisWidth={64}
         syncid={props.sync ? props.syncid : undefined}
         onValueChange={() => {}}
         referenceLines={props.referenceLines}

package/UI/Components/Charts/ChartLibrary/AreaChart/AreaChart.tsx

@@ -695,9 +695,9 @@ const AreaChart: React.ForwardRefExoticComponent<
                 : () => {}
             }
             margin={{
-              bottom: (xAxisLabel ? 30 : undefined) as unknown as number,
-              left: (yAxisLabel ? 20 : undefined) as unknown as number,
-              right: (yAxisLabel ? 5 : undefined) as unknown as number,
+              bottom: (xAxisLabel ? 30 : 8) as unknown as number,
+              left: (yAxisLabel ? 20 : 0) as unknown as number,
+              right: (yAxisLabel ? 5 : 8) as unknown as number,
               top: 5,
             }}
           >
@@ -724,7 +724,8 @@ const AreaChart: React.ForwardRefExoticComponent<
             </defs>
             {showGridLines ? (
               <CartesianGrid
-                className={cx("stroke-gray-200 stroke-1")}
+                className={cx("stroke-gray-100")}
+                strokeDasharray="3 3"
                 horizontal={true}
                 vertical={false}
               />
@@ -734,7 +735,11 @@ const AreaChart: React.ForwardRefExoticComponent<
               hide={!showXAxis}
               dataKey={index}
               interval={startEndOnly ? "preserveStartEnd" : intervalType}
-              tick={{ transform: "translate(0, 6)" }}
+              tick={{
+                transform: "translate(0, 6)",
+                fontSize: 10,
+                fontWeight: 500,
+              }}
               ticks={
                 startEndOnly
                   ? ([
@@ -748,7 +753,7 @@ const AreaChart: React.ForwardRefExoticComponent<
               }
               fill=""
               stroke=""
-              className={cx("text-xs", "fill-gray-500")}
+              className={cx("tabular-nums", "fill-gray-500")}
               tickLine={false}
               axisLine={false}
               minTickGap={tickGap}
@@ -770,10 +775,14 @@ const AreaChart: React.ForwardRefExoticComponent<
               tickLine={false}
               type="number"
               domain={yAxisDomain as AxisDomain}
-              tick={{ transform: "translate(-3, 0)" }}
+              tick={{
+                transform: "translate(-4, 0)",
+                fontSize: 10,
+                fontWeight: 500,
+              }}
               fill=""
               stroke=""
-              className={cx("text-xs", "fill-gray-500")}
+              className={cx("tabular-nums", "fill-gray-500")}
               tickFormatter={valueFormatter}
               allowDecimals={allowDecimals}
             >

package/UI/Components/Charts/ChartLibrary/BarChart/BarChart.tsx

@@ -794,9 +794,9 @@ const BarChart: React.ForwardRefExoticComponent<
                 }
               : {})}
             margin={{
-              bottom: xAxisLabel ? 30 : 0,
+              bottom: xAxisLabel ? 30 : 8,
               left: yAxisLabel ? 20 : 0,
-              right: yAxisLabel ? 5 : 0,
+              right: yAxisLabel ? 5 : 8,
               top: 5,
             }}
             stackOffset={type === "percent" ? "expand" : "none"}
@@ -805,7 +805,8 @@ const BarChart: React.ForwardRefExoticComponent<
           >
             {showGridLines ? (
               <CartesianGrid
-                className={cx("stroke-gray-200 stroke-1")}
+                className={cx("stroke-gray-100")}
+                strokeDasharray="3 3"
                 horizontal={layout !== "vertical"}
                 vertical={layout === "vertical"}
               />
@@ -815,12 +816,14 @@ const BarChart: React.ForwardRefExoticComponent<
               tick={{
                 transform:
                   layout !== "vertical" ? "translate(0, 6)" : undefined,
+                fontSize: 10,
+                fontWeight: 500,
               }}
               fill=""
               stroke=""
               className={cx(
                 // base
-                "text-xs",
+                "tabular-nums",
                 // text fill
                 "fill-gray-500",
                 { "mt-4": layout !== "vertical" },
@@ -872,15 +875,17 @@ const BarChart: React.ForwardRefExoticComponent<
               stroke=""
               className={cx(
                 // base
-                "text-xs",
+                "tabular-nums",
                 // text fill
                 "fill-gray-500",
               )}
               tick={{
                 transform:
                   layout !== "vertical"
-                    ? "translate(-3, 0)"
+                    ? "translate(-4, 0)"
                     : "translate(0, 0)",
+                fontSize: 10,
+                fontWeight: 500,
               }}
               {...(layout !== "vertical"
                 ? {

package/UI/Components/Charts/ChartLibrary/LineChart/LineChart.tsx

@@ -710,15 +710,16 @@ const LineChart: React.ForwardRefExoticComponent<
                 : () => {} // do nothing
             }
             margin={{
-              bottom: (xAxisLabel ? 30 : undefined) as unknown as number,
-              left: (yAxisLabel ? 20 : undefined) as unknown as number,
-              right: (yAxisLabel ? 5 : undefined) as unknown as number,
+              bottom: (xAxisLabel ? 30 : 8) as unknown as number,
+              left: (yAxisLabel ? 20 : 0) as unknown as number,
+              right: (yAxisLabel ? 5 : 8) as unknown as number,
               top: 5,
             }}
           >
             {showGridLines ? (
               <CartesianGrid
-                className={cx("stroke-gray-200 stroke-1")}
+                className={cx("stroke-gray-100")}
+                strokeDasharray="3 3"
                 horizontal={true}
                 vertical={false}
               />
@@ -728,7 +729,11 @@ const LineChart: React.ForwardRefExoticComponent<
               hide={!showXAxis}
               dataKey={index}
               interval={startEndOnly ? "preserveStartEnd" : intervalType}
-              tick={{ transform: "translate(0, 6)" }}
+              tick={{
+                transform: "translate(0, 6)",
+                fontSize: 10,
+                fontWeight: 500,
+              }}
               ticks={
                 startEndOnly
                   ? ([
@@ -741,7 +746,7 @@ const LineChart: React.ForwardRefExoticComponent<
               stroke=""
               className={cx(
                 // base
-                "text-xs",
+                "tabular-nums",
                 // text fill
                 "fill-gray-500",
               )}
@@ -766,12 +771,16 @@ const LineChart: React.ForwardRefExoticComponent<
               tickLine={false}
               type="number"
               domain={yAxisDomain as AxisDomain}
-              tick={{ transform: "translate(-3, 0)" }}
+              tick={{
+                transform: "translate(-4, 0)",
+                fontSize: 10,
+                fontWeight: 500,
+              }}
               fill=""
               stroke=""
               className={cx(
                 // base
-                "text-xs",
+                "tabular-nums",
                 // text fill
                 "fill-gray-500",
               )}

package/UI/Components/Charts/Line/LineChart.tsx

@@ -114,7 +114,7 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
         connectNulls={true}
         curve={props.curve}
         syncid={props.sync ? props.syncid : undefined}
-        yAxisWidth={60}
+        yAxisWidth={64}
         onValueChange={() => {}}
         referenceLines={props.referenceLines}
         formattedExemplarPoints={

package/UI/Components/ExpandableText/ExpandableText.tsx

@@ -17,23 +17,45 @@ const ExpandableText: FunctionComponent<ComponentProps> = (
   }
 
   const isLong: boolean = props.text.length > maxLength;
+  const baseTextClass: string = props.className || "text-sm text-gray-900";
 
   if (!isLong) {
-    return (
-      <span className={props.className || "text-gray-600"}>{props.text}</span>
-    );
+    return <span className={baseTextClass}>{props.text}</span>;
   }
 
+  const truncated: string =
+    props.text.substring(0, maxLength).replace(/\s+$/u, "") + "…";
+
   return (
-    <span className={props.className || "text-gray-600"}>
-      {isExpanded ? props.text : props.text.substring(0, maxLength) + "..."}
+    <span className="inline align-baseline">
+      <span className={`${baseTextClass} break-words align-baseline`}>
+        {isExpanded ? props.text : truncated}
+      </span>
       <button
+        type="button"
         onClick={() => {
           setIsExpanded(!isExpanded);
         }}
-        className="ml-1.5 text-xs text-indigo-600 hover:text-indigo-800 font-medium"
+        aria-expanded={isExpanded}
+        className="ml-2 inline-flex items-center gap-1 align-baseline rounded text-xs font-medium text-indigo-600 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-colors"
       >
-        {isExpanded ? "Less" : "More"}
+        <span>{isExpanded ? "Show less" : "Show more"}</span>
+        <svg
+          className={`w-3 h-3 transition-transform duration-200 ${
+            isExpanded ? "rotate-180" : ""
+          }`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2.25}
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
       </button>
     </span>
   );