docs/src/components/api/auth-panel.tsx (1)

117-124: Strengthen type definitions for header configuration.

The stackAuthHeaders array uses properties (hideWhenProjectSelected, isSensitive) that aren't in the implicit type, requiring (header as any) casts later. Define an explicit type to improve safety.

+type StackAuthHeader = {
+  key: string;
+  label: string;
+  placeholder: string;
+  required: boolean;
+  hideWhenProjectSelected?: boolean;
+  isSensitive?: boolean;
+};

-  const stackAuthHeaders = [
+  const stackAuthHeaders: StackAuthHeader[] = [
     { key: 'X-Stack-Access-Type', label: 'Access Type', placeholder: 'client, server, or admin', required: true },
     ...
   ];

This eliminates the need for (header as any) casts on lines 256, 262, 422, and 428.

docs/src/components/api/enhanced-api-page.tsx (2)

423-428: Consider extracting duplicated base URL logic.

The base URL resolution logic is duplicated in generateCurlCommand, generateJavaScriptCode, and generatePythonCode. Consider extracting to a shared memoized value.

+  const computedBaseUrl = useMemo(() => {
+    const defaultBaseUrl = spec?.servers?.[0]?.url || '';
+    return process.env.NEXT_PUBLIC_STACK_API_URL 
+      ? process.env.NEXT_PUBLIC_STACK_API_URL + '/api/v1'
+      : defaultBaseUrl;
+  }, [spec]);

   const generateCurlCommand = useCallback(() => {
-    // Use local API URL in development, production URL otherwise
-    const defaultBaseUrl = spec.servers?.[0]?.url || '';
-    const baseUrl = process.env.NEXT_PUBLIC_STACK_API_URL 
-      ? process.env.NEXT_PUBLIC_STACK_API_URL + '/api/v1'
-      : defaultBaseUrl;
-    let url = baseUrl + path;
+    let url = computedBaseUrl + path;

---

371-375: Avoid .catch(console.error) pattern.

Per coding guidelines, avoid .catch(console.error). The executeRequest function already handles errors internally, so the outer catch is redundant.

             onExecute={() => {
-              // eslint-disable-next-line no-restricted-syntax
-              executeRequest(operation, path, method)
-                .catch(error => console.error('Failed to execute request:', error));
+              runAsynchronouslyWithAlert(() => executeRequest(operation, path, method));
             }}

Or if executeRequest already handles all errors gracefully, the catch can be removed entirely.

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-12-04T18:03:49.961Z
Learning: Applies to {.env*,**/*.{ts,tsx,js}} : Prefix environment variables with STACK_ (or NEXT_PUBLIC_STACK_ if public) so changes are picked up by Turborepo and improves readability

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.

docs/src/components/api/auth-panel.tsx (1)

53-57: Conditional hook call still violates Rules of Hooks.

Line 55 conditionally calls useOwnedProjects() using optional chaining (internalUser?.useOwnedProjects()), which still violates React's Rules of Hooks. Hooks must be called unconditionally at the top level.

Consider checking if useOwnedProjects can be imported as a separate hook and called unconditionally, or ensure it's called at the top level without conditional access.

docs/src/components/api/auth-panel.tsx (1)

328-330: Consider consistent wording across desktop and mobile.

Line 330 shows "via project selection" for desktop, while line 497 shows "via project" for mobile. Consider using the same text for consistency, though this is a minor UX detail.

Apply this diff if you prefer consistency:

-                {selectedProjectId && ' (via project)'}
+                {selectedProjectId && ' (via project selection)'}

Also applies to: 496-498

docs/src/components/api/enhanced-api-page.tsx (1)

227-230: Consider extracting base URL resolution logic.

The base URL resolution logic is duplicated across four locations (lines 227-230, 416-421, 467-471, 521-525). Extracting this into a helper function would improve maintainability.

Add a helper function:

const getBaseUrl = useCallback(() => {
  const defaultBaseUrl = spec?.servers?.[0]?.url || '';
  const localApiUrl = process.env.NEXT_PUBLIC_STACK_API_URL;
  return localApiUrl ? localApiUrl + '/api/v1' : defaultBaseUrl;
}, [spec]);

Then replace all four occurrences with const baseUrl = getBaseUrl();

Also applies to: 416-421, 467-471, 521-525

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

docs/src/components/api/auth-panel.tsx (1)

53-57: Conditional hook call violates Rules of Hooks.

Line 55 calls useOwnedProjects() conditionally via optional chaining (internalUser?.useOwnedProjects()). If internalUser is null on one render and non-null on the next, the hook call order changes, violating React's Rules of Hooks.

Refactor to call the hook unconditionally:

-  const user = useUser();
-  const internalUser = isInternalUser(user) ? user : null;
-  const ownedProjectsResult = internalUser?.useOwnedProjects();
-  const projects = useMemo<AdminOwnedProject[]>(() => ownedProjectsResult ?? [], [ownedProjectsResult]);
-  const hasOwnedProjects = Boolean(internalUser);
+  const user = useUser();
+  const internalUser = isInternalUser(user) ? user : null;
+  // Always call the hook unconditionally - pass internalUser to satisfy hook rules
+  const ownedProjectsResult = internalUser ? internalUser.useOwnedProjects() : null;
+  const projects = useMemo<AdminOwnedProject[]>(() => ownedProjectsResult ?? [], [ownedProjectsResult]);
+  const hasOwnedProjects = Boolean(internalUser);

Actually, the issue persists with ternary too. The hook must be called at the top level unconditionally. Consider restructuring by either:

1. Always calling useOwnedProjects from a stable source (if it's a standalone hook)
2. Creating a child component that only renders when internalUser exists, which can safely call the hook

docs/src/components/api/auth-panel.tsx (3)

142-143: Dead code: ternary always returns the same value.

The topPosition calculation always evaluates to 'top-0' regardless of the condition.

-  const topPosition = isHomePage && isScrolled ? 'top-0' : 'top-0';
+  const topPosition = 'top-0';

---

149-169: Consider using functional update for consistency.

The handleProjectSelect spreads headers directly while the useEffect uses functional updates. For consistency and to avoid potential stale closure issues if this function is ever used in callbacks:

-    const newHeaders = {
-      ...headers,
-      'X-Stack-Access-Type': 'admin',
-      'X-Stack-Project-Id': projectId,
-      'X-Stack-Admin-Access-Token': '', // Will be populated by refresh effect
-      'X-Stack-Access-Token': '', // Not used for admin access
-      'X-Stack-Publishable-Client-Key': '', // Not needed for admin auth
-      'X-Stack-Secret-Server-Key': '', // Not needed for admin auth
-    };
-
-    updateSharedHeaders(newHeaders);
+    updateSharedHeaders(prevHeaders => ({
+      ...prevHeaders,
+      'X-Stack-Access-Type': 'admin',
+      'X-Stack-Project-Id': projectId,
+      'X-Stack-Admin-Access-Token': '', // Will be populated by refresh effect
+      'X-Stack-Access-Token': '', // Not used for admin access
+      'X-Stack-Publishable-Client-Key': '', // Not needed for admin auth
+      'X-Stack-Secret-Server-Key': '', // Not needed for admin auth
+    }));

---

304-304: Consider functional update for input onChange handlers.

For consistency with the useEffect pattern and to ensure the latest headers are used:

-                    onChange={(e) => updateSharedHeaders({ ...headers, [header.key]: e.target.value })}
+                    onChange={(e) => updateSharedHeaders(prev => ({ ...prev, [header.key]: e.target.value }))}

Same applies to line 470 (mobile input).

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