Improve SMS settings layout and add send-modal variable chips.

Credit/usage divider, total row plus typed counts grid, and insertable template vars on compose.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/super-admin/src/pages/BusinessesPage.module.css

@@ -146,6 +146,46 @@
   gap: 8px;
 }
 
+.smsSentTypesRow {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.smsSentTypeCell {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm, 10px);
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  background: rgba(15, 23, 42, 0.04);
+}
+
+.smsSentTypeLabel {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.35;
+  color: var(--text-secondary);
+}
+
+.smsSentTypeValue {
+  font-size: 14px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-primary);
+  text-align: end;
+}
+
+@media (max-width: 720px) {
+  .smsSentTypesRow {
+    grid-template-columns: 1fr;
+  }
+}
+
 .entityGroupLabel {
   font-size: 12px;
   font-weight: 500;

apps/super-admin/src/pages/BusinessesPage.tsx

@@ -2173,29 +2173,30 @@ export function BusinessesPage() {
                 {(smsSettingsBusiness?.smsSentCount ?? 0).toLocaleString('en-US')}
               </strong>
             </div>
-            {(
-              [
-                ['Mass send', smsSettingsBusiness?.smsSentByType?.mass],
-                ['Singular', smsSettingsBusiness?.smsSentByType?.singular],
-                ['Auth service', smsSettingsBusiness?.smsSentByType?.auth],
+            <div className={styles.smsSentTypesRow}>
+              {(
                 [
-                  'Auto customer',
-                  smsSettingsBusiness?.smsSentByType?.autoCustomer,
-                ],
-                ['Admin notification', smsSettingsBusiness?.smsSentByType?.admin],
-              ] as const
-            ).map(([label, value]) => (
-              <div
-                key={label}
-                className={`${styles.dataRow} ${styles.dataRowNeutral}`}
-                role="status"
-              >
-                <span className={styles.dataRowLabel}>{label}</span>
-                <strong className={styles.dataRowValue}>
-                  {(value ?? 0).toLocaleString('en-US')}
-                </strong>
-              </div>
-            ))}
+                  ['Mass send', smsSettingsBusiness?.smsSentByType?.mass],
+                  ['Singular', smsSettingsBusiness?.smsSentByType?.singular],
+                  ['Auth service', smsSettingsBusiness?.smsSentByType?.auth],
+                  [
+                    'Auto customer',
+                    smsSettingsBusiness?.smsSentByType?.autoCustomer,
+                  ],
+                  [
+                    'Admin notification',
+                    smsSettingsBusiness?.smsSentByType?.admin,
+                  ],
+                ] as const
+              ).map(([label, value]) => (
+                <div key={label} className={styles.smsSentTypeCell} role="status">
+                  <span className={styles.smsSentTypeLabel}>{label}</span>
+                  <strong className={styles.smsSentTypeValue}>
+                    {(value ?? 0).toLocaleString('en-US')}
+                  </strong>
+                </div>
+              ))}
+            </div>
           </div>
           <p className={styles.helperText}>
             Lifetime messages billed (one per recipient), split by type. Auto customer and