fix(webapp): billing alerts review fixes and accessible copy affordance

- getAlertPreviewLimitCents takes the real percentage mode from
  BillingAlertsSection instead of inferring it from threshold conversion,
  so absolute-dollar default alerts are no longer read as percentages
  (regression test added)
- CopyableText renders a real button with an aria-label, visible on
  focus and coarse pointers, not only on mouse hover
- default billing alert seeding only writes when no alerts exist, so a
  slow seed can't clobber the user's first alert edit after the timeout

Author: kathiekiwi

apps/webapp/app/components/billing/BillingAlertsSection.tsx

@@ -136,7 +136,8 @@ export function BillingAlertsSection({
   const alertPreviewLimitCents = getAlertPreviewLimitCents(
     alerts,
     effectiveLimitCents,
-    planLimitCents
+    planLimitCents,
+    isPercentageMode
   );
   const maxAlerts = isPercentageMode ? MAX_PERCENTAGE_ALERTS : MAX_ABSOLUTE_ALERTS;
 

apps/webapp/app/components/billing/billingAlertsFormat.ts

@@ -313,15 +313,25 @@ function percentageAlertAmountMatches(
   return amountCents === effectiveLimitCents || amountCents === planLimitCents;
 }
 
-/** Cents base for dollar preview when displaying saved percentage alerts. */
+/**
+ * Cents base for dollar preview when displaying saved percentage alerts.
+ * `isPercentageMode` must come from the billing limit mode, not from the alert
+ * levels: absolute dollar alerts (e.g. the seeded defaults) also convert to
+ * non-empty UI thresholds and must not be treated as percentages of the limit.
+ */
 export function getAlertPreviewLimitCents(
   alerts: BillingAlertsFormData,
   effectiveLimitCents: number,
-  planLimitCents: number
+  planLimitCents: number,
+  isPercentageMode: boolean
 ): number {
   const amountCents = getSavedAlertAmountCents(alerts);
   // Percentages always apply to the current limit, not the base stored at last save.
-  if (amountCents > 0 && percentageAlertLevelsToUiThresholds(alerts.alertLevels).length > 0) {
+  if (
+    isPercentageMode &&
+    amountCents > 0 &&
+    percentageAlertLevelsToUiThresholds(alerts.alertLevels).length > 0
+  ) {
     return effectiveLimitCents;
   }
   if (percentageAlertAmountMatches(amountCents, effectiveLimitCents, planLimitCents)) {

apps/webapp/app/components/primitives/CopyableText.tsx

@@ -12,6 +12,7 @@ export function CopyableText({
   asChild,
   variant,
   hideTooltip,
+  ariaLabel,
 }: {
   value: string;
   copyValue?: string;
@@ -24,18 +25,27 @@ export function CopyableText({
    * fire Radix's global "one tooltip open at a time" close and dismiss the parent.
    */
   hideTooltip?: boolean;
+  /** Accessible label for the copy button. Defaults to "Copy". */
+  ariaLabel?: string;
 }) {
   const [isHovered, setIsHovered] = useState(false);
   const { copy, copied } = useCopy(copyValue ?? value);
 
   const resolvedVariant = variant ?? "icon-right";
 
   if (resolvedVariant === "icon-right") {
+    // Real button semantics so keyboard and touch users can discover and trigger copying.
+    // The affordance is revealed on row hover, keyboard focus, and coarse (touch) pointers.
     const iconButton = (
-      <span
+      <button
+        type="button"
+        onClick={copy}
+        onMouseDown={(e) => e.stopPropagation()}
+        aria-label={copied ? "Copied!" : (ariaLabel ?? "Copy")}
         className={cn(
-          "ml-1 flex size-6 items-center justify-center rounded border border-border-bright bg-background-hover",
+          "absolute -right-6 top-0 z-10 flex size-6 items-center justify-center rounded border border-border-bright bg-background-hover font-sans",
           asChild && "p-1",
+          "pointer-events-none opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 focus-visible:opacity-100 [@media(pointer:coarse)]:pointer-events-auto [@media(pointer:coarse)]:opacity-100",
           copied
             ? "text-green-500"
             : "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
@@ -46,35 +56,24 @@ export function CopyableText({
         ) : (
           <ClipboardIcon className="size-3.5" />
         )}
-      </span>
+      </button>
     );
 
     return (
-      <span
-        className={cn("group relative inline-flex h-6 items-center", className)}
-        onMouseLeave={() => setIsHovered(false)}
-      >
-        <span onMouseEnter={() => setIsHovered(true)}>{value}</span>
-        <span
-          onClick={copy}
-          onMouseDown={(e) => e.stopPropagation()}
-          className={cn(
-            "absolute -right-6 top-0 z-10 size-6 font-sans",
-            isHovered ? "flex" : "hidden"
-          )}
-        >
-          {hideTooltip ? (
-            iconButton
-          ) : (
-            <SimpleTooltip
-              button={iconButton}
-              content={copied ? "Copied!" : "Copy"}
-              className="font-sans"
-              disableHoverableContent
-              asChild={asChild}
-            />
-          )}
-        </span>
+      <span className={cn("group relative inline-flex h-6 items-center", className)}>
+        <span>{value}</span>
+        {hideTooltip ? (
+          iconButton
+        ) : (
+          // asChild so the Radix trigger merges onto our button instead of nesting a button.
+          <SimpleTooltip
+            button={iconButton}
+            content={copied ? "Copied!" : "Copy"}
+            className="font-sans"
+            disableHoverableContent
+            asChild
+          />
+        )}
       </span>
     );
   }

apps/webapp/app/models/organization.server.ts

@@ -15,6 +15,7 @@ import { env } from "~/env.server";
 import { featuresForUrl } from "~/features.server";
 import { createApiKeyForEnv, createPkApiKeyForEnv, envSlug } from "./api-key.server";
 import {
+  getBillingAlerts,
   getDefaultEnvironmentConcurrencyLimit,
   isBillingConfigured,
   setBillingAlert,
@@ -150,8 +151,8 @@ async function seedDefaultBillingAlerts(organizationId: string): Promise<void> {
   });
 
   const [error] = await tryCatch(
-    Promise.race([setBillingAlert(organizationId, buildDefaultBillingAlerts()), timeout]).finally(
-      () => clearTimeout(timer)
+    Promise.race([writeDefaultBillingAlertsIfUnset(organizationId), timeout]).finally(() =>
+      clearTimeout(timer)
     )
   );
   if (error) {
@@ -162,6 +163,19 @@ async function seedDefaultBillingAlerts(organizationId: string): Promise<void> {
   }
 }
 
+/**
+ * Only writes defaults when the org has no alerts yet. A slow seed that finishes
+ * after org creation returned would otherwise overwrite the user's first alert edit.
+ */
+async function writeDefaultBillingAlertsIfUnset(organizationId: string): Promise<void> {
+  const existing = await getBillingAlerts(organizationId);
+  if (existing && existing.alertLevels.length > 0) {
+    return;
+  }
+
+  await setBillingAlert(organizationId, buildDefaultBillingAlerts());
+}
+
 export async function createEnvironment({
   organization,
   project,

apps/webapp/test/billingAlertsDefaults.test.ts

@@ -1,6 +1,11 @@
 import { describe, expect, it } from "vitest";
 import { buildDefaultBillingAlerts } from "~/services/billingAlertsDefaults.server";
-import { ABSOLUTE_ALERT_BASE_CENTS } from "~/components/billing/billingAlertsFormat";
+import {
+  ABSOLUTE_ALERT_BASE_CENTS,
+  getAlertPreviewLimitCents,
+  storedAlertsToThresholds,
+  type BillingAlertsFormData,
+} from "~/components/billing/billingAlertsFormat";
 
 describe("buildDefaultBillingAlerts", () => {
   it("uses the absolute dollar base so alert levels read as dollar thresholds", () => {
@@ -23,4 +28,26 @@ describe("buildDefaultBillingAlerts", () => {
     first.alertLevels.push(9999);
     expect(second.alertLevels).toEqual([5, 100, 500, 1000, 2500]);
   });
+
+  it("does not treat the default absolute-dollar payload as percentages of the limit", () => {
+    const defaults = buildDefaultBillingAlerts();
+    const alerts: BillingAlertsFormData = {
+      amount: defaults.amount / 100, // API cents -> stored dollars ($1 base)
+      emails: defaults.emails ?? [],
+      alertLevels: [...(defaults.alertLevels ?? [])],
+    };
+
+    // Absolute (none) mode: levels stay dollar thresholds, not percentages of the limit.
+    expect(storedAlertsToThresholds(alerts, "none", 50_000, 50_000)).toEqual([
+      5, 100, 500, 1000, 2500,
+    ]);
+
+    // With the real percentage mode (false for absolute alerts) the preview must not fall
+    // into the percentage branch, even though a level like 100 looks like a percent. Here a
+    // limit matches the $1 base, so inferring percentages would wrongly return the limit
+    // (50000) instead of the absolute base (100).
+    expect(getAlertPreviewLimitCents(alerts, 50_000, ABSOLUTE_ALERT_BASE_CENTS, false)).toBe(
+      ABSOLUTE_ALERT_BASE_CENTS
+    );
+  });
 });