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.

clients/web/src/components/groups/OutputValidationModal/OutputValidationModal.tsx

@@ -16,6 +16,24 @@ export interface OutputValidationModalProps {
   message?: string;
 }
 
+const DetailModal = Modal.withProps({
+  withCloseButton: false,
+  size: "lg",
+  centered: true,
+});
+const HeaderRow = Group.withProps({
+  justify: "space-between",
+  wrap: "nowrap",
+});
+const DimText = Text.withProps({ size: "sm", c: "dimmed" });
+const DetailsTextarea = Textarea.withProps({
+  "aria-label": "Validation details",
+  readOnly: true,
+  autosize: true,
+  minRows: 6,
+  maxRows: 18,
+});
+
 /**
  * Shows the full output-schema validation error for an MCP App tool result.
  * The inspector still renders the app (the result is forwarded verbatim to the
@@ -30,33 +48,20 @@ export function OutputValidationModal({
   message,
 }: OutputValidationModalProps) {
   return (
-    <Modal
-      opened={opened}
-      onClose={onClose}
-      withCloseButton={false}
-      size="lg"
-      centered
-    >
+    <DetailModal opened={opened} onClose={onClose}>
       <Stack gap="md">
-        <Group justify="space-between" wrap="nowrap">
+        <HeaderRow>
           {/* `Modal.Title` names the dialog (wires `aria-labelledby`). */}
           <Modal.Title flex={1}>Output schema validation</Modal.Title>
           <CloseButton aria-label="Close" onClick={onClose} />
-        </Group>
-        <Text size="sm" c="dimmed">
+        </HeaderRow>
+        <DimText>
           {toolName
             ? `"${toolName}" returned structuredContent that does not match its declared outputSchema. The inspector renders the app anyway, but strict MCP clients may refuse to display it.`
             : "The tool result's structuredContent does not match the declared outputSchema. The inspector renders the app anyway, but strict MCP clients may refuse to display it."}
-        </Text>
-        <Textarea
-          aria-label="Validation details"
-          readOnly
-          autosize
-          minRows={6}
-          maxRows={18}
-          value={message ?? ""}
-        />
+        </DimText>
+        <DetailsTextarea value={message ?? ""} />
       </Stack>
-    </Modal>
+    </DetailModal>
   );
 }