feat:Expand and collaps button added

ecosystem-explorer/src/components/ui/section-divider.tsx

@@ -17,11 +17,12 @@ import type { ReactNode } from "react";
 
 interface SectionDividerProps {
   children: ReactNode;
+  className?: string;
 }
 
-export function SectionDivider({ children }: SectionDividerProps) {
+export function SectionDivider({ children, className }: SectionDividerProps) {
   return (
-    <div className="my-12 flex items-center">
+    <div className={`my-12 flex items-center ${className || ""}`}>
       <div className="border-border/30 flex-1 border-b-2" />
       <span className="text-muted-foreground px-8 text-xs font-bold tracking-[0.2em] uppercase">
         {children}

ecosystem-explorer/src/features/java-agent/components/telemetry-section.test.tsx

@@ -421,4 +421,73 @@ describe("TelemetrySection", () => {
       ).toBeInTheDocument();
     });
   });
+
+  describe("Expand/Collapse Functionality", () => {
+    it("toggles individual metrics when clicked", async () => {
+      const user = userEvent.setup();
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+          metrics: [mockMetric],
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      expect(screen.getByTestId("attribute-table")).toBeInTheDocument();
+
+      const metricHeader = screen.getByText("http.server.duration").parentElement!;
+      await user.click(metricHeader);
+
+      expect(screen.queryByTestId("attribute-table")).not.toBeInTheDocument();
+
+      await user.click(metricHeader);
+      expect(screen.getByTestId("attribute-table")).toBeInTheDocument();
+    });
+
+    it("toggles individual spans when clicked", async () => {
+      const user = userEvent.setup();
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+          spans: [mockSpan],
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      expect(screen.getByTestId("attribute-table")).toBeInTheDocument();
+
+      const spanHeader = screen.getByText("CLIENT Span").parentElement!;
+      await user.click(spanHeader);
+
+      expect(screen.queryByTestId("attribute-table")).not.toBeInTheDocument();
+
+      await user.click(spanHeader);
+      expect(screen.getByTestId("attribute-table")).toBeInTheDocument();
+    });
+
+    it("supports keyboard interaction for toggling", async () => {
+      const user = userEvent.setup();
+      const telemetry: Telemetry[] = [
+        {
+          when: "default",
+          metrics: [mockMetric],
+        },
+      ];
+
+      render(<TelemetrySection telemetry={telemetry} />);
+
+      expect(screen.getByTestId("attribute-table")).toBeInTheDocument();
+
+      const metricHeader = screen.getByText("http.server.duration").parentElement!;
+      metricHeader.focus();
+      await user.keyboard("{Enter}");
+
+      expect(screen.queryByTestId("attribute-table")).not.toBeInTheDocument();
+
+      await user.keyboard(" ");
+      expect(screen.getByTestId("attribute-table")).toBeInTheDocument();
+    });
+  });
 });