frontend: compose settings frames from CardFrame primitives

SettingsFrame used a hand-rolled <div className="p-5"> body and
SettingsCard was a plain div (no data-slot=card), so the frame's card
styling never applied.

- Add CardFramePanel (data-slot="card-frame-panel") as the padded frame
  body, mirroring the other CardFrame* subcomponents.
- SettingsFrame now composes CardFrameHeader + CardFramePanel (same p-5
  padding as before) instead of a raw div.
- SettingsCard renders a real COSS Card (data-slot=card). Since Card is
  flex flex-col, the horizontal-row call sites (ToggleRow, billing and
  preferences rows) now pass flex-row.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/components/ui/card.tsx

@@ -136,6 +136,26 @@ export function CardFrameFooter({
   });
 }
 
+// The padded body of a frame: content that sits between the frame header and
+// footer. Mirrors the other CardFrame* subcomponents (useRender + data-slot) so
+// a frame can be composed entirely from primitives instead of a raw <div>.
+export function CardFramePanel({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">): React.ReactElement {
+  const defaultProps = {
+    className: cn("p-5", className),
+    "data-slot": "card-frame-panel",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
 export function CardHeader({
   className,
   render,