From 037e18c3fea97b7c8041a000e26611dc9ad4cf10 Mon Sep 17 00:00:00 2001
From: valency-studio-bot <bot@valencystudio.local>
Date: Thu, 30 Jul 2026 13:42:29 +0000
Subject: [PATCH] Engineering pass: fix polling leak, security hardening, and
 migration to Next 16 conventions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Critical bug fixes:
- roblox-panel.tsx: fix polling interval leak (effect deps caused
  multiple intervals to stack). Now uses single setInterval with
  proper cleanup; uses refs to avoid effect re-creation.
- history-list.tsx: same pattern — ref-based polling that doesn't
  recreate on every state update.
- roblox-api.ts: verifyApiKey was a no-op (404 from a non-existent
  endpoint was treated as 'valid'). Now probes a real asset endpoint
  and uses 401/403 vs 200/404 to discriminate.
- audio-processor.ts: getWaveform was returning Math.random() on
  ffmpeg failure, masking broken files. Now returns empty array so
  the UI can show a clear 'no waveform' state.
- audio-processor.ts: ensureDirs moved off module top-level to
  prevent import-time side effects on read-only filesystems and to
  avoid Turbopack NFT issues. All UPLOAD_DIR/PROCESSED_DIR uses
  replaced with lazy getters.

Security:
- store.ts: Roblox API key is NO LONGER persisted to localStorage.
  Identity is remembered; the user must re-verify with their key
  before any upload. Includes one-time migration that scrubs
  legacy keys from existing localStorage entries.
- /api/roblox/status: API key moved from URL query string to
  request body (POST) or X-Roblox-Api-Key header. The key is no
  longer logged in reverse-proxy access logs or browser history.
- /api/roblox/verify and /api/roblox/upload: added lightweight
  in-memory rate limiting (10 req/min for verify, 20 req/min for
  upload) to prevent trivial DoS and Roblox API throttling.
- /api/roblox/upload: explicit 100 MB cap on in-memory audio
  buffer with proper 413 response.

Next.js 16 migration:
- src/middleware.ts → src/proxy.ts: Next 16 deprecated the
  middleware file convention in favor of proxy (same semantics).
- next.config.ts: reactStrictMode enabled to catch effect bugs;
  ignoreBuildErrors kept for legacy reasons. Removed untyped
  eslint.ignoreDuringBuilds option.
- outputFileTracingExcludes for ./.tmp-audio/** and bot-config.json
  to avoid Turbopack NFT pulling in the whole project.

TypeScript / code quality:
- audio/file/route.ts: Buffer → Uint8Array wrap for NextResponse
  BodyInit compatibility.
- waveform-player.tsx: removed invalid 'volume' prop from
  <audio>, apply volume via ref.
- auth.ts: NextAuthOptions type, module augmentation for
  session.user.id, dropped invalid 'trustHost' config key.
- discord-bot.ts: clearer error messages for privileged-intent
  and invalid-token failures; process.exit(1) on login failure
  so process managers can detect; unhandled rejection / uncaught
  exception handlers; fixed a console.log template-string typo.

- eslint.config.mjs: react-hooks/exhaustive-deps re-enabled as
  'warn' — disabling it was the root cause of the polling leak.

- .env.example: documented AUTH_TRUST_HOST for non-localhost deploys.
- .gitignore: ignore npm/yarn/pnpm lockfiles (project uses bun).
- new src/lib/rate-limit.ts: in-memory token-bucket limiter.

Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>
---
 .env.example                       |   3 +
 .gitignore                         |   6 +
 eslint.config.mjs                  |   4 +-
 next.config.ts                     |  16 ++-
 src/app/api/audio/file/route.ts    |   6 +-
 src/app/api/roblox/status/route.ts |  79 ++++++++---
 src/app/api/roblox/upload/route.ts |  19 +++
 src/app/api/roblox/verify/route.ts |  11 ++
 src/components/history-list.tsx    |  76 ++++++-----
 src/components/roblox-panel.tsx    | 202 +++++++++++++++++------------
 src/components/waveform-player.tsx |   8 +-
 src/discord-bot.ts                 |  47 ++++++-
 src/lib/audio-processor.ts         |  64 ++++++---
 src/lib/auth.ts                    |  41 ++++--
 src/lib/rate-limit.ts              |  57 ++++++++
 src/lib/roblox-api.ts              |  40 ++++--
 src/lib/store.ts                   |  42 +++++-
 src/{middleware.ts => proxy.ts}    |  10 +-
 18 files changed, 538 insertions(+), 193 deletions(-)
 create mode 100644 src/lib/rate-limit.ts
 rename src/{middleware.ts => proxy.ts} (55%)

diff --git a/.env.example b/.env.example
index 67e9b5e..ab1de0c 100644
--- a/.env.example
+++ b/.env.example
@@ -8,6 +8,9 @@ AUTH_DISCORD_SECRET=your_discord_client_secret
 # NextAuth
 AUTH_SECRET=generate_with_openssl_rand_-base64_32
 AUTH_URL=http://localhost:3000
+# Required when deploying behind a reverse proxy / on non-localhost hosts.
+# Leave unset for `localhost` development.
+# AUTH_TRUST_HOST=true
 
 # Discord Webhook (optional) — untuk notifikasi login user ke channel Discord
 DISCORD_LOG_WEBHOOK_URL=
diff --git a/.gitignore b/.gitignore
index bf226e0..19611c1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,12 @@ node_modules
 !.yarn/releases
 !.yarn/versions
 /prisma/db/custom.db
+# Lockfiles: this project uses bun, so npm/yarn/pnpm lockfiles are
+# generated artifacts (e.g. by `npm install` for one-off verification)
+# and should not be committed. bun.lockb* is referenced in the Dockerfile.
+/package-lock.json
+/yarn.lock
+/pnpm-lock.yaml
 
 # testing
 /coverage
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 84578b3..d492a6f 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -17,7 +17,9 @@ const eslintConfig = [...nextCoreWebVitals, ...nextTypescript, {
     "@typescript-eslint/no-unused-disable-directive": "off",
     
     // React rules
-    "react-hooks/exhaustive-deps": "off",
+    // exhaustive-deps stays *enabled as a warning* — disabling it was the
+    // root cause of the polling-interval leak in roblox-panel.tsx.
+    "react-hooks/exhaustive-deps": "warn",
     "react-hooks/purity": "off",
     "react/no-unescaped-entities": "off",
     "react/display-name": "off",
diff --git a/next.config.ts b/next.config.ts
index 277d153..7c982c2 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -2,10 +2,24 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   output: "standalone",
+  // `audio-processor.ts` and `discord-bot.ts` use `node:fs`, `child_process`,
+  // and a dynamic `process.cwd()` for runtime file management. The file
+  // tracer follows those imports and can pull in the whole project; we
+  // explicitly exclude the runtime temp directories and the bot config
+  // file (which lives at the project root) from the trace.
+  outputFileTracingExcludes: {
+    "*": ["./.tmp-audio/**", "./bot-config.json"],
+  },
+  // NOTE: `ignoreBuildErrors` is intentionally enabled so the project builds
+  // in CI even when transient type issues are present (the codebase has a
+  // handful of pre-existing, non-fatal typing issues we're working through).
   typescript: {
     ignoreBuildErrors: true,
   },
-  reactStrictMode: false,
+  // Strict mode in dev is invaluable for catching effect-related bugs like
+  // the polling-interval leak that was fixed in roblox-panel.tsx. In prod
+  // it's a no-op (no double-invocation).
+  reactStrictMode: true,
 };
 
 export default nextConfig;
diff --git a/src/app/api/audio/file/route.ts b/src/app/api/audio/file/route.ts
index 40f31ce..69f5022 100644
--- a/src/app/api/audio/file/route.ts
+++ b/src/app/api/audio/file/route.ts
@@ -26,7 +26,9 @@ export async function GET(req: NextRequest) {
       const start = m[1] ? parseInt(m[1]) : 0;
       const end = m[2] ? parseInt(m[2]) : stat.size - 1;
       const chunk = buf.subarray(start, end + 1);
-      return new NextResponse(chunk, {
+      // Wrap in Uint8Array — NextResponse's BodyInit typing in Next 16 doesn't
+      // accept Node Buffer directly, but the underlying runtime handles it.
+      return new NextResponse(new Uint8Array(chunk), {
         status: 206,
         headers: {
           "Content-Type": "audio/mpeg",
@@ -39,7 +41,7 @@ export async function GET(req: NextRequest) {
     }
   }
 
-  return new NextResponse(buf, {
+  return new NextResponse(new Uint8Array(buf), {
     headers: {
       "Content-Type": "audio/mpeg",
       "Content-Length": String(stat.size),
diff --git a/src/app/api/roblox/status/route.ts b/src/app/api/roblox/status/route.ts
index f393be9..3ddb27c 100644
--- a/src/app/api/roblox/status/route.ts
+++ b/src/app/api/roblox/status/route.ts
@@ -5,35 +5,72 @@ export const runtime = "nodejs";
 export const dynamic = "force-dynamic";
 export const maxDuration = 30;
 
-/** GET /api/roblox/status?apiKey=xxx&operationId=yyy
- *    → polls operation completion, returns { phase, operationDone, assetId }
- * GET /api/roblox/status?apiKey=xxx&assetId=yyy
- *    → checks moderation status, returns { phase, moderationState, moderationReason }
+/**
+ * Poll Roblox Open Cloud for either operation completion or asset moderation.
+ *
+ * Accepts both GET (for convenience) and POST. The API key is sent in the body
+ * for POST and in the `X-Roblox-Api-Key` header for GET — never in the query
+ * string, so it doesn't end up in reverse-proxy access logs, browser history,
+ * or referer headers.
+ *
+ * Body: { apiKey, operationId? , assetId? }
+ * GET headers: X-Roblox-Api-Key: <key>
+ * GET query: ?operationId=...&assetId=...
  */
+export async function POST(req: NextRequest) {
+  try {
+    let apiKey: string | null = null;
+    let operationId: string | null = null;
+    let assetId: string | null = null;
+
+    const contentType = req.headers.get("content-type") || "";
+    if (contentType.includes("application/json")) {
+      const body = await req.json().catch(() => ({} as Record<string, unknown>));
+      apiKey = typeof body.apiKey === "string" ? body.apiKey : null;
+      operationId = typeof body.operationId === "string" ? body.operationId : null;
+      assetId = typeof body.assetId === "string" ? body.assetId : null;
+    } else {
+      // Fallback for form submissions: read from header
+      apiKey = req.headers.get("x-roblox-api-key");
+    }
+
+    return await handleStatus(apiKey, operationId, assetId);
+  } catch (e) {
+    return NextResponse.json({ ok: false, error: (e as Error).message }, { status: 500 });
+  }
+}
+
 export async function GET(req: NextRequest) {
   try {
     const url = new URL(req.url);
-    const apiKey = url.searchParams.get("apiKey");
+    const apiKey = req.headers.get("x-roblox-api-key");
     const operationId = url.searchParams.get("operationId");
     const assetId = url.searchParams.get("assetId");
+    return await handleStatus(apiKey, operationId, assetId);
+  } catch (e) {
+    return NextResponse.json({ ok: false, error: (e as Error).message }, { status: 500 });
+  }
+}
 
-    if (!apiKey) {
-      return NextResponse.json({ ok: false, error: "apiKey wajib diisi" }, { status: 400 });
-    }
-    if (!operationId && !assetId) {
-      return NextResponse.json({ ok: false, error: "operationId atau assetId wajib diisi" }, { status: 400 });
-    }
-
-    // Phase 1: Poll operation status (if operationId provided)
-    if (operationId) {
-      const result = await getOperationStatus(apiKey, operationId);
-      return NextResponse.json(result, { status: result.ok ? 200 : 400 });
-    }
+async function handleStatus(
+  apiKey: string | null,
+  operationId: string | null,
+  assetId: string | null,
+) {
+  if (!apiKey || !apiKey.trim()) {
+    return NextResponse.json({ ok: false, error: "apiKey wajib diisi" }, { status: 400 });
+  }
+  if (!operationId && !assetId) {
+    return NextResponse.json({ ok: false, error: "operationId atau assetId wajib diisi" }, { status: 400 });
+  }
 
-    // Phase 2: Check moderation status (if assetId provided)
-    const result = await getAssetModerationStatus(apiKey, assetId!);
+  // Phase 1: Poll operation status (if operationId provided)
+  if (operationId) {
+    const result = await getOperationStatus(apiKey, operationId);
     return NextResponse.json(result, { status: result.ok ? 200 : 400 });
-  } catch (e) {
-    return NextResponse.json({ ok: false, error: (e as Error).message }, { status: 500 });
   }
+
+  // Phase 2: Check moderation status (if assetId provided)
+  const result = await getAssetModerationStatus(apiKey, assetId!);
+  return NextResponse.json(result, { status: result.ok ? 200 : 400 });
 }
diff --git a/src/app/api/roblox/upload/route.ts b/src/app/api/roblox/upload/route.ts
index bdc9b91..074f466 100644
--- a/src/app/api/roblox/upload/route.ts
+++ b/src/app/api/roblox/upload/route.ts
@@ -1,10 +1,17 @@
 import { NextRequest, NextResponse } from "next/server";
 import { createAudioAsset } from "@/lib/roblox-api";
 import { readAudioFile } from "@/lib/audio-processor";
+import { rateLimit } from "@/lib/rate-limit";
 
 export const runtime = "nodejs";
 export const maxDuration = 60;
 
+/** Hard cap for the in-process audio buffer. Roblox's audio asset limit is
+ *  ~50MB after their own processing, but we allow up to 100MB on disk in the
+ *  extract route. Anything larger than 100MB in a single Buffer is almost
+ *  certainly a bug or a DoS attempt. */
+const MAX_AUDIO_BUFFER_BYTES = 100 * 1024 * 1024;
+
 /** POST /api/roblox/upload
  * Body: { apiKey, userId, groupId?, fileName, assetName, description? }
  * Creates the asset via Open Cloud API and returns immediately with operationId
@@ -12,6 +19,12 @@ export const maxDuration = 60;
  * for operation completion and moderation status.
  */
 export async function POST(req: NextRequest) {
+  if (!rateLimit(req, { key: "roblox-upload", max: 20, windowMs: 60_000 })) {
+    return NextResponse.json(
+      { ok: false, error: "Terlalu banyak percobaan upload. Coba lagi dalam 1 menit." },
+      { status: 429, headers: { "Retry-After": "60" } },
+    );
+  }
   try {
     const body = await req.json();
     const { apiKey, userId, groupId, fileName, assetName, description } = body;
@@ -25,6 +38,12 @@ export async function POST(req: NextRequest) {
     if (!buf) {
       return NextResponse.json({ ok: false, error: "File audio yang diproses tidak ditemukan. Proses ulang audio terlebih dahulu." }, { status: 404 });
     }
+    if (buf.length > MAX_AUDIO_BUFFER_BYTES) {
+      return NextResponse.json(
+        { ok: false, error: `File terlalu besar (${(buf.length / 1024 / 1024).toFixed(1)} MB). Maksimum 100 MB.` },
+        { status: 413 },
+      );
+    }
 
     const result = await createAudioAsset({
       apiKey: apiKey.trim(),
diff --git a/src/app/api/roblox/verify/route.ts b/src/app/api/roblox/verify/route.ts
index 32e6fe9..69dfb02 100644
--- a/src/app/api/roblox/verify/route.ts
+++ b/src/app/api/roblox/verify/route.ts
@@ -1,13 +1,24 @@
 import { NextRequest, NextResponse } from "next/server";
 import { verifyRobloxApiKey } from "@/lib/roblox-api";
+import { rateLimit } from "@/lib/rate-limit";
 
 export const runtime = "nodejs";
 
 /** POST /api/roblox/verify
  * Body: { apiKey: string, userId: number }
  * Verifies a Roblox Open Cloud API key and returns the public user profile.
+ *
+ * Rate-limited: 10 requests / minute / IP. The verify endpoint hits Roblox
+ * twice (user lookup + assets probe) so we keep the budget tight to avoid
+ * our server getting us throttled by Roblox.
  */
 export async function POST(req: NextRequest) {
+  if (!rateLimit(req, { key: "roblox-verify", max: 10, windowMs: 60_000 })) {
+    return NextResponse.json(
+      { ok: false, error: "Terlalu banyak percobaan verifikasi. Coba lagi dalam 1 menit." },
+      { status: 429, headers: { "Retry-After": "60" } },
+    );
+  }
   try {
     const { apiKey, userId } = await req.json();
     if (!apiKey) return NextResponse.json({ ok: false, error: "API Key wajib diisi" }, { status: 400 });
diff --git a/src/components/history-list.tsx b/src/components/history-list.tsx
index 4a0659f..b31b0ea 100644
--- a/src/components/history-list.tsx
+++ b/src/components/history-list.tsx
@@ -82,57 +82,71 @@ export function HistoryList() {
     load();
   }, [load, historyVersion]);
 
-  // Polling for pending/reviewing items
-  React.useEffect(() => {
-    const pendingItems = items.filter(
-      (i) => i.uploadStatus === "uploaded" && i.robloxAssetId && (i.moderationStatus === "Pending" || i.moderationStatus === "Reviewing")
-    );
-
-    if (pendingItems.length === 0 || !account?.apiKey) return;
+  // Polling for pending/reviewing items. We use refs for `items` and
+  // `account` so the effect doesn't recreate the interval every time the
+  // history reloads (which would be wasteful but not technically a leak).
+  const itemsRef = React.useRef(items);
+  const accountRef = React.useRef(account);
+  React.useEffect(() => { itemsRef.current = items; }, [items]);
+  React.useEffect(() => { accountRef.current = account; }, [account]);
 
+  React.useEffect(() => {
     const interval = setInterval(async () => {
-      let updated = false;
-      const newItems = [...items];
+      const acc = accountRef.current;
+      if (!acc?.apiKey) return;
+      const liveItems = itemsRef.current;
+      const pendingItems = liveItems.filter(
+        (i) =>
+          i.uploadStatus === "uploaded" &&
+          i.robloxAssetId &&
+          (i.moderationStatus === "Pending" || i.moderationStatus === "Reviewing"),
+      );
+      if (pendingItems.length === 0) return;
 
-      for (const item of pendingItems) {
+      const updates: Array<{ id: string; moderationStatus: string; moderationReason: string | null }> = [];
+      await Promise.allSettled(pendingItems.map(async (item) => {
         try {
-          const res = await fetch(`/api/roblox/status?apiKey=${encodeURIComponent(account.apiKey)}&assetId=${item.robloxAssetId}`);
+          const res = await fetch("/api/roblox/status", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ apiKey: acc.apiKey, assetId: item.robloxAssetId }),
+          });
           const data = await res.json();
-          
           if (data.ok && data.moderationState && data.moderationState !== item.moderationStatus) {
             // Update DB
             await fetch(`/api/history?id=${item.id}`, {
               method: "PATCH",
               headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({ 
-                moderationStatus: data.moderationState, 
-                moderationReason: data.moderationReason || null 
+              body: JSON.stringify({
+                moderationStatus: data.moderationState,
+                moderationReason: data.moderationReason || null,
               }),
+            }).catch(() => {});
+            updates.push({
+              id: item.id,
+              moderationStatus: data.moderationState,
+              moderationReason: data.moderationReason || null,
             });
-            
-            // Update local state
-            const idx = newItems.findIndex((i) => i.id === item.id);
-            if (idx !== -1) {
-              newItems[idx] = { 
-                ...newItems[idx], 
-                moderationStatus: data.moderationState,
-                moderationReason: data.moderationReason || null
-              };
-              updated = true;
-            }
           }
         } catch (e) {
           console.error("Failed to poll history item", e);
         }
-      }
+      }));
 
-      if (updated) {
-        setItems(newItems);
+      if (updates.length > 0) {
+        setItems((prev) => {
+          const map = new Map(updates.map((u) => [u.id, u]));
+          return prev.map((it) => {
+            const u = map.get(it.id);
+            if (!u) return it;
+            return { ...it, moderationStatus: u.moderationStatus, moderationReason: u.moderationReason };
+          });
+        });
       }
-    }, 10000); // Poll every 10s
+    }, 10000);
 
     return () => clearInterval(interval);
-  }, [items, account]);
+  }, []);
 
   const handleDelete = async (id: string) => {
     try {
diff --git a/src/components/roblox-panel.tsx b/src/components/roblox-panel.tsx
index 01d4f8c..ee41def 100644
--- a/src/components/roblox-panel.tsx
+++ b/src/components/roblox-panel.tsx
@@ -3,7 +3,7 @@
 import * as React from "react";
 import {
   ShieldCheck, Loader2, UploadCloud, LogOut, ExternalLink, KeyRound,
-  CheckCircle2, AlertTriangle, Info, User, Users, BookOpen, Link as LinkIcon,
+  CheckCircle2, AlertTriangle, User, Users, BookOpen, Link as LinkIcon,
   Clock, XCircle, RefreshCw, Download,
 } from "lucide-react";
 import { useConverter, type SourceItem, type ProcessedItem, type ModerationState } from "@/lib/store";
@@ -41,6 +41,15 @@ export function RobloxPanel() {
   const [groupId, setGroupId] = React.useState("");
   const [showApiKey, setShowApiKey] = React.useState(false);
 
+  // Pre-fill userId from the remembered account so the user only has to
+  // paste the API key on a return visit.
+  React.useEffect(() => {
+    if (account && !userId && account.userId) setUserId(account.userId);
+    if (account?.groupId) { setUseGroup(true); setGroupId(account.groupId); }
+    // Intentionally only on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   // Processed items available for upload
   const processedItems = sources
     .map((s) => ({ source: s, processed: processedMap[s.id] }))
@@ -48,7 +57,17 @@ export function RobloxPanel() {
   const selectedForUpload = processedItems.filter((x) => x.processed.selectedForUpload);
 
   // === Polling logic (parallel for all active items) ===
-  const pollIntervalRef = React.useRef<ReturnType<typeof setInterval> | null>(null);
+  // Use a ref to keep the live API key without making the effect dep depend
+  // on every `account` mutation. Also keep the latest setter in a ref so we
+  // don't have to re-create the interval when those change.
+  const accountRef = React.useRef(account);
+  const setUploadStateRef = React.useRef(setUploadState);
+  const refreshHistoryRef = React.useRef(refreshHistory);
+  React.useEffect(() => {
+    accountRef.current = account;
+    setUploadStateRef.current = setUploadState;
+    refreshHistoryRef.current = refreshHistory;
+  });
 
   React.useEffect(() => {
     // Check if any items need polling
@@ -56,96 +75,94 @@ export function RobloxPanel() {
       (u) => u.polling && u.status !== "failed" && u.status !== "idle" && u.moderationState !== "Approved" && u.moderationState !== "Rejected",
     );
 
-    if (!needsPolling || !account) {
-      if (pollIntervalRef.current) {
-        clearInterval(pollIntervalRef.current);
-        pollIntervalRef.current = null;
-      }
+    if (!needsPolling || !account || !account.apiKey) {
       return;
     }
 
-    if (!pollIntervalRef.current) {
-      pollIntervalRef.current = setInterval(async () => {
-        const state = useConverter.getState();
-        for (const [sourceId, upload] of Object.entries(state.uploadMap)) {
-          if (!upload.polling) continue;
-          if (upload.moderationState === "Approved" || upload.moderationState === "Rejected") continue;
-          if (upload.status === "failed") continue;
-
-          // Phase 1: Poll operation if we have operationId but no assetId
-          if (upload.operationId && !upload.assetId) {
-            try {
-              const res = await fetch(`/api/roblox/status?apiKey=${encodeURIComponent(account.apiKey)}&operationId=${encodeURIComponent(upload.operationId)}`);
-              const data = await safeFetchJson(res);
-              if (data.ok && data.operationDone && data.assetId) {
-                setUploadState(sourceId, { assetId: data.assetId, status: "uploaded", moderationState: "Pending" });
-                // Update history
-                if (upload.historyItemId) {
-                  fetch(`/api/history?id=${upload.historyItemId}`, {
-                    method: "PATCH",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ uploadStatus: "uploaded", robloxAssetId: data.assetId, moderationStatus: "Pending" }),
-                  });
-                }
-                refreshHistory();
-              } else if (!data.ok && data.operationDone) {
-                setUploadState(sourceId, { polling: false, status: "failed", error: data.error || "Operation gagal" });
-                if (upload.historyItemId) {
-                  fetch(`/api/history?id=${upload.historyItemId}`, {
-                    method: "PATCH",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ uploadStatus: "failed", uploadError: data.error }),
-                  });
-                }
-                refreshHistory();
+    // Single interval, lifecycle tied to whether we have work to do.
+    const intervalId = setInterval(async () => {
+      const acc = accountRef.current;
+      if (!acc) return;
+      const state = useConverter.getState();
+      const items = Object.entries(state.uploadMap).filter(([, u]) => {
+        if (!u.polling) return false;
+        if (u.status === "failed") return false;
+        if (u.moderationState === "Approved" || u.moderationState === "Rejected") return false;
+        return Boolean(u.operationId) || Boolean(u.assetId);
+      });
+      if (items.length === 0) return;
+
+      // Run all polls in parallel
+      await Promise.allSettled(items.map(async ([sourceId, upload]) => {
+        // Phase 1: Poll operation if we have operationId but no assetId
+        if (upload.operationId && !upload.assetId) {
+          try {
+            const res = await fetch("/api/roblox/status", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ apiKey: acc.apiKey, operationId: upload.operationId }),
+            });
+            const data = await safeFetchJson(res);
+            if (data.ok && data.operationDone && data.assetId) {
+              setUploadStateRef.current(sourceId, { assetId: data.assetId, status: "uploaded", moderationState: "Pending" });
+              if (upload.historyItemId) {
+                fetch(`/api/history?id=${upload.historyItemId}`, {
+                  method: "PATCH",
+                  headers: { "Content-Type": "application/json" },
+                  body: JSON.stringify({ uploadStatus: "uploaded", robloxAssetId: data.assetId, moderationStatus: "Pending" }),
+                }).catch(() => {});
               }
-            } catch {}
-          }
-          // Phase 2: Poll moderation if we have assetId
-          else if (upload.assetId && upload.moderationState !== "Approved" && upload.moderationState !== "Rejected") {
-            try {
-              const res = await fetch(`/api/roblox/status?apiKey=${encodeURIComponent(account.apiKey)}&assetId=${encodeURIComponent(upload.assetId)}`);
-              const data = await safeFetchJson(res);
-              if (data.ok && data.moderationState) {
-                const modState = data.moderationState as ModerationState;
-                setUploadState(sourceId, { moderationState: modState, moderationReason: data.moderationReason || null });
-                if (upload.historyItemId) {
-                  fetch(`/api/history?id=${upload.historyItemId}`, {
-                    method: "PATCH",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ moderationStatus: modState, moderationReason: data.moderationReason || null }),
-                  });
-                }
-                if (modState === "Approved" || modState === "Rejected") {
-                  setUploadState(sourceId, { polling: false });
-                  refreshHistory();
-                  if (modState === "Approved") {
-                    toast.success("Audio disetujui!", { description: `Asset ${upload.assetId}` });
-                  } else {
-                    toast.error("Audio ditolak", { description: data.moderationReason || "Lihat di Roblox" });
-                  }
+              refreshHistoryRef.current();
+            } else if (!data.ok && data.operationDone) {
+              setUploadStateRef.current(sourceId, { polling: false, status: "failed", error: data.error || "Operation gagal" });
+              if (upload.historyItemId) {
+                fetch(`/api/history?id=${upload.historyItemId}`, {
+                  method: "PATCH",
+                  headers: { "Content-Type": "application/json" },
+                  body: JSON.stringify({ uploadStatus: "failed", uploadError: data.error }),
+                }).catch(() => {});
+              }
+              refreshHistoryRef.current();
+            }
+          } catch {}
+          return;
+        }
+        // Phase 2: Poll moderation if we have assetId
+        if (upload.assetId && upload.moderationState !== "Approved" && upload.moderationState !== "Rejected") {
+          try {
+            const res = await fetch("/api/roblox/status", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ apiKey: acc.apiKey, assetId: upload.assetId }),
+            });
+            const data = await safeFetchJson(res);
+            if (data.ok && data.moderationState) {
+              const modState = data.moderationState as ModerationState;
+              setUploadStateRef.current(sourceId, { moderationState: modState, moderationReason: data.moderationReason || null });
+              if (upload.historyItemId) {
+                fetch(`/api/history?id=${upload.historyItemId}`, {
+                  method: "PATCH",
+                  headers: { "Content-Type": "application/json" },
+                  body: JSON.stringify({ moderationStatus: modState, moderationReason: data.moderationReason || null }),
+                }).catch(() => {});
+              }
+              if (modState === "Approved" || modState === "Rejected") {
+                setUploadStateRef.current(sourceId, { polling: false });
+                refreshHistoryRef.current();
+                if (modState === "Approved") {
+                  toast.success("Audio disetujui!", { description: `Asset ${upload.assetId}` });
+                } else {
+                  toast.error("Audio ditolak", { description: data.moderationReason || "Lihat di Roblox" });
                 }
               }
-            } catch {}
-          }
+            }
+          } catch {}
         }
-      }, 5000);
-    }
+      }));
+    }, 5000);
 
-    return () => {
-      if (pollIntervalRef.current && !needsPolling) {
-        clearInterval(pollIntervalRef.current);
-        pollIntervalRef.current = null;
-      }
-    };
-  }, [uploadMap, account, setUploadState, refreshHistory]);
-
-  // Cleanup on unmount
-  React.useEffect(() => {
-    return () => {
-      if (pollIntervalRef.current) clearInterval(pollIntervalRef.current);
-    };
-  }, []);
+    return () => clearInterval(intervalId);
+  }, [uploadMap, account !== null]);
 
   const handleVerify = async () => {
     if (!apiKey.trim()) { toast.error("Tempelkan API Key terlebih dahulu"); return; }
@@ -272,7 +289,6 @@ export function RobloxPanel() {
   };
 
   const handleLogout = () => {
-    if (pollIntervalRef.current) clearInterval(pollIntervalRef.current);
     setAccount(null);
     setApiKey(""); setUserId(""); setGroupId(""); setUseGroup(false);
   };
@@ -291,7 +307,7 @@ export function RobloxPanel() {
         )}
       </div>
 
-      {!account ? (
+      {!account || !account.apiKey ? (
         <div className="space-y-3 rounded-xl border bg-card/30 p-3">
           <div className="flex items-start gap-2 rounded-lg bg-primary/5 p-2.5 text-xs">
             <BookOpen className="mt-0.5 h-3.5 w-3.5 shrink-0 text-primary" />
@@ -353,6 +369,20 @@ export function RobloxPanel() {
         </div>
       ) : (
         <div className="space-y-3">
+          {/* Re-verify banner: account is remembered from localStorage but the
+              API key is intentionally NOT persisted for security reasons. */}
+          {!account.apiKey && (
+            <div className="flex items-start gap-2 rounded-lg border border-amber-500/30 bg-amber-500/10 p-2.5 text-xs text-amber-700 dark:text-amber-400">
+              <KeyRound className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+              <div className="space-y-1">
+                <p className="font-semibold">Sesi sebelumnya berakhir — tempelkan ulang API Key untuk melanjutkan.</p>
+                <p className="text-amber-600/90 dark:text-amber-400/80">
+                  API Key tidak disimpan di browser demi keamanan. Riwayat dan identitas Anda tetap tersimpan, namun setiap upload baru perlu re-verifikasi.
+                </p>
+              </div>
+            </div>
+          )}
+
           {/* Account card */}
           <div className="flex items-center gap-3 rounded-xl border bg-card/60 p-2.5">
             <div className="h-9 w-9 shrink-0 overflow-hidden rounded-full bg-muted">
diff --git a/src/components/waveform-player.tsx b/src/components/waveform-player.tsx
index 6207bf9..99c7723 100644
--- a/src/components/waveform-player.tsx
+++ b/src/components/waveform-player.tsx
@@ -78,12 +78,18 @@ export function WaveformPlayer({
     if (audioRef.current) audioRef.current.volume = v;
   };
 
+  // Apply initial volume once the audio element mounts.
+  React.useEffect(() => {
+    if (audioRef.current) audioRef.current.volume = volume;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [audioUrl]);
+
   const progress = duration > 0 ? current / duration : 0;
   const bars = waveform.length > 0 ? waveform : Array.from({ length: 80 }, () => 0.4);
 
   return (
     <div className={cn("w-full rounded-xl border bg-card/40 p-3", compact && "p-2")}>
-      <audio ref={audioRef} src={audioUrl} preload="metadata" crossOrigin="anonymous" volume={volume} />
+      <audio ref={audioRef} src={audioUrl} preload="metadata" crossOrigin="anonymous" />
       <div className="flex items-center gap-3">
         <Button
           type="button"
diff --git a/src/discord-bot.ts b/src/discord-bot.ts
index 72992f3..7816429 100644
--- a/src/discord-bot.ts
+++ b/src/discord-bot.ts
@@ -25,7 +25,13 @@ if (!BOT_TOKEN || !GUILD_ID || !LOG_CHANNEL_ID) {
 // ==========================================
 // 📂 PERSISTENT CONFIGURATION (JSON)
 // ==========================================
-const CONFIG_FILE = path.join(process.cwd(), "bot-config.json");
+// Resolve the config file path lazily so that `process.cwd()` doesn't
+// appear at module top-level (which trips up Turbopack's file tracing).
+let _CONFIG_FILE: string | null = null;
+function getConfigFile(): string {
+  if (!_CONFIG_FILE) _CONFIG_FILE = path.join(/*turbopackIgnore: true*/ process.cwd(), "bot-config.json");
+  return _CONFIG_FILE;
+}
 
 interface BotConfig {
   statusMessageId?: string;
@@ -33,8 +39,9 @@ interface BotConfig {
 
 function loadConfig(): BotConfig {
   try {
-    if (fs.existsSync(CONFIG_FILE)) {
-      return JSON.parse(fs.readFileSync(CONFIG_FILE, "utf-8"));
+    const cf = getConfigFile();
+    if (fs.existsSync(cf)) {
+      return JSON.parse(fs.readFileSync(cf, "utf-8"));
     }
   } catch (err) {
     console.error("[discord-bot] Error loading config:", err);
@@ -44,7 +51,7 @@ function loadConfig(): BotConfig {
 
 function saveConfig(config: BotConfig) {
   try {
-    fs.writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2), "utf-8");
+    fs.writeFileSync(getConfigFile(), JSON.stringify(config, null, 2), "utf-8");
   } catch (err) {
     console.error("[discord-bot] Error saving config:", err);
   }
@@ -74,7 +81,7 @@ async function sendEmbed(channelId: string, embed: EmbedBuilder) {
       return;
     }
 
-    console.log(`[discord-bot] Channel ${channelId} fetched: type=${ch.type}, name=${"name" in ch ? ch.name : "?"}}`);
+    console.log(`[discord-bot] Channel ${channelId} fetched: type=${ch.type}, name=${"name" in ch ? ch.name : "?"}`);
 
     if (ch.isTextBased() && ch.type !== ChannelType.GroupDM) {
       const sent = await ch.send({ embeds: [embed] });
@@ -327,6 +334,32 @@ process.on('SIGTERM', async () => {
 // 🔑 LOGIN
 // ==========================================
 client.login(BOT_TOKEN).catch((e) => {
-  console.error("[discord-bot] ❌ Failed to login:", e.message);
-  process.exit(0); 
+  const msg = (e?.message ?? String(e));
+  // Privileged-intent errors are the #1 reason bots fail to start.
+  // Surface them clearly instead of silently exiting.
+  if (/PrivilegedIntents|disallowed intent/i.test(msg)) {
+    console.error(
+      "\n[discord-bot] ❌ Login failed: a privileged intent is enabled in code " +
+      "but not in the Discord Developer Portal.\n" +
+      "  → Open https://discord.com/developers/applications\n" +
+      "  → Select this bot → Bot tab\n" +
+      "  → Enable 'Server Members Intent' and 'Presence Intent' under Privileged Gateway Intents\n" +
+      "  → Save, wait ~30s, then restart this process.\n",
+    );
+  } else if (/Invalid token|invalid token|401|UNAUTHORIZED/i.test(msg)) {
+    console.error("[discord-bot] ❌ Login failed: invalid BOT_TOKEN. Double-check the token in your .env.");
+  } else {
+    console.error("[discord-bot] ❌ Login failed:", msg);
+  }
+  // Exit non-zero so process managers (concurrently, systemd, docker) can
+  // surface the failure to the user instead of silently running web-only.
+  process.exit(1);
+});
+
+// Catch unhandled errors so a single bad event doesn't silently kill the bot.
+process.on("unhandledRejection", (reason) => {
+  console.error("[discord-bot] Unhandled rejection:", reason);
+});
+process.on("uncaughtException", (err) => {
+  console.error("[discord-bot] Uncaught exception:", err);
 });
\ No newline at end of file
diff --git a/src/lib/audio-processor.ts b/src/lib/audio-processor.ts
index fd55502..2b829a3 100644
--- a/src/lib/audio-processor.ts
+++ b/src/lib/audio-processor.ts
@@ -8,19 +8,37 @@
 
 import { execFile } from "child_process";
 import { existsSync, mkdirSync, statSync, writeFileSync, readdirSync, unlinkSync } from "fs";
-import { readFile, writeFile } from "fs/promises";
+import { readFile } from "fs/promises";
 import { join } from "path";
 import { promisify } from "util";
 
 const execFileAsync = promisify(execFile);
 
-const TMP_ROOT = join(process.cwd(), ".tmp-audio");
-const UPLOAD_DIR = join(TMP_ROOT, "uploads");
-const PROCESSED_DIR = join(TMP_ROOT, "processed");
+// Resolve the temp directories lazily. Keeping this inside a function
+// (rather than at module top level) prevents Next.js Turbopack from
+// tracing the whole project when it sees `process.cwd()` and node:fs
+// imports at module scope.
+let _UPLOAD_DIR: string | null = null;
+let _PROCESSED_DIR: string | null = null;
+function getUploadDir(): string {
+  if (!_UPLOAD_DIR) _UPLOAD_DIR = join(/*turbopackIgnore: true*/ process.cwd(), ".tmp-audio", "uploads");
+  return _UPLOAD_DIR;
+}
+function getProcessedDir(): string {
+  if (!_PROCESSED_DIR) _PROCESSED_DIR = join(/*turbopackIgnore: true*/ process.cwd(), ".tmp-audio", "processed");
+  return _PROCESSED_DIR;
+}
 
-[UPLOAD_DIR, PROCESSED_DIR].forEach((d) => {
-  if (!existsSync(d)) mkdirSync(d, { recursive: true });
-});
+/** Ensure the temp directories exist. Called lazily so that merely importing
+ *  this module (e.g. for type-checking or a route that doesn't touch disk)
+ *  doesn't fail on read-only filesystems. */
+function ensureDirs() {
+  for (const d of [getUploadDir(), getProcessedDir()]) {
+    if (!existsSync(d)) {
+      try { mkdirSync(d, { recursive: true }); } catch { /* best-effort */ }
+    }
+  }
+}
 
 const YTDLP = process.platform === "win32" ? "./yt-dlp.exe" : "./yt-dlp";
 const FFMPEG = "ffmpeg";
@@ -101,7 +119,10 @@ async function probeDuration(file: string): Promise<number> {
   }
 }
 
-/** Get waveform peaks (downsampled amplitude data) for visualization */
+/** Get waveform peaks (downsampled amplitude data) for visualization.
+ *  On error (corrupt file, unsupported codec, ffmpeg failure) we return an
+ *  empty array so the UI can show a clear "no waveform" state instead of
+ *  random-looking bars that masquerade as real audio data. */
 async function getWaveform(file: string, samples = 120): Promise<number[]> {
   try {
     const args = [
@@ -115,6 +136,7 @@ async function getWaveform(file: string, samples = 120): Promise<number[]> {
     const { stdout } = await execFileAsync(FFMPEG, args, { maxBuffer: 50 * 1024 * 1024 });
     const buf = Buffer.from(stdout);
     const view = new Int16Array(buf.buffer, buf.byteOffset, Math.floor(buf.length / 2));
+    if (view.length === 0) return [];
     const peaks: number[] = [];
     const blockSize = Math.max(1, Math.floor(view.length / samples));
     for (let i = 0; i < samples; i++) {
@@ -130,7 +152,8 @@ async function getWaveform(file: string, samples = 120): Promise<number[]> {
     }
     return peaks;
   } catch {
-    return Array.from({ length: samples }, () => Math.random() * 0.7 + 0.1);
+    // Empty waveform — caller can decide what to render.
+    return [];
   }
 }
 
@@ -139,12 +162,13 @@ async function getWaveform(file: string, samples = 120): Promise<number[]> {
  *  "Sign in to confirm you're not a bot" challenge.
  */
 export async function extractAudioFromUrl(mediaUrl: string, cookies?: string): Promise<ExtractResult> {
+  ensureDirs();
   // Write cookies to a temp file if provided
   let cookieFile: string | null = null;
   if (cookies && cookies.trim()) {
     const normalized = normalizeCookies(cookies.trim());
     if (normalized) {
-      cookieFile = join(UPLOAD_DIR, `.cookies_${Date.now()}_${Math.random().toString(36).slice(2, 8)}.txt`);
+      cookieFile = join(getUploadDir(), `.cookies_${Date.now()}_${Math.random().toString(36).slice(2, 8)}.txt`);
       writeFileSync(cookieFile, normalized, { mode: 0o600 });
     }
   }
@@ -157,7 +181,7 @@ export async function extractAudioFromUrl(mediaUrl: string, cookies?: string): P
 
   try {
     const id = `src_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
-    const outPattern = join(UPLOAD_DIR, `${id}.%(ext)s`);
+    const outPattern = join(getUploadDir(), `${id}.%(ext)s`);
 
     const cookieArgs = cookieFile ? ["--cookies", cookieFile] : [];
     // Enable the node JS runtime so yt-dlp can solve YouTube's n-signature
@@ -215,9 +239,9 @@ export async function extractAudioFromUrl(mediaUrl: string, cookies?: string): P
     }
 
     // Find the downloaded file
-    const files = readdirSync(UPLOAD_DIR).filter((f) => f.startsWith(id));
+    const files = readdirSync(getUploadDir()).filter((f) => f.startsWith(id));
     if (files.length === 0) throw new Error("File hasil ekstraksi tidak ditemukan");
-    const file = join(UPLOAD_DIR, files[0]);
+    const file = join(getUploadDir(), files[0]);
     const stat = statSync(file);
 
     if (!duration) duration = await probeDuration(file);
@@ -311,9 +335,10 @@ function jsonCookiesToNetscape(cookies: any[]): string {
 
 /** Save an uploaded file to the uploads dir */
 export async function saveUploadedFile(file: File): Promise<ExtractResult> {
+  ensureDirs();
   try {
     const id = `src_${Date.now()}_${Math.random().toString(36).slice(2, 8)}_${file.name.replace(/[^\w.\-]/g, "_")}`;
-    const filePath = join(UPLOAD_DIR, id);
+    const filePath = join(getUploadDir(), id);
     const buf = Buffer.from(await file.arrayBuffer());
     writeFileSync(filePath, buf);
 
@@ -337,10 +362,11 @@ export async function saveUploadedFile(file: File): Promise<ExtractResult> {
 
 /** Process audio with FFmpeg according to options */
 export async function processAudioFile(options: ProcessOptions): Promise<ProcessResult> {
+  ensureDirs();
   try {
     const inputPath = options.inputFile.startsWith("/")
       ? options.inputFile
-      : join(UPLOAD_DIR, options.inputFile);
+      : join(getUploadDir(), options.inputFile);
     if (!existsSync(inputPath)) {
       return { ok: false, error: "File input tidak ditemukan", file: "", filePath: "", duration: 0, size: 0, waveform: [] };
     }
@@ -353,7 +379,7 @@ export async function processAudioFile(options: ProcessOptions): Promise<Process
 
     const filter = buildFilterChain(fullOpts);
     const outId = `proc_${Date.now()}_${Math.random().toString(36).slice(2, 8)}.mp3`;
-    const outputPath = join(PROCESSED_DIR, outId);
+    const outputPath = join(getProcessedDir(), outId);
 
     const args = [
       "-y",
@@ -387,7 +413,7 @@ export async function processAudioFile(options: ProcessOptions): Promise<Process
 
 /** Read a file from uploads or processed dir for streaming */
 export async function readAudioFile(name: string, type: "upload" | "processed"): Promise<Buffer | null> {
-  const dir = type === "upload" ? UPLOAD_DIR : PROCESSED_DIR;
+  const dir = type === "upload" ? getUploadDir() : getProcessedDir();
   const filePath = join(dir, name);
   if (!existsSync(filePath)) return null;
   return readFile(filePath);
@@ -395,7 +421,7 @@ export async function readAudioFile(name: string, type: "upload" | "processed"):
 
 /** Get file stat */
 export function getAudioFileStat(name: string, type: "upload" | "processed") {
-  const dir = type === "upload" ? UPLOAD_DIR : PROCESSED_DIR;
+  const dir = type === "upload" ? getUploadDir() : getProcessedDir();
   const filePath = join(dir, name);
   if (!existsSync(filePath)) return null;
   return statSync(filePath);
@@ -405,7 +431,7 @@ export function getAudioFileStat(name: string, type: "upload" | "processed") {
 export function cleanupOldFiles(maxAgeMs = 2 * 60 * 60 * 1000): number {
   const now = Date.now();
   let removed = 0;
-  for (const dir of [UPLOAD_DIR, PROCESSED_DIR]) {
+  for (const dir of [getUploadDir(), getProcessedDir()]) {
     for (const f of readdirSync(dir)) {
       const p = join(dir, f);
       try {
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index 83656b6..7d499ed 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -1,10 +1,24 @@
-import NextAuth from "next-auth";
+import NextAuth, { type NextAuthOptions } from "next-auth";
 import DiscordProvider from "next-auth/providers/discord";
+import type { Session } from "next-auth";
+
+// Module augmentation so `session.user.id` is typed correctly. The default
+// `Session` from next-auth only has `name/email/image`.
+declare module "next-auth" {
+  interface Session {
+    user: {
+      id?: string;
+      name?: string | null;
+      email?: string | null;
+      image?: string | null;
+    };
+  }
+}
 
 const BOT_TOKEN = process.env.BOT_TOKEN;
 const LOG_CHANNEL_ID = process.env.LOG_CHANNEL_ID;
 
-async function notifyLogin(user: any, account: any) {
+async function notifyLogin(user: { name?: string | null; email?: string | null; image?: string | null }, account: { provider?: string; providerAccountId?: string } | null) {
   if (!BOT_TOKEN || !LOG_CHANNEL_ID || account?.provider !== "discord") {
     console.log("[auth] ⏭️ notifyLogin skipped:", { hasToken: !!BOT_TOKEN, hasChannel: !!LOG_CHANNEL_ID, provider: account?.provider });
     return;
@@ -13,9 +27,9 @@ async function notifyLogin(user: any, account: any) {
     const body = {
       embeds: [{
         title: "🔑 User Login",
-        description: `<@${account.providerAccountId}> **${user.name}**`,
+        description: `<@${account.providerAccountId}> **${user.name ?? "Unknown"}**`,
         fields: [
-          { name: "Discord ID", value: account.providerAccountId, inline: true },
+          { name: "Discord ID", value: account.providerAccountId ?? "?", inline: true },
           { name: "Email", value: user.email || "N/A", inline: true },
         ],
         thumbnail: { url: user.image || "" },
@@ -42,7 +56,10 @@ async function notifyLogin(user: any, account: any) {
   }
 }
 
-const handler = NextAuth({
+// `trustHost` is a v4 runtime option (read from env via NEXTAUTH_URL or
+// AUTH_TRUST_HOST) — passing it as a config key was never typed. We work
+// around the type with `as NextAuthOptions`.
+const authOptions: NextAuthOptions = {
   providers: [
     DiscordProvider({
       clientId: process.env.AUTH_DISCORD_ID!,
@@ -52,21 +69,23 @@ const handler = NextAuth({
   ],
   callbacks: {
     async signIn({ user, account }) {
-      await notifyLogin(user, account);
+      await notifyLogin(user, account as { provider?: string; providerAccountId?: string } | null);
       return true;
     },
     async session({ session, token }) {
-      if (session.user) {
-        session.user.id = token.sub!;
+      const s = session as Session;
+      if (s.user) {
+        s.user.id = token.sub;
       }
-      return session;
+      return s;
     },
   },
   pages: {
     signIn: "/login",
   },
-  trustHost: true,
-});
+};
+
+const handler = NextAuth(authOptions);
 
 export const GET = handler;
 export const POST = handler;
diff --git a/src/lib/rate-limit.ts b/src/lib/rate-limit.ts
new file mode 100644
index 0000000..b7af3ca
--- /dev/null
+++ b/src/lib/rate-limit.ts
@@ -0,0 +1,57 @@
+/**
+ * Lightweight in-memory rate limiter. Intended as a defense-in-depth layer
+ * for unauthenticated API routes — not a substitute for a proper edge
+ * rate-limiter (Cloudflare, Vercel, etc.), but enough to prevent trivial
+ * abuse from a single Node process.
+ *
+ * Usage:
+ *   if (!rateLimit(req, { key: "verify", max: 10, windowMs: 60_000 })) {
+ *     return NextResponse.json({ error: "Too many requests" }, { status: 429 });
+ *   }
+ */
+
+interface Bucket {
+  count: number;
+  resetAt: number;
+}
+
+const store = new Map<string, Bucket>();
+
+/** Free expired entries periodically so the Map doesn't grow unbounded.
+ *  We don't expose this — it's a best-effort background sweeper. */
+function maybeSweep() {
+  if (store.size < 256) return; // only sweep when meaningful
+  const now = Date.now();
+  for (const [k, v] of store) {
+    if (v.resetAt <= now) store.delete(k);
+  }
+}
+
+export function rateLimit(
+  req: Request,
+  opts: { key: string; max: number; windowMs: number },
+): boolean {
+  maybeSweep();
+  // Use a coarse client identifier. If behind a proxy, prefer x-forwarded-for.
+  const fwd = req.headers.get("x-forwarded-for");
+  const ip = fwd?.split(",")[0]?.trim() || req.headers.get("x-real-ip") || "unknown";
+  const k = `${opts.key}:${ip}`;
+  const now = Date.now();
+  const bucket = store.get(k);
+  if (!bucket || bucket.resetAt <= now) {
+    store.set(k, { count: 1, resetAt: now + opts.windowMs });
+    return true;
+  }
+  if (bucket.count >= opts.max) return false;
+  bucket.count += 1;
+  return true;
+}
+
+export function rateLimitHeaders(bucket?: { count: number; max: number; resetAt: number }) {
+  if (!bucket) return {};
+  return {
+    "X-RateLimit-Limit": String(bucket.max),
+    "X-RateLimit-Remaining": String(Math.max(0, bucket.max - bucket.count)),
+    "X-RateLimit-Reset": String(Math.floor(bucket.resetAt / 1000)),
+  };
+}
diff --git a/src/lib/roblox-api.ts b/src/lib/roblox-api.ts
index 74ce596..47c1bfd 100644
--- a/src/lib/roblox-api.ts
+++ b/src/lib/roblox-api.ts
@@ -84,17 +84,33 @@ async function fetchRobloxUser(userId: number): Promise<RobloxUser | null> {
   }
 }
 
-/** Verify the API key by making a lightweight call to the operations endpoint. */
-async function verifyApiKey(apiKey: string): Promise<boolean> {
+/** Verify the API key by making a lightweight read against the Open Cloud
+ *  Assets API. We attempt to fetch a deliberately-non-existent asset: a
+ *  correctly-scoped key returns 404 (with an `INTERNAL_ERROR` or similar
+ *  body), while a missing/under-scoped key returns 401/403. This is the
+ *  only reliable way to verify `assets:read` without uploading.
+ *
+ *  Returns: { valid: boolean, errorCode?: number, errorMessage?: string }
+ */
+async function verifyApiKey(apiKey: string): Promise<{ valid: boolean; errorCode?: number; errorMessage?: string }> {
   try {
-    const res = await fetch(`https://apis.roblox.com/assets/v1/operations/verify-${Date.now()}`, {
+    // A random non-existent asset id. Roblox returns 404 for valid keys
+    // (asset just doesn't exist) and 401/403 for invalid keys.
+    const probeId = `00000000-0000-0000-0000-000000000000`;
+    const res = await fetch(`https://apis.roblox.com/assets/v1/assets/${probeId}`, {
       headers: { "x-api-key": apiKey },
       cache: "no-store",
     });
-    if (res.status === 401 || res.status === 403) return false;
-    return true;
-  } catch {
-    return false;
+    if (res.status === 401 || res.status === 403) {
+      return { valid: false, errorCode: res.status, errorMessage: "API Key tidak valid atau tidak memiliki permission assets:read" };
+    }
+    // 200/404/400 with a JSON body = the key authenticated successfully.
+    // Network errors (5xx with no auth header response) are treated as
+    // inconclusive — return true so the user can still try to upload, since
+    // the real failure will surface on the actual upload call.
+    return { valid: true };
+  } catch (e) {
+    return { valid: true, errorMessage: (e as Error).message };
   }
 }
 
@@ -115,9 +131,13 @@ export async function verifyRobloxApiKey(
     return { ok: false, error: "User ID Roblox tidak ditemukan. Periksa kembali angka pada URL profil Anda." };
   }
 
-  const apiKeyValid = await verifyApiKey(apiKey.trim());
-  if (!apiKeyValid) {
-    return { ok: false, error: "API Key tidak valid atau tidak memiliki permission assets:read. Pastikan Anda membuat API Key di create.roblox.com/credentials dengan scope Assets (Read+Write).", user };
+  const apiKeyResult = await verifyApiKey(apiKey.trim());
+  if (!apiKeyResult.valid) {
+    return {
+      ok: false,
+      error: apiKeyResult.errorMessage || "API Key tidak valid atau tidak memiliki permission assets:read. Pastikan Anda membuat API Key di create.roblox.com/credentials dengan scope Assets (Read+Write).",
+      user,
+    };
   }
 
   return { ok: true, user, apiKeyValid: true };
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 6b8383c..b70e51e 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -199,6 +199,32 @@ function genId() {
   return `${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
 }
 
+/** One-time migration: scrub any pre-existing Roblox API key from localStorage.
+ *  Older versions of the app persisted the key in plain text, so we proactively
+ *  clear it on first load. Safe to run repeatedly — it's a no-op if no key is
+ *  present. */
+function scrubLegacyApiKey() {
+  if (typeof window === "undefined") return;
+  try {
+    const raw = localStorage.getItem("valency-studio-storage");
+    if (!raw) return;
+    const parsed = JSON.parse(raw);
+    const state = parsed?.state ?? parsed;
+    if (state?.account?.apiKey) {
+      state.account.apiKey = "";
+      localStorage.setItem("valency-studio-storage", JSON.stringify(parsed));
+    }
+  } catch {
+    // If parse fails, blow away the whole entry — better to lose UI state
+    // than to keep a leaked key around.
+    try { localStorage.removeItem("valency-studio-storage"); } catch {}
+  }
+}
+
+if (typeof window !== "undefined") {
+  scrubLegacyApiKey();
+}
+
 export const useConverter = create<ConverterState>()(
   persist(
     (set, get) => ({
@@ -336,9 +362,16 @@ export const useConverter = create<ConverterState>()(
     {
       name: "valency-studio-storage",
       storage: createJSONStorage(() => localStorage),
-      // Only persist these fields (exclude transient loading/error states)
+      // Only persist these fields (exclude transient loading/error states).
+      // We intentionally DO NOT persist the Roblox API key — localStorage is
+      // readable by any XSS payload, so we keep the key in memory only. The
+      // account (username, avatar, userId) is persisted so the UI remembers
+      // the verified identity across reloads, but the user has to re-verify
+      // (paste key + click Verify) before any upload can resume.
       partialize: (state) => ({
-        account: state.account,
+        account: state.account
+          ? { ...state.account, apiKey: "" }
+          : null,
         sources: state.sources,
         cookies: state.cookies,
         settings: state.settings,
@@ -358,6 +391,11 @@ export const useConverter = create<ConverterState>()(
           state.uploading = false;
           state.verifying = false;
           state.verifyError = null;
+          // The persisted account has apiKey="" — treat as "needs re-verify"
+          if (state.account && !state.account.apiKey) {
+            // Keep identity visible but force re-verify before any upload.
+            state.verifyError = "Sesi sebelumnya berakhir. Tempelkan ulang API Key untuk melanjutkan.";
+          }
           // For uploads: keep polling=true if we have operationId or assetId
           // (roblox-panel will resume polling automatically). Only mark as failed
           // if we have neither (upload was interrupted mid-create).
diff --git a/src/middleware.ts b/src/proxy.ts
similarity index 55%
rename from src/middleware.ts
rename to src/proxy.ts
index 05dfce4..63192c4 100644
--- a/src/middleware.ts
+++ b/src/proxy.ts
@@ -2,7 +2,15 @@ import { getToken } from "next-auth/jwt";
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 
-export async function middleware(req: NextRequest) {
+/**
+ * Next.js 16 deprecated the `middleware.ts` convention in favor of
+ * `proxy.ts` (same role, new name). The semantics are identical — this
+ * file is loaded at the edge and runs before any request hits a route.
+ *
+ * If you ever downgrade to Next.js ≤ 15, rename this file back to
+ * `middleware.ts` and the function name from `proxy` to `middleware`.
+ */
+export async function proxy(req: NextRequest) {
   const token = await getToken({ req, secret: process.env.AUTH_SECRET });
   if (!token) {
     const loginUrl = new URL("/login", req.url);