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/elements/EmbeddableScrollArea/EmbeddableScrollArea.tsx

@@ -34,6 +34,18 @@ export interface EmbeddableScrollAreaProps {
 // grow wider than its viewport; see `constrainContentWidth`.
 const CONSTRAIN_CONTENT_STYLES = { content: { minWidth: 0 } } as const;
 
+// Shared scroll region for both hosts; the differing props (viewportRef, mah,
+// styles) are passed at each call site.
+const StreamScrollArea = ScrollArea.Autosize.withProps({
+  type: "scroll",
+  offsetScrollbars: true,
+  viewportProps: { tabIndex: 0 },
+});
+
+// Fill-height wrapper for the embedded host, so the inner scroll region can claim
+// the remaining space and scroll instead of overflowing.
+const EmbeddedColumn = Stack.withProps({ flex: 1, mih: 0, gap: 0 });
+
 /**
  * The scroll region shared by the Logs / Protocol / Network stream panels, which
  * render both full-size (their own tab) and embedded (the monitoring sidebar).
@@ -48,30 +60,20 @@ export function EmbeddableScrollArea({
   const styles = constrainContentWidth ? CONSTRAIN_CONTENT_STYLES : undefined;
   if (embedded) {
     return (
-      <Stack flex={1} mih={0} gap={0}>
-        <ScrollArea.Autosize
-          viewportRef={viewportRef}
-          mah="100%"
-          type="scroll"
-          offsetScrollbars
-          styles={styles}
-          viewportProps={{ tabIndex: 0 }}
-        >
+      <EmbeddedColumn>
+        <StreamScrollArea viewportRef={viewportRef} mah="100%" styles={styles}>
           {children}
-        </ScrollArea.Autosize>
-      </Stack>
+        </StreamScrollArea>
+      </EmbeddedColumn>
     );
   }
   return (
-    <ScrollArea.Autosize
+    <StreamScrollArea
       viewportRef={viewportRef}
       mah={FULLSIZE_MAH}
-      type="scroll"
-      offsetScrollbars
       styles={styles}
-      viewportProps={{ tabIndex: 0 }}
     >
       {children}
-    </ScrollArea.Autosize>
+    </StreamScrollArea>
   );
 }