fix(web): collapsible tool description in ToolDetailPanel — shown by default (#1381) (#1459)

* fix(web): collapse long tool descriptions in ToolDetailPanel (#1381)

Long tool descriptions (e.g. sequential-thinking-server's "Sequential
Thinking" tool) filled the panel and pushed the form + Execute button
off-screen. The internal scroll region for the form/progress was already
in place; this adds the collapsible description.

- Wrap the description in a Mantine Collapse, collapsed by default.
- Expose the trigger as a chevron ActionIcon pinned to the right of the
  tool-name row (FaChevronRight collapsed / FaChevronDown expanded), with
  Show/Hide description aria-labels. Rendered only when a description exists.
- Reset to collapsed on tool change via the adjust-state-during-render
  pattern, mirroring how ToolsScreen clears formValues.

Tests + stories cover collapsed default, expand/collapse toggle, reset on
tool switch, and the no-description case.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(web): show tool description by default, click to hide (#1381)

Most tool descriptions are short, so default to showing the description
and let the user collapse a long one via the chevron, rather than the
reverse. Flips the initial/reset state to open and updates the toggle
aria-labels, tests, and stories accordingly.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* refactor(web): use Ri disclosure chevrons in ToolDetailPanel (#1459 review)

Swap react-icons/fa FaChevronDown/FaChevronRight for the established
react-icons/ri RiArrowDownSLine/RiArrowRightSLine disclosure-chevron
convention already used in ResourceLink, keeping chevron visuals
consistent across the app.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* a11y(web): wire description toggle as expandable control (#1459 review)

Add aria-expanded + aria-controls to the description chevron, tying it to
the Collapse region (via useId) so assistive tech announces it as a single
expandable control rather than two differently-labelled buttons. Adds a
test covering the wiring and the aria-expanded flip.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.test.tsx

@@ -99,6 +99,92 @@ describe("ToolDetailPanel", () => {
     ).not.toBeInTheDocument();
   });
 
+  describe("Collapsible description", () => {
+    it("renders the description shown by default (Hide description toggle)", () => {
+      renderWithMantine(<ToolDetailPanel {...baseProps} tool={titledTool} />);
+      const toggle = screen.getByRole("button", { name: "Hide description" });
+      expect(toggle).toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", { name: "Show description" }),
+      ).not.toBeInTheDocument();
+    });
+
+    it("hides the description when the toggle is clicked", async () => {
+      const user = userEvent.setup();
+      renderWithMantine(<ToolDetailPanel {...baseProps} tool={titledTool} />);
+      await user.click(
+        screen.getByRole("button", { name: "Hide description" }),
+      );
+      expect(
+        screen.getByRole("button", { name: "Show description" }),
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", { name: "Hide description" }),
+      ).not.toBeInTheDocument();
+    });
+
+    it("shows the description again when the collapsed toggle is clicked", async () => {
+      const user = userEvent.setup();
+      renderWithMantine(<ToolDetailPanel {...baseProps} tool={titledTool} />);
+      await user.click(
+        screen.getByRole("button", { name: "Hide description" }),
+      );
+      await user.click(
+        screen.getByRole("button", { name: "Show description" }),
+      );
+      expect(
+        screen.getByRole("button", { name: "Hide description" }),
+      ).toBeInTheDocument();
+    });
+
+    it("resets to shown when switching to a different tool", async () => {
+      const user = userEvent.setup();
+      const { rerender } = renderWithMantine(
+        <ToolDetailPanel {...baseProps} tool={titledTool} />,
+      );
+      await user.click(
+        screen.getByRole("button", { name: "Hide description" }),
+      );
+      expect(
+        screen.getByRole("button", { name: "Show description" }),
+      ).toBeInTheDocument();
+
+      // Switching tools (different name) should reset the local hidden state.
+      rerender(<ToolDetailPanel {...baseProps} tool={annotatedTool} />);
+      expect(
+        screen.getByRole("button", { name: "Hide description" }),
+      ).toBeInTheDocument();
+    });
+
+    it("wires the toggle as an expandable control (aria-expanded + aria-controls)", async () => {
+      const user = userEvent.setup();
+      renderWithMantine(<ToolDetailPanel {...baseProps} tool={titledTool} />);
+      const toggle = screen.getByRole("button", { name: "Hide description" });
+      expect(toggle).toHaveAttribute("aria-expanded", "true");
+      // aria-controls points at the Collapse region holding the description.
+      const regionId = toggle.getAttribute("aria-controls");
+      expect(regionId).toBeTruthy();
+      expect(document.getElementById(regionId as string)).toContainElement(
+        screen.getByText("Sends a message to the recipient"),
+      );
+
+      await user.click(toggle);
+      expect(
+        screen.getByRole("button", { name: "Show description" }),
+      ).toHaveAttribute("aria-expanded", "false");
+    });
+
+    it("does not render a description toggle when the tool has no description", () => {
+      renderWithMantine(<ToolDetailPanel {...baseProps} tool={simpleTool} />);
+      expect(
+        screen.queryByRole("button", { name: "Show description" }),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", { name: "Hide description" }),
+      ).not.toBeInTheDocument();
+    });
+  });
+
   it("renders all annotation badges when annotations are present", () => {
     renderWithMantine(<ToolDetailPanel {...baseProps} tool={annotatedTool} />);
     expect(screen.getByText("read-only")).toBeInTheDocument();