apps/dashboard/src/components/code-block.tsx (1)

50-50: LGTM with optional readability suggestion.

The conditional padding and border logic is correct and handles all prop combinations appropriately.

For improved readability, you could extract the padding logic into a helper function:

const getHeaderPadding = () => {
  if (props.noSeparator) return "pt-1 pb-0";
  return props.compact ? "py-1" : "py-2";
};

Then use it as:

-<div className={cn("text-muted-foreground font-medium pl-4 pr-2 text-sm flex justify-between items-center", props.compact && !props.noSeparator && "py-1", !props.compact && !props.noSeparator && "py-2", props.noSeparator && "pt-1 pb-0", !props.noSeparator && "border-b")}>
+<div className={cn("text-muted-foreground font-medium pl-4 pr-2 text-sm flex justify-between items-center", getHeaderPadding(), !props.noSeparator && "border-b")}>

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/create-catalog-dialog.tsx (1)

74-76: Sanitization vs validation mismatch (underscores).

You keep underscores in onChange but validation rejects them (regex only allows a–z, 0–9, hyphen). Align both; prefer the shared sanitizer for consistency.

Apply:

-import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, SimpleTooltip, Typography } from "@stackframe/stack-ui";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, SimpleTooltip, Typography } from "@stackframe/stack-ui";
+import { sanitizeId } from "./utils";
@@
-              onChange={(e) => {
-                const value = e.target.value.toLowerCase().replace(/[^a-z0-9_\-]/g, '-');
-                setCatalogId(value);
-                setErrors(prev => ({ ...prev, id: undefined }));
-              }}
+              onChange={(e) => {
+                setCatalogId(sanitizeId(e.target.value));
+                setErrors(prev => ({ ...prev, id: undefined }));
+              }}

If underscores are intended, update the validation to /^[a-z0-9_-]+$/ and error text to mention underscores. Based on guidelines.

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/layout.tsx (1)

38-40: Add async state and error handling for test mode + onboarding.

Disabling test mode and starting onboarding lack error handling and allow double clicks.

• Disable CTA while awaiting, and catch failures with inline messaging (not toast for blocking flows).
• Example:

-const handleDisableTestMode = async () => {
-  await project.updateConfig({ "payments.testMode": false });
-};
+const [disabling, setDisabling] = useState(false);
+const handleDisableTestMode = async () => {
+  try {
+    setDisabling(true);
+    await project.updateConfig({ "payments.testMode": false });
+  } catch (e) {
+    // TODO: surface inline alert/banner here
+  } finally {
+    setDisabling(false);
+  }
+};
@@
-  <Button
+  <Button
     size="lg"
     variant="outline"
-    onClick={() => handleDisableTestMode()}
+    onClick={() => handleDisableTestMode()}
+    disabled={disabling}
   >

Similarly wrap setupPayments() with try/catch and disable its buttons during the request. As per coding guidelines.

Also applies to: 83-111, 140-141

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/product-price-row.tsx (4)

151-163: Avoid saving on every keystroke; debounce amount updates.

Current onChange calls savePriceUpdate() on each character, which can thrash parent state or trigger extra work.

Apply a small debounce:

+  const amountSaveTimer = useRef<number | null>(null);
@@
-                      onChange={(e) => {
+                      onChange={(e) => {
                         const v = e.target.value;
                         if (v === '' || /^\d*(?:\.?\d{0,2})?$/.test(v)) setAmount(v);
-                        savePriceUpdate();
+                        if (amountSaveTimer.current) window.clearTimeout(amountSaveTimer.current);
+                        amountSaveTimer.current = window.setTimeout(() => {
+                          savePriceUpdate();
+                        }, 250);
                       }}

---

67-69: Trigger label can be stale during edits.

intervalText is derived from price.interval; while editing, the trigger shows the old label until parent updates.

Compute from local state:

-const intervalText = intervalLabel(price.interval);
+const intervalText = intervalSelection === 'one-time'
+  ? null
+  : intervalLabel([intervalSelection === 'custom' ? intervalCount : 1, priceInterval ?? 'month'] as DayInterval);

Also applies to: 175-190

---

295-301: Consistent currency formatting in view mode.

$${+amount} may render 9.9 instead of 9.90, diverging from saved normalization.

Format using the source price or toFixed:

-  <div className="text-xl font-semibold tabular-nums">
-    {isFree ? 'Free' : `$${niceAmount}`}
-  </div>
+  <div className="text-xl font-semibold tabular-nums">
+    {isFree ? 'Free' : `$${(+price.USD || 0).toFixed(2).replace(/\.00$/, '')}`}
+  </div>

---

20-30: Unused prop: existingPriceIds.

Prop is not referenced. If not needed, drop it to reduce API surface.

Would you like me to remove it and update call sites?

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-list-view.tsx (1)

180-221: Throttle scroll/resize path updates (perf).

updatePath runs on every scroll/resize event; add rAF coalescing to avoid jank in large lists.

Apply:

   useEffect(() => {
     if (!fromRef.current || !toRef.current || !containerRef.current) return;
-
-    const updatePath = () => {
+    let raf = 0;
+    const updatePathNow = () => {
       const container = containerRef.current;
       const from = fromRef.current;
       const to = toRef.current;
@@
       setPath(pathStr);
       setMidpoint({ x: midX, y: midY });
     };
-
-    updatePath();
-    window.addEventListener('resize', updatePath);
-    window.addEventListener('scroll', updatePath, true);
+    const schedule = () => {
+      if (raf) cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(updatePathNow);
+    };
+    schedule();
+    window.addEventListener('resize', schedule);
+    window.addEventListener('scroll', schedule, true);
 
     return () => {
-      window.removeEventListener('resize', updatePath);
-      window.removeEventListener('scroll', updatePath, true);
+      if (raf) cancelAnimationFrame(raf);
+      window.removeEventListener('resize', schedule);
+      window.removeEventListener('scroll', schedule, true);
     };
   }, [fromRef, toRef, containerRef]);

Keeps transitions snappy per animation guidance. As per coding guidelines.

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/components.tsx (1)

94-105: Prefer Map over Record for labels (project TS guideline).

Use ES6 Map for label lookup and access with .get().

-  const buttonLabels: Record<DayInterval[1], string> = useDurationLabels ? {
-    day: '1 day',
-    week: '1 week',
-    month: '1 month',
-    year: '1 year',
-  } : {
-    day: 'daily',
-    week: 'weekly',
-    month: 'monthly',
-    year: 'yearly',
-  };
+  const buttonLabels = new Map<DayInterval[1], string>(
+    useDurationLabels
+      ? [['day','1 day'],['week','1 week'],['month','1 month'],['year','1 year']]
+      : [['day','daily'],['week','weekly'],['month','monthly'],['year','yearly']]
+  );
@@
-              {buttonLabels[unitOption]}
+              {buttonLabels.get(unitOption)}

Also applies to: 173-174

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/utils.ts (2)

39-45: Use Map for unit suffix lookup.

Align with project guidance and avoid object key drift.

-  const map: Record<DayInterval[1], string> = { day: 'd', week: 'wk', month: 'mo', year: 'yr' };
-  const suffix = map[unit];
+  const map = new Map<DayInterval[1], string>([['day','d'],['week','wk'],['month','mo'],['year','yr']]);
+  const suffix = map.get(unit)!;

---

128-130: Low-entropy IDs; add randomness to reduce collision risk.

Two calls in the same ms can collide. Mix time and random.

-export function generateUniqueId(prefix: string): string {
-  return `${prefix}-${Date.now().toString(36).slice(2, 8)}`;
-}
+export function generateUniqueId(prefix: string): string {
+  const t = Date.now().toString(36);
+  const r = Math.random().toString(36).slice(2, 6);
+  return `${prefix}-${t.slice(-6)}${r}`;
+}

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx (1)

719-723: Animation duration is long; prefer snappy transitions.

600ms on color transitions feels sluggish in UI. Reduce to ~150–250ms.

-    <div className={cn("flex h-full flex-col rounded-3xl border border-border bg-background/95 shadow-lg transition-colors duration-600",
+    <div className={cn("flex h-full flex-col rounded-3xl border border-border bg-background/95 shadow-lg transition-colors duration-200",

As per coding guidelines

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro