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/ReAuthBanner/ReAuthBanner.tsx

@@ -6,27 +6,41 @@ export interface ReAuthBannerProps {
   onDismiss: () => void;
 }
 
+const ReAuthAlert = Alert.withProps({
+  color: "red",
+  variant: "reauth",
+  title: "Re-authentication required",
+  withCloseButton: true,
+});
+
+const BannerRow = Group.withProps({
+  justify: "space-between",
+  align: "center",
+  wrap: "nowrap",
+  gap: "md",
+});
+
+const MessageText = Text.withProps({
+  component: "span",
+  size: "sm",
+});
+
+const ReAuthButton = Button.withProps({
+  size: "xs",
+  variant: "filled",
+});
+
 export function ReAuthBanner({
   message,
   onReauthenticate,
   onDismiss,
 }: ReAuthBannerProps) {
   return (
-    <Alert
-      color="red"
-      variant="reauth"
-      title="Re-authentication required"
-      withCloseButton
-      onClose={onDismiss}
-    >
-      <Group justify="space-between" align="center" wrap="nowrap" gap="md">
-        <Text component="span" size="sm">
-          {message}
-        </Text>
-        <Button size="xs" variant="filled" onClick={onReauthenticate}>
-          Re-authenticate
-        </Button>
-      </Group>
-    </Alert>
+    <ReAuthAlert onClose={onDismiss}>
+      <BannerRow>
+        <MessageText>{message}</MessageText>
+        <ReAuthButton onClick={onReauthenticate}>Re-authenticate</ReAuthButton>
+      </BannerRow>
+    </ReAuthAlert>
   );
 }