apps/hosted-components/src/routes/__root.tsx (1)

115-117: Render an explicit loading state instead of a blank screen.

Line [116] returns an empty fragment while initialization is in progress; use a visible loading UI so state transitions are explicit.

Based on learnings: "When building frontend code, always carefully deal with loading and error states. Be very explicit with these."

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/hosted-components/src/routes/__root.tsx` around lines 115 - 117, The
early return for projectId (if (projectId === undefined) return <></>;) shows a
blank screen; replace it with an explicit loading UI so users see progress. In
the if (projectId === undefined) branch in __root.tsx, return a visible loading
state (for example a <Loading /> component or a simple accessible element like a
div with role="status" and a spinner/text) instead of an empty fragment,
ensuring any existing Loading component or CSS spinner is used for consistency
with the app.

Configuration used: defaults

Review profile: CHILL

Plan: Pro

apps/hosted-components/package.json (1)

7-7: ⚠️ Potential issue | 🟠 Major

Use the same default port as the rest of this app.

This still defaults Vite to 8109, while apps/hosted-components/src/routes/__root.tsx points users to <projectId>.localhost:8105. The default dev flow and the in-app guidance will disagree until these match.

Proposed fix

-    "dev": "vite dev --port ${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}09",
+    "dev": "vite dev --port ${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}05",

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/hosted-components/package.json` at line 7, The dev script in
package.json currently defaults Vite to port 8109 via "dev": "vite dev --port
${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}09"; change the default to match the rest of
the app (8105) by updating the dev script to use the same fallback prefix so
Vite will start on 8105 when NEXT_PUBLIC_STACK_PORT_PREFIX is not set; edit the
"dev" script entry (symbol: "dev") and adjust the fallback port expression
(symbol: NEXT_PUBLIC_STACK_PORT_PREFIX) so the resolved default is 8105 instead
of 8109.

apps/hosted-components/src/routes/__root.tsx (1)

14-24: Guard getProjectId() against SSR callers.

This route module is loaded on the server too, and getProjectId() is exported. Any future SSR/test caller will crash on window. Make the browser-only assumption explicit inside the helper.

Suggested change

 export function getProjectId(): string | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
   // Extract from subdomain: <projectId>.built-with-stack-auth.com
   // Also works with <projectId>.localhost for local dev
   const hostname = window.location.hostname;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/hosted-components/src/routes/__root.tsx` around lines 14 - 24,
getProjectId() currently assumes a browser environment and directly accesses
window, which will crash during SSR/testing; update the function to first guard
for non-browser callers by checking typeof window === "undefined" (and/or typeof
window.location === "undefined") and returning null in that case, then continue
with the existing hostname parsing logic (hostname.split and parts[0]) when
running in the browser so server-side imports won't throw.

apps/hosted-components/vite.config.ts (2)

72-75: Validate the port prefix instead of relying on ||.

|| "81" treats '' as unset, and a malformed prefix still flows into Number(...) as NaN. Since this is config input, prefer nullish handling plus an explicit validation error.

Suggested diff

+const portPrefix = process.env.NEXT_PUBLIC_STACK_PORT_PREFIX
+if (portPrefix !== undefined && !/^\d+$/.test(portPrefix)) {
+  throw new Error('NEXT_PUBLIC_STACK_PORT_PREFIX must contain only digits')
+}
+
 export default defineConfig({
   server: {
-    port: Number((process.env.NEXT_PUBLIC_STACK_PORT_PREFIX || "81") + "09"),
+    port: Number(`${portPrefix ?? '81'}09`),
   },

As per coding guidelines, "Unless very clearly equivalent from types, prefer explicit null/undefinedness checks over boolean checks" and "Fail early, fail loud. Fail fast with an error instead of silently continuing."

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/hosted-components/vite.config.ts` around lines 72 - 75, Replace the
fragile port computation in defineConfig's server.port by explicitly reading
process.env.NEXT_PUBLIC_STACK_PORT_PREFIX, applying nullish coalescing (not ||),
validating that the prefix is non-empty and matches the expected digit pattern
(e.g., /^\d+$/), then construct the port (prefix + "09"), parse it to a number
and throw a clear Error if the prefix is missing or the resulting Number is
NaN/invalid; update the symbol references NEXT_PUBLIC_STACK_PORT_PREFIX and
server.port in vite.config.ts so the config fails fast on bad input rather than
producing NaN.

---

42-55: Use performance.now() for the timeout clock.

This loop is measuring elapsed time with wall-clock time, so clock adjustments can skew the timeout. performance.now() is the safer timer here.

Suggested diff

   async function waitForFile(filePath: string, timeoutMs = 60_000): Promise<void> {
     if (fs.existsSync(filePath)) return
-    const start = Date.now()
+    const start = performance.now()
     return new Promise((resolve, reject) => {
       const interval = setInterval(() => {
         if (fs.existsSync(filePath)) {
           clearInterval(interval)
           resolve()
-        } else if (Date.now() - start > timeoutMs) {
+        } else if (performance.now() - start > timeoutMs) {
           clearInterval(interval)
           reject(new Error(`Timed out waiting for ${filePath} to exist`))
         }
       }, 500)
     })

As per coding guidelines, "Don't use Date.now() for measuring elapsed (real) time, instead use performance.now()".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/hosted-components/vite.config.ts` around lines 42 - 55, In waitForFile,
replace the Date.now() wall-clock timing with a monotonic timer: set const start
= performance.now() and in the interval check use (performance.now() - start >
timeoutMs) to detect timeout; if your Node runtime may not expose global
performance, import it via const { performance } = require('perf_hooks') or an
equivalent ESM import at the top of the file, and ensure timeoutMs remains
milliseconds (performance.now() is also in ms).