Skip to content

ToolDetailPanel: collapse long descriptions + scroll the SchemaForm inside its own container #1381

@cliffhall

Description

@cliffhall

Problem

When a tool ships with a very long description (e.g. sequential-thinking-server's "Sequential Thinking" tool — see the screenshot below), the ToolDetailPanel body grows past its container's height and pushes the form + Execute Tool button off the bottom of the screen. The ToolsScreen is correctly viewport-bounded (ScreenLayout uses h: "calc(100vh - var(--app-shell-header-height, 0px))" at clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx:28-34), so we want to keep that constraint and instead make the panel respect it.

Repro: open sequential-thinking-server in v2/main, select the "Sequential Thinking" tool. Description fills most of the viewport; the form fields below it are clipped at the bottom of the panel and the Execute Tool button is off-screen.

Screenshot

Image

Proposed change

Two coordinated edits to clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.tsx:

1. Collapsible description

Wrap the existing <DescriptionText>{description}</DescriptionText> (line 101) in a Mantine <Collapse in={descriptionOpen}>. Expose the trigger as a chevron icon on the right side of the tool name row, not as a separate button:

  • Anchor inside <TitleRow> (lines 80-83). Add a third child after <ToolTitle> that is the chevron toggle. The row is already wrap: "nowrap" with miw: 0, so the chevron will pin to the right edge naturally — give the title flex: 1 to absorb the slack, or wrap the title + chevron in a Group justify="space-between".
  • Icon set: react-icons/fa (already a project dependency — see e.g. react-icons/md and react-icons/ri already in use in AppListItem.tsx:2, ServerAddMenu.tsx:2, etc.):
    • FaChevronRight when description is collapsed (default state — long descriptions are the common case for the gnarly tools).
    • FaChevronDown when expanded.
  • Use an UnstyledButton or ActionIcon with aria-label="Show description" / "Hide description" so screen readers can announce the state change.
  • Only render the chevron when a description actually exists (description truthy). If there's no description, no chevron, no Collapse.
  • Default state: collapsed. Reset to collapsed on tool change so switching tools doesn't carry over the expanded state — the selectedToolName change in ToolsScreen.tsx:84-87 already clears formValues; mirror that for the panel's local "expanded" state.

2. Internal scroll for the SchemaForm region

The Execute Tool button (lines 114-124) must stay visible at the bottom of the panel regardless of how long the schema is. Wrap the <SchemaForm> (lines 105-110) + <ProgressDisplay> (line 112) in a ScrollArea.Autosize (or equivalent) so they scroll inside a bounded region while the panel's chrome (title row, annotations, description-when-expanded, divider, button row) stays pinned.

  • Use the same idiom we landed in the Connection Info modal's instructions block (clients/web/src/components/groups/ConnectionInfoContent/ConnectionInfoContent.tsx:138): <ScrollArea.Autosize mah={…}>. Pick mah so the panel always lands flush with the same bottom margin as ResourcesScreen / PromptsScreen / ServerListScreen — i.e. it should match the ScreenLayout's p: "xl" padding at the bottom rather than spilling under it.
  • The outer <Stack> (line 79) probably needs h: "100%" so it fills the ContentCard and lets the ScrollArea claim the remaining vertical space. The ContentCard itself is flex={1} in ToolsScreen.tsx:92, which already gives it the viewport-bounded height the ScrollArea needs.

Acceptance criteria

  • Loading a tool with a long description renders the description collapsed by default with FaChevronRight to the right of the tool name.
  • Clicking the chevron expands the description (with the Mantine Collapse animation) and the icon flips to FaChevronDown.
  • Switching to a different tool resets the description to collapsed.
  • When the SchemaForm has many fields (or progress output), it scrolls inside its own container — the title row, annotations, description, divider, and Execute Tool button row remain pinned and never leave the viewport.
  • The bottom of the ToolDetailPanel lands at the same baseline as other screens (matching ScreenLayout's p: "xl" bottom padding).
  • Tools with no description still render the title row cleanly — no orphaned chevron.
  • Existing ToolDetailPanel.test.tsx and .stories.tsx updated to cover both states (collapsed default + expanded toggle) and the internal-scroll wiring.
  • npm run validate + npm run test:storybook pass.

Notes

  • Collapse and ScrollArea both come from @mantine/core — no new dependency surface.
  • Per project conventions: define the chevron button as a withProps subcomponent constant (e.g. const DescriptionToggle = ActionIcon.withProps({ variant: "subtle", "aria-label": …, size: "sm" })) rather than inline props.
  • This is a polish item, not a blocker for new tool development — Backlog or Fit and Finish column on the V2 board, whichever you prefer.

Screenshot

(Attached by the requester — Sequential Thinking tool's description filling the middle column with the form clipped at the bottom.)

Metadata

Metadata

Assignees

Labels

v2Issues and PRs for v2

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions