lib/constants.ts (3)

12-15: PROGRESS_INCREMENT vs PROGRESS_STEP — pick one.

Both look like the per-tick progress bump but with different values (15 vs 5). Upload.tsx only uses PROGRESS_STEP. Either rename one to clarify intent or remove the unused constant before more code starts importing the wrong one.

🤖 Prompt for AI Agents

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

In `@lib/constants.ts` around lines 12 - 15, There are two similar constants
PROGRESS_INCREMENT and PROGRESS_STEP—only PROGRESS_STEP is used by Upload.tsx—so
remove the unused PROGRESS_INCREMENT (or, if both are intended, rename one to
clarify distinct intent) and update any references; specifically, delete
PROGRESS_INCREMENT from lib/constants.ts (or rename it to a descriptive name if
used elsewhere) and ensure Upload.tsx continues to import and use PROGRESS_STEP
consistently.

---

4-8: Derive sub-paths from ROOT to avoid drift.

SOURCES and RENDERS repeat the literal "roomify". If ROOT ever changes, the others must be updated in lock-step.

♻️ Proposed refactor

-export const STORAGE_PATHS = {
-  ROOT: "roomify",
-  SOURCES: "roomify/sources",
-  RENDERS: "roomify/renders",
-} as const;
+const STORAGE_ROOT = "roomify";
+export const STORAGE_PATHS = {
+  ROOT: STORAGE_ROOT,
+  SOURCES: `${STORAGE_ROOT}/sources`,
+  RENDERS: `${STORAGE_ROOT}/renders`,
+} as const;

🤖 Prompt for AI Agents

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

In `@lib/constants.ts` around lines 4 - 8, STORAGE_PATHS repeats the literal
"roomify" causing drift; change SOURCES and RENDERS to derive from
STORAGE_PATHS.ROOT (i.e., set SOURCES to `${STORAGE_PATHS.ROOT}/sources` and
RENDERS to `${STORAGE_PATHS.ROOT}/renders`) so they automatically reflect any
ROOT change while keeping the exported STORAGE_PATHS as const; update any
consuming code if types change accordingly.

---

1-1: Silent empty-string fallback for PUTER_WORKER_URL will produce confusing failures.

If VITE_PUTER_WORKER_URL is missing, every consumer will end up with an empty base URL, causing requests to resolve as relative paths against the app origin instead of failing fast. Consider throwing in development (or at least a console.warn) so misconfigured environments are obvious.

const url = import.meta.env.VITE_PUTER_WORKER_URL;
if (!url && import.meta.env.DEV) {
  console.warn("VITE_PUTER_WORKER_URL is not set; Puter API calls will fail.");
}
export const PUTER_WORKER_URL = url ?? "";

🤖 Prompt for AI Agents

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

In `@lib/constants.ts` at line 1, The current constant PUTER_WORKER_URL falls back
silently to an empty string causing confusing runtime failures; update the
module so it reads import.meta.env.VITE_PUTER_WORKER_URL into a local variable,
and if it's falsy and import.meta.env.DEV is true emit a clear console.warn (or
throw in dev) indicating VITE_PUTER_WORKER_URL is not set, then export
PUTER_WORKER_URL from that validated variable instead of defaulting silently to
""; reference PUTER_WORKER_URL and
import.meta.env.VITE_PUTER_WORKER_URL/import.meta.env.DEV to locate where to
change behavior.

components/Upload.tsx (2)

3-3: Unused useNavigate import.

useNavigate is imported but never used — navigation is delegated to the onComplete callback in the parent. Drop the import.

-import { useOutletContext, useNavigate } from "react-router";
+import { useOutletContext } from "react-router";

…and the corresponding const navigate = useNavigate(); at line 15.

🤖 Prompt for AI Agents

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

In `@components/Upload.tsx` at line 3, Remove the unused navigation hook: delete
the `useNavigate` named import from the React Router import statement and remove
the `const navigate = useNavigate();` invocation in this file; keep
`useOutletContext` intact since it's used, and ensure no other references to
`navigate` remain (update any usages to use the parent `onComplete` callback if
present).

---

4-4: PROGRESS_STEP and PROGRESS_INCREMENT look like duplicates.

lib/constants.ts exports both PROGRESS_INCREMENT = 15 and PROGRESS_STEP = 5. Only PROGRESS_STEP is used here. If they represent different concepts, name them accordingly (e.g., UPLOAD_PROGRESS_STEP vs. something else); otherwise consolidate to one constant.

🤖 Prompt for AI Agents

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

In `@components/Upload.tsx` at line 4, PROGRESS_STEP and PROGRESS_INCREMENT appear
duplicate; decide whether they represent distinct semantics or a single concept,
then update the constants and usages accordingly: if they are the same, remove
one (e.g., delete PROGRESS_INCREMENT) and export only PROGRESS_STEP, then update
imports (e.g., in Upload.tsx) to import the single constant; if they are
different, give them clear distinct names (e.g., UPLOAD_PROGRESS_STEP vs
UPLOAD_PROGRESS_INCREMENT), update their definitions and all references
(including the import in Upload.tsx) to use the new names, and ensure naming
reflects their meanings.

app/routes/visualizer.$id.tsx (1)

1-1: Unused React import with the modern JSX transform.

With the new JSX transform (default in React 19), the React default import isn't needed unless you reference React.* APIs. Safe to drop to keep the file minimal.

♻️ Proposed cleanup

-import React from "react";
-
-const visualizer = () => {
+const Visualizer = () => {
   return <div>visualizer</div>;
 };

🤖 Prompt for AI Agents

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

In `@app/routes/visualizer`.$id.tsx at line 1, Remove the unused default React
import at the top of visualizer.$id.tsx (the line "import React from 'react'")
since the modern JSX transform doesn't require it; if any React APIs are used
via React.* replace with direct imports (e.g., useState, useEffect) or reference
them explicitly, otherwise delete that import line to clean up the file.

app/routes.ts (1)

3-6: Nit: inconsistent relative paths between the two route entries.

index("routes/home.tsx") and route("visualizer/:id", "./routes/visualizer.$id.tsx") both work, but pick one style for readability.

♻️ Suggested tweak

 export default [
-  index("routes/home.tsx"),
-  route("visualizer/:id", "./routes/visualizer.$id.tsx"),
+  index("routes/home.tsx"),
+  route("visualizer/:id", "routes/visualizer.$id.tsx"),
 ] satisfies RouteConfig;

🤖 Prompt for AI Agents

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

In `@app/routes.ts` around lines 3 - 6, The two route entries use inconsistent
path styles: index("routes/home.tsx") vs route("visualizer/:id",
"./routes/visualizer.$id.tsx"); pick one convention and make both consistent
(either remove the leading "./" from the visualizer path or add "./" to the home
path) so that the array of routes exported by default (the index and route
entries) use the same relative-path style for readability and consistency.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

components/Upload.tsx (2)

38-40: ⚠️ Potential issue | 🟡 Minor

Clear any existing upload interval before assigning a new one.

intervalRef.current is replaced directly on Line 38. If processFile is invoked again before completion, the previous timer can continue running.

Proposed fix

-      intervalRef.current = setInterval(() => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      intervalRef.current = setInterval(() => {
         setProgress((prev) => Math.min(prev + PROGRESS_STEP, 100));
       }, PROGRESS_INTERVAL_MS);

🤖 Prompt for AI Agents

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

In `@components/Upload.tsx` around lines 38 - 40, Before assigning a new interval
in processFile, clear any existing timer stored in intervalRef.current so the
old interval doesn't keep running; call clearInterval(intervalRef.current)
(after checking it's set) immediately before setting intervalRef.current =
setInterval(...), ensuring you reference intervalRef.current, setInterval,
PROGRESS_STEP and PROGRESS_INTERVAL_MS in the same block so repeated invocations
safely replace the previous timer.

---

25-27: ⚠️ Potential issue | 🟠 Major

Enforce file type/size in one place before starting upload flow.

Line 60 applies a broad drag-drop check (image/*), while Line 68 allows any selected file path through, and there is still no max-size guard despite the UI claim on Line 122. This can cause inconsistent behavior and large-memory reads.

Proposed fix

 import {
   PROGRESS_INTERVAL_MS,
   PROGRESS_STEP,
   REDIRECT_DELAY_MS,
+  // add these in lib/constants.ts
+  // ALLOWED_UPLOAD_MIME_TYPES,
+  // MAX_UPLOAD_BYTES,
 } from "../lib/constants";

+// Temporary local fallback until centralized constants are added
+const ALLOWED_UPLOAD_MIME_TYPES = ["image/jpeg", "image/png"];
+const MAX_UPLOAD_BYTES = 50 * 1024 * 1024;
+
 const processFile = (file: File) => {
   if (!isSignedIn) return;
+
+  if (!ALLOWED_UPLOAD_MIME_TYPES.includes(file.type)) {
+    return;
+  }
+  if (file.size > MAX_UPLOAD_BYTES) {
+    return;
+  }
+
   setFile(file);

Also applies to: 54-63, 65-71, 103-107, 122-122

🤖 Prompt for AI Agents

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

In `@components/Upload.tsx` around lines 25 - 27, Centralize and enforce file type
and size validation before any upload flow by adding a single validator (e.g.
validateAndSetFile) and using it from processFile, the drag-drop handler
(handleDrop/onDrop) and the file input handler (handleFileSelect) instead of
directly calling setFile; the validator should check mime type against the
existing allowed pattern (image/* or a stricter whitelist) and enforce the UI
max-size constant (the claimed max on Line 122) and return/raise a user-facing
error if invalid so no large or wrong-type files are ever passed to setFile or
further processing.