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

62-87: Consolidate horizontal scrolling to avoid nested scrollbars

The new overflow-x-auto wrapper (Line 62) plus overflow: 'auto' in customStyle (Line 74) means both the parent and the <pre> can create horizontal scrollbars. This can produce awkward nested scrolling for wide code blocks.

You can keep the intended behavior (horizontal scroll at the wrapper, vertical scroll inside) by scoping overflow on the highlighter to vertical only:

         customStyle={{
           background: 'transparent',
           padding: '1em',
           border: 0,
           boxShadow: 'none',
           margin: 0,
           fontSize: '0.875rem',
           maxHeight: props.maxHeight,
-          overflow: 'auto',
+          overflowY: 'auto',
           whiteSpace: 'pre-wrap',
           wordBreak: 'break-word',

This keeps vertical scrolling for tall snippets while the new wrapper cleanly handles horizontal overflow without double scrollbars.

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

131-144: Simplify the onClick handler.

The arrow function wrapper is unnecessary since handleDisableTestMode takes no arguments.

Apply this diff:

-              onClick={() => handleDisableTestMode()}
+              onClick={handleDisableTestMode}

---

184-206: Simplify onClick handlers.

Both arrow function wrappers are unnecessary since the handlers take no arguments.

Apply this diff:

-                  onClick={() => handleEnableTestMode()}
+                  onClick={handleEnableTestMode}

-                  onClick={() => setupPayments()}
+                  onClick={setupPayments}

packages/stack-ui/src/components/ui/dropdown-menu.tsx (1)

84-87: Inconsistent indentation in className attribute.

The className attribute has unusual indentation that doesn't match the pattern used elsewhere in this file (e.g., DropdownMenuContent on lines 102-106).

   <DropdownMenuPrimitive.SubContent
     ref={ref}
-      className={cn(
-        "stack-scope z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border/50 bg-popover p-1.5 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
+    className={cn(
+      "stack-scope z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border/50 bg-popover p-1.5 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
     {...props}

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

19-35: Consider extracting LabelWithInfo to a shared location.

This component is duplicated in page-client-catalogs-view.tsx. Consider extracting it to components.tsx or a shared UI utilities file to avoid duplication.

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

572-590: Inconsistent deletion pattern between products and items.

Products use typedFromEntries/typedEntries to rebuild the entire products object (line 446-449), but items use the simpler path notation payments.items.${itemToDelete.id}: null (line 582). While both work, the inconsistency may cause confusion. Consider using the same approach for both, or document why they differ.

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

128-144: LabelWithInfo is duplicated across files.

This component is identical to the one in product-price-row.tsx. Extract it to components.tsx alongside OrSeparator, SectionHeading, and IntervalPopover to avoid duplication.

---

524-588: The generateComprehensivePrompt function is quite large.

At ~250 lines, this prompt generation function is substantial. Consider extracting it to a separate utility file (e.g., prompt-generator.ts) for better maintainability, especially if the prompt format evolves over time.

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/list-section.tsx (2)

33-45: Header refactor & sticky layout look good; tooltip disabled prop is redundant

The sticky header, spacing, and typography updates look clean and consistent with the rest of the dashboard. One small simplification: since SimpleTooltip is only rendered when titleTooltip is truthy ({titleTooltip && (...)}), passing disabled={!titleTooltip} is effectively redundant. You can drop disabled here, or repurpose it only if you need to explicitly disable the tooltip even when a non-empty string is present.

Also applies to: 90-90

---

47-72: Search input UX is solid; consider minor accessibility improvements

The search control’s layout, width animation, and transition choices look good and align with the “snappy, hover-exit only” guideline (transition-all + hover:transition-none). To tighten accessibility:

• Use type="search" instead of type="text" for better semantics and mobile keyboards.
• Provide an explicit accessible name for the input (placeholder alone is not ideal for screen readers).
• Mark the search icon decorative so it’s ignored by assistive tech.

For example:

-            {onSearchChange && (
+            {onSearchChange && (
               <div className={cn(
                 "relative flex items-center transition-all duration-150 hover:transition-none",
                 isSearchFocused ? "w-[180px]" : "w-[150px]"
               )}>
-                <div className="absolute left-3 flex items-center justify-center pointer-events-none z-10">
-                  <Search className="h-4 w-4 text-foreground/60" />
+                <div className="absolute left-3 flex items-center justify-center pointer-events-none z-10">
+                  <Search
+                    className="h-4 w-4 text-foreground/60"
+                    aria-hidden="true"
+                    focusable="false"
+                  />
                 </div>
-                <input
-                  type="text"
+                <input
+                  type="search"
+                  aria-label={searchPlaceholder}
                   placeholder={searchPlaceholder}

(Alternatively, you could wire this up to an external <label> instead of using aria-label.)

apps/dashboard/src/components/payments/item-dialog.tsx (1)

186-209: Customer type select wiring is fine; consider tightening the value typing

The select wiring (value, disabled, onValueChange) and the updated styling/helper text look good. If you want to avoid the as typeof customerType cast, you could narrow the callback parameter instead, for example:

onValueChange={(value: 'user' | 'team' | 'custom') => setCustomerType(value)}

This keeps type safety localized to the handler without relying on a cast.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: CR
Repo: stack-auth/stack-auth PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T21:21:39.142Z
Learning: Applies to **/*.{ts,tsx} : Keep hover/click transitions snappy and fast. Don't delay the action with a pre-transition; apply transitions after the action instead

apps/dashboard/src/components/data-table/payment-product-table.tsx (1)

107-115: Hook called inside event handler - violates Rules of Hooks.

project.useConfig() at line 108 is called inside an async onClick handler. Hooks must be called unconditionally at the top level of a component, not inside callbacks.

Move the hook call to component level:

 function ActionsCell({ product }: { product: PaymentProduct }) {
   const [isEditOpen, setIsEditOpen] = useState(false);
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const stackAdminApp = useAdminApp();
   const project = stackAdminApp.useProject();
+  const config = project.useConfig();

   return (
     <>
       ...
       <ActionDialog
         ...
         okButton={{
           label: "Delete",
           onClick: async () => {
-            const config = project.useConfig();
             const updatedProducts = typedFromEntries(
               typedEntries(config.payments.products)
                 .filter(([productId]) => productId !== product.id)
             );
             await project.updateConfig({ "payments.products": updatedProducts });
             toast({ title: "Product deleted" });
           },
         }}
       />
     </>
   );
 }

apps/dashboard/src/components/payments/item-dialog.tsx (1)

226-236: Wrap async validateAndSave with runAsynchronouslyWithAlert.

This issue was flagged in a previous review. The async validateAndSave is still called directly from onClick, creating unhandled promise rejections on failure.

+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";

 <Button
-  onClick={validateAndSave}
+  onClick={() => runAsynchronouslyWithAlert(validateAndSave)}
   ...
 >

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

73-87: Add aria-label to the icon-only button for accessibility.

This was flagged in a previous review. The button renders only a <Plus> icon with no accessible label, making it unidentifiable for screen reader users.

Add an addButtonAriaLabel prop to ListSectionProps and apply it:

 export type ListSectionProps = {
   title: React.ReactNode,
   titleTooltip?: string,
   onAddClick?: () => void,
+  addButtonAriaLabel?: string,
   // ...
 };

 <Button
   variant="ghost"
   size="sm"
   className={...}
   onClick={onAddClick}
+  aria-label={addButtonAriaLabel}
 >
   <Plus className="h-4 w-4" />
 </Button>

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

1818-1818: Simplify callback storage.

The arrow function wrapper () => onCreated is the setState updater form, which works but is unconventional for this use case. Since onCreated is never undefined in this context, store it directly.

-    setOnItemCreatedCallback(() => onCreated);
+    setOnItemCreatedCallback(onCreated);

This is clearer and more conventional.

---

1198-1198: Missing error handling wrapper for async onClick.

While handleSaveEdit has internal error handling for ValidationError, any other errors would be re-thrown and need to be caught by runAsynchronouslyWithAlert.

Apply this diff:

-              onClick={async () => { await handleSaveEdit(); }}
+              onClick={() => runAsynchronouslyWithAlert(handleSaveEdit)}

Don't forget to import runAsynchronouslyWithAlert from @stackframe/stack-shared/dist/utils/promises.

Based on coding guidelines and learnings.

---

1341-1343: Missing error handling wrapper for async onClick.

The async onClick handler needs runAsynchronouslyWithAlert to properly handle errors.

Apply this diff:

         okButton={{
           label: "Delete",
-          onClick: async () => {
+          onClick: () => runAsynchronouslyWithAlert(async () => {
             await onDelete(id);
             setIsEditing(false);
-          }
+          })
         }}

Based on coding guidelines and learnings.

---

1724-1728: Remove empty useEffect.

This effect has an empty body and serves no purpose. The comment suggests it's a safeguard, but re-rendering is already handled by the productsKey dependency in the useMemo above.

-  // Watch for changes in products and force re-render if needed
-  useEffect(() => {
-    // This effect will run whenever paymentsConfig.products changes
-    // The productsKey dependency in useMemo above should handle most cases,
-    // but this ensures we catch any edge cases
-  }, [productsKey]);

---

1706-1710: Remove unused productIds variable.

The productIds variable is computed but never used. Only productsKey (lines 1714-1721) is referenced in the code.

-  const productIds = Object.entries(paymentsConfig.products)
-    .filter(([, product]) => product != null)
-    .map(([id]) => id)
-    .sort()
-    .join(',');
-

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

443-453: CRITICAL: Hook violation and missing error handling in async onClick.

This code has two critical issues:

1. Hook called inside event handler (line 445): project.useConfig() is called inside the async onClick handler, violating React's Rules of Hooks. Hooks must be called unconditionally at the top level.

2. Missing error handling: The async onClick handler needs runAsynchronouslyWithAlert to properly handle errors and show alerts to users.

Apply this diff to fix both issues:

 function ProductsList({
   ...
 }: ProductsListProps) {
   const stackAdminApp = useAdminApp();
   const project = stackAdminApp.useProject();
+  const config = project.useConfig();
   const [searchQuery, setSearchQuery] = useState("");
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [productToDelete, setProductToDelete] = useState<{ id: string, displayName: string } | null>(null);
   ...
       okButton={{
         label: "Delete",
-        onClick: async () => {
+        onClick: () => runAsynchronouslyWithAlert(async () => {
           if (!productToDelete) return;
-          const config = project.useConfig();
           const updatedProducts = typedFromEntries(
             typedEntries(config.payments.products)
               .filter(([productId]) => productId !== productToDelete.id)
           );
           await project.updateConfig({ "payments.products": updatedProducts });
           toast({ title: "Product deleted" });
           setProductToDelete(null);
-        }
+        })
       }}

Based on coding guidelines and learnings.

---

580-585: Missing error handling in async onClick.

The async onClick handler needs runAsynchronouslyWithAlert to properly handle errors and show alerts to users.

Apply this diff:

       okButton={{
         label: "Delete",
-        onClick: async () => {
+        onClick: () => runAsynchronouslyWithAlert(async () => {
           if (!itemToDelete) return;
           await project.updateConfig({ [`payments.items.${itemToDelete.id}`]: null });
           toast({ title: "Item deleted" });
           setItemToDelete(null);
-        }
+        })
       }}

Based on coding guidelines and learnings.

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

62-87: Avoid nested scrollbars + clarify “wrap vs horizontal scroll” behavior.

Right now the outer overflow-x-auto (Line 62) + inner overflow: 'auto' (Line 74) can produce nested/duplicated scrollbars, and whiteSpace: 'pre-wrap' + wordBreak: 'break-word' (Lines 75-76) + wrapLongLines (Line 83) may make horizontal scrolling effectively unreachable (everything wraps). Consider delegating horizontal scrolling to the wrapper and keeping vertical scrolling on the highlighter:

           customStyle={{
             background: 'transparent',
             padding: '1em',
             border: 0,
             boxShadow: 'none',
             margin: 0,
             fontSize: '0.875rem',
             maxHeight: props.maxHeight,
-            overflow: 'auto',
+            overflowY: 'auto',
+            overflowX: 'visible',
             whiteSpace: 'pre-wrap',
             wordBreak: 'break-word',
             ...(props.compact && {
               padding: '0.75em',
               fontSize: '0.75rem',
             }),
           }}

Please double-check react-syntax-highlighter@15.6.1 semantics: whether wrapLongLines already applies the whiteSpace/wordBreak styles (making Lines 75-76 redundant), and whether the desired UX is “wrap by default” or “preserve horizontal scroll for code fidelity.”

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

140-145: Optional: Redundant pointer-events-none class.

The pointer-events-none class applied when readOnly is true is redundant since the disabled prop on the PopoverTrigger (which forwards to the button via asChild) already prevents user interaction. While harmless, you can simplify the conditional class application.

-        <button type="button" className={cn(triggerClasses, readOnly && "cursor-default pointer-events-none")}>
+        <button type="button" className={cn(triggerClasses, readOnly && "cursor-default")}>

---

184-199: Strengthen input validation to handle edge cases.

The current validation at line 195 doesn't explicitly check for NaN, which can occur when the input is cleared or contains non-numeric characters. While the > 0 check implicitly prevents NaN from being processed (since NaN > 0 is false), the code would be more robust and maintainable with an explicit check.

             <Input
               type="number"
               min={1}
               className={cn(
                 "w-20 h-9 text-sm",
                 "rounded-lg border border-border/60 dark:border-foreground/[0.1]",
                 "bg-background dark:bg-[hsl(240,10%,10%)]"
               )}
               value={effectiveSelection === 'custom' ? count : 1}
               onChange={(e) => {
                 const val = parseInt(e.target.value, 10);
-                if (val > 0) {
+                if (!isNaN(val) && val > 0) {
                     applyCustom(val, effectiveUnit);
                 }
               }}
             />

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

128-144: Extract duplicated LabelWithInfo component to shared location.

The LabelWithInfo component is duplicated between this file and product-price-row.tsx. Extract it to a shared location to follow DRY principles.

Consider moving it to a shared components directory:

// apps/dashboard/src/components/label-with-info.tsx
import { Label, SimpleTooltip } from "@stackframe/stack-ui";
import { Info } from "lucide-react";

export function LabelWithInfo({ children, tooltip }: { children: React.ReactNode, tooltip?: string }) {
  return (
    <div className="flex items-center gap-1.5">
      <Label className="text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground">
        {children}
      </Label>
      {tooltip && (
        <SimpleTooltip tooltip={tooltip}>
          <Info className="h-3 w-3 text-muted-foreground/60 cursor-help" />
        </SimpleTooltip>
      )}
    </div>
  );
}

Then import from both files.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: N2D4
Repo: stack-auth/stack-auth PR: 943
File: examples/convex/app/action/page.tsx:23-28
Timestamp: 2025-10-11T04:13:19.308Z
Learning: In the stack-auth codebase, use `runAsynchronouslyWithAlert` from `stackframe/stack-shared/dist/utils/promises` for async button click handlers and form submissions instead of manual try/catch blocks. This utility automatically handles errors and shows alerts to users.

Learnt from: CR
Repo: stack-auth/stack-auth PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-04T18:03:49.984Z
Learning: Applies to **/*.{ts,tsx} : NEVER try-catch-all, NEVER void a promise, and NEVER .catch(console.error); use loading indicators and async callbacks instead, or use runAsynchronously/runAsynchronouslyWithAlert for error handling

Learnt from: CR
Repo: stack-auth/stack-auth PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-04T18:03:49.984Z
Learning: Applies to **/*.{ts,tsx} : For blocking alerts and errors, never use toast; use alerts instead as they are less easily missed by the user

Learnt from: CR
Repo: stack-auth/stack-auth PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-04T18:03:49.984Z
Learning: Applies to **/*.{ts,tsx} : Always add new E2E tests when changing the API or SDK interface

Learnt from: CR
Repo: stack-auth/stack-auth PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-04T18:03:49.984Z
Learning: Applies to apps/**/*.tsx : Check existing apps for inspiration when implementing new apps or pages; update apps-frontend.tsx and apps-config.ts to add new apps

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-list-view.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-list-view.tsx
index f6a96b47..0064a6cc 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-list-view.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-list-view.tsx
@@ -492,15 +492,17 @@ function ItemsList({
   // Sort items by customer type, then by ID
   const sortedItems = useMemo(() => {
     const customerTypePriority = { user: 1, team: 2, custom: 3 };
-    return Object.entries(items).sort(([aId, aItem]: [string, any], [bId, bItem]: [string, any]) => {
-      const priorityA = customerTypePriority[aItem.customerType as keyof typeof customerTypePriority] || 4;
-      const priorityB = customerTypePriority[bItem.customerType as keyof typeof customerTypePriority] || 4;
-      if (priorityA !== priorityB) {
-        return priorityA - priorityB;
-      }
-      // If same customer type, sort by ID
-      return stringCompare(aId, bId);
-    });
+    return Object.entries(items)
+      .filter(([, item]) => item != null)
+      .sort(([aId, aItem]: [string, any], [bId, bItem]: [string, any]) => {
+        const priorityA = customerTypePriority[aItem.customerType as keyof typeof customerTypePriority] || 4;
+        const priorityB = customerTypePriority[bItem.customerType as keyof typeof customerTypePriority] || 4;
+        if (priorityA !== priorityB) {
+          return priorityA - priorityB;
+        }
+        // If same customer type, sort by ID
+        return stringCompare(aId, bId);
+      });
   }, [items]);
 
   // Filter items based on search query
@@ -619,8 +621,9 @@ export default function PageClient() {
 
   const itemRefs = useMemo(() => {
     const refs = Object.fromEntries(
-      Object.keys(paymentsConfig.items)
-        .map(id => [id, React.createRef<HTMLDivElement>()])
+      Object.entries(paymentsConfig.items)
+        .filter(([, item]) => item != null)
+        .map(([id]) => [id, React.createRef<HTMLDivElement>()])
     );
     return refs;
   }, [paymentsConfig.items]);

Analysis

TypeError when sorting items after deletion

What fails: ItemsList component in page-client-list-view.tsx crashes when rendering after an item is deleted, because the sortedItems useMemo tries to access customerType property on null values.

How to reproduce:

1. Navigate to the payments/products page
2. Create an item (has a customerType property)
3. Delete the item (sets it to null in the config via updateConfig({ ['payments.items.{id}']: null }))
4. Observe the component re-render

Result: TypeError: Cannot read properties of null (reading 'customerType') at line 495 where the sort function accesses aItem.customerType on a null item

Expected: Items list should gracefully handle and skip null items during sorting, consistent with how the products sorting code handles deleted products

Root cause: The sortedItems useMemo at lines 492-504 did not filter out null items before sorting, unlike the similar productRefs code at line 614 which correctly filters with .filter(([, product]) => product != null)

Fix applied:

• Added .filter(([, item]) => item != null) after Object.entries(items) in the sortedItems useMemo (line 495)
• Applied the same null filter to itemRefs useMemo (line 623) for consistency with productRefs pattern