refactor(web): sweep AGENTS.md TypeScript + Mantine rule violations (#1771)

Codebase-wide sweep bringing the web client into strict compliance with the AGENTS.md TypeScript and Mantine/React conventions: ~170 inline 2+-static-prop elements extracted to named .withProps() constants across ~77 files, the AGENTS.md rule wording tightened to match (static-prop boundary + Accordion/Transition/data-*/Box exemptions), a real ScreenStage Box->Flex layout regression fixed (direction: column) with a Storybook regression guard, and an App.tsx double-cast tightened. Closes #1762.
This commit is contained in:
Cliff Hall 2026-07-25 11:38:49 -04:00 • committed by GitHub
commit da37692485
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -6,6 +6,23 @@ import type {
} from "@inspector/core/mcp/types.js";
import { MessageDirectionFilter } from "../MessageDirectionFilter/MessageDirectionFilter";
const SearchInput = TextInput.withProps({
placeholder: "Search...",
rightSectionPointerEvents: "auto",
});
// h5 (not h6) so it sits one level below the screen's h4 heading — avoids an axe
// `heading-order` skip; `size="h6"` keeps the small visual size.
const MethodFilterTitle = Title.withProps({
order: 5,
size: "h6",
});
const MethodSelect = Select.withProps({
placeholder: "All methods",
clearable: true,
});
export interface ProtocolControlsProps {
searchText: string;
methodFilter?: MessageMethod;
@ -30,29 +47,21 @@ export function ProtocolControls({
return (
<Stack gap="md">
<Title order={4}>Protocol</Title>
<TextInput
placeholder="Search..."
<SearchInput
value={searchText}
onChange={(event) => onSearchChange(event.currentTarget.value)}
rightSectionPointerEvents="auto"
rightSection={
searchText ? <ClearButton onClick={() => onSearchChange("")} /> : null
}
/>
{/* h5 (not h6) so it sits one level below the screen's h4 heading — avoids
an axe `heading-order` skip; `size="h6"` keeps the small visual size. */}
<Title order={5} size="h6">
Filter by Method
</Title>
<Select
placeholder="All methods"
<MethodFilterTitle>Filter by Method</MethodFilterTitle>
<MethodSelect
data={availableMethods}
value={methodFilter ?? null}
onChange={(value) =>
onMethodFilterChange((value as MessageMethod | null) ?? undefined)
}
clearable
/>
<MessageDirectionFilter